Skip to content

Commit 3fddc81

Browse files
mrholekmrholek
committed
refactor(Sidebar): improve styles
1 parent 97479c6 commit 3fddc81

File tree

4 files changed

+314
-243
lines changed

4 files changed

+314
-243
lines changed

‎scss/_variables.scss

Lines changed: 91 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -699,7 +699,7 @@ $small-font-size: .875em !default;
699699
$sub-sup-font-size: .75em !default;
700700

701701
// fusv-disable
702-
$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
702+
$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.0.0
703703
// fusv-enable
704704

705705
$initialism-font-size: $small-font-size !default;
@@ -1722,6 +1722,7 @@ $header-border-width: var(--#{$prefix}border-width) !default;
17221722
$header-hover-color: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
17231723
$header-active-color: rgba(var(--#{$prefix}emphasis-color-rgb), 1) !default;
17241724
$header-disabled-color: rgba(var(--#{$prefix}emphasis-color-rgb), .3) !default;
1725+
$header-transition: box-shadow .15s ease-in-out !default;
17251726

17261727
// Compute the header-brand padding-y so the header-brand will have the same height as header-text and nav-link
17271728
$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
@@ -1768,6 +1769,7 @@ $subheader-color: var(--#{$prefix}secondary-color) !default;
17681769
$subheader-hover-color: var(--#{$prefix}body-color) !default;
17691770
$subheader-active-color: var(--#{$prefix}body-color) !default;
17701771
$subheader-disabled-color: $disabled !default;
1772+
17711773
// scss-docs-end subheader-default-themes
17721774

17731775

@@ -1852,93 +1854,100 @@ $sidebar-widths: (
18521854
lg: 20rem,
18531855
xl: 24rem
18541856
) !default;
1855-
$sidebar-padding-y: 0 !default;
1856-
$sidebar-padding-x: 0 !default;
1857-
$sidebar-color: $high-emphasis-inverse !default;
1858-
$sidebar-bg: $gray-800 !default;
1859-
$sidebar-border-width: 0 !default;
1860-
$sidebar-border-color: transparent !default;
1857+
$sidebar-narrow-width: 4rem !default;
1858+
$sidebar-padding-y: $spacer !default;
1859+
$sidebar-padding-x: $spacer !default;
1860+
$sidebar-color: var(--#{$prefix}body-color) !default;
1861+
$sidebar-bg: var(--#{$prefix}body-bg) !default;
18611862
$sidebar-transition: margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
1862-
1863-
$sidebar-brand-height: 4rem !default;
1864-
$sidebar-brand-color: $high-emphasis-inverse !default;
1863+
$sidebar-brand-color: var(--#{$prefix}body-color) !default;
18651864
$sidebar-brand-bg: rgba($black, .2) !default;
1866-
1867-
$sidebar-header-height: 4rem !default;
1868-
$sidebar-header-padding-y: .75rem !default;
1869-
$sidebar-header-padding-x: 1rem !default;
1870-
$sidebar-header-bg: rgba($black, .2) !default;
1871-
$sidebar-header-height-transition: height .15s, padding .15s !default;
1872-
1873-
$sidebar-narrow-width: 4rem !default;
1874-
18751865
$sidebar-backdrop-bg: $black !default;
18761866
$sidebar-backdrop-opacity: .5 !default;
1877-
1878-
$sidebar-nav-title-padding-y: .75rem !default;
1879-
$sidebar-nav-title-padding-x: 1rem !default;
1880-
$sidebar-nav-title-margin-top: 1rem !default;
1881-
$sidebar-nav-title-color: $medium-emphasis-inverse !default;
1882-
$sidebar-nav-title-transition: height .15s, margin .15s !default;
1883-
1884-
$sidebar-nav-link-padding-y: .8445rem !default;
1885-
$sidebar-nav-link-padding-x: 1rem !default;
1886-
$sidebar-nav-link-color: $medium-emphasis-inverse !default;
1887-
$sidebar-nav-link-bg: transparent !default;
1888-
$sidebar-nav-link-border-width: 0 !default;
1889-
$sidebar-nav-link-border-color: transparent !default;
1890-
$sidebar-nav-link-border-radius: 0 !default;
1891-
$sidebar-nav-link-transition: background .15s ease, color .15s ease !default;
1892-
$sidebar-nav-link-icon-color: $medium-emphasis-inverse !default;
1893-
1894-
$sidebar-nav-link-hover-color: $high-emphasis-inverse !default;
1895-
$sidebar-nav-link-hover-bg: rgba($white, .05) !default;
1896-
$sidebar-nav-link-hover-icon-color: $high-emphasis-inverse !default;
1897-
1898-
$sidebar-nav-link-active-color: $high-emphasis-inverse !default;
1899-
$sidebar-nav-link-active-bg: rgba($white, .05) !default;
1900-
$sidebar-nav-link-active-icon-color: $high-emphasis-inverse !default;
1901-
1902-
$sidebar-nav-link-disabled-color: $disabled-inverse !default;
1903-
$sidebar-nav-link-disabled-icon-color: $sidebar-nav-link-icon-color !default;
1904-
1905-
$sidebar-nav-icon-width: 4rem !default;
1906-
$sidebar-nav-icon-height: 1.25rem !default;
1907-
$sidebar-nav-icon-font-size: $sidebar-nav-icon-height !default;
1908-
1909-
$sidebar-nav-group-bg: rgba(0, 0, 0, .2) !default;
1910-
$sidebar-nav-group-transition: background .15s ease-in-out !default;
1911-
$sidebar-nav-group-toggle-show-color: $sidebar-nav-link-color !default;
1912-
1913-
$sidebar-nav-group-items-padding-y: 0 !default;
1914-
$sidebar-nav-group-items-padding-x: 0 !default;
1915-
$sidebar-nav-group-items-transition: height .15s ease !default;
1916-
1917-
$sidebar-nav-group-indicator-color: $medium-emphasis-inverse !default;
1918-
$sidebar-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-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;
1919-
$sidebar-nav-group-indicator-hover-color: $sidebar-nav-link-hover-color !default;
1920-
$sidebar-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-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;
1921-
$sidebar-nav-group-indicator-transition: transform .15s !default;
1922-
1923-
$sidebar-footer-height: auto !default;
1924-
$sidebar-footer-padding-y: .75rem !default;
1925-
$sidebar-footer-padding-x: 1rem !default;
1926-
$sidebar-footer-bg: rgba($black, .2) !default;
1927-
$sidebar-footer-height-transition: height .15s, padding .15s !default;
1928-
1929-
$sidebar-toggler-height: 3rem !default;
1930-
$sidebar-toggler-bg: rgba($black, .2) !default;
1931-
$sidebar-toggler-transition: transform .15s !default;
1932-
1933-
$sidebar-toggler-indicator-width: 4rem !default;
1934-
$sidebar-toggler-indicator-height: 3rem !default;
1935-
$sidebar-toggler-indicator-color: $disabled-inverse !default;
1936-
$sidebar-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-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;
1937-
$sidebar-toggler-hover-bg: rgba(0, 0, 0, .3) !default;
1938-
$sidebar-toggler-indicator-hover-color: $sidebar-nav-link-hover-color !default;
1939-
$sidebar-toggler-indicator-hover-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-toggler-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") !default;
19401867
// scss-docs-end sidebar-variables
19411868

1869+
// scss-docs-start sidebar-nav-variables
1870+
$sidebar-nav-padding-y: $sidebar-padding-y * .5 !default;
1871+
$sidebar-nav-padding-x: $sidebar-padding-x * .5 !default;
1872+
1873+
$sidebar-nav-title-padding-y: .75rem !default;
1874+
$sidebar-nav-title-padding-x: 1rem !default;
1875+
$sidebar-nav-title-margin-top: 1rem !default;
1876+
$sidebar-nav-title-color: var(--#{$prefix}tertiary-color) !default;
1877+
$sidebar-nav-title-transition: height .15s, margin .15s !default;
1878+
1879+
$sidebar-nav-link-gap: .5rem !default;
1880+
$sidebar-nav-link-padding-y: .75rem !default;
1881+
$sidebar-nav-link-padding-x: 1rem !default;
1882+
$sidebar-nav-link-color: var(--#{$prefix}body-color) !default;
1883+
$sidebar-nav-link-bg: transparent !default;
1884+
$sidebar-nav-link-border-width: 0 !default;
1885+
$sidebar-nav-link-border-color: transparent !default;
1886+
$sidebar-nav-link-border-radius: var(--#{$prefix}border-radius) !default;
1887+
$sidebar-nav-link-transition: background .15s ease, color .15s ease, gap .15s ease !default;
1888+
1889+
$sidebar-narrow-nav-link-padding-y: .75rem !default;
1890+
$sidebar-narrow-nav-link-padding-x: .5rem !default;
1891+
1892+
$sidebar-nav-link-icon-color: var(--#{$prefix}tertiary-color) !default;
1893+
$sidebar-nav-link-icon-width: 1.25rem !default;
1894+
$sidebar-nav-link-icon-height: 1.25rem !default;
1895+
$sidebar-nav-link-icon-font-size: $sidebar-nav-link-icon-height !default;
1896+
1897+
$sidebar-nav-link-icon-bullet-size: .3125rem !default;
1898+
$sidebar-nav-link-icon-bullet-bg: transparent !default;
1899+
$sidebar-nav-link-icon-bullet-border-width: 1px !default;
1900+
$sidebar-nav-link-icon-bullet-border-color: var(--#{$prefix}tertiary-color) !default;
1901+
$sidebar-nav-link-icon-bullet-border-radius: 50rem !default;
1902+
1903+
$sidebar-nav-link-hover-color: var(--#{$prefix}emphasis-color) !default;
1904+
$sidebar-nav-link-hover-bg: var(--#{$prefix}tertiary-bg) !default;
1905+
$sidebar-nav-link-hover-icon-color: var(--#{$prefix}body-color) !default;
1906+
$sidebar-nav-link-hover-icon-bullet-bg: transparent !default;
1907+
$sidebar-nav-link-hover-icon-bullet-border-color: var(--#{$prefix}body-color) !default;
1908+
1909+
$sidebar-nav-link-active-color: var(--#{$prefix}primary) !default;
1910+
$sidebar-nav-link-active-bg: var(--#{$prefix}tertiary-bg) !default;
1911+
$sidebar-nav-link-active-icon-color: var(--#{$prefix}primary) !default;
1912+
$sidebar-nav-link-active-icon-bullet-bg: transparent !default;
1913+
$sidebar-nav-link-active-icon-bullet-border-color: var(--#{$prefix}primary) !default;
1914+
1915+
$sidebar-nav-link-disabled-color: var(--#{$prefix}tertiary-color) !default;
1916+
$sidebar-nav-link-disabled-icon-color: var(--#{$prefix}tertiary-color) !default;
1917+
$sidebar-nav-link-disabled-icon-bullet-bg: transparent !default;
1918+
$sidebar-nav-link-disabled-icon-bullet-border-color: var(--#{$prefix}tertiary-color) !default;
1919+
1920+
$sidebar-nav-group-bg: transparent !default;
1921+
$sidebar-nav-group-border-width: 0 !default;
1922+
$sidebar-nav-group-border-color: transparent !default;
1923+
$sidebar-nav-group-border-radius: var(--#{$prefix}border-radius) !default;
1924+
$sidebar-nav-group-transition: background .15s ease-in-out !default;
1925+
$sidebar-nav-group-toggle-show-color: $sidebar-nav-link-color !default;
1926+
1927+
$sidebar-nav-group-items-padding-y: 0 !default;
1928+
$sidebar-nav-group-items-padding-x: 0 !default;
1929+
$sidebar-nav-group-items-transition: height .15s ease !default;
1930+
1931+
$sidebar-nav-group-indicator-color: var(--#{$prefix}tertiary-color) !default;
1932+
$sidebar-nav-group-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><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;
1933+
$sidebar-nav-group-indicator-hover-color: $sidebar-nav-link-hover-color !default;
1934+
$sidebar-nav-group-indicator-hover-icon: $sidebar-nav-group-indicator-icon !default;
1935+
$sidebar-nav-group-indicator-transition: transform .15s !default;
1936+
// scss-docs-end sidebar-nav-variables
1937+
1938+
// scss-docs-start sidebar-toggler
1939+
$sidebar-toggler-width: .5rem !default;
1940+
$sidebar-toggler-height: .5rem !default;
1941+
$sidebar-toggler-padding-x: .25rem !default;
1942+
$sidebar-toggler-padding-y: .25rem !default;
1943+
$sidebar-toggler-color: var(--#{$prefix}tertiary-color) !default;
1944+
$sidebar-toggler-bg: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cg xmlns='http://www.w3.org/2000/svg' transform='matrix(-1 0 0 -1 512 512)'%3E%3Cpath fill='%23000' d='M472,16H40A24.028,24.028,0,0,0,16,40V200H48V48H464V464H48V304H16V472a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V40A24.028,24.028,0,0,0,472,16Z'/%3E%3Cpolygon fill='%23000' points='209.377 363.306 232.004 385.933 366.627 251.31 232.004 116.687 209.377 139.313 305.374 235.311 16 235.311 16 267.311 305.372 267.311 209.377 363.306'/%3E%3C/g%3E%3C/svg%3E") !default;
1945+
$sidebar-toggler-focus-shadow: $focus-ring-box-shadow !default;
1946+
$sidebar-toggler-hover-color: var(--#{$prefix}secondary-color) !default;
1947+
$sidebar-toggler-focus-color: var(--#{$prefix}secondary-color) !default;
1948+
$sidebar-toggler-transition: transform .15s !default;
1949+
// scss-docs-end sidebar-toggler
1950+
19421951
// Footer
19431952
// scss-docs-start footer-variables
19441953
$footer-min-height: 3rem !default;

‎scss/sidebar/_sidebar-narrow.scss

Lines changed: 33 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11
%sidebar-narrow {
2+
// scss-docs-start sidebar-narrow-css-vars
3+
--#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};
4+
// scss-docs-end sidebar-narrow-css-vars
5+
6+
.sidebar-nav {
7+
--#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};
8+
--#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};
9+
}
10+
211
@include media-breakpoint-up($mobile-breakpoint) {
312
z-index: $zindex-fixed + 1;
413
flex: 0 0 var(--#{$prefix}sidebar-narrow-width);
@@ -19,14 +28,22 @@
1928
display: block;
2029
}
2130

31+
.sidebar-header {
32+
justify-content: center;
33+
padding-right: 0;
34+
padding-left: 0;
35+
}
36+
37+
.nav-icon {
38+
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
39+
}
40+
2241
.d-narrow-none,
2342
.nav-label,
2443
.nav-title,
2544
.nav-group-items,
2645
.nav-group.show .nav-group-items,
27-
.sidebar-footer,
28-
.sidebar-form,
29-
.sidebar-header {
46+
.sidebar-form {
3047
height: 0 !important; // stylelint-disable-line declaration-no-important
3148
padding: 0;
3249
margin: 0;
@@ -35,12 +52,7 @@
3552
}
3653

3754
.sidebar-toggler {
38-
position: fixed;
39-
bottom: 0;
40-
41-
&::before {
42-
@include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
43-
}
55+
@include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
4456
}
4557

4658
&.sidebar-end .sidebar-toggler::before {
@@ -57,6 +69,10 @@
5769
&.sidebar-end ~ * {
5870
--#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width};
5971
}
72+
73+
.nav-link {
74+
overflow: hidden;
75+
}
6076
}
6177

6278
.sidebar-narrow-unfoldable {
@@ -75,16 +91,20 @@
7591
}
7692

7793
&:hover {
94+
box-shadow: $box-shadow;
95+
7896
.sidebar-toggler {
79-
&::before {
80-
@include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
81-
}
97+
@include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));
8298
}
8399

84-
&.sidebar-end .sidebar-toggler::before {
100+
&.sidebar-end .sidebar-toggler {
85101
transform: rotate(0deg);
86102
}
87103
}
104+
105+
.nav-link {
106+
overflow: hidden;
107+
}
88108
}
89109

90110
// Responsive behavior

0 commit comments

Comments
 (0)