From e744fcab5a474f88d6742bba52ef07c830f51e1f Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 30 Jun 2022 10:30:01 +0200 Subject: [PATCH] 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 e3e8bb2afd..90b4f45319 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