Skip to content

Commit 98a2d46

Browse files
mrholekmrholek
committed
refactor(Sidebar): rewrite component styles
1 parent 7a76f28 commit 98a2d46

File tree

4 files changed

+89
-147
lines changed

4 files changed

+89
-147
lines changed

‎docs/content/components/sidebar.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,8 @@ Sidebars use local CSS variables on `.sidebar`, `.sidebar-backdrop`, `.sidebar-n
297297

298298
{{< scss-docs name="sidebar-narrow-css-vars" file="scss/sidebar/_sidebar-narrow.scss" >}}
299299

300+
{{< scss-docs name="sidebar-narrow-unfoldable-css-vars" file="scss/sidebar/_sidebar-narrow.scss" >}}
301+
300302
{{< scss-docs name="sidebar-nav-css-vars" file="scss/sidebar/_sidebar-nav.scss" >}}
301303

302304
{{< scss-docs name="sidebar-toggler-css-vars" file="scss/sidebar/_sidebar.scss" >}}

‎scss/_variables.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1898,6 +1898,7 @@ $sidebar-brand-bg: rgba($black, .2) !default;
18981898
$sidebar-backdrop-bg: $black !default;
18991899
$sidebar-backdrop-opacity: .5 !default;
19001900
$sidebar-overlaid-box-shadow: var(--#{$prefix}box-shadow) !default;
1901+
$sidebar-narrow-unfoldable-box-shadow: var(--#{$prefix}box-shadow) !default;
19011902
// scss-docs-end sidebar-variables
19021903

19031904
// scss-docs-start sidebar-nav-variables
@@ -1982,7 +1983,7 @@ $sidebar-toggler-icon: url("data:image/svg+xml,%0A%3Csvg xmlns='htt
19821983
$sidebar-toggler-focus-shadow: $focus-ring-box-shadow !default;
19831984
$sidebar-toggler-hover-color: var(--#{$prefix}secondary-color) !default;
19841985
$sidebar-toggler-focus-color: var(--#{$prefix}secondary-color) !default;
1985-
$sidebar-toggler-transition: transform .15s !default;
1986+
$sidebar-toggler-transition: transform .15s !default;
19861987
// scss-docs-end sidebar-toggler
19871988

19881989
// Footer

‎scss/sidebar/_sidebar-narrow.scss‎

Lines changed: 19 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
%sidebar-narrow {
1+
.sidebar-narrow {
22
// scss-docs-start sidebar-narrow-css-vars
33
--#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
44
// scss-docs-end sidebar-narrow-css-vars
@@ -9,10 +9,6 @@
99
padding-bottom: var(--#{$prefix}sidebar-toggler-height);
1010
overflow: visible;
1111

12-
&.sidebar-fixed {
13-
width: var(--#{$prefix}sidebar-narrow-width);
14-
}
15-
1612
.sidebar-brand-full {
1713
display: none;
1814
}
@@ -32,6 +28,10 @@
3228
--#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};
3329
}
3430

31+
.nav-link {
32+
overflow: hidden;
33+
}
34+
3535
.nav-icon {
3636
flex: 0 0 calc(var(--#{$prefix}sidebar-narrow-width) - (var(--#{$prefix}sidebar-nav-padding-x) * 2) - (var(--#{$prefix}sidebar-nav-link-padding-x) * 2)); // stylelint-disable-line function-disallowed-list
3737
}
@@ -59,35 +59,19 @@
5959
}
6060
}
6161

62-
.sidebar-narrow {
63-
@extend %sidebar-narrow;
64-
&:not(.sidebar-end) ~ * {
65-
--#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
66-
}
67-
&.sidebar-end ~ * {
68-
--#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
69-
}
70-
71-
.nav-link {
72-
overflow: hidden;
73-
}
74-
}
75-
7662
.sidebar-narrow-unfoldable {
77-
position: fixed;
63+
// scss-docs-start sidebar-narrow-unfoldable-css-vars
64+
--#{$prefix}sidebar-narrow-unfoldable-box-shadow: #{$sidebar-narrow-unfoldable-box-shadow};
65+
// scss-docs-end sidebar-narrow-unfoldable-css-vars
7866

79-
&:not(.sidebar-end) ~ * {
80-
--#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
81-
}
82-
&.sidebar-end ~ * {
83-
--#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important
84-
}
67+
@extend .sidebar-fixed;
8568

8669
&:not(:hover) {
87-
@extend %sidebar-narrow;
70+
@extend .sidebar-narrow;
8871
}
8972

9073
&:hover {
74+
box-shadow: var(--#{$prefix}sidebar-narrow-unfoldable-box-shadow);
9175
box-shadow: $box-shadow;
9276

9377
.sidebar-toggler::before {
@@ -98,26 +82,16 @@
9882
transform: rotate(0deg);
9983
}
10084
}
101-
102-
.nav-link {
103-
overflow: hidden;
104-
}
10585
}
10686

107-
// Responsive behavior
108-
@each $breakpoint in map-keys($grid-breakpoints) {
109-
@include media-breakpoint-down($breakpoint) {
110-
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
111-
.sidebar:not(.show).sidebar-self-hiding#{$infix} {
112-
&.sidebar-narrow,
113-
&.sidebar-narrow-unfoldable {
114-
&:not(.sidebar-end) {
115-
@include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
116-
}
117-
&.sidebar-end {
118-
@include ltr-rtl("margin-right", calc(var(--#{$prefix}sidebar-narrow-width) * -1));
119-
}
120-
}
87+
.sidebar-narrow,
88+
.sidebar-narrow-unfoldable {
89+
@include media-breakpoint-up($mobile-breakpoint) {
90+
&:not(.sidebar-end):not(.hide) ~ * {
91+
--#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width};
92+
}
93+
&.sidebar-end:not(.hide) ~ * {
94+
--#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
12195
}
12296
}
12397
}

‎scss/sidebar/_sidebar.scss‎

Lines changed: 66 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
// stylelint-disable function-disallowed-list
2-
32
.sidebar {
43
// scss-docs-start sidebar-css-vars
54
--#{$prefix}sidebar-zindex: #{$zindex-sidebar};
@@ -24,152 +23,118 @@
2423
box-shadow: none;
2524
@include transition($sidebar-transition);
2625

27-
&.sidebar-fixed,
28-
&.sidebar-narrow,
29-
&.sidebar-narrow-unfoldable,
30-
&.sidebar-overlaid {
31-
z-index: var(--#{$prefix}sidebar-zindex);
32-
}
33-
3426
&:not(.sidebar-end){
3527
@include ltr-rtl("margin-left", 0);
36-
~ * {
37-
--#{$prefix}sidebar-occupy-start: #{$sidebar-width};
38-
}
3928
}
4029

4130
&.sidebar-end {
4231
order: 99;
4332
@include ltr-rtl("margin-right", 0);
44-
~ * {
45-
--#{$prefix}sidebar-occupy-end: #{$sidebar-width};
46-
}
4733
}
4834

49-
@each $width, $value in $sidebar-widths {
50-
&.sidebar-#{$width} {
51-
--#{$prefix}sidebar-width: #{$value};
52-
@include media-breakpoint-up($mobile-breakpoint) {
53-
&:not(.sidebar-end):not(.hide) {
54-
~ * {
55-
--#{$prefix}sidebar-occupy-start: #{$value};
56-
}
57-
}
58-
&.sidebar-end:not(.hide) {
59-
~ * {
60-
--#{$prefix}sidebar-occupy-end: #{$value};
61-
}
62-
}
35+
@include media-breakpoint-up($mobile-breakpoint) {
36+
&:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid) {
37+
&:not(.sidebar-end) ~ * {
38+
--#{$prefix}sidebar-occupy-start: #{$sidebar-width};
39+
}
40+
&.sidebar-end ~ * {
41+
--#{$prefix}sidebar-occupy-end: #{$sidebar-width};
6342
}
6443
}
65-
}
6644

67-
@include media-breakpoint-up($mobile-breakpoint) {
6845
&.hide {
69-
&:not(.sidebar-end){
46+
&:not(.sidebar-end) {
7047
@include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
71-
~ * {
72-
--#{$prefix}sidebar-occupy-start: 0;
73-
}
7448
}
7549
&.sidebar-end {
7650
@include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
77-
~ * {
78-
--#{$prefix}sidebar-occupy-end: 0;
79-
}
80-
}
81-
}
82-
}
8351

84-
&.sidebar-fixed {
85-
@include media-breakpoint-up($mobile-breakpoint) {
86-
position: fixed;
87-
top: 0;
88-
bottom: 0;
89-
90-
&:not(.sidebar-end) {
91-
@include ltr-rtl("left", 0);
9252
}
93-
94-
&.sidebar-end {
95-
@include ltr-rtl("right", 0);
96-
}
97-
}
98-
}
99-
100-
&.sidebar-sticky {
101-
@include media-breakpoint-up($mobile-breakpoint) {
102-
position: sticky;
103-
top: 0;
104-
height: 100vh;
10553
}
10654
}
10755

108-
&.sidebar-overlaid {
109-
// scss-docs-start sidebar-overlaid-css-vars
110-
--#{$prefix}sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
111-
// scss-docs-end sidebar-overlaid-css-vars
56+
@include media-breakpoint-down($mobile-breakpoint) {
57+
// Some of our components use this property to detect if the sidebar has mobile behavior.
58+
--#{$prefix}is-mobile: true;
11259

11360
position: fixed;
11461
top: 0;
11562
bottom: 0;
63+
z-index: var(--#{$prefix}sidebar-zindex);
11664

117-
&:not(.sidebar-end){
65+
&:not(.sidebar-end) {
11866
@include ltr-rtl("left", 0);
119-
@include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
120-
~ * {
121-
--#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
67+
68+
&:not(.show) {
69+
@include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
12270
}
12371
}
12472

12573
&.sidebar-end {
12674
@include ltr-rtl("right", 0);
127-
@include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
128-
~ * {
129-
--#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
75+
76+
&:not(.show) {
77+
@include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
13078
}
13179
}
80+
}
81+
}
13282

133-
&.show {
134-
box-shadow: var(--#{$prefix}sidebar-overlaid-box-shadow);
83+
.sidebar-fixed {
84+
position: fixed;
85+
top: 0;
86+
bottom: 0;
87+
z-index: var(--#{$prefix}sidebar-zindex);
13588

136-
&:not(.sidebar-end) {
137-
@include ltr-rtl("margin-left", 0);
138-
}
89+
&:not(.sidebar-end) {
90+
@include ltr-rtl("left", 0);
91+
}
13992

140-
&.sidebar-end {
141-
@include ltr-rtl("margin-right", 0);
142-
}
143-
}
93+
&.sidebar-end {
94+
@include ltr-rtl("right", 0);
14495
}
96+
}
14597

146-
@include media-breakpoint-down($mobile-breakpoint) {
147-
// Some of our components use this property to detect if the sidebar has mobile behavior.
148-
--#{$prefix}is-mobile: true;
98+
.sidebar-overlaid {
99+
// scss-docs-start sidebar-overlaid-css-vars
100+
--#{$prefix}sidebar-overlaid-box-shadow: #{$sidebar-overlaid-box-shadow};
101+
// scss-docs-end sidebar-overlaid-css-vars
149102

150-
position: fixed;
151-
top: 0;
152-
bottom: 0;
153-
z-index: var(--#{$prefix}sidebar-zindex);
103+
@extend .sidebar-fixed;
154104

155-
&:not(.sidebar-end) {
156-
@include ltr-rtl("left", 0);
157-
~ * {
158-
--#{$prefix}sidebar-occupy-start: 0 !important; // stylelint-disable-line
159-
}
105+
&:not(.sidebar-end){
106+
@include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
107+
}
160108

161-
&:not(.show) {
162-
@include ltr-rtl("margin-left", calc(-1 * var(--#{$prefix}sidebar-width)));
163-
}
109+
&.sidebar-end {
110+
@include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
111+
}
112+
113+
&.show {
114+
box-shadow: var(--#{$prefix}sidebar-overlaid-box-shadow);
115+
116+
&:not(.sidebar-end) {
117+
@include ltr-rtl("margin-left", 0);
164118
}
119+
165120
&.sidebar-end {
166-
@include ltr-rtl("right", 0);
167-
~ * {
168-
--#{$prefix}sidebar-occupy-end: 0 !important; // stylelint-disable-line
169-
}
121+
@include ltr-rtl("margin-right", 0);
122+
}
123+
}
124+
}
170125

171-
&:not(.show) {
172-
@include ltr-rtl("margin-right", calc(-1 * var(--#{$prefix}sidebar-width)));
126+
@each $width, $value in $sidebar-widths {
127+
.sidebar-#{$width} {
128+
--#{$prefix}sidebar-width: #{$value};
129+
130+
@include media-breakpoint-up($mobile-breakpoint) {
131+
&:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid) {
132+
&:not(.sidebar-end) ~ * {
133+
--#{$prefix}sidebar-occupy-start: #{$value};
134+
}
135+
&.sidebar-end ~ * {
136+
--#{$prefix}sidebar-occupy-end: #{$value};
137+
}
173138
}
174139
}
175140
}

0 commit comments

Comments
 (0)