Docs: group together reusable CSS for examples in a single stylesheet (#35649)

* Docs: group together examples reusable CSS in a stylesheet

* Use pointer-events utility in sidebars example

* Remove @import and move the content into _default/examples.html. Handle 2 sorts of dividers

* Remove footers.css extra css declaration

* Fix modals example

* Review: remove .b-example-hr

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>

diff --git a/site/content/docs/5.1/examples/dropdowns/dropdowns.css b/site/content/docs/5.1/examples/dropdowns/dropdowns.css
index 4341c59ea428202bee95da964947fb9d98247a9a..47fa10106266d3783d77d177d33c2c3511eddf7d 100644 (file)
--- 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
index cf66e7e20699c413c1812ef7cb869e3859f115e6..bc5eae97bfcf144a5205ab96066664cd55996d1d 100644 (file)
--- 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
deleted file mode 100644 (file)
index 4e82682..0000000
--- a/site/content/docs/5.1/examples/footers/footers.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.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;
-}

diff --git a/site/content/docs/5.1/examples/footers/index.html b/site/content/docs/5.1/examples/footers/index.html
index efa26b92d610455ebdffb9b126b73897142ee40b..6f7e058ffee9472ff1f8ae5f3856dc49334cfe18 100644 (file)
--- a/site/content/docs/5.1/examples/footers/index.html
+++ b/site/content/docs/5.1/examples/footers/index.html
@@ -1,8 +1,6 @@
 ---
 layout: examples
 title: Footers
-extra_css:
-  - "footers.css"
 body_class: ""
 ---
 

diff --git a/site/content/docs/5.1/examples/headers/headers.css b/site/content/docs/5.1/examples/headers/headers.css
index 661a74d55a05d07b7776b1bbde2b3ac5be6f206b..2533841c59ae6600398b2bce3a555c5b1d2e1b6b 100644 (file)
--- a/site/content/docs/5.1/examples/headers/headers.css
+++ b/site/content/docs/5.1/examples/headers/headers.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);
-}
-
 .form-control-dark {
   color: #fff;
   background-color: var(--bs-dark);
@@ -18,11 +10,6 @@
   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
index 380b70a4a788aa42960a6a25703c0b3d7fcacc91..e9deaf744f341135c50782722fb0e72933572d99 100644 (file)
--- 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
index 11351f87e2e089b537768e9f284fbaa2d6d5d66f..72f7b8302269c9aeccf91750ab3450623568d299 100644 (file)
--- 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
index 8fda8212abc8f339bf688161b7764838b1e03213..5ac82c2ac40736213f989446b3bcb2b4e491687d 100644 (file)
--- 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/sidebars/index.html b/site/content/docs/5.1/examples/sidebars/index.html
index 4d628f1c06eb45730e5eb538cf931634c7d45039..8eba1c62805f561754b36dc805df4cb58db4770f 100644 (file)
--- a/site/content/docs/5.1/examples/sidebars/index.html
+++ b/site/content/docs/5.1/examples/sidebars/index.html
@@ -72,38 +72,38 @@ body_class: ""
 
   <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"><use xlink:href="#bootstrap"/></svg>
+      <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></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>
@@ -124,42 +124,42 @@ body_class: ""
     </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="#bootstrap"/></svg>
+      <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></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>
@@ -180,37 +180,37 @@ body_class: ""
     </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="#bootstrap"/></svg>
+      <svg class="bi pe-none" width="40" height="32"><use xlink:href="#bootstrap"/></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>
@@ -228,11 +228,11 @@ body_class: ""
     </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="#bootstrap"/></svg>
+      <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-5 fw-semibold">Collapsible</span>
     </a>
     <ul class="list-unstyled ps-0">
@@ -291,11 +291,11 @@ body_class: ""
     </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="#bootstrap"/></svg>
+      <svg class="bi pe-none me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
       <span class="fs-5 fw-semibold">List group</span>
     </a>
     <div class="list-group list-group-flush border-bottom scrollarea">
@@ -387,5 +387,5 @@ body_class: ""
     </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
index 6949a379eabb4c4cbe37aaf34b9d426415c3982c..9fa05075780766fa7eb0e0939152c64f7b62e3fe 100644 (file)
--- 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 {

diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index 948c3756fc02effb0467f1d4d80c194949ee2703..6709cdfa79cb6f149e96a0607f4fa8edf2d9b135 100644 (file)
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -31,6 +31,25 @@
           font-size: 3.5rem;
         }
       }
+
+      .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);
+      }
+
+      .b-example-vr {
+        flex-shrink: 0;
+        width: 1.5rem;
+        height: 100vh;
+      }
+
+      .bi {
+        vertical-align: -.125em;
+        fill: currentColor;
+      }
     </style>
 
     {{ range .Page.Params.extra_css }}