Merge branch 'v4-dev' of https://github.com/coreui/coreui into v4-dev-sync

# Conflicts:
#	scss/_variables.scss

Author: mrholek

docs/assets/js/application.js

@@ -39,7 +39,7 @@
     })
   }
 
-  document.querySelectorAll('.bd-example .toast')
+  document.querySelectorAll('.docs-example .toast')
     .forEach(function (toastNode) {
       var toast = new coreui.Toast(toastNode, {
         autohide: false

docs/assets/scss/_component-examples.scss

@@ -201,7 +201,7 @@
   }
 }
 
-.bd-example-offcanvas {
+.docs-example-offcanvas {
   @include border-start-radius(0);
 
   .offcanvas {

docs/assets/scss/_layout.scss

@@ -1,7 +1,6 @@
 .wrapper {
   width: 100%;
   padding-left: var(--cui-sidebar-occupy-start, 0);
-  transform: translateZ(0);
   will-change: auto;
   @include transition(padding .15s);
 }

docs/content/4.0/components/badge.md

@@ -59,7 +59,7 @@ Add any of the below-mentioned classes to modify the presentation of a badge. Pl
 
 ## Pill badges
 
-Apply the `.badge-pill` modifier class to make badges rounded.
+Apply the `.rounded-pill` modifier class to make badges rounded.
 
 {{< example >}}
 {{< badge.inline >}}

docs/content/4.0/components/card.md

@@ -452,7 +452,7 @@ Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="card border-{{ .name }} mb-3" style="max-width: 18rem;">
   <div class="card-header">Header</div>
-  <div class="card-body{{ if not .contrast_color }} text-{{ .name }}{{ end }}">
+  <div class="card-body text-{{ .name }}">
     <h5 class="card-title">{{ .name | title }} card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>
@@ -463,14 +463,14 @@ Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the
 
 ### Top border
 
-Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the `border-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.
+Use [border utilities]({{< docsref "/utilities/borders" >}}) to change just the `border-top-color` of a card. Note that you can put `.text-{color}` classes on the parent `.card` or a subset of the card's contents as shown below.
 
 {{< example >}}
 {{< card.inline >}}
 {{- range (index $.Site.Data "theme-colors") }}
 <div class="card border-top-{{ .name }} border-top-3 mb-3" style="max-width: 18rem;">
   <div class="card-header">Header</div>
-  <div class="card-body{{ if not .contrast_color }} text-{{ .name }}{{ end }}">
+  <div class="card-body text-{{ .name }}">
     <h5 class="card-title">{{ .name | title }} card title</h5>
     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
   </div>

docs/content/4.0/components/carousel.md

@@ -65,11 +65,6 @@ Adding in the previous and next controls. We recommend using `<button>` elements
       {{< placeholder width="800" height="400" class="docs-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}}
     </div>
   </div>
-  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-coreui-slide="prev">
-    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Previous</span>
-  </a>
-  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-coreui-slide="next">
   <button class="carousel-control-prev" type="button" data-coreui-target="#carouselExampleControls" data-coreui-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="visually-hidden">Previous</span>

docs/content/4.0/components/modal.md

@@ -517,7 +517,7 @@ exampleModal.addEventListener('show.coreui.modal', function (event) {
 
 Toggle between multiple modals with some clever placement of the `data-coreui-target` and `data-coreui-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals.
 
-<div class="bd-example">
+<div class="docs-example">
   <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
     <div class="modal-dialog modal-dialog-centered">
       <div class="modal-content">

docs/content/4.0/components/offcanvas.md

@@ -27,7 +27,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr
 
 Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
 
-{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
+{{< example class="docs-example-offcanvas p-0 bg-light overflow-hidden" >}}
 <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
   <div class="offcanvas-header">
     <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>

docs/content/4.0/components/toasts.md

@@ -45,7 +45,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 
 Click the button the below to show as toast (positioning with our utilities in the lower right corner) that has been hidden by default with `.hide`.
 
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
+<div class="toaster position-fixed bottom-0 end-0 p-3" style="z-index: 5">
   <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
@@ -59,7 +59,7 @@ Click the button the below to show as toast (positioning with our utilities in t
   </div>
 </div>
 
-<div class="bd-example">
+<div class="docs-example">
   <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
 </div>
 

docs/content/4.0/components/tooltips.md

@@ -45,7 +45,7 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
 
 Hover over the links below to see tooltips:
 
-<div class="bd-example tooltip-demo">
+<div class="docs-example tooltip-demo">
   <p class="muted">Placeholder text to demonstrate some <a href="#" data-coreui-toggle="tooltip" title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-coreui-toggle="tooltip" title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-coreui-toggle="tooltip" title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-coreui-toggle="tooltip" title="The last tip!">your own</a> site or project.
   </p>
 </div>