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

package/dist/stylesheets/modules/m-action-link.css

@@ -1405,7 +1405,7 @@ a.vads-c-action-link--blue, a.vads-c-action-link--green, a.vads-c-action-link--w
   display: inline-block;
 }
 a.vads-c-action-link--blue:before, a.vads-c-action-link--green:before, a.vads-c-action-link--white:before {
-  background-image: url("/img/arrow-right-white.svg");
+  background-image: url(~@department-of-veterans-affairs/css-library/dist/img/arrow-right-white.svg);
   background-size: 18px 18px;
   background-repeat: no-repeat;
   background-position: center;
@@ -1433,7 +1433,7 @@ a.vads-c-action-link--white {
   color: #ffffff;
 }
 a.vads-c-action-link--white:before {
-  background-image: url("/img/arrow-right.svg");
+  background-image: url(~@department-of-veterans-affairs/css-library/dist/img/arrow-right.svg);
   background-color: #ffffff;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;

package/dist/stylesheets/modules/m-dropdown.css

@@ -6,7 +6,7 @@
   position: relative;
 }
 .va-dropdown-trigger {
-  background: transparent url("/img/arrow-down-white.svg") no-repeat;
+  background: transparent url(~@department-of-veterans-affairs/css-library/dist/img/arrow-down-white.svg) no-repeat;
   background-position: right 8px center;
   background-size: 10px 10px;
   border-radius: 0;
@@ -20,7 +20,7 @@
 .va-dropdown-trigger[aria-expanded=true] {
   border-top-color: #8a7237;
   background-color: #ffffff;
-  background-image: url("/img/arrow-up.svg") !important;
+  background-image: url(~@department-of-veterans-affairs/css-library/dist/img/arrow-up.svg) !important;
   color: #1b1b1b;
 }
 .va-dropdown-trigger[aria-expanded=true] path {

package/dist/stylesheets/modules/m-hub-page-link-list.css

@@ -15,7 +15,7 @@
 }
 .hub-page-link-list__item > a:hover .all-link-arrow, .hub-page-link-list__item > a:focus .all-link-arrow {
   margin-left: 10px;
-  content: url("/img/arrow-right.svg");
+  content: url(~@department-of-veterans-affairs/css-library/dist/img/arrow-right.svg);
 }
 .hub-page-link-list__item > a:hover .hub-page-link-list__header, .hub-page-link-list__item > a:focus .hub-page-link-list__header {
   text-decoration: underline;

package/dist/stylesheets/modules/m-nav-sidebar.css

@@ -268,11 +268,11 @@
   background-color: #e1f3f8;
 }
 .va-sidebarnav .usa-accordion .usa-accordion-button[aria-expanded=false] {
-  background-image: url("/img/plus-blue.svg");
+  background-image: url(~@department-of-veterans-affairs/css-library/dist/img/plus-blue.svg);
 }
 .va-sidebarnav .usa-accordion .usa-accordion-button[aria-expanded=true] {
   border-bottom: 0;
-  background-image: url("/img/minus-blue.svg");
+  background-image: url(~@department-of-veterans-affairs/css-library/dist/img/minus-blue.svg);
 }
 .va-sidebarnav .usa-accordion .usa-accordion-button[aria-expanded=true]:focus {
   border: 2px solid #fdb81e;
@@ -341,7 +341,7 @@
 }
 
 .va-btn-close-icon {
-  background: transparent url("/img/close.svg") center no-repeat;
+  background: transparent url(~@department-of-veterans-affairs/css-library/dist/img/close.svg) center no-repeat;
   background-size: 0.625rem 0.625rem;
   height: 1.375rem;
   padding: 1.375rem;

package/dist/stylesheets/site/_m-crisis-line.scss

@@ -0,0 +1,121 @@
+@import '../override-function';
+
+.va-crisis-line {
+  @include media($medium-screen) {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+
+.va-crisis-panel {
+//  color: $color-primary-darkest;
+  list-style: none;
+  margin: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: scale-rem(2rem);
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  li {
+    &:nth-child(odd) {
+      border-top: 1px solid $color-gray-lighter;
+      border-bottom: 1px solid $color-gray-lighter;
+    }
+
+    a {
+      color: $color-base;
+      display: block;
+      padding: scale-rule(1.5rem 0);
+      text-decoration: none;
+    }
+  }
+
+  @include media($medium-screen) {
+    margin: auto;
+    max-width: 50%;
+  }
+
+  a {
+    @include no-sr-content;
+
+    padding: 0;
+    background-image: none;
+
+  }
+}
+
+.va-crisis-panel-body {
+  background: $vads-color-white;
+  height: auto;
+  list-style: inherit;
+  margin: 0;
+  max-height: 100%;
+  padding: 0;
+
+  ul {
+  //  font-size: scale-rem(1.7rem);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
+}
+
+button.va-crisis-line-button {
+  background: $vads-color-white url(~@department-of-veterans-affairs/css-library/dist/img/arrow-right.svg) calc(100% - 0.5em) center no-repeat;
+  background-size: .8em auto;
+  border-radius: 0;
+  color: $color-base;
+  margin: auto;
+  padding: 0.4em 26px 0.3em 0;
+  font-size: 1em;
+  width: auto;
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+
+  @include media($medium-screen) {
+    border-radius: 0 0 0.2em 0.2em;
+    box-shadow: 0 2px 5px $color-base;
+    padding: 0 26px 0 0;
+    text-align: left;
+  }
+
+  &:hover {
+    background-color: $vads-color-white;
+    color: $color-base;
+  }
+
+  .vcl {
+    content: "";
+    background: url(~@department-of-veterans-affairs/css-library/dist/img/vcl-logo.png) no-repeat right 29%;
+    background-size: 100%;
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    margin: 0.3em 0.5em -0.3em 0.5em;
+  }
+
+  > .va-flex {
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+}
+
+.va-footer-vcl-trigger {
+  background: transparent;
+  color: inherit;
+  font-size: inherit;
+  font-weight: normal;
+  text-decoration: underline;
+
+  &:hover {
+    background: inherit;
+    color: $color-gold;
+    text-decoration: inherit;
+  }
+}

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 Mon, 10 Mar 2025 17:45: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 Mon, 10 Mar 2025 17:45: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.20.0-rc1",
+  "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"
   },