jekyll-theme-uswds 0.1.0

data/_sass/uswds/components/_media-block.scss

@@ -0,0 +1,12 @@
+@mixin media-block-img($margin-right: 1rem) {
+  float: left;
+  margin-right: $margin-right;
+}
+
+.usa-media_block-img {
+  @include media-block-img;
+}
+
+.usa-media_block-body {
+  overflow: hidden;
+}

data/_sass/uswds/components/_navigation.scss

@@ -0,0 +1,561 @@
+// Header navigation ------------- //
+
+@mixin nav-border {
+  border-bottom: 0.4rem solid $color-primary;
+  padding-bottom: 0.6rem;
+}
+
+@mixin nav-border-thick {
+  border-bottom: 0.7rem solid $color-primary;
+  padding-bottom: 0.9rem;
+}
+
+.usa-navbar {
+  border-bottom: 1px solid $color-gray-light;
+  height: 4rem;
+
+  @include media($nav-width) {
+    border-bottom: none;
+    display: inline-block;
+    height: 7.8rem; // XXX magic number
+  }
+}
+
+.usa-nav-link {
+  @include font-smoothing;
+
+  &:hover {
+    span {
+      @include media($nav-width) {
+        @include nav-border;
+      }
+    }
+  }
+
+  &.usa-accordion-button {
+    span {
+      @include media($nav-width) {
+        margin-right: 0;
+        padding-right: 1.5rem;
+      }
+    }
+  }
+}
+
+.usa-nav-container {
+  @include media($nav-width) {
+    @include outer-container($site-max-width);
+    @include padding(null $site-margins);
+  }
+}
+
+.usa-nav {
+  $sliding-panel-width: 26rem;
+
+  @keyframes slidein-left {
+    from {
+      transform: translateX($sliding-panel-width);
+    }
+
+    to {
+      transform: translateX(0);
+    }
+  }
+
+  @include position(fixed, 0 0 0 auto);
+  background: $color-white;
+  border-left: 1px solid $color-gray-light;
+  border-right: 0;
+  display: none;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 2rem;
+  width: $sliding-panel-width;
+  z-index: $z-index-nav;
+
+  @include media($nav-width) {
+    @include padding(4.5rem 0 0 null);
+    border-left: none;
+    display: block;
+    float: right;
+    overflow-y: visible;
+    position: relative;
+    transform: translateX(0);
+    width: auto;
+  }
+
+  &.is-visible {
+    animation: slidein-left 0.3s ease-in-out;
+    display: flex;
+  }
+
+  nav {
+    margin-top: 6rem; // XXX magic number
+    min-height: 100%;
+
+    @include media($nav-width) {
+      margin-top: 0;
+    }
+  }
+
+  .usa-current {
+    border-left: 4px solid $color-primary;
+    color: $color-primary;
+    font-weight: $font-bold;
+    padding-left: 1.4rem;
+
+    @include media($nav-width) {
+      color: $color-base;
+    }
+  }
+
+  .usa-button {
+    width: 100%;
+  }
+
+  .usa-search {
+    @include media($nav-width) {
+      margin-left: 1.5rem; // XXX magic number
+      top: 4px;
+    }
+  }
+}
+
+// Primary navigation ------------- //
+
+.usa-nav-primary {
+  @include usa-sidenav-list;
+  margin-top: 1.5rem;
+  order: 2;
+
+  @include media($nav-width) {
+    display: inline;
+  }
+
+  li {
+    @include media($nav-width) {
+      border-top: none;
+    }
+  }
+
+  > li {
+    width: auto;
+
+    @include media($nav-width) {
+      display: inline-block;
+      // margin-left: -4px;
+    }
+
+    > a {
+      @include media($nav-width) {
+        @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
+        color: $color-gray;
+        font-size: $h5-font-size;
+        font-weight: $font-bold;
+        line-height: 1;
+      }
+
+      &:hover {
+        @include media($nav-width) {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  a {
+    @include media($nav-width) {
+      @include padding(0.75rem null);
+    }
+
+    &:hover {
+      @include media($nav-width) {
+        // color: $color-base;
+      }
+    }
+  }
+
+  button {
+    $button-vertical-offset: 40%;
+
+    @include button-unstyled;
+    @include font-smoothing;
+    font-weight: $font-normal;
+    line-height: 1.3;
+    padding: 0.85rem 1.5rem 0.85rem 1.8rem;
+
+    @include media($nav-width) {
+      @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
+      color: $color-gray;
+      font-size: $h5-font-size;
+      font-weight: $font-bold;
+      line-height: 1;
+      width: initial;
+    }
+
+    &:focus,
+    &:active {
+      box-shadow: $focus-outline;
+    }
+
+    &:hover {
+      background-color: $color-gray-lightest;
+      color: $color-primary;
+
+      @include media($nav-width) {
+        background-color: transparent;
+        // color: $color-base;
+      }
+    }
+
+    &[aria-expanded=false] { /* stylelint-disable-line selector-no-qualifying-type */
+      background-image: url('#{$image-path}/plus-alt.png');
+      background-image: url('#{$image-path}/plus-alt.svg');
+      background-repeat: no-repeat;
+      background-position: right 0 center;
+      background-size: 1rem;
+
+      @include media($nav-width) {
+        background-image: url('#{$image-path}/angle-arrow-down.png');
+        background-image: url('#{$image-path}/angle-arrow-down.svg');
+        background-position: right 1.5rem top $button-vertical-offset;
+      }
+
+      &:hover {
+        @include media($nav-width) {
+          background-image: url('#{$image-path}/angle-arrow-down-primary.png');
+          background-image: url('#{$image-path}/angle-arrow-down-primary.svg');
+        }
+      }
+    }
+
+    &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
+      background-image: url('#{$image-path}/minus-alt.png');
+      background-image: url('#{$image-path}/minus-alt.svg');
+      background-repeat: no-repeat;
+      background-position: right 0 center;
+      background-size: 1rem;
+
+      @include media($nav-width) {
+        background-color: $color-primary-darkest;
+        color: $color-white;
+        background-image: url('#{$image-path}/angle-arrow-down-hover.png');
+        background-image: url('#{$image-path}/angle-arrow-down-hover.svg');
+        background-position: right 1.5rem top $button-vertical-offset;
+
+        &:hover {
+          background-color: $color-primary-darkest;
+        }
+
+        span {
+          @include nav-border;
+          color: $color-white;
+        }
+      }
+    }
+  }
+
+  @include media($nav-width) {
+    a.usa-current,
+    .usa-current { // stylelint-disable-line selector-no-qualifying-type
+      // undo the sidenav style
+      border-left: 0;
+      padding-left: 1.5rem;
+
+      &:hover {
+        span {
+          color: $color-primary;
+        }
+      }
+
+      span {
+        @include nav-border;
+        color: $color-base;
+      }
+    }
+  }
+}
+
+// Extended header navigation ------- //
+
+.usa-header-extended {
+  .usa-nav-link {
+    &:hover {
+      span {
+        @include media($nav-width) {
+          @include nav-border-thick;
+        }
+      }
+    }
+  }
+
+  .usa-nav-primary {
+    button[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
+      span {
+        @include media($nav-width) {
+          @include nav-border-thick;
+        }
+      }
+    }
+
+    .usa-current {
+      @include media($nav-width) {
+        span {
+          @include nav-border-thick;
+        }
+      }
+    }
+  }
+}
+
+// Secondary navigation ----------- //
+
+.usa-nav-secondary {
+  margin-top: 1.5rem;
+
+  @include media($nav-width) {
+    margin-top: 0;
+    position: absolute;
+    right: $site-margins;
+    top: -5.7rem; // XXX magic number
+  }
+
+  .usa-search {
+    @include margin(1.5rem null 0 null);
+
+    @include media($nav-width) {
+      @include margin(-0.9rem null 0 0);
+      float: left;
+    }
+  }
+}
+
+.usa-nav-secondary-links {
+  margin-top: 2.4rem;
+
+  @include media($nav-width) {
+    float: left;
+    margin-top: 0;
+  }
+
+  li {
+    @include media($nav-width) {
+      display: inline;
+      padding-left: 0.5rem;
+    }
+
+    &:not(:last-child)::after {
+      @include media($nav-width) {
+        color: $color-gray-lighter;
+        content: '|';
+        padding-left: 0.5rem;
+      }
+    }
+  }
+
+  a,
+  .usa-header-search-button {
+    color: $color-gray;
+    display: inline-block;
+    font-size: $h5-font-size;
+    text-decoration: none;
+
+    &:hover {
+      color: $color-primary;
+      text-decoration: underline;
+    }
+  }
+
+  .usa-header-search-button {
+    @include button-unstyled;
+    display: none;
+
+    @include media($nav-width) {
+      background-image: url('#{$image-path}/search-alt.png');
+      background-image: url('#{$image-path}/search-alt.svg');
+      background-repeat: no-repeat;
+      background-position: left center;
+      background-size: 2.2rem;
+      display: inline-block;
+      padding-left: 2.3rem;
+    }
+
+    &.is-hidden {
+      @include media($nav-width) {
+        display: none;
+      }
+    }
+  }
+
+  @include media($nav-width) {
+    a.usa-current { // stylelint-disable-line selector-no-qualifying-type
+      // undo the sidenav style
+      border-left: 0;
+      padding-left: 0;
+    }
+  }
+}
+
+// Navigation submenu (dropdown and mega menu) ----- //
+
+.usa-nav-submenu {
+  @include usa-sidenav-sublist;
+
+  @include media($nav-width) {
+    @include unstyled-list;
+    @include padding(0.75rem null 0.9rem null);
+    background-color: $color-primary-darkest;
+    width: 21.5rem;
+    position: absolute;
+  }
+
+  &[aria-hidden=true] {
+    display: none;
+  }
+
+  a {
+    @include media($nav-width) {
+      color: $color-white;
+      padding-left: 1.5rem; // XXX magic number
+    }
+
+    &:hover {
+      @include media($nav-width) {
+        background-color: $color-primary-darkest;
+        color: $color-white;
+        padding-left: 1.5rem;
+        text-decoration: underline;
+      }
+    }
+
+    // this used to be necessary to undo the `usa-sidenav-sublist`
+    // include, above
+    // &:hover,
+    // &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
+    //   @include media($nav-width) {
+    //     padding-left: 1.8rem;
+    //   }
+    // }
+  }
+
+  li {
+    font-size: $h5-font-size;
+    margin-bottom: 0;
+  }
+}
+
+// Navigation close button -------- //
+
+.usa-nav-close {
+  @include button-unstyled;
+  @include margin(-1.2rem -1.5rem 1.5rem auto);
+  color: currentColor;
+  float: right;
+  height: $hit-area;
+  text-align: center;
+  width: $hit-area;
+
+  &:hover {
+    color: currentColor;
+  }
+
+  @include media($nav-width) {
+    display: none;
+  }
+
+  img {
+    width: 1.3rem;
+  }
+
+  + * {
+    clear: both;
+  }
+}
+
+.usa-mobile_nav-active {
+  overflow: hidden;
+}
+
+// Navigation mega menu -------- //
+
+@mixin outer-megamenu {
+  background-color: $color-primary-darkest;
+  content: '';
+  display: block;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 1000%;
+}
+
+.usa-megamenu {
+  @include media($nav-width) {
+    @include padding(3.15rem null); // XXX magic number
+    // XXX this is the difference between the 2rem padding-left
+    // of .usa-nav-inner and the $site-margins (3rem) padding-left
+    // of .usa-megamenu
+    left: -1rem;
+    width: 100%;
+  }
+
+  &::before {
+    @include media($nav-width) {
+      @include outer-megamenu;
+      right: 100%;
+    }
+  }
+
+  &::after {
+    @include media($nav-width) {
+      @include outer-megamenu;
+      left: 100%;
+    }
+  }
+}
+
+.usa-header-basic-megamenu {
+  .usa-nav {
+    @include media($nav-width) {
+      padding-left: 0;
+      padding-top: 0;
+      width: 100%;
+    }
+  }
+
+  .usa-nav-inner {
+    display: flex;
+    flex-direction: column;
+
+    @include media($nav-width) {
+      display: block;
+      float: right;
+      margin-top: -3.8rem;
+    }
+  }
+
+  .usa-nav-submenu {
+    .usa-grid-full {
+      @include media($nav-width) {
+        margin-left: -1.8rem; // XXX magic number
+      }
+    }
+  }
+}
+
+.usa-megamenu-col {
+  @include media($nav-width) {
+    @include span-columns(3);
+
+    &:nth-child(2n) {
+      @include span-columns(3);
+    }
+
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  > ul {
+    @include unstyled-list;
+  }
+}