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

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

This commit is contained in:
Thomas Jund 2020-01-29 16:55:53 +01:00
parent ec5e6df44b
commit be233cdaba
106 changed files with 655 additions and 655 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
static/alpes-maritimes-2018/_custom.scss
View File

@ -11,7 +11,7 @@ body {
border-right: 0;
border-top: 0;
border-bottom: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 15px;
border-left: 0;
}
@ -26,7 +26,7 @@ body {
bottom: 0;
transform: skew(-25deg);
border-left: $width solid $border-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -49,12 +49,12 @@ div#main-content-wrapper {
border: 0;
box-shadow: none;
padding: 1ex 0 0.3ex 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding:0.3ex 0;
}
span {
a {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-indent: -9999px;
}
&:first-child {
@ -84,7 +84,7 @@ div#main-content-wrapper {
background-position: center left;
background-repeat: no-repeat;
height: 66px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-size: auto 75%;
height: 80px;
}
@ -100,7 +100,7 @@ div.departement {
width: 275px;
display: block;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -131,7 +131,7 @@ div.homepage-container {
display: block;
width: 50%;
margin: 0 auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}
@ -148,7 +148,7 @@ div.homepage-container {
div.homepage-header {
width: 55%;
margin: 0 auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
}
@ -184,7 +184,7 @@ div.homepage-container {
display: inline;
margin: 1ex 1em;
@include trapesoid($border-color: $ternary-color, $background-color: $primary-color);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: inline-block;
}
}
@ -257,7 +257,7 @@ div.homepage-container {
width: 50%;
margin: 0 auto;
@include trapesoid($ternary-color);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}
@ -280,7 +280,7 @@ div.homepage-container {
div.cell:first-child {
width: 50%;
margin: 0 auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}
@ -294,7 +294,7 @@ div.homepage-container {
padding: 3ex 3em;
div.cell {
width: 40%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}
@ -480,7 +480,7 @@ ul#evolutions li span.item {
}
}
@media (min-width: $mobile-limit + 1) {
@media ($min-desktop-viewport) {
@if ($form-sidebar-position == left or $form-sidebar-position == right) {
.wcs-step {
font-size: 1.25em;
@ -521,7 +521,7 @@ div#social-steps ol {
span.marker {
background: $primary-color;
color: #fff;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-radius: 50%;
}
}
@ -549,7 +549,7 @@ div#social-steps ol {
display: -ms-flex;
@include vendor-prefix(justify-content, center);
@include vendor-prefix(align-items, center);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 100%;
background: #fff;
color: $primary-color;
@ -558,7 +558,7 @@ div#social-steps ol {
&.label {
text-align: center;
font-size: 90%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -612,14 +612,14 @@ div#nav-wrapper {
ul {
margin-top: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
}
}
div.gru-nav {
> ul > li {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
&:not(:last-child)::after {
content: '/';
}
@ -644,7 +644,7 @@ div#footer-wrapper {
background: $footer-background url('img/footer.png') 64% 50%;
background-repeat: no-repeat;
background-size: contain;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: $footer-background url('img/footer-mobile.png') right bottom;
background-repeat: no-repeat;
}
@ -704,7 +704,7 @@ div#footer {
#left, #right {
width: 48%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}
@ -731,7 +731,7 @@ h2 + h2 {
.section-demarches div#page {
background: url('img/page-header.png') no-repeat;
background-position: center 170px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: center 110px;
}
div.cell.textcell:first-child {
@ -759,7 +759,7 @@ h2 + h2 {
div#left, div#right {
width: 40%;
margin-left: 4em;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
margin: 0;
}
@ -808,7 +808,7 @@ div#login-page {
float: none;
width: 80%;
color: #fff;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
margin: 0;
}
@ -882,7 +882,7 @@ div.cell {
margin: 3ex 1em;
vertical-align: middle;
box-sizing: border-box;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0 1em;
margin: 3ex 0;
width: 100%;
@ -968,7 +968,7 @@ div.cell {
width: 380px;
display: inline-block;
text-align: center;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}

2
static/amiens-metropole/_custom.scss
View File

@ -173,7 +173,7 @@ nav {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#main-content-wrapper #main-content #content .wide-container {
&.topbanner-wrapper {
height: 350px;

6
static/amiens-metropole/_forms.scss
View File

@ -36,7 +36,7 @@
input, textarea {
@extend %input-style;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
max-width: 100%;
}
@ -216,13 +216,13 @@
}
@media screen and (min-width: $mobile-limit+1px) {
@media screen and ($min-desktop-viewport) {
#page #main-content-wrapper #main-content #content #columns {
@include flex-direction(row);
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#page #main-content-wrapper #main-content #content #columns {
@include flex-direction(column);

4
static/amiens-metropole/_header.scss
View File

@ -172,7 +172,7 @@ $header-content-margin: 5px;
}
}
}
@media screen and (min-width: $mobile-limit+1px) {
@media screen and ($min-desktop-viewport) {
.site-header {
height: $header-height;
@ -186,7 +186,7 @@ $header-content-margin: 5px;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.site-header {
height: $header-height * 2;

2
static/amiens-metropole/_layout.scss
View File

@ -67,7 +67,7 @@ body.has-picture, .page-index #content {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.pull-right {
width: 100%;
}

12
static/arles/_custom.scss
View File

@ -62,7 +62,7 @@ div#header-wrapper {
@media only screen and (max-width: $small-screen) {
display: none;
}
@media only screen and (max-width: $mobile-limit) {
@media only screen and ($max-mobile-viewport) {
margin: 0;
}
a {
@ -155,7 +155,7 @@ div#login-page {
min-width: 400px;
margin: 10px auto;
border: 1px solid #ccc;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 80%;
}
@media screen and (max-width: 479px) {
@ -319,7 +319,7 @@ div.gru-content {
text-align:center;
img { width: 50px; height: 50px; }
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-bottom: 1em;
&:nth-child(2n) { clear: left; }
}
@ -331,7 +331,7 @@ div.gru-content {
width:30%;
min-width: 170px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
span { display: block; }
}
}
@ -541,7 +541,7 @@ div.file-upload-widget div.title {
}
&--label {
@media ($mq-min--wcs-steps-horizontal-layout) and (max-width: $mobile-limit) {
@media ($mq-min--wcs-steps-horizontal-layout) and ($max-mobile-viewport) {
color: $primary-color;
}
}
@ -580,7 +580,7 @@ div#user-files {
font-size: 200%;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
td {
padding: 3px;
}

4
static/arpajon/_custom.scss
View File

@ -13,7 +13,7 @@
position: relative;
left: -1rem;
padding-left: 370px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
max-width: 90%;
background-size: contain;
@ -60,7 +60,7 @@ div#main-content-wrapper {
box-sizing: border-box;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#header #top #logo a {
display: block;
height: 75px;

4
static/auch/_custom.scss
View File

@ -8,7 +8,7 @@
h1#logo a {
background: url(img/logo.png) no-repeat left bottom;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-size: contain;
}
display: block;
@ -32,7 +32,7 @@ div.gru-nav > ul > li a {
}
div#top-social {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
position: absolute;

10
static/beaulieu/_custom.scss
View File

@ -17,7 +17,7 @@ body {
line-height: 120px;
padding-left: 260px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
padding-top: 50px;
a {
@ -34,7 +34,7 @@ body {
background: url(img/fond_fixe.jpg) top center no-repeat;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav-wrapper {
background: inherit;
}
@ -61,11 +61,11 @@ div#nav {
display: inline-block;
color: $font-color;
padding: 10px 10px 15px 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 80%;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: 0;
right: 0;
max-width: none;
@ -75,7 +75,7 @@ div#nav {
div#main-content {
background: white;
padding: 20px 10px 0 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 20px 0 0 0;
}
}

38
static/blois-2018/_custom.scss
View File

@ -7,7 +7,7 @@ html, body {
div#header {
display: flex;
padding: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
height: auto;
min-height: 150px;
@ -19,7 +19,7 @@ div#header {
box-sizing: border-box;
padding: 20px 30px 20px 20px;
text-transform: uppercase;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 25px;
}
width: 100%;
@ -35,7 +35,7 @@ div#header {
border: none;
background: none;
top: 20px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: 0;
left: 0;
right: 0;
@ -61,7 +61,7 @@ div#header {
.page-template-homepage_1col div#header,
.page-template-homepage div#header {
height: $header-height;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
height: auto;
}
@ -79,7 +79,7 @@ div#header {
padding: 0.5ex 1ex;
display: inline-block;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -92,7 +92,7 @@ div#header {
flex-grow: 1;
height: $header-height;
text-align: center;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: auto;
background-size: cover;
padding-top: 3rem;
@ -105,7 +105,7 @@ div#header {
display: block;
width: 37rem;
margin: $header-height / 3 auto 0 auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 80%;
margin-top: 0;
}
@ -118,7 +118,7 @@ div#header {
}
h1 {
font-size: 40px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
font-size: 30px;
}
@ -126,7 +126,7 @@ div#header {
h2 {
font-size: 20px;
font-weight: normal;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 18px;
margin: 0;
}
@ -146,7 +146,7 @@ div#sidebar {
div#content {
padding-top: 1em;
min-height: calc(100vh - 200px);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 0;
}
}
@ -200,7 +200,7 @@ div#content {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0;
}
@ -243,7 +243,7 @@ div#content {
left: $sidebar-width;
padding: 1rem;
box-sizing: border-box;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
width: auto;
}
@ -271,7 +271,7 @@ div#content {
color: #3b4758;
display: block;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
width: auto;
}
@ -305,7 +305,7 @@ div#content {
#nav {
padding-left: $sidebar-width;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
}
box-sizing: border-box;
@ -314,7 +314,7 @@ div#content {
ul {
margin: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
}
}
@ -337,7 +337,7 @@ div#footer-wrapper::before {
background-position: right 40px top 20px, right 130px top 20px, right 270px top 20px, right 0px top 0px;
position: absolute;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-image: url(img/cias.png), url(img/agglo-blois.png), url(img/blois.png);
background-position: right 40px top 20px, right 130px top 20px, right 270px top 20px;
position: static;
@ -351,7 +351,7 @@ div#footer-wrapper::before {
padding: 1rem 0 1rem 0;
div.textcell {
padding-left: $sidebar-width;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
}
a {
@ -370,7 +370,7 @@ div#gauche {
padding-top: 0;
background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px);
min-height: 100%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
min-height: 0;
background: none;
width: auto;
@ -487,7 +487,7 @@ div#rub_service div.dataview, div#rub_service dl#evolutions, div#rub_service for
div#rub_service {
margin-top: 0;
padding: 0 3rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0 0.5rem;
box-sizing: border-box;
}

4
static/bouches-du-rhone/_custom.scss
View File

@ -46,7 +46,7 @@ div#section-une {
height: 300px;
padding: 2rem;
background-size: cover;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: auto;
}
div.cell#une {
@ -59,7 +59,7 @@ div#section-une {
border: none;
opacity: 0.9;
padding: 2rem 4rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
float: none;
width: auto;
padding: 1rem 1rem;

8
static/calvados-cd14/_custom.scss
View File

@ -125,7 +125,7 @@ body.has-picture {
nav::after {
transition: all ease 0.2s;
top: calc(#{$toplinks-height} + #{$nav-padding} + #{$font-size * 3});
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: -16px;
height: 100px;
}
@ -146,7 +146,7 @@ body.scrolled {
padding-top: 0;
padding-bottom: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-bottom: 1rem;
}
}
@ -156,7 +156,7 @@ body.scrolled {
&.has-picture nav::after {
top: calc(#{$nav-padding} + #{$font-size * 3});
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: -16px;
}
}
@ -170,7 +170,7 @@ span.helptext, div.hint {
font-size: 90%;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav, .site-header {
text-align: left;
position: static;

6
static/castelnau-le-lez/_custom.scss
View File

@ -27,7 +27,7 @@ div#header-wrapper {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
}
@ -84,7 +84,7 @@ div#main-content-wrapper {
color: black;
padding: 5px 10px 10px 10px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: 0;
right: 0;
max-width: none;
@ -103,7 +103,7 @@ footer {
.wcs-steps {
position: relative;
@media ($mq-min--wcs-steps-horizontal-layout) and (max-width: $mobile-limit) {
@media ($mq-min--wcs-steps-horizontal-layout) and ($max-mobile-viewport) {
padding: 0.5em;
}
}

4
static/castries-2020/_custom.scss
View File

@ -17,7 +17,7 @@ div#header {
overflow: hidden;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: none;
padding-left: 0;
a {
@ -38,7 +38,7 @@ div#header {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.gru-nav-wrapper {
margin-top: -40px;
}

8
static/castries/_custom.scss
View File

@ -3,7 +3,7 @@ body {
background-attachment: fixed;
background-size: cover;
padding: 50px 0 20px 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
}
@ -17,7 +17,7 @@ div#page {
.site-header, nav, #main-content-wrapper {
box-sizing: border-box;
padding: 0 20px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
}
@ -33,7 +33,7 @@ div#page {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
a {
width: 100%;
@ -52,7 +52,7 @@ footer {
border-radius: 0 0 2 * $border-radius 2 * $border-radius;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.gru-nav-wrapper {
margin-top: -40px;
}

6
static/chateauroux/_custom.scss
View File

@ -23,7 +23,7 @@ footer::before {
border-top: 40px solid #3F3F3F;
background: url(header-bg.png) no-repeat 50% 0;
height: 120px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 130px;
}
}
@ -42,7 +42,7 @@ h1#logo {
a {
padding-left: 120px;
color: #0779b7;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 100px;
}
}
@ -71,7 +71,7 @@ div#nav > ul > li a {
font-weight: bold;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#toplinks {
max-width: none;
}

4
static/clapiers/_custom.scss
View File

@ -16,7 +16,7 @@ body {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 80px;
padding-left: 0;
a {
@ -51,7 +51,7 @@ footer {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.gru-nav-wrapper {
margin-top: -80px;
}

2
static/clapotis-les-canards/_custom.scss
View File

@ -16,7 +16,7 @@
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#header #top #logo a {
display: block;
height: 75px;

14
static/clermont-metropole/_custom.scss
View File

@ -9,7 +9,7 @@ h1#logo {
display: block;
text-indent: -9999px;
height: 50px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: center center;
background-size: contain;
padding-top: 15px;
@ -23,14 +23,14 @@ div#toplinks {
top: -40px;
background: transparent;
border: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 0;
}
a {
color: #ffffff;
}
span.connected-user {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -41,7 +41,7 @@ div#nav {
margin: 0 0.6%;
width: 193px;
text-align: center;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
text-align: left;
margin: 0;
@ -111,7 +111,7 @@ div.carrousel-item-content {
text-transform: uppercase;
margin-bottom: 20px;
width: 50%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
}
@ -126,7 +126,7 @@ div#header-wrapper {
}
div#footer-wrapper {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -139,7 +139,7 @@ div#header-top {
display: none;
}
ul {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
}
}

4
static/clisson-sevre-et-maine-agglo/_custom.scss
View File

@ -1,7 +1,7 @@
div#page {
margin: 0 60px;
background: #F1F1F1;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: auto;
}
}
@ -20,7 +20,7 @@ h1#logo a {
padding-bottom: 20px;
color: $title-color;
font-weight: normal;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
padding-left: 0;
overflow: hidden;

4
static/clisson/_custom.scss
View File

@ -1,5 +1,5 @@
h1#logo {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
overflow: hidden;
}
}
@ -12,7 +12,7 @@ h1#logo a {
line-height: 80px;
padding-left: 250px;
color: $title-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
overflow: hidden;
text-indent: -2000px;
}

20
static/cnil/_custom.scss
View File

@ -19,7 +19,7 @@ a.pk-button:link, a.pk-button:visited {
body {
background: $lightgray;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: white;
}
h1, h2, h3 {
@ -30,12 +30,12 @@ body {
.site-header {
background: white;
border-top: 40px solid #444444;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-top: 0;
}
h1#logo {
padding: 40px 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 50px 0;
}
a {
@ -61,14 +61,14 @@ body {
nav {
text-align: center;
font-family: $title-font-family;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
}
div.gru-nav > ul > li a {
font-weight: normal;
text-transform: uppercase;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div.gru-nav-wrapper {
background: transparent;
}
@ -79,7 +79,7 @@ nav {
background: white;
box-sizing: border-box;
padding: 0.5rem 1rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0.5rem 0.5rem;
}
}
@ -92,7 +92,7 @@ div.textcell {
footer {
margin-top: 30px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
}
h1, h2, h3 {
@ -271,7 +271,7 @@ div.list-of-forms {
margin-top: 2rem;
margin-bottom: 0;
padding-bottom: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
}
}
@ -283,7 +283,7 @@ div.list-of-forms {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#login-page.methods2 > .block {
margin-left: 0;
margin-right: 0;
@ -350,7 +350,7 @@ div.form-validation div.page {
div#rub_service #steps ~ form {
margin-right: #{0 - $grid-gutter};
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 0;
}
}

2
static/cotes-d-armor/_custom.scss
View File

@ -55,7 +55,7 @@ footer {
padding-bottom: 60px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#header-wrapper {
height: 220px;
}

4
static/cournonterral/_custom.scss
View File

@ -11,7 +11,7 @@ div#header {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
a {
@ -28,7 +28,7 @@ div#nav {
& > ul {
margin-top: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
}
}

2
static/dauphine/_custom.scss
View File

@ -44,7 +44,7 @@ div#nav > ul > li > a:hover {
border-bottom: 3px solid $footer-background;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav {
height: auto;
}

2
static/dreux/_custom.scss
View File

@ -74,7 +74,7 @@ div.buttons.submit {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#header #top #logo a {
height: 75px;
width: 100%;

6
static/fabregues/_custom.scss
View File

@ -1,7 +1,7 @@
div#header-wrapper {
background: transparent url(img/bandeau_plateforme.png) top center no-repeat;
height: 208px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: 0px -30px;
height: 185px;
}
@ -13,7 +13,7 @@ div#header-wrapper {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
}
@ -40,7 +40,7 @@ div.gru-nav .gru-nav-button {
a {
display: inline-block;
color: $font-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 80%;
}
}

2
static/fondettes/_custom.scss
View File

@ -122,7 +122,7 @@ div.footer-content div {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
body {
padding-top: 5px;
background-position: 0 5px;

30
static/fontenay-sous-bois-2018/_custom.scss
View File

@ -17,7 +17,7 @@ div#header-wrapper {
left: 4rem;
top: 0px;
z-index: 10;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: 0;
max-width: 100%;
overflow: hidden;
@ -41,7 +41,7 @@ div#header-wrapper {
&:hover {
background: url(img/fsb-top-hexa-hover.png);
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -69,7 +69,7 @@ div#nav-wrapper {
top: 5.5rem;
right: 0rem;
width: 500px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
max-width: 100%;
}
@ -77,7 +77,7 @@ div#nav-wrapper {
button {
position: absolute;
right: 4rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: 1rem;
right: 2.5rem;
}
@ -159,7 +159,7 @@ div#a-la-une {
div#a-la-une-texte {
position: relative;
height: 403px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: auto;
}
> div {
@ -167,7 +167,7 @@ div#a-la-une-texte {
padding-right: 150px;
padding-top: 140px;
text-align: center;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0 0 1rem 0;
background: $primary-color;
border-radius: 10px;
@ -179,7 +179,7 @@ div#a-la-une-texte {
left: 0;
border-radius: 10px;
max-width: 100%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -204,7 +204,7 @@ div#a-la-une-texte {
position: absolute;
right: 90px;
bottom: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -215,7 +215,7 @@ div#a-la-une-texte {
color: $primary-color;
font-size: 2rem;
margin: 0 0.5rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: center;
}
}
@ -232,7 +232,7 @@ div#sidebar {
.gru-content #sidebar div.cell {
margin-right: 40px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 0rem;
}
}
@ -242,7 +242,7 @@ div#sidebar {
border: 1px solid #c6c6c6;
border-radius: 10px;
padding: 1rem 3rem 1rem 160px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: top center;
padding: 80px 0 0 0;
h2 {
@ -262,11 +262,11 @@ div#sidebar {
-ms-flex: 1;
flex: 1;
margin-right: 2rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 0;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0 1rem 1rem 1rem;
button {
margin-right: 0;
@ -338,7 +338,7 @@ div#content {
padding-left: 80px;
text-align: left;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: center;
}
}
@ -358,7 +358,7 @@ div#gauche {
min-width: 0;
background: transparent url(img/trackingcode.png) 2rem 1rem no-repeat;
padding: 1rem 3rem 1rem 130px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: top left;
padding: 0 1rem 1rem 80px;
}

4
static/gorges/_custom.scss
View File

@ -11,7 +11,7 @@ h1#logo a {
padding-left: 250px;
color: $title-color;
text-indent: -9999px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
overflow: hidden;
text-indent: -2000px;
}
@ -52,7 +52,7 @@ div#nav > ul {
// Steps
.wcs-steps {
@media (max-width: $mobile-limit){
@media ($max-mobile-viewport){
font-size: 1.1em;
}
}

4
static/gpseo/_custom.scss
View File

@ -21,7 +21,7 @@ header {
padding: 1rem 0 1rem 255px;
color: $black;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
a {
margin-top: 50px;
@ -69,7 +69,7 @@ header {
a.logout {
display: inline-block;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 90%;
padding-top: 0;
max-width: none;

26
static/grand-chambery/_custom.scss
View File

@ -85,11 +85,11 @@ div#header {
.sep {
color: $red;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 80px;
h1#logo.has-logo::after {
content: none;
@ -110,7 +110,7 @@ div#header {
background: $gray;
padding-top: 2rem;
padding-bottom: 2rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0.5rem 0.5rem 1rem 0.5rem;
box-sizing: border-box;
}
@ -120,19 +120,19 @@ div#header {
max-width: 100vw;
margin: 0 auto;
box-sizing: border-box;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
h1 {
font-size: 300%;
color: $red;
margin-bottom: 6rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-bottom: 3rem;
font-size: 200%;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div.cell {
margin-left: 0;
}
@ -169,7 +169,7 @@ div#anomalies {
background-size: 100% auto;
padding-top: 250px;
padding-right: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: $bgblue;
padding-top: 0;
}
@ -210,7 +210,7 @@ div#anomalies {
width: 50%;
float: left;
padding-bottom: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
float: none;
}
@ -251,7 +251,7 @@ div#anomalies {
nav {
display: none;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
#nav button {
transform: skewX(-21deg);
@ -303,7 +303,7 @@ div#main-content-wrapper {
padding-top: 5px;
min-height: 3.5rem;
padding-bottom: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
min-height: 2.5rem;
}
}
@ -405,7 +405,7 @@ div#gauche {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
+ div#rub_service {
width: 100%;
@ -531,7 +531,7 @@ div#gauche {
div.content {
padding-right: 1rem;
box-sizing: border-box;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0 1rem;
}
}
@ -593,7 +593,7 @@ div#gauche {
flex-basis: 100%;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div.previous-button {
order: 1;
}

6
static/grandlyon-sau/_categorie-demande.scss
View File

@ -12,7 +12,7 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
&.selected {
@include flexbox();
@include flex-direction(row);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include flex-direction(column);
}
}
@ -109,7 +109,7 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
}
}
}
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
> ul {
> li {
@include flexbox();
@ -172,7 +172,7 @@ $subpages: transport-en-commun, velo-partage, parking, autopartage, scooters, to
&.selected {
@include flexbox();
@include flex-direction(column);
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
@include flex-direction(row);
}
}

22
static/grandlyon-sau/_custom.scss
View File

@ -47,11 +47,11 @@ div#header-wrapper {
background: white;
border-bottom: 5px solid $primary-color;
box-shadow: 0px 0px 10px #888888;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-bottom: 3px solid $primary-color;
}
#top #logo {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
}
}
@ -78,7 +78,7 @@ div#main-content-wrapper {
}
div#columns {
padding: 1em;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
}
@ -86,7 +86,7 @@ div#main-content-wrapper {
position: sticky;
top: 2em;
padding: 1em 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: relative;
padding: 0 1em;
margin: 0;
@ -117,7 +117,7 @@ div.cell > div {
#columns {
div.cell {
&.bandeau div {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: $cell-background;
height: auto;
}
@ -242,7 +242,7 @@ div.cell > div {
div.linkcell {
&.retour {
background: transparent;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-bottom: 0;
font-size: 0.2em;
}
@ -250,7 +250,7 @@ div.cell > div {
background: transparent url('img/retour.png') no-repeat;
background-size: contain;
padding-left: 6em;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-indent: -9999px;
}
&:hover {
@ -267,7 +267,7 @@ div.cell > div {
width: 25em;
margin: 1ex auto;
padding: 1em 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
select {
@ -281,7 +281,7 @@ div.cell > div {
@include vendor-prefix(flex-wrap, wrap);
@include justify-content(space-around);
@include vendor-prefix(align-items, stretch);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include flex-direction(column);
}
li {
@ -300,7 +300,7 @@ div.cell > div {
margin: 0 auto;
text-align: center;
display: block;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-size: auto 3em;
padding-top: 4em;
}
@ -352,7 +352,7 @@ div.cell > div {
@include vendor-prefix(flex-wrap, wrap);
> div {
width: 350px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
a {

2
static/grandlyon/_custom.scss
View File

@ -17,7 +17,7 @@ h1#logo {
line-height: 84px;
width: 100%;
text-indent: 144px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-indent: -1000px;
width: auto;
}

60
static/grenoble-metropole-2019/_custom.scss
View File

@ -107,7 +107,7 @@ form#champRecherche input {
/* hide site's "go to top" button */
img#hautDePage {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none !important;
}
}
@ -120,7 +120,7 @@ img#hautDePage {
padding-left: 1em;
box-shadow: none;
border-radius: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
}
a {
@ -143,7 +143,7 @@ img#hautDePage {
text-decoration: none;
font-weight: bold;
display: inline-block;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
}
&:hover {
@ -179,7 +179,7 @@ img#hautDePage {
font-weight: normal;
margin-bottom: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 10px 0;
h2 {
font-size: 180%;
@ -199,7 +199,7 @@ img#hautDePage {
display: -ms-flexbox;
display: flex;
justify-content: space-between;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include vendor-prefix(flex-direction, column);
}
div.right {
@ -217,7 +217,7 @@ img#hautDePage {
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 1.35em;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
column-count: 1;
-moz-column-count: 1;
-webkit-column-count: 1;
@ -225,7 +225,7 @@ img#hautDePage {
}
}
div.right, div.left {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
}
@ -297,7 +297,7 @@ img#hautDePage {
}
ul {
position: absolute;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: relative;
}
z-index: 10;
@ -325,7 +325,7 @@ img#hautDePage {
}
}
div.wcsformcell.proxi {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
width: calc(50% - 1.35em);
float: left;
}
@ -347,7 +347,7 @@ img#hautDePage {
div.trackingcodeinputcell {
box-shadow: 0px 0px 10px #888888;
padding: 0.5ex;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-color: #f5f5f5;
}
h2 {
@ -363,7 +363,7 @@ img#hautDePage {
display: block;
top: -40px;
background-size: contain;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -373,7 +373,7 @@ img#hautDePage {
padding: 1.5em 1em 10px 1em;
border: 4px solid $primary-color;
position: relative;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 30px;
}
p {
@ -402,7 +402,7 @@ img#hautDePage {
div.user-menu {
width: 30%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
div.menucell {
@ -473,7 +473,7 @@ label {
-moz-column-count: 2;
-webkit-column-count: 2;
column-gap: 1.35em;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
column-count: 1;
-moz-column-count: 1;
-webkit-column-count: 1;
@ -623,7 +623,7 @@ div#nav {
}
}
&.toggled {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 50%;
> ul {
display: block;
@ -633,7 +633,7 @@ div#nav {
}
a#publik-mobile-menu {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-color: #2a2a2a;
background-image: url('img/mobile-menu.svg');
background-repeat: no-repeat;
@ -724,7 +724,7 @@ div.configjsoncell.user {
div.dashboard-item-label, div.dashboard-item-value {
text-align: center;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 30px 10px 10px 10px;
margin: 10px 0;
}
@ -738,7 +738,7 @@ div.configjsoncell.user {
background-image: url('img/user-#{$item}.svg');
background-repeat: no-repeat;
background-size: contain;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: calc(50% - 23px);
top: -23px;
}
@ -747,7 +747,7 @@ div.configjsoncell.user {
}
div.user-dashboard {
margin: 2ex 1ex 0 150px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 3ex 1ex 0 1ex;
@include vendor-prefix(justify-content, center);
}
@ -767,7 +767,7 @@ div#tracking-code {
margin-bottom: 3em;
color: $primary-color;
font-family: 'Josefin Sans', sans-serif;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-bottom: 1em;
}
h3, a {
@ -799,7 +799,7 @@ div#rub_service {
h2 {
text-transform: uppercase;
text-align: left;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 120%;
}
&::before {
@ -973,7 +973,7 @@ select {
div.cell, div.block {
h2:first-child {
margin-bottom: 2ex;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 120%;
}
}
@ -1008,7 +1008,7 @@ select {
-webkit-column-count: 3;
column-gap: 1.35em;
padding: 1ex 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
column-count: 1;
-moz-column-count: 1;
-webkit-column-count: 1;
@ -1131,7 +1131,7 @@ div.buttons {
/* wcs progress bar styles */
.wcs-steps.steps-1 { display: none; }
.wcs-steps--list {
@media (max-width: $mobile-limit) {
@media ($max-mobile-viewport) {
justify-content: center;
}
}
@ -1141,7 +1141,7 @@ div.buttons {
@include desktop-vertical-steps() {
font-size: 0.65em;
}
@media (max-width: $mobile-limit) {
@media ($max-mobile-viewport) {
padding-left: 0;
text-align: center;
top: calc(100% - #{$wcs-steps-spacing});
@ -1171,7 +1171,7 @@ div.comment-field {
p {
margin: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 3ex 1em 1ex 1em;
margin: 2ex auto;
&::before {
@ -1197,7 +1197,7 @@ body.page-register {
div#frontend-registration-email, div#frontend-registration-fc {
display: inline-block;
width: 48%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
width: 100%;
}
@ -1206,7 +1206,7 @@ body.page-register {
padding: 1ex 2ex 0 0;
text-transform: uppercase;
vertical-align: top;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 1ex 0;
}
p, form {
@ -1251,7 +1251,7 @@ div#login-page {
div#login-page, div.a2-block {
div#fc-button-wrapper {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 0;
}
}
@ -1334,7 +1334,7 @@ div#profile {
text-transform: uppercase;
}
@include vendor-prefix(column-count, 2);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include vendor-prefix(column-count, 1);
}
div.field {

2
static/grosboule-les-bains/_custom.scss
View File

@ -89,7 +89,7 @@ body.scrolled {
font-weight: normal;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav, header {
text-align: left;
position: static;

30
static/haute-garonne-cd31/_custom.scss
View File

@ -40,7 +40,7 @@ div#header-wrapper {
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#header {
background: $primary-color;
}
@ -48,7 +48,7 @@ div#header-wrapper {
div#header h1#logo {
position: absolute;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
a {
@ -67,7 +67,7 @@ nav {
margin-left: 180px;
padding-top: 30px;
padding-bottom: 25px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
margin-left: 0;
}
@ -77,7 +77,7 @@ nav {
font-weight: 600;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent;
}
}
@ -99,12 +99,12 @@ nav {
&.registration {
padding-left: 10px;
background: transparent;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
min-width: 130px;
right: 10px;
}
@ -116,20 +116,20 @@ body.has-picture nav::after {
div#main-content-wrapper {
margin-top: 2rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
}
}
div#welcome {
display: flex;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
flex-direction: column;
}
div#carrousel {
width: 700px;
flex: 1;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}
@ -140,7 +140,7 @@ div#welcome {
width: 350px;
box-shadow: 0 5px 5px 5px #eee;
border-bottom: 5px solid $primary-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
margin-left: 0;
}
@ -443,7 +443,7 @@ div#tracking-code {
font-size: 27px;
text-decoration: underline;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div.tracking-code-part {
display: flex;
h3, a {
@ -460,12 +460,12 @@ div#tracking-code {
div#gauche {
width: 23%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
& + div#rub_service {
width: 75%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}
@ -498,7 +498,7 @@ div#gauche {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
body.has-picture nav::after {
height: 200px;
margin-top: -6px;
@ -583,7 +583,7 @@ div#account-management ul.account-management > li > a,
div#registration-blocks,
div#login-page {
margin-top: 5rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
}
}

6
static/haute-goulaine/_custom.scss
View File

@ -11,7 +11,7 @@ div#header {
div#header h1 {
line-height: 190px;
height: 190px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 155px;
}
a {
@ -23,7 +23,7 @@ div#header h1 a {
color: white;
padding-left: 180px;
display: inline-block;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-indent: -2000px;
overflow: hidden;
}
@ -33,7 +33,7 @@ div#header h1 a {
.wcs-steps {
font-size: 1.25em;
@media (min-width: $mobile-limit + 1) {
@media ($min-desktop-viewport) {
font-size: 1.5em;
}
}

2
static/hautes-alpes-2018/_circle-steps.scss
View File

@ -63,7 +63,7 @@ div#steps {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#gauche div#steps {
@include order(2);

12
static/hautes-alpes-2018/_custom.scss
View File

@ -80,12 +80,12 @@ div#main-content-wrapper {
box-sizing: border-box;
background-color: $cell-background;
font-size: 1.5rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include flex-direction(column);
}
> div {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: $inner-nav-margin;
}
}
@ -96,7 +96,7 @@ div#main-content-wrapper {
background-color: transparent;
height: unset;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include vendor-prefix(flex-basis, auto);
width: 100%;
@ -154,7 +154,7 @@ div#main-content-wrapper {
@include vendor-prefix(flex-basis, 50%);
@include order(1);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include vendor-prefix(flex-basis, $nav-height);
margin: 0;
width: 100%;
@ -347,7 +347,7 @@ div#content {
input,
textarea {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
max-width: 100%;
}
}
@ -463,7 +463,7 @@ div.ui-dialog {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#content {
padding: $mobile-block-padding;

6
static/hautes-alpes-2018/_neutral-variant.scss
View File

@ -11,7 +11,7 @@ $margin-center: 0 auto;
line-height: 1.4;
margin-top: $custom-header-height;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: $custom-mobile-header-height;
}
@ -26,7 +26,7 @@ $margin-center: 0 auto;
#header-wrapper {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
min-height: $custom-mobile-header-height;
}
@ -75,7 +75,7 @@ $margin-center: 0 auto;
> li:hover > ul {
background: $cell-background;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 60px;
> li a {

8
static/juvignac/_custom.scss
View File

@ -3,7 +3,7 @@
div#header-wrapper {
background: $primary-color;
div#header h1 {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 50px;
}
a {
@ -13,7 +13,7 @@ div#header-wrapper {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
a {
@ -40,7 +40,7 @@ div#nav {
border: none;
box-shadow: none;
border-radius: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: 0;
right: 0;
max-width: none;
@ -50,7 +50,7 @@ div#nav {
color: white;
font-weight: bold;
padding: 10px 10px 15px 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 80%;
}
}

2
static/la-hague/_custom.scss
View File

@ -80,7 +80,7 @@ h1#logo a {
padding-left: 50px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav {
background: transparent;
}

2
static/la-reunion/_custom.scss
View File

@ -11,7 +11,7 @@ div#header {
color: $primary-color;
text-transform: uppercase;
font-weight: normal;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
overflow: hidden;
text-indent: -2000px;
}

2
static/la-seyne-sur-mer/_custom.scss
View File

@ -26,7 +26,7 @@ div#nav > ul {
div#nav-wrapper {
background: $nav-background;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent;
}
}

10
static/lattes/_custom.scss
View File

@ -19,7 +19,7 @@ body {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
padding-top: 70px;
a {
@ -30,7 +30,7 @@ body {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav-wrapper {
background: inherit;
}
@ -56,11 +56,11 @@ div#nav {
display: inline-block;
color: $font-color;
padding: 10px 10px 15px 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 80%;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: 0;
right: 0;
max-width: none;
@ -70,7 +70,7 @@ div#nav {
div#main-content {
background: white;
padding: 20px 10px 0 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 20px 0 0 0;
}
}

6
static/laverune/_custom.scss
View File

@ -7,7 +7,7 @@ body {
#header-wrapper {
#header {
background: url(img/bandeau_rond_point.jpg) 50% -40px no-repeat;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: $primary-color;
}
}
@ -21,7 +21,7 @@ body {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
padding-top: 30px;
a {
@ -46,7 +46,7 @@ body {
}
.gru-nav-wrapper {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: -85px;
}
}

10
static/le-cres/_custom.scss
View File

@ -9,7 +9,7 @@ div#header-wrapper {
div#header h1 {
padding-top: 40px;
padding-bottom: 40px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 80px;
}
a {
@ -19,7 +19,7 @@ div#header-wrapper {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
a {
@ -43,7 +43,7 @@ div#nav {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div.gru-nav-wrapper {
background: transparent;
}
@ -60,7 +60,7 @@ div#nav {
color: white;
padding: 10px 10px 15px 10px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: 0;
right: 0;
max-width: none;
@ -70,7 +70,7 @@ div#nav {
div#main-content {
background: white;
padding: 20px 10px 0 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 20px 0 0 0;
}
}

2
static/lenord/_custom.scss
View File

@ -53,7 +53,7 @@ div#nav {
margin: -0.7em calc(50% - 0.4em);
border-radius: 0 1em 0 0;
display: block;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}

2
static/lille-metropole/_custom.scss
View File

@ -113,7 +113,7 @@ body.has-picture nav::after {
font-weight: normal;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav, .site-header {
text-align: left;
position: static;

46
static/lille/_custom.scss
View File

@ -34,7 +34,7 @@ nav {
#header {
height: $header-height;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: $mobile-header-height;
}
#top a {
@ -62,7 +62,7 @@ nav {
border: 30px solid $primary-color;
border-color: $primary-color $primary-color transparent transparent;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 0.5rem;
background-size: 80px;
background-position: bottom 0.5rem left 50%;
@ -92,7 +92,7 @@ nav {
a {
color: $user-info-color;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 5px;
top: 20px;
left: 80px;
@ -120,7 +120,7 @@ div.gru-nav {
div.gru-nav .gru-nav-button {
top: -90px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: -15px;
}
@media screen and (max-width: 360px) {
@ -148,7 +148,7 @@ div.gru-nav .gru-nav-button {
}
}
@media screen and (min-width: $mobile-limit - 1px) {
@media screen and ($min-desktop-viewport) {
#pwa-navigation {
display: block;
max-width: $width;
@ -199,7 +199,7 @@ div.gru-nav .gru-nav-button {
}
width: 100%;
margin-top: -1px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div.carrousel-content {
height: 260px;
}
@ -208,7 +208,7 @@ div.gru-nav .gru-nav-button {
top: 120px;
left: 55px;
text-align: left;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: 60px;
left: 20px;
label {
@ -230,7 +230,7 @@ div.gru-nav .gru-nav-button {
line-height: 130%;
text-transform: uppercase;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: 90px;
left: 22px;
max-width: 80%;
@ -246,7 +246,7 @@ div.gru-nav .gru-nav-button {
margin: -40px 50px 0 50px;
background: white url($data_uri_codebarre) 50px 25px no-repeat;
background-size: 60px 60px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: -40px 10px 0 10px;
background-position: 10px 10px;
}
@ -254,7 +254,7 @@ div.gru-nav .gru-nav-button {
width: 30%;
margin-left: 140px;
float: left;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
float: none;
margin-left: 90px;
@ -266,7 +266,7 @@ div.gru-nav .gru-nav-button {
text-transform: uppercase;
margin: 0;
font-size: 24px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 5px;
}
}
@ -277,7 +277,7 @@ div.gru-nav .gru-nav-button {
padding: 0 0 0.7ex 0.7em;
margin-right: 9px;
background: white;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 9rem;
}
}
@ -300,7 +300,7 @@ div.gru-nav .gru-nav-button {
position: relative;
top: 5px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: 15px;
font-size: 25px;
height: 50px;
@ -317,7 +317,7 @@ div.gru-nav .gru-nav-button {
margin-right: 50px;
font-size: 18px;
padding-top: 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
float: none;
margin: 0 1rem;
@ -358,7 +358,7 @@ div.gru-nav .gru-nav-button {
#columns {
margin-top: 0rem;
min-height: 80vh;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
min-height: auto;
}
@ -366,7 +366,7 @@ div.gru-nav .gru-nav-button {
#left, #middle, #right {
float: left;
width: 33%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
float: none;
width: 100%;
.cell {
@ -396,7 +396,7 @@ div.gru-nav .gru-nav-button {
div#content div.wcsformsofcategorycell {
position: relative;
margin-bottom: 25px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0px;
border-bottom: 3px solid white;
}
@ -420,7 +420,7 @@ div#content div.wcsformsofcategorycell {
}
}
&.foldable {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
h2 {
padding-right: 50px; // for folding arrow
}
@ -505,7 +505,7 @@ footer {
.page-template-homepage div.cell#filtre-profil {
border: none;
background: transparent;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 1rem;
}
label {
@ -534,7 +534,7 @@ div#title-section {
h1 {
margin-bottom: 1rem;
text-transform: uppercase;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 28px;
}
&::after {
@ -673,7 +673,7 @@ div#rub_service div#tracking-code {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0 -1ex;
width: auto;
ol {
@ -817,7 +817,7 @@ body.authentic-page {
margin-top: 55px;
height: 5px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -859,7 +859,7 @@ footer {
img {
max-width: 90%;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 50%;
}
@media screen and (max-width: $very-small-limit) {

4
static/lot-cd46/_custom.scss
View File

@ -69,7 +69,7 @@ body.has-picture {
nav::after {
transition: all ease 0.2s;
top: -2rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: -16px;
height: 100px;
}
@ -100,7 +100,7 @@ body.scrolled {
font-weight: normal;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav, .site-header {
background: $darkpink;
text-align: left;

4
static/lozere/_custom.scss
View File

@ -56,14 +56,14 @@ h1#logo a {
&:hover {
background-position: -0px -129px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 100px;
}
}
#nav-wrapper {
background: $nav-background;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent;
}
div#nav,

6
static/massoins/_custom.scss
View File

@ -14,7 +14,7 @@ div#header {
background: white url(slide_1.jpg) top right no-repeat;
background-size: contain;
min-height: 150px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: top left;
background-size: initial;
}
@ -34,7 +34,7 @@ div#nav > ul > li > a {
div#nav > ul > li:hover,
div#nav > ul > li.selected {
border-bottom: 5px solid $primary-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-bottom: none;
a {
color: $primary-color;
@ -95,7 +95,7 @@ div#top h1#logo {
a {
padding-left: 10px;
color: #647174;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
color: white;
text-shadow: 1px 1px 0px #333;
}

12
static/mauguio/_custom.scss
View File

@ -16,14 +16,14 @@
text-align: center;
background: transparent url(img/logo.png) top center no-repeat;
text-indent: -10000px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-size: auto 100%;
margin-top: 40px;
height: 93px;
}
}
background: url(img/bandeau-e-demarches.jpg) bottom center no-repeat;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-size: auto 180px;
}
#top {
@ -32,7 +32,7 @@
top: -175px;
box-shadow: none;
border: none;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: -125px;
}
}
@ -46,7 +46,7 @@
display: block;
text-indent: -10000px;
color: white;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 120px;
}
}
@ -88,7 +88,7 @@ div#home-text-cell {
h3 {
font-weight: normal;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
a.pk-button {
display: inline-block;
margin-bottom: 1ex;
@ -99,7 +99,7 @@ div#home-text-cell {
.gru-content div.cell.top-title-margin {
margin-top: 76px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
}
}

4
static/meaux/_custom.scss
View File

@ -27,7 +27,7 @@ h1#logo a {
content: "/";
color: white;
font-size: 120%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
content: none;
}
}
@ -36,7 +36,7 @@ h1#logo a {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#nav-wrapper {
background: transparent;
#nav li:after {

82
static/metz-metropole-2019/_custom.scss
View File

@ -72,7 +72,7 @@ button::-moz-focus-inner {
background-color: $yellow;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
height: $mobile-hamburger-menu-height;
overflow: hidden;
@ -115,7 +115,7 @@ button::-moz-focus-inner {
height: $mobile-hamburger-menu-height;
}
}
@media screen and (min-width: $mobile-limit) and (max-width: $width) {
@media screen and ($min-desktop-viewport) and (max-width: $width) {
width: calc(100vw - #{$nav-menu-side + $pwa-desktop-nav-width});
a.logout {
text-indent: -10000px;
@ -148,7 +148,7 @@ div.gru-nav {
div.gru-nav .gru-nav-button {
top: 0;
margin-left: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: $mobile-hamburger-menu-width;
height: $mobile-hamburger-menu-height;
.icon-bar {
@ -243,12 +243,12 @@ div.gru-nav .gru-nav-button {
background: url(/assets/header:background) top center no-repeat;
background-position: top center;
background-size: cover;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 140px;
}
border-bottom: 5px solid $yellow;
margin-bottom: 25px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-bottom: 0;
margin-bottom: 10px;
}
@ -273,7 +273,7 @@ div.gru-nav .gru-nav-button {
background: url(img/LOGO.svg) top center no-repeat;
background-size: auto 110px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 10px;
a {
max-width: 100vw;
@ -287,7 +287,7 @@ div.gru-nav .gru-nav-button {
}
}
.topside {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
-webkit-flex: 1;
@ -380,7 +380,7 @@ div.carrousel-content {
margin-bottom: 10px;
background: white;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: auto;
bottom: 10px;
height: auto;
@ -394,7 +394,7 @@ div.carrousel-content {
input + div div.carrousel-item {
padding-left: 0;
background: $yellow url(img/right.png) right 100px top 50% no-repeat !important;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: right 60px bottom 20px !important;
}
@media screen and (max-width: 360px) {
@ -402,7 +402,7 @@ div.carrousel-content {
}
}
input + div div.carrousel-item div.carrousel-item-content {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
vertical-align: top;
font-size: 16px;
}
@ -411,7 +411,7 @@ div.carrousel-content {
text-align: left;
margin-left: 0;
margin-right: 10rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 2rem;
height: 150px;
}
@ -482,7 +482,7 @@ footer #idea {
&::before {
background: $darkblue;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 100px;
p {
font-weight: normal;
@ -500,7 +500,7 @@ footer #idea {
footer {
#financeurs {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: center;
img {
float: none !important;
@ -524,7 +524,7 @@ footer {
background: $yellow;
}
margin-bottom: 20px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-bottom: 0;
}
}
@ -537,7 +537,7 @@ footer {
margin-left: 10px;
width: ($width / 2) - 10px;
}
@media screen and (min-width: $mobile-limit) and (max-width: $width) {
@media screen and ($min-desktop-viewport) and (max-width: $width) {
width: calc(100vw / 2 - 10px);
+ div.cell {
width: calc(100vw / 2 - 10px);
@ -549,7 +549,7 @@ footer {
border: 0;
background-color: white;
background-position: left 20px top 50%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: left 5px top 50%;
background-size: 160px auto;
}
@ -559,10 +559,10 @@ footer {
margin-bottom: 0;
div {
padding-left: 300px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 170px;
}
@media screen and (min-width: $mobile-limit) and (max-width: $width) {
@media screen and ($min-desktop-viewport) and (max-width: $width) {
padding-left: 250px;
}
display: table;
@ -577,7 +577,7 @@ footer {
font-weight: 500;
top: 0px;
height: 100%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
font-size: 18px;
}
@ -654,7 +654,7 @@ div.cell.trackingcodeinputcell {
div#page div#main-content-wrapper {
padding-bottom: 50px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-bottom: 10px;
}
}
@ -672,7 +672,7 @@ div#title-section {
&::before {
background: #ececec;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0 10px;
}
@ -686,7 +686,7 @@ div#title-section {
padding-bottom: 60px;
color: $darkblue;
max-width: 700px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
@ -707,7 +707,7 @@ div#title-section {
span.commune {
font-weight: bold;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
span {
text-align: left;
@ -726,10 +726,10 @@ div#gauche {
div#gauche + div#rub_service {
width: $width - 350px - 20px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
@media screen and (min-width: $mobile-limit) and (max-width: $width) {
@media screen and ($min-desktop-viewport) and (max-width: $width) {
width: calc(100vw - 350px - 20px);
}
}
@ -741,7 +741,7 @@ div#gauche div#tracking-code {
margin-top: -32px;
margin-bottom: 0;
position: relative;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0;
-webkit-order: 0;
order: 0;
@ -779,7 +779,7 @@ div#gauche div#tracking-code {
height: 32px;
width: 250px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
button {
width: 200px;
@ -966,7 +966,7 @@ footer {
img {
max-width: 90%;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 50%;
}
@media screen and (max-width: $very-small-limit) {
@ -1008,7 +1008,7 @@ a.big-image-link {
margin-bottom: 2rem;
margin-bottom: 1rem;
height: 250px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 150px;
background-position: top center;
background-size: auto 80px;
@ -1036,7 +1036,7 @@ a.big-image-link {
text-align: center;
color: $darkblue;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
strong {
top: 80px;
font-size: 14px;
@ -1063,7 +1063,7 @@ a.big-image-link {
div.cell.large a.big-image-link {
// signalement links on mobile, restore some desktop sizes
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-size: 230px auto;
border-width: 10px;
div strong {
@ -1077,18 +1077,18 @@ body.wcs-page {
#banner-wrapper {
margin-bottom: 0;
overflow: hidden;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 55px;
}
#banner .title h1 {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 5px;
}
a {
padding-top: 0;
height: 130px;
background-size: auto 110px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 55px;
background-image: url(img/LOGO-no-baseline.svg);
background-size: auto 45px;
@ -1096,7 +1096,7 @@ body.wcs-page {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#columns {
padding: 0;
}
@ -1113,7 +1113,7 @@ body.authentic-page {
}
#columns {
margin-top: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#login-page > div.block {
margin: 0 0 1rem 0;
}
@ -1132,7 +1132,7 @@ body.authentic-page {
div.cell {
margin-left: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0 0.7em;
width: auto;
max-width: auto;
@ -1169,7 +1169,7 @@ body.authentic-page {
div.a2-block {
padding-bottom: 1px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div.a2-block {
margin: 1rem auto;
}
@ -1218,7 +1218,7 @@ div#up {
border: 0;
margin-bottom: 0;
}
@media screen and (min-width: $mobile-limit + 1px) {
@media screen and ($min-desktop-viewport) {
#banner-wrapper {
height: 350px;
background-position: -250px 0px;
@ -1232,7 +1232,7 @@ div#up {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#content-top-wrapper .content-top {
display: -webkit-flex;
display: flex;
@ -1296,7 +1296,7 @@ form ul.errorlist {
padding: 1em;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
body.anonymous-user, body.focus-in {
#pwa-navigation {
display: none;

4
static/metz/_custom.scss
View File

@ -12,7 +12,7 @@
color: white;
text-transform: uppercase;
font-weight: normal;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 45px;
}
}
@ -25,7 +25,7 @@
border-radius: $border-radius;
text-transform: uppercase;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: $primary-color;
}
}

4
static/meudon/_custom.scss
View File

@ -133,7 +133,7 @@ div.buttons.submit {
#footer {
display: flex;
justify-content: flex-start;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
flex-direction: column;
}
div.cell {
@ -151,7 +151,7 @@ div.buttons.submit {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#header #top #logo {
padding-left: 40px;
padding-bottom: 20px;

8
static/meuse-cd55/_custom.scss
View File

@ -32,10 +32,10 @@
#logo {
font-size: $fz-h4;
padding-bottom: .5em;
@media (max-width: $mobile-limit) {
@media ($max-mobile-viewport) {
padding-left: $nav-menu-side + 10;
}
@media (min-width: $mobile-limit + 1) {
@media ($min-desktop-viewport) {
padding-bottom: 2em;
}
a {
@ -47,7 +47,7 @@
background-size: auto $meuse-logo-height-mobile;
background-position: left top 10px;
@media (min-width: $mobile-limit + 1) {
@media ($min-desktop-viewport) {
padding-top: $meuse-logo-width-desktop / 5;
padding-bottom: $meuse-logo-width-desktop / 21;
padding-left: $meuse-logo-width-desktop + 20;
@ -173,7 +173,7 @@ div#rub_service {
position: relative;
// Start visually rub-services just after nav
@media (min-width: $mobile-limit + 1) {
@media ($min-desktop-viewport) {
&::before {
content: "";
display: block;

34
static/meyzieu-2018/_custom.scss
View File

@ -7,7 +7,7 @@
background-repeat: no-repeat;
background-position: 0 center, 6em center;
background-size: 5% auto, 55% auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-image: url('img/logo.png');
background-position: 3em center;
background-size: 75% auto;
@ -42,7 +42,7 @@ div#nav {
> a {
background: $nav-item-hover-background;
border-bottom: 5px solid $primary-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border: 0;
}
}
@ -56,7 +56,7 @@ div#nav {
border-top: 1px solid $nav-background;
background: #fff;
width: calc(#{$sidebar-width} - 20px);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent;
width: auto;
}
@ -68,17 +68,17 @@ div#nav {
width: 100%;
color: $primary-color;
border-bottom: 5px solid #fff;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border: 0
}
&:hover {
border-bottom: 5px solid $primary-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border: 0;
}
}
span::after {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
content: ' ';
@ -131,7 +131,7 @@ div#nav {
.carrousel-wrapper {
@include flexbox();
@include flex(0 0 calc(#{$width} - #{$sidebar-width}));
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include flex-direction(column);
@include flex(0);
}
@ -139,20 +139,20 @@ div#nav {
@include flexbox();
align-items: center;
width: 25%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
margin: 0 auto;
display: block;
}
a {
text-align: center;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: justify;
}
}
ul {
border-right: 1px solid #000;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border: 0;
}
li {
@ -168,7 +168,7 @@ div#nav {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include flex-direction(column);
}
}
@ -288,12 +288,12 @@ div#nav {
}
div#gauche {
width: 27.5%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
+ div#rub_service {
width: 70.5%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
}
@ -354,7 +354,7 @@ div#nav {
@include flex-direction(row);
@include vendor-prefix(flex-wrap, wrap);
@include justify-content(flex-start);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include justify-content(space-around);
}
li {
@ -362,7 +362,7 @@ div#nav {
width: 10em;
@each $category in (associations, base-nautique, demenagement, etat-civil, famille, mediatheque) {
&.menu-#{$category} {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-color: $primary-color;
box-shadow: 0px 0px 10px #888888;
div.description {
@ -370,7 +370,7 @@ div#nav {
}
}
a {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-color: $primary-color;
color: #FFFFFF;
}
@ -382,7 +382,7 @@ div#nav {
padding: 6em 0 0 0;
&:hover {
background-image: url('img/#{$category}-hover.png');
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-color: $nav-item-hover-background;
+ div.description {
background-color: $nav-item-hover-background;

2
static/montlouis-sur-loire/_custom.scss
View File

@ -502,7 +502,7 @@ footer {
}
/* customization mobiles/petits écrans */
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#header-wrapper div#header div#toplinks {
right: 20px;
}

18
static/montpellier/_custom.scss
View File

@ -14,7 +14,7 @@ a {
// Steps
.wcs-steps {
@media (max-width: $mobile-limit + 1) {
@media ($max-mobile-viewport) {
background: #fbfbfb;
padding-left: $wcs-steps-spacing;
}
@ -530,7 +530,7 @@ ul.show-user-feeds li.planet { background-image: url(planet.png); }
position: absolute;
left: 200px;
top: -80px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
& ul {
@ -650,7 +650,7 @@ div#login-actions .actions form {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div.gru-nav .gru-nav-button + ul {
top: -17px;
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.26), 0px 2px 10px 0px rgba(0, 0, 0, 0.22);
@ -681,7 +681,7 @@ div#login-actions .actions form {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
/* limit display to those with the mobile keyword */
div.categoriescell li,
#services > ul > li,
@ -719,7 +719,7 @@ div.categories-list {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#content div.categories-list {
& > ul > li {
background: white;
@ -848,7 +848,7 @@ div#login-blocks > div {
margin-left: 3%;
margin-right: 6%;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
margin: 1em 0 !important;
}
@ -884,7 +884,7 @@ body.authentic-page {
}
div#main-content-wrapper {
margin-top: 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
div#nav {
margin-bottom: 0;
@ -905,7 +905,7 @@ body.authentic-page {
#toplinks span.connected-user {
display: none;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: 0;
}
}
@ -957,7 +957,7 @@ div.a2-block > form {
div.realisation {
float: left;
padding-top: 20px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}

10
static/montreuil/_custom.scss
View File

@ -21,7 +21,7 @@ div#header-wrapper {
position: absolute;
top: -60px;
width: calc(100% - 50px);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: 50px;
}
}
@ -95,7 +95,7 @@ div.gru-nav {
}
.gru-content {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 10px;
}
div.wcsformsofcategorycell {
@ -136,7 +136,7 @@ div.gru-nav {
// Steps
.wcs-step {
@media (max-width: $mobile-limit) {
@media ($max-mobile-viewport) {
border: none !important;
&--marker {
border: 1px solid;
@ -171,7 +171,7 @@ div.textcell {
div#sidebar {
div.trackingcodeinputcell {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
input {
width: 9.5em;
}
@ -189,7 +189,7 @@ div.cell {
&.sticky {
position: sticky;
top: 1em;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: relative;
margin-bottom: 2em;
}

2
static/moselle/_custom.scss
View File

@ -97,7 +97,7 @@ footer {
border-top: 10px solid $primary-color;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#page {
background: transparent;
}

6
static/murviel-les-montpellier/_custom.scss
View File

@ -4,7 +4,7 @@ body {
background: white url(img/pages_fnd.jpg) center top no-repeat;
background-attachment: fixed;
padding: 50px 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
}
@ -17,7 +17,7 @@ div#page {
.site-header, nav, #main-content-wrapper {
box-sizing: border-box;
padding: 0 20px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
}
@ -33,7 +33,7 @@ div#page {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
height: 100px;
a {

26
static/nancy-en-direct/_custom.scss
View File

@ -11,7 +11,7 @@ div#header h1#logo {
background-position: center left;
background-repeat: no-repeat;
background-size: auto 75%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: center center;
}
}
@ -27,7 +27,7 @@ div#toplinks {
display: flex;
align-items: center;
color: #ffffff;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
a {
@ -48,7 +48,7 @@ div.carrousel-item-content {
left: 50%;
transform: translateY(-50%);
z-index: -1;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
left: 0;
border-radius: 0;
@ -62,11 +62,11 @@ div.carrousel-item-content {
}
div.carrousel-content input + div div.carrousel-item {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
div.carrousel-item-content > a {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0;
width: 100%;
}
@ -130,16 +130,16 @@ div.cell.wcsformsofcategorycell {
}
div#nav-wrapper {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
background: #efefef;
}
div.gru-nav {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
background: transparent;
}
}
ul {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
margin-top: 0;
}
}
@ -224,7 +224,7 @@ div#tracking-code h3,
}
.wcs-steps {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-bottom: 10px;
}
}
@ -240,7 +240,7 @@ div#tracking-code {
}
}
div#gauche div#tracking-code a {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 30px;
}
}
@ -298,11 +298,11 @@ body.page-demarches #columns {
display: flex;
flex-direction: row;
justify-content: space-between;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
flex-direction: column;
}
#gauche {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
order: 1;
width: 180px;
margin-left: 20px;
@ -333,7 +333,7 @@ span.required {
}
div#side {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
flex-direction: column-reverse;
}
}

2
static/nanterre/_custom.scss
View File

@ -314,7 +314,7 @@ div#user-files {
padding: 10px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#toplinks {
max-width: 100%;
border-width: 0 0 2px 2px;

10
static/orleans/_custom.scss
View File

@ -25,7 +25,7 @@
background: #D1D1D1;
color: #555;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 0.5em;
}
}
@ -51,7 +51,7 @@ div#header-wrapper {
position: absolute;
top: -30px;
padding: 1ex 1em 0.3ex 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -207,7 +207,7 @@ div#footer {
color: #dbdbdb;
display: flex;
justify-content: space-between;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
flex-direction: column;
}
h3 {
@ -232,7 +232,7 @@ div#footer {
div.mairie-orleans, div.orleans-metropole {
width: 49%;
padding: 0 5px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}
@ -282,7 +282,7 @@ div.buttons {
float: left;
}
button {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 0.5em;
}
}

6
static/perols/_custom.scss
View File

@ -5,7 +5,7 @@ body {
div#header-wrapper {
background: transparent url(img/top.png) top center no-repeat;
height: 246px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-color: #3d3d3d;
background-position: -30px -30px;
}
@ -18,7 +18,7 @@ div#header-wrapper {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
a {
@ -34,7 +34,7 @@ div#nav {
margin-top: 0;
margin-bottom: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
}
}

16
static/pfwb/_custom.scss
View File

@ -38,7 +38,7 @@ div#nav {
margin-top: -100px;
max-width: 800px;
position: relative;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
}
& > ul {
@ -54,7 +54,7 @@ div#nav {
width: 8rem;
line-height: 120%;
padding-bottom: 5px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: auto;
padding: 1rem;
width: auto;
@ -64,14 +64,14 @@ div#nav {
&.menu-accueil {
background: url(img/home.svg) 50% 5px no-repeat;
background-size: 25px auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: none;
}
}
&.menu-videos {
background: url(img/videos.svg) 50% 5px no-repeat;
background-size: 30px auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: none;
}
}
@ -81,21 +81,21 @@ div#nav {
span {
font-weight: bold;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: none;
}
}
&.menu-pes {
background: url(img/pes.svg) 50% 10px no-repeat;
background-size: 30px auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: none;
}
}
&.menu-calendrier {
background: url(img/calendrier.svg) 50% 5px no-repeat;
background-size: 22px auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: none;
}
}
@ -121,7 +121,7 @@ body.has-picture {
font-weight: normal;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav, .site-header {
text-align: left;
position: static;

2
static/pratic/_custom.scss
View File

@ -66,7 +66,7 @@ div#nav a {
padding: 10px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#top {
background: transparent;
}

10
static/publik/_custom.scss
View File

@ -18,7 +18,7 @@ div#header {
left: - $header-width / 12;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 100px;
background-position: 60px -70px;
}
@ -54,7 +54,7 @@ h1#logo {
line-height: 2.5em;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent;
text-align: left;
}
@ -116,7 +116,7 @@ div#content {
margin: 0;
margin-top: -1em; /* cancel #content padding-top */
background: linear-gradient(to left, rgba(1, 1, 1, 0.1) 0%, rgba(0, 0, 0, 0) 20px);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
-ms-flex: auto;
flex: auto;
}
@ -189,7 +189,7 @@ div#content {
#content #columns {
margin-left: 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-left: 0;
}
}
@ -311,7 +311,7 @@ ul#evolutions div.evolution-metadata {
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#gauche {
width: auto;
min-height: auto;

10
static/quimper/_custom.scss
View File

@ -65,7 +65,7 @@ div#header {
font-size: 11px;
}
}
@media screen and (min-width: $nav-mobile-limit - 1px) {
@media screen and ($min-desktop-viewport) {
display: block;
max-width: $width;
margin: auto;
@ -282,7 +282,7 @@ footer {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.gru-content {
#sidebar {
order: 0;
@ -505,7 +505,7 @@ div#rub_service form[action="."] { // target form pages
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
br.clear {
display: none;
}
@ -739,7 +739,7 @@ ul#evolutions {
div.qommon-map {
height: 500px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 280px;
max-height: 40vh;
}
@ -879,7 +879,7 @@ div.notificationscell h2 + p {
padding-top: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
body.focus-in {
#pwa-navigation {
display: none;

12
static/rochefort/_custom.scss
View File

@ -61,7 +61,7 @@ div#header-nav li {
background: #54AAA1;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 15px 0;
clear: both;
float: none;
@ -109,7 +109,7 @@ div#top {
#logo a {
font-size: 28px;
color: $primary-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
visibility: hidden;
}
}
@ -118,7 +118,7 @@ div#top {
padding-top: 1ex;
padding-bottom: 2ex;
font-size: 24px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
@ -128,7 +128,7 @@ div#nav > ul > li {
margin-right: 10px;
border: 2px solid $primary-color;
border-width: 2px 0px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border: none;
}
}
@ -146,7 +146,7 @@ div.widget-prefilled div.content div.message {
font-size: 80%;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#footer-wrapper {
background-image: none;
}
@ -179,7 +179,7 @@ div#footer-bottom-wrapper {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#header {
padding: 0;
h1 {

8
static/saint-bres/_custom.scss
View File

@ -7,7 +7,7 @@ body {
div#header-wrapper {
background: transparent url(img/header.jpg) top center no-repeat;
height: 275px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: 40px 0;
}
div#header h1 {
@ -18,7 +18,7 @@ div#header-wrapper {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
a {
@ -33,7 +33,7 @@ div#nav {
& > ul {
margin-top: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
}
}
@ -50,7 +50,7 @@ div#nav {
font-weight: bold;
padding: 5px 10px 5px 10px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
right: 0;
a {
font-size: 80%;

6
static/saint-denis/_custom.scss
View File

@ -5,7 +5,7 @@ div#header {
}
#header #top #logo a {
@media screen and (min-width: $mobile-limit+1px) {
@media screen and ($min-desktop-viewport) {
background-size: unset;
height: 103px;
margin: 24px 0 6px;
@ -16,7 +16,7 @@ div#header {
font-weight: 700;
color: $font-color;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-size: contain;
text-indent: -10000px;
}
@ -50,7 +50,7 @@ body.has-picture nav::after {
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 113px;
width: unset;
}

4
static/saint-drezery/_custom.scss
View File

@ -5,7 +5,7 @@ body {
div#header-wrapper {
background: white url(img/bandeau-h.jpeg) top center no-repeat;
height: 235px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: top left;
height: 295px;
}
@ -17,7 +17,7 @@ div#header-wrapper {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
a {

8
static/saint-genies-des-mourgues/_custom.scss
View File

@ -5,7 +5,7 @@ body {
div#header-wrapper {
background: transparent url(img/bandeau-haut.jpg) top center no-repeat;
height: 208px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: -160px -50px;
height: 220px;
}
@ -17,7 +17,7 @@ div#header-wrapper {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
}
@ -31,7 +31,7 @@ div#nav {
margin-top: 0;
margin-bottom: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
}
}
@ -45,7 +45,7 @@ div#nav {
display: inline-block;
color: $font-color;
padding: 10px 10px 15px 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 80%;
}
}

4
static/saint-georges-d-orques/_custom.scss
View File

@ -10,7 +10,7 @@ div#page {
#main-content-wrapper {
box-sizing: border-box;
padding: 0 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
}
@ -26,7 +26,7 @@ div#header {
color: $primary-color;
padding-left: 10px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 40px;
padding-left: 0px;
}

6
static/saint-jean-de-vedas/_custom.scss
View File

@ -9,7 +9,7 @@ div#header-wrapper {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 10px;
padding-bottom: 30px;
padding-left: 0;
@ -23,7 +23,7 @@ div#header-wrapper {
div#nav {
background: transparent url(img/logo.png) 9px -120px no-repeat;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent;
}
margin-top: 0;
@ -32,7 +32,7 @@ div#nav {
& > ul {
margin-top: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
}
}

8
static/saint-lo-agglo/_custom.scss
View File

@ -44,7 +44,7 @@ div#header h1#logo {
nav {
border-bottom: 5px solid #ccc;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border: 0;
}
margin-bottom: 2rem;
@ -54,18 +54,18 @@ div#nav {
margin-top: 40px;
margin-bottom: 30px;
text-transform: uppercase;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 120px;
}
> ul {
margin-left: 300px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-left: 0;
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#toplinks span.sep {
display: inline-block;
}

4
static/saint-vallier-de-thiey/_custom.scss
View File

@ -23,7 +23,7 @@ div#nav > ul {
div#nav-wrapper {
border-top: 1px solid #E8E8E8;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-top: 0;
}
}
@ -52,7 +52,7 @@ div#header h1 {
a {
color: #045e56;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent;
line-height: 1;
padding-top: 40px;

24
static/saone-et-loire-cd71-2019/_custom.scss
View File

@ -32,7 +32,7 @@ div#header-wrapper {
position: static;
height: 101px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-top: 0;
}
#logo {
@ -47,7 +47,7 @@ div#header-wrapper {
text-indent: -10000px;
width: 450px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0px;
padding-top: 15px;
a {
@ -90,7 +90,7 @@ div#header-wrapper {
left: 0;
height: 100%;
width: 20px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
content: none;
}
}
@ -100,7 +100,7 @@ div#header-wrapper {
transform: skewX(-10deg) scale(1.1);
background: white;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
span.login a {
display: block;
padding-bottom: 5px;
@ -110,12 +110,12 @@ div#header-wrapper {
color: white;
.connected-user {
font-weight: bold;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
box-sizing: border-box;
top: 0px;
left: 0;
@ -129,7 +129,7 @@ div#header-wrapper {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 60px;
}
}
@ -139,7 +139,7 @@ div#nav-wrapper {
top: 5.5rem;
right: 0rem;
width: 500px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
max-width: 100%;
top: 50px;
@ -161,7 +161,7 @@ div#nav-wrapper {
font-size: 12px;
font-weight: normal;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: 1rem;
right: auto;
left: 0;
@ -178,7 +178,7 @@ div#nav-wrapper {
a {
color: white;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: 70px;
}
}
@ -193,7 +193,7 @@ div#nav-wrapper {
color: $primary-color;
font-size: 2rem;
margin: 0 0.5rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: center;
}
}
@ -210,7 +210,7 @@ div#sidebar {
.gru-content #sidebar div.cell {
margin-right: 40px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 0rem;
}
}

6
static/saone-et-loire-cd71/_custom.scss
View File

@ -17,7 +17,7 @@ div#header {
width: auto;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#header {
padding-top: 70px;
}
@ -38,7 +38,7 @@ div#header {
margin-right: 10px;
}
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
div#nav > ul {
margin-top: 0;
margin-bottom: 0;
@ -103,7 +103,7 @@ div#gauche {
margin-top: 0;
}
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
div#gauche {
width: $sidebar-width + 10px;
}

6
static/seine-et-marne/_custom.scss
View File

@ -5,7 +5,7 @@ body {
div#header {
background: white url(logo-cg77-pic.svg) bottom left no-repeat;
padding-left: 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
background-position: top left;
}
@ -16,7 +16,7 @@ h1#logo a {
line-height: 140px;
height: 140px;
text-transform: uppercase;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
line-height: 120px;
height: 85px;
}
@ -65,7 +65,7 @@ div#toplinks {
border-radius: 1em;
border: none;
padding: 1ex 2em;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: 5px;
}
}

4
static/sens/_custom.scss
View File

@ -54,7 +54,7 @@ div#nav {
margin: 10px 0px 5px 10px;
padding-left: 50px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
& > ul {
background: $tertiary-color;
@ -133,7 +133,7 @@ div#footer-wrapper {
margin-top: -66px;
margin-left: -8px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 10px;
img {
width: 72px;

2
static/sicoval/_custom.scss
View File

@ -20,7 +20,7 @@ div#nav ul {
margin-top: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#header #top #logo {
padding-left: 40px;
}

2
static/sictiam/_custom.scss
View File

@ -18,7 +18,7 @@ div#nav {
div#nav-wrapper {
background: $nav-background;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent;
}
}

4
static/sictiam/_sictiam.scss
View File

@ -1,6 +1,6 @@
#login-page > div.block {
min-height: 300px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
min-height: auto;
}
}
@ -8,7 +8,7 @@
.oidc-button {
padding-top: 80px;
text-align: center;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 10px;
}
}

22
static/signal-publik/_custom.scss
View File

@ -9,7 +9,7 @@
text-transform: uppercase;
font-weight: 500;
letter-spacing: -1px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 25px;
}
}
@ -19,7 +19,7 @@
#header {
padding: 0;
background: white;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: auto;
}
#signal-publik {
@ -63,7 +63,7 @@
left: calc(0px - (100vw - 600px - 200px + 20px));
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
width: 100%;
padding: 0 1rem;
@ -181,7 +181,7 @@ div#page {
div#main-content-wrapper {
margin-top: 1rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
}
#columns div.textcell {
@ -255,7 +255,7 @@ div.gru-content div.wcsformcell {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
&:nth-child(4n) {
a.form-link {
div span {
@ -338,7 +338,7 @@ footer {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.gru-content {
#sidebar {
order: 0;
@ -516,7 +516,7 @@ div#rub_service form[action="."] { // target form pages
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
br.clear {
display: none;
}
@ -616,7 +616,7 @@ div#rub_service {
div.text-check-before-submit,
form {
padding: 0 1rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0.5rem 0;
}
}
@ -743,7 +743,7 @@ ul#evolutions {
div.qommon-map {
height: 500px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 280px;
max-height: 40vh;
}
@ -788,7 +788,7 @@ div.notificationscell h2 + p {
border-radius: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
body.focus-in {
#pwa-navigation {
display: none;
@ -893,7 +893,7 @@ div#fc-linking {
div#login-page.methods2 > div.block.block-fc {
margin-right: 0;
width: 50%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}

6
static/sospel/_custom.scss
View File

@ -28,7 +28,7 @@ div#header {
border-radius: 10px 10px 0px 0px;
background: white url(background-header.png) top right no-repeat;
min-height: 200px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
border-radius: 0;
background: white url(background-header-mobile.png) 2px 2px repeat-x;
@ -40,7 +40,7 @@ div#nav {
box-sizing: border-box;
padding-left: 10px;
border-radius: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 25px;
}
}
@ -55,7 +55,7 @@ div#top h1 a {
padding-top: 100px;
padding-left: 20px;
white-space: nowrap;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 60px;
}
}

2
static/strasbourg-2018/_custom.scss
View File

@ -1250,7 +1250,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.

6
static/sussargues/_custom.scss
View File

@ -3,7 +3,7 @@
body {
background: #e6e6e6;
padding: 50px 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
}
@ -16,7 +16,7 @@ div#page {
header, nav, #main-content-wrapper {
box-sizing: border-box;
padding: 0 20px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
}
@ -32,7 +32,7 @@ div#page {
text-indent: -1000px;
overflow: hidden;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
a {
width: 100%;

142
static/toulouse-metropole/_custom.scss
View File

@ -62,7 +62,7 @@ header {
height: $header-height;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: 0;
h1#logo {
padding: 0;
@ -103,7 +103,7 @@ nav {
width: $nav-width;
top: 0;
height: 100vh;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
content: none;
}
}
@ -116,7 +116,7 @@ nav {
a {
padding-top: 60px;
background: transparent 50% 25px no-repeat;
@media screen and (min-width: #{$mobile-limit - 1px}) {
@media screen and ($min-desktop-viewport) {
span {
transition: transform linear 0.1s;
display: block;
@ -125,7 +125,7 @@ nav {
transform: scale(1.2);
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent 50% 10px no-repeat;
padding-top: 45px;
span {
@ -154,13 +154,13 @@ nav {
}
&.selected a,
&:hover a {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent 50% 10px no-repeat;
}
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: fixed;
height: $nav-mobile-bottom-bar-height;
top: auto;
@ -206,7 +206,7 @@ footer {
z-index: 200;
box-shadow: 0 0 10px #666;
margin-left: $nav-width;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-left: 0;
}
#footer-wrapper {
@ -217,7 +217,7 @@ footer {
div.feedcell {
display: none;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
box-shadow: none;
#footer-wrapper {
padding-top: 0;
@ -266,7 +266,7 @@ footer {
#page {
// simulate left black band (may be replaced by a data uri PNG)
background: linear-gradient(to right, #2e2d35 0%, #2e2d35 $nav-width, white $nav-width);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: none;
}
}
@ -275,7 +275,7 @@ div#main-content-wrapper {
padding-left: $nav-width;
box-sizing: border-box;
flex: unset;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
}
}
@ -291,7 +291,7 @@ div#main-content br:last-child {
section {
padding: 2rem;
box-sizing: border-box;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 2rem 1rem;
}
}
@ -301,7 +301,7 @@ section#intro {
background: url(img/header/img_ville_background_header.jpg) top center no-repeat;
background-size: cover;
box-shadow: 0 4px 8px #ccc;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
min-height: 0;
padding-top: 120px;
}
@ -343,7 +343,7 @@ section#section-professionnels {
+ a {
position: absolute;
top: -4rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: -2rem;
}
}
@ -357,7 +357,7 @@ section#section-particuliers {
background-image: url(img/home/home-particuliers/picto-particuliers.png);
}
position: absolute;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
}
@ -367,7 +367,7 @@ section#section-particuliers {
}
div.forms {
margin-left: 400px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-left: 0;
}
}
@ -379,7 +379,7 @@ section#section-particuliers {
margin-bottom: 0;
width: 400px;
border: none;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0;
width: auto;
}
@ -406,7 +406,7 @@ section#section-particuliers {
background-position: 0px center;
background-repeat: no-repeat;
font-weight: bold;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: 10px center;
}
> span {
@ -427,7 +427,7 @@ section#section-particuliers {
left: -8px;
top: 20px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 2ex;
i.opener {
background-image: url(img/FlecheBas.png);
@ -471,7 +471,7 @@ section#section-particuliers {
left: -10px;
top: 42px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-radius: 0 0 10px 10px;
position: static;
left: auto;
@ -482,7 +482,7 @@ section#section-particuliers {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.opened {
h2 {
background: $orange;
@ -511,7 +511,7 @@ section#section-particuliers {
position: absolute;
top: 170px;
max-width: 320px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
h3 {
@ -585,14 +585,14 @@ section#section-professionnels {
border: none;
margin-right: 3rem;
margin-bottom: 3rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 10px;
}
a {
text-transform: uppercase;
font-weight: bold;
width: 20vw;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 85vw;
}
display: inline-block;
@ -663,7 +663,7 @@ section#section-professionnels {
margin-top: 20px;
left: calc(50% - 28px + #{$nav-width / 2});
background: white;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
left: calc(50% - 28px);
}
}
@ -672,7 +672,7 @@ section#section-professionnels {
margin-left: 0;
line-height: 1.8;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 10px;
text-align: center;
width: auto;
@ -687,7 +687,7 @@ section#section-professionnels {
display: inline-block;
width: 210px;
margin: 0 1rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 1rem 0;
width: 90%;
box-sizing: border-box;
@ -721,7 +721,7 @@ section#section-professionnels {
@media screen and (max-width: 1500px) {
right: 80px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 2rem 0;
position: relative;
right: auto;
@ -774,7 +774,7 @@ section#section-professionnels {
text-transform: uppercase;
color: #333;
background: inherit;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 1ex;
@ -782,7 +782,7 @@ section#section-professionnels {
}
}
&:last-child a {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-right: 0;
}
}
@ -798,7 +798,7 @@ div#title-section {
padding: 170px 50px 100px 100px;
font-size: 16px;
font-weight: bold;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 150px 1rem 1rem 1rem;
}
color: white;
@ -825,7 +825,7 @@ div#title-section {
left: 0;
background-color: #fff;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 0;
}
}
@ -845,7 +845,7 @@ div#title-section {
padding-top: 45px;
background: url(img/formulaire/picto-reveil.png) top center no-repeat;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: relative;
right: auto;
top: -10px;
@ -911,13 +911,13 @@ div#gauche {
box-shadow: 0 0 5px #ccc;
position: relative;
margin: 0 100px 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0;
}
div#tracking-code {
position: absolute;
top: -100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: center;
position: static;
width: 80%;
@ -944,14 +944,14 @@ div#title-section + div#rub_service {
position: relative;
z-index: 10;
padding-top: 30px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 0;
}
}
div#rub_service {
margin: 0 100px 50px 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0 0 50px 0;
}
}
@ -975,7 +975,7 @@ div#rub_service {
padding: 0 1rem;
&.first {
padding-left: 60px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
}
}
@ -1059,7 +1059,7 @@ div#rub_service {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
ol {
li {
min-width: none;
@ -1084,7 +1084,7 @@ div#rub_service {
div.drafts-recall,
form {
margin: 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0 10px;
}
padding: 0;
@ -1092,7 +1092,7 @@ div#rub_service {
form {
> h3, > h4, > div, > p.comment-field {
box-sizing: border-box;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0 1rem;
}
}
@ -1123,7 +1123,7 @@ div#rub_service {
padding: 4rem 1rem;
display: flex;
justify-content: space-between;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0 -10px;
padding: 4rem 1rem;
}
@ -1133,7 +1133,7 @@ div#rub_service {
div.widget {
margin: 0 5rem;
text-transform: uppercase;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0;
&.previous-button {
margin-left: 1ex;
@ -1148,7 +1148,7 @@ div#rub_service {
}
button {
min-width: 200px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
min-width: 150px;
}
}
@ -1191,7 +1191,7 @@ div#rub_service {
div#receipt-intro,
div.section {
padding: 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
}
@ -1240,7 +1240,7 @@ ul#evolutions {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#columns {
padding: 0;
}
@ -1250,7 +1250,7 @@ ul#evolutions {
float: right;
z-index: 1000;
position: relative;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
float: none;
}
> div {
@ -1271,7 +1271,7 @@ ul#evolutions {
top: -40px;
left: -40px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 1ex 3ex;
max-width: none;
}
@ -1284,7 +1284,7 @@ ul#evolutions {
.gru-content .cell.textcell > div {
margin: 3rem 100px 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 3rem 1rem 0 1rem;
}
h2 {
@ -1316,7 +1316,7 @@ ul#evolutions {
div#title-section ~ div.account-management,
div#title-section ~ div.cell > div {
margin: 3rem 100px 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 3rem 1rem 0 1rem;
}
h2 {
@ -1341,13 +1341,13 @@ ul#evolutions {
margin: 3rem 0px 0 0px;
box-sizing: border-box;
padding: 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0 20px;
}
}
div#title-section ~ div.cell.encart > div {
margin: 3rem 100px 0 10px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 3rem 1rem 0 1rem;
}
}
@ -1385,7 +1385,7 @@ div#actu {
position: absolute;
z-index: 100;
right: -400px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
right: calc(-100vw + 85px);
}
transition: right ease-out 0.5s;
@ -1407,17 +1407,17 @@ div#actu {
display: inline-block;
box-sizing: border-box;
width: 400px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: calc(100vw - 85px);
}
padding: 20px 20px 20px 40px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
box-shadow: none;
}
border-bottom-left-radius: 10px;
h3 {
font-size: 40px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 20px;
}
margin-bottom: 2rem;
@ -1449,13 +1449,13 @@ div#actu {
padding-right: 30px;
padding-top: 3px;
background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
h4 a {
color: $font-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
padding-right: 30px;
background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
@ -1498,7 +1498,7 @@ div#actu {
#login-page div.block,
#content div.a2-block {
width: 40rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
padding-top: 1rem;
}
@ -1506,7 +1506,7 @@ div#actu {
h2 {
font-size: 46px;
font-weight: bold;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 32px;
}
}
@ -1533,7 +1533,7 @@ ul {
}
#nav-tracking-code {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
background: #554b49;
@ -1568,7 +1568,7 @@ ul {
display: none;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#steps {
display: none;
}
@ -1632,7 +1632,7 @@ ul {
p {
font-weight: 600;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 70px;
}
}
@ -1641,13 +1641,13 @@ ul {
#registration-blocks {
display: flex;
justify-content: center;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
}
div.a2-block {
max-width: 35rem;
margin: 0 3rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
max-width: none;
margin: 0 1rem;
}
@ -1655,7 +1655,7 @@ ul {
h2 {
font-size: 36px;
padding-left: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 26px;
}
}
@ -1669,7 +1669,7 @@ ul {
top: 80px;
bottom: 80px;
right: -3rem; // -margin
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 1px;
width: auto;
top: auto;
@ -1696,7 +1696,7 @@ ul {
// get lost password/create account lines out of flow, so the
// FranceConnect button can be aligned with the login button.
position: absolute;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
}
@ -1717,7 +1717,7 @@ div#frontend-registration-fc {
}
position: absolute;
bottom: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
}
@ -1748,7 +1748,7 @@ div#rub_service div#info {
font-size: 40px;
padding: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 60px 20px;
}
}
@ -1776,14 +1776,14 @@ div.communes-toulouse {
border: 1px solid #6A5F5B;
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: center;
}
}
div#messages {
margin: 0 0 0 4px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-left: 0;
}
li {

126
static/toulouse/_custom.scss
View File

@ -71,7 +71,7 @@ a:hover {
width: 207px;
height: $header-height;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
margin: 0 0 0 auto;
}
@ -95,7 +95,7 @@ a:hover {
color: #322f38;
font-size: 9px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
cursor: pointer;
margin-left: 1ex;
width: calc(100% - 210px);
@ -111,7 +111,7 @@ nav {
left: 0;
background: rgba(204,88,49,1);
background: linear-gradient(to bottom, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: linear-gradient(to left, rgba(204,88,49,1) 0%, rgba(228,19,123,1) 100%);
}
color: white;
@ -135,7 +135,7 @@ nav {
width: $nav-width;
top: 0;
height: 100vh;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
content: none;
}
}
@ -157,7 +157,7 @@ nav {
transform: scale(1.2);
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent 50% 10px no-repeat;
padding-top: 45px;
span {
@ -186,13 +186,13 @@ nav {
}
&.selected a,
&:hover a {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: transparent 50% 10px no-repeat;
}
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: fixed;
height: $nav-mobile-bottom-bar-height;
top: auto;
@ -203,7 +203,7 @@ nav {
footer {
z-index: 0;
margin-left: $nav-width;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-left: 0;
}
#footer-wrapper {
@ -213,7 +213,7 @@ footer {
div.feedcell {
display: none;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div.trackingcodeinputcell {
display: block;
text-align: center;
@ -252,7 +252,7 @@ footer {
#page {
// simulate left black band (may be replaced by a data uri PNG)
background: linear-gradient(to right, #2e2d35 0%, #2e2d35 $nav-width, white $nav-width);
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background: none;
}
}
@ -262,7 +262,7 @@ div#main-content-wrapper {
padding-top: $header-height;
box-sizing: border-box;
flex: unset;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
}
}
@ -283,7 +283,7 @@ section {
section#intro {
min-height: $intro-height;
background: url(img/home/bg-portable-home.jpg) top right no-repeat;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
min-height: none;
background: url(img/mobile-laptop.png) bottom center no-repeat;;
background-size: contain;
@ -316,7 +316,7 @@ section#section-professionnels {
+ a {
position: absolute;
top: -4rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
top: -2rem;
}
}
@ -333,7 +333,7 @@ section#section-particuliers {
box-shadow: 0 0 5px 5px #222;
}
position: absolute;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
}
@ -343,7 +343,7 @@ section#section-particuliers {
}
div.forms {
margin-left: 400px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-left: 0;
}
}
@ -355,7 +355,7 @@ section#section-particuliers {
margin-bottom: 0;
width: 400px;
border: none;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0;
width: auto;
}
@ -381,7 +381,7 @@ section#section-particuliers {
background-position: 0px center;
background-repeat: no-repeat;
font-weight: bold;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-position: 10px center;
}
> span {
@ -409,7 +409,7 @@ section#section-particuliers {
left: -8px;
top: 20px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-top: 2ex;
i.opener {
background-image: url(img/FlecheBas.png);
@ -454,7 +454,7 @@ section#section-particuliers {
left: -10px;
top: 42px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-radius: 0 0 10px 10px;
position: static;
left: auto;
@ -465,7 +465,7 @@ section#section-particuliers {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
.opened {
h2 {
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
@ -476,7 +476,7 @@ section#section-particuliers {
}
}
}
@media screen and (min-width: #{$mobile-limit - 1px}) {
@media screen and ($min-desktop-viewport) {
&:hover {
h2 {
background: linear-gradient(to right, rgba(231,8,134,1) 0%, rgba(211,87,41,1) 100%);
@ -492,7 +492,7 @@ section#section-particuliers {
position: absolute;
top: 170px;
max-width: 320px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
h3 {
@ -577,7 +577,7 @@ section#section-professionnels {
text-transform: uppercase;
font-weight: bold;
width: 20vw;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 60vw;
}
display: inline-block;
@ -662,7 +662,7 @@ section#section-professionnels {
margin-left: 0;
line-height: 1.8;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 10px;
text-align: center;
width: auto;
@ -702,7 +702,7 @@ section#section-professionnels {
@media screen and (max-width: 1500px) {
right: 80px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 2rem 0;
position: relative;
right: auto;
@ -755,7 +755,7 @@ section#section-professionnels {
text-transform: uppercase;
color: #333;
background: inherit;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 1ex;
@ -763,7 +763,7 @@ section#section-professionnels {
}
}
&:last-child a {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
border-right: 0;
}
}
@ -776,7 +776,7 @@ div#title-section {
overflow: hidden;
background: #322f38 url(img/formulaire/bg-titre-formulaire.png) bottom right no-repeat;
padding: 100px 50px 100px 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 50px 1rem 1rem 1rem;
}
color: white;
@ -792,7 +792,7 @@ div#title-section {
margin-top: 0;
font-size: 40px;
margin-right: 160px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin-right: 0;
}
}
@ -812,7 +812,7 @@ div#title-section {
padding-top: 45px;
background: url(img/formulaire/picto-reveil.png) top center no-repeat;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: relative;
right: auto;
top: -20px;
@ -903,7 +903,7 @@ div#gauche {
div#tracking-code {
position: absolute;
top: -100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: center;
position: static;
width: 80%;
@ -936,7 +936,7 @@ div#gauche {
padding: 0 1rem;
&.first {
padding-left: 60px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
}
}
@ -1030,7 +1030,7 @@ div#gauche {
}
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
ol {
li {
min-width: none;
@ -1054,7 +1054,7 @@ div#rub_service {
div.drafts-recall,
form {
margin: 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0 10px;
}
padding: 0;
@ -1065,7 +1065,7 @@ div#rub_service {
&[class*=grid-] {
box-sizing: content-box;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0 1rem;
}
}
@ -1090,7 +1090,7 @@ div#rub_service {
}
> div.buttons {
margin: 0 -100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0 -10px;
}
box-sizing: border-box;
@ -1104,7 +1104,7 @@ div#rub_service {
div.widget {
margin: 0 5rem;
text-transform: uppercase;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 0;
&.previous-button {
margin-left: 1ex;
@ -1172,7 +1172,7 @@ div#rub_service {
div#receipt-intro,
div.section {
padding: 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
}
@ -1218,7 +1218,7 @@ ul#evolutions {
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#columns {
padding: 0;
}
@ -1226,7 +1226,7 @@ ul#evolutions {
.gru-content .cell.textcell.encart {
float: right;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
float: none;
}
> div {
@ -1245,7 +1245,7 @@ ul#evolutions {
top: -40px;
left: calc(50% - 43px);
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 1ex 3ex;
max-width: none;
}
@ -1259,7 +1259,7 @@ ul#evolutions {
.gru-content .cell.textcell > div {
margin: 3rem 100px 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 3rem 1rem 0 1rem;
}
h2 {
@ -1291,7 +1291,7 @@ ul#evolutions {
div#title-section ~ div.account-management,
div#title-section ~ div.cell > div {
margin: 3rem 100px 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
margin: 3rem 1rem 0 1rem;
}
h2 {
@ -1316,7 +1316,7 @@ ul#evolutions {
margin: 3rem 0px 0 0px;
box-sizing: border-box;
padding: 0 100px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0 20px;
}
}
@ -1360,7 +1360,7 @@ div#actu {
position: absolute;
z-index: 100;
right: -400px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
right: calc(-100vw + 85px);
}
transition: right ease-out 0.5s;
@ -1382,17 +1382,17 @@ div#actu {
display: inline-block;
box-sizing: border-box;
width: 400px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: calc(100vw - 85px);
}
padding: 20px 20px 20px 40px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
box-shadow: none;
}
border-bottom-left-radius: 10px;
h3 {
font-size: 40px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 20px;
}
margin-bottom: 2rem;
@ -1424,13 +1424,13 @@ div#actu {
padding-right: 30px;
padding-top: 3px;
background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
}
h4 a {
color: $font-color;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
padding-right: 30px;
background: url(img/home/home-actu-ouvert/plus-fond-blanc.png) center right no-repeat;
@ -1474,7 +1474,7 @@ div#actu {
#content div.a2-block {
padding-top: 4rem;
width: 40rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
padding-top: 1rem;
}
@ -1482,7 +1482,7 @@ div#actu {
h2 {
font-size: 46px;
font-weight: bold;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 32px;
}
}
@ -1508,7 +1508,7 @@ ul {
}
#nav-tracking-code {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: none;
}
margin-top: -45px;
@ -1539,7 +1539,7 @@ ul {
display: none;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
#steps {
display: none;
}
@ -1618,7 +1618,7 @@ $list-illus:
p {
font-weight: 600;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 70px;
}
}
@ -1627,13 +1627,13 @@ $list-illus:
#registration-blocks {
display: flex;
justify-content: center;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
display: block;
}
div.a2-block {
max-width: 35rem;
margin: 0 3rem;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
max-width: none;
margin: 0 1rem;
}
@ -1641,7 +1641,7 @@ $list-illus:
h2 {
font-size: 36px;
padding-left: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
font-size: 26px;
}
}
@ -1655,7 +1655,7 @@ $list-illus:
top: 80px;
bottom: 80px;
right: -3rem; // -margin
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
height: 1px;
width: auto;
top: auto;
@ -1682,7 +1682,7 @@ $list-illus:
// get lost password/create account lines out of flow, so the
// FranceConnect button can be aligned with the login button.
position: absolute;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
}
@ -1712,7 +1712,7 @@ div#frontend-registration-fc {
}
position: absolute;
bottom: 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
position: static;
}
}
@ -1749,7 +1749,7 @@ div#rub_service div#info {
font-size: 40px;
padding: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 60px 20px;
}
}
@ -1767,7 +1767,7 @@ div#rub_service div#info {
footer {
margin-left: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#main-content-wrapper,
#content #registration-title {
padding-top: 1rem;

6
static/tournai/_custom.scss
View File

@ -426,7 +426,7 @@ $category-slugs: urbanisme, agenda, associations, commerces, demande-d-actes-et-
}
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
div#nav {
margin-top: 10px;
}
@ -469,7 +469,7 @@ body.page-bienvenue {
div#main-content {
width: 80%;
margin: 0 auto;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: auto;
}
}
@ -508,7 +508,7 @@ body.page-bienvenue {
padding: 1ex;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
height: auto;
a {

18
static/tours-metropole/_custom.scss
View File

@ -24,7 +24,7 @@ body.authentic-page, body.registration-page {
padding-left: 0;
margin: 20px 0 10px 0;
width: 30%;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
width: 100%;
}
a {
@ -34,7 +34,7 @@ body.authentic-page, body.registration-page {
background-repeat: no-repeat;
background-size: contain, contain;
text-indent: -9999px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
background-image: url('img/logo-neutre.png');
background-repeat: no-repeat;;
background-position: center left;
@ -48,7 +48,7 @@ body.authentic-page, body.registration-page {
@include vendor-prefix(justify-content, space-between);
}
h1#logo-ville {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
display: block;
}
a {
@ -103,7 +103,7 @@ div#header {
margin: 15px 0;
line-height: 2em;
font-family: 'Roboto Condensed', sans-serif;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-indent: -9999px;
background-size: contain;
}
@ -123,7 +123,7 @@ div#header {
}
div#nav-wrapper {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
margin-top: -30px;
}
}
@ -135,15 +135,15 @@ div#nav {
}
div.gru-nav {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
@include vendor-prefix(transform, skewY(-1deg));
}
padding: 5px 0;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding: 0;
}
> ul {
@media screen and (min-width: $mobile-limit) {
@media screen and ($min-desktop-viewport) {
@include vendor-prefix(transform, skewY(1deg));
}
> li a {
@ -185,7 +185,7 @@ div#footer-wrapper {
}
.gru-content {
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
@include vendor-prefix(flex-direction, column-reverse);
}
div.cell.wcsformsofcategorycell {

6
static/universite-paris-nanterre/_custom.scss
View File

@ -8,7 +8,7 @@
div#header-wrapper {
div#header h1 {
padding-top: 40px;
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-top: 80px;
}
a {
@ -21,7 +21,7 @@ div#header-wrapper {
overflow: hidden;
text-indent: 400px;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
padding-left: 0;
width: 100%;
a {
@ -43,7 +43,7 @@ div#nav {
& > ul {
margin-top: 0;
}
@media screen and (max-width: $mobile-limit) {
@media screen and ($max-mobile-viewport) {
text-align: left;
}
}

Some files were not shown because too many files have changed in this diff Show More