@department-of-veterans-affairs/css-library 0.7.4 → 0.8.0

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

@@ -0,0 +1,349 @@
+@charset "UTF-8";
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+/**
+  /uswds/dist/scss/lib/addons/_margin.scss
+**/
+/**
+  uswds/src/stylesheets/lib/helpers/_directional-values.scss
+**/
+.usa-sidenav-list a {
+  font-size: 15px;
+  text-decoration: none;
+  padding: 8px 16px 8px 12px;
+}
+.usa-sidenav-list a.va-button-primary {
+  padding: 0.625rem 1.25rem;
+}
+
+@media (min-width: 320px) and (max-width: 767px) {
+  .va-sidebarnav {
+    display: none;
+  }
+  button.va-sidebarnav-close {
+    position: absolute;
+    right: 2px;
+    top: 2px;
+  }
+  button.va-sidebarnav-close:hover, button.va-sidebarnav-close:focus {
+    background-color: #f0f0f0;
+  }
+}
+.left-side-nav-title {
+  color: #000000;
+  padding-left: 1em;
+}
+@media screen and (min-width: 1008px), print and (min-width: 1008px) {
+  .left-side-nav-title {
+    padding-left: 0;
+  }
+}
+
+.va-sidebarnav {
+  color: #005ea2;
+}
+.va-sidebarnav h4 {
+  margin-top: 0;
+}
+.va-sidebarnav li {
+  border-top-color: #d6d7d9;
+}
+@media screen and (max-width: 767px) {
+  .va-sidebarnav {
+    left: 0;
+    height: 100%;
+    overflow: scroll;
+    padding: 1.6rem;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+  }
+  .va-l-detail-page .va-sidebarnav {
+    width: 100%;
+  }
+  .va-sidebarnav::before {
+    background: rgba(0, 0, 0, 0.05);
+    content: " ";
+    display: block;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+  }
+  .va-sidebarnav > div {
+    visibility: visible;
+    background: #ffffff;
+    border-left: 1px solid #aeb0b5;
+    height: 100%;
+    max-width: 18.75rem;
+    overflow: auto;
+    padding: 2rem 1rem 1rem;
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 80%;
+    transform: translateX(100%);
+    -webkit-transition: 100ms transform linear;
+    transition: 100ms transform linear;
+  }
+  .va-sidebarnav--opened {
+    visibility: visible;
+    display: block;
+    position: fixed;
+    z-index: 300;
+  }
+  .va-sidebarnav--opened > div {
+    transform: translateX(0);
+  }
+  .va-sidebarnav-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+@media screen and (min-width: 768px), print and (min-width: 768px) {
+  .va-sidebarnav a {
+    padding-right: 1rem;
+  }
+  .va-sidebarnav-close {
+    display: none;
+  }
+  .va-sidebarnav .usa-sidenav-list {
+    margin-right: 1rem;
+  }
+}
+.va-sidebarnav ul.usa-accordion > li {
+  margin-bottom: -1px;
+}
+.va-sidebarnav .left-side-nav-title {
+  padding-bottom: 25px;
+}
+.va-sidebarnav .left-side-nav-title > .icon-small {
+  vertical-align: middle;
+  padding-left: initial;
+  margin-right: 5px;
+  font-size: 1.0625rem;
+}
+.va-sidebarnav .usa-sidenav-list {
+  margin-right: 0;
+  margin-left: 0;
+}
+.va-sidebarnav .usa-sidenav-list > li {
+  border-top: 0;
+}
+.va-sidebarnav .usa-sidenav-list > li .active-menu {
+  border-bottom: 0;
+}
+.va-sidebarnav .usa-sidenav-list > li a {
+  color: #005ea2;
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  border-left: 4px solid transparent;
+}
+.va-sidebarnav .usa-sidenav-list > li a:hover, .va-sidebarnav .usa-sidenav-list > li a:focus {
+  background-color: #e1f3f8;
+  padding: 8px 14px;
+  border-color: #005ea2;
+  transition: background-color 0.1s ease-in-out 0s, border-color 0.1s ease-in-out 0s, padding 0.1s ease-in-out 0s;
+}
+.va-sidebarnav .usa-sidenav-list > li i {
+  color: #000000;
+  vertical-align: middle;
+  font-size: 15px;
+  padding-left: 0;
+}
+.va-sidebarnav .usa-sidenav-list .menu-item-container > a {
+  font-weight: bold;
+}
+.va-sidebarnav .usa-sidenav-list .menu-item-container:hover {
+  background-color: #f1f1f1;
+  color: #005ea2;
+}
+.va-sidebarnav .usa-sidenav-list .menu-item-container:focus {
+  outline: 2px solid #fdb81e;
+  outline-offset: 3px;
+}
+.va-sidebarnav .usa-sidenav-list a.usa-current {
+  color: #212121;
+  border-left: 4px solid #212121;
+  padding-left: 12px;
+  margin-left: 16px;
+  background-color: #f0f0f0;
+  cursor: auto;
+}
+.va-sidebarnav .usa-sidenav-list a.usa-current.level-one {
+  padding-left: 14px;
+  margin-left: 0;
+}
+.va-sidebarnav .usa-sidenav-list a.usa-current:hover {
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+.va-sidebarnav .usa-sidenav-list .active-level {
+  background-color: #f0f0f0;
+}
+.va-sidebarnav .usa-sidenav-list .active-level .usa-sidenav-sub_list {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+.va-sidebarnav .usa-sidenav-list .active-level .usa-sidenav-sub_list li > a {
+  padding: 8px 14px 8px 28px;
+}
+.va-sidebarnav .usa-sidenav-list .active-level .usa-sidenav-sub_list li > a:hover {
+  padding: 8px 12px 8px 30px;
+}
+.va-sidebarnav .usa-sidenav-list .active-level .usa-sidenav-sub_list li:last-child a {
+  padding-bottom: 12px;
+}
+.va-sidebarnav h4 {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-top: 0;
+  vertical-align: middle;
+  width: 75%;
+}
+.va-sidebarnav .usa-sidenav-list > li i {
+  position: relative;
+  right: -20px;
+}
+.va-sidebarnav .usa-sidenav-list > li .menu-item-container > a {
+  font-weight: initial;
+}
+.va-sidebarnav .usa-sidenav-list > li a.usa-current {
+  font-weight: bold;
+  margin-left: 0;
+}
+.va-sidebarnav .usa-sidenav-list > li a.usa-current:hover, .va-sidebarnav .usa-sidenav-list > li a.usa-current:focus {
+  border-color: #212121;
+  padding: 8px 16px 8px 12px;
+}
+.va-sidebarnav .usa-sidenav-sub_list a {
+  width: 100% !important;
+  padding-left: 40px;
+  font-size: 15px;
+}
+.va-sidebarnav .usa-sidenav-sub_list a:focus {
+  outline: 2px dotted #aeb0b5;
+  outline-offset: 0px;
+}
+.va-sidebarnav .usa-sidenav-sub_list a:hover, .va-sidebarnav .usa-sidenav-sub_list a:focus {
+  background-color: #e1f3f8;
+  padding: 8px 12px 8px 30px;
+  border-color: #005ea2;
+}
+.va-sidebarnav .usa-sidenav-sub_list a.usa-current {
+  margin-left: 16px !important;
+}
+.va-sidebarnav .usa-accordion .usa-accordion-button {
+  background-color: #ffffff;
+  border-top: 1px solid #d6d7d9;
+  border-bottom: 1px solid #d6d7d9;
+  background-size: 0.6875rem;
+  color: #005ea2;
+  font-weight: normal;
+  font-size: 17px;
+  padding-left: 0.625rem;
+}
+.va-sidebarnav .usa-accordion .usa-accordion-button:focus {
+  outline: 0;
+  border: 2px solid #fdb81e;
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+.va-sidebarnav .usa-accordion .usa-accordion-button:hover {
+  background-color: #e1f3f8;
+}
+.va-sidebarnav .usa-accordion .usa-accordion-button[aria-expanded=false] {
+  background-image: url("/assets/img/plus-blue.svg");
+}
+.va-sidebarnav .usa-accordion .usa-accordion-button[aria-expanded=true] {
+  border-bottom: 0;
+  background-image: url("/assets/img/minus-blue.svg");
+}
+.va-sidebarnav .usa-accordion .usa-accordion-button[aria-expanded=true]:focus {
+  border: 2px solid #fdb81e;
+}
+.va-sidebarnav .usa-accordion .usa-accordion-content {
+  padding: 0;
+}
+.va-sidebarnav .usa-accordion .usa-sidenav-list a {
+  font-size: 15px;
+  padding: 8px 16px 8px 12px;
+}
+.va-sidebarnav .usa-accordion .usa-sidenav-list a:focus {
+  width: 98% !important;
+  margin: 2px;
+}
+.va-sidebarnav .usa-accordion .usa-current:focus {
+  width: 99% !important;
+  margin-top: 2px;
+}
+.va-sidebarnav .usa-accordion-button-dark {
+  background-color: #f1f1f1;
+}
+
+.va-btn-sidebarnav-trigger {
+  margin: 0;
+  padding: 0;
+}
+.va-btn-sidebarnav-trigger.fixed-trigger {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 299;
+}
+.va-btn-sidebarnav-trigger .button-wrapper {
+  position: absolute;
+  width: 100%;
+  padding: units(1) units(1) units(2);
+}
+.va-btn-sidebarnav-trigger button {
+  background-color: #ffffff;
+  color: #005ea2;
+  margin: 0;
+  padding: units(1.5);
+  border: 1px solid #005ea2;
+  border-radius: 4px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.va-btn-sidebarnav-trigger button strong {
+  line-height: units(2.5);
+}
+.va-btn-sidebarnav-trigger button svg {
+  fill: #005ea2;
+}
+.va-btn-sidebarnav-trigger .button-background {
+  position: absolute;
+  background-color: #ffffff;
+  width: 100%;
+}
+@media screen and (min-width: 768px), print and (min-width: 768px) {
+  .va-btn-sidebarnav-trigger {
+    display: none;
+  }
+}
+
+.va-btn-close-icon {
+  background: transparent url("/assets/img/close.svg") center no-repeat;
+  background-size: 0.625rem 0.625rem;
+  height: 1.375rem;
+  padding: 1.375rem;
+  margin: 0;
+  text-indent: -6249.375rem;
+  width: 0.625rem;
+}
+
+/*# sourceMappingURL=m-nav-sidebar.css.map */

package/dist/stylesheets/modules/m-omb-info.css

@@ -0,0 +1,15 @@
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+.omb-info--container {
+  padding-left: 1.25rem;
+}
+
+@media (max-width: 40.063em) {
+  .omb-info--container {
+    padding-left: 0.6640625rem;
+  }
+}
+
+/*# sourceMappingURL=m-omb-info.css.map */

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

@@ -0,0 +1,72 @@
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+.va-overlay {
+  background: rgba(50, 58, 69, 0.8);
+  height: 100%;
+  left: 0;
+  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  transition: opacity 0.5s, visibility 0s 0.5s;
+  visibility: hidden;
+  width: 100%;
+  z-index: 800;
+}
+.va-overlay [type=text] {
+  -webkit-appearance: none;
+  border-radius: 3px 0 0 3px;
+}
+
+.va-mobile-searchclose {
+  border-radius: 0;
+  display: block !important;
+  width: 100% !important;
+  margin: 0;
+  width: auto;
+  background: #005ea2;
+}
+
+.va-overlay--open {
+  opacity: 1;
+  visibility: visible;
+  -webkit-transition: opacity 0.5s;
+  transition: opacity 0.5s;
+}
+.va-overlay--open .columns {
+  padding: 0;
+}
+
+.va-overlay .menu {
+  -webkit-perspective: 1200px;
+  perspective: 1200px;
+  padding: 1em 1em;
+}
+
+.va-overlay form {
+  opacity: 0.4;
+  -webkit-transform: translateY(-25%) rotateX(35deg);
+  transform: translateY(-25%) rotateX(35deg);
+  -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
+  transition: transform 0.5s, opacity 0.5s;
+}
+
+.va-overlay--open form {
+  opacity: 1;
+  -webkit-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+}
+
+.va-overlay-body {
+  margin: 0.625rem auto;
+}
+
+@media (max-height: 30.5em) {
+  .overlay form {
+    height: 70%;
+  }
+}
+
+/*# sourceMappingURL=m-overlay.css.map */

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

@@ -0,0 +1,27 @@
+.print-only {
+  display: none;
+}
+
+@media print {
+  header, footer, nav {
+    display: none;
+  }
+  .schemaform-title,
+  .schemaform-subtitle,
+  .screen-only {
+    display: none;
+  }
+  .print-only {
+    display: block;
+  }
+  /* Relative URLs - include the HREF with the domain prepended */
+  a[href^="/"]:after {
+    content: " (https://www.va.gov" attr(href) ")";
+  }
+  /* Absolute URLs - show the HREF without prepending the domain. */
+  a[href^=http]:after {
+    content: " (" attr(href) ")";
+  }
+}
+
+/*# sourceMappingURL=m-print.css.map */

package/dist/stylesheets/modules/m-process-list.css

@@ -0,0 +1,162 @@
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+/**
+  /uswds/dist/scss/lib/addons/_margin.scss
+**/
+/**
+  uswds/src/stylesheets/lib/helpers/_directional-values.scss
+**/
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+.usa-sr-only {
+  position: absolute;
+  left: -999em;
+}
+
+.process {
+  list-style: none;
+  padding: 1em 0;
+  position: relative;
+}
+.process h2, .process h3, .process h4, .process h5 {
+  margin-top: 0;
+  clear: none;
+  padding-top: 0.3em;
+}
+.process p {
+  padding: 0;
+  margin-top: 0;
+}
+.process p:only-of-type {
+  margin-top: 0;
+}
+.process p.va-address-block {
+  padding-left: 0.625rem;
+}
+.process ul {
+  margin: 0 0 1em 1.25em !important;
+  padding: 0;
+}
+.process ul li {
+  list-style: square;
+  margin: 0;
+  padding: 0.1em 0;
+}
+
+.process-step {
+  border-left: 8px solid #aeb0b5;
+  padding: 0 0 2em 2em;
+  list-style: none;
+  margin: 0 !important;
+}
+.process-step:before {
+  color: #ffffff;
+  float: left;
+  font-size: 1.3em;
+  font-weight: 700;
+  text-align: center;
+  line-height: 1.575em;
+  width: 2em;
+  height: 2em;
+  top: -0.2em;
+  margin-left: -2.7em;
+  display: block;
+  border: 4px solid #ffffff;
+  background: #8d9297;
+  border-radius: 4em;
+  position: relative;
+}
+.process-step:last-child {
+  border-left: 0;
+  padding-left: calc(2em + 8px);
+}
+
+.list-one:before {
+  content: "1";
+}
+
+.list-two:before {
+  content: "2";
+}
+
+.list-three:before {
+  content: "3";
+}
+
+.list-four:before {
+  content: "4";
+}
+
+.list-five:before {
+  content: "5";
+}
+
+.list-six:before {
+  content: "6";
+}
+
+.list-seven:before {
+  content: "7";
+}
+
+.list-eight:before {
+  content: "8";
+}
+
+.list-nine:before {
+  content: "9";
+}
+
+.list-ten:before {
+  content: "10";
+}
+
+.list-eleven:before {
+  content: "11";
+}
+
+.list-twelve:before {
+  content: "12";
+}
+
+.list-thirteen:before {
+  content: "13";
+}
+
+.list-fourteen:before {
+  content: "14";
+}
+
+.list-fifteen:before {
+  content: "15";
+}
+
+.list-sixteen:before {
+  content: "16";
+}
+
+.list-seventeen:before {
+  content: "17";
+}
+
+.list-eighteen:before {
+  content: "18";
+}
+
+.list-nineteen:before {
+  content: "19";
+}
+
+.list-twenty:before {
+  content: "20";
+}
+
+/*# sourceMappingURL=m-process-list.css.map */

package/dist/stylesheets/modules/va-pagination.css

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+.va-pagination {
+  border-top: 1px solid #f1f1f1;
+  font-size: 0.9em;
+  overflow: hidden;
+  padding: 1.25rem 0 0.625rem;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+@media (max-width: 768px) {
+  .va-pagination-prev {
+    margin-left: -1.875rem;
+    padding: 0 0.625rem 0 0;
+  }
+}
+@media (min-width: 481px) {
+  .va-pagination-prev:not(:empty) a::before {
+    content: "‹  ";
+  }
+}
+@media (max-width: 768px) {
+  .va-pagination-next {
+    margin-right: -1.875rem;
+    padding: 0 0 0 0.625rem;
+  }
+}
+@media (min-width: 481px) {
+  .va-pagination-next:not(:empty) a::after {
+    content: "  ›";
+  }
+}
+.va-pagination-prev, .va-pagination-next {
+  position: relative;
+}
+.va-pagination-prev:hover, .va-pagination-prev:focus, .va-pagination-next:hover, .va-pagination-next:focus {
+  text-decoration: underline;
+}
+@media (min-width: 768px) {
+  .va-pagination-prev, .va-pagination-next {
+    padding: 0 0.625rem;
+  }
+}
+.va-pagination-inner {
+  white-space: nowrap;
+  overflow: hidden;
+}
+@media (max-width: 768px) {
+  .va-pagination-inner {
+    width: 12.5rem;
+  }
+}
+@media (min-width: 1201px) {
+  .va-pagination-inner {
+    width: 25rem;
+  }
+}
+.va-pagination-prev, .va-pagination-next, .va-pagination-inner {
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+.va-pagination a {
+  line-height: 2;
+  text-decoration: none;
+}
+
+.va-pagination-inner a {
+  border-radius: 1000px;
+  display: inline-block;
+  height: 1.875rem;
+  margin: 0 0.3125rem;
+  width: 1.875rem;
+  text-decoration: none;
+}
+
+.va-pagination-inner a:hover,
+.va-pagination-inner a:focus,
+.va-pagination-active,
+.va-pagination-active:visited {
+  background: #005ea2;
+  color: #ffffff;
+}
+
+/*# sourceMappingURL=va-pagination.css.map */