caseflow 0.1.5

data/app/assets/stylesheets/caseflow_main.scss

@@ -0,0 +1,1135 @@
+@import 'bourbon';
+@import 'neat';
+@import 'us_web_design_standards';
+@import 'fonts';
+
+$color-black: #000000;
+$caseflow-background: #f9f9f9;
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  padding-bottom: 70px;
+  background: $caseflow-background;
+}
+
+a:visited {
+  color: $color-primary; // Override USWDS
+}
+
+.cf-success {
+  color: $color-green;
+}
+
+.cf-error {
+  color: $color-secondary-dark;
+}
+
+label {
+  font-weight: normal !important;
+  margin-top: 0; // Override USWDS
+}
+
+p {
+  margin-top: rem(20px);
+  margin-bottom: rem(20px);
+}
+
+.cf-doc-embed {
+  width: 100%;
+  height: 80vh;
+}
+
+.cf-notice {
+  padding: 8px 20px;
+  text-align: center;
+  background-color: $color-primary;
+  color: $color-white;
+
+  a {
+    color: $color-white;
+    text-decoration: underline;
+  }
+}
+
+//----------------------------------*
+// Globals, Resets, and overrides
+//-----------------------------------*/
+
+.cf-txt-c {
+  text-align: center;
+}
+
+.cf-txt-r {
+  text-align: right;
+}
+
+.cf-txt-l {
+  text-align: left;
+}
+
+.cf-txt-uc {
+  text-transform: uppercase;
+}
+
+.cf-txt-example {
+  font-style: italic;
+  color: $color-gray;
+  vertical-align: middle;
+}
+
+// Use cf-push-row to wrap elements that float to the left or right
+.cf-push-row {
+  @include clearfix;
+}
+
+.cf-push-left {
+  float: left;
+}
+
+.cf-push-right {
+  float: right;
+}
+
+abbr {
+  border: 0;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  &:not(.usa-alert-heading) {
+    font-family: inherit;
+    margin-top: 0;
+  }
+}
+
+[hidden] {
+  display: none;
+}
+
+legend {
+  display: table; // Causes legend text to wrap in IE
+  font: inherit;
+  white-space: normal;
+}
+
+[disabled],
+[readonly] {
+  background: $color-gray-lightest !important;
+  opacity: .5 !important;
+}
+
+dd {
+  margin-left: 0;
+}
+
+.cf-pos-fixed {
+  position: fixed;
+}
+
+//------------------------------------
+// Icons
+//-----------------------------------*/
+
+[class|=cf-icon] {
+  display: inline-block;
+  height: .8em; // Should be an em
+  margin: 0 .1ex;
+}
+
+.cf-icon-missing {
+  vertical-align: -.15ex;
+  width: .8em;
+
+  path {
+    fill: $color-secondary-dark;
+  }
+}
+
+.cf-icon-found {
+  width: 1em;
+
+  path {
+    fill: $color-green;
+  }
+}
+
+.cf-icon-close {
+  display: block;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+
+  path {
+    fill: $color-gray-light;
+  }
+
+  &:hover {
+    path {
+      fill: $color-gray-dark;
+    }
+  }
+}
+
+.cf-icon-success--bg {
+  background: image-url('icons/icon-check.svg') bottom no-repeat;
+  background-size: auto 2rem;
+  display: inline-block;
+  height: 3rem;
+  width: 3rem;
+}
+
+//--- Appeal button ---*/
+
+.cf-apppeal-id {
+  box-sizing: border-box;
+  background: transparent;
+  border: 2px solid $color-gray;
+  color: $color-gray;
+  padding: 1rem;
+
+  &:hover {
+    color: $color-white;
+    background: $color-gray;
+    border-bottom: 2px solid $color-gray;
+
+    path {
+      fill: $color-white;
+    }
+  }
+}
+
+.cf-icon-appeal-id {
+  display: inline-block;
+  margin-left: .25rem;
+  vertical-align: -1px;
+}
+
+//------ Dropdowns --------*/
+.cf-dropdown {
+  $large-screen: em(640) !default;
+  display: inline-block;
+  position: relative;
+
+  a {
+    color: inherit;
+  }
+}
+
+.cf-dropdown-trigger {
+  cursor: pointer;
+  background-color: $color-white;
+
+  &::after {
+    // CG: This image doesn't appear to exist in any repo (9/20/16)
+    background: image-url('arrow-down.svg') 50% 100% no-repeat;
+    background-size: 100% 100%;
+    content: ' ';
+    display: inline-block;
+    height: 1rem;
+    margin-left: 1rem;
+    width: 1rem;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+// Quick fix to property count lint
+%overlay {
+  background: $color-white;
+  z-index: 1;
+  position: absolute;
+}
+
+.cf-dropdown-menu {
+  @include unstyled-list();
+  @include transition (all 0.2s ease-in-out);
+  @extend %overlay;
+  border: 1px solid $color-gray-lighter;
+  box-shadow: 0 0 10px -3px $color-gray;
+  cursor: pointer;
+  display: none;
+  text-align: left;
+  top: 2em;
+  width: 18rem;
+  padding: rem(10px) rem(20px);
+
+  &.active {
+    display: block;
+  }
+
+  a {
+    display: block;
+  }
+
+  li {
+    padding: rem(10px) 0;
+
+    &:last-child {
+      border-top: 1px solid $color-gray-lighter;
+    }
+  }
+}
+
+//------ Modals --------*/
+
+
+// don't trip the accessibility warning for white on white, even if title isn't visible
+svg title {
+  color: $color-black;
+}
+
+.cf-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  display: none;
+
+  &.active {
+    display: block;
+  }
+
+  &::before {
+    content: ' ';
+    background: rgba($color-black, .4);
+    position: fixed;
+    height: inherit;
+    width: inherit;
+  }
+}
+
+.cf-modal-body {
+  @include transform(translateY(-50%));
+  top: 50%;
+  // Previous two lines vertically center this block
+  background: $color-white;
+  box-shadow: 0 0 2rem -3px rgba($color-base, .8);
+  color: $color-gray;
+  padding: 4.5rem;
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1040px;
+  width: 70%;
+}
+
+.cf-modal-title {
+  font-size: rem(50px);
+  text-align: center;
+}
+
+.cf-modal-close {
+  background: transparent;
+  height: 1.5rem;
+  padding: .1rem;
+  position: absolute;
+  right: rem(20px);
+  top: rem(20px);
+  width: 1.5rem;
+
+  &:hover,
+  &:focus,
+  &:active {
+    background: transparent;
+
+    path {
+      fill: $color-gray-dark;
+    }
+  }
+}
+
+
+.cf-modal-text,
+.cf-modal-controls {
+  margin: auto;
+  width: 70%;
+}
+
+.cf-modal-text {
+  font-size: rem(20px);
+  line-height: 2;
+  text-align: center;
+}
+
+.cf-modal-controls {
+  position: relative;
+  bottom: 0;
+  margin-top: rem(60px);
+}
+
+// ===========================*
+// Application navigation bar  *
+// ============================*/
+.cf-nav {
+  background: $color-white;
+  color: $color-gray;
+  margin: 0;
+  padding: rem(30px) 0;
+  position: relative;
+  border-bottom: 1px solid $color-gray-lighter;
+
+  .usa-grid-full {
+    position: relative;
+  }
+}
+
+.cf-nav-dropdown {
+  position: absolute;
+  right: 0;
+}
+
+
+.cf-nav-whatsnew {
+  &::after {
+    color: $color-secondary-dark;
+    content: '\00A0\2605';
+    display: inline-block;
+    font-size: 1.25rem;
+    vertical-align: 2px;
+  }
+
+  &:hover::after {
+    color: $color-secondary;
+  }
+}
+
+.cf-header-link:hover {
+  h1 { color: $color-gray-light; }
+  text-decoration: none;
+}
+
+.cf-logo {
+  color: $color-gray-dark;
+  margin-right: rem(10px);
+  font-size: 1.7rem;
+  display: inline;
+}
+
+.cf-logo-image {
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: -2px;
+  margin-right: .5em;
+  height: 32px;
+  width: 32px;
+  background-size: 32px;
+}
+
+.cf-application-title {
+  font-size: 1.7rem;
+  font-weight: normal;
+  display: inline;
+}
+
+.cf-app-screen {
+  margin: auto;
+  width: 90%;
+}
+
+.cf-name-header {
+  font-size: 3rem;
+  margin-bottom: 0;
+}
+
+//.cf-app-segment represents a chunk of an application's
+// page Should be an immediate child of .cf-app. Avoid
+// making .cf-app-segment a grandchild element of .cf-app.
+.cf-app-segment {
+  // Clearfix
+  &::before,
+  &::after {
+    content: ' ';
+    display: block;
+    clear: both;
+  }
+
+  &--alt {
+    background: $color-white;
+    border: 1px solid $color-gray-lighter;
+    padding: rem(30px);
+  }
+
+  // Make the top margin larger whenever
+  // cf-app-segment is the first-child
+  &:first-child {
+    margin-top: rem(40px);
+  }
+}
+
+// Adds top margin when .cf-app-segment
+// is preceded by an element
+* + .cf-app-segment {
+  margin-top: rem(30px);
+}
+
+.cf-layout-3-up {
+  border: 1px solid $color-gray-lighter;
+  display: table;
+  width: 100%;
+
+  > * {
+    display: table-cell;
+    padding: 1.5rem;
+    vertical-align: middle;
+    width: 33%;
+  }
+
+  > *:nth-child(even) {
+    border-left: 1px solid $color-gray-lighter;
+    border-right: 1px solid $color-gray-lighter;
+  }
+
+  &-title {
+    color: $color-gray;
+    font-weight: inherit;
+  }
+
+  &-text {
+    font-weight: 600;
+    margin-bottom: 0;
+    margin-top: 1rem;
+  }
+}
+
+.cf-app-footer {
+  @include clearfix;
+  border-top: 1px solid $color-gray-lighter;
+  margin-top: rem(55px);
+  width: 100%;
+
+  > * {
+    padding-top: rem(55px);
+  }
+
+  p {
+    margin: 0;
+  }
+}
+
+
+//-----------------------------------*
+// CSS based on Web Design Guidelines.
+// - Uses Neat.bourbon.io as a grid
+// - Uses patterns and components
+//   from refills.bourbon.io/unstyled/
+//-----------------------------------*/
+
+//===========================
+// Tooltip
+// =========================*/
+
+.cf-tooltip {
+  display: inline-block;
+  position: relative;
+}
+
+.cf-tooltip-trigger {
+  &:hover + .cf-tooltip-text {
+    display: block;
+  }
+}
+
+.cf-tooltip-text {
+  @include transform(translateX(-50%));
+  background: $color-white;
+  box-shadow: 0 0 10px -3px $color-gray;
+  display: none;
+  left: 50%;
+  margin-top: rem(10px);
+  padding: rem(10px);
+  position: absolute;
+  width: rem(300px);
+
+  &::before {
+    @include transform(scaleX(1.2));
+    color: $color-white;
+    content: '\25B2';
+    display: block;
+    font-size: rem(15px);
+    text-align: center;
+    text-shadow: 0 -2px 2px rgba($color-gray, .5);
+    margin-top: rem(-25px);
+    position: relative;
+    z-index: -1;
+  }
+}
+
+//===========================
+// Form controls
+// =========================*/
+
+input,
+[type="text"],
+[type="email"],
+[type="password"],
+[type="url"],
+[type="tel"],
+[type="number"],
+[type="search"],
+[type="file"],
+[type="date"],
+[type="datetime-local"],
+[type="month"],
+[type="time"],
+[type="week"],
+textarea,
+select,
+[type="checkbox"] + label,
+[type="radio"] + label {
+  margin-bottom: 0;
+}
+
+// Overrides USWDS */
+textarea {
+  max-width: 100% !important;
+}
+
+// Overrides USWDS */
+form {
+  max-width: none !important;
+}
+
+.hidden-field {
+  display: none;
+}
+
+//------ Buttons --------*/
+// I hate using !important, but web design standards
+// form buttons have high specificity.
+// Keep an eye on https://github.com/18F/web-design-standards/issues/891
+[type="submit"],
+[type="button"],
+.usa-button {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-right: rem(20px);
+
+  &:last-child {
+    margin-right: 0 !important;
+  }
+}
+
+// Make a button look like a link */
+.cf-btn-link {
+  background: transparent;
+  color: $color-primary;
+  display: inline-block;
+  font-weight: normal;
+  line-height: 1;
+  // I hate using !important, but web design standards
+  // form buttons have high specificity.
+  // Keep an eye on https://github.com/18F/web-design-standards/issues/891
+  -webkit-font-smoothing: inherit;
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+
+  &:visited {
+    color: $color-primary;
+  }
+
+  // Removes padding, so that these links can be placed inline.
+  &--inline {
+    padding: 0 !important;
+  }
+
+  &:hover {
+    background-color: inherit;
+    color: $color-primary-darker;
+    text-decoration: underline;
+  }
+
+  &--confirm {
+    &:visited {
+      color: $color-secondary-dark;
+    }
+
+    color: $color-secondary-dark;
+    font-weight: bold;
+  }
+
+  &--cancel {
+    display: inline-block;
+    font-weight: bold;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+
+.cf-btn-help {
+  background: transparent;
+  margin: 0;
+  padding: 0;
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+//--- Table styles ---*/
+.cf-table-wrap {
+  width: 100%;
+  overflow-x: auto;
+
+  table {
+    min-width: rem(400px);
+    width: 100%;
+  }
+}
+
+// Overrides table th, table td classes
+// from web design standards
+.cf-table-borderless {
+  th,
+  td {
+    border-width: 0;
+  }
+
+  tr {
+    border-bottom: 2px solid $color-gray-lightest;
+  }
+}
+
+//------ Dropdowns --------*/
+.cf-dropdown {
+  $large-screen: em(640) !default;
+  display: inline-block;
+
+  a {
+    color: inherit;
+  }
+}
+
+.cf-dropdown-trigger {
+  cursor: pointer;
+  background-color: $color-white;
+
+  &::after {
+    // CG: This image doesn't appear to exist in any repo (9/20/16)
+    background: image-url('arrow-down.svg') 50% 100% no-repeat;
+    background-size: 100% 100%;
+    content: ' ';
+    display: inline-block;
+    height: 1rem;
+    margin-left: 1rem;
+    width: 1rem;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+// Quick fix to property count lint
+%overlay {
+  background: $color-white;
+  z-index: 1;
+  position: absolute;
+}
+
+.cf-dropdown-menu {
+  @include unstyled-list();
+  @include transition (all 0.2s ease-in-out);
+  @extend %overlay;
+  border: 1px solid $color-gray-lighter;
+  box-shadow: 0 0 10px -3px $color-gray;
+  cursor: pointer;
+  display: none;
+  text-align: left;
+  top: 2em;
+  width: 18rem;
+  padding: rem(10px) rem(20px);
+
+  &.active {
+    display: block;
+  }
+
+  a {
+    display: block;
+  }
+
+  li {
+    padding: rem(10px) 0;
+
+    &:last-child {
+      border-top: 1px solid $color-gray-lighter;
+    }
+  }
+}
+
+// ===========================*
+// Form-related states
+// ============================*/
+
+.required {
+  strong,
+  b {
+    &::after {
+      content: '* ';
+      color: $color-secondary-dark;
+      font-family: inherit;
+      font-weight: bold;
+      font-style: normal;
+    }
+  }
+
+  &-msg {
+    @extend .usa-input-error-message;
+
+    &::before {
+      content: '* ';
+    }
+  }
+}
+
+.cf-form {
+  header {
+    border-bottom: 1px solid $color-gray-lighter;
+    margin-bottom: rem(30px);
+  }
+
+  .cf-btn-forward {
+    display: inline-block;
+    margin-right: 0;
+  }
+}
+
+.cf-required {
+  color: $color-secondary;
+}
+
+.cf-subtext {
+  color: $color-gray;
+}
+
+.cf-characters-left {
+  color: $color-gray;
+  font-size: 0.9em;
+  font-style: italic;
+  height: 1em;
+}
+
+.cf-loading-indicator {
+  display: none;
+  background-color: $color-white;
+  border-radius: 5px;
+  padding: 0.4rem 2.7em;
+  svg { vertical-align: middle; }
+}
+
+.cf-is-loading {
+  .cf-submit {
+    display: none;
+  }
+
+  .cf-loading-indicator {
+    display: block;
+  }
+}
+
+fieldset {
+  margin-top: rem(20px);
+  margin-bottom: rem(20px);
+
+  > *,
+  .cf-form-textinput {
+    margin-bottom: 0;
+  }
+}
+
+* + .cf-form-textinput {
+  @include clearfix;
+  margin-top: rem(20px);
+  margin-bottom: rem(20px);
+}
+
+.cf-form-textarea {
+  clear: both;
+  max-width: rem(455px);
+}
+
+// Wrapping element for each option */
+.cf-form-radio-options {
+  @include clearfix;
+  margin-top: rem(10px);
+}
+
+.cf-form-radio-option {
+  @include clearfix;
+  margin-bottom: rem(20px);
+
+  label {
+    margin-bottom: 0 !important;
+  }
+}
+
+.cf-form-radio-inline {
+  .cf-form-radio-option {
+    float: left;
+    padding-right: rem(30px);
+    margin-bottom: 0;
+  }
+}
+
+.cf-form-checkboxes.usa-grid-full {
+  margin-bottom: 0;
+}
+
+.cf-form-checkboxes,
+.cf-form-cond-req {
+  margin-top: rem(20px);
+  margin-bottom: rem(20px);
+}
+
+.cf-form-checkbox {
+  &:not(:last-child) {
+    margin-bottom: rem(10px);
+  }
+}
+
+.usa-input-error {
+  [type="radio"] + label::before {
+    box-shadow: 0 0 0 2px $color-white, 0 0 0 4px $color-secondary-dark, 0 0 3px 4px $color-secondary, 0 0 7px 4px $color-secondary-dark;
+  }
+}
+
+//========================
+// Certified success page
+//==========================*/
+.cf-app-msg-screen {
+  color: $color-gray;
+}
+
+.cf-msg-screen-heading {
+  font-size: rem(52px);
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+// "deck" is newspaper speak for "subhead"
+.cf-msg-screen-deck {
+  text-align: center;
+  font-size: rem(20px);
+  font-weight: normal;
+  color: $color-gray;
+  line-height: 1.5;
+  margin-left: auto;
+  margin-right: auto;
+  // TODO: Refactor h1,h2,h3,h4,h5,h6 { &:not(.usa-alert-heading)}
+  // so that we don't have to use !important here.
+  margin-bottom: rem(65px) !important;
+  margin-top: rem(15px) !important;
+  width: 65%;
+}
+
+.cf-msg-screen-text {
+  width: 65%;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.cf-list-checklist {
+  list-style-type: none;
+  margin: 5rem auto 6.5rem;
+  position: relative;
+  width: 50%;
+
+  li::before {
+    content: '';
+  }
+
+  .cf-icon-success--bg {
+    font-size: 2.5rem;
+    margin-right: 1.8rem;
+  }
+}
+
+.cf-login-input {
+  display: inline !important;
+}
+
+[id=username_input_id] ~ .cf-txt-example {
+  margin-left: rem(20px);
+}
+
+//------------------------------
+// Help page
+// -------------------------------
+[id=help-page] {
+  dt {
+    font-weight: bold;
+    font-size: 1.1em;
+    margin: 3rem auto 0;
+  }
+
+  p {
+    margin-top: 0;
+  }
+
+  img {
+    box-shadow: 0 0 20px -5px rgba($color-black, .5);
+    clear: both;
+    display: block;
+    margin: 2rem;
+    max-width: 60rem;
+    height: auto;
+  }
+}
+
+.cf-help-image-wrapper {
+  text-align: center;
+}
+
+.cf-help-image {
+  max-width: 50%;
+  height: auto;
+}
+
+//---------------------------
+// Date picker overrides
+//----------------------------*/
+.ui-datepicker {
+  background: $caseflow-background;
+  box-shadow: 0 0 30px rgba($color-base, .8);
+
+  &-header {
+    background: $color-gray;
+    color: $color-white;
+    text-align: center;
+    padding: 1rem;
+    position: relative;
+    width: 100%;
+  }
+
+  &-title {
+    font-weight: bold;
+  }
+
+  &-prev,
+  &-next {
+    color: $color-white;
+    cursor: pointer;
+    font-size: .85em;
+    line-height: 1.6;
+    position: absolute;
+
+    &:hover {
+      color: $color-white;
+    }
+  }
+
+  &-prev {
+    left: 1rem;
+  }
+
+  &-next {
+    right: 1rem;
+  }
+
+  &-calendar {
+    margin: 0;
+
+    th {
+      background: $color-gray-light;
+      color: $color-gray-dark;
+      padding: 1rem;
+      border-color: $color-gray;
+
+      &:first-child {
+        border-left-color: $color-gray-light;
+      }
+
+      &:last-child {
+        border-right-color: $color-gray-light;
+      }
+    }
+
+    td {
+      background: $caseflow-background;
+      border-color: $color-gray-light;
+      padding: 0;
+      text-align: right;
+    }
+
+    .ui-state-default {
+      display: block;
+      padding: 1rem;
+    }
+  }
+}
+
+.cf-icon-missing {
+  vertical-align: -.45ex;
+  width: .8em;
+  height: 1em;
+
+  path {
+    fill: $color-secondary-dark;
+  }
+}
+
+.cf-icon-found {
+  vertical-align: -.45ex;
+  width: 1em;
+  height: 1em;
+
+  path {
+    fill: $color-green;
+  }
+}
+
+.cf-icon-alert {
+  margin-right: .25em;
+  vertical-align: -.25ex;
+  width: 1em;
+  height: 1em;
+
+  path {
+    fill: $color-secondary;
+  }
+}
+
+.icon-loading-front {
+  @include animation(backwardspin 9s linear infinite);
+}
+
+.icon-loading-back {
+  @include animation(spin 9s linear infinite);
+  margin-left: -33px;
+}
+
+@include keyframes(spin) {
+  from {
+    @include transform(rotate(0deg));
+  }
+
+  to {
+    @include transform(rotate(360deg));
+  }
+}
+
+@include keyframes(backwardspin) {
+  from {
+    @include transform(scale(1) rotate(-30deg));
+  }
+
+  to {
+    @include transform(scale(1) rotate(-390deg));
+  }
+}
+
+@import 'tabs';
+@import 'stats';