Skip to content

Commit 0d831a9

Browse files
mrholekmrholek
committed
refactor(Sidebar): update CSS Variables
1 parent 6dc789c commit 0d831a9

File tree

3 files changed

+67
-40
lines changed

3 files changed

+67
-40
lines changed

‎docs/content/components/sidebar.md

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,8 +129,15 @@ mySidebar.addEventListener('closed.coreui.sidebar', function () {
129129

130130
## Customizing
131131

132-
### SASS
132+
### CSS variables
133+
134+
Sidebars use local CSS variables on `.sidebar` and `.sidebar-backdrop` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
135+
136+
{{< scss-docs name="sidebar-css-vars" file="scss/sidebar/_sidebar.scss" >}}
137+
138+
{{< scss-docs name="sidebar-backdrop-css-vars" file="scss/sidebar/_sidebar.scss" >}}
139+
140+
### SASS variables
141+
133142
{{< scss-docs name="sidebar-variables" file="scss/_variables.scss" >}}
134143

135-
### CSS Vars
136-
{{< css-vars-docs file="scss/sidebar/_sidebar.scss" >}}

‎scss/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1178,6 +1178,7 @@ $form-validation-states: (
11781178
$zindex-dropdown: 1000 !default;
11791179
$zindex-sticky: 1020 !default;
11801180
$zindex-fixed: 1030 !default;
1181+
$zindex-sidebar-backdrop: 1030 !default;
11811182
$zindex-offcanvas-backdrop: 1040 !default;
11821183
$zindex-offcanvas: 1045 !default;
11831184
$zindex-modal-backdrop: 1050 !default;
@@ -1853,7 +1854,6 @@ $sidebar-narrow-width: 4rem !default;
18531854

18541855
$sidebar-backdrop-bg: $black !default;
18551856
$sidebar-backdrop-opacity: .5 !default;
1856-
$sidebar-backdrop-transition: opacity .15s linear !default;
18571857

18581858
$sidebar-nav-title-padding-y: .75rem !default;
18591859
$sidebar-nav-title-padding-x: 1rem !default;

‎scss/sidebar/_sidebar.scss

Lines changed: 56 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,29 @@
11
.sidebar {
2+
// scss-docs-start sidebar-css-vars
23
--#{$prefix}sidebar-width: #{$sidebar-width};
4+
--#{$prefix}sidebar-bg: #{$sidebar-bg};
5+
--#{$prefix}sidebar-color: #{$sidebar-color};
6+
--#{$prefix}sidebar-border-width: #{$sidebar-border-width};
7+
--#{$prefix}sidebar-border-color: #{$sidebar-border-color};
8+
--#{$prefix}sidebar-brand-color: #{$sidebar-brand-color};
9+
--#{$prefix}sidebar-brand-height: #{$sidebar-brand-height};
10+
--#{$prefix}sidebar-brand-bg: #{$sidebar-brand-bg};
11+
--#{$prefix}sidebar-header-height: #{$sidebar-header-height};
12+
--#{$prefix}sidebar-header-bg: #{$sidebar-header-bg};
13+
--#{$prefix}sidebar-header-padding-x: #{$sidebar-header-padding-x};
14+
--#{$prefix}sidebar-header-padding-y: #{$sidebar-header-padding-y};
15+
--#{$prefix}sidebar-footer-bg: #{$sidebar-footer-bg};
16+
--#{$prefix}sidebar-footer-height: #{$sidebar-footer-height};
17+
--#{$prefix}sidebar-footer-padding-x: #{$sidebar-footer-padding-x};
18+
--#{$prefix}sidebar-footer-padding-y: #{$sidebar-footer-padding-y};
19+
--#{$prefix}sidebar-toggler-bg: #{$sidebar-toggler-bg};
20+
--#{$prefix}sidebar-toggler-height: #{$sidebar-toggler-height};
21+
--#{$prefix}sidebar-toggler-indicator: escape-svg($sidebar-toggler-indicator-icon);
22+
--#{$prefix}sidebar-toggler-indicator-width: #{$sidebar-toggler-indicator-width};
23+
--#{$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+
// scss-docs-end sidebar-css-vars
327

428
position: relative;
529
display: flex;
@@ -10,9 +34,9 @@
1034
order: -1;
1135
width: var(--#{$prefix}sidebar-width);
1236
padding: $sidebar-padding-y $sidebar-padding-x;
13-
color: var(--#{$prefix}sidebar-color, $sidebar-color);
14-
background: var(--#{$prefix}sidebar-bg, $sidebar-bg);
15-
@include ltr-rtl("border-right", var(--#{$prefix}sidebar-border-width, $sidebar-border-width) solid var(--#{$prefix}sidebar-border-color, $sidebar-border-color));
37+
color: var(--#{$prefix}sidebar-color);
38+
background: var(--#{$prefix}sidebar-bg);
39+
@include ltr-rtl("border-right", var(--#{$prefix}sidebar-border-width) solid var(--#{$prefix}sidebar-border-color));
1640
box-shadow: none;
1741
@include transition($sidebar-transition);
1842

@@ -151,9 +175,9 @@
151175
position: absolute;
152176
top: 0;
153177
@include ltr-rtl("right", 0);
154-
width: $sidebar-brand-height;
155-
height: $sidebar-header-height;
156-
color: var(--#{$prefix}sidebar-color, $sidebar-color);
178+
width: var(--#{$prefix}sidebar-width);
179+
height: var(--#{$prefix}sidebar-header-height);
180+
color: var(--#{$prefix}sidebar-color);
157181
background: transparent;
158182
border: 0;
159183

@@ -168,46 +192,46 @@
168192

169193
.sidebar-brand {
170194
display: flex;
171-
flex: 0 0 $sidebar-brand-height;
195+
flex: 0 0 var(--#{$prefix}sidebar-brand-height);
172196
align-items: center;
173197
justify-content: center;
174-
color: var(--#{$prefix}sidebar-brand-color, $sidebar-brand-color);
175-
background: var(--#{$prefix}sidebar-brand-bg, $sidebar-brand-bg);
198+
color: var(--#{$prefix}sidebar-brand-color);
199+
background: var(--#{$prefix}sidebar-brand-bg);
176200

177201
.sidebar-brand-narrow {
178202
display: none;
179203
}
180204
}
181205

182206
.sidebar-header {
183-
flex: 0 0 $sidebar-header-height;
184-
padding: $sidebar-header-padding-y $sidebar-header-padding-x;
207+
flex: 0 0 var(--#{$prefix}sidebar-header-height);
208+
padding: var(--#{$prefix}sidebar-header-padding-y) var(--#{$prefix}sidebar-header-padding-x);
185209
text-align: center;
186-
background: var(--#{$prefix}sidebar-header-bg, $sidebar-header-bg);
210+
background: var(--#{$prefix}sidebar-header-bg);
187211
@include transition($sidebar-header-height-transition);
188212

189213
.nav-link {
190214
display: flex;
191215
align-items: center;
192-
min-height: $sidebar-header-height;
216+
min-height: var(--#{$prefix}sidebar-header-height);
193217
}
194218
}
195219

196220
.sidebar-footer {
197-
flex: 0 0 $sidebar-footer-height;
198-
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
199-
background: var(--#{$prefix}sidebar-footer-bg, $sidebar-footer-bg);
221+
flex: 0 0 var(--#{$prefix}sidebar-footer-height);
222+
padding: var(--#{$prefix}sidebar-footer-padding-y) var(--#{$prefix}sidebar-footer-padding-x);
223+
background: var(--#{$prefix}sidebar-footer-bg);
200224
@include transition($sidebar-footer-height-transition);
201225
}
202226

203227
.sidebar-toggler {
204228
display: flex;
205-
flex: 0 0 $sidebar-toggler-height;
229+
flex: 0 0 var(--#{$prefix}sidebar-toggler-height);
206230
justify-content: flex-end;
207231
width: inherit;
208232
padding: 0;
209233
cursor: pointer;
210-
background-color: var(--#{$prefix}sidebar-toggler-bg, $sidebar-toggler-bg);
234+
background-color: var(--#{$prefix}sidebar-toggler-bg);
211235
border: 0;
212236

213237
@include media-breakpoint-down($mobile-breakpoint) {
@@ -216,13 +240,13 @@
216240

217241
&::before {
218242
display: block;
219-
width: $sidebar-toggler-indicator-width;
220-
height: $sidebar-toggler-indicator-height;
243+
width: var(--#{$prefix}sidebar-toggler-indicator-width);
244+
height: var(--#{$prefix}sidebar-toggler-indicator-height);
221245
content: "";
222-
background-image: var(--#{$prefix}sidebar-toggler-indicator, escape-svg($sidebar-toggler-indicator-icon));
246+
background-image: var(--#{$prefix}sidebar-toggler-indicator);
223247
background-repeat: no-repeat;
224248
background-position: center;
225-
background-size: $sidebar-toggler-indicator-height * .25;
249+
background-size: calc(var(--#{$prefix}sidebar-toggler-indicator-height) * .25); // stylelint-disable-line function-disallowed-list
226250
@include transition($sidebar-toggler-transition);
227251
@include rtl() {
228252
transform: rotate(-180deg);
@@ -234,9 +258,9 @@
234258
}
235259

236260
&:hover {
237-
background-color: var(--#{$prefix}sidebar-toggler-hover-bg, $sidebar-toggler-hover-bg);
261+
background-color: var(--#{$prefix}sidebar-toggler-hover-bg);
238262
&::before {
239-
background-image: var(--#{$prefix}sidebar-toggler-indicator-hover, escape-svg($sidebar-toggler-indicator-hover-icon));
263+
background-image: var(--#{$prefix}sidebar-toggler-indicator-hover);
240264
}
241265
}
242266

@@ -249,19 +273,15 @@
249273
}
250274

251275
// Backdrop background
276+
252277
.sidebar-backdrop {
278+
// scss-docs-start sidebar-backdrop-css-vars
279+
--#{$prefix}backdrop-zindex: #{$zindex-sidebar-backdrop};
280+
--#{$prefix}backdrop-bg: #{$sidebar-backdrop-bg};
281+
--#{$prefix}backdrop-opacity: #{$sidebar-backdrop-opacity};
282+
// scss-docs-end sidebar-backdrop-css-vars
283+
253284
@include media-breakpoint-down($mobile-breakpoint) {
254-
position: fixed;
255-
top: 0;
256-
@include ltr-rtl("left", 0);
257-
z-index: $zindex-fixed;
258-
width: 100vw;
259-
height: 100vh;
260-
background-color: $sidebar-backdrop-bg;
261-
@include transition($sidebar-backdrop-transition);
262-
263-
// Fade for backdrop
264-
&.fade { opacity: 0; }
265-
&.show { opacity: $sidebar-backdrop-opacity; }
285+
@include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
266286
}
267287
}

0 commit comments

Comments
 (0)