uswds-rails 0.1.0

data/app/assets/stylesheets/uswds/elements/_inputs.scss

@@ -0,0 +1,346 @@
+// scss-lint:disable QualifyingElement, PropertyCount
+
+$input-line-height: 1.3;
+$input-border-width: 1px;
+$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) +
+  (rem($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;
+  outline: none;
+  padding: $input-padding-vertical 0.7em;
+  width: 100%;
+
+  &:focus,
+  &.usa-input-focus {
+    box-shadow: $focus-shadow;
+  }
+
+  &.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;
+}
+
+.usa-input-required:after {
+  color: $color-secondary-darkest;
+  content: ' (*Required)';
+}
+
+label {
+  display: block;
+  margin-top: 3rem;
+  max-width: $input-max-width;
+}
+
+textarea {
+  height: 16rem;
+}
+
+select {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-color: $color-white;
+  background-image: asset-url('#{$image-path}/arrow-down.png');
+  background-image: asset-url('#{$image-path}/arrow-down.svg');
+  background-position: right 1.3rem center;
+  background-repeat: no-repeat;
+  background-size: 1.3rem;
+}
+
+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] {
+  margin-left: -2rem;
+  opacity: 0;
+  position: absolute;
+
+  .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.5em;
+}
+
+[type=checkbox] + label::before,
+[type=radio] + label::before {
+  background: $color-white;
+  border-radius: $border-radius;
+  box-shadow: 0 0 0 1px $color-gray-medium;
+  content: '\a0';
+  display: inline-block;
+  height: 1.8rem;
+  line-height: 1.8rem;
+  margin-right: 0.6em;
+  text-indent: 0.15em;
+  vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
+  width: 1.8rem;
+}
+
+[type=radio] + label::before {
+  box-shadow: 0 0 0 2px $color-white, 0 0 0 3px $color-gray-medium;
+  height: 1.6rem;
+  line-height: 1.6rem;
+  width: 1.6rem;
+  border-radius: 100%;
+}
+
+[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=radio]:focus + label::before {
+  box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary, 0 0 3px 4px $color-focus, 0 0 7px 4px $color-focus;
+}
+
+[type=checkbox]:checked + label::before,
+[type=checkbox]:checked:disabled + label::before {
+  background-image: asset-url('#{$image-path}/correct8.png');
+  background-image: asset-url('#{$image-path}/correct8.svg');
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+[type=checkbox]:focus + label::before {
+  box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-primary;
+}
+
+[type=checkbox]:disabled + label {
+  color: $color-gray;
+}
+
+[type=checkbox]:disabled + label::before,
+[type=radio]:disabled + label::before {
+  background: $color-gray-lighter;
+  box-shadow: 0 0 0 1px $color-gray-light;
+  cursor: not-allowed;
+}
+
+// Range inputs
+
+[type=range] {
+  -webkit-appearance: none;
+  border: none;
+  padding-left: 0;
+  width: 100%;
+}
+
+[type=range]:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+[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;
+}
+
+[type=range]:focus::-webkit-slider-thumb {
+  border: 2px solid $color-focus;
+}
+
+[type=range]:focus::-moz-range-thumb {
+  border: 2px solid $color-focus;
+}
+
+[type=range]:focus::-ms-thumb {
+  border: 2px solid $color-focus;
+}
+
+// Memorable dates
+
+.usa-date-of-birth {
+  label {
+    margin-top: 0;
+  }
+
+  [type=number]::-webkit-inner-spin-button,
+  [type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    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/app/assets/stylesheets/uswds/elements/_typography.scss

@@ -0,0 +1,257 @@
+html {
+  font-family: $font-sans;
+  font-size: $em-base;
+}
+
+body {
+  font-size: $base-font-size;
+}
+
+p {
+  line-height: $base-line-height;
+  margin-bottom: 1em;
+  margin-top: 1em;
+}
+
+a {
+  color: $color-primary;
+  text-decoration: underline;
+
+  &:hover,
+  &:active {
+    color: $color-primary-darker;
+  }
+
+  &:visited {
+    color: $color-visited;
+  }
+
+  &:focus {
+    box-shadow: $focus-shadow;
+    outline: 0;
+  }
+}
+
+@mixin external-link($external-link, $external-link-hover) {
+  &::after {
+    background: asset-url('#{$image-path}/#{$external-link}.png') no-repeat 0 0;
+    background: asset-url('#{$image-path}/#{$external-link}.svg') no-repeat 0 0;
+    background-size: 100%;
+    content: '';
+    display: inline-block;
+    height: 0.65em;
+    margin-bottom: -1px;
+    margin-left: 4px;
+    width: 0.65em;
+  }
+
+  &:hover::after {
+    background-image: asset-url('#{$image-path}/#{$external-link-hover}.png');
+    background-image: asset-url('#{$image-path}/#{$external-link-hover}.svg');
+  }
+}
+
+// External link consider "effortless style approach":
+// [href^="http:"]:not([href*="my-domain.com"])
+// [href^="https:"]:not([href*="my-domain.com"])
+
+.usa-external_link {
+  @include external-link(external-link, external-link-hover);
+}
+
+.usa-external_link-alt {
+  @include external-link(external-link-alt, external-link-alt-hover);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  clear: both;
+  font-family: $font-serif;
+  line-height: $heading-line-height;
+  margin-bottom: .5em;
+  margin-top: 1.5em;
+}
+
+h1 {
+  @include h1();
+}
+
+h2 {
+  @include h2();
+}
+
+h3 {
+  @include h3();
+}
+
+h4 {
+  @include h4();
+}
+
+h5 {
+  @include h5();
+}
+
+h6 {
+  @include h6();
+}
+
+// Remove user agent styles
+
+cite,
+var,
+address,
+dfn {
+  font-style: normal;
+}
+
+// Custom typography
+
+.usa-content {
+  p:not(.usa-font-lead),
+  ul:not(.usa-accordion):not(.usa-accordion-bordered),
+  ol:not(.usa-accordion):not(.usa-accordion-bordered) {
+    max-width: $text-max-width;
+  }
+}
+
+.usa-content-list {
+  max-width: $text-max-width;
+}
+
+.usa-sans {
+  p,
+  a,
+  li,
+  span {
+    font-family: $font-sans;
+  }
+
+  a {
+    border-bottom: none;
+    font-weight: $font-bold;
+  }
+}
+
+.usa-serif {
+  p,
+  a,
+  li,
+  span {
+    font-family: $font-serif;
+  }
+}
+
+.usa-display {
+  @include h3();
+  margin-bottom: 0;
+
+  @include media($small-screen) {
+    @include h1();
+  }
+
+  @include media($medium-screen) {
+    @include title();
+  }
+}
+
+.usa-font-lead {
+  font-family: $font-serif;
+  font-size: $lead-font-size;
+  line-height: $lead-line-height;
+  max-width: $lead-max-width;
+}
+
+.usa-image-block {
+  position: relative;
+}
+
+.usa-image-text-block {
+  color: $color-white;
+  left: 0;
+  margin-left: 8%;
+  position: absolute;
+  top: 0;
+}
+
+.usa-image-text {
+  margin-top: 0;
+}
+
+.usa-drop_text {
+  margin-bottom: 0;
+}
+
+.usa-background-dark {
+  background-color: $color-gray-dark;
+
+  p,
+  span {
+    color: $color-white;
+  }
+
+  a {
+    color: $color-gray-lighter;
+
+    &:hover {
+      color: $color-white;
+    }
+  }
+}
+
+.usa-text-small {
+  font-size: $h6-font-size;
+  margin-top: 0;
+}
+
+// Removes top margin from first child and bottom margin from last child on
+// elements when they are within those layout elements.
+.usa-section,
+.usa-grid,
+.usa-grid-full {
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.usa-width-one-whole,
+.usa-width-one-half,
+.usa-width-one-third,
+.usa-width-two-thirds,
+.usa-width-one-fourth,
+.usa-width-three-fourths,
+.usa-width-one-sixth,
+.usa-width-five-sixths,
+.usa-width-one-twelfth {
+  &:first-child {
+    > :first-child {
+      margin-top: 0;
+    }
+  }
+
+  > :first-child {
+    @include media($medium-screen) {
+      margin-top: 0;
+    }
+  }
+
+  &:last-child {
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  > :last-child {
+    @include media($medium-screen) {
+      margin-bottom: 0;
+    }
+  }
+}