mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 19:26:13 +02:00
265 lines
4.5 KiB
SCSS
265 lines
4.5 KiB
SCSS
@import './send-content/send-gas-row/send-gas-row';
|
|
|
|
.send {
|
|
&__header {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
background-color: $Grey-000;
|
|
border-bottom: none;
|
|
padding: 14px 0 3px 0;
|
|
|
|
.page-container__title {
|
|
@include H4;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.page-container__header-close-text {
|
|
@include H5;
|
|
|
|
position: absolute;
|
|
right: 1rem;
|
|
width: min-content;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
&__dialog {
|
|
margin: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__error-dialog {
|
|
margin: 1rem;
|
|
}
|
|
|
|
&__to-row {
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
flex: 0 0 auto;
|
|
background-color: $Grey-000;
|
|
border-bottom: 1px solid $alto;
|
|
}
|
|
|
|
&__select-recipient-wrapper {
|
|
@extend %col-nowrap;
|
|
|
|
flex: 1 1 auto;
|
|
height: 0;
|
|
|
|
&__list {
|
|
overflow-y: auto;
|
|
|
|
&__link {
|
|
@include Paragraph;
|
|
|
|
@extend %row-nowrap;
|
|
|
|
padding: 1rem;
|
|
border-bottom: 1px solid $alto;
|
|
border-radius: 0;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&__back-caret {
|
|
@extend %bg-contain;
|
|
|
|
display: block;
|
|
background-image: url('/images/caret-left.svg');
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 0.5rem;
|
|
|
|
[dir='rtl'] & {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__recent-group-wrapper {
|
|
@extend %col-nowrap;
|
|
|
|
&__load-more {
|
|
@include H7;
|
|
|
|
padding: 0.5rem;
|
|
text-align: center;
|
|
border-bottom: 1px solid $alto;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
&__group {
|
|
@extend %col-nowrap;
|
|
}
|
|
|
|
&__group-label {
|
|
@include H8;
|
|
|
|
background-color: $Grey-000;
|
|
color: $Grey-600;
|
|
padding: 0.5rem 1rem;
|
|
border-bottom: 1px solid $alto;
|
|
|
|
&:first-of-type {
|
|
border-top: 1px solid $alto;
|
|
}
|
|
}
|
|
|
|
&__group-item,
|
|
&__group-item--selected {
|
|
@extend %row-nowrap;
|
|
|
|
padding: 0.75rem 1rem;
|
|
align-items: center;
|
|
border-bottom: 1px solid $alto;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: rgba($alto, 0.2);
|
|
}
|
|
|
|
.identicon {
|
|
margin-right: 1rem;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
&__content {
|
|
@extend %col-nowrap;
|
|
|
|
flex: 1 1 auto;
|
|
width: 0;
|
|
}
|
|
|
|
&__title {
|
|
@include H6;
|
|
|
|
max-width: 20em;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
color: $black;
|
|
}
|
|
|
|
&__subtitle {
|
|
@include H8;
|
|
|
|
color: $Grey-500;
|
|
}
|
|
}
|
|
|
|
&__group-item--selected {
|
|
border: 2px solid #2b7cd6;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ens-input {
|
|
@extend %row-nowrap;
|
|
|
|
&__wrapper {
|
|
@extend %row-nowrap;
|
|
|
|
flex: 1 1 auto;
|
|
width: 0;
|
|
align-items: center;
|
|
background: $white;
|
|
border-radius: 0.5rem;
|
|
padding: 0.75rem 0.5rem;
|
|
border: 1px solid $Grey-100;
|
|
transition: border-color 150ms ease-in-out;
|
|
|
|
&:focus-within {
|
|
border-color: $Grey-500;
|
|
}
|
|
|
|
&__status-icon {
|
|
@extend %bg-contain;
|
|
|
|
background-image: url("/images/search-black.svg");
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
margin: 0.25rem 0.5rem 0.25rem 0.25rem;
|
|
|
|
&--error {
|
|
|
|
}
|
|
|
|
&--valid {
|
|
background-image: url("/images/check-green-solid.svg");
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
@include H6;
|
|
|
|
flex: 1 1 auto;
|
|
width: 0;
|
|
border: 0;
|
|
outline: none;
|
|
|
|
&::placeholder {
|
|
color: $Grey-200;
|
|
}
|
|
}
|
|
|
|
&__action-icon {
|
|
@extend %bg-contain;
|
|
|
|
cursor: pointer;
|
|
|
|
&--erase {
|
|
background-image: url("/images/close-gray.svg");
|
|
background-color: unset;
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
&--qrcode {
|
|
background-image: url("/images/qr-blue.svg");
|
|
background-color: unset;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
margin: 0 0.25rem;
|
|
}
|
|
}
|
|
|
|
&--valid {
|
|
border-color: $Blue-500;
|
|
|
|
.ens-input__wrapper {
|
|
&__status-icon {
|
|
background-image: url("/images/check-green-solid.svg");
|
|
}
|
|
|
|
&__input {
|
|
@extend %col-nowrap;
|
|
|
|
@include H7;
|
|
|
|
color: $Blue-500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__selected-input {
|
|
&__title {
|
|
@include H6;
|
|
|
|
@extend %ellipsify;
|
|
}
|
|
|
|
&__subtitle {
|
|
@include H7;
|
|
|
|
color: $Grey-500;
|
|
margin-top: 0.25rem;
|
|
}
|
|
}
|
|
}
|