Docs tweaks

- Simplify display headings example markup
- Simplify footer styles
- Remove z-indices hacks in the docs
- Remove redundant modal styling in docs
- Use `escape-svg()` to escape docs sidebar chevron
- Simplify sidebar chevron code
- Cleanup masthead css & fix column width between `md` & `lg`
- Easier to download logo's with the `download` attribute.
- Changed some color codes into variables
- Cleanup brands css

12 files changed, 20 insertions, 118 deletions

diff --git a/site/static/docs/4.3/assets/scss/_ads.scss b/site/static/docs/4.3/assets/scss/_ads.scss
index da682b952f..026d1a17a7 100644
--- a/site/static/docs/4.3/assets/scss/_ads.scss
+++ b/site/static/docs/4.3/assets/scss/_ads.scss
@@ -17,7 +17,7 @@
   background-color: rgba(0, 0, 0, .05);
 
   a {
-    color: #333;
+    color: $gray-800;
     text-decoration: none;
   }
 
@@ -35,5 +35,5 @@
 .carbon-poweredby {
   display: block;
   margin-top: .75rem;
-  color: #777 !important;
+  color: $gray-700 !important;
 }
diff --git a/site/static/docs/4.3/assets/scss/_algolia.scss b/site/static/docs/4.3/assets/scss/_algolia.scss
index 23781da12a..f86d2fb4b9 100644
--- a/site/static/docs/4.3/assets/scss/_algolia.scss
+++ b/site/static/docs/4.3/assets/scss/_algolia.scss
@@ -128,7 +128,7 @@
     padding: .75rem 1rem 0;
     @include font-size(.75rem, true);
     line-height: 1 !important;
-    color: #767676 !important;
+    color: $gray-600 !important;
     border-top: 1px solid rgba(0, 0, 0, .1);
   }
 
diff --git a/site/static/docs/4.3/assets/scss/_brand.scss b/site/static/docs/4.3/assets/scss/_brand.scss
index c3ba73c3e3..be6aa91ffb 100644
--- a/site/static/docs/4.3/assets/scss/_brand.scss
+++ b/site/static/docs/4.3/assets/scss/_brand.scss
@@ -4,13 +4,7 @@
 
 // Logo series wrapper
 .bd-brand-logos {
-  display: table;
-  width: 100%;
-  margin-bottom: 1rem;
-  overflow: hidden;
   color: $bd-purple;
-  background-color: #f9f9f9;
-  @include border-radius();
 
   .inverse {
     color: $white;
@@ -20,32 +14,18 @@
 
 // Individual items
 .bd-brand-item {
-  padding: 4rem 0;
-  text-align: center;
+  width: 100%;
+  padding: 4rem 1rem;
 
   + .bd-brand-item {
     border-top: 1px solid $white;
   }
 
-  // Heading content within
-  h1,
-  h3 {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
   @include media-breakpoint-up(md) {
-    display: table-cell;
-    width: 1%;
-
     + .bd-brand-item {
       border-top: 0;
       border-left: 1px solid $white;
     }
-
-    h1 {
-      @include font-size(4rem);
-    }
   }
 }
 
@@ -55,8 +35,8 @@
 //
 
 .color-swatches {
+  display: flex;
   margin: 0 -5px;
-  overflow: hidden; // clearfix
 
   // Docs colors
   .bd-purple {
@@ -74,7 +54,6 @@
 }
 
 .color-swatch {
-  float: left;
   width: 4rem;
   height: 4rem;
   margin-right: .25rem;
diff --git a/site/static/docs/4.3/assets/scss/_callouts.scss b/site/static/docs/4.3/assets/scss/_callouts.scss
index da7cf87303..a468235573 100644
--- a/site/static/docs/4.3/assets/scss/_callouts.scss
+++ b/site/static/docs/4.3/assets/scss/_callouts.scss
@@ -6,7 +6,7 @@
   padding: 1.25rem;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
-  border: 1px solid #eee;
+  border: 1px solid $gray-200;
   border-left-width: .25rem;
   @include border-radius();
 
diff --git a/site/static/docs/4.3/assets/scss/_clipboard-js.scss b/site/static/docs/4.3/assets/scss/_clipboard-js.scss
index 569094321b..c893533973 100644
--- a/site/static/docs/4.3/assets/scss/_clipboard-js.scss
+++ b/site/static/docs/4.3/assets/scss/_clipboard-js.scss
@@ -24,13 +24,13 @@
   display: block;
   padding: .25rem .5rem;
   @include font-size(.75em);
-  color: #818a91;
+  color: $gray-800;
   background-color: transparent;
   border: 0;
   @include border-radius();
 
   &:hover {
     color: $white;
-    background-color: #027de7;
+    background-color: $primary;
   }
 }
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 41aa04fb71..71822578f8 100644
--- a/site/static/docs/4.3/assets/scss/_component-examples.scss
+++ b/site/static/docs/4.3/assets/scss/_component-examples.scss
@@ -125,29 +125,6 @@
   }
 }
 
-// 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;
-    margin-bottom: 0;
-  }
-}
-
 // Images
 .bd-example {
   > svg + svg,
@@ -172,6 +149,7 @@
 .bd-example > .list-group {
   max-width: 400px;
 }
+
 .bd-example > [class*="list-group-horizontal"] {
   max-width: 100%;
 }
@@ -183,6 +161,7 @@
     position: static;
     margin: -1rem -1rem 1rem;
   }
+
   .fixed-bottom {
     position: static;
     margin: 1rem -1rem -1rem;
@@ -205,38 +184,13 @@
   margin-bottom: .5rem;
 }
 
-// Example modals
-.modal {
-  z-index: 1072;
-
-  .tooltip,
-  .popover {
-    z-index: 1073;
-  }
-}
-
-.modal-backdrop {
-  z-index: 1071;
-}
-
 .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;
-  }
 }
 
 // Tooltips
@@ -308,6 +262,7 @@
     background-color: transparent;
     border: 0;
   }
+
   pre code {
     @include font-size(inherit);
     color: $gray-900; // Effectively the base text color
diff --git a/site/static/docs/4.3/assets/scss/_footer.scss b/site/static/docs/4.3/assets/scss/_footer.scss
index 29d31df3a2..c5f9c1b100 100644
--- a/site/static/docs/4.3/assets/scss/_footer.scss
+++ b/site/static/docs/4.3/assets/scss/_footer.scss
@@ -4,8 +4,6 @@
 
 .bd-footer {
   @include font-size(.875rem);
-  text-align: center;
-  background-color: #f7f7f7;
 
   a {
     font-weight: 600;
@@ -20,10 +18,6 @@
   p {
     margin-bottom: 0;
   }
-
-  @include media-breakpoint-up(sm) {
-    text-align: left;
-  }
 }
 
 .bd-footer-links {
diff --git a/site/static/docs/4.3/assets/scss/_masthead.scss b/site/static/docs/4.3/assets/scss/_masthead.scss
index 261f37eb49..71121746cd 100644
--- a/site/static/docs/4.3/assets/scss/_masthead.scss
+++ b/site/static/docs/4.3/assets/scss/_masthead.scss
@@ -1,8 +1,7 @@
 // stylelint-disable declaration-no-important
 
 .bd-masthead {
-  position: relative;
-  padding: 3rem ($grid-gutter-width / 2);
+  padding: 3rem 0;
   background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
 
   h1 {
@@ -17,27 +16,10 @@
   .btn {
     padding: .8rem 2rem;
     font-weight: 600;
-    @include font-size(1.25rem);
-  }
-
-  .carbonad {
-    margin-top: 0 !important;
-    margin-bottom: -3rem !important;
   }
 
   @include media-breakpoint-up(sm) {
-    padding-top: 5rem;
-    padding-bottom: 5rem;
-
-    .carbonad {
-      margin-bottom: 0 !important;
-    }
-  }
-
-  @include media-breakpoint-up(md) {
-    .carbonad {
-      margin-top: 3rem !important;
-    }
+    padding: 5rem 0;
   }
 }
 
@@ -74,7 +56,3 @@
   width: 6rem;
   margin: 2rem 0;
 }
-
-.masthead-followup {
-  .bd-clipboard { display: none; }
-}
diff --git a/site/static/docs/4.3/assets/scss/_sidebar.scss b/site/static/docs/4.3/assets/scss/_sidebar.scss
index bd88c1cb27..5cb25bbc36 100644
--- a/site/static/docs/4.3/assets/scss/_sidebar.scss
+++ b/site/static/docs/4.3/assets/scss/_sidebar.scss
@@ -40,14 +40,9 @@
 .bd-sidenav-group {
   &.has-children .bd-sidenav-group-link::before {
     display: inline-block;
-    width: .875rem;
-    height: .875rem;
     margin-right: .25rem;
-    content: "";
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: center center;
-    opacity: .5;
+    line-height: 0; // Align in the middle
+    content: escape-svg($sidebar-colapse-icon);
   }
 
   &.active {
diff --git a/site/static/docs/4.3/assets/scss/_subnav.scss b/site/static/docs/4.3/assets/scss/_subnav.scss
index 38cb628ae4..7f9696b279 100644
--- a/site/static/docs/4.3/assets/scss/_subnav.scss
+++ b/site/static/docs/4.3/assets/scss/_subnav.scss
@@ -18,7 +18,7 @@
     @supports (position: sticky) {
       position: sticky;
       top: 0;
-      z-index: 1071; // over everything in bootstrap
+      z-index: $zindex-sticky;
     }
   }
 }
diff --git a/site/static/docs/4.3/assets/scss/_toc.scss b/site/static/docs/4.3/assets/scss/_toc.scss
index c4f26e67a7..2ad4f8338d 100644
--- a/site/static/docs/4.3/assets/scss/_toc.scss
+++ b/site/static/docs/4.3/assets/scss/_toc.scss
@@ -3,7 +3,7 @@
 .bd-toc nav {
   padding-top: .125em;
   padding-bottom: .125em;
-  border-left: .25em solid #eee;
+  border-left: .25em solid $gray-200;
 
   > ul {
     padding-left: .5rem;
diff --git a/site/static/docs/4.3/assets/scss/_variables.scss b/site/static/docs/4.3/assets/scss/_variables.scss
index a71fd77c9b..b558796544 100644
--- a/site/static/docs/4.3/assets/scss/_variables.scss
+++ b/site/static/docs/4.3/assets/scss/_variables.scss
@@ -10,6 +10,7 @@ $bd-info:          #5bc0de;
 $bd-warning:       #f0ad4e;
 $bd-danger:        #d9534f;
 $dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
+$sidebar-colapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
 
 // Enable responsive font sizes for font sizes defined in the docs
 // The weird if test is made as a workaround to prevent a false fusv error.