From b9fdac2a0fb24eb99b2a2b4a0a9fc6642c698d50 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 30 Jun 2022 10:30:01 +0200 Subject: [PATCH 01/35] SNI and SNL first attempt --- scss/_side-navigation.scss | 83 ++++++++++ scss/_variables.scss | 4 +- scss/boosted.scss | 1 + .../docs/5.2/components/side-navigation.md | 149 ++++++++++++++++++ site/data/sidebar.yml | 1 + 5 files changed, 236 insertions(+), 2 deletions(-) create mode 100644 scss/_side-navigation.scss create mode 100644 site/content/docs/5.2/components/side-navigation.md diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss new file mode 100644 index 0000000000..fda4f141c9 --- /dev/null +++ b/scss/_side-navigation.scss @@ -0,0 +1,83 @@ +.side-nav { + --#{$prefix}side-nav-width: 18.75rem; + --#{$prefix}side-nav-color: #{$black}; + --#{$prefix}side-nav-bg-color: #{$white}; + --#{$prefix}side-nav-hover-bg-color: #{$gray-300}; + --#{$prefix}side-nav-active-bg-color: #{$gray-500}; + --#{$prefix}side-nav-active-border-color: var(--#{$prefix}link-hover-color); + --#{$prefix}side-nav-icon-size: 1.5625rem; + --#{$prefix}side-nav-item-height: 2.5rem; + --#{$prefix}side-nav-item-padding-left: 15px; + --#{$prefix}offcanvas-padding-x: 0; + --#{$prefix}offcanvas-padding-y: 0; + --#{$prefix}offcanvas-border-width: 1px; + --#{$prefix}offcanvas-border-color: #{$gray-500}; + + width: var(--#{$prefix}side-nav-width); + height: 100%; + border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); + + svg, + img { + width: var(--#{$prefix}side-nav-icon-size); + height: var(--#{$prefix}side-nav-icon-size); + margin-right: 15px; + } + + .offcanvas-header { + justify-content: flex-end; + background-color: var(--#{$prefix}side-nav-bg-color); + } + + .offcanvas-body { + background-color: var(--#{$prefix}side-nav-bg-color); + } + + .accordion { + --#{$prefix}accordion-border-width: 0; + --#{$prefix}accordion-body-padding-x: 0; + --#{$prefix}accordion-body-padding-y: 0; + --#{$prefix}accordion-btn-font-size: 1rem; + + .accordion-body { + --#{$prefix}side-nav-item-padding-left: 55px; + + .accordion-body { + --#{$prefix}side-nav-item-padding-left: 95px; + } + } + } + + .side-nav-item { + position: relative; + display: flex; + align-items: center; + width: 100%; + height: var(--#{$prefix}side-nav-item-height); + padding-left: var(--#{$prefix}side-nav-item-padding-left); + color: var(--#{$prefix}side-nav-color); + text-decoration: none; + background-color: var(--#{$prefix}side-nav-bg-color); + border: 0; + + &:hover { + background-color: var(--#{$prefix}side-nav-hover-bg-color); + } + + &.active { + background: linear-gradient(to right, var(--#{$prefix}side-nav-active-border-color), var(--#{$prefix}side-nav-active-border-color) 4px, var(--#{$prefix}side-nav-active-bg-color) 4px, var(--#{$prefix}side-nav-active-bg-color)); + } + } +} + +// .side-nav-collapsible { + +// } + +.side-nav-dark { + --#{$prefix}side-nav-color: #{$white}; + --#{$prefix}side-nav-bg-color: #{$gray-900}; + --#{$prefix}side-nav-hover-bg-color: #{$black}; + --#{$prefix}side-nav-active-bg-color: #{$gray-700}; + --#{$prefix}offcanvas-border-color: #{$gray-700}; +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 17ad62fcb3..a8707ff000 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1907,11 +1907,11 @@ $btn-close-padding-sm: subtract($btn-icon-padding-x, $spacer * .25) !defau // scss-docs-start offcanvas-variables $offcanvas-padding-y: $modal-inner-padding !default; $offcanvas-padding-x: $modal-inner-padding !default; -$offcanvas-horizontal-width: 400px !default; +$offcanvas-horizontal-width: 300px !default; $offcanvas-vertical-height: 30vh !default; $offcanvas-transition-duration: .3s !default; $offcanvas-border-color: $modal-content-border-color !default; -$offcanvas-border-width: $modal-content-border-width !default; +$offcanvas-border-width: 1px !default; $offcanvas-title-line-height: $modal-title-line-height !default; $offcanvas-bg-color: $modal-content-bg !default; $offcanvas-color: $modal-content-color !default; diff --git a/scss/boosted.scss b/scss/boosted.scss index 553b0d33e5..fac46ece8a 100644 --- a/scss/boosted.scss +++ b/scss/boosted.scss @@ -47,6 +47,7 @@ @import "back-to-top"; @import "footer"; @import "orange-navbar"; +@import "side-navigation"; @import "stepped-process"; @import "sticker"; @import "title-bars"; diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md new file mode 100644 index 0000000000..7ae0b686dd --- /dev/null +++ b/site/content/docs/5.2/components/side-navigation.md @@ -0,0 +1,149 @@ +--- +layout: docs +title: Side Navigation +description: Documentation and examples for Boosted's exclusive Brand responsive side navigation. +group: components +toc: true +--- + +## How it works + +## Basic + +{{< example class="p-0" >}} + + +
+
+ +
+
+
+
+

+ +

+
+
+
+
+

+ +

+
+
+ +
+
+
+
+

+ +

+
+
+ +
+
+
+
+

+ +

+
+
+ +
+
+
+
+
+
+
+
+

+ +

+
+
+ +
+
+
+
+

+ +

+
+
+ +
+
+
+
+
+
+{{< /example >}} + +## Collapsible with title + +{{< example >}} + +{{< /example >}} + +## Collapsible with content + +{{< example >}} + +{{< /example >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 104476c01d..96c7b01559 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -95,6 +95,7 @@ - title: Popovers - title: Progress - title: Scrollspy + - title: Side navigation - title: Spinners - title: Stepped process - title: Sticker From 14a888da901ca9859fe34b5648f1066705af02f4 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 4 Jul 2022 12:01:32 +0200 Subject: [PATCH 02/35] Strongly WIP but collapsing content seems to work --- scss/_side-navigation.scss | 53 +++- .../docs/5.2/components/side-navigation.md | 288 ++++++++++++++++-- .../docs/5.2/assets/img/boosted-sprite.svg | 9 + 3 files changed, 313 insertions(+), 37 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index fda4f141c9..7c2238aadd 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -15,11 +15,12 @@ width: var(--#{$prefix}side-nav-width); height: 100%; - border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); + border: 0 !important; // stylelint-disable-line declaration-no-important svg, img { width: var(--#{$prefix}side-nav-icon-size); + min-width: var(--#{$prefix}side-nav-icon-size); height: var(--#{$prefix}side-nav-icon-size); margin-right: 15px; } @@ -27,10 +28,18 @@ .offcanvas-header { justify-content: flex-end; background-color: var(--#{$prefix}side-nav-bg-color); + border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); } .offcanvas-body { + position: relative; + width: 100%; + height: 100%; background-color: var(--#{$prefix}side-nav-bg-color); + + > * { + border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); + } } .accordion { @@ -48,13 +57,19 @@ } } + .tab-content { + padding: 0; + border: 0; + } + .side-nav-item { position: relative; display: flex; align-items: center; width: 100%; height: var(--#{$prefix}side-nav-item-height); - padding-left: var(--#{$prefix}side-nav-item-padding-left); + padding: 0 0 0 var(--#{$prefix}side-nav-item-padding-left); + overflow: hidden; color: var(--#{$prefix}side-nav-color); text-decoration: none; background-color: var(--#{$prefix}side-nav-bg-color); @@ -70,9 +85,39 @@ } } -// .side-nav-collapsible { +.side-nav-collapsible { + --#{$prefix}side-nav-width: 3.5rem; + --#{$prefix}offcanvas-width: 326px; + + [data-bs-toggle="collapse"] { + align-self: flex-end; + width: 55px; + height: 40px; + @include transition(transform .3s ease); + @include caret(start); + + &::before { + border-right-color: #000; + } -// } + &.collapsed { + transform: rotateZ(180deg); + + &::before { + border-right-color: #fff; + } + } + } + + .offcanvas-header, + .offcanvas-body > * { + background: linear-gradient(to right, #333, #333 55px, #fff 55px); + } + + .side-nav-collapse { + width: 270px; + } +} .side-nav-dark { --#{$prefix}side-nav-color: #{$white}; diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 7ae0b686dd..321f60c351 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -8,6 +8,10 @@ toc: true ## How it works +Side navigation is based on `.offcanvas-*` class. Please refer to [its documentation]({{< docsref "/components/offcanvas#responsive" >}}) to learn more about its behavior. + +Side navigation may need the Javascript from Accordions, Collapse, Tabs or Tooltips (in addition of its own), depending on the implemented navigation, to work correctly. + ## Basic {{< example class="p-0" >}} @@ -22,8 +26,8 @@ toc: true

@@ -40,11 +44,11 @@ toc: true @@ -58,11 +62,11 @@ toc: true @@ -76,11 +80,11 @@ toc: true @@ -92,8 +96,8 @@ toc: true

@@ -101,11 +105,11 @@ toc: true @@ -113,8 +117,8 @@ toc: true

@@ -122,11 +126,11 @@ toc: true @@ -138,12 +142,230 @@ toc: true ## Collapsible with title -{{< example >}} +{{< example class="p-0 scrollspy-example-2" >}} + +
+
+ +
+
+
+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
{{< /example >}} ## Collapsible with content -{{< example >}} +Strongly WIP, onclick functions are a test without extra JS. But fully working example atm. + +{{< example class="p-0 scrollspy-example-2" >}} + +
+
+ +
+
+
+ +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
+
+
+

Dashboard

+
+
+

Financial

+
+
+

Charts

+
+
+
+
+
+
+
+{{< /example >}} + +## Dark variant + +Side navigation comes with a dark variant: `.side-nav-dark`. + +{{< example class="p-0" >}} + + +
+
+ +
+
+
+
+

+ +

+
+
+
+
+

+ +

+
+
+ +
+
+
+
+

+ +

+
+
+ +
+
+
+
+

+ +

+
+
+ +
+
+
+
+
+
+
+
+

+ +

+
+
+ +
+
+
+
+

+ +

+
+
+ +
+
+
+
+
+
{{< /example >}} diff --git a/site/static/docs/5.2/assets/img/boosted-sprite.svg b/site/static/docs/5.2/assets/img/boosted-sprite.svg index 729e45f831..7e528c4abd 100644 --- a/site/static/docs/5.2/assets/img/boosted-sprite.svg +++ b/site/static/docs/5.2/assets/img/boosted-sprite.svg @@ -59,4 +59,13 @@ + + + + + + + + + From 41cdcdc624d7b0e7b4aa17439fcb4994ed8a30c0 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 3 Aug 2022 10:17:27 +0200 Subject: [PATCH 03/35] Working sample without js --- scss/_side-navigation.scss | 62 ++++++++++++++----- .../docs/5.2/components/side-navigation.md | 17 +++-- 2 files changed, 58 insertions(+), 21 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index 7c2238aadd..a573412513 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -15,6 +15,7 @@ width: var(--#{$prefix}side-nav-width); height: 100%; + overflow: auto; border: 0 !important; // stylelint-disable-line declaration-no-important svg, @@ -72,6 +73,7 @@ overflow: hidden; color: var(--#{$prefix}side-nav-color); text-decoration: none; + white-space: nowrap; background-color: var(--#{$prefix}side-nav-bg-color); border: 0; @@ -85,29 +87,55 @@ } } +[class*="side-nav-collapsible"] [data-bs-toggle="collapse"] { + align-self: flex-end; + width: 54px; + height: 40px; + margin-left: auto; + @include transition(transform .3s ease); + @include caret(start); + + &::before { + border-right-color: #000; + } + + &.collapsed { + transform: rotateZ(180deg); + } +} + .side-nav-collapsible { - --#{$prefix}side-nav-width: 3.5rem; - --#{$prefix}offcanvas-width: 326px; + display: inline-flex; + --#{$prefix}side-nav-width: 54px; + --#{$prefix}offcanvas-width: 300px; + + .offcanvas-body { + display: inline-flex; + width: auto; + min-width: 54px; + border-right: #ccc solid 1px; - [data-bs-toggle="collapse"] { - align-self: flex-end; - width: 55px; - height: 40px; - @include transition(transform .3s ease); - @include caret(start); + @include media-breakpoint-up(lg) { + position: absolute; + } - &::before { - border-right-color: #000; + > * { + border: 0; } + } - &.collapsed { - transform: rotateZ(180deg); + .collapse-horizontal { + margin-left: 54px; - &::before { - border-right-color: #fff; - } + .fake { + width: 245px; } } +} + +.side-nav-collapsible-content { + --#{$prefix}side-nav-width: 3.5rem; + --#{$prefix}offcanvas-width: 326px; .offcanvas-header, .offcanvas-body > * { @@ -117,6 +145,10 @@ .side-nav-collapse { width: 270px; } + + [data-bs-toggle="collapse"].collapsed::before { + border-right-color: #fff; + } } .side-nav-dark { diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 321f60c351..be967cd4a2 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -142,17 +142,20 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt ## Collapsible with title -{{< example class="p-0 scrollspy-example-2" >}} +{{< example class="p-0 scrollspy-example-2 d-flex" >}}
-
-
+
+
+
 
+
+
-
    +
+
test
{{< /example >}} ## Collapsible with content Strongly WIP, onclick functions are a test without extra JS. But fully working example atm. -{{< example class="p-0 scrollspy-example-2" >}} +{{< example class="p-0 scrollspy-example-2 d-flex" >}} -
+
@@ -238,6 +242,7 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
+
test
{{< /example >}} ## Dark variant From 5f10df1355af955730dcc5699b0bafd0ff2f4c92 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 3 Aug 2022 15:38:23 +0200 Subject: [PATCH 04/35] Adding focus + resolving much bugs + CSS var --- scss/_side-navigation.scss | 55 ++++++++++++------- .../docs/5.2/components/side-navigation.md | 6 +- 2 files changed, 38 insertions(+), 23 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index a573412513..f9e71d6d2d 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -36,11 +36,15 @@ position: relative; width: 100%; height: 100%; - background-color: var(--#{$prefix}side-nav-bg-color); > * { + background-color: var(--#{$prefix}side-nav-bg-color); border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); } + + .position-absolute { + min-height: 100%; + } } .accordion { @@ -76,6 +80,7 @@ white-space: nowrap; background-color: var(--#{$prefix}side-nav-bg-color); border: 0; + @include transition(unset); &:hover { background-color: var(--#{$prefix}side-nav-hover-bg-color); @@ -85,18 +90,24 @@ background: linear-gradient(to right, var(--#{$prefix}side-nav-active-border-color), var(--#{$prefix}side-nav-active-border-color) 4px, var(--#{$prefix}side-nav-active-bg-color) 4px, var(--#{$prefix}side-nav-active-bg-color)); } } + + .focus-visible { + z-index: 3; + outline: var(--#{$prefix}side-nav-active-border-color) solid 3px; + outline-offset: -3px; + } } [class*="side-nav-collapsible"] [data-bs-toggle="collapse"] { - align-self: flex-end; - width: 54px; - height: 40px; + width: var(--#{$prefix}side-nav-width); + height: var(--#{$prefix}side-nav-item-height); margin-left: auto; - @include transition(transform .3s ease); + @include transition(transform .35s ease); @include caret(start); &::before { - border-right-color: #000; + margin: 0; + border-right-color: var(--#{$prefix}side-nav-color); } &.collapsed { @@ -105,44 +116,48 @@ } .side-nav-collapsible { - display: inline-flex; - --#{$prefix}side-nav-width: 54px; + --#{$prefix}side-nav-width: 3.375rem; --#{$prefix}offcanvas-width: 300px; .offcanvas-body { - display: inline-flex; width: auto; - min-width: 54px; - border-right: #ccc solid 1px; + min-width: var(--#{$prefix}side-nav-width); @include media-breakpoint-up(lg) { position: absolute; } - - > * { - border: 0; - } } .collapse-horizontal { - margin-left: 54px; + margin-left: var(--#{$prefix}side-nav-width); + + @include media-breakpoint-down(lg) { + display: none; + } .fake { - width: 245px; + /* stylelint-disable-next-line function-disallowed-list */ + width: calc(var(--#{$prefix}offcanvas-width) - var(--#{$prefix}offcanvas-border-width) - var(--#{$prefix}side-nav-width)); } } } .side-nav-collapsible-content { - --#{$prefix}side-nav-width: 3.5rem; + --#{$prefix}side-nav-width: 3.375rem; --#{$prefix}offcanvas-width: 326px; + .offcanvas-body { + @include media-breakpoint-up(lg) { + position: absolute; + } + } + .offcanvas-header, .offcanvas-body > * { - background: linear-gradient(to right, #333, #333 55px, #fff 55px); + background: linear-gradient(to right, #333, #333 add(var(--#{$prefix}side-nav-width), 1px), #fff add(var(--#{$prefix}side-nav-width), 1px)); } - .side-nav-collapse { + .tab-content { width: 270px; } diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index be967cd4a2..5d6ad9e026 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -153,7 +153,7 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
 
-
+
  • @@ -199,7 +199,7 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
-
+
    @@ -226,7 +226,7 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
-
+

Dashboard

From 8d31d11486fe523a39eca9e8c352c0146f8629d5 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 3 Aug 2022 16:03:23 +0200 Subject: [PATCH 05/35] Fix pa11y --- site/content/docs/5.2/components/side-navigation.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 5d6ad9e026..f4ec3db4a2 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -154,7 +154,7 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
 
- +
- +
  • @@ -208,6 +208,7 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e +
  • @@ -215,6 +216,7 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e +
  • @@ -222,6 +224,7 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e +
From a60f1c171cdb6e4a7333cde977f30888389681f1 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 4 Aug 2022 15:13:31 +0200 Subject: [PATCH 06/35] Fix some bugs --- scss/_side-navigation.scss | 31 ++++++++++++------- .../docs/5.2/components/side-navigation.md | 4 +-- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index f9e71d6d2d..147ca5ba4b 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -8,15 +8,15 @@ --#{$prefix}side-nav-icon-size: 1.5625rem; --#{$prefix}side-nav-item-height: 2.5rem; --#{$prefix}side-nav-item-padding-left: 15px; + --#{$prefix}side-nav-border-width: 1px; + --#{$prefix}side-nav-border-color: #{$gray-500}; --#{$prefix}offcanvas-padding-x: 0; --#{$prefix}offcanvas-padding-y: 0; - --#{$prefix}offcanvas-border-width: 1px; - --#{$prefix}offcanvas-border-color: #{$gray-500}; width: var(--#{$prefix}side-nav-width); height: 100%; overflow: auto; - border: 0 !important; // stylelint-disable-line declaration-no-important + @extend .border-0; svg, img { @@ -29,17 +29,18 @@ .offcanvas-header { justify-content: flex-end; background-color: var(--#{$prefix}side-nav-bg-color); - border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); + border-right: var(--#{$prefix}side-nav-border-width) solid var(--#{$prefix}side-nav-border-color); } .offcanvas-body { position: relative; width: 100%; height: 100%; + background-color: var(--#{$prefix}side-nav-bg-color); > * { background-color: var(--#{$prefix}side-nav-bg-color); - border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color); + border-right: var(--#{$prefix}side-nav-border-width) solid var(--#{$prefix}side-nav-border-color); } .position-absolute { @@ -96,27 +97,33 @@ outline: var(--#{$prefix}side-nav-active-border-color) solid 3px; outline-offset: -3px; } + + .collapse-horizontal > * { + /* stylelint-disable-next-line function-disallowed-list */ + max-width: calc(100vw - var(--#{$prefix}side-nav-border-width) * 2 - var(--#{$prefix}side-nav-width)); + } } [class*="side-nav-collapsible"] [data-bs-toggle="collapse"] { - width: var(--#{$prefix}side-nav-width); + width: subtract(var(--#{$prefix}side-nav-width), var(--#{$prefix}side-nav-border-width)); height: var(--#{$prefix}side-nav-item-height); margin-left: auto; - @include transition(transform .35s ease); + background-color: transparent; @include caret(start); &::before { margin: 0; border-right-color: var(--#{$prefix}side-nav-color); + @include transition(transform .35s ease); } - &.collapsed { + &.collapsed::before { transform: rotateZ(180deg); } } .side-nav-collapsible { - --#{$prefix}side-nav-width: 3.375rem; + --#{$prefix}side-nav-width: 3.4375rem; --#{$prefix}offcanvas-width: 300px; .offcanvas-body { @@ -137,13 +144,13 @@ .fake { /* stylelint-disable-next-line function-disallowed-list */ - width: calc(var(--#{$prefix}offcanvas-width) - var(--#{$prefix}offcanvas-border-width) - var(--#{$prefix}side-nav-width)); + width: calc(var(--#{$prefix}offcanvas-width) - var(--#{$prefix}side-nav-border-width) - var(--#{$prefix}side-nav-width)); } } } .side-nav-collapsible-content { - --#{$prefix}side-nav-width: 3.375rem; + --#{$prefix}side-nav-width: 3.4375rem; --#{$prefix}offcanvas-width: 326px; .offcanvas-body { @@ -171,5 +178,5 @@ --#{$prefix}side-nav-bg-color: #{$gray-900}; --#{$prefix}side-nav-hover-bg-color: #{$black}; --#{$prefix}side-nav-active-bg-color: #{$gray-700}; - --#{$prefix}offcanvas-border-color: #{$gray-700}; + --#{$prefix}side-nav-border-color: #{$gray-700}; } diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index f4ec3db4a2..d4ab961598 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -154,7 +154,7 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
 
- +
- +
  • From b610a456b52445a20cca0c1eb9a4e48e2a8e730c Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 11 Aug 2022 15:04:16 +0200 Subject: [PATCH 07/35] CSS trim + fix some known issues --- scss/_side-navigation.scss | 139 ++++++++---------- .../docs/5.2/components/side-navigation.md | 20 ++- 2 files changed, 70 insertions(+), 89 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index 147ca5ba4b..3965276f10 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -1,51 +1,39 @@ .side-nav { --#{$prefix}side-nav-width: 18.75rem; --#{$prefix}side-nav-color: #{$black}; - --#{$prefix}side-nav-bg-color: #{$white}; - --#{$prefix}side-nav-hover-bg-color: #{$gray-300}; - --#{$prefix}side-nav-active-bg-color: #{$gray-500}; + --#{$prefix}side-nav-bg: #{$white}; + --#{$prefix}side-nav-hover-bg: #{$gray-300}; + --#{$prefix}side-nav-active-bg: #{$gray-500}; --#{$prefix}side-nav-active-border-color: var(--#{$prefix}link-hover-color); --#{$prefix}side-nav-icon-size: 1.5625rem; + --#{$prefix}side-nav-icon-margin-x: 15px; --#{$prefix}side-nav-item-height: 2.5rem; - --#{$prefix}side-nav-item-padding-left: 15px; + --#{$prefix}side-nav-item-padding-left: var(--#{$prefix}side-nav-icon-margin-x); --#{$prefix}side-nav-border-width: 1px; --#{$prefix}side-nav-border-color: #{$gray-500}; --#{$prefix}offcanvas-padding-x: 0; --#{$prefix}offcanvas-padding-y: 0; width: var(--#{$prefix}side-nav-width); - height: 100%; - overflow: auto; - @extend .border-0; + min-height: 100%; + border: 0 !important; // stylelint-disable-line declaration-no-important svg, img { width: var(--#{$prefix}side-nav-icon-size); min-width: var(--#{$prefix}side-nav-icon-size); height: var(--#{$prefix}side-nav-icon-size); - margin-right: 15px; + margin-right: var(--#{$prefix}side-nav-icon-margin-x); } - .offcanvas-header { - justify-content: flex-end; - background-color: var(--#{$prefix}side-nav-bg-color); + .offcanvas-header, + .offcanvas-body > * { + background: var(--#{$prefix}side-nav-bg); border-right: var(--#{$prefix}side-nav-border-width) solid var(--#{$prefix}side-nav-border-color); } - .offcanvas-body { - position: relative; - width: 100%; - height: 100%; - background-color: var(--#{$prefix}side-nav-bg-color); - - > * { - background-color: var(--#{$prefix}side-nav-bg-color); - border-right: var(--#{$prefix}side-nav-border-width) solid var(--#{$prefix}side-nav-border-color); - } - - .position-absolute { - min-height: 100%; - } + .offcanvas-body > * { + min-height: 100%; } .accordion { @@ -55,21 +43,22 @@ --#{$prefix}accordion-btn-font-size: 1rem; .accordion-body { - --#{$prefix}side-nav-item-padding-left: 55px; + --#{$prefix}side-nav-item-padding-left: calc(var(--#{$prefix}side-nav-icon-size) + var(--#{$prefix}side-nav-icon-margin-x) * 2); // stylelint-disable-line function-disallowed-list .accordion-body { - --#{$prefix}side-nav-item-padding-left: 95px; + --#{$prefix}side-nav-item-padding-left: calc(var(--#{$prefix}side-nav-icon-size) * 2 + var(--#{$prefix}side-nav-icon-margin-x) * 3); // stylelint-disable-line function-disallowed-list } } } - .tab-content { + .collapse-horizontal > * { + width: calc(var(--#{$prefix}offcanvas-width) - var(--#{$prefix}side-nav-width) - var(--#{$prefix}side-nav-border-width)); // stylelint-disable-line function-disallowed-list + max-width: calc(100vw - var(--#{$prefix}side-nav-border-width) * 2 - var(--#{$prefix}side-nav-width)); // stylelint-disable-line function-disallowed-list padding: 0; border: 0; } - .side-nav-item { - position: relative; + .side-nav-item { // Here to be more specific than other classes display: flex; align-items: center; width: 100%; @@ -79,56 +68,64 @@ color: var(--#{$prefix}side-nav-color); text-decoration: none; white-space: nowrap; - background-color: var(--#{$prefix}side-nav-bg-color); + background: var(--#{$prefix}side-nav-bg); border: 0; - @include transition(unset); &:hover { - background-color: var(--#{$prefix}side-nav-hover-bg-color); + background: var(--#{$prefix}side-nav-hover-bg); } &.active { - background: linear-gradient(to right, var(--#{$prefix}side-nav-active-border-color), var(--#{$prefix}side-nav-active-border-color) 4px, var(--#{$prefix}side-nav-active-bg-color) 4px, var(--#{$prefix}side-nav-active-bg-color)); + background: linear-gradient(to right, var(--#{$prefix}side-nav-active-border-color), var(--#{$prefix}side-nav-active-border-color) 4px, var(--#{$prefix}side-nav-active-bg) 4px, var(--#{$prefix}side-nav-active-bg)); } } + .side-nav-collapse { + justify-content: center; + width: subtract(var(--#{$prefix}side-nav-width), var(--#{$prefix}side-nav-border-width)); + margin: 0 0 0 auto; + background: unset !important; // stylelint-disable-line declaration-no-important + @include caret(start); + + &::before { + margin: 0; + border-right-color: var(--#{$prefix}side-nav-color); + @include transition(transform .35s ease); + } + + &.collapsed::before { + transform: rotateZ(180deg); + } + } + + &.offcanvas-end .side-nav-collapse { + margin: 0 auto 0 0; + @include caret(end); + } + .focus-visible { z-index: 3; outline: var(--#{$prefix}side-nav-active-border-color) solid 3px; outline-offset: -3px; } - - .collapse-horizontal > * { - /* stylelint-disable-next-line function-disallowed-list */ - max-width: calc(100vw - var(--#{$prefix}side-nav-border-width) * 2 - var(--#{$prefix}side-nav-width)); - } } -[class*="side-nav-collapsible"] [data-bs-toggle="collapse"] { - width: subtract(var(--#{$prefix}side-nav-width), var(--#{$prefix}side-nav-border-width)); - height: var(--#{$prefix}side-nav-item-height); - margin-left: auto; - background-color: transparent; - @include caret(start); - - &::before { - margin: 0; - border-right-color: var(--#{$prefix}side-nav-color); - @include transition(transform .35s ease); - } - - &.collapsed::before { - transform: rotateZ(180deg); - } +.side-nav-dark { + --#{$prefix}side-nav-color: #{$white}; + --#{$prefix}side-nav-bg: #{$gray-900}; + --#{$prefix}side-nav-hover-bg: #{$black}; + --#{$prefix}side-nav-active-bg: #{$gray-700}; + --#{$prefix}side-nav-border-color: #{$gray-700}; } .side-nav-collapsible { - --#{$prefix}side-nav-width: 3.4375rem; + --#{$prefix}side-nav-width: calc(var(--#{$prefix}side-nav-icon-size) + var(--#{$prefix}side-nav-icon-margin-x) * 2); // stylelint-disable-line function-disallowed-list --#{$prefix}offcanvas-width: 300px; .offcanvas-body { width: auto; min-width: var(--#{$prefix}side-nav-width); + height: 100%; @include media-breakpoint-up(lg) { position: absolute; @@ -141,42 +138,28 @@ @include media-breakpoint-down(lg) { display: none; } - - .fake { - /* stylelint-disable-next-line function-disallowed-list */ - width: calc(var(--#{$prefix}offcanvas-width) - var(--#{$prefix}side-nav-border-width) - var(--#{$prefix}side-nav-width)); - } } } .side-nav-collapsible-content { - --#{$prefix}side-nav-width: 3.4375rem; + --#{$prefix}side-nav-width: calc(var(--#{$prefix}side-nav-icon-size) + var(--#{$prefix}side-nav-icon-margin-x) * 2); // stylelint-disable-line function-disallowed-list + --#{$prefix}side-nav-bg: #{linear-gradient(to right, $gray-900, $gray-900 subtract(var(--#{$prefix}side-nav-width), var(--#{$prefix}side-nav-border-width)), $white subtract(var(--#{$prefix}side-nav-width), var(--#{$prefix}side-nav-border-width)))}; --#{$prefix}offcanvas-width: 326px; .offcanvas-body { + height: 100%; + @include media-breakpoint-up(lg) { position: absolute; } } - .offcanvas-header, - .offcanvas-body > * { - background: linear-gradient(to right, #333, #333 add(var(--#{$prefix}side-nav-width), 1px), #fff add(var(--#{$prefix}side-nav-width), 1px)); - } - - .tab-content { - width: 270px; + svg, + img { + margin-right: subtract(var(--#{$prefix}side-nav-icon-margin-x), var(--#{$prefix}side-nav-border-width)); } [data-bs-toggle="collapse"].collapsed::before { - border-right-color: #fff; + border-right-color: $white; } } - -.side-nav-dark { - --#{$prefix}side-nav-color: #{$white}; - --#{$prefix}side-nav-bg-color: #{$gray-900}; - --#{$prefix}side-nav-hover-bg-color: #{$black}; - --#{$prefix}side-nav-active-bg-color: #{$gray-700}; - --#{$prefix}side-nav-border-color: #{$gray-700}; -} diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index d4ab961598..afdbc2728e 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -19,7 +19,7 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
    - +
    @@ -142,19 +142,17 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt ## Collapsible with title -{{< example class="p-0 scrollspy-example-2 d-flex" >}} +{{< example class="p-0 scrollspy-example-2 d-block d-lg-flex" >}}
    - +
    -
    -
     
    -
    +
     
    - +
    • @@ -199,8 +197,8 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
      -
      - +
      +
      • @@ -257,7 +255,7 @@ Side navigation comes with a dark variant: `.side-nav-dark`.
        - +
        From 11adbcf30bcb2cd0a195a480f469b550569c8dc5 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Fri, 12 Aug 2022 12:50:17 +0200 Subject: [PATCH 08/35] Perfect config but with focus issues on the last one --- scss/_side-navigation.scss | 75 ++++++++--------- .../docs/5.2/components/side-navigation.md | 83 ++++++++++--------- 2 files changed, 79 insertions(+), 79 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index 3965276f10..1b384c3fe9 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -13,10 +13,11 @@ --#{$prefix}side-nav-border-color: #{$gray-500}; --#{$prefix}offcanvas-padding-x: 0; --#{$prefix}offcanvas-padding-y: 0; + --#{$prefix}offcanvas-border-width: 0; width: var(--#{$prefix}side-nav-width); - min-height: 100%; - border: 0 !important; // stylelint-disable-line declaration-no-important + height: 100%; + overflow: auto; svg, img { @@ -27,12 +28,15 @@ } .offcanvas-header, - .offcanvas-body > * { + .offcanvas-body > :not(.collapse-horizontal) { + width: 100%; background: var(--#{$prefix}side-nav-bg); border-right: var(--#{$prefix}side-nav-border-width) solid var(--#{$prefix}side-nav-border-color); } - .offcanvas-body > * { + .offcanvas-body, + .offcanvas-body > :not(.collapse-horizontal) { + min-width: var(--#{$prefix}side-nav-width); min-height: 100%; } @@ -51,13 +55,22 @@ } } - .collapse-horizontal > * { - width: calc(var(--#{$prefix}offcanvas-width) - var(--#{$prefix}side-nav-width) - var(--#{$prefix}side-nav-border-width)); // stylelint-disable-line function-disallowed-list - max-width: calc(100vw - var(--#{$prefix}side-nav-border-width) * 2 - var(--#{$prefix}side-nav-width)); // stylelint-disable-line function-disallowed-list + .tab-content { // to change after #1427 is merged padding: 0; border: 0; } + .collapse-horizontal { + height: 0; + min-height: unset; + margin-left: var(--#{$prefix}side-nav-width); + + > * { + width: calc(var(--#{$prefix}offcanvas-width) - var(--#{$prefix}side-nav-width)); // stylelint-disable-line function-disallowed-list + max-width: calc(100vw - var(--#{$prefix}side-nav-border-width) * 2 - var(--#{$prefix}side-nav-width)); // stylelint-disable-line function-disallowed-list + } + } + .side-nav-item { // Here to be more specific than other classes display: flex; align-items: center; @@ -81,12 +94,17 @@ } .side-nav-collapse { + display: none; justify-content: center; width: subtract(var(--#{$prefix}side-nav-width), var(--#{$prefix}side-nav-border-width)); - margin: 0 0 0 auto; + padding-left: 0; background: unset !important; // stylelint-disable-line declaration-no-important @include caret(start); + @include media-breakpoint-up(lg) { + display: flex; + } + &::before { margin: 0; border-right-color: var(--#{$prefix}side-nav-color); @@ -98,12 +116,7 @@ } } - &.offcanvas-end .side-nav-collapse { - margin: 0 auto 0 0; - @include caret(end); - } - - .focus-visible { + [data-focus-visible-added] { z-index: 3; outline: var(--#{$prefix}side-nav-active-border-color) solid 3px; outline-offset: -3px; @@ -123,43 +136,23 @@ --#{$prefix}offcanvas-width: 300px; .offcanvas-body { - width: auto; - min-width: var(--#{$prefix}side-nav-width); - height: 100%; - @include media-breakpoint-up(lg) { position: absolute; } } - - .collapse-horizontal { - margin-left: var(--#{$prefix}side-nav-width); - - @include media-breakpoint-down(lg) { - display: none; - } - } } .side-nav-collapsible-content { - --#{$prefix}side-nav-width: calc(var(--#{$prefix}side-nav-icon-size) + var(--#{$prefix}side-nav-icon-margin-x) * 2); // stylelint-disable-line function-disallowed-list - --#{$prefix}side-nav-bg: #{linear-gradient(to right, $gray-900, $gray-900 subtract(var(--#{$prefix}side-nav-width), var(--#{$prefix}side-nav-border-width)), $white subtract(var(--#{$prefix}side-nav-width), var(--#{$prefix}side-nav-border-width)))}; - --#{$prefix}offcanvas-width: 326px; - - .offcanvas-body { - height: 100%; - - @include media-breakpoint-up(lg) { - position: absolute; - } - } + --#{$prefix}side-nav-bg: #{linear-gradient(to right, $gray-900, $gray-900 var(--#{$prefix}side-nav-width), $white var(--#{$prefix}side-nav-width))}; + --#{$prefix}side-nav-border-color: #{$gray-700}; + --#{$prefix}offcanvas-width: 325px; - svg, - img { - margin-right: subtract(var(--#{$prefix}side-nav-icon-margin-x), var(--#{$prefix}side-nav-border-width)); + .offcanvas-header, + .show + * { + --#{$prefix}side-nav-border-color: #{$gray-500}; } - [data-bs-toggle="collapse"].collapsed::before { + .side-nav-collapse.collapsed::before { border-right-color: $white; } } diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index afdbc2728e..d20aea47c1 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -10,23 +10,24 @@ toc: true Side navigation is based on `.offcanvas-*` class. Please refer to [its documentation]({{< docsref "/components/offcanvas#responsive" >}}) to learn more about its behavior. -Side navigation may need the Javascript from Accordions, Collapse, Tabs or Tooltips (in addition of its own), depending on the implemented navigation, to work correctly. +Side navigation may need the Javascript from Accordions, Collapse, Tabs or Tooltips, depending on the implemented navigation, to work correctly. ## Basic -{{< example class="p-0" >}} +{{< example class="p-0 d-block d-lg-flex" >}} -
        +
        -
        + +

        +
        {{< /example >}} @@ -150,13 +152,15 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
        -
         
        -
        - +
         
        +
        + + +
        • -
        +
        @@ -192,18 +197,21 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e {{< example class="p-0 scrollspy-example-2 d-block d-lg-flex" >}} -
        -
        +
        +
        -
        -
        - -
        +
        +
         
        +
        + + + +
        -
        -
        -
        -

        Dashboard

        -
        -
        -

        Financial

        -
        -
        -

        Charts

        -
        +
        +
        +

        Dashboard

        +
        +
        +

        Financial

        +
        +
        +

        Charts

        +
        @@ -262,8 +269,8 @@ Side navigation comes with a dark variant: `.side-nav-dark`.

        @@ -332,7 +339,7 @@ Side navigation comes with a dark variant: `.side-nav-dark`.

        From b39a02d8f14f147ebffec88f15ec470d97cf34eb Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 16 Aug 2022 12:02:59 +0200 Subject: [PATCH 10/35] Fix issues + add static side navigation --- scss/_side-navigation.scss | 28 ++++++++++ .../docs/5.2/components/side-navigation.md | 56 +++++++++++++++++-- 2 files changed, 80 insertions(+), 4 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index 1b384c3fe9..3078a3f28d 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -38,6 +38,11 @@ .offcanvas-body > :not(.collapse-horizontal) { min-width: var(--#{$prefix}side-nav-width); min-height: 100%; + background: var(--#{$prefix}side-nav-bg); + } + + .offcanvas-body { + min-height: subtract(100%, var(--#{$prefix}side-nav-item-height)); } .accordion { @@ -69,6 +74,10 @@ width: calc(var(--#{$prefix}offcanvas-width) - var(--#{$prefix}side-nav-width)); // stylelint-disable-line function-disallowed-list max-width: calc(100vw - var(--#{$prefix}side-nav-border-width) * 2 - var(--#{$prefix}side-nav-width)); // stylelint-disable-line function-disallowed-list } + + &:not(.show):not(.collapsing) + * .tab-content { + display: none; + } } .side-nav-item { // Here to be more specific than other classes @@ -136,8 +145,17 @@ --#{$prefix}offcanvas-width: 300px; .offcanvas-body { + & > :not(.collapse-horizontal) { + min-height: subtract(100%, var(--#{$prefix}side-nav-item-height)); + } + @include media-breakpoint-up(lg) { position: absolute; + min-height: 100%; + + & > :not(.collapse-horizontal) { + min-height: 100%; + } } } } @@ -156,3 +174,13 @@ border-right-color: $white; } } + +.side-nav-static { + width: auto; + + .offcanvas-body { + @include media-breakpoint-up(lg) { + position: relative; + } + } +} diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 35138a81ee..5f1e5bbad8 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -155,7 +155,55 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
         
        - + + +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        + +
        +

        +

        +
        test
        +{{< /example >}} + +## Static collapsible with title + +{{< example class="p-0 scrollspy-example-2 d-block d-lg-flex" >}} + + +
        +
        + +
        +
        +
         
        +
        + +
        • @@ -235,13 +283,13 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
        -
        +

        Dashboard

        -
        +

        Financial

        -
        +

        Charts

        From d30d9fb8705ab455ee094cae0fb2bc551b7d4b5d Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 16 Aug 2022 16:51:58 +0200 Subject: [PATCH 11/35] Adding example in collapsible with content + handle overflow --- scss/_side-navigation.scss | 10 +- .../docs/5.2/components/side-navigation.md | 230 +++++++++++++----- 2 files changed, 169 insertions(+), 71 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index 3078a3f28d..2c09675b75 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -3,7 +3,7 @@ --#{$prefix}side-nav-color: #{$black}; --#{$prefix}side-nav-bg: #{$white}; --#{$prefix}side-nav-hover-bg: #{$gray-300}; - --#{$prefix}side-nav-active-bg: #{$gray-500}; + --#{$prefix}side-nav-active-bg: #{$gray-400}; --#{$prefix}side-nav-active-border-color: var(--#{$prefix}link-hover-color); --#{$prefix}side-nav-icon-size: 1.5625rem; --#{$prefix}side-nav-icon-margin-x: 15px; @@ -17,7 +17,7 @@ width: var(--#{$prefix}side-nav-width); height: 100%; - overflow: auto; + overflow: hidden auto; svg, img { @@ -86,15 +86,16 @@ width: 100%; height: var(--#{$prefix}side-nav-item-height); padding: 0 0 0 var(--#{$prefix}side-nav-item-padding-left); + margin: 0; overflow: hidden; color: var(--#{$prefix}side-nav-color); text-decoration: none; white-space: nowrap; - background: var(--#{$prefix}side-nav-bg); + background-color: var(--#{$prefix}side-nav-bg); border: 0; &:hover { - background: var(--#{$prefix}side-nav-hover-bg); + background-color: var(--#{$prefix}side-nav-hover-bg); } &.active { @@ -152,6 +153,7 @@ @include media-breakpoint-up(lg) { position: absolute; min-height: 100%; + overflow: hidden auto; & > :not(.collapse-horizontal) { min-height: 100%; diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 5f1e5bbad8..5c03f44165 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -158,72 +158,24 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
          -
        • -
          • -
        • -
          • -
        • - -
          • -
        - -
        -
        -
        -
        test
        -{{< /example >}} - -## Static collapsible with title - -{{< example class="p-0 scrollspy-example-2 d-block d-lg-flex" >}} - - -
        -
        - -
        -
        -
         
        -
        - - - -
          -
        • - -
          • -
        • - -
          • -
        • -
          • -
        • +
          • -
        • +
        -
        -
        -

        Dashboard

        + +
        +
        +

        Dashboard

        -
        -

        Financial

        +
        +
        +

        Financial

        + +
        +
        +

        + +

        +
        +
        + +
        +
        +
        +
        +

        + +

        +
        +
        + +
        +
        +
        +
        +

        + +

        +
        +
        + +
        +
        +
        +
        +

        + +

        +
        +
        + +
        +
        +
        +
        +

        + +

        +
        +
        + +
        +
        +
        +
        +
        +
        -
        -

        Charts

        +
        +
        +

        Charts

        + +
        @@ -301,16 +347,66 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
        test
        {{< /example >}} +## Static collapsible + +Collapsible side navigation come with a static variant: `.side-nav-static`. + +{{< example class="p-0 scrollspy-example-2 d-block d-lg-flex" >}} + + +
        +
        + +
        +
        +
         
        +
        + + + +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        + +
        +
        +
        +
        test
        +{{< /example >}} + ## Dark variant Side navigation comes with a dark variant: `.side-nav-dark`. {{< example class="p-0" >}} - + -
        +
        - +
        From dd4fb6141b6220d66113a384ff675ac582adbeac Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 22 Aug 2022 11:36:37 +0200 Subject: [PATCH 12/35] Fix from reviews --- scss/_side-navigation.scss | 5 +- site/assets/scss/_component-examples.scss | 6 + .../docs/5.2/components/side-navigation.md | 262 +++++++++++++++--- 3 files changed, 225 insertions(+), 48 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index 2c09675b75..f9b4d2479a 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -15,6 +15,7 @@ --#{$prefix}offcanvas-padding-y: 0; --#{$prefix}offcanvas-border-width: 0; + flex-shrink: 0; width: var(--#{$prefix}side-nav-width); height: 100%; overflow: hidden auto; @@ -50,6 +51,7 @@ --#{$prefix}accordion-body-padding-x: 0; --#{$prefix}accordion-body-padding-y: 0; --#{$prefix}accordion-btn-font-size: 1rem; + --#{$prefix}accordion-btn-font-weight: #{$font-weight-normal}; .accordion-body { --#{$prefix}side-nav-item-padding-left: calc(var(--#{$prefix}side-nav-icon-size) + var(--#{$prefix}side-nav-icon-margin-x) * 2); // stylelint-disable-line function-disallowed-list @@ -84,13 +86,12 @@ display: flex; align-items: center; width: 100%; - height: var(--#{$prefix}side-nav-item-height); + min-height: var(--#{$prefix}side-nav-item-height); padding: 0 0 0 var(--#{$prefix}side-nav-item-padding-left); margin: 0; overflow: hidden; color: var(--#{$prefix}side-nav-color); text-decoration: none; - white-space: nowrap; background-color: var(--#{$prefix}side-nav-bg); border: 0; diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 089b45cd1f..cd39ded2ce 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -242,6 +242,12 @@ } // Boosted mod +.side-nav-example { + @include media-breakpoint-up(lg) { + height: 21.875rem; + } +} + .simple-list-example-scrollspy .active { color: var(--#{$prefix}link-hover-color); } diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 5c03f44165..6e86f07b7b 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -26,7 +26,7 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt

        -

        +
        +

        + +

        +
        +
        + +
        +
        +

        -

        +
        + +
        +
        +
        Content that should fill the remaining space.
        +{{< /example >}} + +{{< example class="p-0 d-block d-lg-flex" >}} + + +
        +
        + +
        +
        + +
        +
        +

        + +

        +
        +
        +
        +
        +

        + +

        +
        +
        + +
        +
        +
        +
        +

        + +

        +
        +
        + +
        +
        +
        +
        +

        + +

        +
        +
        + +
        +
        +
        +
        +
        +
        +

        -

        @@ -136,15 +238,34 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
        +
        +

        + +

        +
        +
        + +
        +
        +
        +
        Content that should fill the remaining space.
        {{< /example >}} ## Collapsible with title -{{< example class="p-0 scrollspy-example-2 d-block d-lg-flex" >}} +{{< example class="p-0 side-nav-example d-block d-lg-flex" >}}
        @@ -157,7 +278,7 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt -
          +
            • -
          • - -
            • +
          • + +
        -
        test
        +
        Content that should fill the remaining space.
        {{< /example >}} ## Collapsible with content Strongly WIP, onclick functions are a test without extra JS. But fully working example atm. -{{< example class="p-0 scrollspy-example-2 d-block d-lg-flex" >}} +{{< example class="p-0 side-nav-example d-block d-lg-flex" >}}
        @@ -208,7 +329,7 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
        -
          +
            • -
          • - -
            • +
          • + +
          @@ -344,17 +465,17 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
        -
        test
        +
        Content that should fill the remaining space.
        {{< /example >}} -## Static collapsible +## Right side Collapsible side navigation come with a static variant: `.side-nav-static`. -{{< example class="p-0 scrollspy-example-2 d-block d-lg-flex" >}} +{{< example class="p-0 side-nav-example d-block d-lg-flex" >}} -
        +
        @@ -364,7 +485,7 @@ Collapsible side navigation come with a static variant: `.side-nav-static`. -
          +
            • +
          • + +
            • +
          + +
        +
        +
        +
        Content that should fill the remaining space.
        +{{< /example >}} + +## Collapsible with title + +{{< example class="p-0 side-nav-example d-block d-lg-flex" >}} + + +
        +
        + +
        +
        +
         
        +
        + + + +
          +
        • + +
          • +
        • + +
        -
        test
        +
        Content that should fill the remaining space.
        {{< /example >}} ## Dark variant Side navigation comes with a dark variant: `.side-nav-dark`. -{{< example class="p-0" >}} - +{{< example class="p-0 d-block d-lg-flex bg-dark" >}} +
        @@ -412,7 +581,7 @@ Side navigation comes with a dark variant: `.side-nav-dark`.

        -

        -

        -

        -
        +
        • Label
          • @@ -502,15 +671,15 @@ Side navigation comes with a dark variant: `.side-nav-dark`.
        -

        -

        -
        +
        • Label
          • @@ -525,4 +694,5 @@ Side navigation comes with a dark variant: `.side-nav-dark`.
        +
        Content that should fill the remaining space.
        {{< /example >}} From 222d9c80de2519e5a9bcf473861e0170d95d0ca9 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 22 Aug 2022 11:56:34 +0200 Subject: [PATCH 13/35] Handle scrollbar --- scss/_side-navigation.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index f9b4d2479a..9c2dcbf0ac 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -44,6 +44,16 @@ .offcanvas-body { min-height: subtract(100%, var(--#{$prefix}side-nav-item-height)); + scrollbar-width: thin; + + &::-webkit-scrollbar { + width: 9px; + background-color: $gray-300; + } + + &::-webkit-scrollbar-thumb { + background-color: $gray-500; + } } .accordion { From ad4b8ce388622ed6c734bdf0e60ba0afce1d1fba Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 23 Aug 2022 11:12:08 +0200 Subject: [PATCH 14/35] Changing the doc + handle some minor bugs --- scss/_side-navigation.scss | 75 +- scss/_variables.scss | 29 + .../docs/5.2/components/side-navigation.md | 663 ++++++++++-------- 3 files changed, 466 insertions(+), 301 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index 9c2dcbf0ac..ab8ffc00c2 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -1,16 +1,19 @@ .side-nav { - --#{$prefix}side-nav-width: 18.75rem; - --#{$prefix}side-nav-color: #{$black}; - --#{$prefix}side-nav-bg: #{$white}; - --#{$prefix}side-nav-hover-bg: #{$gray-300}; - --#{$prefix}side-nav-active-bg: #{$gray-400}; - --#{$prefix}side-nav-active-border-color: var(--#{$prefix}link-hover-color); - --#{$prefix}side-nav-icon-size: 1.5625rem; - --#{$prefix}side-nav-icon-margin-x: 15px; - --#{$prefix}side-nav-item-height: 2.5rem; - --#{$prefix}side-nav-item-padding-left: var(--#{$prefix}side-nav-icon-margin-x); - --#{$prefix}side-nav-border-width: 1px; - --#{$prefix}side-nav-border-color: #{$gray-500}; + // scss-docs-start side-nav-css-vars + --#{$prefix}side-nav-width: #{$side-nav-width}; + --#{$prefix}side-nav-color: #{$side-nav-color}; + --#{$prefix}side-nav-bg: #{$side-nav-bg}; + --#{$prefix}side-nav-border-width: #{$side-nav-border-width}; + --#{$prefix}side-nav-border-color: #{$side-nav-border-color}; + --#{$prefix}side-nav-icon-size: #{$side-nav-icon-size}; + --#{$prefix}side-nav-icon-margin-x: #{$side-nav-icon-margin-x}; + --#{$prefix}side-nav-item-height: #{$side-nav-item-height}; + --#{$prefix}side-nav-item-padding-left: #{$side-nav-item-padding-left}; + --#{$prefix}side-nav-item-hover-bg: #{$side-nav-item-hover-bg}; + --#{$prefix}side-nav-item-active-bg: #{$side-nav-item-active-bg}; + --#{$prefix}side-nav-item-active-border-color: #{$side-nav-item-active-border-color}; + // scss-docs-end side-nav-css-vars + --#{$prefix}offcanvas-width: var(--#{$prefix}side-nav-width); --#{$prefix}offcanvas-padding-x: 0; --#{$prefix}offcanvas-padding-y: 0; --#{$prefix}offcanvas-border-width: 0; @@ -19,6 +22,16 @@ width: var(--#{$prefix}side-nav-width); height: 100%; overflow: hidden auto; + scrollbar-width: thin; + + &::-webkit-scrollbar { + width: 9px; + background-color: $gray-300; + } + + &::-webkit-scrollbar-thumb { + background-color: $gray-500; + } svg, img { @@ -46,6 +59,10 @@ min-height: subtract(100%, var(--#{$prefix}side-nav-item-height)); scrollbar-width: thin; + @include media-breakpoint-up(lg) { + min-height: 100%; + } + &::-webkit-scrollbar { width: 9px; background-color: $gray-300; @@ -60,7 +77,7 @@ --#{$prefix}accordion-border-width: 0; --#{$prefix}accordion-body-padding-x: 0; --#{$prefix}accordion-body-padding-y: 0; - --#{$prefix}accordion-btn-font-size: 1rem; + --#{$prefix}accordion-btn-font-size: #{$font-size-base}; --#{$prefix}accordion-btn-font-weight: #{$font-weight-normal}; .accordion-body { @@ -106,11 +123,11 @@ border: 0; &:hover { - background-color: var(--#{$prefix}side-nav-hover-bg); + background-color: var(--#{$prefix}side-nav-item-hover-bg); } &.active { - background: linear-gradient(to right, var(--#{$prefix}side-nav-active-border-color), var(--#{$prefix}side-nav-active-border-color) 4px, var(--#{$prefix}side-nav-active-bg) 4px, var(--#{$prefix}side-nav-active-bg)); + background: linear-gradient(to right, var(--#{$prefix}side-nav-item-active-border-color), var(--#{$prefix}side-nav-item-active-border-color) 4px, var(--#{$prefix}side-nav-item-active-bg) 4px, var(--#{$prefix}side-nav-item-active-bg)); } } @@ -139,22 +156,26 @@ [data-focus-visible-added] { z-index: 3; - outline: var(--#{$prefix}side-nav-active-border-color) solid 3px; + outline: var(--#{$prefix}side-nav-item-active-border-color) solid 3px; outline-offset: -3px; } } .side-nav-dark { - --#{$prefix}side-nav-color: #{$white}; - --#{$prefix}side-nav-bg: #{$gray-900}; - --#{$prefix}side-nav-hover-bg: #{$black}; - --#{$prefix}side-nav-active-bg: #{$gray-700}; - --#{$prefix}side-nav-border-color: #{$gray-700}; + // scss-docs-start side-nav-dark-css-vars + --#{$prefix}side-nav-color: #{$side-nav-dark-color}; + --#{$prefix}side-nav-bg: #{$side-nav-dark-bg}; + --#{$prefix}side-nav-border-color: #{$side-nav-dark-border-color}; + --#{$prefix}side-nav-item-hover-bg: #{$side-nav-dark-item-hover-bg}; + --#{$prefix}side-nav-item-active-bg: #{$side-nav-dark-item-active-bg}; + // scss-docs-end side-nav-dark-css-vars } .side-nav-collapsible { - --#{$prefix}side-nav-width: calc(var(--#{$prefix}side-nav-icon-size) + var(--#{$prefix}side-nav-icon-margin-x) * 2); // stylelint-disable-line function-disallowed-list - --#{$prefix}offcanvas-width: 300px; + // scss-docs-start side-nav-collapsible-css-vars + --#{$prefix}side-nav-width: #{$side-nav-collapsible-closed-width}; + --#{$prefix}offcanvas-width: #{$side-nav-collapsible-opened-width}; + // scss-docs-end side-nav-collapsible-css-vars .offcanvas-body { & > :not(.collapse-horizontal) { @@ -174,9 +195,11 @@ } .side-nav-collapsible-content { - --#{$prefix}side-nav-bg: #{linear-gradient(to right, $gray-900, $gray-900 var(--#{$prefix}side-nav-width), $white var(--#{$prefix}side-nav-width))}; - --#{$prefix}side-nav-border-color: #{$gray-700}; - --#{$prefix}offcanvas-width: 325px; + // scss-docs-start side-nav-collapsible-content-css-vars + --#{$prefix}side-nav-bg: #{$side-nav-collapsible-content-bg}; + --#{$prefix}side-nav-border-color: #{$side-nav-collapsible-content-border-color}; + --#{$prefix}offcanvas-width: #{$side-nav-collapsible-content-opened-width}; + // scss-docs-end side-nav-collapsible-content-css-vars .offcanvas-header, .show + * { diff --git a/scss/_variables.scss b/scss/_variables.scss index a8707ff000..459fc25445 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2072,4 +2072,33 @@ $footer-terms-padding-y-md: $spacer * 1.1 !default; $footer-gap: $spacer * .75 !default; $footer-gap-xl: $spacer * 1.7 !default; // scss-docs-end footer + +//// Side navigation +// scss-docs-start side-nav-variables +$side-nav-width: $spacer * 15 !default; +$side-nav-color: $black !default; +$side-nav-bg: $white !default; +$side-nav-border-width: map-get($border-widths, 1) !default; +$side-nav-border-color: $gray-500 !default; +$side-nav-icon-size: $spacer * 1.25 !default; +$side-nav-icon-margin-x: 15px !default; +$side-nav-item-height: $spacer * 2 !default; +$side-nav-item-padding-left: $side-nav-icon-margin-x !default; +$side-nav-item-hover-bg: $gray-300 !default; +$side-nav-item-active-bg: $gray-400 !default; +$side-nav-item-active-border-color: var(--#{$prefix}link-hover-color) !default; + +$side-nav-collapsible-closed-width: calc(var(--#{$prefix}side-nav-icon-size) + var(--#{$prefix}side-nav-icon-margin-x) * 2) !default; // stylelint-disable-line function-disallowed-list +$side-nav-collapsible-opened-width: $spacer * 15 !default; + +$side-nav-collapsible-content-bg: linear-gradient(to right, $gray-900, $gray-900 var(--#{$prefix}side-nav-width), $white var(--#{$prefix}side-nav-width)) !default; +$side-nav-collapsible-content-border-color: $gray-700 !default; +$side-nav-collapsible-content-opened-width: $spacer * 16.25 !default; + +$side-nav-dark-color: $white !default; +$side-nav-dark-bg: $gray-900 !default; +$side-nav-dark-border-color: $gray-700 !default; +$side-nav-dark-item-hover-bg: $black !default; +$side-nav-dark-item-active-bg: $gray-700 !default; +// scss-docs-end side-nav-variables // End mod diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 6e86f07b7b..79e0b1a93e 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -4,22 +4,29 @@ title: Side Navigation description: Documentation and examples for Boosted's exclusive Brand responsive side navigation. group: components toc: true +added: "5.3" --- ## How it works -Side navigation is based on `.offcanvas-*` class. Please refer to [its documentation]({{< docsref "/components/offcanvas#responsive" >}}) to learn more about its behavior. +Side navigation is based on `.offcanvas-lg` class. Please refer to [Offcanvas]({{< docsref "/components/offcanvas#responsive" >}}) to learn more about its behavior. Since it uses [responsive offcanvas]({{< docsref "/components/offcanvas#responsive" >}}), please resize your browser to see its responsive behavior. -Side navigation may need the Javascript from Accordions, Collapse, Tabs or Tooltips, depending on the implemented navigation, to work correctly. +In the side navigation, each displayed element should have `.side-nav-item` to ensure correct size and behavior. -## Basic +{{< callout warning >}} +In order to make side navigation work properly, please make sure that the Javascript files from [Collapse]({{< docsref "/components/collapse#usage" >}}) and [Tabs]({{< docsref "/components/navs-tabs#javascript-behavior" >}}) are imported in your project. +{{< /callout >}} -{{< example class="p-0 d-block d-lg-flex" >}} - +## Examples -
        +### Basic + +{{< example class="p-lg-0 d-block d-lg-flex side-nav-example" >}} + + +
        - +
        @@ -27,9 +34,6 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt

        @@ -48,8 +52,6 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
      • Label
      • Label
      • Label
        • -
      • Label
        • -
      • Label
      @@ -66,8 +68,6 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
    • Label
    • Label
    • Label
      • -
    • Label
      • -
    • Label
    @@ -84,8 +84,6 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
  • Label
  • Label
  • Label
    • -
  • Label
    • -
  • Label
@@ -94,12 +92,10 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
+

@@ -109,18 +105,14 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
  • Label
  • Label
  • Label
    • -
  • Label
    • -
  • Label
    • +

    @@ -130,8 +122,6 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
  • Label
  • Label
  • Label
    • -
  • Label
    • -
  • Label
    • @@ -140,78 +130,78 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
    +
    Content that should fill the remaining space.
    {{< /example >}} -{{< example class="p-0 d-block d-lg-flex" >}} - +### Basic with icons -
    +{{< example class="p-lg-0 d-block d-lg-flex side-nav-example" >}} + + +
    - +
    -
    +
    -

    -

    -
    +
    -
    +
    -

    -

    -
    -

    -

    -
    -

    -

    -
    + @@ -220,38 +210,42 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
    +
    -

    -

    - +
    -

    -

    -
    + @@ -260,17 +254,28 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
    +
    Content that should fill the remaining space.
    {{< /example >}} -## Collapsible with title +### Collapsible + +To use the collapsible behavior, know that: + +- The toggle arrow is displayed by adding `.side-nav-collapse` to an empty `.side-nav-item`. +- The collapsible navigation width can be set by: + - `--bs-side-nav-width` for the closed state. + - `--bs-offcanvas-width` for the opened state. +- The collapsible side navigation uses [Tooltips]({{< docsref "/components/tooltips#usage" >}}) internally. -{{< example class="p-0 side-nav-example d-block d-lg-flex" >}} - +#### Collapsible basic -
    +{{< example class="p-lg-0 side-nav-example d-block d-lg-flex" >}} + + +
    - +
     
    @@ -280,47 +285,51 @@ Side navigation may need the Javascript from Accordions, Collapse, Tabs or Toolt
    +
    Content that should fill the remaining space.
    {{< /example >}} -## Collapsible with content +#### Collapsible with drawer content -Strongly WIP, onclick functions are a test without extra JS. But fully working example atm. +The collapsible side navigation comes with ready to use `onclick` calls: +- On the Offcanvas toggler button to `show` its content. +- On the Offcanvas close button to `hide` its content. +- On each menu item to `show` its content. (nav-item) -{{< example class="p-0 side-nav-example d-block d-lg-flex" >}} - +{{< example class="p-lg-0 side-nav-example d-block d-lg-flex" >}} + -
    +
    - +
     
    @@ -360,6 +369,18 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e

    Dashboard

    + +
    +
    +

    Charts

    + +
    +
    +

    Financial

    @@ -381,6 +402,7 @@ Strongly WIP, onclick functions are a test without extra JS. But fully working e
    +

    +

    +

    +

    -
    -
    -

    Charts

    - -
    -
    +
    Content that should fill the remaining space.
    {{< /example >}} -## Right side - -Collapsible side navigation come with a static variant: `.side-nav-static`. - -{{< example class="p-0 side-nav-example d-block d-lg-flex" >}} - - -
    -
    - -
    -
    -
     
    -
    - - +## Static -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    +Collapsible side navigation comes with a static variant: `.side-nav-static`. +
    + +
    +
    + +
    +
    +
     
    +
    + + +
    +
    Content that should fill the remaining space.
    -
    Content that should fill the remaining space.
    -{{< /example >}} -## Collapsible with title +```html + -{{< example class="p-0 side-nav-example d-block d-lg-flex" >}} - +
    +
    ...
    +
    ...
    +
    -
    -
    - -
    -
    -
     
    -
    +
    Content that should fill the remaining space.
    +``` - +## Right sided -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    +Side navigation comes with a right sided variant: `.offcanvas-end`. +
    + +
    +
    + +
    +
    +
     
    +
    + +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    Content that should fill the remaining space.
    + +```html + + +
    +
    ...
    +
    ...
    +
    +
    Content that should fill the remaining space.
    -{{< /example >}} +``` ## Dark variant Side navigation comes with a dark variant: `.side-nav-dark`. -{{< example class="p-0 d-block d-lg-flex bg-dark" >}} - +{{< callout info >}} +Dark variant can be applied on any example except the [Collapsible with drawer content](#collapsible-with-drawer-content) one. +{{< /callout >}} -
    -
    - -
    -
    -
    -
    -

    - -

    -
    -
    -
    -
    -

    - -

    -
    -
    - +
    + +
    +
    + +
    +
    +
    +
    +

    + +

    +
    +
    +
    +
    +

    + +

    +
    +
    + +
    -
    -
    -

    - -

    -
    -
    - +
    +

    + +

    +
    +
    + +
    -
    -
    -

    - -

    -
    -
    - +
    +

    + +

    +
    +
    + +
    -
    -
    -

    - -

    -
    -
    - +
    +

    + +

    +
    +
    + +
    -
    -
    -

    - -

    -
    -
    - +
    +

    + +

    +
    +
    + +
    +
    Content that should fill the remaining space.
    + +```html + + +
    +
    ...
    +
    ...
    +
    +
    Content that should fill the remaining space.
    -{{< /example >}} +``` + +
    + +
    +
    + +
    +
    +
     
    +
    + + +
    +
    +
    +
    Content that should fill the remaining space.
    +
    + +```html + + +
    +
    ...
    +
    ...
    +
    + +
    Content that should fill the remaining space.
    +``` + +## CSS + +### Variables + +As part of Boosted's evolving CSS variables approach, side navigation now use local CSS variables on `.side-nav` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="side-nav-css-vars" file="scss/_side-navigation.scss" >}} + +Some additional CSS variables are also present on `.side-nav-collapsible`: + +{{< scss-docs name="side-nav-collapsible-css-vars" file="scss/_side-navigation.scss" >}} + +Some additional CSS variables are also present on `.side-nav-collapsible-content`: + +{{< scss-docs name="side-nav-collapsible-content-css-vars" file="scss/_side-navigation.scss" >}} + +Customization through CSS variables can be seen on the `.side-nav-dark` modifier class where we override specific values without adding duplicate CSS selectors. + +{{< scss-docs name="side-nav-dark-css-vars" file="scss/_side-navigation.scss" >}} + +### Sass variables + +{{< scss-docs name="side-nav-variables" file="scss/_variables.scss" >}} From 840a88c07266cbefef13871ccb256e823b45cd74 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 23 Aug 2022 11:29:14 +0200 Subject: [PATCH 15/35] Fix CI --- .bundlewatch.config.json | 4 ++-- scss/_side-navigation.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index eb2ed3b877..0c8fcf4e60 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "36.5 kB" + "maxSize": "37.5 kB" }, { "path": "./dist/css/boosted.min.css", - "maxSize": "33.5 kB" + "maxSize": "34.25 kB" }, { "path": "./dist/js/boosted.bundle.js", diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index ab8ffc00c2..e5d6ed7eb1 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -178,7 +178,7 @@ // scss-docs-end side-nav-collapsible-css-vars .offcanvas-body { - & > :not(.collapse-horizontal) { + > :not(.collapse-horizontal) { min-height: subtract(100%, var(--#{$prefix}side-nav-item-height)); } @@ -187,7 +187,7 @@ min-height: 100%; overflow: hidden auto; - & > :not(.collapse-horizontal) { + > :not(.collapse-horizontal) { min-height: 100%; } } From 947954235e7c3a64d921814f6bab6baecbf198b1 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 14 Dec 2022 15:11:51 +0100 Subject: [PATCH 16/35] Implementing design things --- scss/_side-navigation.scss | 17 ++++++-- .../docs/5.2/components/side-navigation.md | 43 ++++++------------- 2 files changed, 26 insertions(+), 34 deletions(-) diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index e5d6ed7eb1..16f8018353 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -80,6 +80,10 @@ --#{$prefix}accordion-btn-font-size: #{$font-size-base}; --#{$prefix}accordion-btn-font-weight: #{$font-weight-normal}; + .accordion-button::after { + margin-right: 15px; + } + .accordion-body { --#{$prefix}side-nav-item-padding-left: calc(var(--#{$prefix}side-nav-icon-size) + var(--#{$prefix}side-nav-icon-margin-x) * 2); // stylelint-disable-line function-disallowed-list @@ -114,7 +118,7 @@ align-items: center; width: 100%; min-height: var(--#{$prefix}side-nav-item-height); - padding: 0 0 0 var(--#{$prefix}side-nav-item-padding-left); + padding: 10px 0 12px var(--#{$prefix}side-nav-item-padding-left); margin: 0; overflow: hidden; color: var(--#{$prefix}side-nav-color); @@ -126,15 +130,20 @@ background-color: var(--#{$prefix}side-nav-item-hover-bg); } + &.active-parent.collapsed, &.active { background: linear-gradient(to right, var(--#{$prefix}side-nav-item-active-border-color), var(--#{$prefix}side-nav-item-active-border-color) 4px, var(--#{$prefix}side-nav-item-active-bg) 4px, var(--#{$prefix}side-nav-item-active-bg)); } + + &.active-parent { + background-color: var(--#{$prefix}side-nav-item-active-bg); + } } .side-nav-collapse { display: none; - justify-content: center; - width: subtract(var(--#{$prefix}side-nav-width), var(--#{$prefix}side-nav-border-width)); + justify-content: end; + width: 100%; padding-left: 0; background: unset !important; // stylelint-disable-line declaration-no-important @include caret(start); @@ -144,7 +153,7 @@ } &::before { - margin: 0; + margin-right: 23px; border-right-color: var(--#{$prefix}side-nav-color); @include transition(transform .35s ease); } diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 79e0b1a93e..7f2105bf58 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -33,7 +33,7 @@ In order to make side navigation work properly, please make sure that the Javasc

    -

    @@ -42,7 +42,7 @@ In order to make side navigation work properly, please make sure that the Javasc

    -

    @@ -148,7 +148,7 @@ In order to make side navigation work properly, please make sure that the Javasc

    -

    @@ -281,7 +281,7 @@ To use the collapsible behavior, know that:
     
    - +
    • @@ -335,7 +335,7 @@ The collapsible side navigation comes with ready to use `onclick` calls:
       
      - +
        @@ -376,7 +376,7 @@ The collapsible side navigation comes with ready to use `onclick` calls:
      @@ -388,7 +388,7 @@ The collapsible side navigation comes with ready to use `onclick` calls:

      -

      @@ -453,23 +453,6 @@ The collapsible side navigation comes with ready to use `onclick` calls:
    - -
    -

    - -

    -
    -
    - -
    -
    -
    @@ -497,7 +480,7 @@ Collapsible side navigation comes with a static variant: `.side-nav-static`.
     
    - +

    @@ -742,7 +725,7 @@ Dark variant can be applied on any example except the [Collapsible with drawer c
     
    - +
    -
    -
    -

    Charts

    - -
    -
    +
    Content that should fill the remaining space.
    +{{< /example >}} -
    -
    -

    Financial

    - -
    -
    -

    - -

    -
    -
    - -
    -
    -
    +### Collapsible with drawer content -
    -

    - -

    -
    -
    - -
    -
    -
    +Here is the `.side-nav-content-with-drawer` theme. The collapsible side navigation we provide uses [Tooltips]({{< docsref "/components/tooltips#usage" >}}) internally. -
    -

    - -

    -
    -
    - -
    -
    -
    +The collapsible side navigation with drawer content comes with ready to use `onclick` calls: +- On the Offcanvas toggler button to `show` its content. +- On the Offcanvas close button to `hide` its content. +- On each menu item to `show` its content. (nav-item) + +{{< example class="p-lg-0 side-nav-example d-block d-lg-flex" >}} + -
    -

    - -

    -
    -
    - +
    +
    + +
    +
    + + -
    @@ -469,45 +568,47 @@ The collapsible side navigation comes with ready to use `onclick` calls: ## Static -Collapsible side navigation comes with a static variant: `.side-nav-static`. +Add `.side-nav-static` to the `.side-nav` for a static variant.
    - -
    -
    - + +
    +
    +
    -
    -
     
    -
    - - -
    +
    +
    Content that should fill the remaining space.
    @@ -516,242 +617,547 @@ Collapsible side navigation comes with a static variant: `.side-nav-static`. ```html -
    +
    ...
    -
    ...
    +
    + +
    Content that should fill the remaining space.
    ``` -## Right sided +## Scrollable -Side navigation comes with a right sided variant: `.offcanvas-end`. +Even if we handle the scroll in a particular way inside our predefined themes, you may change this behavior with the `.side-nav-scrollable`. If you do so, please make sure that every part is accessible through scroll (the icon part and the content one). + +Here are some examples with the [collapsible with drawer content](#collapsible-with-drawer-content), that default to a scroll on both parts (the icon part and the content part) excluding the title. + +Here is an example including the title on the right scroll box.
    - -
    -
    - + +
    +
    +
    -
    -
     
    -
    - -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
    +
    +
    Content that should fill the remaining space.
    ```html - + -
    +
    ...
    -
    ...
    +
    + +
    Content that should fill the remaining space.
    ``` -## Dark variant - -Side navigation comes with a dark variant: `.side-nav-dark`. - -{{< callout info >}} -Dark variant can be applied on any example except the [Collapsible with drawer content](#collapsible-with-drawer-content) one. -{{< /callout >}} +Here is an example of a unique scroll box containing the two previous scroll boxes and excluding the toggle button.
    - -
    -
    - + +
    +
    +
    -
    -
    -
    -

    - -

    -
    -
    -
    -
    -

    - -

    -
    -
    - +
    + +
    +
    +
    Content that should fill the remaining space.
    +
    + +```html + + +
    +
    ...
    +
    + +
    +
    + +
    Content that should fill the remaining space.
    +``` + +Here is an example of a unique scroll box containing the both previous scroll boxes and including the toggle button. + +
    + +
    +
    + +
    +
    +
    +
    Content that should fill the remaining space.
    ```html - + -
    +
    ...
    -
    ...
    +
    + +
    Content that should fill the remaining space.
    ``` +## Right sided + +Add `.offcanvas-end` to the `.offcanvas` for a right sided variant. (only on mobile for now) +
    - -
    -
    - + +
    +
    +
    -
    -
     
    -
    - - +
    +
    +
    +
     
    + + +
    @@ -759,36 +1165,211 @@ Dark variant can be applied on any example except the [Collapsible with drawer c
    ```html - + -
    -
    ...
    -
    ...
    +
    + ...
    Content that should fill the remaining space.
    ``` -## CSS - -### Variables - -As part of Boosted's evolving CSS variables approach, side navigation now use local CSS variables on `.side-nav` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. +## Dark variant -{{< scss-docs name="side-nav-css-vars" file="scss/_side-navigation.scss" >}} +Add `.side-nav-dark` to the `.side-nav` or its children for a dark variant. For example the [collapsible side navigation with drawer content](#collapsible-with-drawer-content) is made with a part of dark variant. -Some additional CSS variables are also present on `.side-nav-collapsible`: +{{< callout info >}} +Dark variant can be applied on root of any example except the [collapsible side navigation with drawer content](#collapsible-with-drawer-content) one. +{{< /callout >}} -{{< scss-docs name="side-nav-collapsible-css-vars" file="scss/_side-navigation.scss" >}} +
    + +
    +
    + +
    +
    +
    +
    +
     
    + + +
    +
    +
    +
    +
    Content that should fill the remaining space.
    +
    -Some additional CSS variables are also present on `.side-nav-collapsible-content`: +```html + -{{< scss-docs name="side-nav-collapsible-content-css-vars" file="scss/_side-navigation.scss" >}} +
    +
    ...
    +
    +
    +
    + ... +
    +
    +
    +
    -Customization through CSS variables can be seen on the `.side-nav-dark` modifier class where we override specific values without adding duplicate CSS selectors. +
    Content that should fill the remaining space.
    +``` -{{< scss-docs name="side-nav-dark-css-vars" file="scss/_side-navigation.scss" >}} +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +

    + +

    +
    +
    +
    +
    +

    + +

    +
    +
    + +
    +
    +
    +
    +

    + +

    +
    +
    + +
    +
    +
    +
    +

    + +

    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +

    + +

    +
    +
    + +
    +
    +
    +
    + + + Financial + +
    +
    +
    +
    +
    +
    +
    Content that should fill the remaining space.
    +
    -### Sass variables +```html + + +
    +
    ...
    +
    +
    +
    + ... +
    +
    +
    +
    -{{< scss-docs name="side-nav-variables" file="scss/_variables.scss" >}} +
    Content that should fill the remaining space.
    +``` +## CSS +### Variables +### Sass Variables From 8be1c396ed18780b85e9524ab2c7f8575c47243a Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 30 Jan 2023 18:51:04 +0100 Subject: [PATCH 18/35] . --- site/content/docs/5.2/components/side-navigation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index a8c5a871c5..3841206e52 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -1266,7 +1266,7 @@ Dark variant can be applied on root of any example except the [collapsible side
    -

    +

    From 7c724d9bc5f930dcc02fd7ae1ad5e9498142c7a8 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 1 Feb 2023 17:31:42 +0100 Subject: [PATCH 19/35] Enhance doc + bundlewatch + cspell + envariable the component + small fixes + remove some utilities in markup --- .bundlewatch.config.json | 4 +- .cspell.json | 1 + scss/_side-navigation.scss | 103 +++++++----- scss/_variables.scss | 51 +++--- .../docs/5.2/components/side-navigation.md | 156 ++++++++++++------ 5 files changed, 193 insertions(+), 122 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 65fe287eff..c97f851634 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "41.0 kB" + "maxSize": "41.75 kB" }, { "path": "./dist/css/boosted.min.css", - "maxSize": "38.0 kB" + "maxSize": "38.75 kB" }, { "path": "./dist/js/boosted.bundle.js", diff --git a/.cspell.json b/.cspell.json index e930abe34c..ad79a05a81 100644 --- a/.cspell.json +++ b/.cspell.json @@ -32,6 +32,7 @@ "cssgrid", "csps", "Csvg", + "Cwdc", "Datalists", "Deduping", "Deque", diff --git a/scss/_side-navigation.scss b/scss/_side-navigation.scss index 1fd4483254..f50119a81a 100644 --- a/scss/_side-navigation.scss +++ b/scss/_side-navigation.scss @@ -1,17 +1,21 @@ .side-nav { // scss-docs-start side-nav-css-vars - --#{$prefix}side-nav-min-width: calc(var(--#{$prefix}side-nav-item-icon-size) + var(--#{$prefix}side-nav-item-spacing) * 2 - var(--#{$prefix}side-nav-border-width)); /* stylelint-disable-line function-disallowed-list */ // Needed due to an FF issue with certain numbers in `linear-gradient` (seems to be a known issue) - --#{$prefix}side-nav-max-width: 300px; - --#{$prefix}side-nav-bg: #{$white}; - --#{$prefix}side-nav-border-width: #{1px}; - --#{$prefix}side-nav-border-color: #{$gray-500}; - --#{$prefix}side-nav-item-min-height: #{$spacer * 2}; - --#{$prefix}side-nav-item-icon-size: #{$spacer * 1.25}; - --#{$prefix}side-nav-item-spacing: 15px; - --#{$prefix}side-nav-item-padding-start: 15px; - --#{$prefix}side-nav-item-color: #{$black}; - --#{$prefix}side-nav-item-hover-bg: #{$gray-300}; - --#{$prefix}side-nav-item-active-bg: #{$gray-400}; + --#{$prefix}side-nav-min-width: #{$side-nav-min-width}; + --#{$prefix}side-nav-max-width: #{$side-nav-max-width}; + --#{$prefix}side-nav-bg: #{$side-nav-bg}; + --#{$prefix}side-nav-border-width: #{$side-nav-border-width}; + --#{$prefix}side-nav-border-color: #{$side-nav-border-color}; + --#{$prefix}side-nav-item-min-height: #{$side-nav-item-min-height}; + --#{$prefix}side-nav-item-icon-size: #{$side-nav-item-icon-size}; + --#{$prefix}side-nav-item-spacing: #{$side-nav-item-spacing}; + --#{$prefix}side-nav-item-padding-top: #{$side-nav-item-padding-top}; + --#{$prefix}side-nav-item-padding-end: #{$side-nav-item-padding-end}; + --#{$prefix}side-nav-item-padding-bottom: #{$side-nav-item-padding-bottom}; + --#{$prefix}side-nav-item-padding-start: #{$side-nav-item-padding-start}; + --#{$prefix}side-nav-item-color: #{$side-nav-item-color}; + --#{$prefix}side-nav-item-hover-bg: #{$side-nav-item-hover-bg}; + --#{$prefix}side-nav-item-active-bg: #{$side-nav-item-active-bg}; + --#{$prefix}side-nav-item-active-border: #{$side-nav-item-active-border}; // scss-docs-end side-nav-css-vars position: relative; @@ -42,19 +46,24 @@ --#{$prefix}side-nav-item-padding-start: calc(var(--#{$prefix}side-nav-item-icon-size) + var(--#{$prefix}side-nav-item-spacing) * 2 - var(--#{$prefix}side-nav-border-width)); /* stylelint-disable-line function-disallowed-list */ .accordion-body { - --#{$prefix}side-nav-item-padding-start: calc(var(--#{$prefix}side-nav-item-icon-size) * 2 + var(--#{$prefix}side-nav-item-spacing) * 3 - var(--#{$prefix}side-nav-border-width)); /* stylelint-disable-line function-disallowed-list */ + --#{$prefix}side-nav-item-padding-start: calc(var(--#{$prefix}side-nav-item-icon-size) * 2 + var(--#{$prefix}side-nav-item-spacing) * 3 - var(--#{$prefix}side-nav-border-width) * 2); /* stylelint-disable-line function-disallowed-list */ } } } > * { - position: absolute; overflow: hidden; background: var(--#{$prefix}side-nav-bg); + } + + // Small trick to remove `.h-100` inside the markup + > div { + position: absolute; + height: 100%; border-right: var(--#{$prefix}side-nav-border-width) solid var(--#{$prefix}side-nav-border-color); } - &.side-nav-static > * { + &.side-nav-static > div { position: relative; } @@ -64,7 +73,7 @@ align-items: center; min-width: var(--#{$prefix}side-nav-min-width); min-height: var(--#{$prefix}side-nav-item-min-height); - padding: 8px 0 10px var(--#{$prefix}side-nav-item-padding-start); + padding: var(--#{$prefix}side-nav-item-padding-top) var(--#{$prefix}side-nav-item-padding-end) var(--#{$prefix}side-nav-item-padding-bottom) var(--#{$prefix}side-nav-item-padding-start); margin: 0; font-size: $font-size-base; line-height: $line-height-base; @@ -92,7 +101,7 @@ width: 4px; height: 100%; content: ""; - background-color: $brand-orange; + background-color: var(--#{$prefix}side-nav-item-active-border); } } @@ -101,31 +110,18 @@ width: var(--#{$prefix}side-nav-item-icon-size); min-width: var(--#{$prefix}side-nav-item-icon-size); height: var(--#{$prefix}side-nav-item-icon-size); - margin: -8px subtract(var(--#{$prefix}side-nav-item-spacing), var(--#{$prefix}side-nav-border-width)) -10px 0; - } - } - - .side-nav-scrollable { - height: subtract(100%, var(--#{$prefix}side-nav-item-min-height)); - overflow: hidden auto; - scrollbar-width: thin; - - &::-webkit-scrollbar { - width: 9px; - background-color: $gray-300; - } - - &::-webkit-scrollbar-thumb { - background-color: $gray-500; + margin: calc(-1 * var(--#{$prefix}side-nav-item-padding-top)) subtract(var(--#{$prefix}side-nav-item-spacing), var(--#{$prefix}side-nav-border-width)) calc(-1 * var(--#{$prefix}side-nav-item-padding-bottom)) 0; /* stylelint-disable-line function-disallowed-list */ } } } .side-nav-toggle { + display: flex; align-items: center; justify-content: center; width: var(--#{$prefix}side-nav-min-width); height: var(--#{$prefix}side-nav-item-min-height); + margin-left: auto; background-color: transparent; border: 0; @@ -141,10 +137,9 @@ &::after { margin-right: 1px; content: ""; - border: 7px solid transparent; + border: $caret-width solid transparent; border-right-color: var(--#{$prefix}side-nav-item-color); border-left: 0; - // @include transition(transform .35s ease); } &.collapsed::after { @@ -158,6 +153,25 @@ height: subtract(100%, var(--#{$prefix}side-nav-item-min-height)); } +.side-nav-scrollable { + height: subtract(100%, var(--#{$prefix}side-nav-item-min-height)); + overflow: hidden auto; + scrollbar-width: thin; + + &::-webkit-scrollbar { + width: 8px; + background-color: rgba($black, .1); + } + + &::-webkit-scrollbar-thumb { + background-color: rgba(192, 192, 192, .5); + + &:hover { + background-color: rgba(128, 128, 128, .6); + } + } +} + @each $breakpoint in map-keys($grid-breakpoints) { $next: breakpoint-next($breakpoint, $grid-breakpoints); $infix: breakpoint-infix($next, $grid-breakpoints); @@ -168,6 +182,10 @@ border: 0; } + .side-nav-toggle { + display: none; + } + .side-nav-content { height: 100%; } @@ -175,6 +193,7 @@ } } +// Themes .side-nav-accordion { > * { width: subtract(var(--#{$prefix}side-nav-max-width), var(--#{$prefix}side-nav-border-width)); @@ -201,17 +220,19 @@ .side-nav-content-with-drawer { background: linear-gradient(to right, #{$gray-900} 0%, #{$gray-900} 54px, #{$white} 54px, #{$white} 100%); // Needed because is used out of the side-nav context - .side-nav-toggle.collapsed::after { + .side-nav-toggle.collapsed { --#{$prefix}side-nav-item-color: #{$white}; } } +// Dark variant .side-nav-dark { // scss-docs-start side-nav-dark-css-vars - --#{$prefix}side-nav-bg: #{$gray-900}; - --#{$prefix}side-nav-border-color: #{$gray-700}; - --#{$prefix}side-nav-item-color: #{$white}; - --#{$prefix}side-nav-item-hover-bg: #{$black}; - --#{$prefix}side-nav-item-active-bg: #{$gray-700}; + --#{$prefix}side-nav-bg: #{$side-nav-bg-dark}; + --#{$prefix}side-nav-border-color: #{$side-nav-border-color-dark}; + --#{$prefix}side-nav-item-color: #{$side-nav-item-color-dark}; + --#{$prefix}side-nav-item-hover-bg: #{$side-nav-item-hover-bg-dark}; + --#{$prefix}side-nav-item-active-bg: #{$side-nav-item-active-bg-dark}; + --#{$prefix}side-nav-item-active-border: #{$side-nav-item-active-border-dark}; // scss-docs-end side-nav-dark-css-vars } diff --git a/scss/_variables.scss b/scss/_variables.scss index b22f804e57..6147430340 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2286,32 +2286,33 @@ $footer-gap-xl: $spacer * 1.7 !default; //// Side navigation // scss-docs-start side-nav-variables -// $side-nav-width: $spacer * 15 !default; -// $side-nav-color: $black !default; -// $side-nav-bg: $white !default; -// $side-nav-border-width: map-get($border-widths, 1) !default; -// $side-nav-border-color: $gray-500 !default; -// $side-nav-icon-size: $spacer * 1.25 !default; -// $side-nav-icon-margin-x: 15px !default; -// $side-nav-item-height: $spacer * 2 !default; -// $side-nav-item-padding-left: $side-nav-icon-margin-x !default; -// $side-nav-item-hover-bg: $gray-300 !default; -// $side-nav-item-active-bg: $gray-400 !default; -// $side-nav-item-active-border-color: var(--#{$prefix}link-hover-color) !default; - -// $side-nav-collapsible-closed-width: calc(var(--#{$prefix}side-nav-icon-size) + var(--#{$prefix}side-nav-icon-margin-x) * 2) !default; // stylelint-disable-line function-disallowed-list -// $side-nav-collapsible-opened-width: $spacer * 15 !default; - -// $side-nav-collapsible-content-bg: linear-gradient(to right, $gray-900, $gray-900 var(--#{$prefix}side-nav-width), $white var(--#{$prefix}side-nav-width)) !default; -// $side-nav-collapsible-content-border-color: $gray-700 !default; -// $side-nav-collapsible-content-opened-width: $spacer * 16.25 !default; - -// $side-nav-dark-color: $white !default; -// $side-nav-dark-bg: $gray-900 !default; -// $side-nav-dark-border-color: $gray-700 !default; -// $side-nav-dark-item-hover-bg: $black !default; -// $side-nav-dark-item-active-bg: $gray-700 !default; +$side-nav-min-width: calc(var(--#{$prefix}side-nav-item-icon-size) + var(--#{$prefix}side-nav-item-spacing) * 2 - var(--#{$prefix}side-nav-border-width)) !default; /* stylelint-disable-line function-disallowed-list */ +$side-nav-max-width: $offcanvas-horizontal-width !default; +$side-nav-bg: var(--#{$prefix}body-bg) !default; +$side-nav-border-width: 1px !default; +$side-nav-border-color: var(--#{$prefix}border-color-translucent) !default; + +$side-nav-item-min-height: $spacer * 2 !default; +$side-nav-item-icon-size: $spacer * 1.25 !default; +$side-nav-item-spacing: 15px !default; +$side-nav-item-padding-top: 8px !default; +$side-nav-item-padding-end: 0 !default; +$side-nav-item-padding-bottom: 10px !default; +$side-nav-item-padding-start: 15px !default; +$side-nav-item-color: var(--#{$prefix}body-color) !default; +$side-nav-item-hover-bg: var(--#{$prefix}secondary-bg) !default; +$side-nav-item-active-bg: $gray-400 !default; +$side-nav-item-active-border: $brand-orange !default; // scss-docs-end side-nav-variables + +// scss-docs-start side-nav-dark-variables +$side-nav-bg-dark: $gray-900 !default; +$side-nav-border-color-dark: $gray-700 !default; +$side-nav-item-color-dark: $white !default; +$side-nav-item-hover-bg-dark: $black !default; +$side-nav-item-active-bg-dark: $gray-700 !default; +$side-nav-item-active-border-dark: $brand-orange !default; +// scss-docs-end side-nav-dark-variables // End mod // Tags diff --git a/site/content/docs/5.2/components/side-navigation.md b/site/content/docs/5.2/components/side-navigation.md index 3841206e52..473331b64d 100644 --- a/site/content/docs/5.2/components/side-navigation.md +++ b/site/content/docs/5.2/components/side-navigation.md @@ -9,23 +9,28 @@ added: "5.3" ## How it works +Our side navigation is basically a `