css: use % for nav-button icon-bars position (#56855)

This commit is contained in:
Thomas Jund 2021-09-09 17:37:13 +02:00
parent f4692b0ab2
commit 275cee6545
11 changed files with 30 additions and 55 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -265,6 +265,7 @@ div#anomalies {
margin-left: -50px;
.icon-bar {
left: 60px;
width: $nav-menu-side/6*4;
}
+ ul {
border-top-width: 3px;

View File

@ -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)');
}

View File

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

View File

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

View File

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

View File

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

View File

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