scss: manage mobile & desktop medias queries with sass vars (#39948)
This commit is contained in:
parent
41eecf7097
commit
7f273cbf97
|
@ -83,7 +83,7 @@ div#rub_service h2, #toplinks {
|
|||
}
|
||||
|
||||
div#header {
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
padding: 0;
|
||||
|
||||
h1 {
|
||||
|
@ -102,7 +102,7 @@ h1#logo a {
|
|||
height: 2em;
|
||||
text-indent: -9999px;
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
background-size: auto 0.7em;
|
||||
background-position: 0.4em 0.42em;
|
||||
}
|
||||
|
@ -242,7 +242,7 @@ button { font-weight: bold; }
|
|||
form.quixote div.widget { margin-bottom: 2em; }
|
||||
form.quixote div.widget div.widget { margin-bottom: inherit; }
|
||||
|
||||
@media screen and (min-width: $mobile-limit) {
|
||||
@media screen and ($min-desktop-viewport) {
|
||||
div#rub_service form.quixote, div#rub_service h2,
|
||||
body.authentic #content, #messages {
|
||||
max-width: 50rem;
|
||||
|
@ -325,7 +325,7 @@ div#content div.buttons.submit {
|
|||
@include flexbox();
|
||||
& div.submit-button { order: 1; }
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
@ -427,7 +427,7 @@ body.page-index #sidebar {
|
|||
flex: inherit;
|
||||
max-width: inherit;
|
||||
|
||||
@media screen and (min-width: $mobile-limit) {
|
||||
@media screen and ($min-desktop-viewport) {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
|
@ -526,7 +526,7 @@ body.page-index #sidebar {
|
|||
.suivi, .en-cours, .creer-compte, .brouillons, .coffre-fort, .historique {
|
||||
padding: 1rem;
|
||||
background-color: #d8f0ea;
|
||||
@media screen and (max-width: $mobile-limit) { margin-bottom: 1em; }
|
||||
@media screen and ($max-mobile-viewport) { margin-bottom: 1em; }
|
||||
}
|
||||
|
||||
.summary-count {
|
||||
|
@ -540,7 +540,7 @@ body.page-index #sidebar {
|
|||
}
|
||||
|
||||
body.page-index #columns {
|
||||
@media screen and (min-width: $mobile-limit) {
|
||||
@media screen and ($min-desktop-viewport) {
|
||||
display: grid;
|
||||
grid-gap: 1rem 1rem;
|
||||
column-gap: 1rem;
|
||||
|
@ -676,7 +676,7 @@ body.page-porte-doc {
|
|||
tr.odd { background: #d8f0ea; }
|
||||
tr.even { background: transparent; }
|
||||
|
||||
@media screen and (min-width: $mobile-limit) {
|
||||
@media screen and ($min-desktop-viewport) {
|
||||
a.icon-remove::before { color: #c64a59; }
|
||||
a.icon-remove { border-bottom: none; }
|
||||
|
||||
|
@ -685,7 +685,7 @@ body.page-porte-doc {
|
|||
th.title { padding: 0.5ex 1em; }
|
||||
}
|
||||
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
table, thead, tbody, th, td, tr { display: block; }
|
||||
|
||||
thead tr {
|
||||
|
|
|
@ -14,7 +14,7 @@ div#tracking-code {
|
|||
text-align: center;
|
||||
|
||||
margin-bottom: 2rem;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
order: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
@ -43,7 +43,7 @@ div.tracking-code-part {
|
|||
left: -3.3em;
|
||||
top: 0;
|
||||
background-size: contain;
|
||||
@media screen and (max-width: $mobile-limit) {
|
||||
@media screen and ($max-mobile-viewport) {
|
||||
width: 4.3em;
|
||||
left: -3.6em;
|
||||
}
|
||||
|
|
Reference in New Issue