us_web_design_standards 0.0.0 → 0.0.2

data/app/assets/stylesheets/elements/_figure.scss

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

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

@@ -0,0 +1,328 @@
+// Block form elements
+input,
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="url"],
+input[type="tel"],
+input[type="number"],
+input[type="search"],
+input[type="file"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+textarea,
+select  {
+  border: 1px solid $color-gray;
+  border-radius: 0;
+  box-sizing: border-box;
+  color: #000; // standardize on firefox 
+  display: block;
+  font-size: $base-font-size;
+  margin: .2em 0;
+  max-width: $input-max-width;
+  width: 100%;
+  outline: none;
+  padding: 1rem .7em;
+  appearance: none;
+
+  &:focus, 
+  &.usa-input-focus {
+    box-shadow: $focus-shadow;
+  }
+
+  &.usa-input-success {
+    border: 3px solid $color-green-light;
+  }
+}
+
+.usa-input-error {
+  border-left: 4px solid $color-secondary-dark;
+  margin-top: 3rem;
+  padding: {
+    bottom: .8rem;
+    left: 1.5rem;
+    top: .8rem;
+  }
+  position: relative;
+  right: 1.9rem;
+  
+  input {
+    border: 3px solid $color-secondary-dark;
+    width: calc(100% + 1.5rem);
+  }
+  
+  label {
+    margin-top: 0;
+  }
+}
+
+.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;
+    top: 3px;
+  }
+}
+
+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: url('../img/arrow-down.png');
+  background-image: url('../img/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: #757575;
+  font-family: $font-sans;
+  margin-bottom: 0;
+}
+
+/**
+ * Custom checkboxes
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  @include sr-only();
+
+  .lt-ie9 & {
+    border: 0;
+    float: left;
+    margin: .4em .4em 0 0;
+    position: static;
+    width: auto;
+  }
+}
+
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+  cursor: pointer;
+  font-weight: 400;
+  margin-bottom: 0.5em;
+}
+
+input[type="checkbox"] + label::before,
+input[type="radio"] + label::before {
+  background: white;
+  border-radius: $border-radius;
+  box-shadow: 0 0 0 1px #757575;
+  content: '\a0';
+  display: inline-block;
+  height: 1.8rem;
+  line-height: .8;
+  margin-right: .6em;
+  text-indent: .15em;
+  vertical-align: .2em;
+  width: 1.8rem;
+}
+
+input[type="radio"] + label::before {  
+  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #757575;
+  height: 1.6rem;  
+  width: 1.6rem;  
+}
+
+input[type="radio"] + label::before {
+  border-radius: 100%;
+}
+
+input[type="checkbox"]:checked + label::before,
+input[type="radio"]:checked + label::before {
+  background-color: $color-primary;
+  box-shadow: 0 0 0 1px $color-primary;
+}
+
+input[type="radio"]:checked + label::before {
+  box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-primary; 
+}
+
+input[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;
+}
+
+input[type="checkbox"]:checked + label::before {
+  background-image: url('../img/correct8.png');
+  background-image: url('../img/correct8.svg');
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+input[type="checkbox"]:focus + label::before {
+  box-shadow: 0 0 0 1px $color-white, 0 0 0 3px $color-primary;
+}
+
+input[type="checkbox"]:disabled + label {
+  color: $color-gray;
+}
+
+input[type="checkbox"]:disabled + label::before,
+input[type="radio"]:disabled + label::before {
+  background: $color-gray-lighter;
+  box-shadow: 0 0 0 1px $color-gray-light;
+  cursor: not-allowed;
+}
+
+// Range inputs
+
+input[type=range] {
+  -webkit-appearance: none;
+  border: none;
+  padding-left: 0;
+  width: 100%;
+}
+
+input[type=range]:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  background: #bdbdbd;
+  border: 1px solid #757575;
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+input[type=range]::-moz-range-track {
+  background: $color-primary;
+  border: 1px solid #757575;
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+input[type=range]::-ms-track {
+  background: transparent;
+  color: transparent;
+  cursor: pointer;
+  height: 1.2rem;
+  width: 100%;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: 1px solid #757575;
+  height: 2.2rem;
+  border-radius: 1.5rem;
+  background: #eeeeee;
+  cursor: pointer;
+  margin-top: -.65rem;  
+  width: 2.2rem;
+}
+
+input[type=range]::-moz-range-thumb {
+  background: #eeeeee;
+  border: 1px solid #757575;
+  border-radius: 1.5rem;
+  cursor: pointer;
+  height: 2.2rem;
+  width: 2.2rem;
+}
+
+input[type=range]::-ms-thumb {
+  background: #eeeeee;
+  border: 1px solid #757575;
+  border-radius: 1.5rem;
+  cursor: pointer;
+  height: 2.2rem;
+  width: 2.2rem;
+}
+
+input[type=range]::-ms-fill-lower {
+  background: #bdbdbd;
+  border: 1px solid #757575;
+  border-radius: 2rem;
+}
+
+input[type=range]::-ms-fill-upper {
+  background: #bdbdbd;
+  border: 1px solid #757575;
+  border-radius: 2rem;
+}
+
+input[type=range]:focus::-webkit-slider-thumb {
+  border: 2px solid $color-focus;
+}
+
+input[type=range]:focus::-moz-range-thumb {
+  border: 2px solid $color-focus;
+}
+
+input[type=range]:focus::-ms-thumb {
+  border: 2px solid $color-focus;
+}
+
+// Memorable dates
+
+.usa-date-of-birth {
+  label {
+    margin-top: 0;
+  }
+
+  input[type=number]::-webkit-inner-spin-button, 
+  input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0; 
+  }
+
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+}
+
+.usa-form-group-day, 
+.usa-form-group-month, 
+.usa-form-group-year {
+  float: left;
+  clear: none;
+  margin-right: 1.5rem;
+  width: 5rem;
+}
+
+.usa-form-group-year {
+  width: 7rem;
+}

data/app/assets/stylesheets/elements/_labels.scss

@@ -0,0 +1,39 @@
+.usa-label {
+  background-color: $color-primary;
+  border-radius: $border-radius;
+  color: $color-white;
+  font-size: $h5-font-size;
+  margin-right: .5rem;
+  padding: {
+    bottom: 0.1rem;
+    left: 0.7rem;
+    right: 0.7rem;
+    top: 0.3rem;
+  }
+  text-transform: uppercase;
+
+  &:only-of-type {
+    margin-right: 0;
+  }
+}
+
+.usa-label-big {
+  @extend .usa-label;
+  font-size: $base-font-size;
+  padding: {
+    left: .9rem;
+    right: .9rem;
+  }
+}
+
+a {
+  &.usa-label {
+    border-bottom: none;
+
+    &:hover {
+      background-color: $color-primary-darker;
+      border-bottom: none;
+      color: $color-white;
+    }
+  }
+}

data/app/assets/stylesheets/elements/_list.scss

@@ -0,0 +1,82 @@
+ul, ol {
+  margin: {
+    top: 2em;
+    bottom: 2em;
+  }
+
+  li {
+    line-height: $base-line-height;
+    margin: {
+      top: .75em;
+      bottom: .75em;
+    }
+  }
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  + ul,
+  + ol {
+    margin: {
+      top: 0;
+    }
+  }
+}
+
+ul, ol {
+  list-style: none;
+  padding-left: 0;
+  display: table;
+
+  li:after {
+    content: "";
+    display: block;
+    margin-bottom: 0.5em;
+  }
+}
+
+ul li {
+  display: table-row;
+
+  &:before {
+    content: "•";
+    display: table-cell;
+    padding-right: 0.4em;
+  }
+}
+
+ol li {
+  display: table-row;
+  counter-increment: table-ol;
+
+  &:before {
+    content: counter(table-ol) ".";
+    display: table-cell;
+    padding-right: 0.4em;
+    text-align: right;
+  }
+}
+
+li {
+  margin-bottom: 0.5em;
+}
+
+// Unstyled lists
+
+.usa-unstyled-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  li {
+    display: list-item;
+    margin: 0;
+
+    &:before {
+      display: none;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+}