uswds-jekyll 4.2.0 → 5.0.0

data/_sass/uswds/elements/_inputs.scss

@@ -1,405 +0,0 @@
-// scss-lint:disable QualifyingElement, PropertyCount
-
-$input-line-height: 1.3;
-$input-border-width: 0.1rem; // Using rem instead of px so function uses same units
-$input-padding-vertical: 1rem;
-
-// input heights will vary by browser and type
-// if height not explicitly set
-$input-height-exact: (
-  ($base-font-size * $input-line-height) +
-  ($input-padding-vertical * 2) +
-  ($input-border-width * 2)
-);
-
-// truncated to 1 decimal place
-// (i.e., 1.21rem -> 1.2rem)
-$input-height: floor($input-height-exact * 10) / 10;
-
-// Block form elements
-/* stylelint-disable selector-no-qualifying-type */
-input,
-textarea,
-select {
-  appearance: none;
-  border: $input-border-width solid $color-gray;
-  border-radius: 0;
-  box-sizing: border-box;
-  color: $color-base; // standardize on firefox
-  display: block;
-  font-size: $base-font-size;
-  height: $input-height;
-  line-height: $input-line-height;
-  margin: 0.2em 0;
-  max-width: $input-max-width;
-  padding: $input-padding-vertical 0.7em;
-  width: 100%;
-
-  &.usa-input-success {
-    border: 3px solid $color-green-light;
-  }
-}
-/* stylelint-enable */
-
-.usa-input-error {
-  border-left: 4px solid $color-secondary-dark;
-  margin-top: 3rem;
-  padding-bottom: 0.8rem;
-  padding-left: 1.5rem;
-  padding-top: 0.8rem;
-  position: relative;
-  right: 1.9rem;
-
-  input,
-  textarea,
-  select {
-    border: 3px solid $color-secondary-dark;
-    width: calc(100% + 1.9rem); // 1.5rem left padding + 4px border from input error spacing
-  }
-
-  label {
-    margin-top: 0;
-  }
-
-  .usa-input-inline {
-    border: $input-border-width solid $color-gray;
-    width: inherit;
-  }
-
-  .usa-input-inline-error {
-    border: 3px solid $color-secondary-dark;
-  }
-}
-
-.usa-input-error-label {
-  display: block;
-  font-size: $base-font-size;
-  font-weight: $font-bold;
-}
-
-.usa-input-error-message {
-  color: $color-secondary-dark;
-  display: block;
-  font-size: $base-font-size;
-  font-weight: $font-bold;
-  padding-bottom: 3px;
-  padding-top: 3px;
-}
-
-// Deprecated: Some screen readers can't read CSS content.
-// Will be removed in 2.0.
-.usa-input-required:after {
-  color: $color-secondary-darkest;
-  content: ' (*required)';
-}
-
-// Deprecated: Some screen readers can't read CSS content.
-// Will be removed in 2.0.
-.usa-input-optional:after {
-  color: $color-gray-medium;
-  content: ' (optional)';
-}
-
-.usa-input-label-helper {
-  color: $color-gray-medium;
-}
-
-.usa-input-label-required {
-  color: $color-secondary-darkest;
-}
-
-label {
-  display: block;
-  margin-top: 3rem;
-  max-width: $input-max-width;
-}
-
-textarea {
-  height: 16rem;
-}
-
-select {
-  appearance: none;
-  background-color: $color-white;
-  background-image: url('#{$image-path}/arrow-both.png');
-  // Ensure browsers that don't support SVG in background-image (IE 11 and below) fall back to PNG.
-  // See https://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/
-  background-image: none, url('#{$image-path}/arrow-both.svg'), url('#{$image-path}/arrow-both.png');
-  background-position: right 1.3rem center;
-  background-repeat: no-repeat;
-  background-size: 1rem;
-  padding-right: 3rem;
-
-  &::-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;
-  }
-}
-
-option:first-child {
-  font-weight: $font-bold;
-}
-
-legend {
-  font-size: $h2-font-size;
-  font-weight: $font-bold;
-}
-
-.usa-fieldset-inputs {
-  label {
-    margin-top: 0;
-  }
-}
-
-// Hint text
-
-.usa-form-hint {
-  color: $color-gray-medium;
-  font-family: $font-sans;
-  margin-bottom: 0;
-}
-
-// Custom checkboxes
-
-[type=checkbox],
-[type=radio] {
-  // 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: 0.4em 0.4em 0 0;
-    position: static;
-    width: auto;
-  }
-}
-
-[type=checkbox] + label,
-[type=radio] + label {
-  cursor: pointer;
-  font-weight: 400;
-  margin-bottom: 0.65em;
-}
-
-[type=checkbox] + label::before,
-[type=radio] + label::before {
-  background: $color-white;
-  content: '\a0';
-  display: inline-block;
-  text-indent: 0.15em;
-  vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
-}
-
-[type=checkbox] + label::before {
-  border-radius: $checkbox-border-radius;
-  box-shadow: 0 0 0 1px $color-gray-medium;
-  height: $spacing-medium;
-  line-height: $spacing-medium;
-  margin-left: 1px;
-  margin-right: 0.6em;
-  width: $spacing-medium;
-}
-
-[type=radio] + label::before {
-  border-radius: 100%;
-  box-shadow: 0 0 0 2px $color-white, 0 0 0 3px $color-gray-medium;
-  height: 1.4rem; // Size overrides to account for shape + checked styling
-  line-height: 1.4rem;
-  margin-left: 3px;
-  margin-right: 0.75em;
-  width: 1.4rem;
-}
-
-[type=checkbox]:checked + label::before,
-[type=radio]:checked + label::before {
-  background-color: $color-primary;
-  box-shadow: 0 0 0 1px $color-primary;
-}
-
-[type=radio]:checked + label::before {
-  box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary;
-}
-
-[type=checkbox]:checked + label::before,
-[type=checkbox]:checked:disabled + label::before {
-  background-image: url('#{$image-path}/correct8.png');
-  background-image: url('#{$image-path}/correct8.svg');
-  background-position: 50%;
-  background-repeat: no-repeat;
-}
-
-[type=radio]:focus + label::before {
-  outline: $focus-outline;
-  outline-offset: $focus-spacing * 2; // Double the offset to account for circular shape
-}
-
-[type=checkbox]:disabled + label {
-  color: $color-gray-lighter;
-}
-
-[type=checkbox]:focus + label::before {
-  outline: $focus-outline;
-  outline-offset: $focus-spacing;
-}
-
-[type=checkbox]:disabled + label::before,
-[type=radio]:disabled + label::before {
-  background: $color-gray-lightest;
-  box-shadow: 0 0 0 1px $color-gray-light;
-  cursor: not-allowed;
-}
-
-@media print {
-  [type=checkbox]:checked + label::before,
-  [type=checkbox]:checked:disabled + label::before {
-    background-image: none;
-    background-color: $color-white;
-    content: url('#{$image-path}/correct8-alt.png');
-    content: url('#{$image-path}/correct8-alt.svg');
-    text-indent: 0;
-  }
-}
-
-// Range inputs
-
-// Change to $color-focus in 2.0
-@mixin range-focus {
-  box-shadow: 0 0 0 2px $color-primary;
-}
-
-@mixin range-track {
-  background: $color-gray-lighter;
-  border: 1px solid $color-gray-medium;
-  cursor: pointer;
-  height: 1.6rem;
-  width: 100%;
-}
-
-@mixin range-thumb {
-  background: $color-gray-lightest;
-  box-shadow: 0 0 0 1px $color-gray-medium;
-  border-radius: 1.5rem;
-  cursor: pointer;
-  height: 2.5rem;
-  width: 2.5rem;
-}
-
-@mixin range-ms-fill {
-  background: $color-gray-light;
-  border: 1px solid $color-gray-medium;
-  border-radius: 2rem;
-}
-
-[type=range] {
-  appearance: none;
-  border: none;
-  padding-left: 0;
-  overflow: hidden;
-  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: -0.6rem;
-  }
-
-  &::-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;
-  }
-}
-
-// File input type
-[type='file'] {
-  border: none;
-  padding-left: 0;
-}
-
-// Memorable dates
-
-.usa-date-of-birth { /* stylelint-disable-line */
-  label {
-    margin-top: 0;
-  }
-
-  [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 {
-  clear: none;
-  float: left;
-  margin-right: 1.5rem;
-  width: 5rem;
-}
-
-.usa-form-group-year {
-  width: 7rem;
-}

data/_sass/uswds/elements/_labels.scss

@@ -1,20 +0,0 @@
-.usa-label {
-  background-color: $color-gray;
-  border-radius: $label-border-radius;
-  color: $color-white;
-  font-size: $h5-font-size;
-  margin-right: 0.5rem;
-  padding: 0.1rem 0.7rem;
-  text-transform: uppercase;
-
-  &:only-of-type {
-    margin-right: 0;
-  }
-}
-
-.usa-label-big {
-  @extend .usa-label;
-  font-size: $base-font-size;
-  padding-left: 0.9rem;
-  padding-right: 0.9rem;
-}

data/_sass/uswds/elements/_list.scss

@@ -1,19 +0,0 @@
-ul,
-ol {
-  @include margin(1em null);
-  padding-left: 1.94em; // Approximately 15px left padding at default font size
-}
-
-li {
-  line-height: $base-line-height;
-  margin-bottom: 0.5em;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-// Unstyled lists
-.usa-unstyled-list {
-  @include unstyled-list;
-}

data/_sass/uswds/elements/_table.scss

@@ -1,55 +0,0 @@
-table {
-  border-spacing: 0;
-  margin: 2em 0;
-}
-
-thead {
-  th {
-    font-weight: $font-bold;
-  }
-
-  th,
-  td {
-    background-color: $color-gray-lightest;
-  }
-}
-
-th {
-  text-align: left;
-}
-
-th,
-td {
-  background-color: $color-white;
-  border: 1px solid $color-gray;
-  font-weight: $font-normal;
-  padding: 1rem 1.5rem;
-}
-
-.usa-table-borderless {
-  thead {
-    th {
-      background-color: transparent;
-      border-top: 0;
-    }
-  }
-
-  th,
-  td {
-    border-left: 0;
-    border-right: 0;
-  }
-
-  th {
-    &:first-child {
-      padding-left: 0;
-    }
-  }
-}
-
-caption {
-  @include h5;
-  font-family: $font-serif;
-  margin-bottom: 1.2rem;
-  text-align: left;
-}