m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Make gas customization modal responsive.

Browse Source
This commit is contained in:
Dan Miller 2018-11-08 12:33:31 -03:30
parent a44596ec0d
commit d5411e772d
7 changed files with 32 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/app/components/gas-customization/gas-modal-page-container/index.scss
View File

@ -6,6 +6,10 @@
max-width: 391px; max-width: 391px;
min-height: 585px; min-height: 585px;
@media screen and (max-width: $break-small) {
max-width: 344px;
}
&__header { &__header {
padding: 0px; padding: 0px;
padding-top: 16px; padding-top: 16px;
@ -60,6 +64,10 @@
} }
.gas-modal-content { .gas-modal-content {
@media screen and (max-width: $break-small) {
width: 100%;
}
&__basic-tab { &__basic-tab {
height: 219px; height: 219px;
} }

8
ui/app/components/gas-customization/gas-price-button-group/index.scss
View File

@ -67,6 +67,10 @@
justify-content: stretch; justify-content: stretch;
max-width: 260px; max-width: 260px;
@media screen and (max-width: $break-small) {
max-width: 230px;
}
&__button-fiat-price { &__button-fiat-price {
font-size: 13px; font-size: 13px;
} }
@ -98,6 +102,10 @@
padding-top: 9px; padding-top: 9px;
padding-left: 8.5px; padding-left: 8.5px;
@media screen and (max-width: $break-small) {
padding-left: 4px;
}
div { div {
display: flex; display: flex;
flex-flow: column; flex-flow: column;

5
ui/app/components/gas-customization/gas-price-chart/index.scss
View File

@ -1,12 +1,17 @@
.gas-price-chart { .gas-price-chart {
display: flex; display: flex;
position: relative; position: relative;
justify-content: center;
&__root { &__root {
max-height: 154px; max-height: 154px;
max-width: 391px; max-width: 391px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@media screen and (max-width: $break-small) {
max-width: 326px;
}
} }
.tick text, .c3-axis-x-label, .c3-axis-y-label { .tick text, .c3-axis-x-label, .c3-axis-y-label {

6
ui/app/components/page-container/index.scss
View File

@ -194,10 +194,14 @@
.page-container { .page-container {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow-y: auto;
background-color: $white; background-color: $white;
border-radius: 0; border-radius: 0;
flex: 1; flex: 1;
&__content {
display: flex;
overflow-y: initial;
}
} }
} }

1
ui/app/css/itcss/components/newui-sections.scss
View File

@ -216,6 +216,7 @@ $wallet-view-bg: $alabaster;
.main-container-wrapper { .main-container-wrapper {
height: 100%; height: 100%;
width: 100%;
} }
} }

1
ui/app/css/itcss/components/send.scss
View File

@ -530,6 +530,7 @@
@media screen and (max-width: $break-small) { @media screen and (max-width: $break-small) {
margin: 0; margin: 0;
flex: 1 1 auto; flex: 1 1 auto;
width: 100%;
} }
} }

4
ui/app/css/itcss/generic/index.scss
View File

@ -18,6 +18,10 @@ body {
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
@media screen and (max-width: $break-small) {
overflow-y: overlay;
}
} }
html { html {