css: use % for nav-button icon-bars position (#56855)
This commit is contained in:
parent
f4692b0ab2
commit
275cee6545
|
@ -175,7 +175,6 @@ div.gru-nav {
|
|||
.gru-nav-button {
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: content-box;
|
||||
border: 6px solid transparent;
|
||||
+ ul {
|
||||
border: 0;
|
||||
|
@ -1150,4 +1149,4 @@ div#footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,7 +24,7 @@ $title-transform: uppercase;
|
|||
$title-padding: 0.25em 0.25em 0.25em 0.5em;
|
||||
$title-weight: bold;
|
||||
|
||||
$nav-menu-side: 28px;
|
||||
$nav-menu-side: 40px;
|
||||
$nav-color: $primary-color;
|
||||
$nav-active-color: $primary-color;
|
||||
$nav-background: #fff;
|
||||
|
|
|
@ -153,7 +153,7 @@ div.pwa-navigation ul li a {
|
|||
|
||||
div.gru-nav {
|
||||
.gru-nav-button {
|
||||
border-width: 10px 40px 40px 10px;
|
||||
border-width: 10px;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
+ ul {
|
||||
|
|
|
@ -11,7 +11,7 @@ $nav-background: #3d424a;
|
|||
$nav-active-color: #000;
|
||||
$nav-color: #fff;
|
||||
$nav-button-background: #3d424a;
|
||||
$nav-menu-side: 30px;
|
||||
$nav-menu-side: 50px;
|
||||
|
||||
$nav-mobile-bottom-bar-background: $primary-color;
|
||||
$nav-mobile-bottom-bar-color: #3d424a;
|
||||
|
|
|
@ -265,6 +265,7 @@ div#anomalies {
|
|||
margin-left: -50px;
|
||||
.icon-bar {
|
||||
left: 60px;
|
||||
width: $nav-menu-side/6*4;
|
||||
}
|
||||
+ ul {
|
||||
border-top-width: 3px;
|
||||
|
|
|
@ -253,21 +253,20 @@ div.menucell {
|
|||
border: 0;
|
||||
& .icon-bar {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: $nav-menu-side/6;
|
||||
width: $nav-menu-side/6*4;
|
||||
left: 17%;
|
||||
width: 66%;
|
||||
margin: 0;
|
||||
border: 1px solid $nav-button-color;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
& .icon-bar-1 {
|
||||
top: $nav-menu-side/4;
|
||||
top: 25%;
|
||||
}
|
||||
& .icon-bar-2 {
|
||||
top: $nav-menu-side/2;
|
||||
top: 50%;
|
||||
}
|
||||
& .icon-bar-3 {
|
||||
top: $nav-menu-side/4*3;
|
||||
top: 75%;
|
||||
}
|
||||
|
||||
@if $responsive-menu == left-to-right {
|
||||
|
@ -327,7 +326,7 @@ div.menucell {
|
|||
@if $responsive-menu == left-to-right {
|
||||
border-color: $nav-border-color;
|
||||
}
|
||||
top: $nav-menu-side/2;
|
||||
top: 50%;
|
||||
@include vendor-prefix('transform', 'rotate(45deg)');
|
||||
}
|
||||
& .icon-bar-2 {
|
||||
|
@ -337,7 +336,7 @@ div.menucell {
|
|||
@if $responsive-menu == left-to-right {
|
||||
border-color: $nav-border-color;
|
||||
}
|
||||
top: $nav-menu-side/2;
|
||||
top: 50%;
|
||||
@include vendor-prefix('transform', 'rotate(-45deg)');
|
||||
}
|
||||
|
||||
|
|
|
@ -63,9 +63,9 @@ div.gru-nav {
|
|||
font-size: $fz-small;
|
||||
|
||||
.gru-nav-button {
|
||||
box-sizing: content-box;
|
||||
height: $header-height;
|
||||
border: 10px solid $primary-color;
|
||||
border-width: #{($header-height - $nav-menu-side) / 2} 10px;
|
||||
border-width: #{$header-height / 3} 10px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
|
|
|
@ -29,7 +29,7 @@ $columns-gutter: 30px;
|
|||
|
||||
$header-background-color: white;
|
||||
|
||||
$nav-menu-side: 20px;
|
||||
$nav-menu-side: 40px;
|
||||
$nav-background: $flesh;
|
||||
$nav-full-width-background: true;
|
||||
$nav-color: $blue-xdark;
|
||||
|
@ -84,4 +84,4 @@ $wcs-step-current-marker-color: white;
|
|||
|
||||
$footer-background: #0047a3;
|
||||
$footer-link-color: white;
|
||||
$footer-menucell-separator: 1px solid hsla(0, 0%, 100%, 0.3);
|
||||
$footer-menucell-separator: 1px solid hsla(0, 0%, 100%, 0.3);
|
||||
|
|
|
@ -150,27 +150,8 @@ div.gru-nav .gru-nav-button {
|
|||
@media screen and ($max-mobile-viewport) {
|
||||
width: $mobile-hamburger-menu-width;
|
||||
height: $mobile-hamburger-menu-height;
|
||||
.icon-bar {
|
||||
left: 18px;
|
||||
width: $nav-menu-side/6*4;
|
||||
}
|
||||
.icon-bar-1 {
|
||||
top: 3px + $nav-menu-side/4;
|
||||
}
|
||||
.icon-bar-2 {
|
||||
top: 3px + $nav-menu-side/2;
|
||||
}
|
||||
.icon-bar-3 {
|
||||
top: 3px + $nav-menu-side/4*3;
|
||||
}
|
||||
&.toggled {
|
||||
.icon-bar-1 {
|
||||
top: $nav-menu-side/2;
|
||||
}
|
||||
& .icon-bar-3 {
|
||||
top: $nav-menu-side/2;
|
||||
}
|
||||
}
|
||||
border: solid transparent;
|
||||
border-width: 2px 15px 6px;
|
||||
}
|
||||
+ ul {
|
||||
margin-bottom: 0;
|
||||
|
|
|
@ -292,26 +292,17 @@ footer {
|
|||
|
||||
@media screen and (max-width: $nav-mobile-limit) {
|
||||
div.gru-nav .gru-nav-button {
|
||||
border: solid transparent;
|
||||
border-width: 0 28px 4px;
|
||||
& .icon-bar {
|
||||
left: 30px;
|
||||
width: $nav-menu-side/2;
|
||||
border-width: 2px;
|
||||
}
|
||||
.icon-bar-1 {
|
||||
top: $nav-menu-side/4;
|
||||
width: $nav-menu-side/2.4;
|
||||
}
|
||||
.icon-bar-2 {
|
||||
top: $nav-menu-side/2 - 1px;
|
||||
}
|
||||
.icon-bar-3 {
|
||||
top: $nav-menu-side/4*3 - 2px;
|
||||
width: $nav-menu-side/2.4;
|
||||
}
|
||||
&.toggled .icon-bar-1,
|
||||
&.toggled .icon-bar-3 {
|
||||
width: $nav-menu-side/2;
|
||||
}
|
||||
&:not(.toggled) {
|
||||
.icon-bar-1,
|
||||
.icon-bar-3 {
|
||||
width: calc(100% / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -579,6 +579,10 @@ div.gru-nav {
|
|||
) * -1
|
||||
) ;
|
||||
width: $nav-btn-width-desktop;
|
||||
.icon-bar {
|
||||
width: #{$nav-menu-side/3*2};
|
||||
left: #{$nav-menu-side/6};
|
||||
}
|
||||
|
||||
// Add menu label
|
||||
&::after {
|
||||
|
|
Loading…
Reference in New Issue