chore(merge main) patched commit → c1222d6 (#1063)

Orange-OpenSource · Jan 26, 2022 · d146042 · d146042
1 parent 5eb1dda
commit d146042
Show file tree

Hide file tree

Showing 14 changed files with 199 additions and 288 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -104,8 +104,8 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.8",
+    "@babel/core": "^7.16.12",
+    "@babel/preset-env": "^7.16.11",
     "@popperjs/core": "^2.11.2",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -115,7 +115,7 @@
     "bundlewatch": "^0.3.3",
     "clean-css-cli": "^5.5.0",
     "cross-env": "^7.0.3",
-    "cspell": "^5.15.2",
+    "cspell": "^5.16.0",
     "delay-cli": "^1.1.0",
     "eslint": "^8.7.0",
     "eslint-config-xo": "^0.39.0",
@@ -128,7 +128,7 @@
     "hugo-bin": "^0.80.0",
     "ip": "^1.1.5",
     "jquery": "^3.6.0",
-    "karma": "^6.3.11",
+    "karma": "^6.3.12",
     "karma-browserstack-launcher": "1.6.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
@@ -145,10 +145,10 @@
     "pa11y-ci-reporter-html": "^3.0.3",
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
-    "rollup": "^2.64.0",
+    "rollup": "^2.66.0",
     "rollup-plugin-istanbul": "^3.0.0",
     "rtlcss": "^3.5.0",
-    "sass": "^1.48.0",
+    "sass": "^1.49.0",
     "shelljs": "^0.8.5",
     "stylelint": "^14.2.0",
     "stylelint-config-twbs-bootstrap": "^3.0.1",

diff --git a/site/content/docs/5.1/examples/dropdowns/dropdowns.css b/site/content/docs/5.1/examples/dropdowns/dropdowns.css
@@ -1,16 +1,3 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
 .dropdown-menu {
   position: static;
   display: block;

diff --git a/site/content/docs/5.1/examples/features/features.css b/site/content/docs/5.1/examples/features/features.css
@@ -1,16 +1,3 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
 .feature-icon {
   display: inline-flex;
   align-items: center;

diff --git a/site/content/docs/5.1/examples/footers/footers.css b/site/content/docs/5.1/examples/footers/footers.css
@@ -1,16 +1,4 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
+/* Boosted mod */
 .example-footer-custom-form .btn:active {
   border-color: var(--bs-orange) !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -20,3 +8,4 @@
   background-color: var(--bs-white) !important; /* stylelint-disable-line declaration-no-important */
   border-color: var(--bs-white) !important; /* stylelint-disable-line declaration-no-important */
 }
+/* End mod */
diff --git a/site/content/docs/5.1/examples/headers/headers.css b/site/content/docs/5.1/examples/headers/headers.css
@@ -1,28 +1,16 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
 .form-control-dark {
   color: #fff;
   background-color: var(--bs-dark);
   border-color: var(--bs-gray);
 }
+
 .form-control-dark:focus {
   color: #fff;
   background-color: var(--bs-dark);
   border-color: #fff;
   box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
 }
 
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
 .text-small {
   font-size: 85%;
 }

diff --git a/site/content/docs/5.1/examples/heroes/heroes.css b/site/content/docs/5.1/examples/heroes/heroes.css
@@ -1,11 +1,3 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
 @media (min-width: 992px) {
   .rounded-lg-3 { border-radius: .3rem; }
 }
diff --git a/site/content/docs/5.1/examples/list-groups/list-groups.css b/site/content/docs/5.1/examples/list-groups/list-groups.css
@@ -1,16 +1,3 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
 .opacity-50 { opacity: .5; }
 .opacity-75 { opacity: .75; }
 

diff --git a/site/content/docs/5.1/examples/modals/modals.css b/site/content/docs/5.1/examples/modals/modals.css
@@ -1,16 +1,3 @@
-.b-example-divider {
-  height: 3rem;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  fill: currentColor;
-}
-
 .rounded-4 { border-radius: .5rem; }
 .rounded-5 { border-radius: .75rem; }
 .rounded-6 { border-radius: 1rem; }

diff --git a/site/content/docs/5.1/examples/navbars/index.html b/site/content/docs/5.1/examples/navbars/index.html
@@ -1,8 +1,6 @@
 ---
 layout: examples
 title: Navbars
-extra_css:
-  - "navbar.css"
 ---
 
 <!-- Boosted mod: Bootstrap example without yet an Orange version so excluded from pa11y analysis -->

diff --git a/site/content/docs/5.1/examples/navbars/navbar.css b/site/content/docs/5.1/examples/navbars/navbar.css
diff --git a/site/content/docs/5.1/examples/sidebars/index.html b/site/content/docs/5.1/examples/sidebars/index.html
@@ -73,38 +73,38 @@ <h1 class="visually-hidden">Sidebars examples</h1>
 
   <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
     <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
-      <svg class="bi me-2" width="40" height="32" role="img" aria-label="Boosted"><use xlink:href="#boosted"/></svg>
+      <svg class="bi pe-none me-2" width="40" height="32" role="img" aria-label="Boosted"><use xlink:href="#boosted"/></svg>
       <span class="fs-4">Sidebar</span>
     </a>
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
           Home
         </a>
       </li>
       <li>
         <a href="#" class="nav-link text-white">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
           Dashboard
         </a>
       </li>
       <li>
         <a href="#" class="nav-link text-white">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
           Orders
         </a>
       </li>
       <li>
         <a href="#" class="nav-link text-white">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
           Products
         </a>
       </li>
       <li>
         <a href="#" class="nav-link text-white">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
           Customers
         </a>
       </li>
@@ -125,42 +125,42 @@ <h1 class="visually-hidden">Sidebars examples</h1>
     </div>
   </div>
 
-  <div class="b-example-divider"></div>
+  <div class="b-example-divider b-example-vr"></div>
 
   <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">    
     <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
-      <svg class="bi me-2" width="40" height="32"><use xlink:href="#boosted"/></svg>
+      <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#boosted"/></svg>
       <span class="fs-4">Sidebar</span>
     </a>
     <hr>
     <ul class="nav nav-pills flex-column mb-auto">
       <li class="nav-item">
         <a href="#" class="nav-link active" aria-current="page">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
           Home
         </a>
       </li>
       <li>
         <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
           Dashboard
         </a>
       </li>
       <li>
         <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
           Orders
         </a>
       </li>
       <li>
         <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
           Products
         </a>
       </li>
       <li>
         <a href="#" class="nav-link link-dark">
-          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
+          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
           Customers
         </a>
       </li>
@@ -181,37 +181,37 @@ <h1 class="visually-hidden">Sidebars examples</h1>
     </div>
   </div>
 
-  <div class="b-example-divider"></div>
+  <div class="b-example-divider b-example-vr"></div>
 
   <div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">    
     <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
-      <svg class="bi" width="40" height="32"><use xlink:href="#boosted"/></svg>
+      <svg class="bi pe-none" width="40" height="32"><use xlink:href="#boosted"/></svg>
       <span class="visually-hidden">Icon-only</span>
     </a>
     <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
       <li class="nav-item">
         <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
         </a>
       </li>
       <li>
         <a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
         </a>
       </li>
       <li>
         <a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
         </a>
       </li>
       <li>
         <a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
         </a>
       </li>
       <li>
         <a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
-          <svg class="bi" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
+          <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
         </a>
       </li>
     </ul>
@@ -229,11 +229,11 @@ <h1 class="visually-hidden">Sidebars examples</h1>
     </div>
   </div>
 
-  <div class="b-example-divider"></div>
+  <div class="b-example-divider b-example-vr"></div>
 
   <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">    
     <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
-      <svg class="bi me-2" width="30" height="24"><use xlink:href="#boosted"/></svg>
+      <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#boosted"/></svg>
       <span class="fs-5 fw-semibold">Collapsible</span>
     </a>
     <ul class="list-unstyled ps-0">
@@ -292,11 +292,11 @@ <h1 class="visually-hidden">Sidebars examples</h1>
     </ul>
   </div>
 
-  <div class="b-example-divider"></div>
+  <div class="b-example-divider b-example-vr"></div>
 
   <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">    
     <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
-      <svg class="bi me-2" width="30" height="24"><use xlink:href="#boosted"/></svg>
+      <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#boosted"/></svg>
       <span class="fs-5 fw-semibold">List group</span>
     </a>
     <div class="list-group list-group-flush border-bottom scrollarea">
@@ -388,5 +388,5 @@ <h1 class="visually-hidden">Sidebars examples</h1>
     </div>
   </div>
 
-  <div class="b-example-divider"></div>
+  <div class="b-example-divider b-example-vr"></div>
 </main>
diff --git a/site/content/docs/5.1/examples/sidebars/sidebars.css b/site/content/docs/5.1/examples/sidebars/sidebars.css
@@ -17,22 +17,6 @@ main {
   overflow-y: hidden;
 }
 
-.b-example-divider {
-  flex-shrink: 0;
-  width: 1.5rem;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, .1);
-  border: solid rgba(0, 0, 0, .15);
-  border-width: 1px 0;
-  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
-}
-
-.bi {
-  vertical-align: -.125em;
-  pointer-events: none;
-  fill: currentColor;
-}
-
 .dropdown-toggle { outline: 0; }
 
 .nav-flush .nav-link {