Skip to content

Commit 098c0ac

Browse files
mrholekmrholek
committed
refactor(Sidebar): update CSS Variables
1 parent c5c9540 commit 098c0ac

File tree

4 files changed

+80
-42
lines changed

4 files changed

+80
-42
lines changed

‎scss/_variables.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1865,6 +1865,9 @@ $sidebar-nav-link-padding-y: .8445rem !default;
18651865
$sidebar-nav-link-padding-x: 1rem !default;
18661866
$sidebar-nav-link-color: $medium-emphasis-inverse !default;
18671867
$sidebar-nav-link-bg: transparent !default;
1868+
$sidebar-nav-link-border-width: 0 !default;
1869+
$sidebar-nav-link-border-color: transparent !default;
1870+
$sidebar-nav-link-border-radius: 0 !default;
18681871
$sidebar-nav-link-transition: background .15s ease, color .15s ease !default;
18691872
$sidebar-nav-link-icon-color: $medium-emphasis-inverse !default;
18701873

‎scss/sidebar/_sidebar-narrow.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
%sidebar-narrow {
22
@include media-breakpoint-up($mobile-breakpoint) {
33
z-index: $zindex-fixed + 1;
4-
flex: 0 0 $sidebar-narrow-width;
5-
width: $sidebar-narrow-width;
6-
padding-bottom: $sidebar-toggler-height;
4+
flex: 0 0 var(--#{$prefix}sidebar-narrow-width);
5+
width: var(--#{$prefix}sidebar-narrow-width);
6+
padding-bottom: var(--#{$prefix}sidebar-toggler-height);
77
overflow: visible;
88

99
&.sidebar-fixed {
1010
z-index: $zindex-fixed + 1;
11-
width: $sidebar-narrow-width;
11+
width: var(--#{$prefix}sidebar-narrow-width);
1212
}
1313

1414
.sidebar-brand-full {
@@ -95,10 +95,10 @@
9595
&.sidebar-narrow,
9696
&.sidebar-narrow-unfoldable {
9797
&:not(.sidebar-end) {
98-
@include ltr-rtl("margin-left", - $sidebar-narrow-width);
98+
@include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
9999
}
100100
&.sidebar-end {
101-
@include ltr-rtl("margin-right", - $sidebar-narrow-width);
101+
@include ltr-rtl("margin-right", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
102102
}
103103
}
104104
}

‎scss/sidebar/_sidebar-nav.scss

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@
1212
list-style: none;
1313

1414
.nav-title {
15-
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
16-
margin-top: $sidebar-nav-title-margin-top;
15+
padding: var(--#{$prefix}sidebar-nav-title-padding-y) var(--#{$prefix}sidebar-nav-title-padding-x);
16+
margin-top: var(--#{$prefix}sidebar-nav-title-margin-top);
1717
font-size: 80%;
1818
font-weight: 700;
19-
color: var(--#{$prefix}sidebar-nav-title-color, $sidebar-nav-title-color);
19+
color: var(--#{$prefix}sidebar-nav-title-color);
2020
text-transform: uppercase;
2121
@include transition($sidebar-nav-title-transition);
2222
}
@@ -25,73 +25,75 @@
2525
display: flex;
2626
flex: 1;
2727
align-items: center;
28-
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
29-
color: var(--#{$prefix}sidebar-nav-link-color, $sidebar-nav-link-color);
28+
padding: var(--#{$prefix}sidebar-nav-link-padding-y) var(--#{$prefix}sidebar-nav-link-padding-x);
29+
color: var(--#{$prefix}sidebar-nav-link-color);
3030
text-decoration: none;
3131
white-space: nowrap;
32-
background: var(--#{$prefix}sidebar-nav-link-bg, $sidebar-nav-link-bg);
32+
background: var(--#{$prefix}sidebar-nav-link-bg);
33+
border: var(--#{$prefix}sidebar-nav-link-border);
34+
@include border-radius(var(--#{$prefix}sidebar-nav-link-border-radius));
3335
@include transition($sidebar-nav-link-transition);
3436

3537
&.active {
36-
color: var(--#{$prefix}sidebar-nav-link-active-color, $sidebar-nav-link-active-color);
37-
background: var(--#{$prefix}sidebar-nav-link-active-bg, $sidebar-nav-link-active-bg);
38+
color: var(--#{$prefix}sidebar-nav-link-active-color);
39+
background: var(--#{$prefix}sidebar-nav-link-active-bg);
3840

3941
.nav-icon {
40-
color: var(--#{$prefix}sidebar-nav-link-active-icon-color, $sidebar-nav-link-active-icon-color);
42+
color: var(--#{$prefix}sidebar-nav-link-active-icon-color);
4143
}
4244
}
4345

4446
&.disabled {
45-
color: var(--#{$prefix}sidebar-nav-link-disabled-color, $sidebar-nav-link-disabled-color);
47+
color: var(--#{$prefix}sidebar-nav-link-disabled-color);
4648
pointer-events: none;
4749
cursor: not-allowed;
4850
background: transparent;
4951

5052
.nav-icon {
51-
color: var(--#{$prefix}sidebar-nav-link-disabled-icon-color, $sidebar-nav-link-disabled-icon-color);
53+
color: var(--#{$prefix}sidebar-nav-link-disabled-icon-color);
5254
}
5355

5456
&:hover {
55-
color: var(--#{$prefix}sidebar-nav-link-disabled-color, $sidebar-nav-link-disabled-color);
57+
color: var(--#{$prefix}sidebar-nav-link-disabled-color);
5658

5759
.nav-icon {
58-
color: var(--#{$prefix}sidebar-nav-link-disabled-icon-color, $sidebar-nav-link-disabled-icon-color);
60+
color: var(--#{$prefix}sidebar-nav-link-disabled-icon-color);
5961
}
6062

6163
&.nav-dropdown-toggle::after {
62-
background-image: var(--#{$prefix}sidebar-nav-group-indicator-hover, escape-svg($sidebar-nav-group-indicator-hover-icon));
64+
background-image: var(--#{$prefix}sidebar-nav-group-indicator-hover);
6365
}
6466
}
6567
}
6668

6769
@media (hover: hover), (-ms-high-contrast: none) {
6870
&:hover {
69-
color: var(--#{$prefix}sidebar-nav-link-hover-color, $sidebar-nav-link-hover-color);
71+
color: var(--#{$prefix}sidebar-nav-link-hover-color);
7072
text-decoration: none;
71-
background: var(--#{$prefix}sidebar-nav-link-hover-bg, $sidebar-nav-link-hover-bg);
73+
background: var(--#{$prefix}sidebar-nav-link-hover-bg);
7274

7375
.nav-icon {
74-
color: var(--#{$prefix}sidebar-nav-link-hover-icon-color, $sidebar-nav-link-hover-icon-color);
76+
color: var(--#{$prefix}sidebar-nav-link-hover-icon-color);
7577
}
7678

7779
&.nav-group-toggle::after {
78-
background-image: var(--#{$prefix}sidebar-nav-group-indicator-hover, escape-svg($sidebar-nav-group-indicator-hover-icon));
80+
background-image: var(--#{$prefix}sidebar-nav-group-indicator-hover);
7981
}
8082
}
8183
}
8284
}
8385

8486
.nav-icon {
85-
flex: 0 0 $sidebar-nav-icon-width;
86-
height: $sidebar-nav-icon-height;
87-
font-size: $sidebar-nav-icon-font-size;
88-
color: var(--#{$prefix}sidebar-nav-link-icon-color, $sidebar-nav-link-icon-color);
87+
flex: 0 0 var(--#{$prefix}sidebar-nav-icon-width);
88+
height: var(--#{$prefix}sidebar-nav-icon-height);
89+
font-size: var(--#{$prefix}sidebar-nav-icon-font-size);
90+
color: var(--#{$prefix}sidebar-nav-link-icon-color);
8991
text-align: center;
9092
fill: currentColor;
9193
@include transition(inherit);
9294

9395
&:first-child {
94-
@include ltr-rtl("margin-left", - $sidebar-nav-link-padding-x);
96+
@include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-nav-link-padding-x) * -1));
9597
}
9698
}
9799

@@ -100,7 +102,7 @@
100102
@include transition($sidebar-nav-group-transition);
101103

102104
.nav-group-items {
103-
padding: $sidebar-nav-group-items-padding-y $sidebar-nav-group-items-padding-x;
105+
padding: var(--#{$prefix}sidebar-nav-group-items-padding-y) var(--#{$prefix}sidebar-nav-group-items-padding-x);
104106
overflow: hidden;
105107
@include transition($sidebar-nav-group-items-transition);
106108
}
@@ -110,10 +112,10 @@
110112
}
111113

112114
&.show {
113-
background: var(--#{$prefix}sidebar-nav-group-bg, $sidebar-nav-group-bg);
115+
background: var(--#{$prefix}sidebar-nav-group-bg);
114116

115117
.nav-group-toggle {
116-
color: var(--#{$prefix}sidebar-nav-group-toggle-show-color, $sidebar-nav-group-toggle-show-color);
118+
color: var(--#{$prefix}sidebar-nav-group-toggle-show-color);
117119
}
118120

119121
> .nav-group-toggle::after {
@@ -135,7 +137,7 @@
135137
height: 12px;
136138
@include ltr-rtl("margin-left", auto);
137139
content: "";
138-
background-image: var(--#{$prefix}sidebar-nav-group-indicator, escape-svg($sidebar-nav-group-indicator-icon));
140+
background-image: var(--#{$prefix}sidebar-nav-group-indicator);
139141
background-repeat: no-repeat;
140142
background-position: center;
141143
@include transition($sidebar-nav-group-indicator-transition);
@@ -144,23 +146,22 @@
144146

145147
.nav-group-items {
146148
padding: 0;
147-
// overflow-y: hidden;
148149
list-style: none;
149150

150151
.nav-link {
151-
@include ltr-rtl("padding-left", $sidebar-nav-icon-width);
152+
@include ltr-rtl("padding-left", var(--#{$prefix}sidebar-nav-icon-width));
152153

153154
.nav-icon {
154-
@include ltr-rtl("margin-left", - $sidebar-nav-icon-width);
155+
@include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-nav-icon-width) * -1));
155156
}
156157
}
157158
}
158159

159160
&.compact,
160161
.compact {
161162
.nav-link {
162-
padding-top: $sidebar-nav-link-padding-y * .5;
163-
padding-bottom: $sidebar-nav-link-padding-y * .5;
163+
padding-top: calc(var(--#{$prefix}sidebar-nav-link-padding-y) * .5); // stylelint-disable-line function-disallowed-list
164+
padding-bottom: calc(var(--#{$prefix}sidebar-nav-link-padding-y) * .5); // stylelint-disable-line function-disallowed-list
164165
}
165166
}
166167
}

‎scss/sidebar/_sidebar.scss

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
// scss-docs-start sidebar-css-vars
33
--#{$prefix}sidebar-width: #{$sidebar-width};
44
--#{$prefix}sidebar-bg: #{$sidebar-bg};
5+
--#{$prefix}sidebar-padding-x: #{$sidebar-padding-x};
6+
--#{$prefix}sidebar-padding-y: #{$sidebar-padding-y};
57
--#{$prefix}sidebar-color: #{$sidebar-color};
68
--#{$prefix}sidebar-border-width: #{$sidebar-border-width};
79
--#{$prefix}sidebar-border-color: #{$sidebar-border-color};
@@ -18,11 +20,43 @@
1820
--#{$prefix}sidebar-footer-padding-y: #{$sidebar-footer-padding-y};
1921
--#{$prefix}sidebar-toggler-bg: #{$sidebar-toggler-bg};
2022
--#{$prefix}sidebar-toggler-height: #{$sidebar-toggler-height};
21-
--#{$prefix}sidebar-toggler-indicator: escape-svg($sidebar-toggler-indicator-icon);
23+
--#{$prefix}sidebar-toggler-indicator: #{escape-svg($sidebar-toggler-indicator-icon)};
2224
--#{$prefix}sidebar-toggler-indicator-width: #{$sidebar-toggler-indicator-width};
2325
--#{$prefix}sidebar-toggler-indicator-height: #{$sidebar-toggler-indicator-height};
24-
--#{$prefix}sidebar-toggler-hover-bg: $sidebar-toggler-hover-bg;
25-
--#{$prefix}sidebar-toggler-indicator-hover: escape-svg($sidebar-toggler-indicator-hover-icon);
26+
--#{$prefix}sidebar-toggler-hover-bg: #{$sidebar-toggler-hover-bg};
27+
--#{$prefix}sidebar-toggler-indicator-hover: #{escape-svg($sidebar-toggler-indicator-hover-icon)};
28+
29+
--#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
30+
31+
--#{$prefix}sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};
32+
--#{$prefix}sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};
33+
--#{$prefix}sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};
34+
--#{$prefix}sidebar-nav-title-color: #{$sidebar-nav-title-color};
35+
--#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x};
36+
--#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y};
37+
--#{$prefix}sidebar-nav-link-color: #{$sidebar-nav-link-color};
38+
--#{$prefix}sidebar-nav-link-bg: #{$sidebar-nav-link-bg};
39+
--#{$prefix}sidebar-nav-link-border-color: #{$sidebar-nav-link-border-color};
40+
--#{$prefix}sidebar-nav-link-border: #{$sidebar-nav-link-border-width} solid var(--#{$prefix}sidebar-nav-link-border-color);
41+
--#{$prefix}sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius};
42+
--#{$prefix}sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color};
43+
--#{$prefix}sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg};
44+
--#{$prefix}sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color};
45+
--#{$prefix}sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color};
46+
--#{$prefix}sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color};
47+
--#{$prefix}sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color};
48+
--#{$prefix}sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg};
49+
--#{$prefix}sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color};
50+
--#{$prefix}sidebar-nav-icon-width: #{$sidebar-nav-icon-width};
51+
--#{$prefix}sidebar-nav-icon-height: #{$sidebar-nav-icon-height};
52+
--#{$prefix}sidebar-nav-icon-font-size: #{$sidebar-nav-icon-font-size};
53+
--#{$prefix}sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};
54+
--#{$prefix}sidebar-nav-group-bg: #{$sidebar-nav-group-bg};
55+
--#{$prefix}sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};
56+
--#{$prefix}sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};
57+
--#{$prefix}sidebar-nav-group-indicator: #{escape-svg($sidebar-nav-group-indicator-icon)};
58+
--#{$prefix}sidebar-nav-group-indicator-hover: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};
59+
--#{$prefix}sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};
2660
// scss-docs-end sidebar-css-vars
2761

2862
position: relative;
@@ -33,7 +67,7 @@
3367
// put the nav on the left
3468
order: -1;
3569
width: var(--#{$prefix}sidebar-width);
36-
padding: $sidebar-padding-y $sidebar-padding-x;
70+
padding: var(--#{$prefix}sidebar-padding-y) var(--#{$prefix}sidebar-padding-x);
3771
color: var(--#{$prefix}sidebar-color);
3872
background: var(--#{$prefix}sidebar-bg);
3973
@include ltr-rtl("border-right", var(--#{$prefix}sidebar-border-width) solid var(--#{$prefix}sidebar-border-color));

0 commit comments

Comments
 (0)