chore/merge-main: finish remaining modifications after Bootstrap design doc refactoring

build/.pa11yci.json

@@ -5,7 +5,7 @@
     "runners": [
       "axe"
     ],
-    "hideElements": ".bd-search, [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",
     "ignore": [
       "heading-order",
       "scrollable-region-focusable"

scss/_navbar.scss

@@ -453,13 +453,6 @@
           display: none;
         }
 
-        //////////////////////////////////////////////////////////////////////////////
-        //////////////////////////////////////////////////////////////////////////////
-        //////////////////////////////////////////////////////////////////////////////
-        // TODO: Is it really useful in Boosted?
-        //////////////////////////////////////////////////////////////////////////////
-        //////////////////////////////////////////////////////////////////////////////
-        //////////////////////////////////////////////////////////////////////////////
         .offcanvas {
           // stylelint-disable declaration-no-important
           position: static;

site/assets/js/code-examples.js

@@ -18,15 +18,6 @@
   const btnTitle = 'Copy to clipboard'
   const btnEdit = 'Edit on StackBlitz'
 
-  // ////////////////////////////////////////////////////////
-  // ////////////////////////////////////////////////////////
-  // ////////////////////////////////////////////////////////
-  // TODO: Bootstrap can remove width, height and
-  // fill="currentColor" of <svg class="bi"... since ".bi"
-  // already does that
-  // ////////////////////////////////////////////////////////
-  // ////////////////////////////////////////////////////////
-  // ////////////////////////////////////////////////////////
   // Boosted mod: removed unused svg height, width and fill="currentColor"
   const btnHtml = [
     '<div class="bd-code-snippet">',

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 {

site/assets/scss/_clipboard-js.scss

@@ -27,13 +27,6 @@
   border: 0;
   @include border-radius(.25rem);
 
-  ////////////////////////////////////////////////////////
-  ////////////////////////////////////////////////////////
-  ////////////////////////////////////////////////////////
-  // TODO: see if we can't use a btn-* class instead
-  ////////////////////////////////////////////////////////
-  ////////////////////////////////////////////////////////
-  ////////////////////////////////////////////////////////
   &:hover {
     color: $primary;
   }
@@ -44,37 +37,19 @@
 
   // Boosted mod
   .bi {
-    width: 1.4em;
-    height: 1.4em;
+    width: 1.8125rem;
+    height: 1.8125rem;
   }
   // End mod
 }
 
 .btn-clipboard {
   position: relative;
   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
+  margin-top: $border-width; // Boosted mod
+  margin-right: $border-width; // Boosted mod
 }
 
-////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////
-// Boosted mod: removed it in favor of using utility classes
-// in shortcodes > example.html
-////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////
-
 /* .highlight-toolbar {
   .btn-clipboard {
     margin-top: 0;

site/assets/scss/_component-examples.scss

@@ -4,10 +4,10 @@
 
 .bd-example-snippet {
   border: solid $gray-400; // Boosted mod: change border color
-  border-width: 1px 0;
+  border-width: map-get($border-widths, 1) 0;
 
   @include media-breakpoint-up(md) {
-    border-width: 1px;
+    border-width: map-get($border-widths, 1);
   }
 }
 
@@ -18,22 +18,22 @@
   padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5);
   border: solid $gray-400; // Boosted mod: change border color
-  border-width: 1px 0;
+  border-width: map-get($border-widths, 1) 0;
   @include clearfix();
 
   @include media-breakpoint-up(md) {
     --bd-example-padding: 1.5rem;
 
     margin-right: 0;
     margin-left: 0;
-    border-width: 1px;
+    border-width: map-get($border-widths, 1);
     @include border-top-radius(var(--bs-border-radius));
   }
 
   + .bd-code-snippet {
     @include border-top-radius(0);
     border: solid $gray-400; // Boosted mod: change border color
-    border-width: 0 1px 1px;
+    border-width: 0 map-get($border-widths, 1) map-get($border-widths, 1);
   }
 
   + p {
@@ -82,7 +82,7 @@
 
   // List groups
   > .list-group {
-    max-width: 400px;
+    max-width: 25rem;
   }
 
   > [class*="list-group-horizontal"] {
@@ -118,7 +118,7 @@
   padding-top: .75rem;
   padding-bottom: .75rem;
   background-color: rgba(var(--bd-violet-rgb), .1);
-  border: 1px solid rgba(var(--bd-violet-rgb), .25);
+  border: map-get($border-widths, 1) solid rgba(var(--bd-violet-rgb), .25);
 }
 
 .bd-example-row .row + .row,
@@ -133,12 +133,12 @@
 
 .bd-example-flex div {
   background-color: rgba($bd-purple, .15);
-  border: 1px solid rgba($bd-purple, .15);
+  border: map-get($border-widths, 1) solid rgba($bd-purple, .15);
 }
 
 // Grid mixins
 .example-container {
-  width: 800px;
+  width: 50rem;
   @include make-container();
 }
 
@@ -201,7 +201,7 @@
   .offcanvas {
     position: static;
     display: block;
-    height: 200px;
+    height: 12.5rem;
     visibility: visible;
     transform: translate(0);
   }
@@ -220,32 +220,32 @@
 
 // scss-docs-start custom-popovers
 .custom-popover {
-  --bs-popover-max-width: 200px;
+  --bs-popover-max-width: 12.5rem;
   --bs-popover-border-color: var(--bs-primary);
   --bs-popover-header-bg: var(--bs-primary);
-  --bs-popover-header-color: var(--bs-white);
+  --bs-popover-header-color: var(--bs-black); // Boosted mod: text-dark on primary
   --bs-popover-body-padding-x: 1rem;
   --bs-popover-body-padding-y: .5rem;
 }
 // scss-docs-end custom-popovers
 
 // Scrollspy demo on fixed height div
 .scrollspy-example {
-  height: 200px;
+  height: 12.5rem;
   margin-top: .5rem;
   overflow: auto;
 }
 
 .scrollspy-example-2 {
-  height: 350px;
+  height: 21.875rem;
   overflow: auto;
 }
 
-.simple-list-example-scrollspy {
-  .active {
-    background-color: rgba(var(--bd-violet-rgb), .15);
-  }
+// Boosted mod
+.simple-list-example-scrollspy .active {
+  color: var(--#{$prefix}link-hover-color);
 }
+// End mod
 
 .bd-example-border-utils {
   [class^="border"] {
@@ -274,7 +274,7 @@
   padding: 2rem;
 
   .position-relative {
-    height: 200px;
+    height: 12.5rem;
     background-color: #f5f5f5;
   }
 
@@ -305,7 +305,7 @@
 
 // Toasts
 .bd-example-toasts {
-  min-height: 240px;
+  min-height: 15rem;
 }
 
 //
@@ -366,5 +366,5 @@
 .highlight-toolbar {
   background-color: $gray-100; // Boosted mod: change background color instead of using .bg-light
   border: solid $gray-400; // Boosted mod: change border color
-  border-width: 1px 0;
+  border-width: map-get($border-widths, 1) 0;
 }

site/assets/scss/_content.scss

@@ -101,13 +101,6 @@
   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;
@@ -116,18 +109,11 @@
   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
   }
 
-  /////////////////////////////////////////////////////////////////
-  /////////////////////////////////////////////////////////////////
-  /////////////////////////////////////////////////////////////////
-  // TODO: Do we keep this animation in Boosted?
-  /////////////////////////////////////////////////////////////////
-  /////////////////////////////////////////////////////////////////
-  /////////////////////////////////////////////////////////////////
   &:hover {
     .bi {
       transform: translate3d(5px, 0, 0);

site/assets/scss/_layout.scss

@@ -1,12 +1,9 @@
-///////////////////////////////////////////////
-///////////////////////////////////////////////
-///////////////////////////////////////////////
-// TODO: check me! Not sure what's the purpose of --bs-gutter-x
-///////////////////////////////////////////////
-///////////////////////////////////////////////
-///////////////////////////////////////////////
 .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 {
@@ -26,7 +23,7 @@
   grid-area: main;
 
   @include media-breakpoint-down(lg) {
-    max-width: 760px;
+    // Boosted mod: no max-width
     margin-inline: auto;
   }
 

site/assets/scss/_masthead.scss

@@ -3,10 +3,7 @@
   padding: 3rem 0;
   // Boosted mod: no gradient background image
 
-  h1 {
-    @include font-size(4rem);
-    line-height: 1;
-  }
+  // Boosted mod: no extra h1 rule
 
   .lead {
     @include font-size(1rem);
@@ -71,12 +68,4 @@
   }
 }
 
-///////////////////////////////////////////////////////////
-///////////////////////////////////////////////////////////
-///////////////////////////////////////////////////////////
-// Boosted mod: no .masthead-followup-svg
 // Boosted mod: no .masthead-notice
-// TODO: check if it's the case in Bootstrap as well
-///////////////////////////////////////////////////////////
-///////////////////////////////////////////////////////////
-///////////////////////////////////////////////////////////