Skip to content

Commit

Permalink
Add custom media breakpoints (#3799)
Browse files Browse the repository at this point in the history
  • Loading branch information
bgptr authored Sep 7, 2022
1 parent 21658ad commit 4250ad5
Show file tree
Hide file tree
Showing 159 changed files with 1,018 additions and 368 deletions.
2 changes: 1 addition & 1 deletion app/components/SideBar/Logo/Logo.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
opacity: 0.7;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.logo {
flex-direction: row-reverse;
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/SideBar/MenuBottom/MenuBottom.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@
animation: spin 1s linear infinite;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.latestBlock .tooltipContainer span {
visibility: hidden;
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/SideBar/MenuLinks/MenuLinks.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
color: var(--text-color) !important;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.tabs {
margin: 0 auto;
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/SideBar/SideBar.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.sidebar {
display: flex;
width: 100% !important;
Expand Down
4 changes: 2 additions & 2 deletions app/components/buttons/HelpLink/HelpLink.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -93,14 +93,14 @@
background-image: var(--help-forum);
}

@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.icon {
margin-right: 10px;
margin-bottom: 10px;
}
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.icon {
margin-right: 0;
width: 355px;
Expand Down
4 changes: 2 additions & 2 deletions app/components/charts/Charts.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -90,12 +90,12 @@
.recharts-tooltip-cursor {
fill: var(--chart-cursor-color);
}
@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.meteredTicksArea {
margin-left: 60px;
}
}
@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.meteredChartLegend {
margin: 0;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
.lastLogLines {
font-size: 9px;
}
@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.loaderBarEstimation {
display: none;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
font-weight: 700;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.barEstimation {
display: none;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@
background-color: var(--background-back-color);
}

@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.noProposals {
margin-left: 40px;
}
}
@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.noMoreTicketsIndicator {
width: 315px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@
background-color: var(--vote-no-color);
}

@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.votingProgressIndicator {
width: 120px;
}
}
@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.votingProgressIndicator {
width: 120px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
color: var(--main-dark-blue);
font-size: 13px;
}
@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.value {
max-width: 235px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
.actionButton > .button {
min-width: 76px;
}
@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.header {
display: none;
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/layout/PageBody/PageBody.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
left: 0;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.pageBody {
flex-direction: column-reverse;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
padding: 40px 60px 25px 60px;
}

@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.header {
padding-left: 20px;
}
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.header {
height: initial;
display: flex;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
height: 100%;
}

@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.body {
padding-left: 20px;
padding-right: 20px;
Expand Down
4 changes: 2 additions & 2 deletions app/components/layout/TabbedPage/TabbedPage.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
padding: 30px 80px 30px 60px;
}

@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.tabbedPageHeader {
padding-left: 20px;
}
Expand All @@ -56,7 +56,7 @@
}
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.tabbedPageHeader {
padding-top: 30px;
}
Expand Down
4 changes: 2 additions & 2 deletions app/components/layout/TitleHeader/TitleHeader.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -89,13 +89,13 @@
margin-left: auto;
}

@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.container {
width: 667px;
}
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.container {
width: 345px;
}
Expand Down
4 changes: 2 additions & 2 deletions app/components/modals/AboutModal/AboutModal.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,13 @@
color: var(--input-color-hover);
}

@media screen and (max-width: 1000px) {
@media (--md-viewport) {
.about {
width: inherit;
}
}

@media screen and (max-width: 560px) {
@media (--xs-viewport) {
.about {
width: 455px !important;
height: 290px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,13 @@
.maxFeePercentage input {
font-size: 16px;
}
@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.modal {
width: 421px;
}
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.modal {
width: 355px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@
font-size: 16px;
}

@media screen and (max-width: 1179px) {
@media (--bg-viewport) {
.modal {
width: 421px;
}
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.modal {
width: 355px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
margin-bottom: 20px;
}

@media screen and (max-width: 560px) {
@media (--xs-viewport) {
.infoDocumentation:not(.constitution) {
column-count: 1;
}
Expand Down
4 changes: 2 additions & 2 deletions app/components/modals/InfoModal/InfoModal.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,13 @@
height: 40px;
align-self: flex-end;
}
@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.info,
.info.double {
width: 400px !important;
}
}
@media screen and (max-width: 560px) {
@media (--xs-viewport) {
.info,
.info.double {
width: 300px !important;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
margin-top: 30px;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.modal {
width: 355px;
padding: 30px 20px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
margin: 20px 0 0 0;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.modal {
width: 355px;
padding: 30px 20px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
margin: 20px 0 0 0;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.modal {
width: 355px;
padding: 30px 20px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@
float: right;
}

@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.mixerSettings {
width: 594px !important;
}
}
@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.mixerSettings {
width: 305px;
min-width: unset;
Expand Down
2 changes: 1 addition & 1 deletion app/components/modals/Modal/Modal.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
text-align: left;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.overlayReducedBar {
left: 0;
bottom: 70px;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
.closeButtonTop:hover {
opacity: 0.7;
}
@media screen and (max-width: 560px) {
@media (--xs-viewport) {
.passphrase {
max-height: 60%;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,12 @@
margin: 0px 4px 0px 4px;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.warningText {
column-count: 1;
}
}
@media screen and (max-width: 560px) {
@media (--xs-viewport) {
.confirmSeedCopy {
max-height: 60%;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
background-position: 0 center;
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.warningText {
column-count: 1;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
.closeButtonTop:hover {
opacity: 0.7;
}
@media screen and (max-width: 560px) {
@media (--xs-viewport) {
.passphrase {
max-height: 60%;
}
Expand Down
2 changes: 1 addition & 1 deletion app/components/modals/TrezorModals/TrezorModals.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ h1 {
flex-direction: row-reverse;
}

@media screen and (max-width: 560px) {
@media (--xs-viewport) {
.pinModal,
.passphraseModal,
.togglePassphraseConfirmModal,
Expand Down
4 changes: 2 additions & 2 deletions app/components/shared/Log/Log.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ textarea {
background-size: 5px;
}

@media screen and (max-width: 1180px) {
@media (--bg-viewport) {
.logArea {
width: 667px;
}
Expand All @@ -63,7 +63,7 @@ textarea {
}
}

@media screen and (max-width: 768px) {
@media (--sm-viewport) {
.logs {
margin: 30px 20px;
}
Expand Down
Loading

0 comments on commit 4250ad5

Please sign in to comment.