jekyll-theme-uswds 0.1.0

data/_sass/uswds/elements/_embed.scss

@@ -0,0 +1,26 @@
+$aspect-height: 9;
+$aspect-width: 16;
+
+@mixin embed-container ($height, $width) {
+  padding-bottom: percentage($height/$width);
+}
+
+.usa-embed-container {
+  iframe,
+  object,
+  embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.usa-embed-container {
+  @include embed-container($aspect-height, $aspect-width);
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}

data/_sass/uswds/elements/_figure.scss

@@ -0,0 +1,13 @@
+img {
+  max-width: 100%;
+}
+
+// TODO: Add documentation instructions for using this class on image links
+@mixin media-link {
+  display: inline-block;
+  line-height: 0;
+}
+
+.media_link {
+  @include media-link();
+}

data/_sass/uswds/elements/_inputs.scss

@@ -0,0 +1,368 @@
+// 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;
+  border-radius: $checkbox-border-radius;
+  box-shadow: 0 0 0 1px $color-gray-medium;
+  content: '\a0';
+  display: inline-block;
+  height: $spacing-medium;
+  line-height: $spacing-medium;
+  margin-right: 0.6em;
+  text-indent: 0.15em;
+  vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
+  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-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;
+}
+
+// Range inputs
+
+[type=range] {
+  appearance: none;
+  border: none;
+  padding-left: 0;
+  width: 100%;
+}
+
+[type=range]::-webkit-slider-runnable-track {
+  background: $color-gray-light;
+  border: 1px solid $color-gray-medium;
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+[type=range]::-moz-range-track {
+  background: $color-primary;
+  border: 1px solid $color-gray-medium;
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+[type=range]::-ms-track {
+  background: transparent;
+  color: transparent;
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: 1px solid $color-gray-medium;
+  height: 2.2rem;
+  border-radius: 1.5rem;
+  background: $color-gray-lightest;
+  cursor: pointer;
+  margin-top: -.65rem;
+  width: 2.2rem;
+}
+
+[type=range]::-moz-range-thumb {
+  background: $color-gray-lightest;
+  border: 1px solid $color-gray-medium;
+  border-radius: 1.5rem;
+  cursor: pointer;
+  height: 2.2rem;
+  width: 2.2rem;
+}
+
+[type=range]::-ms-thumb {
+  background: $color-gray-lightest;
+  border: 1px solid $color-gray-medium;
+  border-radius: 1.5rem;
+  cursor: pointer;
+  height: 2.2rem;
+  width: 2.2rem;
+}
+
+[type=range]::-ms-fill-lower {
+  background: $color-gray-light;
+  border: 1px solid $color-gray-medium;
+  border-radius: 2rem;
+}
+
+[type=range]::-ms-fill-upper {
+  background: $color-gray-light;
+  border: 1px solid $color-gray-medium;
+  border-radius: 2rem;
+}
+
+// File input type
+[type='file'] {
+  border: none;
+  padding-left: 0;
+}
+
+// Memorable dates
+
+.usa-date-of-birth {
+  label {
+    margin-top: 0;
+  }
+
+  [type=number]::-webkit-inner-spin-button,
+  [type=number]::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  [type=number] {
+    -moz-appearance: textfield;
+  }
+}
+
+.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

@@ -0,0 +1,20 @@
+.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

@@ -0,0 +1,32 @@
+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;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  + ul,
+  + ol {
+    margin-top: 0;
+  }
+}
+
+// Unstyled lists
+.usa-unstyled-list {
+  @include unstyled-list;
+}