uswds-jekyll 4.1.0 → 5.3.0

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

@@ -0,0 +1,25 @@
+.usa-select {
+  @extend %block-input-general;
+  @extend %block-input-styles;
+  @include add-background-svg("arrow-both");
+  appearance: none;
+  background-color: color("white");
+  background-position: right units(1.5) center;
+  background-size: units(1);
+  padding-right: units(4);
+
+  &::-ms-expand {
+    display: none;
+  }
+
+  // Show default webkit style on select element when autofilled to show icon
+  &:-webkit-autofill {
+    appearance: menulist;
+  }
+
+  // Remove dotted outline from select element on focus in Firefox
+  &:-moz-focusring {
+    color: transparent;
+    text-shadow: 0 0 0 color("black");
+  }
+}

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

@@ -0,0 +1,199 @@
+[type="file"] {
+  border: none;
+  margin-top: units(1);
+  padding-left: 0;
+  padding-top: 0.2rem; // keeps input vertically centered on error state
+}
+
+.usa-file-input {
+  display: block;
+  max-width: units($theme-input-max-width);
+  width: 100%;
+}
+
+.usa-file-input__target {
+  border: 1px dashed color("base-light");
+  display: block;
+  font-size: size("body", "2xs");
+  margin-top: units(1);
+  position: relative;
+  text-align: center;
+  width: 100%;
+
+  &:hover {
+    border-color: color("base");
+  }
+}
+
+.usa-file-input__target.has-invalid-file {
+  border-color: color("accent-warm");
+}
+
+.usa-file-input__accepted-files-message {
+  font-weight: bold;
+  margin: units(-3) 0 units(3);
+  pointer-events: none;
+  position: relative;
+  z-index: 3;
+}
+
+.has-invalid-file .usa-file-input__accepted-files-message {
+  color: color("secondary-dark");
+}
+
+.usa-file-input__choose {
+  @include typeset-link;
+  font-weight: normal;
+}
+
+.usa-file-input__instructions {
+  display: inline-block;
+  padding: units(4) units(2);
+  pointer-events: none;
+  position: relative;
+  z-index: 3;
+
+  &.display-none {
+    display: none;
+  }
+}
+
+.usa-file-input__box {
+  background: white;
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+}
+
+.usa-file-input .usa-file-input__input[type] {
+  cursor: pointer;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  max-width: none;
+  position: absolute;
+  padding: units(1);
+  text-indent: -999em;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.usa-file-input .usa-file-input__input[type]::-webkit-file-upload-button {
+  display: none;
+}
+
+.usa-file-input--drag .usa-file-input__target {
+  border-color: color("primary");
+}
+
+.usa-file-input--drag .usa-file-input__box {
+  background-color: color("primary-lighter") !important;
+}
+
+.usa-file-input--drag .usa-file-input__preview {
+  opacity: 0.1;
+}
+
+.usa-file-input__preview-heading {
+  align-items: center;
+  background: color("primary-lighter");
+  display: flex;
+  font-weight: bold;
+  justify-content: space-between;
+  padding: units(1);
+  pointer-events: none;
+  position: relative;
+  z-index: 3;
+}
+
+.usa-file-input__preview {
+  align-items: center;
+  background: color("primary-lighter");
+  word-wrap: anywhere;
+  display: flex;
+  font-size: size("body", "3xs");
+  margin-top: units(1px);
+  padding: units(0.5) units(1);
+  pointer-events: none;
+  position: relative;
+  text-align: left;
+  z-index: 3;
+
+  &:last-child {
+    margin-bottom: units(-3);
+  }
+}
+
+.usa-file-input__preview-image {
+  border: none;
+  display: block;
+  height: units(5);
+  margin-right: units(1);
+  object-fit: contain;
+  width: units(5);
+}
+
+.usa-file-input__preview-image.is-loading {
+  @include add-background-svg("loader");
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: units(4);
+}
+
+.usa-file-input__preview-image--generic,
+.usa-file-input__preview-image--pdf,
+.usa-file-input__preview-image--word,
+.usa-file-input__preview-image--excel,
+.usa-file-input__preview-image--video {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: units(3);
+}
+
+.usa-file-input__preview-image--pdf {
+  @include add-background-svg("file-pdf");
+}
+
+.usa-file-input__preview-image--generic {
+  @include add-background-svg("file");
+}
+
+.usa-file-input__preview-image--word {
+  @include add-background-svg("file-word");
+}
+
+.usa-file-input__preview-image--excel {
+  @include add-background-svg("file-excel");
+}
+
+.usa-file-input__preview-image--video {
+  @include add-background-svg("file-video");
+}
+
+// Error states
+.usa-form-group--error .usa-file-input__target {
+  border-color: color("secondary-dark");
+  border-width: 2px;
+}
+
+// Disabled state
+.usa-file-input--disabled {
+  pointer-events: none;
+
+  .usa-file-input__instructions {
+    opacity: 0.5;
+  }
+
+  .usa-file-input__box {
+    background-color: color($theme-color-disabled-light);
+  }
+
+  .usa-file-input__input[type] {
+    cursor: default;
+  }
+}

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

@@ -0,0 +1,91 @@
+// Helpers
+
+$input-select-margin-right: 1.5;
+
+%block-input-general {
+  @include border-box-sizing;
+  @include typeset(
+    $theme-form-font-family,
+    $theme-body-font-size,
+    $theme-input-line-height
+  );
+}
+
+%block-input-styles {
+  @include u-border(1px, "base-dark");
+  appearance: none;
+  border-radius: 0;
+  color: color("ink"); // standardize on firefox
+  display: block;
+  height: units(5);
+  margin-top: units(1);
+  max-width: units($theme-input-max-width);
+  padding: units(1);
+  width: 100%;
+
+  &.usa-input--success {
+    @include u-border($theme-input-state-border-width, "success");
+  }
+}
+
+// Block input elements
+.usa-fieldset,
+.usa-hint {
+  @extend %block-input-general;
+}
+
+.usa-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.usa-form-group--error {
+  @include u-border-left(0.5, "error-dark");
+  margin-top: units(4);
+  padding-left: units(2);
+  position: relative;
+
+  @include at-media("desktop") {
+    margin-left: units(-2.5);
+  }
+}
+
+.usa-error-message {
+  @include u-padding-y(0.5);
+  color: color("error-dark");
+  display: block;
+  font-weight: font-weight("bold");
+}
+
+.usa-hint {
+  color: color("base");
+}
+
+.usa-label,
+.usa-legend {
+  @include typeset(
+    $theme-form-font-family,
+    $theme-body-font-size,
+    $theme-input-line-height
+  );
+  display: block;
+  font-weight: font-weight("normal");
+  margin-top: units(3);
+  max-width: units($theme-input-max-width);
+}
+
+.usa-label--error {
+  font-weight: font-weight("bold");
+  margin-top: 0;
+}
+
+.usa-label--required {
+  color: color("error-dark");
+}
+
+.usa-legend--large {
+  font-size: font-size($theme-form-font-family, "xl");
+  font-weight: font-weight("bold");
+  margin-top: units(2);
+}

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

@@ -0,0 +1,89 @@
+@mixin range-focus {
+  background-color: color("white");
+  box-shadow: 0 0 0 units(2px) color($theme-focus-color);
+}
+
+@mixin range-track {
+  background-color: color("base-lightest");
+  border-radius: radius("pill");
+  border: units(1px) solid color("base");
+  cursor: pointer;
+  height: units(2);
+  width: 100%;
+}
+
+@mixin range-thumb {
+  @include u-circle($theme-input-select-size);
+  background: color("base-lightest");
+  border: none;
+  box-shadow: 0 0 0 units($theme-input-select-border-width) color("base");
+  cursor: pointer;
+}
+
+@mixin range-ms-fill {
+  background-color: color("base-lightest");
+  border-radius: radius("pill");
+  border: units(1px) solid color("base");
+}
+
+.usa-range {
+  @extend %block-input-general;
+  @extend %block-input-styles;
+}
+
+.usa-range {
+  appearance: none;
+  border: none;
+  padding-left: 1px;
+  width: 100%;
+
+  &:focus {
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      @include range-focus;
+    }
+
+    &::-moz-range-thumb {
+      @include range-focus;
+    }
+
+    &::-ms-thumb {
+      @include range-focus;
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    @include range-track;
+  }
+
+  &::-moz-range-track {
+    @include range-track;
+  }
+
+  &::-ms-track {
+    @include range-track;
+  }
+
+  &::-webkit-slider-thumb {
+    @include range-thumb;
+    appearance: none;
+    margin-top: px-to-rem(-3px); // magic number
+  }
+
+  &::-moz-range-thumb {
+    @include range-thumb;
+  }
+
+  &::-ms-thumb {
+    @include range-thumb;
+  }
+
+  &::-ms-fill-lower {
+    @include range-ms-fill;
+  }
+
+  &::-ms-fill-upper {
+    @include range-ms-fill;
+  }
+}

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

@@ -0,0 +1,13 @@
+.usa-input,
+.usa-textarea {
+  @extend %block-input-general;
+  @extend %block-input-styles;
+}
+
+.usa-textarea {
+  height: units("card");
+}
+
+.usa-input--error {
+  @include u-border($theme-input-state-border-width, "error-dark");
+}

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

@@ -0,0 +1,3 @@
+.usa-time-picker {
+  width: 10em;
+}

data/_sass/uswds/src/elements/typography/_content.scss

@@ -0,0 +1,62 @@
+.usa-paragraph {
+  @include typeset-p;
+}
+
+// Custom typography
+
+.usa-content {
+  p,
+  ul:not(.usa-accordion):not(.usa-accordion--bordered),
+  ol:not(.usa-accordion):not(.usa-accordion--bordered) {
+    max-width: measure($theme-text-measure);
+  }
+}
+
+.usa-display {
+  @include typeset-h3;
+  margin-bottom: 0;
+
+  @include at-media("mobile-lg") {
+    @include typeset-h1;
+  }
+
+  @include at-media("tablet") {
+    @include typeset-display;
+  }
+}
+
+.usa-intro {
+  @include typeset(
+    $theme-lead-font-family,
+    $theme-lead-font-size,
+    $theme-lead-line-height
+  );
+  font-weight: $theme-font-weight-normal;
+  max-width: measure($theme-lead-measure);
+}
+
+.usa-dark-background {
+  @include add-knockout-font-smoothing;
+  background-color: color("base-darker");
+
+  p,
+  span {
+    color: color("white");
+  }
+
+  a {
+    color: color("base-lighter");
+
+    &:hover {
+      color: color("white");
+    }
+  }
+}
+
+%usa-paragraph {
+  @include typeset-p;
+}
+
+%usa-heading {
+  @include typeset-heading;
+}