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

Improve responsiveness of customize speed up slider.

Browse Source
This commit is contained in:
Dan Miller 2018-11-15 17:02:12 -03:30
parent d5411e772d
commit 4111e9f92d
3 changed files with 76 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,13 @@
} }
} }
&__footer {
header {
padding-top: 12px;
padding-bottom: 12px;
}
}
&__header-close-text { &__header-close-text {
font-size: 14px; font-size: 14px;
color: #4EADE7; color: #4EADE7;
@ -82,6 +89,10 @@
color: $scorpion; color: $scorpion;
font-size: 12px; font-size: 12px;
@media screen and (max-width: $break-small) {
padding: 4px 21px;
}
&__send-info, &__transaction-info, &__total-info, &__fiat-total-info { &__send-info, &__transaction-info, &__total-info, &__fiat-total-info {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@ -95,11 +106,19 @@
&__total-info { &__total-info {
&__label { &__label {
font-size: 16px; font-size: 16px;
@media screen and (max-width: $break-small) {
font-size: 14px;
}
} }
&__value { &__value {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
@media screen and (max-width: $break-small) {
font-size: 14px;
}
} }
} }

5
ui/app/components/sidebars/index.scss
View File

@ -60,6 +60,11 @@
width: 408px; width: 408px;
left: calc(100% - 408px); left: calc(100% - 408px);
} }
@media screen and (max-width: $break-small) {
width: 100%;
left: 0%;
}
} }
.sidebar-overlay { .sidebar-overlay {

58
ui/app/components/sidebars/sidebar-content.scss
View File

@ -2,10 +2,24 @@
.gas-modal-page-container { .gas-modal-page-container {
.page-container { .page-container {
max-width: 100%; max-width: 100%;
&__content {
display: flex;
overflow-y: initial;
}
@media screen and (max-width: $break-small) {
max-width: 344px;
min-height: auto;
}
} }
.gas-price-chart { .gas-price-chart {
margin-left: 10px; margin-left: 10px;
&__root {
max-height: 160px !important;
}
} }
.page-container__bottom { .page-container__bottom {
@ -20,21 +34,53 @@
} }
.basic-tab-content { .basic-tab-content {
height: 377px; height: 318px;
margin-bottom: 0px; margin-bottom: 0px;
border-bottom: 1px solid #d2d8dd; border-bottom: 1px solid #d2d8dd;
@media screen and (max-width: $break-small) {
padding-left: 14px;
padding-bottom: 21px;
}
.gas-price-button-group--alt {
@media screen and (max-width: $break-small) {
max-width: 318px;
&__time-estimate {
font-size: 12px;
}
}
}
} }
.advanced-tab__fee-chart { .advanced-tab {
height: 320px; &__fee-chart {
height: 320px;
@media screen and (max-width: $break-small) {
height: initial;
}
}
&__fee-chart__speed-buttons {
bottom: 77px;
@media screen and (max-width: $break-small) {
display: none;
}
}
} }
.advanced-tab__fee-chart__speed-buttons {
bottom: 77px;
}
.gas-modal-content__info-row { .gas-modal-content__info-row {
height: 170px; height: 170px;
@media screen and (max-width: $break-small) {
height: initial;
display: flex;
justify-content: center;
}
} }
} }
} }