add new theme for Métropole Européenne de Lille (#67614)
This commit is contained in:
parent
24da6e23d3
commit
c8d7c98d23
|
|
@ -0,0 +1,386 @@
|
|||
@import '../includes/fonts/lato';
|
||||
@import '../includes/fonts/montserrat';
|
||||
|
||||
div#page {
|
||||
background: url('img/body-bg.png') center left no-repeat;;
|
||||
}
|
||||
|
||||
%button, %inverted-button {
|
||||
border: 2px solid $primary-color;
|
||||
text-transform: uppercase;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
%cell-links-list {
|
||||
> li > a {
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
|
||||
div#header {
|
||||
max-width: 100%;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.mel-link-wrapper {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#toplinks {
|
||||
top: 7px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
right: 1rem;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
top: -$nav-menu-side + 5px;
|
||||
}
|
||||
}
|
||||
|
||||
div#header {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
#header-wrapper {
|
||||
background: $primary-color;
|
||||
@media ($max-mobile-viewport) {
|
||||
background: white;
|
||||
border-top: $nav-menu-side + 10px solid $primary-color;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
h1#logo {
|
||||
@media ($max-mobile-viewport) {
|
||||
padding-left: 0;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
@media ($max-mobile-viewport) {
|
||||
color: $font-color;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* NAV */
|
||||
|
||||
#nav-wrapper {
|
||||
background-image: url('img/header-bg.png');
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
div.gru-nav {
|
||||
> ul {
|
||||
margin-top: 0;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
li {
|
||||
&:hover, &.selected {
|
||||
a {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
font-size: 130%;
|
||||
&::after {
|
||||
content: '';
|
||||
border: 0.2rem solid $primary-color;
|
||||
display: block;
|
||||
width: 3.15rem;
|
||||
@media ($max-mobile-viewport) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gru-nav-button {
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
z-index: 2002;
|
||||
&.toggled {
|
||||
position: fixed;
|
||||
background: transparent;
|
||||
.icon-bar {
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-wrapper {
|
||||
@media ($max-mobile-viewport) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gru-nav-button.toggled + ul {
|
||||
position: fixed;
|
||||
border-top: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
z-index: 2001;
|
||||
padding: $nav-mobile-bottom-bar-height 1rem 1rem 5rem;
|
||||
a {
|
||||
&::before {
|
||||
content: '';
|
||||
border: 0.2rem solid $primary-color;
|
||||
display: inline-block;
|
||||
width: 1.15rem;
|
||||
margin-right: 1rem;
|
||||
margin-bottom:0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pwa-navigation div > ul li {
|
||||
&.selected a, &:hover a {
|
||||
box-shadow: 1px 1px 10px 0px #202020 inset;
|
||||
}
|
||||
&[data-include-user-name] a {
|
||||
color: #e9bcbf;
|
||||
}
|
||||
}
|
||||
|
||||
div.previous-button button {
|
||||
border: 2px solid $gray;
|
||||
background: $gray;
|
||||
color: white;
|
||||
&:hover {
|
||||
color: $gray;
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.form-content--body {
|
||||
border: $cell-border;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.wcs-step {
|
||||
position: relative;
|
||||
&:not(.current) &--marker {
|
||||
border: $cell-border;
|
||||
}
|
||||
@media ($min-desktop-viewport) {
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
border: 0.2rem solid $primary-color;
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* CELLS */
|
||||
|
||||
div.cell {
|
||||
&.tracking-code-input-cell {
|
||||
h2:first-child {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&.searchcell {
|
||||
border: 2px solid $primary-color;
|
||||
background: url('img/search-cell-bg.svg') 15% no-repeat;
|
||||
}
|
||||
&.textcell {
|
||||
padding: 1rem;
|
||||
h2, h3 {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
&.foldable {
|
||||
> div > h2:first-child::after {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
&.wcs-forms-of-category-cell, &.link-list-cell {
|
||||
border: 2px solid $font-color;
|
||||
&.foldable {
|
||||
h2:first-child {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
&::after {
|
||||
right: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.has-asset-picture h2:first-child {
|
||||
padding-left: 6rem;
|
||||
margin-left: -4rem;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
padding: 5px 2px 0 2px;
|
||||
> * {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
> picture {
|
||||
display: block;
|
||||
order: -1;
|
||||
flex: 0 0 4.5rem;
|
||||
align-self: stretch;
|
||||
margin-left: 1rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border-color: $primary-color;
|
||||
box-shadow: inset 0px 0px 0px 2px $primary-color;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
}
|
||||
h2:first-child {
|
||||
flex: 1 0 50%;
|
||||
padding-left: 1rem;
|
||||
&::before {
|
||||
content: '';
|
||||
border: 0.2rem solid $primary-color;
|
||||
display: block;
|
||||
width: 3rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
&.most-popular {
|
||||
border: 0;
|
||||
padding-bottom: 0;
|
||||
&:hover {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
ul > li {
|
||||
> a {
|
||||
color: $primary-color;
|
||||
text-transform: none;
|
||||
&:hover {
|
||||
background: $font-color;
|
||||
color: white;
|
||||
transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.wcs-tracking-code-input, div.searchcell {
|
||||
button {
|
||||
background: white;
|
||||
color: $primary-color;
|
||||
border: 0;
|
||||
margin-top: 0.5rem;
|
||||
margin-right: 0;
|
||||
&:hover {
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
form {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
div.searchcell input[type="search"] {
|
||||
&, &:focus {
|
||||
border: 0;
|
||||
border-bottom: 2px solid $primary-color;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.wcs-tracking-code-input {
|
||||
background: #4c4c4c;
|
||||
color: white;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
div#sidebar div.cell {
|
||||
h2:first-child {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
div.searchcell {
|
||||
border: 2px solid $primary-color;
|
||||
}
|
||||
|
||||
div#tracking-code {
|
||||
h3, a {
|
||||
padding-left: 0;
|
||||
}
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
div.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
li.required-authentication, li.external-link, li.is-redirection {
|
||||
a::after {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
li.required-authentication a::after {
|
||||
content: '\f023'; /* fa-lock */
|
||||
}
|
||||
|
||||
li.external-link, li.is-redirection {
|
||||
a::after {
|
||||
content: '\f08e'; /* fa-external-link */
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
right: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@media ($max-mobile-viewport) {
|
||||
#toplinks a.account-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* FOOTER */
|
||||
#footer-wrapper {
|
||||
background: url('/assets/footer:background'), linear-gradient(to right, #303030aa, #303030);
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
$font-color: #4c4c4c;
|
||||
$font-family: Lato, sans-serif;
|
||||
$font-size: 0.875em;
|
||||
$primary-color: #e10714;
|
||||
$border-radius: 0;
|
||||
$width: 1400px;
|
||||
$mobile-limit: 1080px;
|
||||
|
||||
$body-background: #f7f5ef;
|
||||
|
||||
$gray: #747474;
|
||||
|
||||
$link-color: $font-color;
|
||||
|
||||
$toplinks-style: none;
|
||||
|
||||
$nav-color: $font-color;
|
||||
$nav-background: transparent;
|
||||
$nav-active-color: $primary-color;
|
||||
$nav-item-selected-border: 1px solid transparent;
|
||||
|
||||
$nav-item-selected-mode: bottom-border;
|
||||
$nav-submenu-background: #f4f4f4;
|
||||
$nav-submenu-color: $font-color;
|
||||
$nav-menu-side: 40px;
|
||||
$nav-mobile-menu-background: #f7f5ef;
|
||||
$nav-mobile-menu-item-hover-background: transparent;
|
||||
$nav-mobile-menu-item-hover-color: $primary-color;
|
||||
$nav-border-color: transparent;
|
||||
|
||||
$nav-mobile-bottom-bar-background: $font-color;
|
||||
$nav-mobile-bottom-bar-color: white;
|
||||
$nav-mobile-bottom-bar-item-hover-background: transparent;
|
||||
$nav-mobile-bottom-bar-item-selected-background: $nav-mobile-bottom-bar-item-hover-background;
|
||||
|
||||
$footer-color: white;
|
||||
|
||||
$title-font-family: Montserrat, sans-serif;
|
||||
$title-font-size: 1.429rem;
|
||||
$title-weight: bold;
|
||||
$title-color: $font-color;
|
||||
$title-padding: 0.7rem 0.5rem;
|
||||
$title-background: transparent;
|
||||
|
||||
$cell-border: 2px solid $font-color;
|
||||
$cell-entry-hover-background: transparent;
|
||||
$cell-close-foldable-icon: url('img/close.png');
|
||||
$cell-open-foldable-icon: url('img/open.png');
|
||||
|
||||
$button-color: $primary-color;
|
||||
$button-background: white;
|
||||
$button-hover-background: $primary-color;
|
||||
$button-hover-color: white;
|
||||
$buttons-order: cancel, previous (grow), submit;
|
||||
$cancel-button-style: '%inverted-button';
|
||||
|
||||
$widget-focus-outline: 1px solid $primary-color;
|
||||
$widget-focus-outline-offset: -1px;
|
||||
|
||||
$wcs-steps-spacing: 1.25em;
|
||||
$wcs-steps-background: transparent;
|
||||
$wcs-step-marker-color: $font-color;
|
||||
$wcs-step-color: $font-color;
|
||||
$wcs-step-border-bottom: 0;
|
||||
|
||||
$wcs-step-current-border-bottom: 0;
|
||||
$wcs-step-current-label-color: $font-color;
|
||||
$wcs-step-current-marker-background: $primary-color;
|
||||
$wcs-step-current-marker-color: white;
|
||||
|
||||
$form-accent-color: $primary-color;
|
||||
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"label": "Métropole Européenne de Lille (2022)",
|
||||
"variables": {
|
||||
"theme_color": "#e10714"
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"footer:background": {"label": "Pied de page : image de fond"},
|
||||
"mel:logo": {"label": "Logo MEL"}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 142.41 128.1" style="enable-background:new 0 0 142.41 128.1;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#E10714;}
|
||||
</style>
|
||||
<g>
|
||||
<g id="Groupe_3569" transform="translate(554.385 -292.655) rotate(90)">
|
||||
<path class="st0" d="M420.76,549.14c0,1.3-0.48,2.61-1.45,3.63c-2,2.1-5.33,2.17-7.42,0.17l-24.56-23.46
|
||||
c-2.1-2-2.17-5.33-0.17-7.42c2-2.1,5.33-2.17,7.42-0.17l24.56,23.46C420.21,546.37,420.76,547.75,420.76,549.14z"/>
|
||||
</g>
|
||||
<path class="st0" d="M109.48,0c2.85,2.04,5.51,4.33,7.93,6.86c9.36,9.84,14.55,22.91,14.5,36.49c0,13.51-5.15,26.52-14.39,36.38
|
||||
c-20.09,21.41-53.73,22.48-75.13,2.39C20.98,62.03,19.91,28.39,39.99,6.99c2.41-2.6,5.1-4.94,8-6.99H32.15
|
||||
C21.2,11.78,15.1,27.26,15.1,43.35c0,35.16,28.5,63.66,63.65,63.66c35.16,0,63.66-28.5,63.66-63.65
|
||||
c0.04-16.1-6.07-31.6-17.06-43.35H109.48z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{% extends "combo/search-cell.html" %}
|
||||
|
||||
{% block submit-content %}Valider{% endblock %}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{% extends "combo/wcs/tracking_code_input.html" %}
|
||||
|
||||
{% block form-pre %}
|
||||
<p>
|
||||
Un code de suivi peut être associé à vos demandes, il facilite vos échanges
|
||||
avec les services.
|
||||
</p>
|
||||
{% endblock %}
|
||||
|
||||
{% block intro-text %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{% extends "includes/user-info.html" %}
|
||||
{% load assets %}
|
||||
|
||||
{% block user-info %}
|
||||
{{ block.super }}
|
||||
{% get_asset "mel:logo" as mel_logo %}
|
||||
|
||||
{% if mel_link and mel_logo %}
|
||||
<div class="mel-link-wrapper">
|
||||
<a href="{{ mel_link }}">
|
||||
<img src="{{site_base}}{% asset_url mel_logo %}" alt="MEL" />
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue