From efe8e7230b511e0cc31e9df548caac78534eb278 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= Date: Mon, 15 Apr 2019 18:01:50 +0200 Subject: [PATCH] add theme for haute-garonne (cd31) (#32283) --- static/haute-garonne-cd31/_custom.scss | 542 ++++++++++++++++++ static/haute-garonne-cd31/_vars.scss | 53 ++ static/haute-garonne-cd31/config.json | 7 + .../haute-garonne-cd31/img/CD31-logo-rvb.svg | 176 ++++++ .../haute-garonne-cd31/img/picto-cadenas.svg | 17 + .../img/picto-code-suivi-violet.svg | 72 +++ .../img/picto-code-suivi.svg | 73 +++ static/haute-garonne-cd31/img/picto-loupe.svg | 22 + .../img/picto-mon-compte.svg | 19 + static/haute-garonne-cd31/img/picto-rss.svg | 19 + static/haute-garonne-cd31/style.scss | 5 + .../authentic2/accounts.html | 5 + .../haute-garonne-cd31/combo/feed-cell.html | 13 + .../combo/page_template.html | 22 + .../combo/page_template_homepage.html | 13 + .../haute-garonne-cd31/combo/search-cell.html | 6 + .../combo/wcs/tracking_code_input.html | 23 + 17 files changed, 1087 insertions(+) create mode 100644 static/haute-garonne-cd31/_custom.scss create mode 100644 static/haute-garonne-cd31/_vars.scss create mode 100644 static/haute-garonne-cd31/config.json create mode 100644 static/haute-garonne-cd31/img/CD31-logo-rvb.svg create mode 100644 static/haute-garonne-cd31/img/picto-cadenas.svg create mode 100644 static/haute-garonne-cd31/img/picto-code-suivi-violet.svg create mode 100644 static/haute-garonne-cd31/img/picto-code-suivi.svg create mode 100644 static/haute-garonne-cd31/img/picto-loupe.svg create mode 100644 static/haute-garonne-cd31/img/picto-mon-compte.svg create mode 100644 static/haute-garonne-cd31/img/picto-rss.svg create mode 100644 static/haute-garonne-cd31/style.scss create mode 100644 templates/variants/haute-garonne-cd31/authentic2/accounts.html create mode 100644 templates/variants/haute-garonne-cd31/combo/feed-cell.html create mode 100644 templates/variants/haute-garonne-cd31/combo/page_template.html create mode 100644 templates/variants/haute-garonne-cd31/combo/page_template_homepage.html create mode 100644 templates/variants/haute-garonne-cd31/combo/search-cell.html create mode 100644 templates/variants/haute-garonne-cd31/combo/wcs/tracking_code_input.html diff --git a/static/haute-garonne-cd31/_custom.scss b/static/haute-garonne-cd31/_custom.scss new file mode 100644 index 00000000..8289401f --- /dev/null +++ b/static/haute-garonne-cd31/_custom.scss @@ -0,0 +1,542 @@ +%button { + @extend %button; + box-shadow: none; + border: 0px solid $button-background; + border-right-color: transparent; + border-width: 0px 20px; + padding-left: 10px; + padding-right: 10px; + text-transform: uppercase; + &:hover { + border-left-color: $button-background; + box-shadow: none; + } + &:active { + border-left-color: transparent; + } +} + +a:hover { + color: $primary-color; +} + +footer a:hover { + color: white; + text-decoration: underline; +} + +div#header-wrapper { + position: relative; + z-index: 105; +} + + +@media screen and (max-width: $mobile-limit) { + div#header { + background: $primary-color; + } +} + +div#header h1 { + position: absolute; + @media screen and (max-width: $mobile-limit) { + position: static; + } + a { + text-indent: -10000px; + display: block; + height: 150px; + width: 100px; + background: url(img/CD31-logo-rvb.svg) top left no-repeat; + background-size: cover; + } +} + +nav { + background: $primary-color; + #nav > ul { + margin-left: 180px; + padding-top: 30px; + padding-bottom: 25px; + @media screen and (max-width: $mobile-limit) { + padding: 0; + margin-left: 0; + } + a { + text-transform: uppercase; + font-size: 16px; + font-weight: 600; + } + } + @media screen and (max-width: $mobile-limit) { + background: transparent; + } +} + +#toplinks { + top: 40px; + background: $jaune; + box-shadow: none; + border: none; + border-radius: 0; + padding: 0; + a { + background: transparent url(img/picto-cadenas.svg) 5px 50% no-repeat; + background-size: 35px 35px; + font-weight: 600; + color: black; + padding: 20px 10px 14px 50px; + display: inline-block; + &.registration { + padding-left: 10px; + background: transparent; + @media screen and (max-width: $mobile-limit) { + display: none; + } + } + } + @media screen and (max-width: $mobile-limit) { + min-width: 130px; + right: 10px; + } +} + +body.has-picture nav::after { + top: 0; +} + +div#main-content-wrapper { + margin-top: 2rem; + @media screen and (max-width: $mobile-limit) { + margin-top: 0; + } +} + +div#welcome { + display: flex; + @media screen and (max-width: $mobile-limit) { + flex-direction: column; + } + div#carrousel { + width: 700px; + flex: 1; + @media screen and (max-width: $mobile-limit) { + width: auto; + } + } + div.textcell { + box-sizing: border-box; + margin-left: 20px; + padding: 20px; + width: 350px; + box-shadow: 0 5px 5px 5px #eee; + border-bottom: 5px solid $primary-color; + @media screen and (max-width: $mobile-limit) { + width: auto; + margin-left: 0; + } + h2:first-child { + margin-top: 0; + } + } + margin-bottom: 1rem; +} + +div.carrousel-content input + div div.carrousel-item div.carrousel-item-content { + left: 0; + bottom: 3rem; + width: 100%; + height: 7rem; + background: rgba(0, 0, 0, 0.5); + padding: 1rem; + box-sizing: border-box; + strong { + font-size: $title-font-size; + font-weight: 600; + line-height: 120%; + } +} + +div#vos-demarches { + border-bottom: 2px solid $primary-color; + margin-bottom: 3rem; + h1 { + background: white; + padding-top: 0; + margin-top: 0; + display: inline-block; + position: relative; + top: 25px; + @extend %title; + border-bottom: 0; + } +} + +div.gru-content div.cell { + margin-bottom: 2rem; +} + +.gru-content .cell.wcsformsofcategorycell { + h2:first-child { + font-weight: normal; + border-bottom: 0; + } + &.foldable { + box-shadow: 0 0 5px 5px #eee; + } + &.foldable.folded { + box-shadow: none; + h2 { + background: $primary-color; + color: white; + } + } + a { + &:hover { + color: $primary-color; + } + } + div.description { + display: none; + } +} + +div#rub_service div.category ul, +div#services > ul > li > ul, +div#account-management ul, +div.links-list ul, +div.menucell ul, +div.wcsformcell, +div.notificationscell ul, +div.categoriescell ul, +div.wcsformsofcategorycell ul, +div.wcscurrentdraftscell ul, +div.wcscurrentformscell ul { + & > li > a { + padding: 0.5rem 1rem 0.5rem 2rem; + &::before { + content: "> "; + position: absolute; + left: 1rem; + } + &:hover { + color: $primary-color; + } + } +} + +$cell_colors: ( ("bleu", $bleu), + ("violet", $violet), + ("bleufonce", $bleufonce), + ("bleuclair", $bleuclair), + ("jaune", $jaune), + ("orange", $orange) ); + +@each $color_class, $color in $cell_colors { + #content div.cell.#{$color_class} { + h2 { + color: $color; + border-color: $color; + } + button { + background: $color; + border-left-color: $color; + &:hover { + border-left-color: $color; + } + } + input { + border-color: $color; + } + &.inverse { + background: $color; + color: white; + h2 { + color: white; + } + button { + border: 1px solid white; + } + a { + &:hover { + color: white; + text-decoration: underline; + } + } + } + &.ombre { + box-shadow: 0 5px 5px 5px #eee; + } + } +} + +#content div.feedcell { + h2 { + background: url(img/picto-rss.svg) left center no-repeat; + background-size: 30px 30px; + padding-left: 40px; + } + div { + padding-left: 0; + padding-right: 0; + } +} + +#content div.searchcell { + h2 { + background: url(img/picto-loupe.svg) left center no-repeat; + background-size: 30px 30px; + padding-left: 40px; + } + button { + width: 100%; + } +} + +#content div.mon-compte { + h2 { + background: url(img/picto-mon-compte.svg) left center no-repeat; + background-size: 30px 30px; + padding-left: 40px; + } +} + + +#content div.trackingcodeinputcell { + h2 { + background: url(img/picto-code-suivi.svg) left top no-repeat; + background-size: 120px 80px; + padding-left: 120px; + font-size: 22px; + } + form { + display: flex; + input { + margin-right: 1rem; + } + } + padding-bottom: 0.5rem; +} + +body.has-picture { + div#rub_service { + & > h2 { + color: white; + border: 0; + text-align: left; + position: absolute; + top: -200px; + font-size: 37px; + text-transform: uppercase; + @media screen and (max-width: $mobile-limit) { + top: 200px; + padding-left: 0.5rem; + } + } + } +} + +div#rub_service { + font-size: 16px; + form { + h3 { + @extend %title; + padding-left: 0; + } + } + div.widget div.title label { + color: $primary-color; + font-weight: 600; + } +} + +form.quixote div.buttons { + border-top: 1px solid $primary-color; + padding-top: 2rem; + button { + text-transform: uppercase; + font-weight: 600; + } + .submit-button { + button::after { + content: " >"; + } + } + .cancel-button { + float: right; + button { + margin-right: 0; + padding-right: 0; + color: black; + background: transparent; + border: 0; + &:hover { + } + } + } + .previous-button { + float: left; + button::before { + content: "< "; + } + } +} + +div#tracking-code { + h3 { + background: url(img/picto-code-suivi-violet.svg) left top no-repeat; + background-size: 120px 80px; + color: $violet; + border-bottom: 0; + padding-left: 110px; + font-size: 22px; + } + a { + margin-top: 1rem; + display: block; + text-align: center; + background: $violet; + color: white; + padding-bottom: 4px; + font-size: 27px; + text-decoration: underline; + } + @media screen and (max-width: $mobile-limit) { + div.tracking-code-part { + display: flex; + h3, a { + display: inline-block; + font-size: 18px; + } + a { + padding: 2px; + margin: 1rem; + } + } + } +} + +div#gauche { + width: 23%; + @media screen and (max-width: $mobile-limit) { + width: auto; + } + & + div#rub_service { + width: 75%; + @media screen and (max-width: $mobile-limit) { + width: auto; + } + } +} + +div#steps { + ol { + li { + position: relative; + overflow: visible; + border: none; + span.marker { + display: inline-block; + position: absolute; + left: 0; + border-radius: 100%; + background: #b6b6b6; + box-shadow: 0 0 0 4px white; + text-align: center; + width: 60px; + height: 60px; + line-height: 60px; + color: white; + &::after { + content: ""; + height: 36px; + width: 1px; + position: absolute; + left: 30px; + bottom: -40px; + background: #b6b6b6; + } + } + span.label { + display: inline-block; + margin-left: 70px; + margin-top: 20px; + font-weight: 600; + color: black; + } + padding-bottom: 2rem; + &.step-before, &.current { + span.marker { + background: $primary-color; + } + span.label { + font-weight: 600; + } + } + &.step-before { + span.marker { + &::after { + background: $primary-color; + } + } + } + &.last { + span.marker { + &::after { + content: none; + } + } + } + @media screen and (max-width: $mobile-limit) { + &.step-before, &.step-after { + display: none; + } + &.current { + span.marker { + border-radius: 100%; + padding: 0; + border: 0; + color: white; + } + } + } + } + } +} + +@media screen and (max-width: $mobile-limit) { + body.has-picture nav::after { + height: 200px; + margin-top: -6px; + } +} + +div.textcell { + h1 { + font-size: 37px; + font-weight: 600; + text-transform: uppercase; + } + h2 { + font-size: 27px; + font-weight: 600; + } +} + +.gru-content div.wcsformcell { + padding: 0.5rem 1rem 0.1rem 1rem; + a { + font-weight: 600; + } +} + +#pwa-navigation { + text-transform: uppercase; + a { + background-position: 50% 10px; + padding-top: 38px; + span { + font-size: 11px; + } + } +} diff --git a/static/haute-garonne-cd31/_vars.scss b/static/haute-garonne-cd31/_vars.scss new file mode 100644 index 00000000..55a957b5 --- /dev/null +++ b/static/haute-garonne-cd31/_vars.scss @@ -0,0 +1,53 @@ +@import '../includes/font-poppins'; + +$bleu: #00789b; +$violet: #732378; +$bleufonce: #323282; +$bleuclair: #00A0E1; +$jaune: #FFD700; +$orange: #E67300; + +$font-color: black; +$font-family: Poppins, sans-seri; +$font-size: 14px; +$link-color: inherit; + +$primary-color: $bleu; + +$border-radius: 0px; +$width: 1135px; +$sidebar-position: right; + +$nav-background: $primary-color; +$nav-color: white; +$nav-active-color: $primary-color; +$nav-after-image-height: 280px; +$nav-mobile-bottom-bar-background: $primary-color; +$nav-mobile-bottom-bar-item-hover-background: $bleufonce; + +$title-background: transparent; +$title-color: $primary-color; +$title-font-size: 27px; +$title-weight: 600; +$title-border-bottom: 2px solid $primary-color; + +$widget-focus-background: white; +$button-background: $primary-color; +$button-color: white; +$button-hover-background: black; + +$cell-border: none; + +$footer-background: $primary-color; +$footer-color: white; + +$carrousel-height: 400px; +$carrousel-text-position: bottom-left; +$carrousel-navigation: none; + +$cell-entry-hover-background: white; +$cell-entry-border-color: transparent; +$cell-image-position: top; +$cell-image-padding: 0; + +$form-sidebar-position: right; diff --git a/static/haute-garonne-cd31/config.json b/static/haute-garonne-cd31/config.json new file mode 100644 index 00000000..25757e1c --- /dev/null +++ b/static/haute-garonne-cd31/config.json @@ -0,0 +1,7 @@ +{ + "label": "Haute-Garonne (CD31)", + "variables": { + "pwa_display": "standalone", + "theme_color": "#00789b" + } +} diff --git a/static/haute-garonne-cd31/img/CD31-logo-rvb.svg b/static/haute-garonne-cd31/img/CD31-logo-rvb.svg new file mode 100644 index 00000000..59059a3a --- /dev/null +++ b/static/haute-garonne-cd31/img/CD31-logo-rvb.svg @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/haute-garonne-cd31/img/picto-cadenas.svg b/static/haute-garonne-cd31/img/picto-cadenas.svg new file mode 100644 index 00000000..9690aaa8 --- /dev/null +++ b/static/haute-garonne-cd31/img/picto-cadenas.svg @@ -0,0 +1,17 @@ + + + + + + + diff --git a/static/haute-garonne-cd31/img/picto-code-suivi-violet.svg b/static/haute-garonne-cd31/img/picto-code-suivi-violet.svg new file mode 100644 index 00000000..0bbd899c --- /dev/null +++ b/static/haute-garonne-cd31/img/picto-code-suivi-violet.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/haute-garonne-cd31/img/picto-code-suivi.svg b/static/haute-garonne-cd31/img/picto-code-suivi.svg new file mode 100644 index 00000000..36726312 --- /dev/null +++ b/static/haute-garonne-cd31/img/picto-code-suivi.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/haute-garonne-cd31/img/picto-loupe.svg b/static/haute-garonne-cd31/img/picto-loupe.svg new file mode 100644 index 00000000..91f2c2e4 --- /dev/null +++ b/static/haute-garonne-cd31/img/picto-loupe.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + diff --git a/static/haute-garonne-cd31/img/picto-mon-compte.svg b/static/haute-garonne-cd31/img/picto-mon-compte.svg new file mode 100644 index 00000000..fe5e72da --- /dev/null +++ b/static/haute-garonne-cd31/img/picto-mon-compte.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/static/haute-garonne-cd31/img/picto-rss.svg b/static/haute-garonne-cd31/img/picto-rss.svg new file mode 100644 index 00000000..19b3728c --- /dev/null +++ b/static/haute-garonne-cd31/img/picto-rss.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + diff --git a/static/haute-garonne-cd31/style.scss b/static/haute-garonne-cd31/style.scss new file mode 100644 index 00000000..1fd447de --- /dev/null +++ b/static/haute-garonne-cd31/style.scss @@ -0,0 +1,5 @@ +@charset "UTF-8"; + +@import 'vars'; +@import '../includes/publik'; +@import 'custom'; diff --git a/templates/variants/haute-garonne-cd31/authentic2/accounts.html b/templates/variants/haute-garonne-cd31/authentic2/accounts.html new file mode 100644 index 00000000..ab1e5e79 --- /dev/null +++ b/templates/variants/haute-garonne-cd31/authentic2/accounts.html @@ -0,0 +1,5 @@ +{% extends "../../authentic2/accounts.html" %} + +{% block account-management-bottom-actions %} +
  • Déconnecter
    • +{% endblock %} diff --git a/templates/variants/haute-garonne-cd31/combo/feed-cell.html b/templates/variants/haute-garonne-cd31/combo/feed-cell.html new file mode 100644 index 00000000..8c6045e9 --- /dev/null +++ b/templates/variants/haute-garonne-cd31/combo/feed-cell.html @@ -0,0 +1,13 @@ +{% load i18n %} +{% block cell-content %} +{% if cell.title %} +

    {{ cell.title }}

    +{% endif %} +
    + +
    +{% endblock %} diff --git a/templates/variants/haute-garonne-cd31/combo/page_template.html b/templates/variants/haute-garonne-cd31/combo/page_template.html new file mode 100644 index 00000000..6d4c4bc6 --- /dev/null +++ b/templates/variants/haute-garonne-cd31/combo/page_template.html @@ -0,0 +1,22 @@ +{% extends "../../combo/page_template.html" %} +{% load combo %} + +{% block user-info %} +{% skeleton_extra_placeholder user-info %} + {% if user.is_authenticated %} + + {% if idp_account_url %}{% endif %} + Mon compte{% if idp_account_url %}{% endif %} + + {% else %} + {% if idp_registration_url %} + Connexion / + Inscription + {% else %} + Connexion / Inscription + {% endif %} + {% endif %} +{% end_skeleton_extra_placeholder %} +{% endblock %} + + diff --git a/templates/variants/haute-garonne-cd31/combo/page_template_homepage.html b/templates/variants/haute-garonne-cd31/combo/page_template_homepage.html new file mode 100644 index 00000000..c04bcff4 --- /dev/null +++ b/templates/variants/haute-garonne-cd31/combo/page_template_homepage.html @@ -0,0 +1,13 @@ +{% extends "combo/page_template_2cols_sidebar.html" %} +{% load combo %} + +{% block bodyclasses %}{{ block.super }} page-homepage{% endblock %} + +{% block content-pre %} +
    +{% placeholder "welcome" name="Bienvenue" %} +
    +
    +

    Vos démarches

    +
    +{% endblock %} diff --git a/templates/variants/haute-garonne-cd31/combo/search-cell.html b/templates/variants/haute-garonne-cd31/combo/search-cell.html new file mode 100644 index 00000000..3a3d6b47 --- /dev/null +++ b/templates/variants/haute-garonne-cd31/combo/search-cell.html @@ -0,0 +1,6 @@ +{% extends "combo/search-cell.html" %} + +{% block cell-content %} +

    Rechercher

    +{{ block.super }} +{% endblock %} diff --git a/templates/variants/haute-garonne-cd31/combo/wcs/tracking_code_input.html b/templates/variants/haute-garonne-cd31/combo/wcs/tracking_code_input.html new file mode 100644 index 00000000..68daa898 --- /dev/null +++ b/templates/variants/haute-garonne-cd31/combo/wcs/tracking_code_input.html @@ -0,0 +1,23 @@ +{% load i18n %} +{% block cell-content %} +
    +

    Votre code de suivi

    +
    + + + + + + +
    +
    +{% endblock %}