uswds-jekyll 4.2.0 → 5.0.0

data/_sass/uswds/components/_header.scss

@@ -1,228 +1,50 @@
-// Header variables ---------- //
-
-$height-nav-secondary: 5rem;
-$width-nav-sidebar:    250px;
-
-// z-indexes - TODO refactor to a site-wide z-index management approach
-$z-index-header:  7000;
-$z-index-overlay: 8000;
-$z-index-nav:     9000;
-
-// Header ------------- //
-
 .usa-header {
-  width: 100%;
-  z-index: $z-index-header;
-
-  @include media($nav-width) {
-    border-bottom: 1px solid $color-gray-lighter;
-  }
-
-  a {
-    border-bottom: none;
-  }
-
-  .usa-search {
-    @include media($nav-width) {
-      float: right;
-      max-width: 21.5rem;
-    }
-  }
-}
-
-.usa-logo {
-  float: left;
-  line-height: 4rem;
-  margin-left: 1.5rem;
-
-  @include media($nav-width) {
-    line-height: 7.5rem;
-    margin-left: 0;
-  }
-
-  a {
-    color: $color-base;
-    text-decoration: none;
-  }
-
-  br {
-    display: none;
-
-    @include media($nav-width) {
-      display: block;
-    }
-  }
-}
-
-.usa-logo-text {
-  display: block;
-  font-size: $h5-font-size;
-  font-style: normal;
-  font-weight: $font-bold;
-  margin: 0;
-
-  @include media($nav-width) {
-    display: block;
-    font-size: 2.4rem;
-    line-height: $heading-line-height;
-  }
-}
-
-.usa-menu-btn {
-  /* stylelint-disable declaration-block-no-ignored-properties */
-  @include button-unstyled;
-  background-color: $color-primary;
-  color: $color-white;
-  display: inline;
-  float: right;
-  font-size: $h6-font-size;
-  height: 4rem;
-  line-height: 4rem;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  width: 5.8rem;
-  /* stylelint-enable */
-
-  @include media($nav-width) {
-    display: none;
-  }
-
-  &:hover {
-    color: $color-white;
-    background-color: $color-primary-darker;
-  }
-
-  &:visited {
-    color: $color-white;
-  }
-}
-
-.usa-overlay {
-  @include position(fixed, 0);
-  background: $color-black;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-  visibility: hidden;
-  z-index: $z-index-overlay;
-
-  &.is-visible {
-    opacity: 0.1;
-    visibility: visible;
-  }
-}
-
-// Basic header ----------- //
-
-.usa-header-basic {
-  .usa-logo {
-    @include media($nav-width) {
-      bottom: 0;
-      position: absolute;
-    }
-  }
-
-  .usa-navbar {
-    @include media($nav-width) {
-      position: relative;
-      width: 18%; // TODO: review this more
-    }
-  }
-}
-
-// Extended header ----------- //
-
-.usa-header-extended {
-  .usa-header {
-    @include media($nav-width) {
-      border-bottom: none;
-    }
+  @if variable-exists(header-bg) {
+    background-color: color($header-bg);
   }
 
   .usa-logo {
-    @include media($nav-width) {
-      @include margin(3rem null);
-    }
-  }
-
-  em {
-    @include media($nav-width) {
-      font-size: 3.2rem;
-      line-height: 1;
-    }
-  }
-
-  .usa-navbar {
-    @include media($nav-width) {
-      @include outer-container($site-max-width);
-      @include padding(null $site-margins);
-      display: block;
-      height: auto;
-    }
-  }
-
-  .usa-nav {
-    @include media($nav-width) {
-      border-top: 1px solid $color-gray-lighter;
-      float: none;
-      padding: 0;
-      width: 100%;
-    }
-  }
-
-  .usa-nav-inner {
-    @include media($nav-width) {
-      @include outer-container($site-max-width);
-      @include padding(null $site-margins null 1.5rem);
-      position: relative;
+    a {
+      @if variable-exists(header-title) {
+        color: color($header-title);
+      }
+      align-items: center;
+      display: flex;
     }
-  }
 
-  .usa-nav-primary {
-    @include media($nav-width) {
-      @include clearfix;
-    }
+    .usa-logo-img {
+      float: left;
+      height: units(2);
+      margin-right: units(1);
 
-    button {
-      &[aria-expanded=false],
-      &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
-        @include media($nav-width) { /* stylelint-disable-line selector-no-qualifying-type */
-          background-position: right 1.5rem top 53%;
-        }
+      @media($theme-header-min-width) {
+        margin-top: 0;
+        height: units(3);
       }
-    }
-  }
 
-  .usa-nav-link {
-    @include media($nav-width) {
-      @include padding(1.8rem null);
-    }
-  }
-
-  .usa-nav-submenu {
-    .usa-grid-full {
-      @include media($nav-width) {
-        padding-left: 1.2rem;
+      & + .usa-logo__text {
+        float: left;
       }
     }
   }
 
-  .usa-megamenu {
-    @include media($nav-width) {
-      padding-left: $site-margins;
+  &.usa-header--extended .usa-logo-img {
+    @include at-media($theme-header-min-width) {
+      height: units(4);
     }
   }
 
-  // Temp code for v1 to force show the search at mobile, not dekstop
-  /* stylelint-disable selector-no-id, declaration-no-important  */
-  .usa-search {
-    &[hidden] {
-      display: block !important;
+  .usa-nav__secondary-links {
+    a {
+      @if variable-exists(header-link) {
+        color: color($header-link);
+      }
 
-      @include media($nav-width) {
-        display: none !important;
+      &:hover {
+        @if variable-exists(header-link-hover) {
+          color: color($header-link-hover);
+        }
       }
     }
   }
-  /* stylelint-enable */
 }

data/_sass/uswds/components/_hero.scss

@@ -1,37 +1,45 @@
-// Hero feature
-// ==========================
-
 .usa-hero {
-  @include padding($site-margins null);
-  background-image: url('#{$image-path}/hero.png');
-  background-position: center;
-  background-size: cover;
+  .usa-hero__callout {
+    @if variable-exists(hero-bg) {
+      background-color: color($hero-bg);
+    }
 
-  .usa-button {
-    color: $color-white;
-  }
-}
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @if variable-exists(hero-header) {
+        color: color($hero-header);
+      }
+    }
 
-.usa-section-dark {
-  .usa-hero-link {
-    color: $color-primary-alt;
-  }
-}
+    .usa-hero__heading--alt {
+      @if variable-exists(hero-header-alt) {
+        color: color($hero-header-alt);
+      }
+    }
 
-.usa-hero-callout {
-  background-color: $color-primary-darkest;
-  padding: 3rem;
+    p {
+      @if variable-exists(hero-text) {
+        color: color($hero-text);
+      }
+    }
 
-  @include media($small-screen) {
-    max-width: 30rem;
-  }
+    .usa-hero-link {
+      @if variable-exists(hero-link) {
+        color: color($hero-link);
+      }
+    }
 
-  > *:first-child {
-    @include margin(0 null $spacing-medium null);
+    .usa-button {
+      @if variable-exists(hero-button-bg) {
+        background-color: color($hero-button-bg);
+      }
+      @if variable-exists(hero-button-text) {
+        color: color($hero-button-text);
+      }
+    }
   }
 }
-
-.usa-hero-callout-alt {
-  color: $color-white;
-  display: block;
-}

data/_sass/{components → uswds/components}/_nav-buttons.scss

@@ -1,6 +1,6 @@
 .usa-header,
 .usa-sidenav-list {
-  @include media($nav-width) {
+  @media($theme-header-min-width) {
     .usa-button {
       margin: 0;
       width: auto;
@@ -8,9 +8,9 @@
   }
   .usa-button {
     color: $color-white;
-    padding: 1rem;
+    padding: units(1.5);
     &:hover {
-      background-color: $color-primary-darker;
+      background-color: color('primary-dark');
       color: $color-white;
       text-decoration: none;
     }
@@ -19,6 +19,6 @@
 .usa-sidenav-list,
 .usa-footer-nav .usa-footer-primary-content {
   .usa-button {
-    margin: 1rem 0;
+    margin: units(1.5) 0;
   }
 }

data/_sass/uswds/components/_side-nav.scss

@@ -0,0 +1,48 @@
+.usa-sticky-sidenav {
+  position: sticky;
+  top: units(1.5);
+}
+
+.usa-sidenav {
+  @if variable-exists(side-nav-bg) {
+    background-color: color($side-nav-bg);
+  }
+
+  a {
+    @if variable-exists(side-nav-link) {
+      color: color($side-nav-link);
+    }
+
+    &:hover {
+      @if variable-exists(side-nav-link-hover-bg) {
+        background-color: color($side-nav-link-hover-bg);
+      }
+      @if variable-exists(side-nav-link-hover) {
+        color: color($side-nav-link-hover);
+      }
+    }
+
+    &.usa-current {
+      @if variable-exists(side-nav-link-current) {
+        color: color($side-nav-link-current);
+        &:after {
+          background-color: color($side-nav-link-current);
+        }
+      }
+    }
+  }
+}
+
+@if variable-exists(theme-sidenav-breakpoint) {
+  @include at-media($theme-sidenav-breakpoint){
+    .usa-layout-docs__sidenav {
+      @include u-flex(3);
+      order: 1;
+      padding-top: 0;
+    }
+    .usa-layout-docs__main {
+      @include u-flex(9);
+      order: 2;
+    }
+  }
+}

data/_sass/uswds/components/_site-width.scss

@@ -0,0 +1,6 @@
+.site-wide {
+  .grid-container,
+  .usa-footer__nav {
+    max-width: 100%;
+  }
+}

data/_sass/uswds/components/_top-nav.scss

@@ -0,0 +1,84 @@
+.usa-header {
+  .usa-nav {
+    @if variable-exists(top-nav-bg) {
+      background-color: color($top-nav-bg);
+    }
+  }
+
+  .usa-nav__link {
+    &:hover {
+      @if variable-exists(top-nav-link-hover-bg) {
+        background-color: color($top-nav-link-hover-bg);
+      }
+    }
+  }
+
+  .usa-nav__link {
+    span {
+      @if variable-exists(top-nav-link) {
+        color: color($top-nav-link);
+      }
+    }
+
+    &.usa-current {
+      span {
+        @if variable-exists(top-nav-link-hover) {
+          color: color($top-nav-link-hover);
+        }
+      }
+    }
+
+    &:hover {
+      @if variable-exists(top-nav-link-hover) {
+        color: color($top-nav-link-hover);
+      }
+
+      span {
+        @if variable-exists(top-nav-link-current) {
+          border-bottom-color: color($top-nav-link-current);
+        }
+        @if variable-exists(top-nav-link-hover) {
+          color: color($top-nav-link-hover);
+        }
+      }
+    }
+
+    .usa-current,
+    button[aria-expanded="true"] {
+      span {
+        @if variable-exists(top-nav-link-current) {
+          border-color: color($top-nav-link-current);
+        }
+        @if variable-exists(top-nav-link-current) {
+          color: color($top-nav-link-current);
+        }
+      }
+    }
+  }
+
+  @include at-media($theme-header-min-width) {
+    button[aria-expanded="true"],
+    button[aria-expanded="true"]:hover,
+    .usa-nav__submenu {
+      @if variable-exists(top-nav-dropdown-bg) {
+        background-color: color($top-nav-dropdown-bg);
+      }
+      span {
+        @if variable-exists(top-nav-dropdown-link) {
+          color: color($top-nav-dropdown-link);
+        }
+      }
+    }
+  }
+
+  .usa-nav__submenu {
+    a:hover {
+      @if variable-exists(top-nav-dropdown-link-hover-bg) {
+        background-color: color($top-nav-dropdown-link-hover-bg);
+      }
+      @if variable-exists(top-nav-dropdown-link) {
+        color: color($top-nav-dropdown-link);
+      }
+    }
+  }
+}