m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Update media query instances (#15068)

Browse Source
This commit is contained in:
George Marshall 2022-08-04 07:03:02 -07:00 committed by GitHub
parent 1f5964e450
commit cdc0fed828
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
71 changed files with 241 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/components/app/account-menu/index.scss
View File

@ -9,19 +9,19 @@
min-width: 150px;
color: var(--color-text-default);
@media screen and (max-width: $break-small) {
@include screen-sm-max {
right: 16px;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
right: calc((100vw - 85vw) / 2);
}
@media screen and (min-width: 769px) {
@include screen-md-min {
right: calc((100vw - 80vw) / 2);
}
@media screen and (min-width: 1281px) {
@include screen-lg-min {
right: calc((100vw - 65vw) / 2);
}
@ -36,7 +36,7 @@
background: none;
width: 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding: 0 14px;
height: 40px;
}
@ -197,7 +197,7 @@
border: 0;
width: 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding: 12px 14px;
}

10
ui/components/app/add-network/index.scss
View File

@ -2,7 +2,7 @@
&__networks-container {
padding-inline-end: 24px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding: 0;
}
}
@ -10,7 +10,7 @@
&__header {
border-bottom: 1px solid var(--color-border-default);
@media screen and (max-width: 575px) {
@include screen-sm-max {
padding-inline-start: 24px;
padding-inline-end: 24px;
}
@ -22,14 +22,14 @@
}
&__main-container {
@media screen and (max-width: 575px) {
@include screen-sm-max {
padding-inline-start: 24px;
padding-inline-end: 24px;
}
}
&__list-of-networks {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 75%;
}
}
@ -65,7 +65,7 @@
width: 100%;
padding-bottom: 8px;
@media screen and (max-width: 575px) {
@include screen-sm-max {
padding-inline-start: 24px !important;
}

16
ui/components/app/app-header/index.scss
View File

@ -8,12 +8,12 @@
width: 100%;
flex: 0 0 auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding: 1rem;
z-index: $mobile-header-z-index;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
height: 75px;
justify-content: center;
}
@ -22,13 +22,13 @@
&--icon {
height: 32px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
display: none;
}
}
&--horizontal {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: none;
}
}
@ -39,19 +39,19 @@
flex-flow: row nowrap;
width: 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
height: 100%;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 85vw;
}
@media screen and (min-width: 769px) {
@include screen-md-min {
width: 80vw;
}
@media screen and (min-width: 1281px) {
@include screen-lg-min {
width: 62vw;
}
}

2
ui/components/app/asset-list-item/asset-list-item.scss
View File

@ -58,7 +58,7 @@
padding-bottom: 0;
}
@media (min-width: $break-large) {
@include screen-sm-min {
&__warning-tooltip {
display: none;
}

10
ui/components/app/collectible-details/index.scss
View File

@ -6,7 +6,7 @@ $spacer-break-small: 16px;
.collectible-details {
padding: 0 $spacer-break-small;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
padding: 0 $spacer-break-large;
}
@ -15,14 +15,14 @@ $spacer-break-small: 16px;
flex-direction: column;
margin-bottom: $spacer-break-small;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-bottom: $spacer-break-large;
flex-direction: row;
}
}
&__info {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-width:
calc(
100% - #{$card-width-break-large} - #{$spacer-break-large}
@ -35,7 +35,7 @@ $spacer-break-small: 16px;
overflow: hidden;
margin-bottom: $spacer-break-small;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-right: $spacer-break-large;
margin-bottom: 0;
max-width: $card-width-break-large;
@ -95,7 +95,7 @@ $spacer-break-small: 16px;
&__send-button {
margin-inline-end: 8px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-width: 160px;
}
}

2
ui/components/app/edit-gas-popover/index.scss
View File

@ -1,6 +1,6 @@
.edit-gas-popover {
&__wrapper {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-height: 84vh;
}
}

2
ui/components/app/gas-customization/advanced-gas-inputs/index.scss
View File

@ -18,7 +18,7 @@
justify-content: space-between;
align-items: center;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H8;
}

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

@ -7,7 +7,7 @@
min-height: 585px;
overflow-y: initial;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
&__content {
display: flex;
overflow-y: initial;
@ -87,7 +87,7 @@
}
.gas-modal-content {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
}
@ -124,7 +124,7 @@
&__label {
@include Paragraph;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H6;
}
}
@ -134,7 +134,7 @@
font-weight: bold;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H6;
}
}

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

@ -70,7 +70,7 @@
justify-content: stretch;
min-height: 54px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
max-width: 260px;
}
@ -93,7 +93,7 @@
padding-bottom: 2px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H8;
}
}
@ -103,7 +103,7 @@
padding-bottom: 2px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H8;
}
}

4
ui/components/app/home-notification/index.scss
View File

@ -9,7 +9,7 @@
min-height: 116px;
padding: 16px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
min-width: 472px;
}
@ -45,7 +45,7 @@
flex-direction: row;
align-items: center;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 160px;
}
}

4
ui/components/app/modal/index.scss
View File

@ -8,7 +8,7 @@
flex-flow: column;
border-radius: 8px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
max-height: 450px;
}
@ -17,7 +17,7 @@
flex: 1;
padding: 16px 32px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
justify-content: center;
padding: 28px 20px;
}

2
ui/components/app/modals/confirm-remove-account/index.scss
View File

@ -43,7 +43,7 @@
margin-top: 14px;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
&__name {
width: 90px;
}

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

@ -12,7 +12,7 @@
flex: 1;
align-items: center;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
height: 0;
}
}
@ -31,7 +31,7 @@
max-height: 60px;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
height: 60px;
}
}
@ -45,7 +45,7 @@
padding: 30px 0 20px;
min-height: 170px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
min-height: 270px;
flex-flow: column;
justify-content: flex-start;
@ -63,11 +63,11 @@
flex: 0 0 auto;
padding: 0 20px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 12rem;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
max-height: 6rem;
padding-bottom: 20px;
@ -83,7 +83,7 @@
padding-bottom: 20px;
align-self: flex-start;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 15rem;
}
@ -102,7 +102,7 @@
display: flex;
justify-content: flex-end;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
min-width: 300px;
}
}

4
ui/components/app/modals/metametrics-opt-in-modal/index.scss
View File

@ -5,7 +5,7 @@
margin-right: 0%;
max-height: 75vh;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
max-height: 100vh;
}
}
@ -20,7 +20,7 @@
}
.metametrics-opt-in__footer {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-top: 10px;
justify-content: center;
margin-left: 2%;

2
ui/components/app/multiple-notifications/index.scss
View File

@ -8,7 +8,7 @@
right: 0;
margin: 8px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 340px;
}

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

@ -10,7 +10,7 @@
justify-content: space-between;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 426px;
flex: 1;
@ -94,7 +94,7 @@
align-items: center;
margin-top: 12px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
border-top: none;
}
@ -108,7 +108,7 @@
}
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
&__title {
position: initial;
}

4
ui/components/app/signature-request-original/index.scss
View File

@ -11,13 +11,13 @@
position: relative;
height: 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
top: 0;
box-shadow: none;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
height: 620px;
}

2
ui/components/app/signature-request/index.scss
View File

@ -8,7 +8,7 @@
flex-direction: column;
min-width: 0;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
flex: initial;
}
}

2
ui/components/app/signature-request/signature-request-message/index.scss
View File

@ -32,7 +32,7 @@
padding-left: 12px;
padding-right: 12px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: auto;
}
}

4
ui/components/app/srp-input/srp-input.scss
View File

@ -9,7 +9,7 @@
'too-many-words-error too-many-words-error';
}
@media (max-width: 767px) {
@include screen-md-max {
&__container {
grid-template-areas:
'title'
@ -44,7 +44,7 @@
grid-area: input;
}
@media (max-width: 767px) {
@include screen-md-max {
&__srp {
grid-template-columns: 1fr;
}

12
ui/components/app/tab-bar/index.scss
View File

@ -18,7 +18,7 @@
background-color: unset;
text-align: start;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
&:hover {
opacity: 0.4;
}
@ -28,7 +28,7 @@
}
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H4;
border-bottom: 1px solid var(--color-border-muted);
@ -44,7 +44,7 @@
&__title {
@include H4;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
@include H6;
}
}
@ -52,7 +52,7 @@
&__description {
display: none;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H6;
display: block;
@ -69,7 +69,7 @@
flex: 0 0 18px;
color: var(--color-icon-alternative);
@media screen and (min-width: $break-large) {
@include screen-sm-min {
flex: 0 0 14px;
}
}
@ -78,7 +78,7 @@
&__caret {
display: none;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: block;
margin-inline-start: auto;
margin-inline-end: 8px;

2
ui/components/app/transaction-list/index.scss
View File

@ -17,7 +17,7 @@
border-bottom: 1px solid var(--color-border-muted);
padding: 8px 0 8px 20px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding: 8px 0 8px 16px;
}
}

4
ui/components/app/whats-new-popup/index.scss
View File

@ -76,12 +76,12 @@
}
.popover-wrap.whats-new-popup__popover {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-height: 600px;
width: 500px;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
max-height: 568px;
}
}

6
ui/components/ui/list-item/index.scss
View File

@ -97,13 +97,13 @@
white-space: nowrap;
}
@media (max-width: $break-small) {
@include screen-sm-max {
&__mid-content {
display: none;
}
}
@media (min-width: $break-large) {
@include screen-sm-min {
grid-template-areas:
'icon head head head head mid mid mid mid right right right'
'icon sub sub sub sub mid mid mid mid right right right'
@ -115,7 +115,7 @@
grid-template-areas: 'icon head head head head head head head right right right right';
align-items: center;
@media (min-width: $break-large) {
@include screen-sm-min {
grid-template-areas: 'icon head head head head mid mid mid mid right right right';
}
}

4
ui/components/ui/page-container/index.scss
View File

@ -190,7 +190,7 @@
}
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
.page-container {
height: 100%;
width: 100%;
@ -201,7 +201,7 @@
}
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
.page-container {
max-height: 82vh;
min-height: 570px;

2
ui/components/ui/update-nickname-popover/index.scss
View File

@ -13,7 +13,7 @@
border-radius: 10px;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 96%;
height: 96%;
}

2
ui/css/base-styles.scss
View File

@ -51,7 +51,7 @@ html {
flex-direction: column;
background: var(--color-background-alternative);
@media screen and (max-width: $break-small) {
@include screen-sm-max {
background-color: var(--color-background-default);
}
}

6
ui/css/itcss/components/network.scss
View File

@ -64,15 +64,15 @@
margin: 0 14px 0 4px;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
right: calc(((100% - 85vw) / 2) + 2px);
}
@media screen and (min-width: 769px) {
@include screen-md-min {
right: calc(((100% - 80vw) / 2) + 2px);
}
@media screen and (min-width: 1281px) {
@include screen-lg-min {
right: calc(((100% - 65vw) / 2) + 2px);
}
}

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

@ -1,6 +1,3 @@
$sub-mid-size-breakpoint: 667px;
$sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$sub-mid-size-breakpoint})";
/*
NewUI Container Elements
*/
@ -50,7 +47,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
// main-container media queries
@media screen and (min-width: $break-large) {
@include screen-sm-min {
.lap-visible {
display: flex;
}
@ -67,7 +64,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
}
}
@media screen and (min-width: 769px) {
@include screen-md-min {
.main-container {
width: 80vw;
min-height: 82vh;
@ -75,7 +72,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
}
}
@media screen and (min-width: 1281px) {
@include screen-lg-min {
.main-container {
width: 62vw;
min-height: 82vh;
@ -83,7 +80,7 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
}
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
.lap-visible {
display: none;
}
@ -117,19 +114,19 @@ $sub-mid-size-breakpoint-range: "screen and (min-width: #{$break-large}) and (ma
flex-direction: row-reverse;
justify-content: space-between;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
height: 100%;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 85vw;
}
@media screen and (min-width: 769px) {
@include screen-md-min {
width: 80vw;
}
@media screen and (min-width: 1281px) {
@include screen-lg-min {
width: 62vw;
}
}

34
ui/css/itcss/components/send.scss
View File

@ -3,7 +3,7 @@
flex-flow: column nowrap;
z-index: 25;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
overflow-y: auto;
}
@ -24,7 +24,7 @@
width: 498px;
flex: 1 0 auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
top: 0;
width: 100%;
box-shadow: none;
@ -56,7 +56,7 @@
padding: 4px;
background-color: var(--color-background-default);
@media screen and (max-width: $break-small) {
@include screen-sm-max {
position: relative;
top: 0;
}
@ -334,7 +334,7 @@
flex-flow: column nowrap;
flex: 1 0 auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
top: 0;
width: 100%;
box-shadow: none;
@ -347,7 +347,7 @@
top: -35px;
z-index: 25;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
position: relative;
top: 0;
flex: 0 0 auto;
@ -385,7 +385,7 @@
align-items: center;
flex: 0 0 auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-top: 24px;
}
@ -413,7 +413,7 @@
align-items: center;
position: relative;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
top: 0;
box-shadow: none;
@ -424,7 +424,7 @@
&__send-header-icon-container {
z-index: 25;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
position: relative;
top: 0;
}
@ -450,7 +450,7 @@
border-radius: 50%;
z-index: 100;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
top: 36px;
}
}
@ -464,7 +464,7 @@
justify-content: center;
align-items: center;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
height: 59px;
width: 100vw;
}
@ -479,7 +479,7 @@
left: 178px;
top: 75px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
top: 46px;
left: 0;
right: 0;
@ -527,7 +527,7 @@
}
&__form {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin: 0;
flex: 1 1 auto;
}
@ -666,7 +666,7 @@
flex-grow: 1;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
&__asset-data {
width: 60%;
}
@ -868,7 +868,7 @@
display: flex;
flex-flow: column;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100vw;
height: 100vh;
}
@ -882,7 +882,7 @@
align-items: center;
justify-content: space-between;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
flex: 0 0 auto;
}
}
@ -909,7 +909,7 @@
display: flex;
margin-bottom: 24px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
flex-flow: column;
flex: 1 1 auto;
}
@ -925,7 +925,7 @@
justify-content: space-between;
position: relative;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
flex: 0 0 auto;
}
}

2
ui/helpers/utils/is-mobile-view.js
View File

@ -1,6 +1,6 @@
// Checks if viewport at invoke time fits mobile dimensions
// isMobileView :: () => Bool
const isMobileView = () =>
window.matchMedia('screen and (max-width: $break-small)').matches;
window.matchMedia('screen and (max-width: 575px)').matches;
export default isMobileView;

4
ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
View File

@ -11,13 +11,13 @@
position: relative;
height: 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
top: 0;
box-shadow: none;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
height: 620px;
}
}

4
ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss
View File

@ -11,13 +11,13 @@
position: relative;
height: 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
top: 0;
box-shadow: none;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
height: 620px;
}
}

2
ui/pages/create-account/import-account/index.scss
View File

@ -11,7 +11,7 @@
align-items: center;
padding: 0 30px 30px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding: 0 22px 22px;
}

2
ui/pages/create-account/index.scss
View File

@ -14,7 +14,7 @@
display: none;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
position: absolute;
}

4
ui/pages/first-time-flow/end-of-flow/index.scss
View File

@ -6,7 +6,7 @@
width: 742px;
margin-top: 3%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
}
}
@ -30,7 +30,7 @@
margin-top: 2px;
margin-bottom: 2px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H6;
margin-bottom: 16px;

15
ui/pages/first-time-flow/index.scss
View File

@ -4,7 +4,6 @@
@import 'end-of-flow/index';
@import 'metametrics-opt-in/index';
.first-time-flow {
width: 100%;
background-color: var(--color-background-default);
@ -12,7 +11,7 @@
justify-content: center;
&__wrapper {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-width: 742px;
display: flex;
flex-direction: column;
@ -23,7 +22,7 @@
.app-header__metafox-logo {
margin-bottom: 40px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-bottom: 0;
}
}
@ -54,7 +53,7 @@
margin-bottom: 24px;
color: var(--color-text-default);
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H6;
margin-bottom: 16px;
@ -105,11 +104,9 @@
}
.first-time-flow__wrapper.intro {
@media screen and (min-width: $break-large) {
padding: 0 20px;
@include screen-sm-min {
max-width: 1010px;
}
@media screen and (max-width: 1010px) {
padding: 0 20px;
}
}

4
ui/pages/first-time-flow/metametrics-opt-in/index.scss
View File

@ -13,7 +13,7 @@
margin-right: 28%;
color: var(--color-text-default);
@media screen and (max-width: $break-small) {
@include screen-sm-max {
justify-content: center;
margin-left: 2%;
margin-right: 0%;
@ -99,7 +99,7 @@
&__footer {
margin-top: 26px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-top: 10px;
justify-content: center;
margin-left: 2%;

6
ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
View File

@ -4,7 +4,7 @@
}
&__sorted-seed-words {
max-width: $break-small;
max-width: $screen-sm-max;
}
&__seed-word {
@ -57,7 +57,7 @@
color: transparent;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H6;
padding: 6px 18px;
@ -70,7 +70,7 @@
display: flex;
flex-flow: row wrap;
min-height: 161px;
max-width: $break-small;
max-width: $screen-sm-max;
border: 1px solid var(--color-border-muted);
border-radius: 6px;
background-color: var(--color-background-default);

8
ui/pages/first-time-flow/seed-phrase/index.scss
View File

@ -6,11 +6,11 @@
&__sections {
display: flex;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
flex-direction: row;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
flex-direction: column;
}
}
@ -24,11 +24,11 @@
flex: 2;
min-width: 0;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-left: 81px;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-top: 24px;
}

2
ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
View File

@ -1,5 +1,5 @@
.reveal-seed-phrase {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: flex;
flex-direction: column;
width: 96%;

8
ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/index.scss
View File

@ -2,11 +2,11 @@
&__sections {
display: flex;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
flex-direction: row;
}
@media screen and (max-width: 970px) {
@include screen-md-max {
flex-direction: column;
}
}
@ -20,7 +20,7 @@
flex: 1;
min-width: 0;
@media screen and (max-width: 970px) {
@include screen-md-max {
margin-top: 24px;
}
}
@ -28,7 +28,7 @@
video {
border-radius: 8px;
@media screen and (max-width: 970px) {
@include screen-md-max {
width: 95%;
}
}

2
ui/pages/first-time-flow/welcome/index.scss
View File

@ -38,7 +38,7 @@
color: var(--color-primary-default);
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
font-size: 0.9rem;
}
}

2
ui/pages/home/index.scss
View File

@ -182,7 +182,7 @@
margin-inline-start: 8px;
padding: 8px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-bottom: 50px;
margin-inline-end: 8px;
left: 70%;

2
ui/pages/import-token/token-list/token-list-placeholder/index.scss
View File

@ -16,7 +16,7 @@
margin-top: 8px;
opacity: 0.5;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 60%;
}
}

4
ui/pages/keychains/index.scss
View File

@ -13,7 +13,7 @@
}
@media screen and (min-width: 1281px) {
@include screen-lg-min {
.first-view-main {
width: 62vw;
}
@ -27,7 +27,7 @@
max-width: initial;
}
@media only screen and (max-width: $break-small) {
@include screen-sm-max {
.import-account {
margin: 24px;
display: flex;

10
ui/pages/notifications/index.scss
View File

@ -12,7 +12,7 @@
padding: 65px 24px 15px 24px;
border-bottom: 1px solid var(--color-border-muted);
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding: 10px 20px;
}
@ -27,7 +27,7 @@
margin-left: 26px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H6;
margin-left: 16px;
@ -39,7 +39,7 @@
&_button {
width: auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
font-size: 0.75rem;
padding: 3.5px 1rem;
}
@ -52,7 +52,7 @@
flex-direction: column;
flex: 1 1 auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
height: 100%;
}
@ -62,7 +62,7 @@
color: var(--color-text-muted);
text-align: center;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H6;
}
}

2
ui/pages/onboarding-flow/create-password/index.scss
View File

@ -23,7 +23,7 @@
}
&__form {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-width: 320px;
}

2
ui/pages/onboarding-flow/creation-successful/index.scss
View File

@ -1,5 +1,5 @@
.creation-successful {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
display: flex;
flex-direction: column;
align-items: center;

2
ui/pages/onboarding-flow/index.scss
View File

@ -21,7 +21,7 @@
border: 1px solid var(--color-border-muted);
border-radius: 24px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin: 64px auto 40px;
padding: 32px;
}

6
ui/pages/onboarding-flow/metametrics/index.scss
View File

@ -1,5 +1,5 @@
.onboarding-metametrics {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
display: flex;
flex-direction: column;
justify-content: center;
@ -37,7 +37,7 @@
margin-top: 24px;
width: 100%;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-top: 40px;
justify-content: space-between;
display: flex;
@ -46,7 +46,7 @@
button {
margin-bottom: 24px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 200px;
}
}

16
ui/pages/onboarding-flow/onboarding-app-header/index.scss
View File

@ -8,12 +8,12 @@
width: 100%;
flex: 0 0 auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding: 16px;
z-index: $mobile-header-z-index;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
height: 75px;
justify-content: center;
}
@ -22,13 +22,13 @@
&--icon {
height: 32px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
display: none;
}
}
&--horizontal {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: none;
}
}
@ -40,19 +40,19 @@
width: 100%;
justify-content: space-between;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
height: 100%;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 85vw;
}
@media screen and (min-width: 769px) {
@include screen-md-min {
width: 90vw;
}
@media screen and (min-width: 1281px) {
@include screen-lg-min {
width: 62vw;
}
}

6
ui/pages/onboarding-flow/privacy-settings/index.scss
View File

@ -4,11 +4,11 @@
justify-content: center;
align-items: center;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-bottom: 24px;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-bottom: 40px;
}
@ -29,7 +29,7 @@
max-width: 620px;
margin-bottom: 20px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-inline-start: 48px;
margin-inline-end: 48px;
}

25
ui/pages/onboarding-flow/recovery-phrase/index.scss
View File

@ -24,17 +24,10 @@
justify-items: center;
align-items: center;
row-gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
@media screen and (max-width: 460px) {
grid-template-columns: 198px;
}
@media screen and (min-width: 460px) and (max-width: $break-small) {
grid-template-columns: 181px 181px;
}
@media screen and (min-width: $break-large) {
grid-template-columns: 166px 166px 166px;
@include screen-sm-min {
grid-template-columns: 1fr 1fr 1fr;
}
&--hidden {
@ -85,7 +78,7 @@
align-items: center;
width: 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-inline-start: 40px;
margin-inline-end: 40px;
margin-bottom: 40px;
@ -98,7 +91,7 @@
align-items: center;
width: 100%;
@media screen and (min-width: $break-small) {
@include screen-md-min {
margin-top: 20px;
}
@ -112,7 +105,7 @@
&--button {
align-self: center;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-width: 300px;
}
}
@ -127,7 +120,7 @@
flex-direction: row;
justify-content: space-between;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
justify-content: space-around;
}
}
@ -152,7 +145,7 @@
justify-content: flex-end;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
justify-content: center;
width: 100%;
}
@ -187,7 +180,7 @@
}
&__confirm {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
display: flex;
flex-direction: column;
align-items: center;

6
ui/pages/onboarding-flow/secure-your-wallet/index.scss
View File

@ -14,14 +14,14 @@
justify-content: space-between;
width: 100%;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
flex-direction: row;
}
button {
margin-bottom: 16px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
+ button {
margin-left: 16px;
}
@ -42,7 +42,7 @@
padding: 12px;
border-radius: 10px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-inline-end: 43px;
}
}

2
ui/pages/onboarding-flow/welcome/index.scss
View File

@ -15,7 +15,7 @@
opacity: 1;
color: var(--color-icon-default);
@media screen and (min-width: $break-large) {
@include screen-sm-min {
padding: 40px;
}
}

4
ui/pages/permissions-connect/choose-account/index.scss
View File

@ -24,7 +24,7 @@
flex-direction: column;
justify-content: flex-end;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
flex-direction: column-reverse;
justify-content: space-between;
padding-bottom: 20px;
@ -40,7 +40,7 @@
margin-top: 12px;
border-top: 1px solid var(--color-border-muted);
@media screen and (min-width: $break-large) {
@include screen-sm-min {
border-top: none;
}

2
ui/pages/permissions-connect/index.scss
View File

@ -11,7 +11,7 @@
display: flex;
flex-direction: column;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
.page-container {
max-height: none;
min-height: auto;

6
ui/pages/settings/contact-list-tab/index.scss
View File

@ -7,7 +7,7 @@
.address-book {
flex: 0.4 1 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
flex: 1;
max-width: 100%;
@ -215,7 +215,7 @@
right: 16px;
width: auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
top: 8px;
right: 60px;
@ -233,7 +233,7 @@
.address-book-contact-content {
flex: 0.4 1 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
flex: 1;
}
}

2
ui/pages/settings/flask/snaps-list-tab/index.scss
View File

@ -9,7 +9,7 @@
&__body {
padding: 12px 18px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
padding: 12px;
}
}

20
ui/pages/settings/flask/view-snap/index.scss
View File

@ -1,7 +1,7 @@
.view-snap {
padding: 12px 18px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
padding: 12px;
}
@ -14,7 +14,7 @@
display: flex;
flex-flow: row nowrap;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-inline-end: 0;
padding: 0 0 16px;
flex-direction: column;
@ -28,7 +28,7 @@
border-bottom: 1px solid var(--color-border-muted);
margin-inline-end: 24px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-inline-end: 0;
}
}
@ -38,7 +38,7 @@
}
&__title {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding-bottom: 16px;
}
}
@ -48,14 +48,14 @@
display: flex;
flex-grow: 1;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
justify-content: space-between;
}
}
&__pill-container {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding-left: 0;
display: inline-block;
}
@ -64,7 +64,7 @@
&__toggle-container {
margin-left: auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding-left: 0;
display: inline-block;
}
@ -75,7 +75,7 @@
}
&__content-container {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
width: 100%;
}
}
@ -89,7 +89,7 @@
padding-bottom: 16px;
margin-bottom: 16px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
height: initial;
padding: 5px 0 16px;
}
@ -124,7 +124,7 @@
&__remove-button {
max-width: 175px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
align-self: center;
}
}

36
ui/pages/settings/index.scss
View File

@ -16,7 +16,7 @@
padding: 8px 24px 8px 24px;
position: relative;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
background: var(--color-background-alternative);
}
@ -42,7 +42,7 @@
flex: 1 0 auto;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
@ -52,18 +52,18 @@
}
&__search {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
position: relative;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
position: absolute;
right: 57px;
top: 10px;
width: 300px;
}
@media screen and (min-width: $break-midpoint) {
@include screen-md-min {
width: 400px;
}
@ -109,7 +109,7 @@
}
&__section-multiple-lines {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
margin-left: 10px;
}
}
@ -144,7 +144,7 @@
display: flex;
flex-flow: row nowrap;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: none;
}
}
@ -171,7 +171,7 @@
align-items: center;
padding: 16px 0;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
height: 69px;
position: relative;
text-align: center;
@ -181,7 +181,7 @@
&__sub-header-text {
@include H4;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
@include H5;
width: 100%;
@ -191,7 +191,7 @@
&__back-button {
display: none;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: block;
margin-right: 8px;
cursor: pointer;
@ -215,14 +215,14 @@
flex-direction: column;
flex: 1 1 auto;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
flex: 0 0 40%;
max-width: 197px;
padding-top: 13px;
}
.tab-bar__tab {
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-height: 50px;
}
}
@ -234,7 +234,7 @@
display: flex;
flex-flow: column;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: none;
}
}
@ -243,7 +243,7 @@
&__body {
padding: 12px 24px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
padding: 12px;
}
}
@ -270,7 +270,7 @@
flex-direction: column;
margin-bottom: 20px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
height: initial;
padding: 5px 0;
}
@ -344,7 +344,7 @@
display: flex;
flex-direction: column;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
max-width: 100%;
width: 100%;
}
@ -380,13 +380,13 @@
.settings-page {
&__content {
&__tabs {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: none;
}
}
&__modules {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: block;
}
}

4
ui/pages/settings/info-tab/index.scss
View File

@ -16,7 +16,7 @@
&__link-header {
padding-bottom: 15px;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding-bottom: 5px;
}
}
@ -29,7 +29,7 @@
&__link-item {
padding: 15px 0;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
padding: 5px 0;
}
}

26
ui/pages/settings/networks-tab/index.scss
View File

@ -14,7 +14,7 @@
isolation: isolate;
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
display: grid;
grid-template-columns: 1fr 1fr;
}
@ -49,7 +49,7 @@
display: flex;
flex-direction: column;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-inline-end: 16px;
margin-bottom: 24px;
}
@ -58,7 +58,7 @@
&__subheader {
display: none;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
@include H4;
padding: 16px 4px;
@ -80,7 +80,7 @@
&__network-form {
padding: 16px 24px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
padding: 16px;
}
@ -99,7 +99,7 @@
gap: 16px;
padding: 16px 24px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
padding: 16px;
min-width: 160px; // Allow network form to take priority in the grid on resize
border-right: 1px solid var(--color-border-muted);
@ -108,7 +108,7 @@
&__custom-search-network {
@include H6;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
@include Paragraph;
}
}
@ -125,7 +125,7 @@
width: 100%;
background: var(--color-background-default);
@media screen and (min-width: $break-large) {
@include screen-sm-min {
display: none;
}
}
@ -138,13 +138,13 @@
padding: 10px;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: none;
}
}
&__networks-list--selection {
@media screen and (max-width: $break-small) {
@include screen-sm-max {
display: none;
}
}
@ -175,7 +175,7 @@
padding-top: 3px;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
color: var(--color-text-default);
}
}
@ -184,7 +184,7 @@
font-weight: bold;
color: var(--color-text-default);
@media screen and (max-width: $break-small) {
@include screen-sm-max {
font-weight: normal;
color: var(--color-text-default);
}
@ -193,7 +193,7 @@
&__networks-list-name--disabled {
color: var(--color-text-muted);
@media screen and (max-width: $break-small) {
@include screen-sm-max {
color: var(--color-text-default);
}
}
@ -224,7 +224,7 @@
padding: 16px 24px;
grid-column: span 2; // spread both columns of grid layout
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-width: 400px; // but only expand to 400px
padding: 16px;
}

2
ui/pages/swaps/build-quote/index.scss
View File

@ -141,7 +141,7 @@
&__open-to-dropdown {
max-height: 194px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
max-height: 276px;
}
}

2
ui/pages/swaps/countdown-timer/index.scss
View File

@ -4,7 +4,7 @@
display: flex;
justify-content: center;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin: 0;
}

12
ui/pages/swaps/index.scss
View File

@ -23,7 +23,7 @@
justify-content: center;
width: 100%;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
z-index: 12;
}
@ -31,7 +31,7 @@
margin-left: 24px;
margin-right: 24px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-left: 20px;
margin-right: 20px;
}
@ -46,7 +46,7 @@
overflow-x: hidden;
overflow-y: auto;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 460px;
background: var(--color-background-default);
border: 1px solid var(--color-border-muted);
@ -64,13 +64,13 @@
width: 100%;
height: 100%;
@media screen and (max-width: $break-small) {
@include screen-sm-max {
&--overflow {
overflow: scroll;
}
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 348px;
}
}
@ -97,7 +97,7 @@
position: relative;
flex-direction: row;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
padding-top: 8px;
padding-bottom: 8px;
height: 66px;

4
ui/pages/swaps/select-quote-popover/index.scss
View File

@ -9,7 +9,7 @@
&__popover-wrap {
height: 100%;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
height: 620px;
width: 348px;
}
@ -31,7 +31,7 @@
background: var(--color-background-alternative);
opacity: 1;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
opacity: 0.5;
}
}

6
ui/pages/swaps/swaps-footer/index.scss
View File

@ -9,7 +9,7 @@
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
&--border {
.swaps-footer__custom-page-container-footer-class {
border-top: 1px solid var(--color-border-muted);
@ -20,7 +20,7 @@
&__custom-page-container-footer-class {
border-top: none;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
height: 96px;
}
}
@ -44,7 +44,7 @@
display: flex;
justify-content: center;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-top: 0;
}
}

10
ui/pages/swaps/view-quote/index.scss
View File

@ -28,13 +28,13 @@
pointer-events: none;
}
@media screen and (max-width: $break-small) {
@include screen-sm-max {
overflow-y: auto;
max-height: 420px;
}
}
@media screen and (min-width: $break-large) {
@include screen-sm-min {
width: 348px;
}
@ -134,7 +134,7 @@
margin-top: 8px;
margin-bottom: 8px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
&--thin {
min-height: 36px;
}
@ -160,7 +160,7 @@
max-width: 311px;
margin-bottom: 8px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-bottom: 0;
}
}
@ -182,7 +182,7 @@
&__thin-swaps-footer {
max-height: 82px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
height: 72px;
}
}

4
ui/pages/token-details/index.scss
View File

@ -28,7 +28,7 @@
float: right;
margin-inline-start: 62px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-inline-start: 112px;
}
}
@ -38,7 +38,7 @@
height: 39px;
margin-top: 70px;
@media screen and (min-width: $break-large) {
@include screen-sm-min {
margin-inline-start: 20px;
}
}