mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Dark Mode: Send flow inputs (#14006)
This commit is contained in:
David Walsh
GitHub
parent
fc50115fef
commit
59a5566958
@ -5,10 +5,10 @@
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
min-height: 54px;
|
||||
border: 1px solid #dedede;
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
color: #4d4d4d;
|
||||
background-color: var(--color-background-default);
|
||||
color: var(--color-text-default);
|
||||
padding: 8px 10px;
|
||||
position: relative;
|
||||
|
||||
@ -37,16 +37,13 @@
|
||||
&__input {
|
||||
@include Paragraph;
|
||||
|
||||
color: #4d4d4d;
|
||||
color: var(--color-text-default);
|
||||
background: transparent;
|
||||
border: none;
|
||||
max-width: 15ch;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 16px;
|
||||
|
||||
&__disabled {
|
||||
background-color: rgb(222, 222, 222);
|
||||
}
|
||||
}
|
||||
|
||||
&__input-container {
|
||||
@ -62,10 +59,6 @@
|
||||
}
|
||||
|
||||
&--error {
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
&__disabled {
|
||||
background-color: #f2f3f4;
|
||||
border-color: var(--color-error-default);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
|
||||
.send-screen-card {
|
||||
background-color: #fff;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
padding: 46px 40.5px 26px;
|
||||
position: relative;
|
||||
@ -48,13 +48,13 @@
|
||||
border-radius: 50%;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border: 1px solid var(--alto);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
z-index: 25;
|
||||
padding: 4px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
|
||||
@media screen and (max-width: $break-small) {
|
||||
position: relative;
|
||||
@ -73,7 +73,7 @@
|
||||
.large-input {
|
||||
@include Paragraph;
|
||||
|
||||
border: 1px solid var(--dusty-gray);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 4px;
|
||||
margin: 4px 0 20px;
|
||||
}
|
||||
@ -89,7 +89,7 @@
|
||||
&--error {
|
||||
input,
|
||||
.send-screen-gas-input {
|
||||
border-color: var(--red) !important;
|
||||
border-color: var(--color-error-default) !important;
|
||||
}
|
||||
|
||||
.send-screen-input-wrapper__error-message {
|
||||
@ -99,7 +99,7 @@
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 8px;
|
||||
color: var(--red);
|
||||
color: var(--color-error-default);
|
||||
}
|
||||
}
|
||||
|
||||
@ -110,7 +110,7 @@
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 8px;
|
||||
color: var(--red);
|
||||
color: var(--color-error-default);
|
||||
}
|
||||
}
|
||||
|
||||
@ -124,7 +124,7 @@
|
||||
width: 100%;
|
||||
height: 41px;
|
||||
border-radius: 3px;
|
||||
background-color: #f3f3f3;
|
||||
background-color: var(--color-background-default);
|
||||
border-width: 0;
|
||||
border-style: none;
|
||||
display: flex;
|
||||
@ -132,7 +132,7 @@
|
||||
align-items: center;
|
||||
padding-left: 10px;
|
||||
padding-right: 12px;
|
||||
color: var(--scorpion);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
.send-screen-amount-labels {
|
||||
@ -149,11 +149,11 @@
|
||||
|
||||
.currency-toggle {
|
||||
&__item {
|
||||
color: var(--primary-blue);
|
||||
color: var(--color-primary-default);
|
||||
cursor: pointer;
|
||||
|
||||
&--selected {
|
||||
color: var(--black);
|
||||
color: var(--color-text-default);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
@ -162,7 +162,7 @@
|
||||
.send-screen-gas-input-customize {
|
||||
@include H7;
|
||||
|
||||
color: var(--primary-blue);
|
||||
color: var(--color-primary-default);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -182,7 +182,7 @@
|
||||
bottom: 50px;
|
||||
width: 237px;
|
||||
height: 307px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
opacity: 1;
|
||||
box-shadow: var(--alto) 0 0 5px;
|
||||
z-index: 1050;
|
||||
@ -195,7 +195,7 @@
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
z-index: 1200;
|
||||
background: var(--white);
|
||||
background: var(--color-background-default);
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
left: 107px;
|
||||
@ -225,7 +225,7 @@
|
||||
.gas-tooltip-label {
|
||||
@include Paragraph;
|
||||
|
||||
color: var(--tundora);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
.gas-tooltip-header {
|
||||
@ -237,7 +237,7 @@
|
||||
}
|
||||
|
||||
.gas-tooltip-input-label i {
|
||||
color: var(--silver-chalice);
|
||||
color: var(--color-icon-muted);
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
@ -246,8 +246,8 @@
|
||||
|
||||
width: 178px;
|
||||
height: 28px;
|
||||
border: 1px solid var(--alto);
|
||||
color: var(--nile-blue);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
color: var(--color-text-default);
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
@ -261,7 +261,7 @@
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 26px;
|
||||
color: var(--silver-chalice);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.gas-tooltip-input-arrows {
|
||||
@ -272,11 +272,11 @@
|
||||
right: 4px;
|
||||
width: 17px;
|
||||
height: 28px;
|
||||
border: 1px solid #dadada;
|
||||
border: 1px solid var(--color-icon-muted);
|
||||
border-left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #9b9b9b;
|
||||
color: var(--color-text-muted);
|
||||
padding: 1px 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -296,7 +296,7 @@
|
||||
&__title {
|
||||
@include H4;
|
||||
|
||||
color: var(--scorpion);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
@ -325,7 +325,7 @@
|
||||
&__content {
|
||||
width: 498px;
|
||||
height: 605px;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
padding: 46px 40.5px 26px;
|
||||
position: relative;
|
||||
@ -357,7 +357,7 @@
|
||||
&__title {
|
||||
@include H4;
|
||||
|
||||
color: var(--scorpion);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
&__description,
|
||||
@ -405,7 +405,7 @@
|
||||
&__container {
|
||||
width: 380px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
@ -434,16 +434,16 @@
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 1px solid var(--alto);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
z-index: 25;
|
||||
padding: 4px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
}
|
||||
|
||||
&__send-arrow-icon {
|
||||
@include H4;
|
||||
|
||||
color: #f28930;
|
||||
color: var(--color-secondary-default);
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
@ -451,7 +451,7 @@
|
||||
}
|
||||
|
||||
&__arrow-background {
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
position: absolute;
|
||||
@ -468,7 +468,7 @@
|
||||
&__header {
|
||||
height: 88px;
|
||||
width: 380px;
|
||||
background-color: var(--athens-grey);
|
||||
background-color: var(--color-background-alternative);
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -483,7 +483,7 @@
|
||||
&__header-tip {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: var(--athens-grey);
|
||||
background-color: var(--color-background-alternative);
|
||||
position: absolute;
|
||||
transform: rotate(45deg);
|
||||
left: 178px;
|
||||
@ -500,7 +500,7 @@
|
||||
&__title {
|
||||
@include H3;
|
||||
|
||||
color: var(--scorpion);
|
||||
color: var(--color-text-alternative);
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
@ -508,7 +508,7 @@
|
||||
&__copy {
|
||||
@include H6;
|
||||
|
||||
color: var(--gray);
|
||||
color: var(--color-text-alternative);
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
width: 287px;
|
||||
@ -518,7 +518,7 @@
|
||||
@include H7;
|
||||
|
||||
left: 8px;
|
||||
color: var(--red);
|
||||
color: var(--color-error-default);
|
||||
}
|
||||
|
||||
&__error-amount {
|
||||
@ -529,11 +529,11 @@
|
||||
@include H7;
|
||||
|
||||
left: 8px;
|
||||
color: var(--orange);
|
||||
color: var(--color-secondary-default);
|
||||
}
|
||||
|
||||
&__error-border {
|
||||
color: var(--red);
|
||||
color: var(--color-error-default);
|
||||
}
|
||||
|
||||
&__form {
|
||||
@ -572,21 +572,21 @@
|
||||
min-width: 0;
|
||||
|
||||
.currency-display {
|
||||
color: var(--tundora);
|
||||
color: var(--color-text-alternative);
|
||||
|
||||
&__currency-symbol {
|
||||
color: var(--tundora);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
|
||||
&__converted-value,
|
||||
&__converted-currency {
|
||||
color: var(--tundora);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
}
|
||||
|
||||
.account-list-item {
|
||||
&__account-secondary-balance {
|
||||
color: var(--tundora);
|
||||
color: var(--color-text-alternative);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -594,7 +594,7 @@
|
||||
&__form-label {
|
||||
@include Paragraph;
|
||||
|
||||
color: var(--scorpion);
|
||||
color: var(--color-text-alternative);
|
||||
width: 95px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
@ -604,10 +604,10 @@
|
||||
@include H7;
|
||||
|
||||
width: 100%;
|
||||
border: 1px solid var(--alto);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 4px;
|
||||
background-color: var(--white);
|
||||
color: var(--tundora);
|
||||
background-color: var(--color-background-default);
|
||||
color: var(--color-text-default);
|
||||
position: relative;
|
||||
|
||||
&__close-area {
|
||||
@ -624,9 +624,9 @@
|
||||
position: absolute;
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--geyser);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 4px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11);
|
||||
margin-top: 11px;
|
||||
margin-left: -1px;
|
||||
@ -648,14 +648,10 @@
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
padding: 8px 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($alto, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__caret {
|
||||
color: var(--silver);
|
||||
color: var(--color-text-muted);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@ -665,15 +661,11 @@
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($alto, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__asset-icon {
|
||||
.identicon {
|
||||
border: 1px solid var(--alto);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
}
|
||||
}
|
||||
|
||||
@ -720,9 +712,9 @@
|
||||
position: absolute;
|
||||
height: 220px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--geyser);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 4px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.11);
|
||||
top: 65px;
|
||||
left: 0;
|
||||
@ -737,7 +729,7 @@
|
||||
}
|
||||
|
||||
&__input-wrapper {
|
||||
border: 1px solid var(--alto);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
|
||||
@ -750,7 +742,7 @@
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -764,8 +756,8 @@
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background-color: var(--white);
|
||||
color: var(--tundora);
|
||||
background-color: var(--color-background-default);
|
||||
color: var(--color-text-alternative);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@ -779,10 +771,10 @@
|
||||
position: relative;
|
||||
height: 54px;
|
||||
width: 100%;
|
||||
border: 1px solid var(--alto);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 4px;
|
||||
background-color: var(--white);
|
||||
color: var(--tundora);
|
||||
background-color: var(--color-background-default);
|
||||
color: var(--color-text-alternative);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
@ -801,7 +793,7 @@
|
||||
width: 56px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
border: 1px solid #b0d7f2;
|
||||
border: 1px solid var(--color-primary-default);
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
@ -811,19 +803,19 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #2f9ae0;
|
||||
background: #fff;
|
||||
color: var(--color-primary-default);
|
||||
background: var(--color-background-default);
|
||||
|
||||
&__disabled {
|
||||
color: #b0d7f2;
|
||||
opacity: 0.5;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + &__button {
|
||||
background-color: var(--primary-blue);
|
||||
border: 1px solid var(--primary-blue);
|
||||
color: #fff;
|
||||
background-color: var(--color-primary-default);
|
||||
border: 1px solid var(--color-primary-default);
|
||||
color: var(--color-primary-inverse);
|
||||
}
|
||||
}
|
||||
|
||||
@ -852,9 +844,9 @@
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border: 1px solid var(--primary-blue);
|
||||
border: 1px solid var(--color-primary-default);
|
||||
border-radius: 4px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 14px;
|
||||
@ -862,7 +854,7 @@
|
||||
}
|
||||
|
||||
&__sliders-icon {
|
||||
color: var(--primary-blue);
|
||||
color: var(--color-primary-default);
|
||||
}
|
||||
|
||||
&__memo-text-area {
|
||||
@ -877,8 +869,8 @@
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
border-top: 1px solid var(--alto);
|
||||
background: var(--white);
|
||||
border-top: 1px solid var(--color-border-muted);
|
||||
background: var(--color-background-default);
|
||||
padding: 0 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@ -890,9 +882,9 @@
|
||||
}
|
||||
|
||||
&__customize-gas {
|
||||
border: 1px solid #d8d8d8;
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-background-default);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
@ -906,7 +898,7 @@
|
||||
@include H3;
|
||||
|
||||
height: 52px;
|
||||
border-bottom: 1px solid var(--alto);
|
||||
border-bottom: 1px solid var(--color-border-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -923,7 +915,7 @@
|
||||
&__close::after {
|
||||
content: '\00D7';
|
||||
font-size: 1.8em;
|
||||
color: var(--dusty-gray);
|
||||
color: var(--color-icon-default);
|
||||
cursor: pointer;
|
||||
margin-right: 19.25px;
|
||||
}
|
||||
@ -948,7 +940,7 @@
|
||||
@include H3;
|
||||
|
||||
height: 75px;
|
||||
border-top: 1px solid var(--alto);
|
||||
border-top: 1px solid var(--color-border-muted);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -979,7 +971,7 @@
|
||||
&__revert {
|
||||
@include Paragraph;
|
||||
|
||||
color: var(--silver-chalice);
|
||||
color: var(--color-text-muted);
|
||||
margin-left: 21.25px;
|
||||
}
|
||||
|
||||
@ -1002,7 +994,7 @@
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
right: 0;
|
||||
color: var(--red);
|
||||
color: var(--color-error-default);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
@ -1023,7 +1015,7 @@
|
||||
@include H4;
|
||||
|
||||
height: 26px;
|
||||
color: var(--tundora);
|
||||
color: var(--color-text-alternative);
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
@ -1032,7 +1024,7 @@
|
||||
|
||||
height: 38px;
|
||||
width: 314px;
|
||||
color: var(--tundora);
|
||||
color: var(--color-text-alternative);
|
||||
margin-top: 17px;
|
||||
}
|
||||
|
||||
@ -1043,8 +1035,8 @@
|
||||
.customize-gas-input {
|
||||
height: 54px;
|
||||
width: 315px;
|
||||
border: 1px solid var(--geyser);
|
||||
background-color: var(--white);
|
||||
border: 1px solid var(--color-border-muted);
|
||||
background-color: var(--color-background-default);
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
@ -1053,8 +1045,8 @@
|
||||
|
||||
width: 32px;
|
||||
height: 54px;
|
||||
border-left: 1px solid #dadada;
|
||||
color: var(--tundora);
|
||||
border-left: 1px solid var(--color-border-muted);
|
||||
color: var(--color-text-alternative);
|
||||
right: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
@ -1088,7 +1080,7 @@
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: #2f9ae0;
|
||||
color: var(--color-primary-default);
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@ -1101,9 +1093,9 @@
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border: 1px solid var(--primary-blue);
|
||||
border: 1px solid var(--color-primary-default);
|
||||
border-radius: 4px;
|
||||
background-color: var(--white);
|
||||
background-color: var(--color-background-default);
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 14px;
|
||||
@ -1118,14 +1110,14 @@
|
||||
justify-content: center;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-background-default);
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 14px;
|
||||
cursor: pointer;
|
||||
color: #2f9ae0;
|
||||
color: var(--color-primary-default);
|
||||
}
|
||||
|
||||
.sliders-icon {
|
||||
color: var(--primary-blue);
|
||||
color: var(--color-primary-default);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user