TheDude
/
ciphermask
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

colocate deposit-ether-modal styles (#9148)

Browse Source 
Moves the still alive deposit-ether-modal styles to be colocated with it's component, as per the examples already in place in the components/modal folder
feature/default_network_editable
Brad Decker 4 years ago committed by GitHub
parent 1419c14fb6
commit d59fc79e0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 163 additions and 164 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 162
      ui/app/components/app/modals/deposit-ether-modal/index.scss
  2. 1
      ui/app/components/app/modals/index.scss
  3. 164
      ui/app/css/itcss/components/modal.scss

162
ui/app/components/app/modals/deposit-ether-modal/index.scss
Unescape View File

@ -0,0 +1,162 @@
.deposit-ether-modal {
border-radius: 8px;
display: flex;
flex-flow: column;
height: 100%;
&__header {
width: 100%;
border-radius: 8px 8px 0 0;
background-color: $mid-gray;
display: flex;
position: relative;
padding: 25px;
flex-flow: column;
align-items: flex-start;
&__title {
color: $white;
font-size: 24px;
line-height: 32px;
}
&__description {
color: $white;
font-size: 16px;
line-height: 22px;
margin-top: 10px;
}
&__close::after {
content: '\00D7';
font-size: 2em;
color: $white;
position: absolute;
top: 20.8px;
right: 28px;
cursor: pointer;
}
}
&__buy-rows {
width: 100%;
padding: 0 30px;
display: flex;
flex-flow: column nowrap;
flex: 1;
align-items: center;
@media screen and (max-width: 575px) {
height: 0;
}
}
&__logo {
height: 60px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&__buy-row {
border-bottom: 1px solid $alto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 auto;
padding: 30px 0 20px;
min-height: 170px;
@media screen and (max-width: 575px) {
min-height: 270px;
flex-flow: column;
justify-content: flex-start;
}
&__back {
position: absolute;
top: 10px;
left: 0;
}
&__logo-container {
display: flex;
justify-content: center;
flex: 0 0 auto;
padding: 0 20px;
@media screen and (min-width: 576px) {
width: 12rem;
}
@media screen and (max-width: 575px) {
width: 100%;
max-height: 6rem;
padding-bottom: 20px;
}
}
&__right {
display: flex;
}
&__description {
color: $cape-cod;
padding-bottom: 20px;
align-self: flex-start;
@media screen and (min-width: 575px) {
width: 15rem;
}
&__title {
font-size: 20px;
line-height: 30px;
}
&__text {
font-size: 14px;
line-height: 22px;
margin-top: 7px;
}
}
&__button {
display: flex;
justify-content: flex-end;
@media screen and (min-width: 575px) {
min-width: 300px;
}
}
}
&__buy-row:last-of-type {
border-bottom: 0;
}
&__deposit-button {
width: 257px;
}
.simple-dropdown {
color: #5b5d67;
font-size: 16px;
line-height: 21px;
border: 1px solid #d8d8d8;
background-color: #fff;
text-align: center;
width: 100%;
height: 45px;
line-height: 44px;
font-weight: 300;
}
.simple-dropdown__selected {
text-align: center;
}
}

1
ui/app/components/app/modals/index.scss
Unescape View File

@ -1,5 +1,6 @@
@import 'cancel-transaction/index'; @import 'cancel-transaction/index';
@import 'confirm-remove-account/index'; @import 'confirm-remove-account/index';
@import 'deposit-ether-modal/index';
@import 'notification-modal/index'; @import 'notification-modal/index';
@import 'qr-scanner/index'; @import 'qr-scanner/index';
@import 'transaction-confirmed/index'; @import 'transaction-confirmed/index';

164
ui/app/css/itcss/components/modal.scss
Unescape View File

@ -275,167 +275,3 @@
margin: 0 5px; margin: 0 5px;
} }
} }
// Deposit Ether Modal
.deposit-ether-modal {
border-radius: 8px;
display: flex;
flex-flow: column;
height: 100%;
&__header {
width: 100%;
border-radius: 8px 8px 0 0;
background-color: $mid-gray;
display: flex;
position: relative;
padding: 25px;
flex-flow: column;
align-items: flex-start;
&__title {
color: $white;
font-size: 24px;
line-height: 32px;
}
&__description {
color: $white;
font-size: 16px;
line-height: 22px;
margin-top: 10px;
}
&__close::after {
content: '\00D7';
font-size: 2em;
color: $white;
position: absolute;
top: 20.8px;
right: 28px;
cursor: pointer;
}
}
&__buy-rows {
width: 100%;
padding: 0 30px;
display: flex;
flex-flow: column nowrap;
flex: 1;
align-items: center;
@media screen and (max-width: 575px) {
height: 0;
}
}
&__logo {
height: 60px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
&__buy-row {
border-bottom: 1px solid $alto;
display: flex;
justify-content: space-between;
align-items: center;
flex: 1 0 auto;
padding: 30px 0 20px;
min-height: 170px;
@media screen and (max-width: 575px) {
min-height: 270px;
flex-flow: column;
justify-content: flex-start;
}
&__back {
position: absolute;
top: 10px;
left: 0;
}
&__logo-container {
display: flex;
justify-content: center;
flex: 0 0 auto;
padding: 0 20px;
@media screen and (min-width: 576px) {
width: 12rem;
}
@media screen and (max-width: 575px) {
width: 100%;
max-height: 6rem;
padding-bottom: 20px;
}
}
&__right {
display: flex;
}
&__description {
color: $cape-cod;
padding-bottom: 20px;
align-self: flex-start;
@media screen and (min-width: 575px) {
width: 15rem;
}
&__title {
font-size: 20px;
line-height: 30px;
}
&__text {
font-size: 14px;
line-height: 22px;
margin-top: 7px;
}
}
&__button {
display: flex;
justify-content: flex-end;
@media screen and (min-width: 575px) {
min-width: 300px;
}
}
}
&__buy-row:last-of-type {
border-bottom: 0;
}
&__deposit-button {
width: 257px;
}
.simple-dropdown {
color: #5b5d67;
font-size: 16px;
line-height: 21px;
border: 1px solid #d8d8d8;
background-color: #fff;
text-align: center;
width: 100%;
height: 45px;
line-height: 44px;
font-weight: 300;
}
.simple-dropdown__selected {
text-align: center;
}
}

Write Preview
Loading…
Cancel
Save