Skip to content
This repository has been archived by the owner on Aug 9, 2021. It is now read-only.

Commit

Permalink
feat: 3box branding, button states
Browse files Browse the repository at this point in the history
  • Loading branch information
@zachferland
zachferland committed May 22, 2020
1 parent 0f0a0a0 commit 12d9e9d
Show file tree
Hide file tree
Showing 6 changed files with 53 additions and 46 deletions.
Binary file removed iframe/.DS_Store
View file
Binary file not shown.
16 changes: 8 additions & 8 deletions iframe/assets/assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,56 +2,56 @@ import Logo from "./logo.svg";

const Loading = `<svg class="lds-spin" width="90px" height="90px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="translate(80,50)">
<g transform="rotate(0)">
<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="1" transform="scale(1.09585 1.09585)">
<circle cx="0" cy="0" r="10" fill="#1168df" fill-opacity="1" transform="scale(1.09585 1.09585)">
<animateTransform attributeName="transform" type="scale" begin="-1.3125s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-1.3125s"></animate>
</circle>
</g>
</g><g transform="translate(71.21320343559643,71.21320343559643)">
<g transform="rotate(45)">
<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.875" transform="scale(1.00835 1.00835)">
<circle cx="0" cy="0" r="10" fill="#1168df" fill-opacity="0.875" transform="scale(1.00835 1.00835)">
<animateTransform attributeName="transform" type="scale" begin="-1.125s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-1.125s"></animate>
</circle>
</g>
</g><g transform="translate(50,80)">
<g transform="rotate(90)">
<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.75" transform="scale(1.02085 1.02085)">
<circle cx="0" cy="0" r="10" fill="#1168df" fill-opacity="0.75" transform="scale(1.02085 1.02085)">
<animateTransform attributeName="transform" type="scale" begin="-0.9375s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.9375s"></animate>
</circle>
</g>
</g><g transform="translate(28.786796564403577,71.21320343559643)">
<g transform="rotate(135)">
<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.625" transform="scale(1.03335 1.03335)">
<circle cx="0" cy="0" r="10" fill="#1168df" fill-opacity="0.625" transform="scale(1.03335 1.03335)">
<animateTransform attributeName="transform" type="scale" begin="-0.75s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.75s"></animate>
</circle>
</g>
</g><g transform="translate(20,50.00000000000001)">
<g transform="rotate(180)">
<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.5" transform="scale(1.04585 1.04585)">
<circle cx="0" cy="0" r="10" fill="#1168df" fill-opacity="0.5" transform="scale(1.04585 1.04585)">
<animateTransform attributeName="transform" type="scale" begin="-0.5625s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.5625s"></animate>
</circle>
</g>
</g><g transform="translate(28.78679656440357,28.786796564403577)">
<g transform="rotate(225)">
<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.375" transform="scale(1.05835 1.05835)">
<circle cx="0" cy="0" r="10" fill="#1168df" fill-opacity="0.375" transform="scale(1.05835 1.05835)">
<animateTransform attributeName="transform" type="scale" begin="-0.375s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.375s"></animate>
</circle>
</g>
</g><g transform="translate(49.99999999999999,20)">
<g transform="rotate(270)">
<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.25" transform="scale(1.07085 1.07085)">
<circle cx="0" cy="0" r="10" fill="#1168df" fill-opacity="0.25" transform="scale(1.07085 1.07085)">
<animateTransform attributeName="transform" type="scale" begin="-0.1875s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="-0.1875s"></animate>
</circle>
</g>
</g><g transform="translate(71.21320343559643,28.78679656440357)">
<g transform="rotate(315)">
<circle cx="0" cy="0" r="10" fill="#F76837" fill-opacity="0.125" transform="scale(1.08335 1.08335)">
<circle cx="0" cy="0" r="10" fill="#1168df" fill-opacity="0.125" transform="scale(1.08335 1.08335)">
<animateTransform attributeName="transform" type="scale" begin="0s" values="1.1 1.1;1 1" keyTimes="0;1" dur="1.5s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.5s" repeatCount="indefinite" values="1;0" begin="0s"></animate>
</circle>
Expand Down
27 changes: 6 additions & 21 deletions iframe/assets/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 29 additions & 13 deletions iframe/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,30 @@ button {
align-items: center;
border: none;
box-shadow: 2px 3px 8px 0px #00000025;
}

.button:active:focus {
outline: none !important;
box-shadow: none;
&:active:focus {
outline: none !important;
border: none;
box-shadow: inset 1px 1px 4px #0000001a;
}

&:active {
outline: none !important;
border: none;
box-shadow: 2px 3px 8px 0px #00000025;
}

&:focus {
outline: none !important;
border: none;
box-shadow: 2px 3px 8px 0px #00000025;
}
}

.button:focus {
outline: none !important;
box-shadow: none;
.primaryButton {
color: $threeBoxBlue;
background-color: white;
border: none;
}

button {
Expand Down Expand Up @@ -483,6 +497,14 @@ button {
padding: 25px 30px 20px 30px;
color: #817972a6;
text-align: center;

a {
color: #817972a6;
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
}

.buttonFooter {
Expand Down Expand Up @@ -513,12 +535,6 @@ button {
margin-top: 25px;
}

.primaryButton {
color: $threeIdOrange;
background-color: white;
border: none;
}

.secondaryButton {
background-color: white;
border: none;
Expand Down
8 changes: 5 additions & 3 deletions iframe/css/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ $sideBarWidth: 200px;

$inputPadding: 12px 14px;

// // Brand Colors
// Brand Colors
$threeBoxBlue: #1168df;
$threeBoxBlueHover: #0950b0;
$textColor: #727581;

$threeIdOrange: #F76837;
$textColor: #817972;
// ThreeId Brand Colors
// $threeIdOrange: #F76837;
// $textColor: #817972;

$symbolGrey: #D8D8D8;

Expand Down
6 changes: 5 additions & 1 deletion iframe/html/template.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@ const template = (data,isMobile) => `
</div>
</div>
<div class='${style.footerText}'>
<p> This site uses 3ID to give you more control of your data. <span> What is this? </span></p>
<p> This site uses 3Box and 3ID to give you control of your data.
<a href="https://3box.io" rel="noopener noreferrer" target="_blank">
What is this?
</a>
</p>
</div>
</div>
</div>
Expand Down

0 comments on commit 12d9e9d

Please sign in to comment.