@department-of-veterans-affairs/css-library 0.19.0 → 0.20.0

package/dist/stylesheets/site/_m-vet-nav.scss

@@ -0,0 +1,469 @@
+@import '../override-function';
+
+// The distance from the top of the screen that the mobile navigation menu should appear
+$height-offset-small: 131.16px;
+$height-offset-xsmall: 153.16px;
+
+body.va-pos-fixed {
+  width: 100%;
+  height: 100%;
+}
+
+#vetnav,
+[role='menu'] [role='menu'] {
+  // The main menu takes up the whole screen under the Menu button for xsmall & small screens
+  // Sub menus also take up the whole screen to cover the main menu
+  min-height: calc(100vh - #{$height-offset-xsmall});
+
+  @include media($small-screen) {
+    min-height: calc(100vh - #{$height-offset-small});
+  }
+
+  // For medium and large screens, they're just as big as they need to be
+  @include media($medium-screen) {
+    min-height: 100%;
+  }
+}
+
+#vetnav {
+  background-color: $color-primary-darkest;
+
+  // This value should be equal to the default y-position of the menu so that removing it
+  // shouldn't affect anything. However, it's here to show how the height is offset by the
+  // vertical positioning.
+  // top: $height-offset;
+  overflow-y: scroll;
+  position: absolute;
+  width: 100%;
+
+  // Just large enough to take precedence over any other dropdowns on the page and the VA Map
+  z-index: 1011;
+
+  &.vetnav--submenu-expanded {
+    #vetnav-menu {
+      overflow: hidden;
+      height: 0;
+      @include media($medium-screen) {
+        height: auto;
+        overflow: visible;
+      }
+    }
+  }
+
+  @include media($medium-screen) {
+    margin-top: scale-rem(1rem);
+    overflow-y: visible;
+    position: relative;
+    width: auto;
+    top: 0;
+  }
+}
+
+#vetnav-menu {
+  height: auto;
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+
+  @include media($medium-screen) {
+    display: flex;
+    height: auto;
+    margin-top: scale-rem(1rem);
+    margin-bottom: 0;
+    overflow-y: visible;
+    position: relative;
+  }
+
+  > li {
+    margin-bottom: 6px;
+
+    @include media($medium-screen) {
+      margin-bottom: 0;
+    }
+
+    &:first-of-type {
+      @include media($medium-screen) {
+        display: none;
+      }
+    }
+  }
+
+  &::before {
+    display: block;
+    content: ' ';
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+
+  // DEPRECATED: Replaced with va-button web component
+  .va-button-primary {
+    border: 2px solid $vads-color-white;
+    color: $vads-color-white;
+    padding: scale-rem(1rem);
+    margin: scale-rule(0.8rem 1.6rem);
+    width: auto;
+
+    &:visited {
+      color: $vads-color-white;
+    }
+
+    @include media($medium-screen) {
+      border-color: transparent;
+      display: inline-block;
+    }
+  }
+
+  .usa-button-secondary {
+    padding: scale-rule(calc(1rem + 2px));
+    margin: scale-rule(0.8rem 1.6rem);
+    width: auto;
+    background-color: $color-gray-lightest;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    @include media($medium-screen) {
+      display: inline-block;
+      background-color: transparent;
+      &.vetnav-level2-button-second {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+#vetnav-controls {
+  position: relative;
+  width: 100px;
+
+  svg {
+    display: inline-block;
+    height: scale-rem(1.6rem);
+    margin-right: scale-rem(0.8rem);
+    width: scale-rem(1rem);
+    vertical-align: 0;
+  }
+
+  path {
+    fill: $vads-color-white;
+  }
+
+  @include media($medium-screen) {
+    display: none;
+  }
+}
+
+[class^='vetnav-controller'] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  min-width: 100px;
+  width: auto;
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+@include media($medium-screen) {
+  a.vetnav-level1 {
+    //border-bottom: 1px solid transparent;
+
+    &:hover {
+      background-color: $color-primary;
+      border-bottom-color: $color-primary;
+      transition: none;
+    }
+  }
+}
+
+.vetnav-level1 {
+  -webkit-font-smoothing: antialiased;
+  background-color: $color-primary-darker;
+  background-position: scale-rule(right 3rem center);
+  background-repeat: no-repeat;
+  background-size: scale-rule(1.3rem auto);
+  border-radius: 0;
+  border-top: 3px solid transparent;
+  color: $vads-color-white;
+  cursor: pointer;
+  display: block;
+  font-weight: bold;
+  line-height: 1;
+  margin: 0;
+  padding: scale-rem(1.6rem);
+  text-align: left;
+  text-decoration: none;
+  width: 100%;
+
+  &:not([href]) {
+    background-image: url(~@department-of-veterans-affairs/css-library/dist/img/minus-white.svg);
+    @include media($medium-screen) {
+      background-position: scale-rule(right 1.6rem center);
+      padding-right: scale-rem(3.2rem);
+    }
+  }
+
+  &[aria-expanded='true'] {
+    @include media($medium-screen) {
+      color: $color-base;
+      background-color: $vads-color-white;
+      background-image: url(~@department-of-veterans-affairs/css-library/dist/img/arrow-up.svg);
+      border-top-color: $vads-color-va-accent;
+    }
+  }
+
+  &[aria-expanded='false'] {
+    background-image: url(~@department-of-veterans-affairs/css-library/dist/img/plus-white.svg);
+
+    &:hover {
+      background-color: $color-primary;
+    }
+
+    @include media($medium-screen) {
+      background-image: url(~@department-of-veterans-affairs/css-library/dist/img/arrow-down-white.svg);
+    }
+  }
+
+  @include media($medium-screen) {
+    background-color: transparent;
+    background-size: scale-rule(1rem auto);
+  }
+
+  &:active {
+    color: inherit;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:visited,
+  &:active {
+    color: inherit;
+  }
+}
+
+.vetnav-level2 {
+  background: $color-primary-darkest url(~@department-of-veterans-affairs/css-library/dist/img/arrow-right-white.svg) right 3rem
+    center no-repeat;
+  background-size: scale-rule(1.4rem auto);
+  border-radius: 0;
+  display: block;
+  font-weight: normal;
+  margin: 0;
+  padding: scale-rem(1.6rem);
+  text-align: left;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+
+  @include media($medium-screen) {
+    background: scale-rule(transparent url(~@department-of-veterans-affairs/css-library/dist/img/arrow-right.svg) right 1rem center
+      no-repeat);
+    border-color: transparent;
+    border-style: solid;
+    border-width: 1px 0;
+    color: $color-link-default;
+    background-size: scale-rule(1rem auto);
+    margin-left: scale-rem(0.8rem);
+    padding: scale-rule(0.8rem 0 0.8rem 1.6rem);
+    position: relative;
+    width: scale-rem(25.3rem);
+
+    &:hover {
+      background-color: transparent;
+      border-bottom: 1px solid transparent;
+      box-shadow: -3px 0 $vads-color-va-accent;
+      color: $color-primary;
+      text-decoration: underline;
+    }
+
+    &[aria-expanded='true'] {
+      background-color: $color-gray-lightest;
+      border-bottom-color: $vads-color-gray-warm-light;
+      border-top-color: $vads-color-gray-warm-light;
+      box-shadow: -3px 0 $vads-color-va-accent;
+      color: $color-gray-dark;
+      font-weight: bold;
+      text-decoration: inherit;
+      position: relative;
+      z-index: 2;
+    }
+  }
+
+  &-heading {
+    -webkit-font-smoothing: antialiased;
+    font-size: scale-rem(2rem);
+    font-weight: bold;
+    padding: scale-rule(0.8rem 1.6rem);
+
+    @include media($medium-screen) {
+      display: none;
+    }
+  }
+}
+
+#vetnav .back-button {
+  background: scale-rule($color-primary-darker url(~@department-of-veterans-affairs/css-library/dist/img/arrow-left-white.svg) right 3rem
+    center no-repeat);
+  background-position: scale-rule(left 1rem center);
+  background-size: scale-rule(1.4rem auto);
+  border-radius: 0;
+  padding: scale-rule(1.6rem 1.6rem 1.6rem 3rem);
+  text-align: left;
+  width: 100%;
+  margin: 0;
+
+  @include media($medium-screen) {
+    display: none;
+  }
+}
+
+.vetnav-panel {
+  a {
+    @include no-sr-content;
+
+    background-image: none;
+    color: $vads-color-white;
+    display: block;
+    padding: scale-rule(0.8rem 1.6rem);
+    text-decoration: none;
+
+    @include media($medium-screen) {
+      color: $color-link-default;
+
+      &:hover {
+        background: transparent;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @include media($medium-screen) {
+    box-shadow: 0 5px 9px -5px $color-base;
+    background: $vads-color-white;
+    padding-bottom: scale-rem(1.6rem);
+    position: absolute;
+  }
+}
+
+.vetnav-panel--submenu {
+  &:not([hidden]) {
+    background-color: $color-primary-darkest;
+    box-shadow: none;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    left: 30px;
+    visibility: visible;
+    margin: 0;
+
+    @include media($medium-screen) {
+      border-left: 1px solid $vads-color-gray-warm-light;
+      background-color: $color-gray-lightest;
+      height: 100%;
+      margin-left: scale-rem(23rem);
+      padding: scale-rule(0.5rem 0 1.6rem);
+      width: scale-rem(31rem);
+    }
+  }
+}
+
+@include media($medium-screen) {
+  #vetnav-explore {
+    height: 415px;
+    padding-top: scale-rem(0.8rem);
+    width: 540px;
+  }
+
+  #vetnav-benefits {
+    width: 276.47px;
+  }
+}
+
+.vet-toolbar {
+  align-items: center;
+  flex: 1 1 100%;
+  margin-left: scale-rem(-2rem);
+  position: relative;
+
+  > [data-reactroot],
+  > div {
+    align-items: center;
+    display: flex;
+  }
+
+  @include media($medium-screen) {
+    flex: scale-rule(0 1 32.5rem);
+    margin-left: 0;
+    margin-right: 0;
+    z-index: 3;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  [href^='tel'] {
+    text-decoration: none;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+  }
+
+  .va-dropdown,
+  .sign-in-link {
+    margin-left: scale-rem(1rem);
+  }
+
+  .va-dropdown-trigger {
+    font-weight: 600;
+  }
+}
+
+.sign-in-link {
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+[id='search'] {
+  width: scale-rem(30rem);
+
+  [type='text'] {
+    margin: 0;
+    flex: scale-rule(1 0 20rem);
+  }
+
+  [type='submit'] {
+    border-radius: scale-rule(0 0.3rem 0.3rem 0);
+    display: flex;
+    flex: scale-rule(1 0 3rem);
+    justify-content: center;
+    margin: 0;
+    padding: scale-rem(1rem);
+  }
+
+  > .va-flex {
+    align-items: center;
+  }
+}
+
+.child-menu-opened {
+  height: 0;
+  overflow: hidden;
+}
+
+@include media($medium-screen) {
+  .child-menu-opened {
+    height: auto;
+  }
+}

package/dist/tokens/css/variables.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 26 Feb 2025 18:27:00 GMT
+ * Generated on Tue, 11 Mar 2025 21:20:35 GMT
  */
 
 :root {

package/dist/tokens/scss/variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 26 Feb 2025 18:27:00 GMT
+// Generated on Tue, 11 Mar 2025 21:20:35 GMT
 
 $xsmall-screen: 320px;
 $small-screen: 481px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/css-library",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "Department of Veterans Affairs stylesheets, tokens, and utilities",
   "packageManager": "yarn@3.2.0",
   "files": [
@@ -17,7 +17,7 @@
     "build:minify-core": "sass --style compressed dist/core.css:dist/core.min.css",
     "build": "yarn run clean-dist && yarn run copy && yarn build:tokens && yarn build:stylesheets && yarn copy:scss-files",
     "clean-dist": "rimraf dist/*",
-    "copy:scss-files": "cp -rv src/stylesheets/_override-function.scss dist/stylesheets/_override-function.scss && cp -rv src/stylesheets/_mixins.scss dist/stylesheets/_mixins.scss && cp -rv src/stylesheets/_functions.scss dist/stylesheets/_functions.scss && cp -rv src/stylesheets/formation-overrides/_variables.scss dist/stylesheets/formation-overrides/_variables.scss",
+    "copy:scss-files": "cp -rv src/stylesheets/_override-function.scss dist/stylesheets/_override-function.scss && cp -rv src/stylesheets/_mixins.scss dist/stylesheets/_mixins.scss && cp -rv src/stylesheets/_functions.scss dist/stylesheets/_functions.scss && cp -rv src/stylesheets/formation-overrides/_variables.scss dist/stylesheets/formation-overrides/_variables.scss && mkdir dist/stylesheets/site && cp -rv src/stylesheets/site/* dist/stylesheets/site",
     "copy-assets": "cp -rv src/assets/fonts dist/fonts/ && cp -rv src/assets/img dist/img/",
     "copy": "node ./copy-uswds-color-tokens.js && yarn run copy-assets"
   },
@@ -30,4 +30,4 @@
     "@uswds/uswds": "^3.9.0",
     "rimraf": "^5.0.5"
   }
-}
+}