scss: introduce $nav-button-bar-height (#63909)
and use height instead border to manage bar height
This commit is contained in:
parent
16cc3c864d
commit
bb52a3e86a
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -105,7 +105,7 @@ div.gru-nav {
|
|||
border-color: transparent;
|
||||
|
||||
.icon-bar {
|
||||
border-color: #ccc;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
+ ul {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)');
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -77,7 +77,7 @@ div.gru-nav .gru-nav-button {
|
|||
&.toggled {
|
||||
background-color: $primary-color;
|
||||
.icon-bar {
|
||||
border-color: white;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -86,7 +86,7 @@ div.gru-nav {
|
|||
border: 0;
|
||||
}
|
||||
& .icon-bar {
|
||||
border-bottom: 2px solid $nav-button-color;
|
||||
background-color: $nav-button-color;
|
||||
}
|
||||
}
|
||||
> ul {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -276,8 +276,7 @@ div.gru-nav {
|
|||
margin-top: 4em;
|
||||
}
|
||||
.icon-bar {
|
||||
border: 1px solid $primary-color;
|
||||
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -189,7 +189,7 @@ input, input[type="search"], textarea, select {
|
|||
|
||||
&, &.toggled {
|
||||
span.icon-bar {
|
||||
border: 1px solid $secondary-color;
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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{
|
||||
|
|
Loading…
Reference in New Issue