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

139 lines
2.3 KiB
SCSS

.wallets {
&.field.is-grouped.is-grouped-multiline {
margin: -0.5rem;
> .control {
margin: 0;
&.control-with-select {
margin: 0.5rem;
}
&:not(.control-with-select) {
.button {
margin: 0.5rem;
}
}
}
}
.button {
width: 120px;
flex-direction: column;
height: auto;
&.is-black {
background-color: #559774;
&:hover {
background-color: #94febf;
}
}
&.is-background {
color: black;
background-color: #7ddaa9;
&:hover {
background-color: #94febf;
}
}
&: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('../img/metamask-fox.svg');
}
&.is-walletConnect:before {
background-image: url('../img/walletConnect.svg');
}
&.is-generic:before {
background-image: url('../img/ethereum.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;
}
}*
}*/
}