Clean up docs Sass code.

* remove unused rules
* use Sass nesting in more places
* use the core mixins in more places
* use the color variables more

site/docs/4.1/assets/scss/_algolia.scss

@@ -13,7 +13,7 @@
     min-width: 0 !important;
     max-width: none !important;
     padding: .75rem 0 !important;
-    background-color: #fff;
+    background-color: $white;
     background-clip: padding-box;
     border: 1px solid rgba(0, 0, 0, .1);
     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);

site/docs/4.1/assets/scss/_brand.scss

@@ -1,5 +1,3 @@
-// stylelint-disable no-duplicate-selectors
-
 //
 // Brand guidelines
 //
@@ -10,62 +8,44 @@
   width: 100%;
   margin-bottom: 1rem;
   overflow: hidden;
-  color: #563d7c;
+  color: $bd-purple;
   background-color: #f9f9f9;
   border-radius: .25rem;
+
+  .inverse {
+    color: $white;
+    background-color: $bd-purple;
+  }
 }
 
 // Individual items
 .bd-brand-item {
   padding: 4rem 0;
   text-align: center;
-}
-.bd-brand-item + .bd-brand-item {
-  border-top: 1px solid #fff;
-}
-.bd-brand-logos .inverse {
-  color: #fff;
-  background-color: #563d7c;
-}
 
-// Heading content within
-.bd-brand-item h1,
-.bd-brand-item h3 {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-.bd-brand-item .bd-booticon {
-  margin-right: auto;
-  margin-left: auto;
-}
+  + .bd-brand-item {
+    border-top: 1px solid $white;
+  }
 
-// Make the icons stand out on what is/isn't okay
-// .bd-brand-item .glyphicon {
-//   width: 30px;
-//   height: 30px;
-//   margin: 10px auto -10px;
-//   line-height: 30px;
-//   color: #fff;
-//   border-radius: 50%;
-// }
-// .bd-brand-item .glyphicon-ok {
-//   background-color: #5cb85c;
-// }
-// .bd-brand-item .glyphicon-remove {
-//   background-color: #d9534f;
-// }
+  // Heading content within
+  h1,
+  h3 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 
-@media (min-width: 768px) {
-  .bd-brand-item {
+  @include media-breakpoint-up(md) {
     display: table-cell;
     width: 1%;
-  }
-  .bd-brand-item + .bd-brand-item {
-    border-top: 0;
-    border-left: 1px solid #fff;
-  }
-  .bd-brand-item h1 {
-    font-size: 4rem;
+
+    + .bd-brand-item {
+      border-top: 0;
+      border-left: 1px solid $white;
+    }
+
+    h1 {
+      font-size: 4rem;
+    }
   }
 }
 
@@ -77,24 +57,8 @@
 .color-swatches {
   margin: 0 -5px;
   overflow: hidden; // clearfix
-}
 
-.color-swatch {
-  float: left;
-  width: 4rem;
-  height: 4rem;
-  margin-right: .25rem;
-  margin-left: .25rem;
-  border-radius: .25rem;
-
-  @media (min-width: 768px) {
-    width: 6rem;
-    height: 6rem;
-  }
-}
-
-// Docs colors
-.color-swatches {
+  // Docs colors
   .bd-purple {
     background-color: $bd-purple;
   }
@@ -108,3 +72,17 @@
     background-color: #f9f9f9;
   }
 }
+
+.color-swatch {
+  float: left;
+  width: 4rem;
+  height: 4rem;
+  margin-right: .25rem;
+  margin-left: .25rem;
+  border-radius: .25rem;
+
+  @include media-breakpoint-up(md) {
+    width: 6rem;
+    height: 6rem;
+  }
+}

site/docs/4.1/assets/scss/_buttons.scss

@@ -9,7 +9,7 @@
 
   &:hover,
   &:active {
-    color: #fff;
+    color: $white;
     background-color: $bd-purple-bright;
     border-color: $bd-purple-bright;
   }

site/docs/4.1/assets/scss/_callouts.scss

@@ -9,23 +9,23 @@
   border: 1px solid #eee;
   border-left-width: .25rem;
   border-radius: .25rem;
-}
 
-.bd-callout h4 {
-  margin-top: 0;
-  margin-bottom: .25rem;
-}
+  h4 {
+    margin-top: 0;
+    margin-bottom: .25rem;
+  }
 
-.bd-callout p:last-child {
-  margin-bottom: 0;
-}
+  p:last-child {
+    margin-bottom: 0;
+  }
 
-.bd-callout code {
-  border-radius: .25rem;
-}
+  code {
+    border-radius: .25rem;
+  }
 
-.bd-callout + .bd-callout {
-  margin-top: -.25rem;
+  + .bd-callout {
+    margin-top: -.25rem;
+  }
 }
 
 // Variations

site/docs/4.1/assets/scss/_clipboard-js.scss

@@ -10,6 +10,10 @@
   + .highlight {
     margin-top: 0;
   }
+
+  @include media-breakpoint-up(md) {
+    display: block;
+  }
 }
 
 .btn-clipboard {
@@ -27,13 +31,7 @@
   border-radius: .25rem;
 
   &:hover {
-    color: #fff;
+    color: $white;
     background-color: #027de7;
   }
 }
-
-@media (min-width: 768px) {
-  .bd-clipboard {
-    display: block;
-  }
-}

site/docs/4.1/assets/scss/_examples.scss

@@ -1,24 +0,0 @@
-//
-// Examples
-//
-
-.bd-examples .img-thumbnail {
-  margin-bottom: .75rem;
-}
-.bd-examples h4 {
-  margin-bottom: .25rem;
-}
-.bd-examples p {
-  margin-bottom: 1.25rem;
-}
-
-@media (max-width: 480px) {
-  .bd-examples {
-    margin-right: -.75rem;
-    margin-left: -.75rem;
-  }
-  .bd-examples > [class^="col-"] {
-    padding-right: .75rem;
-    padding-left: .75rem;
-  }
-}

site/docs/4.1/assets/scss/_nav.scss

@@ -43,7 +43,7 @@
 
       &.active,
       &:hover {
-        color: #fff;
+        color: $white;
         background-color: transparent;
       }
 

site/docs/4.1/assets/scss/docs.scss

@@ -40,7 +40,6 @@
 @import "component-examples";
 @import "buttons";
 @import "callouts";
-@import "examples";
 @import "browser-bugs";
 @import "brand";
 @import "colors";