uswds-jekyll 4.1.0 → 5.3.0

data/_sass/uswds/src/elements/_table.scss

@@ -0,0 +1,7 @@
+.usa-table {
+  @extend %usa-table;
+}
+
+.usa-table--borderless {
+  @extend %usa-table--borderless;
+}

data/_sass/uswds/src/elements/_tags.scss

@@ -0,0 +1,18 @@
+.usa-tag {
+  @include border-box-sizing;
+  @include u-font("ui", "2xs");
+  @include u-text("white", "uppercase");
+  background-color: color("base-dark");
+  border-radius: radius("sm");
+  margin-right: units(0.5);
+  padding: units(1px) units(1);
+
+  &:only-of-type {
+    margin-right: 0;
+  }
+}
+
+.usa-tag--big {
+  @include u-padding-x(1);
+  @include u-font("ui", $theme-body-font-size);
+}

data/_sass/uswds/src/elements/form-controls/_all.scss

@@ -0,0 +1,11 @@
+@import "global";
+@import "checkbox-and-radio";
+@import "date-input";
+@import "dropdown";
+@import "file-input";
+@import "range-input";
+@import "text-input";
+@import "character-count";
+@import "combo-box";
+@import "date-picker";
+@import "time-picker";

data/_sass/uswds/src/elements/form-controls/_character-count.scss

@@ -0,0 +1,9 @@
+.usa-character-count__message {
+  display: inline-block;
+  padding-top: units(0.5);
+}
+
+.usa-character-count__message--invalid {
+  color: color("error-dark");
+  font-weight: font-weight("bold");
+}

data/_sass/uswds/src/elements/form-controls/_checkbox-and-radio.scss

@@ -0,0 +1,117 @@
+@include override-prose {
+  .usa-input-list {
+    @include add-list-reset;
+
+    li {
+      line-height: line-height(
+        $theme-form-font-family,
+        $theme-input-line-height
+      );
+    }
+  }
+}
+
+.usa-checkbox__input,
+.usa-radio__input {
+  // The actual input element is only visible to screen readers, because
+  // all visual styling is done via the label.
+  @include sr-only();
+
+  .lt-ie9 & {
+    border: 0;
+    float: left;
+    margin: units(0.5) units(0.5) 0 0;
+    position: static;
+    width: auto;
+  }
+}
+
+.usa-checkbox__label,
+.usa-radio__label {
+  cursor: pointer;
+  display: inherit;
+  font-weight: font-weight("normal");
+  margin-top: units(1.5);
+  padding-left: units($input-select-margin-right + $theme-input-select-size);
+  position: relative;
+  text-indent: units(-$input-select-margin-right - $theme-input-select-size);
+}
+
+.usa-checkbox__label::before,
+.usa-radio__label::before {
+  background: color("white");
+  content: "\a0";
+  display: inline-block;
+  left: units($theme-input-select-border-width);
+  position: relative;
+  vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
+}
+
+.usa-checkbox__label::before {
+  @include u-square($theme-input-select-size);
+  border-radius: radius($theme-checkbox-border-radius);
+}
+
+.usa-radio__label::before {
+  @include u-circle($theme-input-select-size);
+}
+
+.usa-checkbox__label::before,
+.usa-radio__label::before {
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color("base");
+  line-height: units($theme-input-select-size);
+  margin-right: units($input-select-margin-right);
+}
+
+.usa-checkbox__input:checked + .usa-checkbox__label::before,
+.usa-radio__input:checked + .usa-radio__label::before {
+  background-color: color("primary");
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color("primary");
+}
+
+.usa-radio__input:checked + .usa-radio__label::before {
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color("primary"),
+    inset 0 0 0 units($theme-input-select-border-width) color("white");
+
+  @media print {
+    box-shadow: inset 0 0 0 units($theme-input-select-border-width)
+        color("white"),
+      inset 0 0 0 units(2) color("primary"),
+      0 0 0 units($theme-input-select-border-width) color("primary");
+  }
+}
+
+.usa-checkbox__input:checked + .usa-checkbox__label::before,
+.usa-checkbox__input:checked:disabled + .usa-checkbox__label::before {
+  @include add-background-svg("correct8");
+  background-position: center center;
+  background-size: units(1.5) auto;
+
+  @media print {
+    background-image: none;
+    background-color: color("white");
+    content: url("#{$theme-image-path}/checkbox-check-print.svg");
+    text-indent: 0;
+  }
+}
+
+.usa-radio__input:focus + .usa-radio__label::before {
+  @include focus-outline(null, null, null, 0.5);
+}
+
+.usa-checkbox__input:disabled + .usa-checkbox__label,
+.usa-radio__input:disabled + .usa-radio__label {
+  color: color("disabled");
+  cursor: not-allowed;
+}
+
+.usa-checkbox__input:focus + .usa-checkbox__label::before {
+  @include focus-outline;
+}
+
+.usa-checkbox__input:disabled + .usa-checkbox__label::before,
+.usa-radio__input:disabled + .usa-radio__label::before {
+  background: color("disabled-light");
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color("disabled");
+  cursor: not-allowed;
+}

data/_sass/uswds/src/elements/form-controls/_combo-box.scss

@@ -0,0 +1,126 @@
+.usa-combo-box {
+  max-width: units($theme-input-max-width);
+  position: relative;
+}
+
+.usa-combo-box--pristine {
+  .usa-combo-box__input {
+    padding-right: calc(5em + 4px);
+
+    &::-ms-clear {
+      display: none;
+    }
+  }
+
+  .usa-combo-box__clear-input {
+    display: block;
+  }
+}
+
+.usa-combo-box__input {
+  @extend %block-input-general;
+  @extend %block-input-styles;
+  appearance: none;
+  margin-bottom: 0;
+  max-width: none;
+  padding-right: calc(2.5em + 3px);
+}
+
+button.usa-combo-box__toggle-list,
+button.usa-combo-box__clear-input {
+  &:focus {
+    outline-offset: -4px;
+  }
+}
+
+.usa-combo-box__toggle-list__wrapper:focus,
+.usa-combo-box__clear-input__wrapper:focus {
+  outline: 0;
+}
+
+.usa-combo-box__toggle-list,
+.usa-combo-box__clear-input {
+  background-color: transparent;
+  background-position: center;
+  background-size: auto units(1.5);
+  border: 0;
+  cursor: pointer;
+  margin-bottom: 0;
+  padding-right: units(4);
+  position: absolute;
+  top: 1px;
+  height: 2.25em;
+  z-index: z-index(100);
+}
+.usa-combo-box__clear-input {
+  @include add-background-svg("close-gray-60");
+
+  display: none;
+  right: calc(2.5em + 3px);
+}
+
+.usa-combo-box__toggle-list {
+  @include add-background-svg("arrow-down-gray-60");
+  right: 1px;
+}
+
+.usa-combo-box__input-button-separator {
+  background-color: color("gray-cool-20");
+  position: absolute;
+  top: 1px;
+  margin-bottom: 8px;
+  margin-top: 8px;
+  width: 1px;
+  right: calc(2.5em + 2px);
+  box-sizing: border-box;
+  z-index: z-index(200);
+}
+
+.usa-combo-box__list {
+  @extend %block-input-general;
+  @include u-border(1px, "base-dark");
+  background-color: color("white");
+  border-radius: 0;
+  border-top: 0;
+  margin: 0;
+  max-height: 12.1em;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  padding: 0;
+  position: absolute;
+  width: 100%;
+  z-index: z-index(300);
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+.usa-combo-box__list-option {
+  border-bottom: units(1px) solid color("base-lighter");
+  cursor: pointer;
+  display: block;
+  padding: units(1);
+
+  &--focused {
+    @include focus-outline($width: 2px, $offset: -2px, $color: "blue-warm-80v");
+    position: relative;
+    z-index: z-index(100);
+
+    &:focus {
+      outline-offset: -4px;
+    }
+  }
+
+  &--selected {
+    background-color: color("primary");
+    border-color: color("primary");
+    color: color("white");
+  }
+}
+
+.usa-combo-box__list-option--no-results {
+  cursor: not-allowed;
+  display: block;
+  padding: units(1);
+}

data/_sass/uswds/src/elements/form-controls/_date-input.scss

@@ -0,0 +1,31 @@
+.usa-memorable-date {
+  display: flex;
+  [type="number"] {
+    -moz-appearance: textfield;
+
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+
+    &::-webkit-contacts-auto-fill-button {
+      visibility: hidden;
+      display: none !important; /* stylelint-disable-line declaration-no-important */
+      pointer-events: none;
+      height: 0;
+      width: 0;
+      margin: 0;
+    }
+  }
+}
+
+.usa-form-group--day,
+.usa-form-group--month,
+.usa-form-group--year {
+  @include u-flex(auto);
+  margin-right: units(2);
+  width: units(6);
+}
+
+.usa-form-group--year {
+  width: units(9);
+}

data/_sass/uswds/src/elements/form-controls/_date-picker.scss

@@ -0,0 +1,325 @@
+// Date Picker
+
+.usa-date-picker__wrapper {
+  display: none;
+  position: relative;
+
+  &:focus {
+    outline: 0;
+  }
+}
+
+// Date Picker -- initialized
+
+%usa-date-picker__button {
+  background-color: color("base-lightest");
+  border: 0;
+  width: 100%;
+
+  &:not([disabled]) {
+    cursor: pointer;
+
+    &:focus {
+      outline-offset: -4px;
+    }
+
+    &:hover {
+      background-color: color("base-lighter");
+    }
+
+    &:active {
+      background-color: color("base-light");
+    }
+  }
+}
+
+.usa-date-picker--active {
+  .usa-date-picker__button {
+    background-color: #f0f0f0;
+  }
+
+  .usa-date-picker__calendar {
+    z-index: z-index(400);
+  }
+}
+
+.usa-date-picker__button {
+  @extend %usa-date-picker__button;
+  @include add-background-svg("calendar-alt-solid");
+  align-self: stretch;
+  background-color: transparent;
+  background-position: center;
+  background-size: units(3);
+  margin-top: 0.5em;
+  width: 3em;
+}
+
+.usa-date-picker--initialized {
+  .usa-date-picker__wrapper {
+    display: flex;
+  }
+}
+
+// Date Picker - Calendar View
+
+.usa-date-picker__calendar {
+  background-color: color("base-lightest");
+  left: 0;
+  position: absolute;
+  width: 100%;
+  z-index: z-index(100);
+}
+
+// Date Picker - Table
+
+.usa-date-picker__calendar__table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+  text-align: center;
+  width: 100%;
+
+  th {
+    font-weight: normal;
+  }
+
+  td {
+    padding: 0;
+  }
+}
+
+// Date Picker - Grid
+
+.usa-date-picker__calendar__row {
+  @include grid-row;
+  text-align: center;
+  width: 100%;
+}
+
+.usa-date-picker__calendar__cell {
+  background-color: color("base-lightest");
+  flex: 1;
+}
+
+.usa-date-picker__calendar__cell--center-items {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// Date Picker - Date Selection View
+
+.usa-date-picker__calendar__previous-year,
+.usa-date-picker__calendar__previous-month,
+.usa-date-picker__calendar__next-year,
+.usa-date-picker__calendar__next-month {
+  @extend %usa-date-picker__button;
+  background-position: center;
+  background-size: auto units(2.5);
+  height: units(3);
+  padding: 20px 10px;
+}
+
+.usa-date-picker__calendar__previous-year:not([disabled]) {
+  @include add-background-svg("angle-double-left-solid");
+}
+
+.usa-date-picker__calendar__previous-month:not([disabled]) {
+  @include add-background-svg("angle-left-solid");
+}
+
+.usa-date-picker__calendar__next-year:not([disabled]) {
+  @include add-background-svg("angle-double-right-solid");
+}
+
+.usa-date-picker__calendar__next-month:not([disabled]) {
+  @include add-background-svg("angle-right-solid");
+}
+
+.usa-date-picker__calendar__day-of-week {
+  padding: 6px 0px;
+}
+
+.usa-date-picker__calendar__date {
+  @extend %usa-date-picker__button;
+  padding: 10px 0px;
+
+  &--focused {
+    @include focus-outline($width: 2px, $offset: -2px, $color: "blue-warm-80v");
+    position: relative;
+    z-index: z-index(100);
+  }
+
+  &--next-month:not([disabled]),
+  &--previous-month:not([disabled]) {
+    color: color("gray-warm-60");
+  }
+
+  &--selected,
+  &--range-date {
+    background-color: color("primary-vivid");
+    color: color("gray-2");
+
+    &:not([disabled]) {
+      background-color: color("primary-vivid");
+      color: color("gray-2");
+
+      &:hover {
+        background-color: color("primary-vivid");
+        color: color("gray-10");
+      }
+
+      &:focus {
+        background-color: color("primary-vivid");
+        color: color("gray-2");
+      }
+
+      &:active {
+        background-color: color("primary-dark");
+      }
+    }
+  }
+
+  &--range-date-start {
+    border-top-left-radius: 10%;
+    border-bottom-left-radius: 10%;
+  }
+
+  &--range-date-end {
+    border-top-right-radius: 10%;
+    border-bottom-right-radius: 10%;
+  }
+
+  &--within-range {
+    background-color: color("blue-10v");
+
+    &:not([disabled]) {
+      background-color: color("blue-10v");
+
+      &:hover {
+        background-color: color("blue-10v");
+      }
+
+      &:focus {
+        background-color: color("blue-10v");
+      }
+
+      &:active {
+        background-color: color("blue-10v");
+      }
+    }
+  }
+}
+
+.usa-date-picker__calendar__month-label {
+  flex: 4;
+  text-align: center;
+}
+
+.usa-date-picker__calendar__year-selection,
+.usa-date-picker__calendar__month-selection {
+  @extend %usa-date-picker__button;
+  display: inline-block;
+  height: 100%;
+  padding: 8px 4px;
+  width: auto;
+}
+
+// Date Picker - Month Selection View
+
+.usa-date-picker__calendar__month-picker {
+  padding: 20px 5px;
+}
+
+.usa-date-picker__calendar__month {
+  @extend %usa-date-picker__button;
+  padding: 10px 0;
+
+  &--focused {
+    @include focus-outline($width: 2px, $offset: -2px, $color: "blue-warm-80v");
+    position: relative;
+    z-index: z-index(100);
+  }
+
+  &--selected {
+    background-color: color("primary-vivid");
+    color: color("gray-2");
+
+    &:not([disabled]) {
+      background-color: color("primary-vivid");
+      color: color("gray-2");
+
+      &:hover {
+        background-color: color("primary-vivid");
+        color: color("gray-10");
+      }
+
+      &:focus {
+        background-color: color("primary-vivid");
+        color: color("gray-2");
+      }
+
+      &:active {
+        background-color: color("primary-dark");
+      }
+    }
+  }
+}
+
+// Date Picker - Year Selection View
+
+.usa-date-picker__calendar__year-picker {
+  padding: 20px 5px;
+}
+
+.usa-date-picker__calendar__previous-year-chunk,
+.usa-date-picker__calendar__next-year-chunk {
+  @extend %usa-date-picker__button;
+  background-position: center;
+  background-size: auto units(4);
+  margin: auto;
+  padding: 40px 0;
+}
+
+.usa-date-picker__calendar__previous-year-chunk:not([disabled]) {
+  @include add-background-svg("angle-left-solid");
+}
+
+.usa-date-picker__calendar__next-year-chunk:not([disabled]) {
+  @include add-background-svg("angle-right-solid");
+}
+
+.usa-date-picker__calendar__year {
+  @extend %usa-date-picker__button;
+  padding: 10px 0;
+
+  &--focused {
+    @include focus-outline($width: 2px, $offset: -2px, $color: "blue-warm-80v");
+    position: relative;
+    z-index: z-index(100);
+  }
+
+  &--selected {
+    background-color: color("primary-vivid");
+    color: color("gray-2");
+
+    &:not([disabled]) {
+      background-color: color("primary-vivid");
+      color: color("gray-2");
+
+      &:hover {
+        background-color: color("primary-vivid");
+        color: color("gray-10");
+      }
+
+      &:focus {
+        background-color: color("primary-vivid");
+        color: color("gray-2");
+      }
+
+      &:active {
+        background-color: color("primary-dark");
+      }
+    }
+  }
+}