TA-1362: Update bootstrap 3 theme to match branding

README.md

@@ -98,3 +98,7 @@ $navbar-default-color: $light-orange;
 
 @import "bootstrap";
 ```
+
+## Local Dev
+
+Run `npm run start` and this will bring up a local server with the docs that will recompile changes.

assets/stylesheets/_error.scss

@@ -1,6 +1,6 @@
 .t-error {
-  background-color: $brand-primary;
-  color: $white;
+  background-color: $white;
+  color: $brand-primary;
 
   hr {
     height: 1px;
@@ -23,12 +23,12 @@
 .c-error-page__header {
     font-size: floor($font-size-base * 4);
     font-weight: 700;
-    color: $white;
+    color: $brand-primary;
 }
 
 .c-error-page__subheader {
     font-size: floor($font-size-base * 3);
-    color: $white;
+    color: $brand-primary;
 }
 
 .c-error-page__context {

assets/stylesheets/_listbox.scss

@@ -3,7 +3,7 @@
   padding: 12px;
   position: relative;
   line-height: 1.6;
-  color: #017d87;
+  color: $brand-primary;
   white-space: nowrap;
   border-bottom: 1px solid #e9ecef;
 }
@@ -23,17 +23,17 @@
 }
 
 [role="option"]:hover {
-  background: #017d87;
+  background: $brand-primary;
   color: white;
 }
 
 [role="option"].focused {
-  background: #017d87;
+  background: $brand-primary;
   color: white;
 }
 
 [role="option"][aria-selected="true"] {
-  background-color: #017d87;
+  background-color: $brand-primary;
   color: white;
 }
 
@@ -55,7 +55,7 @@
 
 .c-fancy-listbox__toggle.c-fancy-listbox__toggle[aria-expanded="true"] {
   background-color: white;
-  color: #017d87;
+  color: $brand-primary;
   transition: none;
 }
 

assets/stylesheets/_skip-link.scss

@@ -1,10 +1,10 @@
 .c-skip-link:focus {
   position: absolute;
   background-color: #005d64;
-  color: #fff;
+  color: $white;
   font-weight: 600;
   padding: 1rem 2rem;
-  outline: 3px solid #fff;
+  outline: 3px solid $white;
   opacity: initial;
   text-decoration: underline;
   text-underline-position: under;

assets/stylesheets/bootstrap/_forms.scss

@@ -731,7 +731,7 @@ was-validated .input-group .form-control:invalid, .input-group .form-control.is-
 }
 
 .custom-control-input:checked~.custom-control-label::before {
-    color: #fff;
+    color: $white;
     background-color: $brand-primary;
 }
 
@@ -756,7 +756,8 @@ was-validated .input-group .form-control:invalid, .input-group .form-control.is-
 }
 
 .custom-checkbox {
-  .custom-control-input:checked~.custom-control-label::before {      background-color: $white;
+  .custom-control-input:checked~.custom-control-label::before {
+      background-color: $white;
       box-shadow: 0 0 0 1px $brand-primary;
   }
 
@@ -783,7 +784,7 @@ was-validated .input-group .form-control:invalid, .input-group .form-control.is-
   }
 
   .custom-control-input:checked~.custom-control-label::after {
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23017d87' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%231f1c3a' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
   }
 
   .o-custom-control__input--pink.custom-control-input:checked~.custom-control-label::after {
@@ -811,7 +812,7 @@ was-validated .input-group .form-control:invalid, .input-group .form-control.is-
   }
 
   .custom-control-input:checked~.custom-control-label::after {
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23017d87'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%231f1c3a'/%3E%3C/svg%3E");
     background-size: 14px;
   }
 

assets/stylesheets/bootstrap/_navbar.scss

@@ -155,7 +155,7 @@
 .navbar-brand {
   float: left;
   height: $navbar-height;
-  padding: $navbar-padding-vertical $navbar-padding-horizontal;
+  padding: 15px $navbar-padding-horizontal 15px $navbar-padding-horizontal;
   font-size: $font-size-large;
   line-height: $line-height-computed;
 
@@ -272,7 +272,7 @@
         }
       }
       .divider {
-        background-color: $accent;
+        background-color: $brand-primary;
       }
     }
   }
@@ -449,7 +449,7 @@
       &:focus {
         color: $navbar-default-link-active-color;
         // background-color: $navbar-default-link-active-bg;
-        background-image: linear-gradient(0deg, white 4px, transparent 4px);
+        background-image: linear-gradient(0deg, $navbar-default-link-active-color 4px, transparent 4px);
       }
     }
     > .disabled > a {

assets/stylesheets/bootstrap/_navs.scss

@@ -59,7 +59,7 @@
     &:hover,
     &:focus {
       background-color: $nav-link-hover-bg;
-      border-color: $accent;
+      border-color: $brand-primary;
     }
   }
 
@@ -111,7 +111,7 @@
       }
 
       &:focus {
-        outline: 2px solid #017d87;
+        outline: 2px solid $brand-primary;
         outline-offset: -1px;
         background-color: $white;
         // border-top: 1px solid $nav-tabs-border-color;

assets/stylesheets/bootstrap/_print.scss

@@ -87,7 +87,7 @@
 
     td,
     th {
-      background-color: #fff !important;
+      background-color: $white !important;
     }
   }
   .table-bordered {

assets/stylesheets/bootstrap/_theme.scss

@@ -90,7 +90,7 @@
 // Apply the mixin to the buttons
 .btn-default {
   @include btn-styles($btn-default-bg);
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 $white;
   border-color: #ccc;
 }
 .btn-primary { @include btn-styles($btn-primary-bg); }
@@ -180,7 +180,7 @@
     &,
     &:hover,
     &:focus {
-      color: #fff;
+      color: $white;
       @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
     }
   }

assets/stylesheets/bootstrap/_type.scss

@@ -198,7 +198,7 @@ mark,
 .bg-primary {
   // Given the contrast here, this is the only class to have its color inverted
   // automatically.
-  color: #fff;
+  color: $white;
 }
 @include bg-variant('.bg-primary', $brand-primary);