From 61fca19f4b707238fc456f0d437f75dfed197a3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 13 May 2022 16:15:48 +0200 Subject: [PATCH 01/38] chore(refactoring): finish remaining modifications after Bootstrap design doc refactoring --- scss/_navbar.scss | 2 -- site/assets/js/code-examples.js | 2 -- site/assets/scss/_clipboard-js.scss | 6 ------ site/assets/scss/_content.scss | 4 ---- site/assets/scss/_layout.scss | 2 -- site/assets/scss/_masthead.scss | 2 -- site/assets/scss/_navbar.scss | 2 -- site/assets/scss/_sidebar.scss | 2 -- site/assets/scss/_subnav.scss | 4 ---- 9 files changed, 26 deletions(-) diff --git a/scss/_navbar.scss b/scss/_navbar.scss index eded19a850..61d8524889 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -453,13 +453,11 @@ display: none; } - ////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////// // TODO: Is it really useful in Boosted? ////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// .offcanvas { // stylelint-disable declaration-no-important position: static; diff --git a/site/assets/js/code-examples.js b/site/assets/js/code-examples.js index 27f0625a46..0c1f2eb3f8 100644 --- a/site/assets/js/code-examples.js +++ b/site/assets/js/code-examples.js @@ -18,7 +18,6 @@ const btnTitle = 'Copy to clipboard' const btnEdit = 'Edit on StackBlitz' - // //////////////////////////////////////////////////////// // //////////////////////////////////////////////////////// // //////////////////////////////////////////////////////// // TODO: Bootstrap can remove width, height and @@ -26,7 +25,6 @@ // already does that // //////////////////////////////////////////////////////// // //////////////////////////////////////////////////////// - // //////////////////////////////////////////////////////// // Boosted mod: removed unused svg height, width and fill="currentColor" const btnHtml = [ '
', diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 0c98c22e92..8a5c419c81 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -27,13 +27,11 @@ border: 0; @include border-radius(.25rem); - //////////////////////////////////////////////////////// //////////////////////////////////////////////////////// //////////////////////////////////////////////////////// // TODO: see if we can't use a btn-* class instead //////////////////////////////////////////////////////// //////////////////////////////////////////////////////// - //////////////////////////////////////////////////////// &:hover { color: $primary; } @@ -55,25 +53,21 @@ z-index: 2; //////////////////////////////////////////////////////// //////////////////////////////////////////////////////// - //////////////////////////////////////////////////////// // TODO: check all cases // TODO: see if we can't use $border-something // TODO: px >>> rem //////////////////////////////////////////////////////// //////////////////////////////////////////////////////// - //////////////////////////////////////////////////////// margin-top: 2px; // Boosted mod margin-right: 2px; // Boosted mod } -//////////////////////////////////////////////////////// //////////////////////////////////////////////////////// //////////////////////////////////////////////////////// // Boosted mod: removed it in favor of using utility classes // in shortcodes > example.html //////////////////////////////////////////////////////// //////////////////////////////////////////////////////// -//////////////////////////////////////////////////////// /* .highlight-toolbar { .btn-clipboard { diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index d621da483f..f8aac31e47 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -101,13 +101,11 @@ fill: currentcolor; } -///////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////// // TODO: test into Bootstrap if there's not a conflict with .icon-link in features.css ///////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////// -///////////////////////////////////////////////////////////////// .icon-link { display: flex; align-items: center; @@ -121,13 +119,11 @@ transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list } - ///////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////// // TODO: Do we keep this animation in Boosted? ///////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////// - ///////////////////////////////////////////////////////////////// &:hover { .bi { transform: translate3d(5px, 0, 0); diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss index 7f39ff1da5..d5baae4214 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -1,10 +1,8 @@ /////////////////////////////////////////////// /////////////////////////////////////////////// -/////////////////////////////////////////////// // TODO: check me! Not sure what's the purpose of --bs-gutter-x /////////////////////////////////////////////// /////////////////////////////////////////////// -/////////////////////////////////////////////// .bd-gutter { --bs-gutter-x: #{$bd-gutter-x}; } diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 4f7dbde5a3..8c91344eec 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -71,7 +71,6 @@ } } -/////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// // Boosted mod: no .masthead-followup-svg @@ -79,4 +78,3 @@ // TODO: check if it's the case in Bootstrap as well /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// -/////////////////////////////////////////////////////////// diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 44fd06c6eb..a35afd3745 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,10 +1,8 @@ ///////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////// -///////////////////////////////////////////////////////////////////////////////// // TODO: check all those rules but normally we wouldn't need anything in this file ///////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////// -///////////////////////////////////////////////////////////////////////////////// .bd-navbar { // Boosted mod: no padding background-color: transparent; diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index d242ccdc4f..5ba10c9ee9 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -37,11 +37,9 @@ margin-top: .125rem; ////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// // TODO: adapt this rule after having changed the size of icons ////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// margin-left: 1.125rem; // Boosted mod: changed value color: rgba($black, .65); text-decoration: if($link-decoration == none, null, none); diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index 095801b4ff..f7500ff7af 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -1,12 +1,10 @@ // Boosted mod: doesn't exist anymore in Bootstrap -////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////// // TODO: clean up and remove useless rules in this file ////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////// -////////////////////////////////////////////////////////////////////////////////////////// .bd-subnavbar { --bs-gutter-x: $bd-gutter-x; @@ -33,14 +31,12 @@ background-size: .75rem .75rem; } - ////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////// // TODO: since it is always displayed when there's a burger menu we should be able to // get rid of this @include (not its content which would become the default) ////////////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////////////////// @include media-breakpoint-up(md) { position: sticky; top: 60px; // Boosted mod: change value From 0301194ba0660f2cb1766d2640c2daeba7cf7730 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 09:11:56 +0200 Subject: [PATCH 02/38] Remove .table-guidelines --- site/assets/scss/_boosted.scss | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/site/assets/scss/_boosted.scss b/site/assets/scss/_boosted.scss index ef302f1f04..9fcbb51408 100644 --- a/site/assets/scss/_boosted.scss +++ b/site/assets/scss/_boosted.scss @@ -125,17 +125,6 @@ body { } } -// Docs table -.table-guidelines { - tr { - border: 0; - } - - th { - vertical-align: middle; - } -} - // "Added in vX.Y.Z" areas // stylelint-disable-next-line selector-max-class, selector-no-qualifying-type small.d-inline-flex.px-2.py-1.font-monospace.text-muted.border.rounded-3 { From d99a96a8fb6d8436912a9809ce692f4a27ebc0d7 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 09:12:37 +0200 Subject: [PATCH 03/38] Fix https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1241#discussion_r868062113, Boosted alignment --- site/layouts/partials/home/masthead.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html index cf0d4b7a9b..92424b90f9 100644 --- a/site/layouts/partials/home/masthead.html +++ b/site/layouts/partials/home/masthead.html @@ -5,7 +5,7 @@ New in v5.1 CSS Grid, offcanvas navbars, improved utilities, and more!
- -
+

Install via package manager

@@ -59,7 +59,7 @@

Customize everything with Sass

-
+

Include all of Boosted’s Sass

Import one stylesheet and you're off to the races with every feature of our CSS.

@@ -102,7 +102,7 @@

Include what you need

-
+
@@ -118,7 +118,7 @@

Build and extend in real-time with CSS variables

-
+

Using CSS variables

Use any of our global :root variables to write new styles. CSS variables use the var(--bs-variableName) syntax and can be inherited by children elements.

@@ -151,7 +151,7 @@

Customizing via CSS variables

-
+
@@ -237,7 +237,7 @@

Powerful JavaScript plugins without jQuery

-
+

Data attribute API

Why write more JavaScript when you can write HTML? Nearly all of Boosted's JavaScript plugins feature a first-class data API, allowing you to use JavaScript just by adding data attributes.

@@ -271,7 +271,7 @@

Data attribute API

Comprehensive set of plugins

Boosted features a dozen plugins from Bootstrap that you can drop into any project. Other are specific to Boosted. Drop them in all at once, or choose just the ones you need.

-
+
{{- range $plugin := .Site.Data.plugins -}} {{- $href := printf "/docs/%s/%s" $.Site.Params.docs_version $plugin.link }}
@@ -287,7 +287,7 @@

{{ $plugin.name }}

-
+
From 8101afd399f02ce42ab94c8901d4571f84f34861 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 14:09:49 +0200 Subject: [PATCH 05/38] Fix https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1241#discussion_r868099225 --- site/layouts/partials/home/masthead-followup.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html index 4c0d00bd22..11fe0cd821 100644 --- a/site/layouts/partials/home/masthead-followup.html +++ b/site/layouts/partials/home/masthead-followup.html @@ -290,9 +290,7 @@

{{ $plugin.name }}

-
- {{ partial "icons/download.svg" (dict "width" "48" "height" "48" "class" "m-auto") }} -
+ {{ partial "icons/download.svg" (dict "class" "bi fs-1") }}

Orange Design System for web

From d61174600b89ca67df1205488e60c73f7e26f5fa Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 14:33:48 +0200 Subject: [PATCH 06/38] Fix https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1241#discussion_r868129487 subnav sticky --- site/assets/scss/_subnav.scss | 23 +++++------------------ 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index f7500ff7af..1d22aba522 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -1,19 +1,14 @@ // Boosted mod: doesn't exist anymore in Bootstrap -////////////////////////////////////////////////////////////////////////////////////////// -////////////////////////////////////////////////////////////////////////////////////////// -// TODO: clean up and remove useless rules in this file -////////////////////////////////////////////////////////////////////////////////////////// -////////////////////////////////////////////////////////////////////////////////////////// - .bd-subnavbar { --bs-gutter-x: $bd-gutter-x; --bs-gutter-y: $bd-gutter-x; - --bs-navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg-small)}; // Boosted mod + --bs-navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg-small)}; // The position and z-index are needed for the dropdown to stay on top of the content - position: relative; - z-index: $zindex-dropdown; // Boosted mod: goes under the navbar + dropdown. + position: sticky; + top: 3.125rem; + z-index: $zindex-dropdown; // goes under the navbar + dropdown. background-color: rgba($white, .95); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); @@ -31,15 +26,7 @@ background-size: .75rem .75rem; } - ////////////////////////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////////////////// - // TODO: since it is always displayed when there's a burger menu we should be able to - // get rid of this @include (not its content which would become the default) - ////////////////////////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////////////////// @include media-breakpoint-up(md) { - position: sticky; - top: 60px; // Boosted mod: change value - z-index: 1000; // Boosted mod: add a z-index value + top: 3.75rem; } } From 0ef6d26e317aa551673238ee2e2e469bf7ba714c Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 15:25:55 +0200 Subject: [PATCH 07/38] Fix https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1241#discussion_r868142124 icons --- site/assets/scss/_clipboard-js.scss | 4 ++-- site/assets/scss/_content.scss | 4 ++-- site/assets/scss/_sidebar.scss | 10 ++++++++++ site/layouts/partials/docs-sidebar.html | 2 +- 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 8a5c419c81..58348995a7 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -42,8 +42,8 @@ // Boosted mod .bi { - width: 1.4em; - height: 1.4em; + width: 1.8125rem; + height: 1.8125rem; } // End mod } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index f8aac31e47..1276c183f2 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -114,8 +114,8 @@ backface-visibility: hidden; .bi { - width: 1.5em; - height: 1.5em; + width: .75em; // Boosted mod + height: .75em; // Boosted mod transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list } diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 5ba10c9ee9..9e13fc60f1 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -50,3 +50,13 @@ font-weight: 600; } } + +// Boosted mod +.bd-links-heading { + transform: translateX(-#{$spacer * .25}); + + svg { + font-size: 1.5625rem; + } +} +// End mod diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index e4ddd7d05b..3b31e69730 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -19,7 +19,7 @@

  • {{- if $group.icon }} - + {{- end }} {{ $group.title }} From a7d0658c5bc510f932db29d3d3cd970698b62d2b Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 16:38:32 +0200 Subject: [PATCH 08/38] Fix https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1241#discussion_r868148803, useless hr --- site/layouts/partials/docs-navbar.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index c0b45a62b4..8f497a30f5 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -40,8 +40,6 @@ {{ if eq .Layout "docs" }}
  • - -
    • {{ end }} {{ partial "docs-versions" . }} From f11f37acf929c1bcc8ef42b56b2e1aa7f128082a Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 17:01:13 +0200 Subject: [PATCH 09/38] Fix https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1241#discussion_r868155904, Reintroduce title bars + realign text below --- site/assets/scss/_layout.scss | 6 +++++- site/layouts/_default/single.html | 12 ++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss index d5baae4214..bd547514b7 100644 --- a/site/assets/scss/_layout.scss +++ b/site/assets/scss/_layout.scss @@ -4,7 +4,11 @@ /////////////////////////////////////////////// /////////////////////////////////////////////// .bd-gutter { - --bs-gutter-x: #{$bd-gutter-x}; + --bs-gutter-x: #{$bd-gutter-x * 2}; + + @include media-breakpoint-up(md) { + --bs-gutter-x: #{$bd-gutter-x * 4}; + } } .bd-layout { diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html index f8e78954d6..a933ba2f00 100644 --- a/site/layouts/_default/single.html +++ b/site/layouts/_default/single.html @@ -2,14 +2,10 @@ -
    -
    -
    -
    -
    -

    {{ .Title | markdownify }}

    -
    -
    +
    +
    +
    +

    {{ .Title | markdownify }}

    From 19ac792dfa9687704bb5ec8ac296261235e5a85d Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 17:43:27 +0200 Subject: [PATCH 10/38] Fix https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1241#discussion_r868160755 toc toggle --- site/assets/scss/_toc.scss | 22 +++------------------- site/layouts/_default/docs.html | 2 +- 2 files changed, 4 insertions(+), 20 deletions(-) diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 481f1b79d6..d6ba1672fe 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -46,34 +46,18 @@ } } +// Boosted mod: no breakpoint md+ .bd-toc-toggle { display: flex; align-items: center; + border-width: 1px; @include media-breakpoint-down(sm) { justify-content: space-between; width: 100%; } - - @include media-breakpoint-down(md) { - border: 1px solid $border-color; - @include border-radius(.4rem); - - &:hover, - &:focus, - &:active, - &[aria-expanded="true"] { - color: currentcolor; // Boosted mod - background-color: var(--bs-gray-100); // Boosted mod - border-color: currentcolor; // Boosted mod - } - - &:focus, - &[aria-expanded="true"] { - box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25); - } - } } +// End mod .bd-toc-collapse { @include media-breakpoint-down(md) { diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 454acb0754..26f12dad6e 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -30,7 +30,7 @@

    {{ .Title | markdownify }}

    {{ if (eq .Page.Params.toc true) }}
    - From 6331beb6eb6d1b5969c9b4631d44bfea0511b4cc Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 17:44:56 +0200 Subject: [PATCH 11/38] Fix https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1241#discussion_r868171175, migration border --- site/layouts/partials/docs-sidebar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index 3b31e69730..904a529030 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -34,7 +34,7 @@ {{- else }} -
  • +
  • {{ $group.title }} From 883a456d3fcb3067922d33daa32ea0a21025cbdd Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 18 May 2022 18:18:23 +0200 Subject: [PATCH 12/38] Fix https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/pull/1241#discussion_r868187371, subnav in header + css --- site/assets/scss/_subnav.scss | 28 ++------------------------ site/layouts/_default/docs.html | 3 --- site/layouts/partials/docs-navbar.html | 5 +++++ site/layouts/partials/docs-subnav.html | 11 +--------- 4 files changed, 8 insertions(+), 39 deletions(-) diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss index 1d22aba522..8d0309f2bb 100644 --- a/site/assets/scss/_subnav.scss +++ b/site/assets/scss/_subnav.scss @@ -1,32 +1,8 @@ // Boosted mod: doesn't exist anymore in Bootstrap .bd-subnavbar { - --bs-gutter-x: $bd-gutter-x; - --bs-gutter-y: $bd-gutter-x; - --bs-navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg-small)}; - - // The position and z-index are needed for the dropdown to stay on top of the content - position: sticky; - top: 3.125rem; - z-index: $zindex-dropdown; // goes under the navbar + dropdown. - + // The z-index is needed for the dropdown to stay on top of the content + z-index: $zindex-dropdown - 1; // goes under the navbar + dropdown. background-color: rgba($white, .95); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); - - .dropdown-menu { - @include font-size(.875rem); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05); - } - - .dropdown-item.current { - font-weight: 600; - background-image: escape-svg($dropdown-active-icon); - background-repeat: no-repeat; - background-position: right $dropdown-item-padding-x top .6rem; - background-size: .75rem .75rem; - } - - @include media-breakpoint-up(md) { - top: 3.75rem; - } } diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 26f12dad6e..2b82c57da8 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -1,7 +1,4 @@ {{ define "main" }} - - {{ partial "docs-subnav" }} -
    + +{{- if eq .Layout "docs" }} + + {{ partial "docs-subnav" }} +{{- end }} diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html index 43c0628ede..bc77b069ff 100644 --- a/site/layouts/partials/docs-subnav.html +++ b/site/layouts/partials/docs-subnav.html @@ -1,14 +1,5 @@ - - - - - - - - -
  • From a9764dd1be7c64137efbd68a3ebc13bc30ae9348 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 23 May 2022 16:35:51 +0200 Subject: [PATCH 23/38] Small fixes for the `Read the docs` icon --- site/layouts/partials/home/masthead.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html index 92424b90f9..1057946f9a 100644 --- a/site/layouts/partials/home/masthead.html +++ b/site/layouts/partials/home/masthead.html @@ -15,12 +15,12 @@

    Orange Boosted
    w

    Orange Boosted is a Bootstrap based, Orange branded accessible and ergonomic components library.

    -
    +
    - {{ highlight "npm i bootstrap" "sh" "" }} + {{ highlight "npm i boosted" "sh" "" }}
    - + Read the docs
    From 4dbbfa4b4b8793ff6ade1322118c0ad7ce5a2e0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 1 Jun 2022 08:14:13 +0200 Subject: [PATCH 24/38] Remove all ///// comments after having read feedback from LM --- scss/_navbar.scss | 5 ----- site/assets/scss/_clipboard-js.scss | 5 ----- site/assets/scss/_content.scss | 5 ----- 3 files changed, 15 deletions(-) diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 0bec7d7f6b..68dc09a6d4 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -453,11 +453,6 @@ display: none; } - ////////////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// - // TODO: Is it really useful in Boosted? - LMP: I would to have better Bootstrap compatibility ? However, doesn't change anything IMO - ////////////////////////////////////////////////////////////////////////////// - ////////////////////////////////////////////////////////////////////////////// .offcanvas { // stylelint-disable declaration-no-important position: static; diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 74ec070093..057fcc3ff1 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -27,11 +27,6 @@ border: 0; @include border-radius(.25rem); - //////////////////////////////////////////////////////// - //////////////////////////////////////////////////////// - // TODO: see if we can't use a btn-* class instead - LMP: Check comments, but IMO hard to do - //////////////////////////////////////////////////////// - //////////////////////////////////////////////////////// &:hover { color: $primary; } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index 1a3200fb6b..719f35d477 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -114,11 +114,6 @@ transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list } - ///////////////////////////////////////////////////////////////// - ///////////////////////////////////////////////////////////////// - // TODO: Do we keep this animation in Boosted? - LMP: IMO, make the homepage a bit more attractive - ///////////////////////////////////////////////////////////////// - ///////////////////////////////////////////////////////////////// &:hover { .bi { transform: translate3d(5px, 0, 0); From b48a61369ad11b14e04839ae6cdd9e12ec2be99c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 1 Jun 2022 08:24:07 +0200 Subject: [PATCH 25/38] Remove all comments after having read feedback from LM --- site/layouts/partials/docs-subnav.html | 5 ----- site/layouts/shortcodes/example.html | 7 +------ 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html index 68a274a97c..0d565f028b 100644 --- a/site/layouts/partials/docs-subnav.html +++ b/site/layouts/partials/docs-subnav.html @@ -3,11 +3,6 @@ +{{< /example >}} + +To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`. + +```html + +``` + +When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. + +{{< example >}} + +{{< /example >}} ## CSS From 240549ee57bdca0298a4a831c5a327407f022f41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 22 Jun 2022 12:38:42 +0200 Subject: [PATCH 30/38] Fix Navbar offcanvas buttons --- site/content/docs/5.1/components/navbar.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md index 716b1512fe..7a3505de4a 100644 --- a/site/content/docs/5.1/components/navbar.md +++ b/site/content/docs/5.1/components/navbar.md @@ -564,7 +564,7 @@ In the example below, to create an offcanvas navbar that is always collapsed acr

    • @@ -623,7 +623,7 @@ When using offcanvas in a dark navbar, be aware that you may need to have a dark
    From c6ac5676f0772fcd6353a59b75c887780fcf5a82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 22 Jun 2022 12:45:15 +0200 Subject: [PATCH 31/38] Move Boosted mod comment --- site/layouts/partials/docs-navbar.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 498bc99f32..097f533682 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -48,8 +48,9 @@
    -{{- if eq .Layout "docs" }} - {{ partial "docs-subnav" }} -{{- end }} + {{- if eq .Layout "docs" }} + {{ partial "docs-subnav" }} + {{- end }} + From b864ddbfa4ecaa6b4f6ccf6bb5a5835d3f672d09 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 22 Jun 2022 12:50:57 +0200 Subject: [PATCH 32/38] Remove extra break line --- site/assets/scss/_toc.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 3ec97c9e32..d88a960713 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -46,7 +46,6 @@ } } - .bd-toc-toggle { display: flex; align-items: center; From 65e5aaef2b430f75e7939f432a4b8d5a65be14f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 23 Jun 2022 14:20:42 +0200 Subject: [PATCH 33/38] Add missing div position-fixed in the footer docs --- site/layouts/_default/docs.html | 1 + 1 file changed, 1 insertion(+) diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index 2b82c57da8..224736049e 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -62,4 +62,5 @@

    {{ .Title | markdownify }}

    {{ range .Page.Params.extra_js -}} {{- end -}} +
    {{ end }} From 34017e72e4f37a81f5dc5c31fbd771f0d1e951c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 23 Jun 2022 14:34:41 +0200 Subject: [PATCH 34/38] Make pa11y happy --- build/.pa11yci.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/build/.pa11yci.json b/build/.pa11yci.json index 77ef837707..7d2b1e7180 100644 --- a/build/.pa11yci.json +++ b/build/.pa11yci.json @@ -5,7 +5,7 @@ "runners": [ "axe" ], - "hideElements": "[id*='tarteaucitron'], #TableOfContents, .text-primary, .accordion-button:not(.collapsed), .active, [aria-current], select:disabled, [disabled] label, [disabled] + label, .modal, .bd-example nav, .badge.rounded-pill.bg-info.text-white, .exclude-from-pa11y-analysis, a.disabled, .form-check.form-switch, .nav-tabs .nav-item .nav-link.disabled", + "hideElements": "[id*='tarteaucitron'], #TableOfContents, .text-primary, .accordion-button:not(.collapsed), .active, [aria-current], select:disabled, [disabled] label, [disabled] + label, .modal, .bd-example nav, .badge.rounded-pill.bg-info.text-white, .exclude-from-pa11y-analysis, a.disabled, .form-check.form-switch, .nav-tabs .nav-item .nav-link.disabled, body > div.position-fixed:last-of-type", "ignore": [ "heading-order", "scrollable-region-focusable" From 3d93b5db401fa637e59cfd04d71013a94739f31d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 23 Jun 2022 15:11:26 +0200 Subject: [PATCH 35/38] Rollback of clipboard icon size --- site/assets/scss/_clipboard-js.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 057fcc3ff1..ca69c820f3 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -37,8 +37,8 @@ // Boosted mod .bi { - width: 1.8125rem; - height: 1.8125rem; + width: 1.4em; + height: 1.4em; } // End mod } From 78e03b64af444a836997324d8b5e248d44c73462 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 23 Jun 2022 15:12:37 +0200 Subject: [PATCH 36/38] Remove comment for .DocSearch-Container --- site/assets/scss/_search.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss index fad637b261..414179c819 100644 --- a/site/assets/scss/_search.scss +++ b/site/assets/scss/_search.scss @@ -10,7 +10,7 @@ .DocSearch-Container { --docsearch-hit-shadow: none; - z-index: 1100; // value 11000000000 seems to hide scrollbars under the backdrop + z-index: 1100; } .DocSearch-Button { From b59dc2ba6a04e7387975ca7e6fb9e29773916879 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 23 Jun 2022 15:27:41 +0200 Subject: [PATCH 37/38] Same size for lg button and npm i boosted in the main page --- site/assets/scss/_masthead.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index ffee7b6260..0a64330114 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -17,12 +17,13 @@ } .highlight { - padding: .5rem 4rem .5rem 1rem; + // Boosted mod + padding: .72rem 4rem .5rem 1rem; line-height: 1.25; background-color: rgba(var(--bs-body-color-rgb), .075); @include border-radius(.5rem); + // End mod } - .btn-clipboard { margin-top: .4rem; background-color: transparent; From 3b704e450b35fe13b0219a89d8e3d18d73d445d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 23 Jun 2022 15:36:47 +0200 Subject: [PATCH 38/38] Align masthead clipboard icon --- site/assets/scss/_masthead.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 0a64330114..2f5ff2c248 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -25,7 +25,7 @@ // End mod } .btn-clipboard { - margin-top: .4rem; + margin-top: .5rem; background-color: transparent; }