native dark theme initial checkin

1 files changed, 61 insertions, 21 deletions

diff --git a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
index f4865daf8..11800a638 100644
--- a/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
+++ b/vendor/twbs/bootstrap/site/assets/scss/_component-examples.scss
@@ -3,7 +3,7 @@
 //
 
 .bd-example-snippet {
-  border: solid $border-color;
+  border: solid var(--bs-border-color);
   border-width: 1px 0;
 
   @include media-breakpoint-up(md) {
@@ -17,7 +17,7 @@
   position: relative;
   padding: var(--bd-example-padding);
   margin: 0 ($bd-gutter-x * -.5);
-  border: solid $border-color;
+  border: solid var(--bs-border-color);
   border-width: 1px 0;
   @include clearfix();
 
@@ -32,7 +32,7 @@
 
   + .bd-code-snippet {
     @include border-top-radius(0);
-    border: solid $border-color;
+    border: solid var(--bs-border-color);
     border-width: 0 1px 1px;
   }
 
@@ -58,7 +58,8 @@
     display: block;
   }
 
-  > :last-child {
+  > :last-child,
+  > nav:last-child .breadcrumb {
     margin-bottom: 0;
   }
 
@@ -115,11 +116,12 @@
 //
 
 .bd-example-row [class^="col"],
-.bd-example-cssgrid .grid > * {
+.bd-example-cols [class^="col"] > *,
+.bd-example-cssgrid [class*="grid"] > * {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  background-color: rgba(var(--bd-violet-rgb), .1);
-  border: 1px solid rgba(var(--bd-violet-rgb), .25);
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }
 
 .bd-example-row .row + .row,
@@ -129,12 +131,12 @@
 
 .bd-example-row-flex-cols .row {
   min-height: 10rem;
-  background-color: rgba(255, 0, 0, .1);
+  background-color: rgba(var(--bd-violet-rgb), .15);
 }
 
 .bd-example-flex div {
-  background-color: rgba($bd-purple, .15);
-  border: 1px solid rgba($bd-purple, .15);
+  background-color: rgba(var(--bd-violet-rgb), .15);
+  border: 1px solid rgba(var(--bd-violet-rgb), .3);
 }
 
 // Grid mixins
@@ -176,9 +178,9 @@
   .ratio {
     display: inline-block;
     width: 10rem;
-    color: $gray-600;
-    background-color: $gray-100;
-    border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
+    color: var(--bs-secondary-color);
+    background-color: var(--bs-tertiary-bg);
+    border: var(--bs-border-width) solid var(--bs-border-color);
 
     > div {
       display: flex;
@@ -208,8 +210,14 @@
 }
 
 // Tooltips
-.tooltip-demo a {
-  white-space: nowrap;
+.tooltip-demo {
+  a {
+    white-space: nowrap;
+  }
+
+  .btn {
+    margin: .25rem .125rem;
+  }
 }
 
 // scss-docs-start custom-tooltip
@@ -253,7 +261,7 @@
     width: 5rem;
     height: 5rem;
     margin: .25rem;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
   }
 }
 
@@ -269,13 +277,13 @@
 
   .position-relative {
     height: 200px;
-    background-color: #f5f5f5;
+    background-color: var(--bs-tertiary-bg);
   }
 
   .position-absolute {
     width: 2rem;
     height: 2rem;
-    background-color: $dark;
+    background-color: var(--bs-body-color);
     @include border-radius();
   }
 }
@@ -302,6 +310,32 @@
   min-height: 240px;
 }
 
+.bd-example-zindex-levels {
+  min-height: 15rem;
+
+  > div {
+    background-color: tint-color($bd-violet, 75%);
+    border: 1px solid tint-color($bd-violet, 50%);
+  }
+
+  > :nth-child(2) {
+    top: 3rem;
+    left: 3rem;
+  }
+  > :nth-child(3) {
+    top: 4.5rem;
+    left: 4.5rem;
+  }
+  > :nth-child(4) {
+    top: 6rem;
+    left: 6rem;
+  }
+  > :nth-child(5) {
+    top: 7.5rem;
+    left: 7.5rem;
+  }
+}
+
 //
 // Code snippets
 //
@@ -310,7 +344,7 @@
   position: relative;
   padding: .75rem ($bd-gutter-x * .5);
   margin-bottom: 1rem;
-  background-color: var(--bs-gray-100);
+  background-color: var(--bs-tertiary-bg);
 
   @include media-breakpoint-up(md) {
     padding: .75rem 1.25rem;
@@ -329,7 +363,7 @@
 
   pre code {
     @include font-size(inherit);
-    color: $gray-900; // Effectively the base text color
+    color: var(--bs-body-color); // Effectively the base text color
     word-wrap: normal;
   }
 }
@@ -354,6 +388,12 @@
 }
 
 .highlight-toolbar {
-  border: solid $border-color;
+  background-color: var(--bs-tertiary-bg);
+  border: solid var(--bs-border-color);
   border-width: 1px 0;
+
+  .btn-clipboard {
+    margin-top: 0;
+    margin-right: 0;
+  }
 }