From 526cc2bbdab1868c35fb048b9c0c0ba978d4facd Mon Sep 17 00:00:00 2001 From: Daniel Muyshond Date: Fri, 29 Jul 2022 13:54:52 +0200 Subject: [PATCH] [TELE-1393] redefine iA.Citizen nav from BLA/Boussu --- .../_imio-basic-additional-custom.scss | 151 +++++++++++++----- .../includes/_imio-basic-entrouvert-base.scss | 37 +++-- static/staging1/_vars.scss | 4 +- 3 files changed, 130 insertions(+), 62 deletions(-) diff --git a/static/includes/_imio-basic-additional-custom.scss b/static/includes/_imio-basic-additional-custom.scss index feb4862b..c4b09169 100644 --- a/static/includes/_imio-basic-additional-custom.scss +++ b/static/includes/_imio-basic-additional-custom.scss @@ -1,61 +1,123 @@ /* Header */ + #toplinks { - box-shadow: $imio-box-shadow-style; - border: 0; - padding: 0.4em 1em 0.35em 1em; - right: 7em; - border-radius: 0 0 1em 1em; + display: none; } -body.has-header-background { - .site-header { - box-sizing: content-box; - min-height: 160px; - #header { - height: $imio-header-height; - border-radius: 0 0 $border-radius $border-radius; +$logo-width: 110px !default; + +#header { + position: relative; + h1 { + position: absolute; + top: 20px; + left: 20px; + a { + display: block; + text-indent: -10000px; + background: url(/assets/header:logo) top left no-repeat; + background-size: contain; + width: 110px; + height: 40px; } - #logo { - padding-top: $imio-header-logo-padding-top; - padding-left: $imio-header-logo-padding-left; + } +} + +#main-content { + padding: 16px; +} + +@media screen and (max-width: $nav-mobile-limit) { + #logo.has-logo { + padding-left: 0; + left: 0; + width: 100%; + a { + width: 100%; + background-position: center; + } + } + #footer { + padding-left: 25px; + padding-right: 25px; + } +} + +$nav-height: 10rem; + +nav.site-nav { + @media screen and (max-width: $nav-mobile-limit) { + margin-top: 75px; + div.gru-nav .gru-nav-button { + position: absolute; + top: 10px; + right: 10px; + & { + .icon-bar { + background: $darkened-primary-color; + transition: none; + } + .icon-bar-1, .icon-bar-2, .icon-bar-3 { + left: auto; + right: 17%; + } + .icon-bar-2 { + width: 50%; + left: auto; + + } + } + &.toggled { + .icon-bar-2, .icon-bar-3 { + width: 66%; + } + } + + ul { + margin-top: 50px; + } + &.toggled { + + ul { + } + } } } } div#nav { - margin-bottom: ($nav-height / 4) * 3; + margin-bottom: 1.618em; + > ul { + margin-left: #{$logo-width + 68px}; + background-color: #E6E6E6; + border-radius: $border-radius $border-radius 0 $border-radius; + @media screen and (max-width: $nav-mobile-limit) { + margin-left: 0; + } + ul { + box-shadow: $imio-box-shadow-style-upper; + } + a { + transition: none; + @media screen and (max-width: $nav-mobile-limit) { + border-radius: 0; + } + } + } + li.has-submenu { + > a > span { + &::after { + // font-family: FontAwesome; + padding-left: 3px; + content: "⌄"; // angle-down + } + } + } } div.gru-nav > ul > li a { - transition: none; text-transform: uppercase; -} - -div.gru-nav > ul li ul { - box-shadow: 0px 13px 24px 0px rgba(0, 0, 0, 0.34); - padding: 10px; - @media screen and ($max-mobile-viewport) { - padding: 0 20px; - box-shadow: none; - } -} - -div.gru-nav > ul > li li a { - padding: 0.5rem 0.5rem 0.15rem 0.5rem; -} - -div.gru-nav li li a::after { - margin: 0; -} - -div.gru-nav li:hover > a, -div.gru-nav li.selected > a { - border-bottom-color: transparent; - &:after { - width: calc(100% - 50px); - } + font-weight: 600; } /* @@ -104,7 +166,8 @@ div.deliberations-communales p { } } -#footer .cell { +#footer .cell, +#nav { box-shadow: none; } @@ -335,7 +398,7 @@ tbody > tr > td.jour { outline: 0; cursor: pointer; overflow: initial; - $switch-width: 3.5em; + $switch-width: 3em; $switch-height: 1.5em; $switch-slider-diameter: 1.75em; &::after { diff --git a/static/includes/_imio-basic-entrouvert-base.scss b/static/includes/_imio-basic-entrouvert-base.scss index 964d048a..edda9903 100644 --- a/static/includes/_imio-basic-entrouvert-base.scss +++ b/static/includes/_imio-basic-entrouvert-base.scss @@ -43,6 +43,8 @@ Borders $imio-box-shadow-turned-on: true; $imio-box-shadow-style: 0 1px 1px rgba(0, 0, 0, 0.01), 2px 2px 2px rgba(0, 0, 0, 0.07), 0 8px 8px rgba(0, 0, 0, 0.05), 0 16px 16px rgba(0, 0, 0, 0.001); +$imio-box-shadow-style-upper: 3.5px 8.7px 5.4px rgba(0, 0, 0, 0.055), +10px 25px 43px rgba(0, 0, 0, 0.11); $border-radius: 3px; $imio-cells-borders: true; $imio-cells-borders-style: 1px solid rgb(226, 226, 226); // effective if activated @@ -51,7 +53,7 @@ $imio-cells-borders-style: 1px solid rgb(226, 226, 226); // effective if activat Header */ $imio-header-height: 356px; -$header-logo-size: 230px 80px; +// $header-logo-size: 230px 80px; $imio-header-logo-padding-top: 44px; $imio-header-logo-padding-left: 50px; $header-full-width-background: false; @@ -119,8 +121,8 @@ $timetable-cell-selected-background: $timetable-cell-hover-background; /* Barre de navigation */ -$nav-background: $light-grey; -$nav-menu-color: white; +$nav-background: $light-grey !default; +$nav-menu-color: $font-color; $nav-menu-side: 50px; $nav-full-width-brackground: false; $nav-color: #050707; @@ -130,21 +132,21 @@ $nav-border-radius: $border-radius; $nav-height: 3rem; $nav-item-background: transparent; $nav-item-selected-background: $nav-active-color; -$nav-item-selected-color: $nav-menu-color; +$nav-item-selected-color: white; $nav-item-hover-background: $imio-buttons-hover-color; $nav-item-hover-color: $nav-item-selected-color; $nav-item-spacing: 0px; -$nav-mobile-menu-background: #eee; -$nav-mobile-menu-item-color: black; +$nav-mobile-menu-background: $light-grey; +$nav-mobile-menu-item-color: $font-color; $nav-item-selected-mode: background; $nav-item-selected-border: 2px solid $nav-active-color; $nav-item-hover-mode: background; $nav-item-hover-border: $nav-item-selected-border; $nav-after-image: true; $nav-after-image-height: 275px; -$nav-mobile-mode: hamburger; -$nav-submenu-background: white; -$nav-submenu-color: $primary-color; +// $nav-mobile-mode: hamburger; +$nav-submenu-background: $light-grey; +$nav-submenu-color: $font-color; $nav-active-color: white; $nav-mobile-limit: $mobile-limit; $responsive-menu: top-to-bottom; @@ -155,15 +157,16 @@ $nav-button-background: $nav-active-color; Barre de navigation quand $nav-mobile-mode a pour valeur bottom-bar. */ + $nav-mobile-bottom-bar-height: 64px; -$nav-mobile-bottom-bar-background: white; -$nav-mobile-bottom-bar-color: $nav-color; -$nav-mobile-bottom-bar-item-hover-background: $nav-item-hover-background; -$nav-mobile-bottom-bar-item-hover-color: $nav-item-hover-color; -$nav-mobile-bottom-bar-item-selected-background: $nav-item-selected-background; -$nav-mobile-bottom-bar-item-selected-color: $nav-item-selected-background; -$nav-mobile-bottom-bar-badge-background: #ee2222; -$nav-mobile-bottom-bar-badge-color: white; +$nav-mobile-bottom-bar-background: $primary-color; +$nav-mobile-bottom-bar-color: white; +$nav-mobile-bottom-bar-item-hover-background: darken($primary-color, 10%); +$nav-mobile-bottom-bar-item-hover-color: white; +$nav-mobile-bottom-bar-item-selected-background: darken($primary-color, 5%); +$nav-mobile-bottom-bar-item-selected-color: white; +$nav-mobile-bottom-bar-badge-background: $darkened-primary-color; +$nav-mobile-bottom-bar-badge-color: $font-color; $pwa-nav-limit: $mobile-limit; // https://doc-publik.entrouvert.com/dev/integration-graphique/infrastructure-scss/#application-mobile-pwa diff --git a/static/staging1/_vars.scss b/static/staging1/_vars.scss index 0fd80d7b..c46f237b 100644 --- a/static/staging1/_vars.scss +++ b/static/staging1/_vars.scss @@ -2,10 +2,12 @@ @import "../../publik-base-theme/static/includes/fonts/opensans"; @import "../../publik-base-theme/static/includes/fonts/montserrat"; $font-family: 'Open Sans', Arial, Helvetica, sans-serif; +$nav-background: none; +$logo-width: 110px; $title-font-family: 'Montserrat', sans-serif; $primary-color: #bd1f68; $imio-header-height: 356px; -$header-logo-size: 230px 80px; +// $header-logo-size: 230px 80px; $imio-header-logo-padding-top: 44px; $imio-header-logo-padding-left: 50px; $link-color-footer: white;