Skip to content

Commit 5ff08af

Browse files
mrholekmrholek
committed
refactor(Sidebar): update sidebar themes
1 parent 1eeedb3 commit 5ff08af

File tree

3 files changed

+18
-11
lines changed

3 files changed

+18
-11
lines changed

‎scss/_variables.scss‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1926,17 +1926,23 @@ $sidebar-light-nav-link-active-icon-color: $high-emphasis !default;
19261926
$sidebar-light-nav-link-disabled-color: $disabled !default;
19271927
$sidebar-light-nav-link-disabled-icon-color: $sidebar-light-nav-link-icon-color !default;
19281928

1929-
$sidebar-light-nav-group-bg: rgba(0, 0, 0, .2) !default;
1929+
$sidebar-light-nav-group-bg: rgba(0, 0, 0, .05) !default;
19301930
$sidebar-light-nav-group-toggle-show-color: $sidebar-light-nav-link-color !default;
19311931

19321932
$sidebar-light-nav-group-indicator-color: $medium-emphasis !default;
1933-
$sidebar-light-nav-group-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-nav-group-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
1933+
$sidebar-light-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-light-nav-group-indicator-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
19341934
$sidebar-light-nav-group-indicator-hover-color: $sidebar-light-nav-link-hover-color !default;
1935-
$sidebar-light-nav-group-indicator-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-nav-group-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
1935+
$sidebar-light-nav-group-indicator-hover-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-light-nav-group-indicator-hover-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
19361936

1937-
$sidebar-light-footer-bg: rgba($black, .2) !default;
1937+
$sidebar-light-footer-bg: rgba($black, .1) !default;
1938+
1939+
$sidebar-light-toggler-bg: rgba($black, .1) !default;
1940+
$sidebar-light-toggler-indicator-color: $medium-emphasis !default;
1941+
$sidebar-light-toggler-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !default;
1942+
$sidebar-light-toggler-hover-bg: rgba(0, 0, 0, .2) !default;
1943+
$sidebar-light-toggler-hover-indicator-color: $sidebar-light-nav-link-hover-color !default;
1944+
$sidebar-light-toggler-hover-indicator-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-light-toggler-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !default;
19381945

1939-
$sidebar-light-toggler-bg: rgba($black, .2) !default;
19401946
// scss-docs-end sidebar-variables
19411947

19421948
// Footer

‎scss/sidebar/_sidebar.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,8 @@
248248
@include media-breakpoint-down(breakpoint-next($breakpoint)) {
249249
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
250250
.sidebar:not(.show).sidebar-self-hiding#{$infix} {
251+
@include elevation(0);
252+
251253
&:not(.sidebar-end) {
252254
@include ltr-rtl("margin-left", - $sidebar-width);
253255

@@ -302,10 +304,11 @@
302304
--#{$variable-prefix}sidebar-nav-link-disabled-icon-color: #{$sidebar-light-nav-link-disabled-icon-color};
303305
--#{$variable-prefix}sidebar-nav-group-bg: #{$sidebar-light-nav-group-bg};
304306
--#{$variable-prefix}sidebar-nav-group-toggle-show-color: #{$sidebar-light-nav-group-toggle-show-color};
305-
--#{$variable-prefix}sidebar-nav-group-indicator-color: #{$sidebar-light-nav-group-indicator-color};
306-
--#{$variable-prefix}sidebar-nav-group-indicator: #{$sidebar-light-nav-group-indicator};
307-
--#{$variable-prefix}sidebar-nav-group-indicator-hover-color: #{$sidebar-light-nav-group-indicator-hover-color};
308-
--#{$variable-prefix}sidebar-nav-group-indicator-hover: #{$sidebar-light-nav-group-indicator-hover};
307+
--#{$variable-prefix}sidebar-nav-group-indicator: #{$sidebar-light-nav-group-indicator-icon};
308+
--#{$variable-prefix}sidebar-nav-group-indicator-hover: #{$sidebar-light-nav-group-indicator-hover-icon};
309309
--#{$variable-prefix}sidebar-footer-bg: #{$sidebar-light-footer-bg};
310310
--#{$variable-prefix}sidebar-toggler-bg: #{$sidebar-light-toggler-bg};
311+
--#{$variable-prefix}sidebar-toggler-hover-bg: #{$sidebar-light-toggler-hover-bg};
312+
--#{$variable-prefix}sidebar-toggler-indicator: #{$sidebar-light-toggler-indicator-icon};
313+
--#{$variable-prefix}sidebar-toggler-hover-indicator: #{$sidebar-light-toggler-hover-indicator-icon};
311314
}

‎scss/themes/dark/_variables.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -626,8 +626,6 @@ $sidebar-footer-bg-dt: rgba($black, .2) !default;
626626
$sidebar-header-bg-dt: rgba($black, .2) !default;
627627
$sidebar-toggler-bg-dt: rgba($black, .2) !default;
628628
$sidebar-toggler-hover-bg-dt: rgba($black, .3) !default;
629-
// $sidebar-toggler-hover-indicator-dt: !default;
630-
// $sidebar-toggler-indicator-dt: !default;
631629
$sidebar-nav-title-color-dt: $medium-emphasis-dt !default;
632630
$sidebar-nav-link-color-dt: $medium-emphasis-dt !default;
633631
$sidebar-nav-link-bg-dt: transparent !default;

0 commit comments

Comments
 (0)