scss: introduce $nav-button-bar-height (#63909)

and use height instead border to manage bar height
This commit is contained in:
Thomas Jund 2022-04-13 16:50:44 +02:00
parent 16cc3c864d
commit bb52a3e86a
29 changed files with 26 additions and 45 deletions

View File

@ -21,7 +21,6 @@ $mobile-header-height: 80px;
div.gru-nav {
border-radius: 0;
.gru-nav-button .icon-bar {
border-width: 2px;
border-radius: 10px 0 0 10px;
}
&.toggled .gru-nav-button .icon-bar {

View File

@ -16,6 +16,7 @@ $nav-active-color: $primary-color;
$nav-button-background: transparent;
$nav-button-color: white;
$nav-button-bar-height: 4px;
$nav-mobile-menu-background: white;

View File

@ -105,7 +105,7 @@ div.gru-nav {
border-color: transparent;
.icon-bar {
border-color: #ccc;
background-color: #ccc;
}
+ ul {

View File

@ -250,11 +250,6 @@ div.gru-nav > ul > li {
right: 1.5rem;
top: 0.75rem;
.icon-bar {
border-width: 1.5px;
margin-top: -1px;
}
&.toggled {
background: white;
border-color: white;

View File

@ -41,6 +41,7 @@ $nav-active-color: $orange;
$responsive-menu: left-to-right; // based on left-to-right, but use a custom right-to-left
$nav-button-background: black;
$nav-button-color: white;
$nav-button-bar-height: 3px;
$nav-menu-side: 3rem;
$title-font-family: Oswald, sans-serif;

View File

@ -52,9 +52,6 @@ div.gru-nav-wrapper {
div.gru-nav .gru-nav-button {
background-color: $secondary-color;
.icon-bar {
border-width: 2px;
}
}
.gru-content div.cell h2:first-child {

View File

@ -24,6 +24,7 @@ $nav-menu-side: 40px;
$nav-mobile-mode: hamburger;
$nav-item-selected-background: $primary-color;
$nav-item-background: #b7b7b7;
$nav-button-bar-height: 4px;
$cell-border: 1px dotted $secondary-color;
$cell-image-position: top;

View File

@ -188,10 +188,6 @@ div.gru-nav-wrapper {
margin-right: auto;
margin-bottom: 1em;
& .icon-bar {
border-width: 2px;
}
+ ul {
background-color: $nav-mobile-menu-background;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent 20px)

View File

@ -34,6 +34,7 @@ $nav-full-width-background: true;
$nav-submenu-color: $black;
$nav-button-background: white;
$nav-button-color: $black;
$nav-button-bar-height: 4px;
$title-background: transparent;
$title-color: $font-color;

View File

@ -181,7 +181,7 @@ h1#logo.has-logo {
width: $nav-menu-side;
box-shadow: 0 0 0 1px white;
&.toggled .icon-bar {
border-color: white;
background-color: white;
}
}
// right-to-left adaptation

View File

@ -11,6 +11,7 @@ $nav-menu-side: 50px !default;
$nav-menu-color: white !default;
$nav-button-background: $nav-active-color !default;
$nav-button-color: $nav-menu-color !default;
$nav-button-bar-height: 2px !default;
$nav-item-background: transparent !default;
$nav-submenu-background: $nav-background !default;
$nav-submenu-color: $nav-menu-color !default;
@ -245,21 +246,22 @@ div.menucell {
margin: 0;
background: $nav-button-background;
transition: all 0.25s ease;
border: 0;
@if $responsive-menu == top-to-bottom {
margin-left: 10px;
} @else {
position: absolute;
top: 5px;
}
border: 0;
& .icon-bar {
position: absolute;
left: 17%;
width: 66%;
margin: 0;
border: 1px solid $nav-button-color;
height: $nav-button-bar-height;
background: $nav-button-color;
transition: all 0.25s ease;
margin-top: -#{$nav-button-bar-height / 2};
}
& .icon-bar-1 {
top: 25%;
@ -335,11 +337,12 @@ div.menucell {
@if $responsive-menu == left-to-right {
background: transparent;
}
& .icon-bar-1 {
& .icon-bar {
@if $responsive-menu == left-to-right {
border-color: $nav-border-color;
background-color: $nav-border-color;
}
}
& .icon-bar-1 {
top: 50%;
@include vendor-prefix('transform', 'rotate(45deg)');
}
@ -347,9 +350,6 @@ div.menucell {
opacity: 0;
}
& .icon-bar-3 {
@if $responsive-menu == left-to-right {
border-color: $nav-border-color;
}
top: 50%;
@include vendor-prefix('transform', 'rotate(-45deg)');
}

View File

@ -259,9 +259,6 @@ h1#logo.has-logo {
padding: 3px #{$yellow-border-desktop + $main-padding-desktop};
}
}
#nav-button .icon-bar {
border-width: 2px;
}
.gru-nav > ul {
margin: 0;
font-size: $fz-h4;

View File

@ -46,6 +46,7 @@ $nav-item-selected-color: $cyan-dark;
$nav-menu-side: 3rem;
$nav-button-background: transparent;
$nav-button-color: $gray-dark;
$nav-button-bar-height: 4px;
$nav-mobile-menu-background: white;
$nav-mobile-menu-item-color: $cyan-dark;
$nav-mobile-menu-item-hover-background: $cyan-dark;

View File

@ -77,7 +77,7 @@ div.gru-nav .gru-nav-button {
&.toggled {
background-color: $primary-color;
.icon-bar {
border-color: white;
background-color: white;
}
}
}

View File

@ -118,7 +118,6 @@ $form-picto-keywords: adresse, aquabike, archives, asso, attestation, bibliotheq
div.gru-nav {
.gru-nav-button .icon-bar {
border-width: 3px;
border-radius: 10px 0 0 10px;
}
&.toggled .gru-nav-button .icon-bar {

View File

@ -17,6 +17,7 @@ $nav-after-image: false;
$nav-button-background: white;
$nav-button-color: #464646;
$nav-button-bar-height: 6px;
$nav-active-color: $primary-color;
$nav-mobile-bottom-bar-background: #464646;

View File

@ -139,9 +139,6 @@ div.gru-nav {
.gru-nav-button {
border-radius: 0;
}
.gru-nav-button .icon-bar {
border-width: 2px;
}
}
div.gru-nav .gru-nav-button {

View File

@ -36,6 +36,7 @@ $nav-mobile-bottom-bar-background: $darkblue;
$nav-mobile-bottom-bar-color: white;
$nav-mobile-bottom-bar-item-hover-background: $yellow;
$nav-mobile-bottom-bar-item-hover-color: $darkblue;
$nav-button-bar-height: 4px;
$footer-background: #f4f4f4;
$footer-color: #a7abac;

View File

@ -149,9 +149,6 @@ div.gru-nav {
.gru-nav-button {
display: inline-block;
border: 5px solid transparent;
.icon-bar {
border-width: 3px;
}
+ ul {
position: relative;
text-align: left;

View File

@ -39,6 +39,7 @@ $nav-submenu-background: $green;
$nav-mobile-menu-background: $green;
$nav-after-image: false;
$nav-menu-side: 4rem;
$nav-button-bar-height: 6px;
$title-background: transparent;
$title-color: $violet-dark;

View File

@ -86,7 +86,7 @@ div.gru-nav {
border: 0;
}
& .icon-bar {
border-bottom: 2px solid $nav-button-color;
background-color: $nav-button-color;
}
}
> ul {

View File

@ -19,6 +19,7 @@ $nav-item-hover-background: $primary-color;
$nav-item-selected-background: $primary-color;
$nav-button-background: $white;
$nav-button-color: $primary-color;
$nav-button-bar-height: 4px;
$nav-mobile-menu-background: $white;
$nav-submenu-color: $primary-color;
$nav-mobile-bottom-bar-background: $primary-color;

View File

@ -290,9 +290,6 @@ footer {
div.gru-nav .gru-nav-button {
border: solid transparent;
border-width: 0 28px 4px;
& .icon-bar {
border-width: 2px;
}
&:not(.toggled) {
.icon-bar-1,
.icon-bar-3 {

View File

@ -34,6 +34,7 @@ $nav-color: white;
$nav-menu-side: $mobile-header-height;
$nav-mobile-menu-background: $blue;
$nav-mobile-menu-item-color: white;
$nav-button-bar-height: 4px;
$nav-mobile-bottom-bar-height: 48px;
$nav-mobile-bottom-bar-color: $blue;

View File

@ -221,9 +221,6 @@ div.gru-nav {
position: absolute;
top: calc((#{$nav-menu-side} + #{$btn-bottom-space}) * -1) ;
right: 0;
.icon-bar {
border-width: 2px;
}
+ ul {
display: none;

View File

@ -105,6 +105,7 @@ $nav-button-color: black;
$nav-menu-side: 40px;
$nav-mobile-menu-background: black;
$nav-mobile-menu-item-color: white;
$nav-button-bar-height: 4px;
$nav-active-color: white;
$nav-item-selected-color: $font-color;

View File

@ -276,8 +276,7 @@ div.gru-nav {
margin-top: 4em;
}
.icon-bar {
border: 1px solid $primary-color;
background-color: $primary-color;
}
}
}

View File

@ -189,7 +189,7 @@ input, input[type="search"], textarea, select {
&, &.toggled {
span.icon-bar {
border: 1px solid $secondary-color;
background-color: $secondary-color;
}
}
}

View File

@ -55,7 +55,7 @@ div#nav {
}
div#nav #nav-button .icon-bar{
border-color: $primary-color;
background-color: $primary-color;
}
div#nav #nav-button + ul li a{