steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-17 00:22:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Display nav-list-expander on the right side

Browse Source 
(cherry picked from commit 2d6e97e0cbfb8bdcf87a2e5ad19bd59fc8f5405d)
This commit is contained in:
Silvio Giebl 2019-08-11 23:54:51 +02:00
parent e13a62b7b5
commit 52bcb26ddd
2 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
_sass/navigation.scss
View File

@ -22,14 +22,25 @@
min-height: $nav-list-item-height-sm; min-height: $nav-list-item-height-sm;
line-height: #{$nav-list-item-height-sm - 2 * $sp-1}; line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
padding-top: $sp-1; padding-top: $sp-1;
padding-right: $gutter-spacing-sm;
padding-bottom: $sp-1; 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) { @include mq(md) {
min-height: $nav-list-item-height; min-height: $nav-list-item-height;
line-height: #{$nav-list-item-height - 2 * $sp-1}; 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 { &.active {
@ -45,6 +56,9 @@
.nav-list-expander { .nav-list-expander {
position: absolute; position: absolute;
@if $nav-list-expander-right {
right: 0;
}
width: $nav-list-item-height-sm; width: $nav-list-item-height-sm;
height: $nav-list-item-height-sm; height: $nav-list-item-height-sm;
padding-top: #{$nav-list-item-height-sm / 4}; padding-top: #{$nav-list-item-height-sm / 4};
@ -65,6 +79,12 @@
&:hover { &:hover {
background-color: $feedback-color; background-color: $feedback-color;
} }
@if $nav-list-expander-right {
svg {
transform: rotate(90deg);
}
}
} }
> .nav-list { > .nav-list {
@ -78,12 +98,20 @@
.nav-list-link { .nav-list-link {
color: $nav-child-link-color; color: $nav-child-link-color;
} }
.nav-list-expander {
fill: $nav-child-link-color;
}
} }
} }
&.active { &.active {
> .nav-list-expander svg { > .nav-list-expander svg {
transform: rotate(90deg); @if $nav-list-expander-right {
transform: rotate(-90deg);
} @else {
transform: rotate(90deg);
}
} }
> .nav-list { > .nav-list {

1
_sass/support/_variables.scss
View File

@ -115,6 +115,7 @@ $nav-width: 264px !default;
$nav-width-md: 248px !default; $nav-width-md: 248px !default;
$nav-list-item-height: $sp-6 !default; $nav-list-item-height: $sp-6 !default;
$nav-list-item-height-sm: $sp-8 !default; $nav-list-item-height-sm: $sp-8 !default;
$nav-list-expander-right: true;
$content-width: 800px !default; $content-width: 800px !default;
$header-height: 60px !default; $header-height: 60px !default;
$search-results-width: 500px !default; $search-results-width: 500px !default;