diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 8aadfa898b..ff7e1ade5c 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "27.6 kB" + "maxSize": "27.8 kB" }, { "path": "./dist/css/boosted.min.css", - "maxSize": "25.3 kB" + "maxSize": "25.4 kB" }, { "path": "./dist/js/boosted.bundle.js", diff --git a/.cspell.json b/.cspell.json index 8013429e06..cc81a82f59 100644 --- a/.cspell.json +++ b/.cspell.json @@ -46,6 +46,7 @@ "favicons", "fieldsets", "flexbox", + "française", "fullscreen", "fusv", "getbootstrap", diff --git a/scss/_orange-navbar.scss b/scss/_orange-navbar.scss new file mode 100644 index 0000000000..b90bbfe412 --- /dev/null +++ b/scss/_orange-navbar.scss @@ -0,0 +1,63 @@ +// Contents +// +// Supra bar + + +// Supra bar +// +// Brand exclusive thin navbar that can be used with orange navbar +.supra { + display: none; + padding-top: 0; + padding-bottom: 0; + border-bottom: $navbar-orange-supra-border-bottom-width solid $gray-700; + + .container { + padding-right: $navbar-orange-supra-padding-x; + padding-left: $navbar-orange-supra-padding-x; + } + + @include media-breakpoint-up(md) { + display: flex; + } + + .navbar-nav .nav-link { + padding: $navbar-orange-supra-link-padding-top $navbar-orange-supra-link-padding-x $navbar-orange-supra-link-padding-bottom; + font-size: $font-size-sm; + line-height: $line-height-sm; + + &.active::before { + right: $navbar-orange-supra-link-padding-x; + bottom: -$navbar-orange-supra-border-bottom-width; + left: $navbar-orange-supra-link-padding-x; + } + + &.nav-icon { + padding: $navbar-orange-supra-icon-padding-top $navbar-orange-supra-icon-padding-x $navbar-orange-supra-icon-padding-bottom; + + svg, + img { + width: $navbar-orange-supra-icon-size; + height: $navbar-orange-supra-icon-size; + } + } + + .badge { + @extend .position-absolute; + @extend .top-0; + @extend .bg-info; + @extend .text-white; + @extend .translate-middle; + @extend .rounded-pill; + padding: $navbar-orange-supra-badge-padding-y $navbar-orange-supra-badge-padding-x; + margin-top: $navbar-orange-supra-badge-margin-top; + font-size: $font-size-base; + } + } + + .nav-item:last-of-type { + .nav-icon { + padding-right: $navbar-orange-supra-link-padding-x; + } + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 64a6aefbca..7b2f83671e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1190,11 +1190,8 @@ $navbar-nav-link-padding-x: $nav-link-padding-x * .5 !default; // Boosted mod: Orange master logo & minimizing behavior $navbar-icon-size: $spacer * 1.5 !default; -//$navbar-height: 6.25rem !default; $navbar-brand-logo-height: add($spacer * 1.5, $spacer) !default; $navbar-brand-logo-minimized-height: $spacer * 1.5 !default; -//$navbar-supra-padding-y: $navbar-brand-logo-height / 10 !default; -//$navbar-supra-padding-x: $spacer * .25 * 1.5 !default; $navbar-transition-duration: $transition-duration !default; $navbar-transition-timing-function: $transition-timing !default; $navbar-transition: padding-top $navbar-transition-duration $navbar-transition-timing-function, padding-bottom $navbar-transition-duration $navbar-transition-timing-function, $transition-focus !default; @@ -1203,6 +1200,26 @@ $navbar-brand-logo-transition: width $navbar-transition-duration $navbar $navbar-active-transition: bottom $navbar-transition-duration $navbar-transition-timing-function !default; // End mod +// Boosted mod: Orange navbar +// scss-docs-start orange-navbar-variables +$navbar-orange-supra-padding-x: .125rem !default; +$navbar-orange-supra-border-bottom-width: 1px !default; + +$navbar-orange-supra-badge-padding-y: .125rem !default; +$navbar-orange-supra-badge-padding-x: .375rem !default; +$navbar-orange-supra-badge-margin-top: map-get($spacers, 4) * .1 !default; + +$navbar-orange-supra-icon-padding-top: divide($spacer, 2) !default; +$navbar-orange-supra-icon-padding-x: .9375rem !default; +$navbar-orange-supra-icon-padding-bottom: .25rem !default; +$navbar-orange-supra-icon-size: 1.5625rem !default; + +$navbar-orange-supra-link-padding-top: .75rem !default; +$navbar-orange-supra-link-padding-x: map-get($spacers, 1) * 1.5 !default; +$navbar-orange-supra-link-padding-bottom: .6875rem !default; +// scss-docs-end orange-navbar-variables +// End mod + $navbar-brand-font-size: $font-size-base !default; // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link $navbar-brand-padding-y: null !default; diff --git a/scss/boosted.scss b/scss/boosted.scss index 6ea687872b..143c8fd2b4 100644 --- a/scss/boosted.scss +++ b/scss/boosted.scss @@ -55,6 +55,7 @@ // Boosted @import "back-to-top"; @import "stepped-process"; +@import "orange-navbar"; // Helpers @import "helpers"; diff --git a/site/content/docs/5.1/about/overview.md b/site/content/docs/5.1/about/overview.md index 8b9bf950f5..8fb22ff577 100644 --- a/site/content/docs/5.1/about/overview.md +++ b/site/content/docs/5.1/about/overview.md @@ -23,6 +23,7 @@ Boosted can be used for all **responsive web projects** for Orange group —&nbs Boosted ships with custom accessible components to suit specific needs: - [Back to top]({{< docsref "/components/back-to-top" >}}) +- [Orange Navbars]({{< docsref "/components/orange-navbar" >}}) - [Stepped process]({{< docsref "/components/stepped-process" >}}) diff --git a/site/content/docs/5.1/components/orange-navbar.md b/site/content/docs/5.1/components/orange-navbar.md new file mode 100644 index 0000000000..94b0fdc807 --- /dev/null +++ b/site/content/docs/5.1/components/orange-navbar.md @@ -0,0 +1,79 @@ +--- +layout: docs +title: Orange Navbar +description: Documentation and examples for Boosted's exclusive Brand responsive navbars. +group: components +toc: true +--- + +## How it works + +Orange navbar is based on the [navbar]({{}}) component. It adds some display management and introduces the supra bar component. +You may refer to its documentation in order to properly create and use navbars. + +## Example + +### Supra bar + +A simple navigation can be added on top of Orange navbar, it is called supra bar. Simply add the `.supra` class in your navbar declaration. + +{{< callout warning >}} +This navbar is visible only on desktop view. +{{< /callout >}} + +{{< example >}} +{{< orange-supra >}} + +{{< /orange-supra >}} +{{< /example >}} + +You can also use icons as navigation items as followed: + +{{< example >}} +{{< orange-supra >}} + +{{< /orange-supra >}} +{{< /example >}} + +You can have a complete overview of how to use supra bars in the dedicated [Design Guidelines page]({{}}) + +## Sass + +### Variables + +For more details, please have a look at the exhaustive list of available variables: + +{{< scss-docs name="orange-navbar-variables" file="scss/_variables.scss" >}} \ No newline at end of file diff --git a/site/content/docs/5.1/guidelines/global-headers.md b/site/content/docs/5.1/guidelines/global-headers.md index 8cf2c9331d..0018f1ffad 100644 --- a/site/content/docs/5.1/guidelines/global-headers.md +++ b/site/content/docs/5.1/guidelines/global-headers.md @@ -7,6 +7,70 @@ subgroup: Modules toc: true --- +## Supra bars {{< callout info >}} -The feature will be delivered with [#525]({{< param repo >}}/issues/525). +Supra bars are hidden on tablet and mobile devices.
+Based on viewport size, supra bar is hidden under 768px. {{< /callout >}} + +### Supra bar standard + +{{< anchor web-glh-sub-001 >}} + +{{< example show_markup="true" class="p-0">}} +{{< orange-supra >}} +{{< /orange-supra >}} +{{< /example >}} + +### Supra bar with language options + +{{< anchor web-glh-sub-002 >}} + +{{< example show_markup="true" class="p-0">}} +{{< orange-supra >}} + +{{< /orange-supra >}} +{{< /example >}} + +### Supra bar with actions + +{{< anchor web-glh-sub-003 >}} + +{{< example show_markup="true" class="p-0">}} +{{< orange-supra >}} + +{{< /orange-supra >}} +{{< /example >}} \ No newline at end of file diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md index c4cc98fb04..67c4d23ad6 100644 --- a/site/content/docs/5.1/migration.md +++ b/site/content/docs/5.1/migration.md @@ -333,6 +333,10 @@ Your custom Boosted CSS builds should now look something like this with a separa - Added the new [offcanvas component]({{< docsref "/components/offcanvas" >}}). +### Orange navbar + +- Breaking Supra bars now require a `.bg-dark` class. + ### Pagination - Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another. diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 9df614d7fe..e3c4d8ac37 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -74,6 +74,7 @@ - title: Navs & tabs - title: Navbar - title: Offcanvas + - title: Orange navbar - title: Pagination - title: Placeholders - title: Popovers diff --git a/site/layouts/shortcodes/orange-supra.html b/site/layouts/shortcodes/orange-supra.html new file mode 100644 index 0000000000..bae2753bbb --- /dev/null +++ b/site/layouts/shortcodes/orange-supra.html @@ -0,0 +1,15 @@ +{{- /* + Usage: `orange-supra` +*/ -}} + +{{- $input := .Inner -}} + + diff --git a/site/static/docs/5.1/assets/img/boosted-sprite.svg b/site/static/docs/5.1/assets/img/boosted-sprite.svg index fd2092a7eb..691ca60162 100644 --- a/site/static/docs/5.1/assets/img/boosted-sprite.svg +++ b/site/static/docs/5.1/assets/img/boosted-sprite.svg @@ -14,6 +14,9 @@ + + + diff --git a/site/static/docs/5.1/assets/img/navbar-contact.png b/site/static/docs/5.1/assets/img/navbar-contact.png new file mode 100644 index 0000000000..79f109d941 Binary files /dev/null and b/site/static/docs/5.1/assets/img/navbar-contact.png differ