Armentières : ajustement (#77625) #269
|
|
@ -11,7 +11,13 @@
|
|||
|
||||
&--content {
|
||||
.cell {
|
||||
padding: 0 5rem 2rem 5rem;
|
||||
padding: 2rem 5rem 2rem 5rem;
|
||||
}
|
||||
|
||||
.text-cell {
|
||||
h1, h2, h3, p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -30,17 +36,23 @@
|
|||
padding: 0.5rem 4rem !important;
|
||||
}
|
||||
|
||||
&-item-content {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&-nav label {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&-item-title {
|
||||
@extend h1;
|
||||
line-height: 1 !important;
|
||||
font-size: $fz-1;
|
||||
}
|
||||
|
||||
&-item-description {
|
||||
max-width: 100% !important; // too complex selector in core
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +63,7 @@ div#sidebar {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
color: $red;
|
||||
font-size: $fz-3;
|
||||
font-size: $title-font-size;
|
||||
&::after {
|
||||
content: '';
|
||||
background: $gray-light;
|
||||
|
|
@ -79,7 +91,7 @@ div#sidebar {
|
|||
}
|
||||
|
||||
&.foldable > div > h2:first-child {
|
||||
height: 70px;
|
||||
min-height: 50px;
|
||||
margin: 0;
|
||||
padding-left: 30px;
|
||||
|
||||
|
|
@ -90,6 +102,7 @@ div#sidebar {
|
|||
border: $yellow solid $gray;
|
||||
color: black;
|
||||
text-transform: none;
|
||||
font-size: $fz-5;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $widget-focus-box-shadow;
|
||||
|
|
@ -116,24 +129,34 @@ div#sidebar {
|
|||
position: relative;
|
||||
|
||||
> div > h2:first-child {
|
||||
padding-left: 100px;
|
||||
padding-left: 70px;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
padding-left: 60px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
picture img {
|
||||
picture {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 30px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
height: 50px;
|
||||
width: 60px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
left: 20px;
|
||||
height: 30px;
|
||||
top: 18px;
|
||||
left: 5px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -242,11 +265,6 @@ div.wcscurrentformscell {
|
|||
// Search cell
|
||||
.gru-content div.searchcell {
|
||||
.combo-search {
|
||||
&--hint {
|
||||
padding: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
&--button {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -298,7 +316,7 @@ div.wcscurrentformscell {
|
|||
h2:first-child {
|
||||
color: black;
|
||||
background: transparent;
|
||||
font-size: $fz-4;
|
||||
font-size: $title-font-size;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
|
@ -427,7 +445,7 @@ div.wcscurrentformscell {
|
|||
}
|
||||
|
||||
&--button {
|
||||
@extend %inverted-button;
|
||||
@extend %black-button;
|
||||
|
||||
margin: 0.5rem 0;
|
||||
|
||||
|
|
@ -445,8 +463,8 @@ div.wcscurrentformscell {
|
|||
|
||||
.arm-suggest {
|
||||
&--content {
|
||||
height: 80px;
|
||||
padding: 0.5rem 0 0.5rem 1rem;
|
||||
min-height: 80px;
|
||||
padding: 1rem;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
|
|
@ -548,6 +566,10 @@ div.wcscurrentformscell {
|
|||
font-size: $fz-small;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $yellow !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -567,4 +589,5 @@ div.wcscurrentformscell {
|
|||
|
||||
%cell-links-list {
|
||||
@include arm-link-icon('user');
|
||||
@include arm-link-icon('form');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,25 +5,31 @@
|
|||
|
||||
h1 {
|
||||
font-size: $fz-1;
|
||||
font-family: 'Archivo Black', 'Rubik', sans-serif;
|
||||
font-family: 'Archivo Black', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: $fz-2;
|
||||
font-family: 'Viga', 'Rubik', sans-serif;
|
||||
font-family: 'Viga', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: $fz-3;
|
||||
font-family: 'Viga', 'Rubik', sans-serif;
|
||||
font-family: 'Viga', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: $fz-4;
|
||||
font-family: 'Viga', 'Rubik', sans-serif;
|
||||
font-family: 'Viga', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: $fz-5;
|
||||
font-family: 'Viga', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,16 +15,17 @@ $secondary-color: $yellow;
|
|||
|
||||
|
||||
/// Typo
|
||||
$font-family: Rubik, sans-serif;
|
||||
$font-family: Manrope, sans-serif;
|
||||
$link-color: $primary-color;
|
||||
$link-decoration: none;
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
$base-font: 16;
|
||||
$fz-1: 1rem * 60 / 16;
|
||||
$fz-2: 1rem * 37 / 16;
|
||||
$fz-3: 1rem * 26 / 16;
|
||||
$fz-4: 1rem * 22 / 16;
|
||||
$fz-1: 2.5rem;
|
||||
$fz-2: 2rem;
|
||||
$fz-3: 1.6rem;
|
||||
$fz-4: 1.3rem;
|
||||
$fz-5: 1.1rem;
|
||||
$fz-small: 14em / $base-font;
|
||||
$fz-xsmall: 11em / $base-font;
|
||||
$font-size: 1rem;
|
||||
|
|
@ -56,7 +57,7 @@ $nav-border-color: transparent;
|
|||
$nav-button-background: transparent;
|
||||
$nav-button-bar-height: 4px;
|
||||
$nav-button-color: $primary-color;
|
||||
$nav-color: $gray;
|
||||
$nav-color: $gray-dark;
|
||||
$nav-item-hover-background: transparent;
|
||||
$nav-item-hover-border: $primary-color 4px solid;
|
||||
$nav-item-hover-color: #333333;
|
||||
|
|
@ -67,9 +68,9 @@ $nav-mobile-bottom-bar-item-hover-color: black;
|
|||
$nav-mobile-bottom-bar-item-selected-background: $primary-color;
|
||||
$nav-mobile-bottom-bar-item-selected-color: black;
|
||||
$nav-mobile-menu-background: white;
|
||||
$nav-mobile-menu-item-color: $gray;
|
||||
$nav-mobile-menu-item-color: $gray-dark;
|
||||
$nav-mobile-menu-item-hover-color: $gray-dark;
|
||||
$nav-submenu-color: $gray;
|
||||
$nav-submenu-color: $gray-dark;
|
||||
$responsive-menu: left-to-right;
|
||||
|
||||
// Title
|
||||
|
|
@ -77,8 +78,7 @@ $title-padding: 0;
|
|||
$title-color: black;
|
||||
$title-font-size: $fz-4;
|
||||
$title-font-family: 'Viga', sans-serif;
|
||||
$title-transform: uppercase;
|
||||
$title-weight: 700;
|
||||
$title-weight: normal;
|
||||
$title-background: transparent;
|
||||
|
||||
// Carrousel
|
||||
|
|
@ -108,7 +108,7 @@ $footer-background: $gray-dark;
|
|||
$wcs-step-current-label-color: black;
|
||||
$wcs-step-color: $gray;
|
||||
$wcs-step-border-bottom: 1px solid $gray-light;
|
||||
$wcs-step-current-border-bottom: 2px solid $gray-light;
|
||||
$wcs-step-current-border-bottom: 1px solid $gray-light;
|
||||
$form-sidebar-width: 25%;
|
||||
$form-sidebar-gutter: 3rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,11 @@
|
|||
&--content {
|
||||
max-width: $width;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 0 2.5rem 0;
|
||||
padding: 2rem 0 2rem 0;
|
||||
}
|
||||
|
||||
&--title {
|
||||
margin: 0;
|
||||
max-width: 35rem;
|
||||
text-transform: uppercase;
|
||||
font-size: $fz-1;
|
||||
}
|
||||
|
|
@ -20,6 +19,7 @@
|
|||
display: none;
|
||||
}
|
||||
margin-top: 4rem;
|
||||
font-family: 'Viga', sans-serif;
|
||||
}
|
||||
|
||||
@media($max-mobile-viewport) {
|
||||
|
|
@ -43,7 +43,7 @@ div#tracking-code {
|
|||
flex-direction: column;
|
||||
h3 {
|
||||
background: transparent;
|
||||
color: black;
|
||||
color: $gray-dark;
|
||||
text-transform: none;
|
||||
text-align: center;
|
||||
margin-bottom: 0.7rem;
|
||||
|
|
@ -54,6 +54,7 @@ div#tracking-code {
|
|||
padding: 0.5rem;
|
||||
border-radius: $border-radius;
|
||||
font-weight: bold;
|
||||
font-family: 'Viga', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -90,10 +91,10 @@ div#tracking-code {
|
|||
|
||||
%black-button {
|
||||
@extend %button;
|
||||
background: black;
|
||||
background: $gray-dark;
|
||||
color: white;
|
||||
&:hover {
|
||||
background: black;
|
||||
background: $gray-dark;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -200,6 +201,15 @@ input::placeholder {
|
|||
}
|
||||
|
||||
// Steps
|
||||
.wcs-steps {
|
||||
h2 {
|
||||
margin: 1rem 0 0 0;
|
||||
display: block;
|
||||
color: $red;
|
||||
font-size: $fz-3;
|
||||
}
|
||||
}
|
||||
|
||||
.wcs-step {
|
||||
border-radius: 0;
|
||||
align-items: center;
|
||||
|
|
@ -207,10 +217,6 @@ input::placeholder {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
&--marker-nb {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media($min-desktop-viewport) {
|
||||
&.step-before::after {
|
||||
content: '\f00c';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Ñëîé_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FBFCFC;}
|
||||
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#AAB9BF;}
|
||||
.st3{fill-rule:evenodd;clip-rule:evenodd;fill:#11008F;}
|
||||
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#5F009C;}
|
||||
.st5{fill-rule:evenodd;clip-rule:evenodd;fill:#C200B3;}
|
||||
.st6{fill-rule:evenodd;clip-rule:evenodd;fill:#FC34D4;}
|
||||
.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#FF2700;}
|
||||
.st8{fill-rule:evenodd;clip-rule:evenodd;fill:#FD6F00;}
|
||||
.st9{fill-rule:evenodd;clip-rule:evenodd;fill:#FFD600;}
|
||||
.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#F9FC00;}
|
||||
.st11{fill-rule:evenodd;clip-rule:evenodd;fill:#93ED0F;}
|
||||
.st12{fill-rule:evenodd;clip-rule:evenodd;fill:#05B634;}
|
||||
.st13{fill-rule:evenodd;clip-rule:evenodd;fill:#00C26B;}
|
||||
.st14{fill-rule:evenodd;clip-rule:evenodd;fill:#01DDB1;}
|
||||
.st15{fill-rule:evenodd;clip-rule:evenodd;fill:#30E3F0;}
|
||||
.st16{fill-rule:evenodd;clip-rule:evenodd;fill:#00A8ED;}
|
||||
.st17{fill-rule:evenodd;clip-rule:evenodd;fill:#0048B4;}
|
||||
.st18{fill-rule:evenodd;clip-rule:evenodd;fill:#2C3E50;}
|
||||
|
||||
.st19{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;stroke:#2C3E50;stroke-width:2.5509;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.9256;}
|
||||
.st20{fill-rule:evenodd;clip-rule:evenodd;fill:#E9F3E1;}
|
||||
.st21{fill:#E9F3E1;}
|
||||
.st22{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#2C3E50;stroke-width:0.45;stroke-miterlimit:10;}
|
||||
.st23{fill:#2C3E50;}
|
||||
.st24{fill:none;stroke:#2C3E50;stroke-width:0.45;stroke-miterlimit:10;}
|
||||
.st25{fill-rule:evenodd;clip-rule:evenodd;fill:#333333;}
|
||||
.st26{fill:none;stroke:#E53333;stroke-width:1.45;stroke-linecap:round;stroke-miterlimit:10;}
|
||||
.st27{fill:#333333;}
|
||||
.st28{fill:none;stroke:#333333;stroke-width:6.525;stroke-linecap:round;stroke-miterlimit:10;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st25" d="M80.8,113.5h32.4c1.8,0,3.3-1.5,3.3-3.3c0-5.3-2.1-10.1-5.5-13.6l-0.2-0.2c-1.3-1.3-2.7-2.3-4.2-3.2
|
||||
c2.3-2.4,3.7-5.6,3.7-9.2c0-3.6-1.5-7-3.9-9.4l0,0c-2.4-2.4-5.7-3.9-9.4-3.9c-3.6,0-6.9,1.5-9.4,3.9l0,0c-2.4,2.4-3.9,5.7-3.9,9.4
|
||||
c0,3.6,1.4,6.8,3.7,9.2c-1.5,0.8-2.8,1.8-4,3l-0.2,0.2c-3.5,3.5-5.7,8.4-5.7,13.8C77.5,112,79,113.5,80.8,113.5z M92.3,79.3
|
||||
L92.3,79.3c1.2-1.2,2.9-2,4.7-2c1.9,0,3.5,0.7,4.7,1.9l0,0c1.2,1.2,1.9,2.9,1.9,4.7c0,1.8-0.7,3.5-1.9,4.7l0,0
|
||||
c-1.2,1.2-2.9,1.9-4.7,1.9h0c-1.8,0-3.5-0.7-4.7-1.9l0,0c-1.2-1.2-1.9-2.9-1.9-4.7C90.3,82.1,91.1,80.5,92.3,79.3z M87.9,101.1
|
||||
l0.1-0.2c2.3-2.2,5.5-3.6,9-3.6h0c3.6,0,6.8,1.4,9.1,3.8l0.2,0.1c1.5,1.6,2.6,3.5,3.2,5.7h-25C85.1,104.6,86.3,102.6,87.9,101.1z"
|
||||
/>
|
||||
<path class="st25" d="M135.9,121.6H80.8c-1.8,0-3.3,1.5-3.3,3.3c0,1.8,1.5,3.3,3.3,3.3h55.1c1.8,0,3.3-1.5,3.3-3.3
|
||||
C139.2,123.1,137.7,121.6,135.9,121.6z"/>
|
||||
<path class="st25" d="M109.5,136.2H80.8c-1.8,0-3.3,1.5-3.3,3.3c0,1.8,1.5,3.3,3.3,3.3h28.7c1.8,0,3.3-1.5,3.3-3.3
|
||||
C112.8,137.6,111.3,136.2,109.5,136.2z"/>
|
||||
<path class="st25" d="M72.8,164.6c-1,0-2-0.4-2.7-1.1l-0.1-0.1c-0.6-0.7-1-1.6-1-2.6h0V60.1c0-1,0.4-2,1.1-2.7l0.1-0.1
|
||||
c0.7-0.6,1.6-1,2.6-1H119V76c0,2.9,1.2,5.5,3.1,7.3v0c1.9,1.9,4.5,3.1,7.4,3.1h19.7l0,57.2l6.6,1.3l0-61.6c0-0.1,0-0.2,0-0.3
|
||||
c0-1-0.4-1.9-1.2-2.5l-29.8-29.8c-0.6-0.7-1.5-1.1-2.5-1.1H72.8c-2.7,0-5.3,1.1-7.2,2.8l-0.2,0.2c-1.8,1.9-3,4.5-3,7.4v100.7
|
||||
c0,2.8,1.1,5.3,2.8,7.2l0.2,0.2c1.9,1.9,4.5,3.1,7.4,3.1h61.5l-2.9-6.6H72.8z M125.6,60.9l9.2,9.2l9.6,9.6h-15.1
|
||||
c-1,0-2-0.4-2.7-1.1l0,0c-0.7-0.7-1.1-1.6-1.1-2.7V60.9z"/>
|
||||
<path class="st25" d="M136.1,179.1H90.2c-2.5,0-4.6-2.1-4.6-4.6l0-6.5l-6.6,0.8l0,7.1c0,5.4,4.4,9.8,9.8,9.8h49.7L136.1,179.1z"/>
|
||||
<path class="st25" d="M172.3,74.6c0-2.9-1.2-5.5-3-7.4l-0.2-0.2c-1.9-1.8-4.4-2.8-7.2-2.8h-25.4l6.7,6.6h18.7c1,0,1.9,0.4,2.6,1
|
||||
l0.1,0.1c0.7,0.7,1.1,1.7,1.1,2.7V148l6.6,2V74.6z"/>
|
||||
<path class="st25" d="M158.7,150.1l-32.1-10.8l18.6,55.5l9.3-17c0.9-1.6,2.9-2.2,4.5-1.3c0.3,0.2,0.5,0.4,0.8,0.6l17.9,17.9
|
||||
l4.6-4.6l-17.9-18c-1.3-1.3-1.3-3.4,0-4.7c0.3-0.3,0.6-0.5,0.9-0.6l16.9-9.2L158.7,150.1L158.7,150.1z M122.3,130.9l69,23.2
|
||||
c0.8,0.3,1.4,0.8,1.8,1.5c0.9,1.6,0.3,3.6-1.3,4.5L172,170.8l17.2,17.2c1.3,1.3,1.3,3.4,0,4.7l-9.3,9.3c-1.3,1.3-3.4,1.3-4.7,0
|
||||
l-17.1-17.2l-10.7,19.7c-0.4,0.7-1,1.3-1.9,1.6c-1.7,0.6-3.6-0.4-4.2-2.1l-23.1-69c-0.2-0.7-0.2-1.4,0-2.1
|
||||
C118.7,131.3,120.6,130.3,122.3,130.9z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -1,8 +1,8 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import '../includes/fonts/archivo-black';
|
||||
@import '../includes/fonts/rubik';
|
||||
@import '../includes/fonts/viga';
|
||||
@import '../includes/fonts/manrope';
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
{% block content-pre %}
|
||||
<header class="arm-page-header">
|
||||
<div class="arm-page-header--content">{% placeholder "page-header" name="En-tête de la page" acquired=True optional=True %}</div>
|
||||
<div class="arm-page-header--content">{% placeholder "page-header" name="En-tête de la page" acquired=False optional=True %}</div>
|
||||
</header>
|
||||
{%skeleton_extra_placeholder after-header %}
|
||||
{% end_skeleton_extra_placeholder %}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
{% extends "combo/search-cell.html" %}
|
||||
|
||||
{% block search-form-pre %}
|
||||
<div class="combo-search--hint">
|
||||
Lorem ipsum dolor sit amet. Cum labore minima ad earum ducimus et ipsum sapiente et rerum vero est sequi similique. Hic quis sint ut nostrum dignissimos est exercitationem voluptate eum accusantium nemo non esse animi quo assumenda voluptatem aut nostrum quos.
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue