entrouvert
/
imio-publik-themes
22
1
Fork 0
Code Issues Pull Requests Releases Activity

[TELE-1393] redefine iA.Citizen nav from BLA/Boussu

This commit is contained in:
Daniel Muyshond 2022-07-29 13:54:52 +02:00
parent 3bc9b377fd
commit 526cc2bbda
3 changed files with 130 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
static/includes/_imio-basic-additional-custom.scss
View File

@ -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 {

37
static/includes/_imio-basic-entrouvert-base.scss
View File

@ -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

4
static/staging1/_vars.scss
View File

@ -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;