From 52bcb26ddd1c86a0d3ace257d821ea99919f572c Mon Sep 17 00:00:00 2001
From: Silvio Giebl <silvio.giebl@hivemq.com>
Date: Sun, 11 Aug 2019 23:54:51 +0200
Subject: [PATCH] Display nav-list-expander on the right side
(cherry picked from commit 2d6e97e0cbfb8bdcf87a2e5ad19bd59fc8f5405d)
---
_sass/navigation.scss | 36 +++++++++++++++++++++++++++++++----
_sass/support/_variables.scss | 1 +
2 files changed, 33 insertions(+), 4 deletions(-)
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 6a609264..050667b9 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -22,14 +22,25 @@
min-height: $nav-list-item-height-sm;
line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
padding-top: $sp-1;
- padding-right: $gutter-spacing-sm;
padding-bottom: $sp-1;
- padding-left: $nav-list-item-height-sm;
+ @if $nav-list-expander-right {
+ padding-right: $nav-list-item-height-sm;
+ padding-left: $gutter-spacing-sm;
+ } @else {
+ padding-right: $gutter-spacing-sm;
+ padding-left: $nav-list-item-height-sm;
+ }
@include mq(md) {
min-height: $nav-list-item-height;
line-height: #{$nav-list-item-height - 2 * $sp-1};
- padding-left: $nav-list-item-height;
+ @if $nav-list-expander-right {
+ padding-right: $nav-list-item-height;
+ padding-left: $gutter-spacing;
+ } @else {
+ padding-right: $gutter-spacing;
+ padding-left: $nav-list-item-height;
+ }
}
&.active {
@@ -45,6 +56,9 @@
.nav-list-expander {
position: absolute;
+ @if $nav-list-expander-right {
+ right: 0;
+ }
width: $nav-list-item-height-sm;
height: $nav-list-item-height-sm;
padding-top: #{$nav-list-item-height-sm / 4};
@@ -65,6 +79,12 @@
&:hover {
background-color: $feedback-color;
}
+
+ @if $nav-list-expander-right {
+ svg {
+ transform: rotate(90deg);
+ }
+ }
}
> .nav-list {
@@ -78,12 +98,20 @@
.nav-list-link {
color: $nav-child-link-color;
}
+
+ .nav-list-expander {
+ fill: $nav-child-link-color;
+ }
}
}
&.active {
> .nav-list-expander svg {
- transform: rotate(90deg);
+ @if $nav-list-expander-right {
+ transform: rotate(-90deg);
+ } @else {
+ transform: rotate(90deg);
+ }
}
> .nav-list {
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index ad8cdd1e..026b91f8 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -115,6 +115,7 @@ $nav-width: 264px !default;
$nav-width-md: 248px !default;
$nav-list-item-height: $sp-6 !default;
$nav-list-item-height-sm: $sp-8 !default;
+$nav-list-expander-right: true;
$content-width: 800px !default;
$header-height: 60px !default;
$search-results-width: 500px !default;
--
GitLab