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

package/dist/stylesheets/modules/m-form-elements.css

@@ -0,0 +1,231 @@
+/**
+  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
+**/
+legend.legend-label + .form-radio-buttons {
+  margin-top: 0.75rem;
+}
+
+.form-radio-buttons label {
+  margin-top: 12px;
+}
+.form-radio-buttons label a {
+  position: relative;
+}
+.form-radio-buttons [type=radio] {
+  height: 3rem !important;
+  margin: 0;
+  border: 0;
+  cursor: pointer;
+}
+.form-radio-buttons .errorable-radio-button label {
+  outline: none;
+  padding: 0.75rem;
+  display: inline-block;
+  margin: 0 0 0 0.75rem;
+}
+.form-radio-buttons .errorable-radio-button input:focus + label {
+  background: #ffe396;
+}
+
+.form-required-span {
+  color: #cd2026;
+  margin: 0 0.35em;
+}
+
+button.form-button-green {
+  background: #2e8540;
+}
+
+button.form-button-disabled {
+  pointer-events: none;
+}
+
+.form-datefield-month,
+.form-datefield-day {
+  clear: none;
+  float: left;
+  margin-right: 0.9375rem;
+}
+.form-datefield-month select,
+.form-datefield-day select {
+  padding-top: 0.53125rem;
+  padding-bottom: 0.53125rem;
+}
+
+.form-alert-body {
+  padding: 0 2.1875rem;
+}
+
+.form-datefield-month {
+  width: 8.125rem;
+}
+
+.form-datefield-day {
+  width: 5rem;
+}
+
+.form-radio-buttons > input[type=radio] + label::before {
+  display: block;
+  float: left;
+  margin-left: -1.7em;
+  margin-top: 0.25em;
+  margin-right: 0;
+  pointer-events: none;
+}
+.form-radio-buttons > input[type=radio] + label {
+  margin-left: 1.8em;
+}
+.form-radio-buttons > input[type=radio] {
+  cursor: pointer;
+}
+
+.form-required-span {
+  color: #cd2026;
+  margin: 0 0.35em;
+}
+
+.form-checkbox [type=checkbox] {
+  height: 1.125rem !important;
+  margin: 0;
+  width: 1.125rem !important;
+  cursor: pointer;
+}
+.form-checkbox > input[type=checkbox] + label::before {
+  display: block;
+  float: left;
+  margin-left: -1.7em;
+  margin-top: 0.14em;
+  margin-right: 0;
+  pointer-events: none;
+}
+.form-checkbox > input[type=checkbox] + label {
+  margin-left: 1.7em;
+}
+
+legend.legend-label + .form-checkbox-buttons {
+  margin-top: 0.75rem;
+}
+
+.form-checkbox-buttons [type=checkbox] {
+  height: 1.125rem !important;
+  width: 1.125rem !important;
+  cursor: pointer;
+  margin: 0.75rem 0 0 1.5rem;
+}
+.form-checkbox-buttons label {
+  padding: 0.75rem;
+  display: inline-block;
+  margin: 0 0 0 0.75rem;
+}
+
+.form-field-alert label {
+  margin-top: 0.5em;
+}
+
+.form-error-date {
+  margin-top: 0;
+}
+
+.usa-input-error.form-error-date input, .usa-input-error.form-error-date select {
+  width: 100%;
+}
+
+@media screen and (min-width: 768px), print and (min-width: 768px) {
+  .form-select-medium {
+    max-width: 7.5rem;
+  }
+}
+.form-expanding-group-active-radio {
+  margin-left: 28px;
+}
+
+.form-expanding-group-active-radio.form-expanding-group-inner-enter,
+.form-expanding-group-active-radio.form-expanding-group-inner-leave-active {
+  margin-top: -16px;
+}
+
+.form-expanding-group-inner-leave {
+  max-height: 800px;
+  opacity: 1;
+  margin-top: 0;
+}
+
+.form-expanding-group-inner-enter {
+  opacity: 0;
+  max-height: 0;
+}
+
+.form-expanding-group-inner-leave.form-expanding-group-inner-leave-active {
+  -webkit-transition: margin-top 500ms 0ms, max-height 300ms 0ms, opacity 300ms 0ms;
+  transition: margin-top 500ms 0ms, max-height 300ms 0ms, opacity 300ms 0ms;
+  max-height: 0;
+  opacity: 0;
+}
+
+.form-expanding-group-inner-enter.form-expanding-group-inner-enter-active {
+  -webkit-transition: margin-top 300ms 0ms, max-height 700ms 0ms, opacity 500ms 200ms;
+  transition: margin-top 300ms 0ms, max-height 700ms 0ms, opacity 500ms 200ms;
+  max-height: 800px;
+  opacity: 1;
+  margin-top: 0 !important;
+}
+
+.form-expanding-group > span .usa-input-error {
+  padding-left: calc(1.5rem - 6px);
+  right: calc(1.9rem - 6px);
+}
+.form-expanding-group > span .schemaform-expandUnder-indent .usa-input-error {
+  padding-left: 0.9375rem;
+  right: 1.1875rem;
+}
+
+.form-expanding-group {
+  margin-left: -1.25rem;
+  padding-left: 1.25rem;
+}
+
+.form-expanding-group-open {
+  padding-left: calc(2rem - 7px);
+  border-left: 7px solid #97d4ea;
+}
+.form-expanding-group-open .form-expanding-group-open {
+  border-left-color: transparent;
+}
+
+.form-expanding-group-plus {
+  position: relative;
+}
+.form-expanding-group-plus::after {
+  content: "+";
+  font-size: 20px;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.form-expanding-group-open.form-expanding-group-plus::after {
+  content: "-";
+}
+
+.form-errorable-group > .usa-input-error label {
+  margin-top: 1.875rem;
+}
+.form-errorable-group > .usa-input-error .usa-input-error-label {
+  margin-top: 0;
+}
+.form-errorable-group > .usa-input-error .usa-input-error-message {
+  margin-bottom: -1.25rem;
+}
+
+/*# sourceMappingURL=m-form-elements.css.map */

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

@@ -0,0 +1,219 @@
+@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
+**/
+.form-process li h5 {
+  color: #5b616b;
+}
+.form-process li li {
+  display: none;
+}
+.form-process li:before {
+  background: #5b616b;
+}
+.form-process li.section-complete:before {
+  background: #2e8540;
+  content: "✔︎";
+}
+@media screen and (max-width: 481px) {
+  .form-process li.section-complete:before {
+    content: "✓︎";
+  }
+}
+.form-process li.section-current h5 {
+  font-weight: bold;
+  color: #005ea2;
+}
+.form-process li.section-current li {
+  display: list-item;
+}
+.form-process li.section-current li.sub-section-current {
+  font-weight: bold;
+  color: #005ea2;
+}
+.form-process li.section-current li.sub-section-hidden {
+  display: none;
+}
+.form-process li.section-current:before {
+  background: #005ea2;
+}
+
+.form-process-step {
+  color: #ffffff;
+  font-weight: 700;
+  text-align: center;
+  width: 2em;
+  margin-left: -0.2em;
+  margin-right: -0.2em;
+  top: -0.2em;
+  display: block;
+  border: 4px solid #ffffff;
+  background: #8d9297;
+  border-radius: 4em;
+  display: inline-block;
+}
+.form-process-step.current {
+  background: #005ea2;
+}
+
+.form-process-total {
+  font-weight: normal;
+  padding-right: 4px;
+}
+
+@media (max-width: 768px) {
+  .form-review-panel .form-review-array .edit-btn {
+    width: 100%;
+    text-align: center;
+  }
+}
+.form-review-panel button:not(.usa-button-unstyled) {
+  background-image: none;
+  background-color: #005ea2;
+  padding: 0.625rem 1.25rem;
+  color: #ffffff;
+  width: auto;
+}
+.form-review-panel button:not(.usa-button-unstyled):hover {
+  color: #ffffff;
+  background-color: #1a4480;
+}
+.form-review-panel button:not(.usa-button-unstyled):active {
+  background-color: #112e51;
+}
+.form-review-panel button.usa-button-secondary {
+  color: #005ea2;
+  background-color: #ffffff;
+}
+.form-review-panel button.usa-button-secondary:hover {
+  background-color: #ffffff;
+  color: #1a4480;
+}
+.form-review-panel button.usa-button-secondary:active {
+  background-color: #ffffff;
+  color: #112e51;
+}
+.form-review-panel .edit-btn {
+  background-color: #005ea2;
+  color: #ffffff;
+  margin-left: auto;
+}
+.form-review-panel .edit-btn:hover {
+  background-color: #1a4480;
+  color: #ffffff;
+}
+.form-review-panel .edit-btn.primary-outline {
+  background-color: transparent;
+  border: 2px solid #005ea2;
+  color: #005ea2;
+}
+.form-review-panel .edit-btn.primary-outline:disabled {
+  color: #f1f1f1;
+  border-color: #f1f1f1;
+}
+.form-review-panel .edit-btn.primary-outline:hover {
+  background-color: transparent;
+  border: 2px solid #1a4480;
+  color: #1a4480;
+}
+.form-review-panel .accordion-header > button {
+  min-height: 4.375rem;
+  padding: 1.5625rem 4.0625rem 1.5625rem 1.875rem;
+  font-size: 1.15em;
+  line-height: 1.5;
+  font-weight: bold;
+}
+.form-review-panel .section-label {
+  padding-bottom: 0.625rem;
+}
+.form-review-panel legend.hide-for-small-only {
+  display: none !important;
+}
+.form-review-panel table.review {
+  margin: 1em 0;
+}
+.form-review-panel table.review td {
+  padding-left: 0;
+  padding-right: 0;
+}
+.form-review-panel table.review td:first-child {
+  padding-right: 1em;
+}
+.form-review-panel .usa-accordion-content {
+  padding: 1em;
+}
+
+.review-growable {
+  background-color: #f1f1f1;
+}
+.review-growable table.review {
+  margin: 0;
+}
+.review-growable tr > td {
+  background: #f1f1f1;
+}
+.review-growable tr:first-child > td {
+  border-top-style: none;
+}
+.review-growable tr:last-child > td {
+  border-bottom-style: none;
+}
+
+.form-review-panel-page {
+  margin-bottom: 3.125rem;
+}
+.form-review-panel-page:last-child {
+  margin-bottom: 0;
+}
+.form-review-panel-page:focus {
+  outline: none;
+}
+.form-review-panel-page tr td:last-child {
+  font-weight: 700;
+  min-width: 3em;
+}
+
+.form-review-panel-page-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+@media screen and (max-width: 481px) {
+  .form-review-panel-page-header-row.header-stacked-small {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.form-review-panel-page-header {
+  flex: 1;
+  padding-bottom: 0 !important;
+  padding-right: 5px;
+  line-height: 37px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.schemaform-array-row-title:focus {
+  outline: 2px dotted #aeb0b5;
+  outline-offset: 2px;
+  display: inline-block;
+}
+
+.form-review-array {
+  margin-top: 3.125rem;
+}
+
+/*# sourceMappingURL=m-form-process.css.map */

package/dist/stylesheets/modules/m-homepage-hero.css

@@ -0,0 +1,76 @@
+/**
+  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
+**/
+.homepage-hero {
+  background: #f1f1f1;
+}
+
+.homepage-hero-image {
+  align-items: center;
+  background-size: cover;
+  display: flex;
+  margin: auto;
+  min-height: 14rem;
+  padding: 1em 1.5rem;
+  text-align: center;
+}
+.homepage-hero-image.usa-grid {
+  max-width: 71.25rem;
+}
+@media screen and (min-width: 768px), print and (min-width: 768px) {
+  .homepage-hero-image {
+    padding: 2em 0;
+    min-height: 20rem;
+  }
+}
+@media screen and (min-width: 1201px), print and (min-width: 1201px) {
+  .homepage-hero-image {
+    padding-top: 2.5em;
+    padding-bottom: 2.5em;
+  }
+}
+
+.homepage-hero-title {
+  background: #ffffff;
+  color: #323a45;
+  font-weight: bold;
+  font-size: 1.5625rem;
+  line-height: 1.3;
+  margin: 3em auto;
+  padding: 0.5em 0.4em;
+  white-space: pre-wrap;
+}
+@media screen and (min-width: 768px), print and (min-width: 768px) {
+  .homepage-hero-title {
+    font-size: 2.1875rem;
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    white-space: normal;
+  }
+}
+@media screen and (min-width: 1201px), print and (min-width: 1201px) {
+  .homepage-hero-title {
+    padding-left: 0.4em;
+    padding-right: 0.4em;
+  }
+}
+
+.va-homepage-benefits {
+  padding-bottom: 1.25rem;
+}
+.va-homepage-benefits li:first-child {
+  margin-top: 0.625rem;
+}
+
+/*# sourceMappingURL=m-homepage-hero.css.map */

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

@@ -0,0 +1,40 @@
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+.hub-page-link-list {
+  list-style: none;
+  padding: 0;
+}
+.hub-page-link-list__item {
+  margin-bottom: 1em;
+  margin: 1rem 0;
+}
+.hub-page-link-list__item > a {
+  text-decoration: none;
+}
+.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("/assets/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;
+}
+.hub-page-link-list__item > a .all-link-arrow {
+  width: 11px;
+  margin-left: 5px;
+  transition: all 0.15s ease;
+  margin-bottom: 2px;
+}
+.hub-page-link-list__header {
+  font-weight: bold;
+}
+.hub-page-link-list__description {
+  color: #000000;
+  margin: 0;
+}
+.hub-page-link-list__title:focus {
+  outline: none;
+}
+
+/*# sourceMappingURL=m-hub-page-link-list.css.map */

package/dist/stylesheets/modules/m-loading-indicator.css

@@ -0,0 +1,41 @@
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+.loading-indicator-container {
+  text-align: center;
+}
+.loading-indicator-container .loading-indicator {
+  display: block;
+  height: units(8);
+  margin-top: units(2);
+}
+.loading-indicator-container .loading-indicator:after {
+  content: " ";
+  display: inline-block;
+  width: units(7);
+  height: units(7);
+  margin: 1px;
+  border-radius: 50%;
+  border: 8px solid #005ea2;
+  border-color: #005ea2 transparent #005ea2 transparent;
+  animation: spin 1.2s linear infinite;
+}
+.loading-indicator-container .loading-indicator:focus {
+  outline: none;
+}
+
+.async-loader {
+  padding-bottom: units(1);
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*# sourceMappingURL=m-loading-indicator.css.map */

package/dist/stylesheets/modules/m-maintenance-banner.css

@@ -0,0 +1,33 @@
+/**
+  Variables ported over from Formation so that we can keep those stylesheets
+  working while we work on deprecation.
+**/
+.vads-c-maintenance-banner .usa-alert {
+  align-items: flex-start;
+  display: flex;
+  font-size: 1rem;
+  padding: 12px 16px;
+  max-width: 650px;
+}
+.vads-c-maintenance-banner .usa-alert::before {
+  color: unset;
+  margin-right: -22.5px;
+}
+.vads-c-maintenance-banner .usa-alert .usa-alert-heading {
+  font-family: "Source Sans Pro";
+  font-size: 1rem;
+  margin-top: 4px;
+  margin-left: 30.5px;
+}
+.vads-c-maintenance-banner .usa-alert .usa-alert-text {
+  margin-top: 0.625rem;
+}
+.vads-c-maintenance-banner .usa-alert .va-alert-close {
+  margin-top: 4px;
+}
+.vads-c-maintenance-banner .va-alert-close {
+  position: relative;
+  margin: 0;
+}
+
+/*# sourceMappingURL=m-maintenance-banner.css.map */