Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 98a2d46

Browse filesBrowse files
mrholekmrholek
committed
refactor(Sidebar): rewrite component styles
1 parent 7a76f28 commit 98a2d46
Copy full SHA for 98a2d46

File tree

Expand file treeCollapse file tree

4 files changed

+89
-147
lines changed
Filter options
Expand file treeCollapse file tree

4 files changed

+89
-147
lines changed

‎docs/content/components/sidebar.md

Copy file name to clipboardExpand all lines: docs/content/components/sidebar.md
+2Lines 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

Copy file name to clipboardExpand all lines: scss/_variables.scss
+2-1Lines 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

Copy file name to clipboard
+19-45Lines 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

Copy file name to clipboardExpand all lines: scss/sidebar/_sidebar.scss
+66-101Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.