theme: add clermont-ici (#55119)

This commit is contained in:
Thomas Jund 2021-07-07 12:43:56 +02:00
parent 38162f9522
commit 65d21d4c07
12 changed files with 811 additions and 0 deletions

View File

@ -0,0 +1,581 @@
//
// COMPONENTS
//
%title {
text-align: center;
line-height: 1.2;
}
%button {
text-transform: uppercase;
font-size: $fz-small;
font-weight: bold;
background-size: 100%;
transition: 400ms background-size;
&, &:hover {
background-image: gradient-ro(90deg);
}
&:hover {
background-size: 200%;
}
}
%cancel-button {
&, &:hover {
background-image: none;
background-color: $beige;
border-color: $font-color;
}
}
//
// HEADER
//
#top {
display: flex;
flex-direction: column;
padding: 1rem 0;
@media (max-width: $very-small-limit) {
font-size: $fz-small;
}
@media ($min-desktop-viewport) {
flex-direction: row;
align-items: center;
}
}
// Logo
h1#logo.has-logo {
line-height: 1.5;
flex-grow: 1;
font-size: 1em;
@media ($min-desktop-viewport) {
font-size: $fz-h3;
}
a {
padding: 1em 0;
padding-left: 6.5em;
text-indent: 0;
background-size: 5em 100%;
display: block;
text-transform: uppercase;
color: $font-color;
.site-header--community {
display: block;
font-size: $fz-small;
font-weight: 400;
}
}
}
// user links
#toplinks {
position: static;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 0;
border: none;
max-width: none;
@media ($max-mobile-viewport) {
order: -1;
margin-bottom: 1rem;
}
.login {
> a {
@extend .pk-button;
}
.sep {
display: none;
}
}
.logged-in {
@extend %button;
a {
color: inherit;
}
.connected-user {
padding-right: .5em;
border-right: 2px solid;
margin-right: .5em;
@media ($min-desktop-viewport) {
&::before {
content: "bienvenue ";
font-weight: normal;
}
}
}
}
}
//
// NAV
//
.nav-btn {
display: inline-block;
line-height: 1;
font-size: 1rem;
padding: 0.75em 2em;
margin: 0;
margin-bottom: .33em;
border-radius: $border-radius !important;
}
#nav {
@media ($min-desktop-viewport) {
text-align: right;
> ul {
display: inline;
}
}
}
.nav--title {
@extend .nav-btn;
text-transform: uppercase;
background-color: white;
vertical-align: top;
}
div.gru-nav ul {
margin: 0;
li {
@media ($max-mobile-viewport) {
display: block;
}
@media ($min-desktop-viewport) {
text-align: center;
margin-left: .33em;
width: 16em;
}
a {
@extend .nav-btn;
display: block;
font-weight: 400;
background-color: $orange-light;
}
&.selected a, a:hover {
font-weight: bold;
text-decoration: underline;
}
}
//subnav
ul {
display: none !important;
}
}
// nav over page image
@media ($min-desktop-viewport) {
body.has-picture {
#nav-wrapper {
position: relative;
height: 0;
z-index: 1000;
}
#nav {
padding-top: 1rem;
padding-right: 1rem;
}
}
}
//
// MAIN
//
#content {
margin-top: 2.5rem;
}
.community-header--default {
background-image: var(--page-picture);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 32em;
display: flex;
overflow: hidden;
body:not(.has-picture) & {
display: none;
}
}
.community-header--logo {
filter: contrast(0%) brightness(2);
display: block;
margin: auto;
margin-left: 1rem;
max-width: 40%;
max-height: 12em;
height: auto;
}
// hide community-header--default if cell in hero placeholder
* + .community-header--default {
display: none;
}
.top-column {
div.cell {
margin-left: 0;
margin-right: 0;
margin-bottom: $columns-gutter;
}
}
//
// CELLS
//
// Custom styles
.centered-cell {
.gru-content &.cell {
text-align: center;
h2:first-child {
background-color: transparent;
border-bottom: none;
}
form {
text-align: left;
}
}
}
.centered-orange-cell {
@extend .centered-cell;
.gru-content &.cell {
color: black;
background: gradient-ro(135deg);
background-size: 200%;
border: none;
form {
input, select {
background-color: transparent;
border-color: currentColor;
}
}
}
}
.list-of-forms-cell {
$image-width: 2.5rem;
.gru-content &.cell {
h2:first-child {
font-weight: normal;
font-size: 1rem;
text-align: left;
padding-left: $image-width + 2;
}
&.foldable.folded {
h2:first-child {
background-color: white;
border-bottom: none;
}
}
// Picture position
&.has-asset-picture {
> div {
display: flex;
flex-wrap: wrap;
align-items: baseline;
> * {
flex: 0 0 100%;
}
> h2:first-child {
flex: 1 0 50%;
margin-left: -1 * ($image-width + 1);
}
> picture {
display: block;
order: -1;
flex: 0 0 $image-width;
align-self: center;
margin-left: 1rem;
position: relative;
z-index: 1;
img {
padding: 0;
}
}
}
}
//links-list
div.links-list ul {
& > li {
> a {
padding-left: $image-width + 2;
}
&.required-authentication a::after {
content: "\f023"; // lock icon
top: 0;
bottom: 0;
left: 1rem;
right: auto;
margin: auto;
width: $image-width;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
// Gray logo keyword options
$logo-width: 5rem;
@each $name, $file in $logos-demarche {
&[class*="keyword-"][class*="-#{$name}"] a {
padding-right: $logo-width + 1;
&::before {
content: "";
display: block;
background: url(/assets/logo:#{$file}) no-repeat right center;
background-size: contain;
height: 2.5rem;
width: $logo-width;
position: absolute;
top: 0;
bottom: 0;
right: 1rem;
left: auto;
margin: auto;
filter: grayscale(100%);
}
}
}
}
}
}
}
// Slug 'btn-with-icon'
// optionnal class 'orange' or 'beige'
.btn-with-icon {
.gru-content &.cell {
border: none;
&, &.orange {
background-color: $orange;
}
&.beige {
background-color: $beige;
}
}
&--link {
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
font-weight: 600;
color: black;
padding: 0 1.5em;
&, &:hover {
background-color: inherit;
}
}
&--icon {
display: block;
flex: 0 0 2em;
height: 2em;
margin-right: .66em;
background-size: contain;
background-repeat: no-repeat;
transform: translateY(-0.2em);
}
&--label {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
}
.gru-content {
// all cells
div.cell {
overflow: hidden;
.cell--body,
& h2 + div {
p:first-child {
margin-top: 0;
}
}
}
.tracking-code-input-cell {
form {
display: flex;
button {
margin-right: 0;
margin-left: 1.5em;
flex: 0 1 auto;
}
}
}
.wcs-forms-of-category-cell,
.wcs-current-forms-cell,
.wcs-current-drafts-cell {
@extend .list-of-forms-cell;
}
.text-cell,
.wcs-current-forms-cell,
.wcs-current-drafts-cell {
@extend .pk-transparent;
}
div.wcs-current-forms-cell,
div.wcs-current-drafts-cell {
h2:first-child {
border-bottom: none;
border-radius: $border-radius !important;
background-color: $green-light;
}
}
div.wcs-current-drafts-cell {
h2:first-child {
background-color: $gray;
}
}
}
div.carrousel-content input + div div.carrousel-item {
padding-left: calc(6rem + 0.7rem);
}
//
// WCS
//
.wcs-page #columns-wrapper {
border: $cell-border;
border-radius: $cell-border-radius;
padding: 1rem;
margin: auto;
max-width: 62.5rem;
width: 100%;
}
div#tracking-code {
h3 {
background: none;
border-bottom: none;
padding-bottom: 0;
}
a {
font-size: 1rem;
}
}
div#rub_service {
h2 {
background-color: transparent;
border-bottom: none;
text-align: left;
font-size: $fz-h2;
padding-left: 0.5rem;
}
> h2:first-child {
font-size: $fz-h1;
}
}
div.buttons .cancel-button button {
@extend %cancel-button;
}
// Steps
@media ($mq-min--wcs-steps-horizontal-layout) {
.wcs-steps {
font-size: 1rem;
}
.wcs-step {
position: relative;
flex-basis: 5rem;
}
.wcs-step--marker {
font-size: $fz-h3;
}
.wcs-step--label {
display: block !important;
font-size: $fz-xsmall;
left: -1.1rem;
top: calc(100% + .5em);
}
}
//
// FOOTER
//
#footer-wrapper {
border-bottom: 1.5em solid red;
border-image-slice: 1;
border-image-source: gradient-ro(-90deg);
}
#footer {
font-size: $fz-small;
font-weight: 500;
@media (max-width: $very-small-limit) {
text-align: center;
}
a {
text-align: inherit;
font-weight: inherit;
color: $font-color;
padding-top: 0;
padding-bottom: 0;
display: block;
&:hover {
text-decoration: underline;
}
}
.links-list ul {
& > li {
border-bottom: none;
}
}
}
.back-top {
clear: both;
}
.back-top--link {
&:before {
color: $red
}
}
//
// Neutral templates
//
.page-template-sidebar-neutral,
.page-template-neutral {
.site-header--community {
display: none !important;
}
}
//
// PWA navigation
//
.pwa-navigation div > ul li a {
background-size: auto 40%;
background-position: center 20%;
span {
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
}
}

View File

@ -0,0 +1,94 @@
// colors
$orange: #FF8001;
$orange-light: #f6ad65;
$red: #EA0142;
$beige: #FFF7EF;
$gray-dark: #555;
$gray-light: #E9E9E9;
$gray: #D2D6DE;
$green-light: #BFE4C4;
@function gradient-ro($angle) {
@return linear-gradient($angle, $orange, $red);
}
// Typo
$fz-h1: 2.5em;
$fz-h2: 1.55em;
$fz-h3: 1.25em;
$fz-small: 0.875em;
$fz-xsmall: 0.75em;
// logos démarche
$logos-demarche: (
"ville": "clermont-ferrand",
"metro": "clermont-auvergne-metropole"
);
// Core vars
$primary-color: $orange;
$border-radius: 20px;
$font-color: black;
$link-color: $red;
$font-family: montserrat, sans-serif;
$width: 95rem;
$mobile-limit: 1024px;
$sidebar-width: 25%;
$sidebar-min-width: 18rem;
$sidebar-columns-gutter: 40px;
$nav-border-radius: 0;
$nav-background: transparent;
$nav-color: $font-color;
$nav-menu-color: $nav-color;
$nav-active-color: $nav-color;
$nav-item-selected-background: $orange;
$nav-mobile-mode: custom;
$nav-after-image: false;
$title-font-size: $fz-h3;
$title-transform: uppercase;
$title-weight: 700;
$title-background: $beige;
$title-padding: 1.25em 1rem !default;
$title-border-bottom: 1px solid $font-color;
$carrousel-height: 32rem;
$carrousel-text-position: middle left;
$carrousel-navigation-bullet-color: white;
$cell-border: 1px solid $font-color;
$cell-title-cover-border: false;
$cell-entry-color: $font-color;
$cell-entry-border-color: $gray-dark;
$cell-entry-hover-background: $beige;
$button-background: $orange;
$button-color: $font-color;
$button-border-radius: $border-radius / 2;
$widget-unique-checkbox-position: left;
$widget-border: 1px solid $gray-dark;
$widget-border-radius: 5px;
$wcs-steps-small-layout-limit: $mobile-limit;
$wcs-steps-spacing: .33rem;
$wcs-step-color: $gray-dark;
$wcs-step-current-color: $font-color;
$wcs-step-border-bottom: none;
$wcs-step-marker-background: $orange-light;
$wcs-step-current-marker-background: gradient-ro(-45deg);
$wcs-step-marker-type: disc tied;
$wcs-step-marker-tie-width: 2px;
$wcs-step-marker-tie-color: $font-color;
$form-sidebar-position: top;
$buttons-order: previous, submit, cancel;
$footer-background: $beige;
$footer-color: $font-color;
$back-top-display: mobile-only;
$nav-mobile-bottom-bar-background: gradient-ro(-45deg);

View File

@ -0,0 +1,37 @@
{
"label": "Clermont ICI",
"variables": {
"pwa_display": "standalone",
"theme_color": "#FF8001",
"email_header_asset": "emails:logo"
},
"settings": {
"combo": {
"COMBO_ASSET_SLOTS.update": {
"header:logo": { "label": "Têtière : logo" },
"emails:logo": { "label": "Emails : logo" },
"footer:logo": { "label": "Pied de page: logo" },
"logo:clermont-ferrand": { "label" : "logo : ville" },
"logo:clermont-auvergne-metropole": { "label" : "logo : métropole" }
},
"COMBO_CELL_ASSET_SLOTS.update": {
"data_linkcell": {
"picture": { "prefix": "Icône" }
},
"wcs_wcsformcell": {
"picture": { "prefix": "Icône" }
}
},
"COMBO_PUBLIC_TEMPLATES.update": {
"sidebar-neutral": {
"name": "Une colonne et une barre latérale - Neutre",
"template": "combo/page_template_sidebar_neutral.html"
},
"neutral": {
"name": "Une colonne - Neutre",
"template": "combo/page_template_neutral.html"
}
}
}
}
}

View File

@ -0,0 +1,6 @@
@charset "UTF-8";
@import '../includes/fonts/montserrat';
@import 'vars';
@import '../includes/publik';
@import 'custom';

View File

@ -0,0 +1 @@
{% extends "combo/cells/btn-with-icon/link-cell.html" %}

View File

@ -0,0 +1,11 @@
{% load assets %}
{% get_asset cell=cell type='picture' as asset %}
<a class="btn-with-icon--link" href="{{url}}">
{% if asset %}
<span
class="btn-with-icon--icon"
style="background-image: url({{asset.asset.url}})"
></span>
{% endif %}
<span class="btn-with-icon--label">{{ title }}</span>
</a>

View File

@ -0,0 +1,21 @@
{% load assets %}
{% with portail_slug=portail_name|lower|slugify %}
{% block cell-content %}
<h2 class="choix-collectivite--title">
Vous êtes sur le portail citoyen de {{ collectivite }}
</h2>
<div class="cell--body">
<form id="choix-collectivite--form">
<label class="choix-collectivite--label" for="choix-collectivite--select">
Pour changer de collectivité
</label>
<select id="choix-collectivite--select" class="choix-collectivite--select">
<option value="">Sélectionnez</option>
{% for link in links %}
<option value="{{ link.url }}">{{ link.title }}</option>
{% endfor %}
</select>
</form>
</div>
{% endblock %}
{% endwith %}

View File

@ -0,0 +1,38 @@
{% extends "combo/page_template.html" %}
{% block msie_css_page_picture %}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.collectivity-header--default {
background-image: url("{{site_base}}{{page.picture.url}}");
}
}
{% endblock %}
{% block content-pre %}
<div class="community-header desktop-only">
{% placeholder "hero-page" name="Image de la Page" %}
<div class="community-header--default">
<img class="community-header--logo" src="{{portal_url}}assets/logo:{{ collectivite|slugify }}" alt="logo {{ collectivite }}">
</div>
</div>
{% endblock %}
{% block header-title-content %}
<span>
<span class="sr-only">ICI</span>
{% firstof global_title site_title "Compte Citoyen" %}
</span>
<span class="site-header--community">
{{ collectivite }}
</span>
{% endblock %}
{% block menu %}
<h2 class="nav--title">vous êtes :</h2>
{{ block.super }}
{% endblock %}
{% block columns-top %}
<div class="top-column">
{% placeholder "columns-top" name="Entête de la Page" %}
</div>
{% endblock %}

View File

@ -0,0 +1,4 @@
{% extends "combo/page_template.html" %}
{% block nav %}{% endblock %}

View File

@ -0,0 +1,4 @@
{% extends "combo/page_template_sidebar.html" %}
{% block nav %}{% endblock %}

View File

@ -0,0 +1,9 @@
{% extends "combo/wcs/tracking_code_input.html" %}
{% load i18n %}
{% block form-pre %}
<p>
Un code de suivi peut être associé à vos demandes, il vous facilite les échanges avec les services. Pour retrouver une demande disposant dun code de suivi, indiquez ce dernier ci-dessous :
</p>
{% endblock %}
{% block form-top %}{% endblock %}

View File

@ -0,0 +1,5 @@
{% extends "includes/back-top.html" %}
{% block back-top-label %}
Haut de page
{% endblock %}