#auth {
display: none;
&.current {
display: flex;
align-items: center;
}
}
#landing_el {
display: none;
&.current {
display: block;
padding-left: 10px;
padding-right: 10px;
}
}
.auth__modal {
min-width: 100%;
min-height: 100%;
padding-top: 40px;
padding-bottom: 40px;
}
.auth {
margin: 0 auto;
position: relative;
@include breakpoint(portrait) {
max-width: 450px;
}
}
// component header ---------------------------------------- //
.auth__info {
@include clickbtn;
position: absolute;
top: 15px;
right: 15px;
font-size: 20px;
color: #949494;
}
.auth__header {
text-align: center;
margin: auto;
padding-bottom: 20px;
color: #333;
max-width: 300px;
._img {
width: 168px;
height: 90px;
display: block;
margin: 0 auto;
margin-bottom: 10px;
svg {
height: 100%;
}
@include breakpoint(portrait) {
width: 148px;
height: 120px;
margin-bottom: 20px;
}
}
._img--large {
width: 100px;
height: 100px;
margin: 0 auto;
display: block;
}
._img--small {
width: 50px;
height: 57px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 20px;
display: block;
}
._title {
@extend .jigsaw-bold;
font-size: 42px;
line-height: 1.4;
color: white;
}
._subtitle {
font-size: 20px;
line-height: 1.3;
padding-top: 10px;
padding-bottom: 10px;
@include breakpoint(portrait) {
font-size: 24px;
line-height: 1.3;
padding-bottom: 20px;
}
}
._text {
font-size: 14px;
line-height: 1.3;
@include breakpoint(portrait) {
font-size: 16px;
line-height: 1.3;
}
}
._passphrase {
@include textselect;
font-family: monospace;
padding: 20px;
overflow: auto;
font-size: 16px;
line-height: 1.6;
background-color: #f2f2f2;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.25);
code {
}
}
}
.passphrase__accept {
display: flex;
padding-top: 20px;
max-width: 240px;
margin: 0 auto;
cursor: pointer;
@include breakpoint(portrait) {
padding-top: 40px;
max-width: 270px;
}
._checkbox {
@include clickbtn;
width: 30px;
height: 30px;
background-color: #f2f2f2;
position: relative;
border-radius: 3px;
outline: 1px solid rgba(133, 141, 240, 0);
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.25);
}
._check {
position: absolute;
width: 18px;
height: 18px;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -9px;
background-color: #575757;
}
._checktext {
flex: 1;
font-size: 13px;
margin-left: 10px;
text-align: left;
@include breakpoint(portrait) {
margin-left: 15px;
max-width: 260px;
font-size: 16px;
}
}
}
.passphrase__warning {
font-size: 13px;
background-color: $yellow;
color: darken($yellow, 25%);
padding: 10px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
@include breakpoint(portrait) {
font-size: 16px;
}
}
// buttons ---------------------------------------- //
.auth__btngroup {
width: 100%;
min-width: 240px;
margin: 0 auto;
margin-right: 20px;
margin-bottom: 10px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 4px;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.25);
@include breakpoint(portrait) {
padding: 20px;
}
}
.auth__btn {
@extend .csbtn;
margin-bottom: 5px;
@include breakpoint(portrait) {
font-size: 20px;
padding: 22px 30px 20px 30px;
}
}
.auth__btn--inactive {
display: block;
width: 100%;
margin-bottom: 5px;
padding-top: 18px;
padding-bottom: 15px;
user-select: none;
text-align: center;
font-size: 18px;
border-radius: 2px;
color: rgba(255,255,255, 0.3);
background-color: $brand-green;
box-shadow: inset 0 1px 1px 1px darken($brand-green, 20%);
transform: translate(0px, 3px);
@include breakpoint(portrait) {
font-size: 20px;
padding: 22px 30px 20px 30px;
}
}
.litecoin {
.auth__btn--inactive {
background-color: $silver;
box-shadow:inset 0 1px 1px 1px darken($silver, 20%);
}
}
.ethereum {
.auth__btn--inactive {
background-color: $ethereal;
box-shadow:inset 0 1px 1px 1px darken($ethereal, 20%);
}
}
.bitcoincash {
.auth__btn--inactive {
background-color: $bitcoincash;
box-shadow:inset 0 1px 1px 1px darken($bitcoincash, 20%);
}
}
.smileycoin {
.auth__btn--inactive {
background-color: $smlycol;
box-shadow:inset 0 1px 1px 1px darken($smlycol, 20%);
}
}
.auth__btn--choose {
@extend .csbtn;
margin-bottom: 15px;
@include breakpoint(portrait) {
font-size: 20px;
padding: 22px 30px 20px 30px;
}
}
.auth__btn--loading {
@extend .csbtn;
position: relative;
color: rgba(255,255,255, 0.3);
background-color: $brand-green;
box-shadow:inset 0 1px 1px 1px darken($brand-green, 20%);
transform: translate(0px, 3px);
margin-bottom: 5px;
display: flex;
justify-content: center;
padding-left: 4px;
padding-right: 4px;
@include breakpoint(portrait) {
font-size: 20px;
padding: 22px 30px 20px 30px;
}
&:active {
box-shadow:inset 0 1px 1px 1px darken($brand-green, 20%);
transform: translate(0px, 3px);
}
&:hover {
color: rgba(255,255,255, 0.3);
}
}
.litecoin {
.auth__btn--loading {
background-color: $silver;
box-shadow:inset 0 1px 1px 1px darken($silver, 20%);
}
}
.ethereum {
.auth__btn--loading {
background-color: $ethereal;
box-shadow:inset 0 1px 1px 1px darken($ethereal, 20%);
}
}
.bitcoincash {
.auth__btn--loading {
background-color: $bitcoincash;
box-shadow:inset 0 1px 1px 1px darken($bitcoincash, 20%);
}
}
.smileycoin {
.auth__btn--loading {
background-color: $smlycol;
box-shadow:inset 0 1px 1px 1px darken($smlycol, 20%);
}
}
.auth__btn--existing {
@extend .csbtn;
margin-bottom: 5px;
@include breakpoint(portrait) {
font-size: 20px;
padding: 22px 30px 20px 30px;
}
}
// inputs ---------------------------------------- //
.auth__passphrase {
padding-bottom: 10px;
label {
@include clickbtn;
color: #333;
}
.close__input {
._icon{
.svg-close {
fill: #969594;
}
}
}
}
.auth__pin {
max-width: 250px;
margin: 0 auto;
color: #333;
@include breakpoint(portrait) {
max-width: 450px;
}
label {
@include clickbtn;
}
}
.auth__passviewer {
@include noselect;
position: relative;
background-color: white;
padding: 10px;
border: 1px solid #d7d5d4;
border-radius: 5px;
text-align: center;
font-size: 20px;
margin-bottom: 20px;
overflow: hidden;
height: 50px;
._word {
display: block;
position: absolute;
margin-top: -16px;
top: 50%;
bottom: 0;
left: 0;
right: 0;
transform: translateX(100%);
transition: transform .3s ease;
&.middle {
transform: translateX(0);
}
&.left {
transform: translateX(-100%);
}
}
._progress {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
background-color: #589fdd;
width: 20px;
border-bottom-left-radius: 5px;
}
}
// text nodes ---------------------------------------- //
.auth__progress {
padding-top: 20px;
text-align: center;
}
.auth__altmsg {
text-align: center;
._link {
color: #333;
font-size: 14px;
display: inline-block;
padding: 5px;
@include clickbtn;
&:active {
text-decoration: underline;
}
}
}
.auth___text {
text-align: center;
padding-top: 20px;
}
// footer -------------------------------------------- //
.auth__footer {
padding-bottom: 40px;
color: #333;
text-align: center;
._link {
color: #333;
font-size: 14px;
display: inline-block;
padding: 5px;
@include clickbtn;
@include breakpoint(portrait) {
font-size: 16px;
}
&:active {
text-decoration: underline;
}
}
}
.auth__input-group {
._label {
@include noselect;
cursor: pointer;
display: block;
position: relative;
@include breakpoint(portrait) {
font-size: 18px;
}
&.pin {
max-width: 200px;
margin: 0 auto;
@include breakpoint(portrait) {
max-width: 100%;
}
}
}
.input__container {
position: relative;
margin-top: 5px;
@include breakpoint(portrait) {
margin-bottom: 5px;
}
}
._input {
@extend .jigsaw-light;
background-color: #fff;
border: 1px solid #ccc;
color: #333;
height: 50px;
padding-left: 10px;
padding-right: 38px;
border-radius: 3px;
@include breakpoint(portrait) {
font-size: 20px;
height: 72px;
padding-right: 58px;
}
&:active, &:focus {
outline: 0;
border: 1px solid #999;
}
}
}
#setPin {
@extend .jigsaw-light;
background: none;
border: none;
color: white;
opacity: 0;
margin-top: 5px;
padding: 0;
margin: 0;
position: absolute;
bottom: 0;
left: -9000px;
width: 50px;
&:active, &:focus {
outline: 0;
border: none;
}
}
.pinfield {
min-width: 190px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
display: flex;
justify-content: space-between;
@include breakpoint(portrait) {
min-width: 230px;
}
._box {
position: relative;
width: 45px;
height: 65px;
background-color: white;
border-radius: 4px;
box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.25);
@include breakpoint(portrait) {
width: 55px;
height: 79px;
}
}
._dot {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #333;
position: absolute;
top: 50%;
left: 50%;
margin-left: -7px;
margin-top: -7px;
}
._text {
@extend .jigsaw-regular;
display: block;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 11px;
font-size: 32px;
@include breakpoint(portrait) {
top: 18px;
font-size: 36px;
}
}
&.is_focused {
._box {
border: 1px solid #999;
}
}
}
.ios__link__container {
padding-top: 20px;
}
.appstore__link {
display: block;
margin: 0 auto;
margin-bottom: 20px;
width: 135px;
height: 40px;
background-size: 135px 40px;
}
.opening__padding {
padding-top: 31px;
@include breakpoint(portrait) {
padding-top: 34px;
}
}
.close__input {
@include clickbtn;
width: 35px;
opacity: 0.4;
position: absolute;
right: 0;
top: 0;
bottom: 0;
@include breakpoint(portrait) {
width: 54px;
}
._icon {
display: block;
width: 20px;
height: 20px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -10px;
@include breakpoint(portrait) {
width: 30px;
height: 30px;
right: 15px;
margin-top: -15px;
}
}
}
.loading__spinner {
display: block;
width: 25px;
height: 25px;
margin: 0 auto;
margin-bottom: 10px;
margin-top: 25px;
opacity: 0.3;
animation: infinite-spinning 1s linear infinite;
@include breakpoint(portrait) {
width: 45px;
height: 45px;
}
}
