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

Update media query instances (#15068)

Browse Source
feature/default_network_editable
George Marshall 2 years ago 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 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. 12
      ui/components/app/account-menu/index.scss
  2. 10
      ui/components/app/add-network/index.scss
  3. 16
      ui/components/app/app-header/index.scss
  4. 2
      ui/components/app/asset-list-item/asset-list-item.scss
  5. 10
      ui/components/app/collectible-details/index.scss
  6. 2
      ui/components/app/edit-gas-popover/index.scss
  7. 2
      ui/components/app/gas-customization/advanced-gas-inputs/index.scss
  8. 8
      ui/components/app/gas-customization/gas-modal-page-container/index.scss
  9. 6
      ui/components/app/gas-customization/gas-price-button-group/index.scss
  10. 4
      ui/components/app/home-notification/index.scss
  11. 4
      ui/components/app/modal/index.scss
  12. 2
      ui/components/app/modals/confirm-remove-account/index.scss
  13. 14
      ui/components/app/modals/deposit-ether-modal/index.scss
  14. 4
      ui/components/app/modals/metametrics-opt-in-modal/index.scss
  15. 2
      ui/components/app/multiple-notifications/index.scss
  16. 6
      ui/components/app/permission-page-container/index.scss
  17. 4
      ui/components/app/signature-request-original/index.scss
  18. 2
      ui/components/app/signature-request/index.scss
  19. 2
      ui/components/app/signature-request/signature-request-message/index.scss
  20. 4
      ui/components/app/srp-input/srp-input.scss
  21. 12
      ui/components/app/tab-bar/index.scss
  22. 2
      ui/components/app/transaction-list/index.scss
  23. 4
      ui/components/app/whats-new-popup/index.scss
  24. 6
      ui/components/ui/list-item/index.scss
  25. 4
      ui/components/ui/page-container/index.scss
  26. 2
      ui/components/ui/update-nickname-popover/index.scss
  27. 2
      ui/css/base-styles.scss
  28. 6
      ui/css/itcss/components/network.scss
  29. 19
      ui/css/itcss/components/newui-sections.scss
  30. 34
      ui/css/itcss/components/send.scss
  31. 2
      ui/helpers/utils/is-mobile-view.js
  32. 4
      ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
  33. 4
      ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.scss
  34. 2
      ui/pages/create-account/import-account/index.scss
  35. 2
      ui/pages/create-account/index.scss
  36. 4
      ui/pages/first-time-flow/end-of-flow/index.scss
  37. 15
      ui/pages/first-time-flow/index.scss
  38. 4
      ui/pages/first-time-flow/metametrics-opt-in/index.scss
  39. 6
      ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/index.scss
  40. 8
      ui/pages/first-time-flow/seed-phrase/index.scss
  41. 2
      ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/index.scss
  42. 8
      ui/pages/first-time-flow/seed-phrase/seed-phrase-intro/index.scss
  43. 2
      ui/pages/first-time-flow/welcome/index.scss
  44. 2
      ui/pages/home/index.scss
  45. 2
      ui/pages/import-token/token-list/token-list-placeholder/index.scss
  46. 4
      ui/pages/keychains/index.scss
  47. 10
      ui/pages/notifications/index.scss
  48. 2
      ui/pages/onboarding-flow/create-password/index.scss
  49. 2
      ui/pages/onboarding-flow/creation-successful/index.scss
  50. 2
      ui/pages/onboarding-flow/index.scss
  51. 6
      ui/pages/onboarding-flow/metametrics/index.scss
  52. 16
      ui/pages/onboarding-flow/onboarding-app-header/index.scss
  53. 6
      ui/pages/onboarding-flow/privacy-settings/index.scss
  54. 25
      ui/pages/onboarding-flow/recovery-phrase/index.scss
  55. 6
      ui/pages/onboarding-flow/secure-your-wallet/index.scss
  56. 2
      ui/pages/onboarding-flow/welcome/index.scss
  57. 4
      ui/pages/permissions-connect/choose-account/index.scss
  58. 2
      ui/pages/permissions-connect/index.scss
  59. 6
      ui/pages/settings/contact-list-tab/index.scss
  60. 2
      ui/pages/settings/flask/snaps-list-tab/index.scss
  61. 20
      ui/pages/settings/flask/view-snap/index.scss
  62. 36
      ui/pages/settings/index.scss
  63. 4
      ui/pages/settings/info-tab/index.scss
  64. 26
      ui/pages/settings/networks-tab/index.scss
  65. 2
      ui/pages/swaps/build-quote/index.scss
  66. 2
      ui/pages/swaps/countdown-timer/index.scss
  67. 12
      ui/pages/swaps/index.scss
  68. 4
      ui/pages/swaps/select-quote-popover/index.scss
  69. 6
      ui/pages/swaps/swaps-footer/index.scss
  70. 10
      ui/pages/swaps/view-quote/index.scss
  71. 4
      ui/pages/token-details/index.scss

12
ui/components/app/account-menu/index.scss
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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) {
max-width: 1010px;
}
padding: 0 20px;
@media screen and (max-width: 1010px) {
padding: 0 20px;
@include screen-sm-min {
max-width: 1010px;
}
}

4
ui/pages/first-time-flow/metametrics-opt-in/index.scss
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;
}
}

Write Preview
Loading…
Cancel
Save