diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 6a60926..050667b 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 ad8cdd1..026b91f 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;