RubyGems - uswds-jekyll - Versions diffs - 4.2.0 → 5.0.0 - Mend

uswds-jekyll 4.2.0 → 5.0.0

Files changed (745) hide show

data/_sass/uswds/components/_graphic-list.scss DELETED

@@ -1,35 +0,0 @@
-// A collection of media block objects
-.usa-graphic_list {
-  .usa-graphic_list-row {
-    .usa-media_block {
-      margin-bottom: $site-margins;
-      @include media($medium-screen) {
-        margin-bottom: $site-margins * 2;
-      }
-    }
-    &:last-child {
-      .usa-media_block {
-        @include media($medium-screen) {
-          margin-bottom: 0;
-        }
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-  .usa-media_block-img {
-    margin-right: $site-margins;
-  }
-  .usa-media_block-body {
-    > :first-child {
-      margin-top: 0;
-    }
-  }
-}

data/_sass/uswds/components/_layout.scss DELETED

@@ -1,36 +0,0 @@
-// Flexbox positioning to move sidenav below main content on small screens
-.usa-layout-docs {
-  display: flex;
-  flex-direction: column;
-  @include media($large-screen) {
-    display: inherit;
-  }
-  .usa-grid {
-    > :first-child:not(.usa-width-*) {
-      margin-top: 0;
-    }
-    > :last-child:not(.usa-width-*) {
-      margin-bottom: 0;
-    }
-  }
-}
-.usa-layout-docs-sidenav {
-  order: 2;
-}
-.usa-layout-docs-main_content {
-  margin-bottom: $site-margins;
-  order: 1;
-  @include media($large-screen) {
-    margin-bottom: 0;
-  }
-  > :first-child {
-    margin-top: 0;
-  }
-}

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

@@ -1,12 +0,0 @@
-@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 DELETED

@@ -1,561 +0,0 @@
-// 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;
-  }
-}