1 files changed, 132 insertions, 158 deletions

diff --git a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
index 89c52208f..f93f1ee98 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
@@ -1,5 +1,3 @@
-// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
-
 //
 // Grid examples
 //
@@ -10,21 +8,14 @@
     > [class^="col-"] {
       padding-top: .75rem;
       padding-bottom: .75rem;
-      background-color: rgba(86, 61, 124, .15);
-      border: 1px solid rgba(86, 61, 124, .2);
+      background-color: rgba(39, 41, 43, .03);
+      border: 1px solid rgba(39, 41, 43, .1);
     }
   }
 
   .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 {
@@ -32,20 +23,26 @@
   background-color: rgba(255, 0, 0, .1);
 }
 
-.bd-highlight {
-  background-color: rgba($bd-purple, .15);
-  border: 1px solid rgba($bd-purple, .15);
-}
+.bd-example-cssgrid {
+  text-align: center;
 
-.bd-example-responsive-containers {
-  [class^="container"] {
+  .grid + .grid {
+    margin-top: 1rem;
+  }
+
+  .grid > * {
     padding-top: .75rem;
     padding-bottom: .75rem;
-    background-color: rgba(86, 61, 124, .15);
-    border: 1px solid rgba(86, 61, 124, .2);
+    background-color: rgba(255, 0, 255, .1);
+    border: 1px solid rgba(255, 0, 255, .25);
   }
 }
 
+.bd-highlight {
+  background-color: rgba($bd-purple, .15);
+  border: 1px solid rgba($bd-purple, .15);
+}
+
 // Grid mixins
 .example-container {
   width: 800px;
@@ -88,31 +85,27 @@
 .bd-example {
   position: relative;
   padding: 1rem;
-  margin: 1rem (-$grid-gutter-width / 2) 0;
-  border: solid $gray-100;
-  border-width: .2rem 0 0;
+  margin: 1rem (-$grid-gutter-width * .5) 0;
+  border: solid $gray-300;
+  border-width: 1px 0 0;
   @include clearfix();
 
   @include media-breakpoint-up(sm) {
     padding: 1.5rem;
     margin-right: 0;
     margin-left: 0;
-    border-width: .2rem;
-  }
+    border-width: 1px;
+    @include border-top-radius(.25rem);
 
-  + .highlight,
-  + .clipboard + .highlight {
-    margin-top: 0;
+    + .bd-clipboard + .highlight {
+      @include border-bottom-radius(.25rem);
+    }
   }
 
   + p {
     margin-top: 2rem;
   }
 
-  .custom-file-input:lang(es) ~ .custom-file-label::after {
-    content: "Elegir";
-  }
-
   > .form-control {
     + .form-control {
       margin-top: .5rem;
@@ -122,100 +115,50 @@
   > .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;
   }
 
-  > .form-group:last-child {
-    margin-bottom: 0;
-  }
-
-  > .close {
-    float: none;
-  }
-}
-
-// Typography
-.bd-example-type {
-  .table {
-    td {
-      padding: 1rem 0;
-      border-color: #eee;
-    }
-    tr:first-child td {
-      border-top: 0;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: 0;
+  > :last-child {
     margin-bottom: 0;
   }
-}
 
-// Contextual background colors
-.bd-example-bg-classes p {
-  padding: 1rem;
-}
-
-// Images
-.bd-example {
+  // Images
   > svg + svg,
   > img + img {
     margin-left: .5rem;
   }
-}
 
-// Buttons
-.bd-example {
+  // Buttons
   > .btn,
   > .btn-group {
-    margin-top: .25rem;
-    margin-bottom: .25rem;
+    margin: .25rem .125rem;
   }
   > .btn-toolbar + .btn-toolbar {
     margin-top: .5rem;
   }
-}
 
-// 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
+  > .list-group {
+    max-width: 400px;
+  }
 
-// List groups
-.bd-example > .list-group {
-  max-width: 400px;
-}
-.bd-example > [class*="list-group-horizontal"] {
-  max-width: 100%;
-}
+  > [class*="list-group-horizontal"] {
+    max-width: 100%;
+  }
 
-// Navbars
-.bd-example {
+  // Navbars
   .fixed-top,
   .sticky-top {
     position: static;
     margin: -1rem -1rem 1rem;
   }
+
   .fixed-bottom {
     position: static;
     margin: 1rem -1rem -1rem;
@@ -230,64 +173,58 @@
       margin: 1rem -1.5rem -1.5rem;
     }
   }
-}
 
-// Pagination
-.bd-example .pagination {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
+  // Pagination
+  .pagination {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+  }
 }
 
-// Example modals
-.modal {
-  z-index: 1072;
-
-  .tooltip,
-  .popover {
-    z-index: 1073;
+// Ratio helpers
+.bd-example-ratios {
+  .ratio {
+    display: inline-block;
+    width: 10rem;
+    color: $gray-600;
+    background-color: $gray-100;
+    border: $border-width solid $border-color;
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }
+.bd-example-ratios-breakpoint {
+  .ratio-4x3 {
+    width: 16rem;
 
-.modal-backdrop {
-  z-index: 1071;
+    @include media-breakpoint-up(md) {
+      --bs-aspect-ratio: 50%; // 2x1
+    }
+  }
 }
 
 .bd-example-modal {
   background-color: #fafafa;
 
   .modal {
-    position: relative;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
-    z-index: 1;
+    position: static;
     display: block;
   }
-
-  .modal-dialog {
-    left: auto;
-    margin-right: auto;
-    margin-left: auto;
-  }
-}
-
-// Example tabbable tabs
-.bd-example-tabs .nav-tabs {
-  margin-bottom: 1rem;
 }
 
-// Popovers
-.bd-example-popover-static {
-  padding-bottom: 1.5rem;
-  background-color: #f9f9f9;
+.bd-example-offcanvas {
+  @include border-start-radius(0);
 
-  .popover {
-    position: relative;
+  .offcanvas {
+    position: static;
     display: block;
-    float: left;
-    width: 260px;
-    margin: 1.25rem;
+    height: 200px;
+    visibility: visible;
+    transform: translate(0);
   }
 }
 
@@ -296,13 +233,6 @@
   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;
@@ -333,42 +263,86 @@
   }
 }
 
+.bd-example-rounded-utils {
+  [class*="rounded"] {
+    margin: .25rem;
+  }
+}
+
+.bd-example-position-utils {
+  position: relative;
+  padding: 3em;
+
+  .position-relative {
+    height: 200px;
+    background-color: #f5f5f5;
+  }
+
+  .position-absolute {
+    width: 2em;
+    height: 2em;
+    background-color: $dark;
+    @include border-radius();
+  }
+}
+
+.bd-example-position-examples {
+  &::after {
+    content: none;
+  }
+}
+
+// Placeholders
+.bd-example-placeholder-cards {
+  &::after {
+    display: none;
+  }
+
+  .card {
+    width: 18rem;
+  }
+}
+
+// Toasts
+.bd-example-toasts {
+  min-height: 240px;
+}
+
 //
 // Code snippets
 //
 
 .highlight {
   padding: 1rem;
-  margin-top: 1rem;
   margin-bottom: 1rem;
   background-color: $gray-100;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
 
   @include media-breakpoint-up(sm) {
-    padding: 1.5rem;
+    padding: 1rem 1.5rem;
   }
-}
-
-.bd-content .highlight {
-  margin-right: (-$grid-gutter-width / 2);
-  margin-left: (-$grid-gutter-width / 2);
 
-  @include media-breakpoint-up(sm) {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
-
-.highlight {
   pre {
     padding: 0;
     margin-top: .65rem;
     margin-bottom: .65rem;
+    white-space: pre;
     background-color: transparent;
     border: 0;
   }
+
   pre code {
     @include font-size(inherit);
     color: $gray-900; // Effectively the base text color
+    word-wrap: normal;
+  }
+}
+
+.bd-content .highlight {
+  margin-right: (-$grid-gutter-width * .5);
+  margin-left: (-$grid-gutter-width * .5);
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
   }
 }