entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 10 Releases Wiki Activity

scss: add sass vars to manage mobile & desktop medias queries (#37223)

This commit is contained in:
Thomas Jund 2019-12-20 15:56:33 +01:00
parent 1e2b8207ee
commit ec5e6df44b
8 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/includes/_cells.scss
View File

@ -38,7 +38,7 @@ div#left div.block,
div#right div.block,
.gru-content #right .cell { margin-right: 0; }
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#left div.block,
.gru-content #left .cell,
div#right div.block,
@ -54,7 +54,7 @@ div.a2-block {
& form, & p {
margin: 1em 0.5em;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0 auto;
}
}
@ -605,7 +605,7 @@ div.bookingcalendar {
#registration-blocks.methods3 > .a2-block,
#login-page.methods2 > .block,
#login-page.methods3 > .block {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
float: none;
margin: 0.7em;
@ -652,13 +652,13 @@ div.familyinfoscell {
div.family_members {
display: flex;
justify-content: space-between;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
flex-direction: column;
}
}
div.family_adults, div.family_children {
width: 48%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
> div {

2
static/includes/_grid.scss
View File

@ -74,7 +74,7 @@ form div[class*=grid-] div.select2-container {
@for $j from 1 through $i {
.grid-#{$j}-#{$i} {
width: calc( #{100*$j/$i+0%} - #{$grid-gutter});
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@if $i == 4 and $j <= 2 { width: calc(50% - #{$grid-gutter}); }
@else if $i == 4 and $j > 2 { width: calc(100% - #{$grid-gutter}); }
@else if $i == 6 and $j <= 2 { width: calc(#{100/3+0%} - #{$grid-gutter}); }

17
static/includes/_layout.scss
View File

@ -10,6 +10,13 @@ $sidebar-max-width: $sidebar-width !default;
$sidebar-min-width: 0 !default;
$sidebar-position: left !default;
// custom media queries
// @media ($max-mobile-viewport) {}
// @media ($min-desktop-viewport) {}
$max-mobile-viewport: "max-width: #{$mobile-limit}";
$min-desktop-viewport: "min-width: #{$mobile-limit + 1}";
html, body {
margin: 0;
min-height: 100vh;
@ -52,7 +59,7 @@ div#header {
& h1 {
margin: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
& h1 {
padding-left: $top-logo-width+70px;
background-position: 70px;
@ -66,7 +73,7 @@ div#main-content-wrapper {
max-width: $width;
margin: 0px auto 0px auto;
padding: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
z-index: 0;
}
@ -123,7 +130,7 @@ div#main-content {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#columns {
padding: 0 0.7em;
max-width: 100%;
@ -186,13 +193,13 @@ h1#logo {
padding-left: $top-logo-width;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.desktop-only {
display: none;
}
}
@media screen and (min-width: $mobile-limit+1px) {
@media screen and ($min-desktop-viewport) {
.mobile-only {
display: none;
}

12
static/includes/_misc.scss
View File

@ -18,7 +18,7 @@ div.textcell table {
margin: 0.7em 0.5rem;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
img {
max-width: 100%;
}
@ -43,7 +43,7 @@ div#footer div.cell.test-banner {
white-space: pre;
opacity: 0.9;
pointer-events: none;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: auto;
bottom: 3rem;
right: -1rem;
@ -74,7 +74,7 @@ div#footer div.cell.test-banner p {
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#welcome-text,
#login-methods {
width: auto;
@ -115,7 +115,7 @@ div#login-methods input {
height: 3rem;
line-height: 3rem;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-left: none;
padding-left: 0;
&::after {
@ -158,7 +158,7 @@ a#publik-portal-agent {
padding: 5px 10px;
border: 1px solid #888;
border-width: 0 1px 1px 1px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -188,7 +188,7 @@ div#consent_banner {
}
%top-consent-banner {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: absolute;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 0 8px 1px #333;

4
static/includes/_user-info.scss
View File

@ -12,7 +12,7 @@ $primary-color: #910956 !default;
padding: 0.7em 2em 0.2em 2em;
border: 3px solid $primary-color;
border-width: 0 1px 1px 1px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-right: 0;
right: 0;
max-width: 90%;
@ -27,7 +27,7 @@ $primary-color: #910956 !default;
#toplinks span.connected-user {
padding-right: 0.7em;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-right: 0;
}
}

10
static/includes/wcs/_bulk.scss
View File

@ -58,7 +58,7 @@ div#services > ul {
padding: 0;
margin: 0;
list-style: none;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include vendor-prefix('column-count', '1');
}
}
@ -132,7 +132,7 @@ div#services div.block-custom-text {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
// move #gauche on top and tracking code after steps
div#gauche {
float: none;
@ -151,7 +151,7 @@ div#services div.block-custom-text {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#gauche + div#rub_service,
div#rub_service {
width: 100%;
@ -405,7 +405,7 @@ span.geoloc-error {
font-weight: normal;
font-size: smaller;
float: right;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
float: none;
display: block;
@ -647,7 +647,7 @@ div.section.foldable {
&.folded {
span.disclose-message {
display: inline-block;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
// never displayed on mobile as the small width
// makes clear the relation between title and
// open/close bracket.

2
static/includes/wcs/_nearby-form.scss
View File

@ -40,7 +40,7 @@
}
.nearby-form--datetime {
width: 20%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 30%;
}
}

4
static/includes/wcs/_steps.scss
View File

@ -49,14 +49,14 @@ $mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limi
// Steps orientations depend on media-queries & $form-sidebar-position
@mixin desktop-horizontal-steps() {
@if ($form-sidebar-position == top) {
@media (min-width: $mobile-limit + 1) {
@media ($min-desktop-viewport) {
@content;
}
}
}
@mixin desktop-vertical-steps() {
@if ($form-sidebar-position == left or $form-sidebar-position == right) {
@media (min-width: $mobile-limit + 1) {
@media ($min-desktop-viewport) {
@content;
}
}