238 lines
4.0 KiB
SCSS
238 lines
4.0 KiB
SCSS
@import 'common/sass/variables';
|
|
@import 'common/sass/mixins';
|
|
|
|
@keyframes wallet-button-enter {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
|
|
.WalletButton {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 155px;
|
|
max-width: 230px;
|
|
min-width: 200px;
|
|
padding: 25px 15px;
|
|
margin: 0 $space-md $space;
|
|
|
|
background: #fff;
|
|
box-shadow: 0 1px 4px rgba(#000, 0.2);
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: transform 150ms ease, box-shadow 150ms ease;
|
|
animation: wallet-button-enter 400ms ease 1;
|
|
animation-fill-mode: backwards;
|
|
outline: none;
|
|
|
|
@for $i from 0 to 5 {
|
|
&:nth-child(#{$i}) {
|
|
animation-delay: 100ms + ($i * 60ms);
|
|
}
|
|
}
|
|
|
|
&:not(.is-disabled) {
|
|
&:hover,
|
|
&:focus {
|
|
transform: translateY(-2px);
|
|
z-index: 2;
|
|
box-shadow: 0 1px 4px rgba(#000, 0.12), 0 4px 6px rgba(#000, 0.12);
|
|
|
|
.WalletButton-title {
|
|
color: $brand-primary;
|
|
|
|
&-icon {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 1px 2px rgba(#000, 0.2), 0 3px 4px rgba(#000, 0.2);
|
|
}
|
|
}
|
|
|
|
&.is-disabled {
|
|
outline: none;
|
|
cursor: not-allowed;
|
|
@include show-tooltip-on-hover;
|
|
|
|
.WalletButton-inner {
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
&-inner {
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
&-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: $font-size-medium;
|
|
margin-bottom: $space * 1.25;
|
|
transition: color 150ms ease;
|
|
|
|
&-icon {
|
|
margin-right: 8px;
|
|
max-height: 26px;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
&-description {
|
|
color: $gray;
|
|
font-size: $font-size-small;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
&-example {
|
|
font-size: $font-size-xs;
|
|
color: rgba($brand-danger, 0.7);
|
|
@include ellipsis;
|
|
}
|
|
|
|
&-icons {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: 5px;
|
|
|
|
&-icon {
|
|
position: relative;
|
|
margin-left: 8px;
|
|
@include show-tooltip-on-hover;
|
|
|
|
.fa {
|
|
position: relative;
|
|
opacity: 0.6;
|
|
font-size: $font-size-medium;
|
|
|
|
&:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
&-shield {
|
|
color: $brand-primary;
|
|
}
|
|
|
|
&-exclamation-triangle {
|
|
color: $brand-warning;
|
|
}
|
|
|
|
&-question-circle,
|
|
&-eye {
|
|
color: #666;
|
|
}
|
|
|
|
&-question-circle:hover {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&--small {
|
|
height: 105px;
|
|
max-width: 180px;
|
|
min-width: 160px;
|
|
margin: 0 $space-sm $space-md;
|
|
padding: 20px 15px;
|
|
|
|
.WalletButton {
|
|
&-title {
|
|
font-size: $font-size-bump;
|
|
margin-bottom: $space-sm;
|
|
}
|
|
|
|
&-icons {
|
|
&-icon {
|
|
margin-left: 6px;
|
|
|
|
.fa {
|
|
font-size: $font-size-bump;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Mobile handling
|
|
@media screen and (max-width: $screen-xs) {
|
|
padding: 16px;
|
|
|
|
&,
|
|
&--small {
|
|
height: auto;
|
|
width: 100%;
|
|
min-width: 100%;
|
|
max-width: none;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&-title {
|
|
justify-content: flex-start;
|
|
margin: 0;
|
|
}
|
|
|
|
&-description,
|
|
&-example {
|
|
display: none;
|
|
}
|
|
|
|
&-icons {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
&-icon {
|
|
float: left;
|
|
display: block;
|
|
height: 100%;
|
|
margin: 0;
|
|
width: 48px;
|
|
text-align: center;
|
|
border-left: 1px solid #f4f4f4;
|
|
background: #fefefe;
|
|
|
|
a {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.fa {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&--small {
|
|
padding: 12px;
|
|
|
|
.WalletButton-title {
|
|
margin: 0;
|
|
}
|
|
|
|
.WalletButton-icons {
|
|
&-icon {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|