Clean component examples CSS (#28872)

* Remove unused classes/styles and use utilities instead of specific styles
* Use `getElementById` instead of `querySelector`

diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md
index 2861be667409065d6b49a2d0918923d1321f5c10..9d3dd57a7c13f73cdbb329a991c5d727c62ec88b 100644 (file)
--- a/site/content/docs/4.3/components/navbar.md
+++ b/site/content/docs/4.3/components/navbar.md
@@ -543,17 +543,15 @@ With a toggler on the left and brand name on the right:
 Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the `id` and `data-target` matching, that's easily done!
 
 {{< example >}}
-<div class="pos-f-t">
-  <div class="collapse" id="navbarToggleExternalContent">
-    <div class="bg-dark p-4">
-      <h5 class="text-white h4">Collapsed content</h5>
-      <span class="text-muted">Toggleable via the navbar brand.</span>
-    </div>
+<div class="collapse" id="navbarToggleExternalContent">
+  <div class="bg-dark p-4">
+    <h5 class="text-white h4">Collapsed content</h5>
+    <span class="text-muted">Toggleable via the navbar brand.</span>
   </div>
-  <nav class="navbar navbar-dark bg-dark">
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-  </nav>
 </div>
+<nav class="navbar navbar-dark bg-dark">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+</nav>
 {{< /example >}}

diff --git a/site/content/docs/4.3/components/navs.md b/site/content/docs/4.3/components/navs.md
index 078f4f8e7ede0d0c58134b2bc1a5cda20fd95053..5281fcdaff86d7594d62dc234c7694e7926b0353 100644 (file)
--- a/site/content/docs/4.3/components/navs.md
+++ b/site/content/docs/4.3/components/navs.md
@@ -309,8 +309,8 @@ Dynamic tabbed interfaces, as described in the [<abbr title="Web Accessibility I
 
 Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab's trigger element is not immediately visible (as it's inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.
 
-<div class="bd-example bd-example-tabs">
-  <ul class="nav nav-tabs" id="myTab" role="tablist">
+<div class="bd-example">
+  <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
     <li class="nav-item">
       <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
     </li>
@@ -355,9 +355,9 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
 
 To help fit your needs, this works with `<ul>`-based markup, as shown above, or with any arbitrary "roll your own" markup. Note that if you're using `<nav>`, you shouldn't add `role="tablist"` directly to it, as this would override the element's native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple `<div>`) and wrap the `<nav>` around it.
 
-<div class="bd-example bd-example-tabs">
+<div class="bd-example">
   <nav>
-    <div class="nav nav-tabs" id="nav-tab" role="tablist">
+    <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
       <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
       <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
       <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
@@ -393,7 +393,7 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
 
 The tabs plugin also works with pills.
 
-<div class="bd-example bd-example-tabs">
+<div class="bd-example">
   <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
     <li class="nav-item">
       <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
@@ -439,7 +439,7 @@ The tabs plugin also works with pills.
 
 And with vertical pills.
 
-<div class="bd-example bd-example-tabs">
+<div class="bd-example">
   <div class="row">
     <div class="col-3">
       <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">

diff --git a/site/content/docs/4.3/components/progress.md b/site/content/docs/4.3/components/progress.md
index f5b6fe136a9750490aecfb08b55dd5c9421747ba..c41aea4acdd24838e1b01e30567acb1d6209506e 100644 (file)
--- a/site/content/docs/4.3/components/progress.md
+++ b/site/content/docs/4.3/components/progress.md
@@ -127,7 +127,7 @@ The striped gradient can also be animated. Add `.progress-bar-animated` to `.pro
   <div class="progress">
     <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
   </div>
-  <button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false" autocomplete="off">
+  <button type="button" class="btn btn-secondary mt-3" data-toggle="button" id="btnToggleAnimatedProgress" aria-pressed="false" autocomplete="off">
     Toggle animation
   </button>
 </div>

diff --git a/site/static/docs/4.3/assets/js/src/application.js b/site/static/docs/4.3/assets/js/src/application.js
index dfbced41368edeb12b12e4efd1a4cdd0e67feb41..201eb48b3f00afb31f2e78aaa1507c8399a7419b 100644 (file)
--- a/site/static/docs/4.3/assets/js/src/application.js
+++ b/site/static/docs/4.3/assets/js/src/application.js
@@ -83,7 +83,7 @@
   }
 
   // Activate animated progress bar
-  var btnToggleAnimatedProgress = document.querySelector('.bd-toggle-animated-progress')
+  var btnToggleAnimatedProgress = document.getElementById('btnToggleAnimatedProgress')
   if (btnToggleAnimatedProgress) {
     btnToggleAnimatedProgress.addEventListener('click', function () {
       btnToggleAnimatedProgress.parentNode

diff --git a/site/static/docs/4.3/assets/scss/_component-examples.scss b/site/static/docs/4.3/assets/scss/_component-examples.scss
index 62ebf6953bd66cac644a84f02e223d4d9088deca..8b7a3bab85fc84a3ae48f13736858c5e1d7a7935 100644 (file)
--- a/site/static/docs/4.3/assets/scss/_component-examples.scss
+++ b/site/static/docs/4.3/assets/scss/_component-examples.scss
@@ -18,13 +18,6 @@
   .row + .row {
     margin-top: 1rem;
   }
-
-  .flex-items-top,
-  .flex-items-middle,
-  .flex-items-bottom {
-    min-height: 6rem;
-    background-color: rgba(255, 0, 0, .1);
-  }
 }
 
 .bd-example-row-flex-cols .row {
@@ -138,19 +131,6 @@
     margin-top: 2rem;
   }
 
-  .pos-f-t {
-    position: relative;
-    margin: -1rem;
-
-    @include media-breakpoint-up(sm) {
-      margin: -1.5rem;
-    }
-  }
-
-  .custom-file-input:lang(es) ~ .custom-file-label::after {
-    content: "Elegir";
-  }
-
   > .form-control {
     + .form-control {
       margin-top: .5rem;
@@ -160,12 +140,11 @@
   > .nav + .nav,
   > .alert + .alert,
   > .navbar + .navbar,
-  > .progress + .progress,
-  > .progress + .btn {
+  > .progress + .progress {
     margin-top: 1rem;
   }
 
-  > .dropdown-menu:first-child {
+  > .dropdown-menu {
     position: static;
     display: block;
   }
@@ -173,10 +152,6 @@
   > .form-group:last-child {
     margin-bottom: 0;
   }
-
-  > .close {
-    float: none;
-  }
 }
 
 // Typography
@@ -202,11 +177,6 @@
   }
 }
 
-// Contextual background colors
-.bd-example-bg-classes p {
-  padding: 1rem;
-}
-
 // Images
 .bd-example {
   > svg + svg,
@@ -227,18 +197,6 @@
   }
 }
 
-// Forms
-.bd-example-control-sizing select,
-.bd-example-control-sizing input[type="text"] + input[type="text"] {
-  margin-top: .5rem;
-}
-.bd-example-form .input-group {
-  margin-bottom: .5rem;
-}
-.bd-example > textarea.form-control {
-  resize: vertical;
-}
-
 // List groups
 .bd-example > .list-group {
   max-width: 400px;
@@ -310,37 +268,11 @@
   }
 }
 
-// Example tabbable tabs
-.bd-example-tabs .nav-tabs {
-  margin-bottom: 1rem;
-}
-
-// Popovers
-.bd-example-popover-static {
-  padding-bottom: 1.5rem;
-  background-color: #f9f9f9;
-
-  .popover {
-    position: relative;
-    display: block;
-    float: left;
-    width: 260px;
-    margin: 1.25rem;
-  }
-}
-
 // Tooltips
 .tooltip-demo a {
   white-space: nowrap;
 }
 
-.bd-example-tooltip-static .tooltip {
-  position: relative;
-  display: inline-block;
-  margin: 10px 20px;
-  opacity: 1;
-}
-
 // Scrollspy demo on fixed height div
 .scrollspy-example {
   position: relative;