entrouvert
/
rouen-publik-theme
Archived
17
0
Fork 0
Code Issues Pull Requests Releases Activity

scss: manage mobile & desktop medias queries with sass vars (#39948)

This commit is contained in:
Thomas Jund 2020-05-04 15:27:40 +02:00
parent 41eecf7097
commit 7f273cbf97
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
static/rouen/_custom.scss
View File

@ -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 {

4
static/rouen/_side_block.scss
View File

@ -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;
}