tornado-initiation-ui/assets/styles/components/_wallets.scss

131 lines
2.2 KiB
SCSS

.wallets {
&.field.is-grouped.is-grouped-multiline {
margin: -0.5rem;
> .control {
margin: 0.5rem;
&:not(.control-with-select) {
.button {
height: 100%;
}
}
}
}
.button {
width: 120px;
flex-direction: column;
height: auto;
&.is-black {
color: $primary-invert;
background-color: #559774;
&:hover {
background-color: $primary;
}
&[disabled] {
background-color: #559774;
}
}
&:before {
content: '';
height: 64px;
width: 64px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0.25rem 0;
}
&.is-metamask:before {
background-image: url('../images/metamask-fox.svg');
}
&.is-generic:before {
background-image: url('../images/ethereum.svg');
}
&.is-trustwallet:before {
background-image: url('../images/trustwallet.svg');
}
}
.control-with-select {
display: flex;
flex-direction: column;
.button {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-width: 0;
&:before {
height: 38px;
}
}
.select {
&.is-empty {
select {
color: rgba(255, 255, 255, 0.7);
}
}
select {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
border-color: #559774;
background-color: #559774;
height: 1.929rem;
color: $primary-invert;
&:hover {
background-color: $primary;
border-color: $primary;
}
&:focus {
border-color: #559774;
box-shadow: none;
}
}
&:not(.is-multiple) {
height: 1.929rem;
&:not(.is-loading) {
&::after {
border-color: $primary-invert;
}
}
}
}
}
.network-select {
width: 120px;
overflow: hidden;
}
/*> .control:hover {
.button {
border-color: #cdcdcd;
}
&.control-with-select {
.button {
border-bottom-color: $black;
}
.select select {
border-color: #cdcdcd;
}
}*
}*/
}