From 3258ad4b88ad1bd60f6477a34b541cedf7cf8d02 Mon Sep 17 00:00:00 2001 From: Serghei Mihai Date: Thu, 2 Jun 2022 17:32:28 +0200 Subject: [PATCH] add aix marseille metropole theme (#66252) --- static/aix-marseille-metropole/_custom.scss | 178 ++++++++++++++++++ static/aix-marseille-metropole/_vars.scss | 63 +++++++ static/aix-marseille-metropole/config.json | 15 ++ .../img/top-cell-bg.svg | 1 + static/aix-marseille-metropole/style.scss | 6 + 5 files changed, 263 insertions(+) create mode 100644 static/aix-marseille-metropole/_custom.scss create mode 100644 static/aix-marseille-metropole/_vars.scss create mode 100644 static/aix-marseille-metropole/config.json create mode 100644 static/aix-marseille-metropole/img/top-cell-bg.svg create mode 100644 static/aix-marseille-metropole/style.scss diff --git a/static/aix-marseille-metropole/_custom.scss b/static/aix-marseille-metropole/_custom.scss new file mode 100644 index 00000000..6f1053b1 --- /dev/null +++ b/static/aix-marseille-metropole/_custom.scss @@ -0,0 +1,178 @@ +$title-backgrounds: ( + "green1": $green1, + "green2": $green2, + "red": $red, + "blue1": $blue1, + "blue2": $blue2, + "yellow": $yellow, + "brown": $brown +); + +%cell { + @extend %cell; + box-shadow: 0px 6px 56px -12px rgba(12, 29, 24, 0.25); +} + +div#header-wrapper { + height: 3.5rem; + @media ($max-mobile-viewport) { + height: 5rem; + } +} + +div#header { + padding-left: 0; + background: $primary-color; + @media ($max-mobile-viewport) { + height: 1.5rem; + } +} + +.form-content--title { + font-size: 41px; + text-transform: uppercase; + background: transparent; +} + +#toplinks { + @media ($min-desktop-viewport) { + top: 1rem; + } + @media ($max-mobile-viewport) { + right: 10px; + } + a { + color: white; + @media ($max-mobile-viewport) { + font-size: 80%; + } + } +} + +div.gru-nav { + > ul { + margin-bottom: 0.5rem; + display: flex; + justify-content: flex-end; + > li a { + text-transform: uppercase; + @media ($min-desktop-viewport) { + padding-bottom: 1.5rem; + } + } + } + .gru-nav-button { + left: calc(100% - #{$nav-menu-side} - 10px); + right: 0; + top: 0; + } +} + +div.gru-nav > ul, .pwa-navigation div > ul { + > li a { + text-transform: uppercase; + } +} + +.pwa-navigation div > ul li { + a { + font-weight: bold; + } + &.selected a, &:hover a { + box-shadow: 1px 1px 10px 0px #ddd inset; + } +} + + +#logo.has-logo { + width: 140px; + height: 60px; + padding-left: 0; + @media ($max-mobile-viewport) { + padding-left: 1rem; + } + a { + position: absolute; + z-index: 1; + top: 10px; + @media ($min-desktop-viewport) { + height: 122px; + } + } + &::before { + content: ''; + display: block; + height: 0; + border-bottom: 4rem solid white; + border-right: 4rem solid transparent; + width: 15rem; + @media ($max-mobile-viewport) { + margin-left: -1rem; + width: 10rem; + } + } +} + +div.cell.has-asset-picture { + h2:first-child { + background: transparent; + } +} + +body.has-picture { + .combo-placeholder--columns-top { + position: absolute; + top: -$nav-after-image-height; + left: 0; + height: $nav-after-image-height; + display: flex; + justify-content: center; + align-items: center; + div.cell { + padding: 0.5rem 6rem 0.5rem 1rem; + background-image: url('img/top-cell-bg.svg'); + background-position: 95% 75%; + background-repeat: no-repeat; + } + } + @media ($max-mobile-viewport) { + .site-nav::after { + height: $nav-after-image-height / 2; + } + .combo-placeholder--columns-top { + top: 5rem; + left: auto; + height: $nav-after-image-height / 2; + } + } +} + +#footer { + ul { + padding-left: 1rem; + li { + list-style-type: none; + padding: 0.25rem 0; + } + } + h5 { + border-bottom: 1px solid; + } +} +@each $name, $color in $title-backgrounds { + div.cell.#{$name}-title { + h2:first-child { + background: #{$color}; + } + } +} + +/* AUTHENTIC */ + +.anonymous-user { + div.block, div.a2-block { + box-shadow: none; + } +} + + diff --git a/static/aix-marseille-metropole/_vars.scss b/static/aix-marseille-metropole/_vars.scss new file mode 100644 index 00000000..97729d00 --- /dev/null +++ b/static/aix-marseille-metropole/_vars.scss @@ -0,0 +1,63 @@ +$primary-color: #0d1d2d; +$width: 1440px; + +$green1: #b4cd1c; +$green2: #928c1e; +$red: #e94e1b; +$blue1: #b0dbd8; +$blue2: #009fe3; +$yellow: #fed600; +$brown: #d6b49d; + +$font-color: $primary-color; +$font-family: 'IBM Plex Serif'; +$font-size: 17px; + +$widget-focus-border: 1px solid $primary-color; +$widget-focus-outline: 1px solid $primary-color; +$button-focus-outline-offset: 1px; + +$button-background: $primary-color; + +$nav-button-background: transparent; +$nav-mobile-bottom-bar-item-hover-background: transparent; +$nav-mobile-bottom-bar-item-selected-background: $nav-mobile-bottom-bar-item-hover-background; + +$nav-item-selected-mode: bottom-border; +$nav-item-hover: $nav-item-selected-mode; +$nav-active-color: $red; +$nav-item-selected-border: 3px solid $nav-active-color; +$nav-menu-color: $primary-color; +$nav-border-color: transparent; +$nav-mobile-menu-item-hover-background: transparent; + +$nav-after-image-height: 450px; + +$cell-border: none; +$cell-image-position: top; +$cell-image-padding: none; + +$title-color: $primary-color; +$title-weight: 700; +$title-transform: uppercase; +$title-background: $brown; + +$wcs-step-marker-type: disc; +$wcs-step-border-bottom: none; +$wcs-step-marker-background: $brown; +$wcs-step-color: $brown; +$wcs-step-current-marker-background: $primary-color; +$wcs-step-current-label-color: $wcs-step-current-marker-background; +$wcs-step-marker-color: white; +$wcs-step-current-marker-color: $wcs-step-marker-color; +$wcs-steps-spacing: 0.7rem; + +$buttons-order: previous submit cancel; + +$toplinks-style: none; + +$link-color: $primary-color; + +$footer-background: $primary-color; +$footer-link-color: white; +$footer-color: white; diff --git a/static/aix-marseille-metropole/config.json b/static/aix-marseille-metropole/config.json new file mode 100644 index 00000000..d1f533fa --- /dev/null +++ b/static/aix-marseille-metropole/config.json @@ -0,0 +1,15 @@ +{ + "label": "Aix Marseille Métropole", + "variables": { + "pwa_display": "standalone", + "theme_color": "#0d1d2d" + }, + "settings": { + "combo": { + "COMBO_ASSET_SLOTS.update": { + "header:background": { "label": "Têtière : fond" }, + "header:logo": { "label": "Têtière : logo" } + } + } + } +} diff --git a/static/aix-marseille-metropole/img/top-cell-bg.svg b/static/aix-marseille-metropole/img/top-cell-bg.svg new file mode 100644 index 00000000..00eafae1 --- /dev/null +++ b/static/aix-marseille-metropole/img/top-cell-bg.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/aix-marseille-metropole/style.scss b/static/aix-marseille-metropole/style.scss new file mode 100644 index 00000000..f2a075ff --- /dev/null +++ b/static/aix-marseille-metropole/style.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +@import '../includes/fonts/ibm-plex-serif'; +@import 'vars'; +@import '../includes/publik'; +@import 'custom';