common/typography

csss

html

Setting root sizes and base styles.

  text-size-adjust: 100%;
  @include rootsize();

body

Site-wide font family, size and line-height.

  color: $color-body;
  font-family: $body__font-family;
  @include fontsize(zeta, all);
  font-style: normal;
  font-weight: $body__font-weight--normal;
  line-height: 2rem;

.spark-alt

Alternate body color

  color: $color-body--alt;

.spark-info

Info text

  color: $color-state-info;

.spark-success

Success text

  color: $color-state-success;

.spark-warning

Warning text

  color: $color-state-warning;

.spark-danger

Danger text

  color: $color-state-danger;

button, input

Set the default font on things which don't like to use the body style.

  font-family: $body__font-family;

p

Paragraphs. OpenType ligatures and oldstyle figures enabled if available.

  font-feature-settings: 'kern' 1, 'liga' 0;
  @include fontsize(zeta, all);
  line-height: 2rem;
  margin-bottom: 2rem;

  &:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }

h1, h2, h3, h4

Large headings should be slate, bold and use a serif font. OpenType ligatures, discretionary ligatures and lining figures enabled if available.

  color: $color-heading;
  font-family: $heading__font-family;
  font-feature-settings: 'dlig' 0, 'liga' 0, 'lnum' 1, 'kern' 1;
  font-style: normal;
  font-weight: $heading__font-weight--light;
  margin-bottom: 1rem;

h5, h6

Smaller headings use the body font and aren't bold.

  font-family: $body__font-family;
  font-weight: $heading__font-weight--normal;
  margin-bottom: 1rem;

.spark-display-title

A display title. Bigger than the default h1.

  @include fontsize(alpha, xs, false, true);
  @include fontsize(mega, sm, false, true);
  @include fontsize(mega, xl, false, true);

b, strong, .spark-bold

Bold type

  font-weight: $body__font-weight--bold;

em, i, .spark-italic

Italic type

  font-style: italic;

caption, .spark-caption

Deprecated!

Remove in 2.0.0

Caption

  @include fontsize(eta, all);
  font-family: $heading__font-family;
  font-style: normal;
  font-weight: $heading__font-weight--normal;

small, .spark-small

Small body copy

  @include fontsize(eta, all, true);

.spark-large

Large body copy

  @include fontsize(epsilon, all, true);

.spark-thin

Text with a light weight.

  font-weight: $body__font-weight--thin;

.spark-caption

Deprecated!

Remove in 2.0.0

Caption

  color: $color-caption;
  @include fontsize(theta, all);
  line-height: 2rem;
  margin-bottom: 2rem;

h1 + .spark-caption, .spark-alpha + .spark-caption, h2 + .spark-caption, .spark-beta + .spark-caption, h3 + .spark-caption, .spark-gamma + .spark-caption

Nest captions a bit closer to the three primary headings.

  margin-top: -1rem;

.spark-delta + .spark-caption, .spark-epsilon + .spark-caption, .spark-zeta + .spark-caption

Captions that follow a smaller heading shouldn't have a top margin.

  margin-top: 0rem;

ul, ol

Unordered and ordered lists

  @include fontsize(zeta, all);
  line-height: 2rem;
  list-style-type: none;
  margin-bottom: 2rem;
  margin-left: 1.5rem;

  li {
    font-feature-settings: 'kern' 1, 'onum' 1, 'liga' 1;
    list-style-type: none;
    margin-left: 0;

    @include media-breakpoint-only(sm) {
      margin-left: 0;
    }
  }

blockquote

Blockquote

  p {
    font-style: italic;
    padding-left: 1rem;
  }

  @include media-breakpoint-only(sm) {
    margin-left: -1rem;
  }

hr

Horizontal rule

  background-color: $color-caption;
  border: 0;
  height: 1px;
  margin: 3rem 0;
  padding: 0;

.spark-upper

Deprecated!

Remove in 2.0.0. Duplicate of .spark-caps.

Uppercased text. Track out the letter spacing.

  letter-spacing: 0.1rem;
  text-transform: uppercase;

.spark-underline

Underline text

  text-decoration: underline;

.spark-serif

Serif type

  font-family: $heading__font-family;

.spark-caps

Capital letters

  text-transform: uppercase;

.spark-small-caps

Small capital letters

  font-feature-settings: 'smcp' 1, 'kern' 1;
  letter-spacing: 0.1rem;

.spark-numerals

Display numerals

  @include fontsize(gamma, all);
  font-weight: $heading__font-weight--normal;
  line-height: 2.5rem;

.spark-lining-numerals

Consistent height numbers with OpenType.

  font-feature-settings: 'lnum' 1, 'kern' 1;

.spark-oldstyle-numerals

Ascending and descending numbers with OpenType.

  font-feature-settings: 'onum' 1, 'kern' 1;

.spark-text-center

Align the text to the center

  text-align: center;

.spark-text-left

Align the text to the left

  text-align: left;

.spark-text-right

Align the text to the right

  text-align: right;

components

csss

.spark-form--horizontal

A horizontal form treatment

  // No bottom border for inputs
  .spark-select,
  .spark-text-input {
    margin-bottom: 0;
  }

  // Tighten up columns
  [class^='col-'],
  [class*=' col-'] {
    padding-right: 0;
  }

.spark-form--horizontal

On the xs breakpoint the horizontal form becomes vertical again

  // Inputs fill the width and have a margin bottom again
    .spark-select,
    .spark-text-input {
      margin-bottom: 1rem;
      width: 100%;
    }

    // Loosen up columns
    [class^='col-'],
    [class*=' col-'] {
      padding-right: 1rem;
    }

components/button

csss

.spark-btn

Default button. Considered to be the "medium" button. However, applying the .spark-btn--md class is necessary or else no "corner pocket" is added to the button.

  background-color: $btn--default__background-color;
  border: $btn--default__border;
  border-radius: $btn__border-radius;
  color: $btn--default__color;
  cursor: pointer;
  display: inline-block;
  @include fontsize($btn--default__font-size, all);
  font-family: $body__font-family;
  -webkit-font-smoothing: antialiased;
  font-weight: $btn--default__font-weight;
  line-height: 1em;
  overflow: hidden;
  padding: 1.75rem 3.25rem;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  transition-duration: 100ms;
  transition-property: background-color, color, border-color, box-shadow;
  transition-timing-function: ease-in-out;
  white-space: nowrap;

  // Stick the box shadow in a before element so it can go on top of the "pocket" if it exists
  &:not(.spark-btn--icon)::before {
    box-shadow: $btn--default__box-shadow;
    content: '';
    display: inline-block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: top 100ms $ease-in-out-quint;
    width: 100%;
    z-index: 5;
  }

  // Hover state
  &.hover,
  &:hover {
    background-color: $btn--default--hover__background-color;
    color: $btn--default--hover__color;
  }

  // When button has focus, set the focus padding to override anchor styles
  &.focus,
  &:focus {
    box-shadow: $btn--default--focus__box-shadow;
    outline: 0;
  }

  // Only specify bottom padding for actual focus states. Doing it above for the focus class
  // messes up with an anchor tag for some reason.
  &:focus{
    padding-bottom: 1.75rem;
  }

  // When the button is active
  &.active,
  &:active {
    background-color: $btn--default--active__background-color;
    border: $btn--default--active__border;
    box-shadow: none !important;
    color: $btn--default--active__color;

    // Slide the box shadow down
    &::before {
      top: 2px;
    }
  }

  // Disabled state. Should also kill hover stuff.
  &:disabled,
  &.disabled,
  &:disabled:hover,
  &.disabled:hover {
    background-color: $btn--default--disabled__background-color;
    border: $btn--default--disabled__border;
    color: $btn--default--disabled__color;
    cursor: not-allowed;
    box-shadow: none;

    &::before {
      box-shadow: none;
    }
  }

  // Remove inner focus dotted line from Firefox
  &::-moz-focus-inner {
    border: 0;
    outline: 0;
  }

.spark-btn__icon

Icons should go first and have some spacing

  margin-right: .25rem;
  line-height: .75rem;

.spark-btn--lg

A large button

  @include fontsize($btn--default__font-size--large, all);
  font-family: $heading__font-family;
  font-weight: $heading__font-weight--light;
  line-height: 1em;
  padding: 1.75rem 2.625rem;
  text-transform: uppercase;

  // Set the focus padding (to override anchor styles)
  &:focus {
    padding-bottom: 1.75rem;
  }

.spark-btn--sm, .spark-btn--xs

A small or extra small button

  // Shift the bottom border down 1px so it seems only 1px high. Easier
  // than rewriting the box shadow for each color variation of sm and xs buttons.
  &::before {
    top: 1px;
  }

  // Add the default glow on focus
  &:focus {
    box-shadow: $btn--default--focus__box-shadow--small;
  }

  // Add a glow that corresponds to the secondary color on focus
  &.spark-btn--secondary {
    &:focus {
      box-shadow: $btn--secondary--focus__box-shadow--small;
    }
  }

  // Add a glow that corresponds to the view more color on focus
  &.spark-btn--view-more {
    &::before {
      box-shadow: none;
    }
    &:focus {
      box-shadow: $btn--view-more--focus__box-shadow--small;
    }
  }

  // Add a glow that corresponds to the alternate color on focus
  // @deprecated Remove in 2.0.0
  &.spark-btn--alt {
    &:focus {
      box-shadow: $btn--alt--focus__box-shadow--small;
    }
  }

.spark-btn--sm

A small button

  padding: .75rem 2.25rem;

  // Set the focus padding (to override anchor styles)
  &:focus {
    padding-bottom: .75rem;
  }

.spark-btn--xs

An extra small button

  @include fontsize($btn--default__font-size--small, all);
  padding: .5rem 1rem;

  // Set the focus padding (to override anchor styles)
  &:focus {
    padding-bottom: .5rem;
  }

.spark-btn--brand

A primary colored brand button

  background-color: $btn--brand__background-color;
  border: $btn--brand__border;

  // Color the bottom border
  &::before {
    box-shadow: $btn--brand__box-shadow;
  }

  // Change text color on hover
  &.hover,
  &:hover {
    background-color: $btn--brand__background-color;
    color: $btn--default__color;
  }

  // Add a glow on focus
  &.focus,
  &:focus {
    box-shadow: $btn--brand--focus__box-shadow;
  }

  // Darken the border when active
  &.active,
  &:active {
    border: $btn--brand--active__border;
  }

.spark-btn--secondary

A secondary button

  background-color: $btn--secondary__background-color;
  border: $btn--secondary__border;
  color: $btn--secondary__color;

  // Corresponding bottom border color
  &::before {
    box-shadow: $btn--secondary__box-shadow;
  }

  // Darken on hover
  &.hover,
  &:hover {
    background-color: $btn--secondary--hover__background-color;
    border: $btn--secondary--hover__border;
    color: $btn--secondary--hover__color;

    &::before {
      box-shadow: $btn--secondary--hover__box-shadow;
    }
  }

  // Glow on focus
  &.focus,
  &:focus,
  &.focus:hover,
  &:focus:hover {
    box-shadow: $btn--secondary--focus__box-shadow;
  }

  // Darken further when active
  &.active,
  &:active,
  &.active:hover,
  &:active:hover {
    background-color: $btn--secondary--active__background-color;
    border: $btn--secondary--active__border;
    color: $btn--secondary--active__color;

    &::before {
      box-shadow: $btn--secondary--active__box-shadow;
    }
  }

.spark-btn--view-more

A view-more button

  background-color: $btn--view-more__background-color;
  border: $btn--view-more__border;
  box-shadow: $btn--view-more__box-shadow;
  color: $btn--view-more__color;
  margin: 4px;
  min-width: 200px;
  text-align: center;

  // Corresponding bottom border color
  &::before {
    box-shadow: none;
  }

  // Darken on hover
  &.hover,
  &:hover {
    background-color: $btn--view-more--hover__background-color;
    border: $btn--view-more--hover__border;
    box-shadow: $btn--view-more--hover__box-shadow;
    color: $btn--view-more--hover__color;

    &::before {
     box-shadow: none;
   }
 }

  // Glow on focus
  &.focus,
  &:focus,
  &.focus:hover,
  &:focus:hover {
      box-shadow: $btn--view-more--focus__box-shadow;
  }

  // Darken further when active
  &.active,
  &:active,
  &.active:hover,
  &:active:hover {
    background-color: $btn--view-more--active__background-color;
    border: $btn--view-more--active__border;
    box-shadow: $btn--view-more--active__box-shadow;
    color: $btn--view-more--active__color;

    &::before {
      box-shadow: none;
    }
  }

.spark-btn--alt

Deprecated!

Remove in 2.0.0

An alternate button treatment

  background-color: $btn--alt__background-color;
  border: $btn--alt__border;
  color: $btn--alt__color;

  // Corresponding bottom border color
  &::before {
    box-shadow: $btn--alt__box-shadow;
  }

  // Darken on hover
  &.hover,
  &:hover {
    background-color: $btn--alt--hover__background-color;
    border: $btn--alt--hover__border;
    color: $btn--alt--hover__color;

    &::before {
      box-shadow: $btn--alt--hover__box-shadow;
    }
  }

  // Glow on focus
  &.focus,
  &:focus,
  &.focus:hover,
  &:focus:hover {
    box-shadow: $btn--alt--focus__box-shadow;
  }

  // Darken further when active
  &.active,
  &:active,
  &.active:hover,
  &:active:hover {
    background-color: $btn--alt--active__background-color;
    border: $btn--alt--active__border;
    color: $btn--alt--active__color;

    &::before {
      box-shadow: $btn--alt--active__box-shadow;
    }
  }

.spark-btn--negative

A negative button treatment

  background-color: $btn--negative__background-color;
  border: $btn--negative__border;
  color: $btn--negative__color;

  // Corresponding bottom border color
  &:not(.spark-btn--icon)::before {
    box-shadow: $btn--negative__box-shadow;
  }

  // Remove box shadow when disabled
  &.disabled::before,
  &:disabled::before,
  &.disabled:hover::before,
  &:disabled:hover::before {
    box-shadow: none;
  }

  // Darken on hover
  &.hover,
  &:hover {
    background-color: $btn--negative--hover__background-color;
    border: $btn--negative--hover__border;
    color: $btn--negative--hover__color;

    &::before {
      box-shadow: $btn--negative--hover__box-shadow;
    }
  }

  // Glow on focus
  &.focus,
  &:focus,
  &.focus:hover,
  &:focus:hover {
    box-shadow: $btn--negative--focus__box-shadow;
  }

  // Darken further when active
  &.active,
  &:active,
  &.active:hover,
  &:active:hover {
    background-color: $btn--negative--active__background-color;
    border: $btn--negative--active__border;
    color: $btn--negative--active__color;

    &::before {
      box-shadow: $btn--negative--active__box-shadow;
    }
  }

.spark-btn--text, .spark-btn--icon

Text and icon buttons

  background-color: transparent;
  border: none;
  font-weight: 700;
  padding: 0;

.spark-btn--text

A button that looks like highlight text

  color: $btn--text__color;

  // No bottom border
  &:not(.spark-btn--icon)::before {
    box-shadow: none;
  }

  // Darken on hover
  &.hover,
  &:hover {
    color: $btn--text--hover__color;
  }

  // Change color when focused
  &.focus,
  &:focus,
  &.focus:hover,
  &:focus:hover {
    color: $btn--text__color;
    padding-bottom: 0;
  }

  // Don't add an active border
  &:active {
    border: none;
  }

  // No background color or border like a normal button
  &:hover,
  &.hover,
  &.focus,
  &:focus,
  &.focus:hover,
  &:focus:hover,
  &.disabled,
  &:disabled,
  &.disabled:hover,
  &:disabled:hover {
    background-color: transparent;
    border: none;
  }

  // Small text buttons should maintain their size
  &.spark-btn--sm {
    @include fontsize(eta);
  }

.spark-btn--icon.spark-icon

A button that is an icon

  background-color: $btn--icon__background-color;
  border-radius: $btn--icon__border-radius;
  border: $btn--icon__border;
  color: $btn--icon__color;
  cursor: pointer;
  @include fontsize($btn--icon__font-size);
  line-height: 2rem;
  padding: .5rem;
  transition-duration: 250ms;
  transition-property: border-color, color, background-color;

  &:focus,
  &.focus {
    border: $btn--icon--focus__border;
    outline: none;
  }

  &:hover,
  &.hover {
    background-color: $btn--icon--hover__background-color;
    color: $btn--icon--hover__color;
  }

  &:active,
  &.active {
    background-color: $btn--icon--active__background-color;
    border: $btn--icon--active__border;
    color: $btn--icon--active__color;
  }

  &:disabled,
  &.disabled,
  &:disabled:hover,
  &.disabled:hover {
    background-color: transparent;
    color: $btn--icon--disabled__color;
    cursor: not-allowed;
  }

.spark-btn--lg, .spark-btn--md

Large and medium buttons have a corner pocket

  overflow: hidden;
  z-index: 5;

  // A little sliver of darker color
  &::after {
    content: '';
    display: inline-block;
    height: 1500px;
    position: absolute;
    transition-duration: 100ms;
    transition-property: transform;
    transition-timing-function: $ease-in-out-quint;
    width: 1500px;
    z-index: -5;
  }

  // Default button color
  &.spark-btn {
    &::before {
      box-shadow: $btn--default__box-shadow;
    }

    // A little sliver of darker color
    &::after{
      background-color: $btn--default--hover__background-color;
    }

    // On active, slide the pocket all the way up.
    &.active,
    &:active,
    &.active:hover,
    &:active:hover {
      background-color: $btn--default--active__background-color;

      &::after {
        background-color: $btn--default--active__background-color;
      }
    }

    // On hover, slide the pocket up a bit.
    &.hover,
    &:hover {
      background-color: $btn--default__background-color;

      &::after {
      }
    }
  }

  // No pocket for secondary stuff
  &.spark-btn--secondary {
    &::before {
      box-shadow: $btn--secondary__box-shadow;
    }

    // Don't show any "corner pockets"
    &::after {
      display: none;
    }

    // Don't change the background color on hover
    &.focus,
    &:focus,
    &.focus:hover,
    &:focus:hover {
      background-color: inherit;

      &::after {
        background-color: inherit;
      }
    }

    // Darken the background when active
    &.active,
    &:active,
    &.active:hover,
    &:active:hover {
      background-color: $btn--secondary--active__background-color;
    }

    // Darken the background on hover
    &.hover,
    &:hover {
      background-color: $btn--secondary__background-color;

      &::before {
        box-shadow: $btn--secondary--hover__box-shadow;
      }
    }
  }

  // No pocket for view more stuff
  &.spark-btn--view-more {
    box-shadow: $btn--view-more__box-shadow;

    &::before {
      box-shadow: none;
    }

    // Don't show any "corner pockets"
    &::after {
      display: none;
    }

    // Don't change the background color on hover
    &.focus,
    &:focus,
    &.focus:hover,
    &:focus:hover {
      background-color: $btn--view-more__background-color;
      box-shadow: $btn--view-more--focus__box-shadow;

      &::after {
        background-color: $btn--view-more__background-color;
      }
    }

    // Darken the background when active
    &.active,
    &:active,
    &.active:hover,
    &:active:hover {
      background-color: $btn--view-more--active__background-color;
    }

    // Darken the background on hover
    &.hover,
    &:hover {
      background-color: $btn--view-more__background-color;
      box-shadow: $btn--view-more--hover__box-shadow;

      &::before {
        box-shadow: none;
      }
    }
  }

  // Brand button color
  &.spark-btn--brand {
    &::before {
      box-shadow: $btn--brand__box-shadow;
    }

    // A little sliver of darker color
    &::after {
      background-color: $btn--brand--hover__background-color;
    }

    // On active, slide the pocket all the way up.
    &.active,
    &:active,
    &.active:hover,
    &:active:hover {
      background-color: $btn--brand--active__background-color;

      &::after {
        background-color: $btn--brand--active__background-color;
      }
    }

    // On hover, slide the pocket up a bit.
    &.hover,
    &:hover {
      background-color: $btn--brand__background-color;

      &::after {
      }
    }
  }

  // When disabled, hide the extra corner stuff.
  &.disabled,
  &:disabled,
  &.disabled:hover,
  &:disabled:hover {
    background-color: $btn--default--disabled__background-color;

    &::before,
    &::after {
      display: none;
    }
  }

.spark-btn--lg

A large button

  // Position the corner pocket
  &::after {
    transform: translate(-29%, -2%) rotate(-24deg);
  }

  // Slide up the corner pocket
  &.active,
  &:active,
  &.active:hover,
  &:active:hover {
    &::after {
      transform: translate(-70%, -2%) rotate(-24deg);
    }
  }

  // Slide up the corner pocket part way
  &.hover,
  &:hover {
    &::after {
      transform: translate(-33%, -2%) rotate(-24deg);
    }
  }

.spark-btn--md

A medium button

  // Position the corner pocket
  &::after {
    transform: translate(-28%, -3%) rotate(-24deg);
  }

  // Slide up the corner pocket
  &.active,
  &:active,
  &.active:hover,
  &:active:hover {
    &::after {
      transform: translate(-70%, -3%) rotate(-24deg);
    }
  }

  // Slide up the corner pocket part way
  &.hover,
  &:hover {
    &::after {
      transform: translate(-31%, -3%) rotate(-24deg);
    }
  }

.spark-btn--square, .spark-btn--circle

A button which is a circle or square

  height: 5rem;
  padding: 1.75rem;
  width: 5rem;

.spark-btn--circle

A button which is a circle

  border-radius: 50%;

  // Round the bottom border as well
  &::before {
    border-radius: 50%;
  }

.spark-btn--block

A button that is display block and takes up as much space as it can.

  display: block;
  width: 100%;

components/button-group

csss

.spark-btn-group, .spark-modal__nav

Deprecated!

Removing .spark-modal__nav in 2.0.0

Button Group

  display: block;
  text-align: right;

  .spark-btn {
    margin-left: .75rem;
  }

  &.spark-btn-group--center {
    text-align: center;
  }

  &.spark-btn-group--left {
    text-align: left;
  }

.spark-btn-group-secondary, .spark-modal__nav-secondary

Deprecated!

Removing .spark-modal__nav-secondary in 2.0.0

Secondary nav group should be inline block

  display: inline-block;

.spark-btn-group, .spark-modal__nav

Make the btn group flex so we can reorder buttons @deprecated Removing .spark-modal__nav in 2.0.0

  display: flex;
    flex-wrap: wrap;
    margin-bottom: -1rem;
    text-align: center;

    // Add a bottom margin to any buttons in the btn group
    .spark-btn {
      margin-bottom: 1rem;
      margin-left: 0;
    }

.spark-btn-group-primary, .spark-modal__nav-primary

Reorder primary button to be first and make it large @deprecated Removing .spark-modal__nav-primary in 2.0.0

  display: block;
    order: -5;
    width: 100%;

.spark-btn-group-secondary, .spark-modal__nav-secondary

Flex the contents of the secondary group @deprecated Removing .spark-modal__nav-secondary in 2.0.0

  display: flex;
    flex-wrap: wrap;
    margin-left: -.5rem;
    margin-right: -.5rem;
    width: calc(100% + 1rem);

    // Buttons should squeeze together but be at least 1/3rd the width
    .spark-btn {
      flex: 1;
      margin-left: .5rem;
      margin-right: .5rem;
      min-width: calc(33.3333333% - 1rem);
    }

.spark-btn-group-secondary.spark-btn, .spark-modal__nav-secondary.spark-btn

When the secondary item is not a group but a single element @deprecated Removing .spark-modal__nav-secondary.spark-btn in 2.0.0

  display: block;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem;
    justify-content: center;
    width: 100%;

components/calendar

csss

.spark-calendar

Calendar date selection.

  background-color: $calendar__background-color;
  color: $calendar__color;
  display: inline-block;
  max-width: 100%;
  padding: 0;
  transition-duration: 300ms, 300ms, 0ms, 100ms, 100ms;

  &[data-visible-count="2"] .spark-calendar__content {
    max-width: 62rem;

    .spark-calendar__month {
      max-width: calc(50% + 1rem);
    }
  }

  &[data-visible-count="3"] .spark-calendar__content {
    max-width: 92rem;

    .spark-calendar__month {
      max-width: calc(33.333333333% + 1rem);
    }
  }

  &[data-prepend-count] .spark-calendar__content,
  &.no-animate  .spark-calendar__content {
    transition-duration: 0ms;
  }

  &[data-prepend-count="1"] .spark-calendar__content,
  &[data-append-count="1"] .spark-calendar__content {
    transform: translateX(-30rem);
  }

  &[data-prepend-count="2"] .spark-calendar__content,
  &[data-append-count="2"] .spark-calendar__content {
    transform: translateX(-60rem);
  }

  &.spark-calendar__fixed {
    border: 0;
    height: 100%;
    margin-top: 0;

    .spark-popover__caret {
      display: none;
    }
  }

.spark-calendar__overflow

Hide overflow content

  overflow: hidden;

.spark-calendar__content

Holds the months

  display: flex;
  max-width: 32rem;
  position: relative;
  transform: translateX(0);
  transition: transform 100ms ease-in-out;
  width: 100%;

.spark-calendar__fixed

An item affixed to the screen

  border-radius: 0;
  left: 0;
  position: fixed !important;
  top: 0;
  width: 100%;

  .spark-input__field,
  .spark-input__fields,
  &.spark-input__field,
  &.spark-input__fields {
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .spark-calendar__content {
    max-width: 100%;
  }

.spark-calendar__nav

Calendar month navigation.

  color: $calendar__nav__color;
  position: relative;
  z-index: 5;

.spark-calendar__previous, .spark-calendar__next

Back and forward arrows.

  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 2rem;
  height: 4rem;
  opacity: 1;
  position: absolute;
  top: 1rem;
  transition-duration: $calendar__transition-duration;
  transition-property: opacity;
  width: 4rem;

  &:disabled {
    opacity: 0;
  }

  &:focus {
    outline: 0;
  }

.spark-calendar__month

A grouping of days.

  flex: 1 0 auto;
  max-width: 100%;
  min-width: 32rem;
  padding: 2rem;
  width: 32rem;

  @include media-breakpoint-only(xs) {
    min-width: auto;
  }

  // When a month follows another, it should have a negative left margin so we don't get double padding.
  + .spark-calendar__month {
    margin-left: -2rem;
  }

.spark-calendar__month-title

The title for a calendar month.

  color: $calendar__month-title__color;
  font-family: $heading__font-family;
  @include fontsize($calendar__month-title__font-size);
  margin-bottom: 1rem;
  text-align: center;

.spark-calendar__select

Select inputs used for quick advancement through months.

  line-height: 4rem;
  margin: -1rem 0 -.5rem 0;
  width: auto;

  .spark-select__input {
    border: $calendar__month-title__border;
    border-radius: 0;
    color: $calendar__month-title__color;
    font-weight: 300;
    line-height: 2rem;
    padding: 1rem 2rem 1rem 1rem;

    &:focus {
      border-color: $calendar__month-title__color;
    }
  }

  &::after {
    border-color: transparent;
    border-style: solid;
    border-top-color: $calendar__month-title__color;
    border-width: .425rem;
    border-top-width: .55rem;
    content: '';
    display: inline-block;
    margin-top: .25rem;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

  &:hover {
    z-index: 15;

    .spark-select__input:not([disabled]) {
      border: $calendar__month-title--hover__border;
    }
  }

  &:first-child {
    .spark-select__input {
      border-radius: .25rem 0 0 .25rem;
    }
  }

  &:not(:last-child) {
    margin-right: -1px;
  }

  &:last-child {
    margin-right: 0;

    .spark-select__input {
      border-radius: 0 .25rem .25rem 0;
    }
  }

.spark-calendar__days-of-week, .spark-calendar__days

Groups of days.

  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1px;
  margin-right: 1px;
  position: relative;

.spark-calendar__day-of-week, .spark-calendar__day

Days and their placeholders should flex.

  display: inline-block;
  flex: 1 0 auto;
  justify-content: center;
  width: (100% / 7);

.spark-calendar__days-of-week

Days of the week (M, T, W, etc.)

  

.spark-calendar__days

The list of calendar days

  

.spark-calendar__day

A single calendar day. Selectable

  border: $calendar__day__border;
  color: $calendar__day__color;
  @include fontsize($calendar__day__font-size, all);
  line-height: 0;
  margin-bottom: -1px;
  margin-right: -1px;
  position: relative;
  transition-delay: 0ms;
  transition-duration: 100ms;
  transition-property: color, border, z-index, background-color;
  z-index: 5;

  // Pushes the content to be the same height and width.
  &::after {
    content: '';
    display: block;
    float: left;
    padding-top: 100%;
  }

  span {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  // A disabled day
  &--disabled {
    color: $calendar__day--disabled__color;
    text-decoration: none;

    &:hover {
      color: $calendar__day--disabled__color;
    }
  }

  // Inactive days
  &--inactive,
  &--inactive.spark-calendar__day--disabled {
    background-color: $calendar__day--inactive__background-color;
    color: $calendar__day--inactive__color !important;
  }

  // Today's date
  &--today {

    // A circle to indicate the current day
    &::before {
      border: $calendar__day__today-border;
      border-radius: 50%;
      box-sizing: border-box;
      content: '';
      display: block;
      height: 80%;
      left: 10%;
      position: absolute;
      top: 10%;
      width: 80%;
      z-index: -5;
    }
  }

  // On hover or focus
  &:hover:not(.spark-calendar__day--disabled),
  &:focus:not(.spark-calendar__day--disabled) {
    border: $calendar__day--hover__border;
    color: $calendar__day--hover__color;
    z-index: 10;
  }

  // On focus, don't adopt the bottom border of an anchor
  &:focus {
    border-bottom: $calendar__day__border;
    padding-bottom: 0;
  }

.spark-calendar__day-note

A note that accompanies a day button

  bottom: 0;
  @include fontsize($calendar__day-note__font-size, all);
  font-weight: $calendar__day-note__font-weight;
  left: 0;
  line-height: 1.5rem;
  position: absolute;
  text-align: center;
  width: 100%;

.spark-calendar__day--selected

A selected day or the start or end of a range

  background-color: $calendar__day--selected__background-color;
  border: $calendar__day--selected__border;
  color: $calendar__day--selected__color;
  z-index: 7;

  &.spark-calendar__day--inactive.spark-calendar__day--disabled {
    background-color: $calendar__day--inactive__background-color;
    border: $calendar__day__border;
  }

  &:hover:not(.spark-calendar__day--disabled),
  &:focus:not(.spark-calendar__day--disabled) {
    color: $calendar__day--selected__color;
  }

  // A circle to indicate the current day
  &::before {
    border-color: $white;
  }

.range-start.range-end, .range-start.range-middle

When a month has both the start and end of a range.

  .spark-calendar__range-start ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__range-end):not(.spark-calendar__day--inactive) {
    @extend %calendar-range-highlight;
  }
  .spark-calendar__range-end ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not([bump]),
  .spark-calendar__range-last:not(.hover-start) ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not([bump]),
  .hover-end ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not([bump]) {
    @extend %calendar-range-highlight--disabled;
  }

.range-start.value-after, .range-start.range-middle

When a month has the start of a range but the value is on another month.

  .spark-calendar__range-start ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive) {
    @extend %calendar-range-highlight;
  }

.range-end.value-before

When a month has the end of a range but the value is on another month.

  .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not(.spark-calendar__day--selected) {
    @extend %calendar-range-highlight;
  }
  .spark-calendar__range-end ~ .spark-calendar__day:not(.spark-calendar__day--inactive) {
    @extend %calendar-range-highlight--disabled;
  }

.value-before.value-after:not(.has-value)

When a month has values before and after it, highlight everything!

  .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--disabled):not(.spark-calendar__day--inactive) {
    @extend %calendar-range-highlight;
  }

.range-middle.range-end

When a month has both a selection and end of a range.

  .spark-calendar__range-middle ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__range-end):not(.spark-calendar__day--inactive) {
    @extend %calendar-range-highlight;
  }
  .spark-calendar__range-end ~ .spark-calendar__day:not(.spark-calendar__day--selected):not(.spark-calendar__day--inactive):not([bump]) {
    @extend %calendar-range-highlight--disabled;
  }

components/checkbox

csss

.spark-checkbox, .spark-radio

Wrapper around the checkbox input. Generally a label so that clicking on any part of the container triggers the checkbox.

  color: $checkbox__color;
  display: flex;
  touch-callout: none;
  transition: all 250ms $ease-in-out-quint;
  user-select: none;
  position: relative;
  margin-bottom: 1rem;

  // Hide the actual element from view since we're going to show a replacement box.
  .spark-checkbox__input,
  .spark-radio__input {
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
  }

  // When the checkbox is checked, make the checkbox gray with a check mark in it.
  .spark-checkbox__input:checked ~ .spark-checkbox__box,
  .spark-radio__input:checked ~ .spark-radio__box {
    background-color: $checkbox--active__background-color;
    border: $checkbox--active__border;

    &::before {
      transform: translate(-50%, -50%) rotate(-45deg) scale(1);
    }
  }

  // When the checkbox is checked, make the label darker.
  .spark-checkbox__input:checked ~ .spark-label,
  .spark-radio__input:checked ~ .spark-label {
    color: $checkbox--active__color;
  }

  /// When the checkbox is checked, highlight special label copy
  .spark-checkbox__input:checked ~ .spark-label .spark-label__highlight,
  .spark-radio__input:checked ~ .spark-label .spark-label__highlight {
    color: $color-state-success;
  }

  /// When the checkbox is focus, highlight special label copy
  .spark-checkbox__input:focus ~ .spark-checkbox__box,,
  .spark-radio__input:focus ~ .spark-radio__box {
    background-color: $checkbox--hover__background-color;
    border: $checkbox--hover__border;
  }

  /// When the checkbox is disabled, make the checkbox gray.
  .spark-checkbox__input:disabled ~ .spark-checkbox__box,
  .spark-radio__input:disabled ~ .spark-radio__box {
    background-color: $checkbox--disabled__background-color;
    border: $checkbox--disabled__border;
    cursor: not-allowed;
  }

  // When the checkbox is disabled, make the label lighter.
  .spark-checkbox__input:disabled ~ .spark-label,
  .spark-radio__input:disabled ~ .spark-label {
    color: $checkbox--disabled__color;
    cursor: not-allowed;
  }

  // Make sure elements sit above the checkbox el
  .spark-checkbox__box,
  .spark-radio__box,
  .spark-label {
    cursor: pointer;
    position: relative;
    z-index: 5;
  }

  /// Label
  .spark-label {
    color: $checkbox__label__color;
    display: inline-block;
    line-height: 2rem;
    white-space: normal;
  }

  // Hover state for the checkbox
  &:hover {
    color: $checkbox--hover__color;

    .spark-checkbox__box,
    .spark-radio__box {
      background-color: $checkbox--hover__background-color;
      border: $checkbox--hover__border;
    }

    .spark-label {
      color: $checkbox__label--hover__color;
    }
  }

  /// When a box is followed by a label, space them out.
  .spark-checkbox__box + .spark-label,
  .spark-radio__box + .spark-label {
    margin-left: 1rem;
    vertical-align: top;
  }

.spark-checkbox__input:checked ~ .spark-label .spark-label__highlight, .spark-radio__input:checked ~ .spark-label .spark-label__highlight

When the checkbox is checked, highlight special label copy

  color: $color-state-success;

.spark-checkbox__input:focus ~ .spark-checkbox__box,, .spark-radio__input:focus ~ .spark-radio__box

When the checkbox is focus, highlight special label copy

  background-color: $checkbox--hover__background-color;
    border: $checkbox--hover__border;

.spark-checkbox__input:disabled ~ .spark-checkbox__box, .spark-radio__input:disabled ~ .spark-radio__box

When the checkbox is disabled, make the checkbox gray.

  background-color: $checkbox--disabled__background-color;
    border: $checkbox--disabled__border;
    cursor: not-allowed;

.spark-label

Label

  color: $checkbox__label__color;
    display: inline-block;
    line-height: 2rem;
    white-space: normal;

.spark-checkbox__box + .spark-label, .spark-radio__box + .spark-label

When a box is followed by a label, space them out.

  margin-left: 1rem;
    vertical-align: top;

.spark-checkbox__box, .spark-radio__box

Placeholder box

  background-color: $checkbox__background-color;
  border-radius: $input__border-radius;
  border: $checkbox__border;
  display: table;
  height: 2rem;
  position: relative;
  transition-duration: 250ms;
  transition-property: background-color, border, color;
  transition-timing-function:  $ease-in-out-quint;
  width: 2rem;

  // The check
  &::before {
    border-bottom: .3rem solid $checkbox--active__icon__color;
    border-left: .3rem solid $checkbox--active__icon__color;
    content: '';
    display: inline-block;
    height: .4rem;
    left: 50%;
    margin-left: .025rem;
    margin-top: -.1rem;
    position: absolute;
    top: 50%;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(-45deg) scale(0);
    transition: transform 250ms $ease-in-out-quint;
    width: .75rem;
  }

.spark-checkbox--sm, .spark-radio--sm

Small checkbox

  .spark-checkbox__box,
  .spark-radio__box {
    height: 1rem;
    top: 0.5rem;
    width: 1rem;

    &::before {
      border-bottom: .15rem solid $checkbox--active__icon__color;
      border-left: .15rem solid $checkbox--active__icon__color;
      height: .2rem;
      margin-left: 0;
      margin-top: -.1rem;
      width: .375rem;
    }
  }

  .spark-label {
    line-height: 2rem;
    overflow: visible;
  }

.spark-checkbox-group, .spark-radio-group

A group of checkboxes

  // When the group has a state, show it below.
  &[data-error],
  &[data-warning],
  &[data-success] {
    .spark-checkbox-group__message,
    .spark-radio-group__message {
      border-radius: $input__border-radius;
      display: block;
      margin-bottom: 1rem;
    }
  }

  // When the container has an error state, show it below.
  &[data-error] {
    .spark-checkbox__box,
    .spark-radio__box {
      border-color: $color-state-danger;
    }

    .spark-checkbox-group__message,
    .spark-radio-group__message {
      background-color: $color-state-danger;
    }
  }

  // When the container has an warning state, show it below.
  &[data-warning] {
    .spark-checkbox__box,
    .spark-radio__box {
      border-color: $color-state-warning;
    }

    .spark-checkbox-group__message,
    .spark-radio-group__message {
      background-color: $color-state-warning;
    }
  }

  // When the container has an success state, show it below.
  &[data-success] {
    .spark-checkbox__box,
    .spark-radio__box {
      border-color: $color-state-success;
    }

    .spark-checkbox-group__message,
    .spark-radio-group__message {
      background-color: $color-state-success;
    }
  }

.spark-checkbox-group__message, .spark-radio-group__message

The checkbox group message is the same as the input message

  @extend .spark-input__message;

components/date-input

csss

.spark-date

Date input

  // A direct input descendant should be an input with `type=date`.
  // We need to be this specific because the typeahead and calendar
  // widget also contain inputs.
  > .spark-input__field {
    overflow: hidden;
    text-indent: -9999px;

    // Hide the native controls
    &::-webkit-inner-spin-button,
    &::-webkit-calendar-picker-indicator {
      display: none;
      appearance: none;
    }
  }

  .spark-input__fields .spark-input__field {
    width: 0;
  }

  // When we're active or focused, show the value
  &.active > .spark-input__field,
  > .spark-input__field:focus {
    overflow: visible;
    text-indent: 0;
  }

  // A label for a date input needs to be the full height so that when clicking on the
  // input in it's unfocused state we can't accidentally click on a different label.
  &:not(.spark-date--select) .spark-label {
    line-height: 5rem;
    top: 0;
  }

  &:not(.spark-date--select) .spark-input__addon {
    line-height: 1rem;

    [class*="spark-icon-calendar"],
    [class^="spark-icon-calendar"] {
      line-height: 2rem;
    }
  }

  // When active, adjust the line height of the label
  &.active > .spark-label,
  > .spark-input__field:focus ~ .spark-label {
    line-height: 2rem;
    top: .5rem;
  }

  // Monospace overlay text to match
  .spark-input__overlay {
    font-family: $mono__font-family;
  }

.spark-date__calendar-toggle

Calendar show/hide button

  @extend .spark-input__addon-button;

components/expand

csss

.spark-expand

Expand container

  // When expanded...
  &.expanded {

    // Show the content
    .spark-expand__content {
      display: block;
    }

    // Hide some content
    .spark-expand__hide--expanded {
      display: none !important;
    }

    // Show some content
    .spark-expand__show--expanded {
      display: block !important;
    }

    // Rotate the caret
    .spark-expand__toggle-caret {
      transform: rotate(-90deg);
    }
  }

.spark-expand__content

Expand content

  display: none;

.spark-expand__show--expanded

Show when expand is expanded, but hide by default

  display: none !important;

.spark-expand__toggle-caret

The caret to show inside a toggle. This gets spun when expanded.

  color: inherit;
  display: inline-block;
  font-size: .75em;
  margin-left: .25rem;
  position: relative;
  top: -.1rem;
  transform: rotate(0deg);
  transition: transform 100ms $ease-in-out-quint;

  &::before {
    @extend .spark-icon::before;
    @extend .spark-icon-arrow-triangle-right::before;
    @extend .spark-icon--fill::before;
    font-size: .75em !important;
  }

components/fieldset

csss

.spark-fieldset

A group of form inputs.

  @include fontsize($fieldset__font-size);

components/footer

csss

components/header

csss

.spark-header

Primary header/navigation

  background-color: $header__background-color;
  border-top: $header__border-top-width solid $header__border-top-color;
  color: $header__color;
  height: 7rem;
  position: relative;

  .spark-header__nav{
    height: 7rem;
  }

  // The slide out navigation menu
  .spark-menu {
    display: flex;
    flex-direction: column;
    left: 0;
    max-height: 100vh;
    max-width: 100vw;
    min-height: 100vh;
    overflow: auto;
    position: absolute;
    top: 0;
    transform: translateX(-100%);
    transition-delay: 0ms, 250ms;
    transition-duration: 250ms, 0ms;
    transition-property: transform, visibility;
    transition-timing-function: $ease-out-quint;
    width: 25rem;
    visibility: hidden;
    z-index: 100;

    // Fix for Android 4.4.3 where header doesn't take up enough space.
    > .spark-menu__header {
      flex: 0 0 auto;
    }

    // Reorder content
    > .spark-menu__list,
    > .spark-menu__animation-wrapper > .spark-menu__list {
      flex: 1 0 auto;
      order: 10;

      // Secondary lists shouldn't take up more space than they need.
      ~ .spark-menu__list {
        flex-grow: 0;
      }
    }

    > .spark-menu__animation-wrapper {
      flex: 0 1 auto;
      order: 10;
      width: 100%;

      // Secondary lists shouldn't take up more space than they need.
      ~ .spark-menu__list {
        flex-grow: 0;
      }
    }

    > .spark-header__search {
      flex-grow: 0;
      order: 5;
    }

    // Bump the title up to match our header logo
    .spark-logo {
      position: relative;
      top: -4px;
    }
  }

  // Top-level header menu
  .spark-header__menu {
    align-items: center;
    height: 100vh;
    position: fixed;
  }

  // Adjust the spacing on the menu title
  .spark-menu__title {
    line-height: 1rem;
    padding: 2.5rem 2rem 2.5rem 0;
  }

  // When we are in the collapsed state...
  &.spark-header--collapsed {

    // The navigation which isn't the placeholder. Don't want to style the placeholder
    // or else we can't track the sizes of elements.
    .spark-header__nav:not(.spark-header__placeholder) {

      // Show collapsed-specific text
      .spark-header__collapsed-show {
        display: inline-block;
      }

      // Collapsed text after an icon should have a margin to separate it from the icon
      [class^="#{$prefix}-icon-"] + .spark-header__collapsed-show {
        margin-left: 1rem;
      }

      // Hide collapsed-specific text
      .spark-header__collapsed-hide {
        display: none;
      }
    }
  }

  // When we are visible or this is a placeholder, lay things out horizontally.
  &.spark-header--visible,
  .spark-header__placeholder {
    color: $header--visible__color;

    // When the overflow has been checked, elements have been
    // shown and hidden and we can remove overflow: hidden from
    // the overflow containers. If we don't do this, dropdowns
    // aren't visible. And we CAN'T just use overflow-x: hidden
    // and overflow-y: visible because when overflow-x or y is hidden
    // the other properly ALWAYS has a property of auto. Ugh.
    &.spark-header--overflow-checked {
      .spark-header__nav:not(.spark-header__placeholder) {
        .spark-header__menu,
        .spark-header__list--overflow {
          overflow: visible;
        }
      }
    }

    // Hide menus that shouldn't show when we're visible.
    .spark-header__list-visible-hidden {
      display: none !important;
    }

    // Hide collapsed-specific text
    .spark-header__collapsed-show {
      display: none;
    }

    // Show collapsed-specific text
    .spark-header__collapsed-hide {
      display: inline-block;
    }

    // Hide toggle
    .spark-menu__toggle {
      display: none;
    }

    // Hide nested list arrows
    .spark-menu__list-next {
      display: none;
    }

    // Pad the logo
    .spark-header__logo {
      padding-left: 2.5rem;
    }

    // Title width should be as small as possible
    .spark-header__title {
      width: auto;
    }

    // Main menu
    .spark-menu {
      background-color: transparent;
      color: inherit;
      display: flex;
      flex: 1 1 auto;
      flex-direction: row;
      height: auto;
      min-height: 0;
      max-height: none;
      max-width: none;
      position: static;
      transform: none;
      visibility: visible;

      // Hide top-level list titles
      > .spark-menu__title {
        display: none;
      }

      // Top-level items should have no font-size because otherwise there is a gap between the items.
      > .spark-menu__animation-wrapper > .spark-menu__list,
      > .spark-menu__list {
        color: inherit;
        flex: 0 1 auto;
        font-size: 0;
        height: 100%;
        padding: 0;
        white-space: nowrap;

        &.spark-header__search {
          flex-shrink: 0;
        }

        // Don't flex top-level links
        > .spark-menu__list-item > .spark-menu__list-links {
          display: inline-block;
        }

        // Dropdown list
        > .spark-menu__list-item > .spark-menu__list,
        > .spark-menu__list-item > .spark-menu__animation-wrapper > .spark-menu__list {
          background-color: $header--visible__second-level__background-color;
          box-shadow: 1px 0px 9px rgba(0, 0, 0, .23);
          border-radius: 0 0 $panel__border-radius $panel__border-radius;
          display: block;
          margin-bottom: 0;
          max-height: calc(100vh - 7rem);
          -ms-overflow-style: overflow-style;
          opacity: 0;
          overflow: hidden;
          overflow-y: auto;
          padding-bottom: 0;
          padding-top: 0;
          position: absolute;
          top: 100%;
          transition-delay: 0ms, 50ms;
          transition-duration: 200ms;
          transition-property: opacity, visibility;
          transition-timing-function: $ease-out-quint;
          white-space: normal;
          width: 20rem;
          z-index: 10;
          visibility: hidden;

          // Hide the shadow
          &::before, &::after {
            display: none;
          }

          // Style top-level dropdown items to
          > .spark-menu__list-item:not(.active) > .spark-menu__list-link,
          > .spark-menu__list-item:not(.active) > .spark-menu__list-links .spark-menu__list-link,
          > .spark-menu__list-item:not(.active) > .spark-menu__list-links .spark-menu__list-expand {
            &:hover {
              background-color: $menu__list-link--hover__background-color;
              color: $menu__list-link--hover__color;
            }
          }

         // Tall faux border on in-page links
         .spark-menu__list-item.active {
          > .spark-menu__list-link--in-page::before {
            margin-top: -1rem;
          }
        }


          // Second-level list items
          .spark-menu__list-item {
            display: block;
            min-width: 100%;

            // Adjust sizing on second-level links
            .spark-menu__list-link {
              border-top: none;
              display: block;
              line-height: 2rem;
              padding: 1rem 2rem;

              &.spark-menu__list-expand {
                padding-right: 4rem;
              }
            }

            // Third-level list items
            .spark-menu__list,
            .spark-menu__animation-wrapper > .spark-menu__list {
              &::before,
              &::after {
                content: '';
              }

              .spark-menu__list-item {
                @include fontsize($header--visible__third-level__font-size);

                .spark-menu__list-link {
                  padding: .5rem 2rem;
                }
              }

              // Shorter faux border on in-page links
              .spark-menu__list-item.active {
                > .spark-menu__list-link--in-page::before {
                  margin-top: -0.5rem;
                }
              }
            }
          }
        }

        // Top-level list items and links should display inline and take up
        // as little space as possible
        > .spark-menu__list,
        > .spark-menu__animation-wrapper > .spark-menu__list,
        > .spark-menu__animation-wrapper,
        > .spark-menu__list-links,
        > .spark-menu__list-link,
        > .spark-menu__list-item {
          background-color: inherit;
          color: inherit;
          display: inline-block;
          width: auto;
        }

        // Top-level list item
        > .spark-menu__list-item {
          height: 100%;

          // Top-level links
          > .spark-menu__list-link,
          > .spark-menu__list-links .spark-menu__list-link {
            border-top: #{$header--visible__link--active__border-top-width} solid transparent;
            line-height: 2rem;
            padding: calc(2.5rem - #{$header--visible__link--active__border-top-width / 2}) 2rem;

            // Offset the margin on large and medium icons so they don't make the header too tall
            .spark-icon--md,
            .spark-icon--lg {
              margin-right: 0;
            }
          }

          // Hover state
          &:hover {
            > .spark-menu__list-link,
            > .spark-menu__list-links .spark-menu__list-link {
              background-color: transparent;
              color: $header--visible__color;
            }

            > .spark-menu__list-links .spark-menu__list-expand::before {
              border-top-color: $header--visible__color;
            }
          }

          > .spark-menu__list-links {

            .spark-menu__list-link {
              padding-right: 4rem;
            }

            .spark-menu__list-expand {
              background: transparent;
              display: inline-block;
              flex: none;
              line-height: 0;
              min-width: 0;
              padding: 0;
              position: absolute;
              right: 2rem;
              top: 50%;
              transform: translateY(-50%);
              z-index: 10;

              &::before {
                border-top: .5rem solid $header--visible__color;
                border-left: .5rem solid transparent;
                border-right: .5rem solid transparent;
                content: '';
                left: 0;
                position: relative;
                transform: none;
              }

              // Hide the border on the side
              &::after {
                display: none;
              }

              &:focus::before {
                border: none;
                border-radius: 0;
                border-top: .5rem solid $header--visible__color;
                border-left: .5rem solid transparent;
                border-right: .5rem solid transparent;
              }
            }
          }

          // Show the immediate child list on hover or focus
          &:hover,
          &.has-focus {
            > .spark-menu__list,
            > .spark-menu__animation-wrapper > .spark-menu__list {
              opacity: 1;
              transition-delay: 0ms;
              visibility: visible;

              .spark-header__list-cta {
                display: block;
              }
            }
          }

          // Ignore the open state in the header
          &.open {
            > .spark-menu__list-links {
              color: inherit;
              font-weight: inherit;
            }
          }

          // Active state
          &.active,
          &.has-active-child {

            // Show the shadow
            &::after {
              opacity: 1;
            }

            // Color the link
            > .spark-menu__list-links .spark-menu__list-link,
            > .spark-menu__list-link {
              background-color: $header--visible__link--active__background-color;
              border-top: $header--visible__link--active__border-top-width solid $header--visible__link--active__border-top-color;
              color: $header--visible__link--active__color;
              font-weight: inherit;
            }

            > .spark-menu__list-links {
              background-color: transparent;
              font-weight: inherit;
            }
          }
        }

        // More button
        > .spark-header__more {
          width: auto;

          // Hide expand buttons in the more list because they can't be used until the menu
          // item is swapped out.
          .spark-menu__list-expand {
            display: none;
          }

          // Move the list up to cover the more button
          .spark-menu__list,
          .spark-menu__animation-wrapper > .spark-menu__list {
            background-color: $header--visible__second-level__background-color;
            border-radius: $panel__border-radius;
            max-width: none;
            padding-bottom: 1rem;
            padding-top: 1rem;
            top: calc(.8rem - #{$header--visible__link--active__border-top-width / 2});
            white-space: nowrap;
            width: auto;

            // Hide any nested lists
            .spark-menu__list {
              display: none;
            }
          }
        }

        // Lists after the first should only take up as much space as they need
        + .spark-menu__list {
          width: auto;
        }
      }

      > .spark-menu__animation-wrapper {
       // Lists after the first should only take up as much space as they need
       + .spark-menu__list {
        width: auto;
      }
    }

      // Dim all links on hover
      &:hover {
        > .spark-menu__list > .spark-menu__list-item,
        > .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item {

          // Dim text
          > .spark-menu__list-link,
          > .spark-menu__list-links > .spark-menu__list-link {
            color: $header--visible--hover__color;
          }

          // Dim any carets
          > .spark-menu__list-links .spark-menu__list-expand::before {
            border-top-color: $header--visible--hover__color;
          }

          // Keep the color of the hovered item
          &:hover {

            // Highlight text
            > .spark-menu__list-link,
            > .spark-menu__list-links > .spark-menu__list-link {
              color: $header--visible__link--hover__color;
            }

            // Highlight caret
            > .spark-menu__list-links .spark-menu__list-expand::before {
              border-top-color: $header--visible__link--hover__color;
            }
          }
        }
      }
    }

    // List items
    .spark-menu__list-item {

      // Shadow on the active tab
      &::after {
        background-color: $header--visible__link--active__shadow-color;
        content: '';
        display: block;
        height: calc(100% - #{$header--visible__link--active__border-top-width}); // Full height, minus 4px for the border.
        opacity: 0;
        position: absolute;
        right: -.2rem;
        top: #{$header--visible__link--active__border-top-width};
        transform: skew(-3deg);
        transition: opacity 250ms $ease-in-out-quint;
        z-index: 0;
        width: 1rem;
      }

      // Raise the z-index of links so they sit above the shadow
      .spark-menu__list-link {
        position: relative;
        z-index: 5;
      }
    }

    // Login \ Sign in link
    // @deprecated changing `login` to `sign-in`, will remove `login` in 2.0.0
    .spark-header__login .spark-menu__list-link,
    .spark-header__sign-in .spark-menu__list-link {
      background-color: $header__sign-in__background-color;
      border-top: none;
      color: $link--default__color;
      font-weight: $header__sign-in__font-weight;
      line-height: 3rem;
      padding: calc(2rem - #{$header__border-top-width}) 2rem 2rem 4rem;
      top: 4px;
      white-space: nowrap;

      &:active,
      &:focus,
      &:focus:hover,
      &:hover {
        color: $header__sign-in--hover__color;
      }
    }

    // Overflow list should take up as much space as possible
    .spark-header__list--overflow {
      width: 100%;
    }

    // A second list should not have a top border
    .spark-menu__list ~ .spark-menu__list {
      border-top: none;
    }

    // Reset the font size on list items
    .spark-menu__list-item {
      @include fontsize($header__font-size);
    }

    // Hide the menu header
    .spark-menu__header {
      display: none;
    }

    // Reset ordering of search
    .spark-header__search {
      background-color: transparent;
      order: 10;

      // Reset icon size and color.
      > .spark-menu__list-item.spark-expand__toggle {
        border-bottom: none;

        [class^="#{$prefix}-icon-"] {
          align-items: center;
          display: flex;
          height: calc(100% - #{$header__border-top-width});
          margin-top: #{$header__border-top-width};
        }

        > .spark-menu__list-link {
          border-top: none;

          [class^="#{$prefix}-icon-"] {
            color: inherit;
          }
        }
      }

      .spark-input {
        .spark-input__field:focus {
          padding-bottom: .5rem;
          padding-top: .5rem;
        }
      }

      // Show the expand button
      > .spark-expand__toggle {
        display: block;
      }

      // Should fit snug against a list that follows it
      + .spark-menu__list,
      + .spark-menu__animation-wrapper > .spark-menu__list {
        margin-left: -1rem;
      }

      // Show the form when search is expanded
      &.expanded {
        .spark-header__search-form {
          display: block;
        }
      }
    }

    // Hide the search form by default
    .spark-header__search-form {
      border-bottom: none;
      display: none;
      height: calc(100% - #{$header__border-top-width});
      padding: 1rem 0 1rem 2rem;
      position: absolute;
      right: 0;
      top: ($header__border-top-width / 2);
      width: 25rem;
      z-index: 10;

      .spark-input {
        padding: 0 1rem;
        position: relative;
        top: 50%;
        transform: translateY(-50%);

        .spark-input__field {
          background-color: $input__background-color;
          border: $input__border;
          padding-left: 1rem;

          // Hide the icons we don't need
          ~ .spark-header__search-icon,
          ~ .spark-input__clear {
            display: none;
          }
        }

        .spark-input__addon {
          font-size: 1rem;
          right: 1rem;
        }
      }

      // Create a shadow to the left
      &::before {
        background: linear-gradient(to right, transparent, $header__background-color 2rem);
        content: '';
        display: inline-block;
        height: calc(100% - #{$header--visible__link--active__border-top-width});
        left: 0;
        position: absolute;
        top: $header--visible__link--active__border-top-width;
        width: 100%;
      }
    }

    // Hide overflow content
    .spark-header__list--overflow {
      overflow: hidden;
    }

    // Navigation
    .spark-header__nav.active {

      // Disable background gray-out
      &::before {
        display: none;
      }
    }
  }

  // Inside the placeholder, the animation wrapper should display the same as the menu list
  .spark-header__placeholder .spark-menu > .spark-menu__animation-wrapper {
    display: block;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
  }

  // Extra small breakpoint and condensed class should be condensed
  &[data-breakpoint='xs']:not(.spark-header__placeholder),
  &.spark-header--condensed:not(.spark-header__placeholder) {
    height: 5rem;

    .spark-header__nav{
      height: 5rem;
    }

    .spark-header__logo {
      padding: calc(1.5rem - 4px) 0 calc(1.5rem + 4px);
    }

    .spark-header__title {
      line-height: 2rem;
      padding: calc(1.5rem - #{$header__border-top-width + 2px}) 2rem calc(1.5rem - 2px);
    }

    // @deprecated changing `login` to `sign-in`, will remove `login` in 2.0.0
    .spark-header__login,
    .spark-header__sign-in {
      .spark-menu__list-link {
        max-width: 40vw;
        overflow: hidden;
        padding: calc(1.5rem - #{$header__border-top-width}) 2rem 1.5rem 4rem;
        text-overflow: ellipsis;
      }
    }

    .spark-menu__header {
      .spark-menu__title {
        padding: 1.5rem 2rem 1.5rem 0;
      }

      .spark-header__logout {
        padding: 1rem 2rem;
      }
    }
  }

  // Condensed styles which should apply to the placeholder
  &.spark-header--condensed {

    // Also visible, squish the buttons
    &.spark-header--visible {

      .spark-header__logo {
        padding: calc(1.5rem - #{$header__border-top-width}) 0 1.5rem 2.5rem;
      }

      // @deprecated changing `login` to `sign-in`, will remove `login` in 2.0.0
      .spark-header__login,
      .spark-header__sign-in {
        .spark-menu__list-link {
          padding: calc(1.5rem - #{$header__border-top-width / 2}) 2rem calc(1.5rem - #{$header__border-top-width / 2}) 4rem;
          line-height: 2rem;
        }
      }

      .spark-menu {
        // Shorter list items
        > .spark-menu__list > .spark-menu__list-item > .spark-menu__list-link,
        > .spark-menu__list > .spark-menu__list-item > .spark-menu__list-links .spark-menu__list-link,
        > .spark-menu__list > .spark-menu__list-item > .spark-menu__list-links .spark-menu__list-expand,
        > .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item > .spark-menu__list-link,
        > .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item > .spark-menu__list-links .spark-menu__list-link,
        > .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item > .spark-menu__list-links .spark-menu__list-expand {
          padding-bottom: calc(1.5rem - #{$header__border-top-width / 2});
          padding-top: calc(1.5rem - #{$header__border-top-width / 2});
        }

        // Adjust the max height of the dropdown
        > .spark-menu__list > .spark-menu__list-item > .spark-menu__list,
        > .spark-menu__animation-wrapper > .spark-menu__list > .spark-menu__list-item > .spark-menu__list {
          max-height: calc(100vh - 5rem);
        }

        // More button
        > .spark-menu__list > .spark-header__more,
        > .spark-menu__animation-wrapper > .spark-menu__list > .spark-header__more {

          // Move the list up to cover the more button
          .spark-menu__list {
            padding: .5rem 0;
            top: #{$header__border-top-width / 2};
          }
        }
      }
    }
  }

  // When we are extra small
  &[data-breakpoint='xs']:not(.spark-header__placeholder) {

    // Adjust the width of the toggle since we're hiding the logo.
    .spark-header__toggle {
      width: 4rem;
    }

    // Hide any logo
    .spark-header__logo > * {
      display: none;
    }

    // Menu becomes full screen width
    .spark-header__menu {
      width: 100vw;
    }
  }

.spark-header--fixed

Fixed header. The JS will make this transition to a condensed header on scroll.

  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  transition-delay: 0;
  transition-duration: 400ms;
  transition-property: height;
  transition-timing-function: $ease-in-out-quint;

  .spark-menu__list-link,
  .spark-header__title,
  .spark-header__nav,
  .spark-header__logo {
    transition-duration: 400ms;
    transition-property: padding, line-height, height;
    transition-timing-function: $ease-in-out-quint;
  }

.spark-header__nav

Navigation wrapper

  display: flex;
  margin-top: -#{$header--visible__link--active__border-top-width};
  position: relative;

  // Direct descendants should flex
  // @deprecated changing `login` to `sign-in`, will remove `login` in 2.0.0
  .spark-header__title,
  .spark-header__login,
  .spark-header__sign-in,
  .spark-menu {
    flex: 0 1 auto;
  }
  .spark-header__title {
    overflow: hidden;
  }

  .spark-header__sign-in {
    flex-shrink: 0;
  }

  // Gray background cover when active
  &::before {
    @extend %gray-out;
  }

  // Show the menu when we're active
  &.active {

    // Gray out the background
    &::before {
      opacity: 1;
      transition-delay: 0ms;
      visibility: visible;
    }

    // Fly out from the left
    .spark-header__menu {
      @extend %gray-out--active;
      align-items: initial;
      overflow-x: hidden;
      transform: translateX(0);
    }
  }

.spark-header__toggle

Hamburger menu

  background-color: $header__logo--sabre__background-color;

  // When a toggle precedes a logo, no left padding on the logo
  & + .spark-header__logo {
    padding-left: 0;
  }

.spark-header__title

Title text. Width needs to fill out the space to prevent the sign in button from being large

  border-top: $header__border-top-width solid $header__border-top-color;
  color: $header__title__color;
  display: inline-block;
  @include fontsize($header__title__font-size);
  font-family: $header__title__font-family;
  font-weight: $header__title__font-weight;
  line-height: 2rem;
  margin-bottom: 0;
  padding: calc(2.5rem - #{$header__border-top-width + 2px}) 2rem 2.5rem;
  white-space: nowrap;
  width: 100%;

  &:hover, &:active {
    color: $header__title__color;
  }

  &:focus {
    border-bottom: 0;
    padding-bottom: 2rem;
  }

.spark-header__more

The 'more' button

  // Uppercase the text
  .spark-menu__list {
    text-transform: uppercase;
  }

.spark-header__placeholder

A placeholder version of the nav. This is used by the JS to compute the size of list items. It should be absolutely positioned to remove it from the flow and hidden.

  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: -100%;
  width: 100%;
  z-index: -10;

.spark-header__list--overflow

Overflow nav list container

  overflow: auto;
  width: 100%;

.spark-header__login, .spark-header__sign-in

Deprecated!

changing login to sign-in, will remove login in 2.0.0

The sign in button

  margin-left: -1.5rem;
  overflow: visible !important;

  .spark-menu__list-link {
    background-color: $header__sign-in__background-color;
    border-top: $header__border-top-width solid $header__border-top-color;
    display: block;
    font-weight: 400;
    line-height: 2rem;
    margin-bottom: 0;
    padding: calc(2.5rem - #{$header--visible__link--active__border-top-width}) 2rem 2.5rem 4rem;
    text-transform: none;
    white-space: nowrap;

    &:active,
    &:focus,
    &:focus:hover,
    &:hover {
      background-color: $header__sign-in__background-color;
      color: $header__sign-in--hover__color;
    }

    // Angle
    &::after {
      @include angle($header__background-color);
      left: 0;
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
    }
  }

.spark-header__logout

The logout button

  background-color: transparent;
  border: none;
  color: $header__title__color;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 3rem;
  padding: 2rem;
  text-transform: uppercase;

.spark-header__list-cta

A special call to action button at the bottom of a header dropdown. Should be hidden by default, visible only when the header itself is "visible".

  border-top: $menu__list--second__border-top;
  display: none;
  padding: 0;
  text-align: center;

.spark-header__search-form

Show the form all the time

  border-bottom: 1px solid $header__search__border-color;
  display: block;
  flex: 1;
  position: relative;
  width: 100%;

  // Hide the drop shadow
  &::before {
    display: none;
  }

  // Input field
  .spark-input {
    .spark-input__field {
      background-color: $header__search__background-color;
      border: none;
      color: $header__search--active__color;
      @include fontsize(eta);
      height: 3rem;
      padding: .5rem 3rem .5rem 2rem;
      transition-duration: 100ms;
      transition-property: height, padding;
      transition-timing-function: $ease-in-out-quint;

      @include placeholder {
        color: $header__search__color;
      }

      ~ .spark-header__search-icon {
        display: block;
      }

      ~ .spark-input__clear {
        display: none;
        right: .25rem;
      }

      &:focus {
        background-color: $header__search--active__background-color;
        border: none;
        height: 4rem;
        padding-bottom: 1rem;
        padding-top: 1rem;

        @include placeholder {
          color: $input__placeholder__color;
        }
      }
    }

    &.active,
    .spark-input__field:focus {
      .spark-header__search-icon,
      & ~ .spark-header__search-icon {
        display: none;
      }

      .spark-input__clear,
      & ~ .spark-input__clear {
        display: block;
      }
    }
  }

components/icon

csss

[data-icon], .spark-icon, [class^='#{$prefix}-icon-'], [class*=' #{$prefix}-icon-']

Icons

  display: inline-block;
  font-size: 1.333333333rem;
  line-height: 1.333333333rem;
  vertical-align: middle;

components/input-group

csss

.spark-input-group

Group input elements together by flexing their space

  display: flex;

.spark-input-group__item

An item in a group should take up as little space as possible

  flex: 0 1 auto;
  text-align: left;

  // Reset margins for some items so things line up
  &.spark-input {
    margin: 0;
  }

  // Buttons should have a higher z-index so they sit above other content
  &.spark-btn {
    border: none;
    margin: 0;
    position: relative;
    z-index: 20;

    &::before {
      box-shadow: none;
    }
  }

  // Remove radius from internal fields
  &.spark-btn,
  .spark-btn,
  &.spark-input .spark-input__field,
  .spark-input .spark-input__field,
  &.spark-input__fields,
  .spark-input__fields {
    border-radius: 0;
  }

.spark-input-group__item--primary

Primary item should take up most of the space

  flex: 1 1 100%;

components/label

csss

.spark-label

Form input label

  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 250ms $ease-in-out-quint;
  white-space: nowrap;

.spark-label__highlight

An element which should be highlighed when the label's corresponding element is selected

  transition: color 250ms $ease-in-out-quint;

components/link

components/list

csss

ul

Unordered list

  li {
    list-style-type: disc;
  }

ol

Ordered list

  li {
    list-style-type: decimal;
  }

ul, ol

Style list items

  li {
    line-height: 2rem;
    list-style-position: outside;
    margin: 1rem 0;
  }

.spark-list-item--no-bullet

Hide the bullet on an item

  list-style-type: none;
  padding-left: 0;
  text-indent: 0;

.spark-list--no-bullets

Hide the bullets on a whole list

  li {
    @extend .spark-list-item--no-bullet;
  }

components/logo

csss

.spark-logo--sabre

Sabre-specific logo

  background-image: url('#{$image-directory}/sabre-logo-white.svg');

  &.spark-logo--lg {
    height: 60px;
    width: 254px;
  }

  &.spark-logo--md {
    height: 36px;
    width: 152px;
  }

  &.spark-logo--sm {
    height: 24px;
    width: 102px;
  }

  &.spark-logo--xs {
    height: 18px;
    width: 77px;
  }

.spark-logo--sabre-red

Red Sabre logo

  background-image: url('#{$image-directory}/sabre-logo-red.svg');

components/menu

csss

.spark-menu

The basic navigation menu

  background-color: $menu__background-color;
  color: $menu__color;
  @include fontsize($menu__font-size);
  overflow-x: hidden;

  // A panel header has a bottom border
  .spark-panel__header {
    border-bottom: $menu__panel-header__border-bottom;
  }

  // A panel header followed by a menu list should be snug on the bottom
  .spark-panel__header + .spark-menu__list {
    margin-top: 0rem;
  }

.spark-menu--panel

Panel menus should adopt panel styling.

  @extend .spark-panel;

.spark-menu--panel__header

Panel-style menu header.

  @extend .spark-panel__header;

.spark-menu__header

Group of elements at the top of the header

  background-color: $menu__header__background-color;
  color: $menu__header__color;
  display: flex;
  line-height: 1rem;
  width: 100%;

  // All direct children should flex
  > * {
    flex: 0 1 auto;
  }

  // Title should fill the space
  .spark-menu__title {
    width: 100%;
  }

.spark-menu__title

Title for a menu

  align-items: center;
  border: none;
  color: inherit;
  display: flex;
  font-family: $heading__font-family;
  @include fontsize($menu__title__font-size, all);
  line-height: 1rem;
  margin: 0;
  padding: 1.5rem 2rem 1.5rem 0;

.spark-menu__toggle

Menu toggle

  background-color: $menu__header__toggle__background-color;
  border: none;
  color: $menu__header__toggle__color;
  cursor: pointer;
  flex: none;
  font-size: 1.375rem;
  line-height: 1rem;
  margin: 0;
  padding: 1.5rem 2rem;
  text-align: center;
  width: 6rem;

  &:focus {
    outline: 0;
  }

.spark-menu__list

List of nav items

  background-color: $menu__list__background-color;
  color: $menu__list__color;
  font-size: inherit;
  margin: 0;
  padding: 0;
  position: relative;
  text-transform: uppercase;
  width: 100%;

  // Sub list
  .spark-menu__list {
    background-color: $menu__list--second__background;
    display: none;
    min-width: 100%;
    position: relative;
    text-transform: none;
    z-index: 0;

    // List titles below the first level should have a top margin.
    .spark-menu__list-title {
      &:first-child {
        border-top: $menu__list--second__border-top;
        margin-top: 1rem;
      }

      &:last-child {
        margin-bottom: 1rem;
      }
    }

    // Gradient to make a faux drop shadow at the top and bottom
    &::after,
    &::before {
      background: $menu__list--second__shadow;
      content: '';
      height: 1rem;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: -5;
    }

    // Position second shadow at the bottom
    &::after {
      bottom: 0;
      top: auto;
      transform: rotate(180deg);
    }

    // Shorter menu items
    .spark-menu__list-link,
    .spark-menu__list-expand,
    .spark-menu__list-next {
      padding-bottom: .5rem;
      padding-top: .5rem;
    }

    // Shorter faux border on in-page links
    .spark-menu__list-item.active {
      > .spark-menu__list-link--in-page::before {
        margin-top: -.5rem;
      }
    }

    // Since the background is now colored, don't show a background color on hover
    .spark-menu__list-item:not(.active) {
      > .spark-menu__list-link:hover,
      > .spark-menu__list-links .spark-menu__list-link:hover,
      > .spark-menu__list-links .spark-menu__list-expand:hover,
      > .spark-menu__list-links .spark-menu__list-next:hover {
        background-color: transparent;
      }
    }

    // Third level list
    .spark-menu__list {
      padding-bottom: 0;
      padding-top: 0;

      // Indent type
      .spark-menu__list-link,
      .spark-menu__list-title {
        padding-left: 3rem;
      }

      // Hide shadows
      &::after,
      &::before {
        content: none;
      }

      // All subsquent lists should indent, and be on a white background
      .spark-menu__list {
        border-top: $menu__list--second__border-top;

        // Hide shadows
        &::after,
        &::before {
          display: none;
        }

        // 4th level
        .spark-menu__list-link,
        .spark-menu__list-title {
          padding-left: 4rem;
        }

        // 5th level
        .spark-menu__list {
          .spark-menu__list-link,
          .spark-menu__list-title {
            padding-left: 5rem;
          }
        }

        // Not supporting nesting beyond 5 levels because that's just nuts.
      }
    }
  }

.spark-menu__animation-wrapper

Animation wrapper for sliding lists

  display: flex;
  flex-wrap: nowrap;
  transition-duration: 250ms;
  transition-property: transform, height;
  transition-timing-function: $ease-in-out-quint;

  // Don't grow the lists
  .spark-menu__list {
    flex: 0 0 auto;
  }

  &.no-animate {
    transition-duration: 0ms !important;
  }

.spark-menu__list ~ .spark-menu__list

A second list should have a top border

  border-top: $menu__list--second__border-top;

.spark-menu__list-item

A single list item

  background-color: $menu__list-item__background-color;
  color: $menu__list-item__color;
  display: block;
  line-height: initial;
  margin: 0;
  position: relative;
  @extend .spark-list-item--no-bullet;

  // Anchor should inherit these styles
  .spark-menu__list-link {
    background-color: inherit;
    color: inherit;
    font-size: inherit;
    width: 100%;
  }

  // Show the list items of a nested list when an item is open
  &.open {

    // Show second-level items
    > .spark-menu__list {
      display: block;
      padding: 0;
    }

    .spark-menu__list-next--target {
      display: none;
    }

    // When a list is open
    > .spark-menu__list-links .spark-menu__list-expand,
    > .spark-menu__list-expand,
    > .spark-menu__list-next {

      // No underline when rotated or it's on top.
      // @todo figure out how to fix this
      &:focus {
        &::before {
          text-decoration: none;
        }
      }

      // Spin its expand button around
      &::before {
        transform: translate(-50%, -50%) rotate(180deg);
      }
      &.spark-menu__list-link::before {
        transform: translateY(-50%) rotate(180deg);
      }
    }
  }

  // Bold text for menus which are open or have active children
  &.open,
  &.has-active-child,
  &.child-active {

    // Bold text
    > .spark-menu__list-link,
    > .spark-menu__list-links {
      color: $menu__list-item--open__color;
      font-weight: $menu__list-item--open__font-weight;
    }

    // Bold expand caret
    > .spark-menu__list-links .spark-menu__list-expand,
    > .spark-menu__list-expand,
    > .spark-menu__list-next {
      &::before {
        @extend .spark-icon--fill;
      }
    }
  }

  // Active list item
  &.active {

    > .spark-menu__list-links .spark-menu__list-link,
    > .spark-menu__list-link:not(.spark-menu__list-link--in-page),
    > .spark-menu__list-expand,
    > .spark-menu__list-next {
      background-color: $menu__list-item--active__background-color;
      color: $menu__list-item--active__color;
      font-weight: $menu__list-item--open__font-weight;
    }

    // In-page link style
    > .spark-menu__list-link.spark-menu__list-link--in-page {
      color: $menu__list-link--in-page__color;
      font-weight: $menu__list-item--open__font-weight;

      // Faux Border
      &::before {
        border-left: $menu__list-link--in-page__border-left;
        content: '';
        height: 100%;
        left: 0px;
        margin-top: -1rem;
        position: absolute;
        width: 100%;
      }
    }
  }

.spark-menu__list-expand, .spark-menu__list-next, .spark-menu__list-back

Caret to allow expanding list items to show sub lists

  background-color: transparent;
  border: none;
  color: inherit;
  display: inline-block;
  font-size: 2rem;
  line-height: 1rem;
  margin-bottom: 0;
  min-width: 4rem;
  padding: 1rem;
  position: relative;
  text-align: center;

  // Icon
  &::before {
    @extend [data-icon]::before;
    font-size: 2rem !important;
    left: 50%;
    line-height: 2rem !important;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition-duration: 100ms;
    transition-property: transform, border-color;
    transition-timing-function: $ease-in-out-quint;
  }

  // Darken like a link on hover
  &:hover {
    background-color: $menu__list-link--hover__background-color;
    color: $menu__list-link--hover__color;
  }

  &:focus {
    border-bottom: none;
    padding-bottom: 1rem;
    outline: none;

    &::before {
      // text-decoration: underline;
    }
  }

.spark-menu__list-link, .spark-menu__list-expand, .spark-menu__list-next

Transitions for links and expand buttons

  transition-duration: 250ms;
  transition-property: background-color, color, font-weight;
  transition-timing-function: $ease-in-out-quint;

.spark-menu__list-link:hover + .spark-menu__list-expand::after, .spark-menu__list-link:hover + .spark-menu__list-next::after

Hide the expand border when the link is hovered

  opacity: 0;

.spark-menu__list-link.spark-menu__list-expand, .spark-menu__list-link.spark-menu__list-next

A link which is also an expand should have the caret on the right and appropriate padding

  line-height: 2rem;
  padding: 1rem 4rem 1rem 2rem;
  text-align: left;

  &::before {
    left: auto;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
  }

.spark-menu__list-title

A title for a list. This should be used for non-actionable list items in place of a list-link.

  background-color: $menu__list-title__background-color;
  border-bottom: $menu__list--second__border-top;
  border-top: $menu__list--second__border-top;
  color: $menu__list-title__color;
  display: inline-block;
  @include fontsize($menu__list-title__font-size);
  font-weight: 400;
  margin: 0;
  line-height: 1rem;
  list-style-type: none;
  padding: .5rem 2rem;
  text-transform: uppercase;
  text-indent: 0;
  width: 100%;

  &:first-child {
    border-top: none;
  }

.spark-menu__placeholder

A placeholder version of the menu. This is used by the JS to compute the size of list items. It should be absolutely positioned to remove it from the flow and hidden.

  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: -100%;
  width: 100%;
  z-index: -10;

components/message

csss

.spark-message

Default message

  align-items: top;
  display: flex;
  margin-bottom: 1rem;
  width: 100%;

  // When this is a panel-level message
  &.spark-panel {

    // Content needs to flex
    .spark-panel__content {
      display: flex;

      // Need the first child to sit snuggly next to the heading
      p:first-of-type {
        padding-top: 0;
      }
    }
  }

.spark-message__icon, .spark-message__content

Flex content for horizontal alignment.

  flex: 0 1 auto;

.spark-message__icon

Icon shouldn't grow too large and should have spacing around it

  border-radius: 50%;
  display: inline-block;
  height: 3rem;
  min-height: 3rem;
  min-width: 3rem;
  padding: 0 .5rem;
  position: relative;
  text-align: center;
  width: 3rem;

  // Center the icon content
  &::before {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }

.spark-message__content

Message content

  line-height: 2rem;
  padding: .5rem;

.spark-message__icon + .spark-message__content

Content which follows an icon should have an additional left margin

  margin-left: .5rem;

.spark-message__heading

A heading

  font-family: $heading__font-family;
  @include fontsize(epsilon);
  font-weight: 500;
  line-height: 2rem;
  margin: 0;
  padding: 0;

.spark-message--lg

A large message

  // Icon should be much bigger
  .spark-message__icon {
    @include fontsize(delta);
    height: 5rem;
    min-height: 5rem;
    min-width: 5rem;
    padding: 0 1rem;
    width: 5rem;
  }

.spark-message--info

Info message

  background-color: $message--info__background-color;
  color: $message--info__color;

  .spark-message__icon {
    background-color: $message--info__icon__background-color;
    border: $message--info__icon__border;
    color: $message--info__icon__color;
  }

  h1, h2, h3, h4, h5, h6, b, strong {
    color: $message--info__heading__color;
  }

.spark-message--warning

Warning message

  background-color: $message--warning__background-color;
  color: $message--warning__color;

  .spark-message__icon {
    background-color: $message--warning__icon__background-color;
    border: $message--warning__icon__border;
    color: $message--warning__icon__color;
  }

  h1, h2, h3, h4, h5, h6, b, strong {
    color: $message--warning__heading__color;
  }

.spark-message--error

Error message

  background-color: $message--error__background-color;
  color: $message--error__color;

  .spark-message__icon {
    background-color: $message--error__icon__background-color;
    border: $message--error__icon__border;
    color: $message--error__icon__color;
  }

  h1, h2, h3, h4, h5, h6, b, strong {
    color: $message--error__heading__color;
  }

.spark-message--success

Success message

  background-color: $message--success__background-color;
  color: $message--success__color;

  .spark-message__icon {
    background-color: $message--success__icon__background-color;
    border: $message--success__icon__border;
    color: $message--success__icon__color;
  }

  h1, h2, h3, h4, h5, h6, b, strong {
    color: $message--success__heading__color;
  }

components/modal

csss

.spark-modal-open

Window class to disable scrolling when the modal is open.

  overflow: hidden;

.spark-modal

Default modal

  align-items: center;
  display: flex;
  flex-direction: row;
  height: 100%;
  left: 0;
  min-width: 100%;
  opacity: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  transition-delay: 0ms, 250ms;
  transition-duration: 250ms, 0ms;
  transition-property: opacity, visibility;
  transition-timing-function: $ease-out-quint;
  visibility: hidden;
  z-index: 99999;

  // Gray background (not visible by default)
  &::before {
    @extend %gray-out;
  }

  // Modal is open
  &.active {
    opacity: 1;
    transition-delay: 0ms;
    visibility: visible;

    // Show the gray background
    &::before {
      @extend %gray-out--active;
    }

    // Slide up the content
    .spark-modal__content {
      transform: translateY(0);
    }
  }

.spark-modal--fullscreen-xs .spark-modal__header

A modal that is fullscreen on mobile should have no padding for the bottom of the heading on desktop. This is weird but necessary to properly space the header and the content.

  padding-bottom: 0;

.spark-modal__scroll

Scroll wrapper. This allows us to center the modal but stop it from being cropped when the window is too short to fit it all.

  max-height: 100%;
  overflow: auto;
  position: relative;
  width: 100%;
  z-index: 100;

.spark-modal__content

Content container

  background-color: $modal__background-color;
  border-radius: $modal__border-radius;
  margin: 4rem auto;
  padding: 0;
  position: relative;
  transform: translateY(50%);
  transition: transform 250ms $ease-out-quint;
  z-index: 100;

.spark-modal__full-width-content

Full width content

  margin-left: -2rem;
  margin-right: -2rem;

.spark-modal__header

Header should have less bottom padding

  padding-bottom: 1rem;
  padding-top: 2rem;

  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
  }

.spark-modal__body

Body content

  padding-bottom: 1rem;
  padding-top: 1rem;

  // If the body is the first child, give it extra padding
  &:first-child {
    padding-top: 2rem;
  }

  // If the body is the last child, give it extra padding
  &:last-child {
    padding-bottom: 2rem;
  }

.spark-modal__body--snug

Snug content

  padding-top: 0;
  padding-bottom: 0;

.spark-modal__close

Close button

  bottom: 100%;
  color: $modal__close__color;
  padding: 1rem;
  position: absolute;
  right: -1rem;
  transition: transform 100ms $ease-out-quint;

  &:hover,
  &:focus {
    color: $modal__close__color;
    transform: scale(1.1);
  }

.spark--modal-open

Applied to the body when the modal is open to kill scrollbars on the body

  overflow: hidden;

.spark-modal

Adjust the spacing for the modal on xs

  padding: 2rem;

    // Stack message
    .spark-message {
      align-items: center;
      flex-direction: column;
      text-align: center;
    }

    // Space out heading and content
    .spark-message__heading {
      margin-bottom: .5rem;
    }

.spark-modal__full-width-content

Full width content modal content should be snug

  margin-left: -1rem;
    margin-right: -1rem;

.spark-modal--fullscreen-xs

A modal which takes up the full screen on xs breakpoint

  padding: 0;

    // Make the scroll take up all the vertical space it can
    .spark-modal__scroll {
      height: 100%;
    }

    // Flex the content so we have a fixed header and footer
    .spark-modal__content {
      border-radius: 0;
      display: flex;
      flex-direction: column;
      height: 100%;
      margin: 0;
      width: 100%;
    }

    // Reposition the close button
    .spark-modal__close {
      bottom: auto;
      color: $modal--fullscreen-xs__close__color;
      top: .75rem;
      right: 0;
      z-index: 100;

      &:hover {
        transform: none;
      }
    }

    // Add padding to the bottom of the header since we removed it for desktop
    .spark-modal__header {
      padding-bottom: 1rem;
    }

    // Make the body scroll and flex
    .spark-modal__body {
      flex: 1;
      overflow: auto;
      position: relative;
      z-index: 0;
    }

    // Padding for the content areas
    .spark-modal__header,
    .spark-modal__body,
    .spark-modal__footer {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    // When the body is snug on the bottom, remove additional padding to the top of the footer if the nav is the first element
    // @deprecated Removing `.spark-modal__nav` in 2.0.0
    .spark-modal__body--snug ~ .spark-modal__footer .spark-modal__nav,
    .spark-modal__body--snug ~ .spark-modal__footer .spark-btn-group,
    .spark-modal__body--snug-bottom ~ .spark-modal__footer .spark-modal__nav,
    .spark-modal__body--snug-bottom ~ .spark-modal__footer .spark-btn-group {
      margin-top: 0;
    }

    // Border for the header
    .spark-modal__header {
      border-bottom: $modal--fullscreen-xs__border;
      padding-top: 1rem;
    }

    // Fixed footer w/ border
    .spark-modal__footer {
      background-color: $modal__background-color;
      border-top: $modal--fullscreen-xs__border;
      flex: 0 0 auto;
      padding-bottom: 1rem;
      width: 100%;
      z-index: 5;
    }

components/number-selector

csss

.spark-number-picker, .spark-number-selector

Deprecated!

Removing .spark-number-picker in 2.0.0

A horizontal number picker

  display: inline-block;
  height: 7rem;
  position: relative;

  label,
  .spark-label {
    color: $number-selector__label__color;
    display: block;
    @include fontsize($number-selector__label__font-size);
    font-weight: $number-selector__label__font-weight;
    line-height: 1rem;
    padding-bottom: 1rem;
  }

  // Number input
  input {
    -moz-appearance: textfield;
    background-color: $number-selector__background-color;
    border: $number-selector__border;
    border-radius: 0;
    color: $number-selector__color;
    float: left;
    @include fontsize(zeta)
    line-height: 3rem;
    height: 5rem;
    margin: 0 -1px;
    padding: 1rem 0;
    text-align: center;
    width: 5rem;

    // Remove the increment and decrement UI
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    // Focus state
    &:focus {
      background-color: $input--active__background-color;
      border: $input--active__border;
      outline: 0;
    }

    &:disabled {
      background-color: $input--disabled__background-color;
      border-color: $white;
      border-width: 0px 2px;
      color: $input--disabled__color;
    }
  }

.spark-number-picker__down, .spark-number-picker__up, .spark-number-selector__down, .spark-number-selector__up

Deprecated!

Removing .spark-number-picker in 2.0.0

Increment/decrement buttons

  float: left;
  height: 5rem;
  padding-left: 0;
  padding-right: 0;
  width: 5rem;

  &::after {
    @extend .spark-icon;
    @extend .spark-icon--fill;
  }

.spark-number-picker__down, .spark-number-selector__down

Deprecated!

Removing .spark-number-picker in 2.0.0

Decrement

  border-radius: $number-selector__border-radius 0 0 $number-selector__border-radius;

  &::after {
    @extend .spark-icon-math-subtract::before;
  }

.spark-number-picker__up, .spark-number-selector__up

Deprecated!

Removing .spark-number-picker in 2.0.0

Increment

  border-radius: 0 $number-selector__border-radius $number-selector__border-radius 0;

  &::after {
    @extend .spark-icon-math-add::before;
  }

components/pagination

csss

.spark-pagination

Pagination navigation

  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  // List of pages
  &__pages {
    display: flex;
    flex: 0 1 auto;
    margin: 1rem;
  }

  // Items in the pages list
  &__item,
  &__ellipsis,
  &__arrow {
    align-items: center;
    border: 3px solid transparent;
    color: $pagination__item__color;
    display: flex;
    flex-wrap: wrap;
    font-weight: 400;
    height: 3rem;
    padding: 0;
    position: relative;
    text-indent: 0;
    transition-property: color, background-color, border-color;
    z-index: 5;

    &[disabled] {
      text-decoration: none;
    }

    &:hover {
      color: $pagination__item--hover__color;
    }

    &:focus,
    &:active,
    &:focus:active,
    &:focus:hover {
      &:not([disabled]) {
        border: 3px solid $pagination__item--focus__border-color;
        padding-bottom: 0;
      }
    }
  }

  // A page link
  &__item {
    background-color: $pagination__item__background-color;
    border-radius: 1.5rem;
    flex: 0 0 auto;
    height: 3rem;
    justify-content: center;
    min-width: 3rem;
    padding: 0 .5rem;

    &--active {
      background-color: $pagination__item--active__background-color;
      color: $pagination__item--active__color;
      font-weight: 500;

      &:hover {
        color: $pagination__item--active__color;
      }
    }
  }

  // Truncation mark
  &__ellipsis {
    color: inherit;
    z-index: 0;
  }

  // Directional arrow
  &__arrow {
    border-radius: .25rem;
    flex: 0 1 auto;
    overflow: hidden;
    padding: 0 1rem;

    &::before,
    &::after {
      align-items: center;
      display: flex;
      flex: 1 0 auto;
      font-family: $icon__font-family--line;
      height: 100%;
    }

    &--previous {
      margin-left: -4px;

      &::before {
        content: '\f10c';
        justify-content: flex-end;
        margin-right: .5rem;
      }
    }

    &--next {
      align-content: flex-end;
      flex-wrap: wrap-reverse;
      margin-right: -4px;

      &::after {
        content: '\f10d';
        justify-content: flex-start;
        margin-left: .5rem;
      }
    }
  }

  // Text inside an arrow to hide when we run out of room
  &__arrow-text {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    height: 100%;
  }

  &__results {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
  }

  // Select input of results
  &__per-page {
    flex: 0 0 auto;
    margin: 0 1rem;

    .spark-select {
      margin-bottom: 0;
    }
  }

  // Results summary
  &__summary {
    flex: 0 0 auto;
    margin: 1rem;
  }

.spark-pagination__ellipsis + .spark-pagination__item--active

Space ellipsis around active items

  margin-left: 1rem;

components/panel

csss

.spark-panel

Panel content container

  background-color: $panel__background-color;
  border: $panel__border;
  border-radius: $panel__border-radius;
  padding: 0 !important;
  width: 100%;

  // Don't round the top corners when we're a list of tab panels
  &.spark-tabs__panels {
    border-radius: 0 0 $panel__border-radius $panel__border-radius;
    border: $tabs--active__border;
    border-top: none;
  }

.spark-panel__header

Panel header

  padding: 1.5rem 2rem;
  position: relative;

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
  }

.spark-panel__masthead

Panel masthead image

  // Image fills the whole width
  img {
    display: block;
    width: 100%;
  }

  // Position numerals in the top corner
  .spark-numerals {
    left: 2rem;
    position: absolute;
    top: 2rem;
    width: calc(100% - 3rem);
    z-index: 10;
  }

  // Add some black on top of the masthead image to allow the copy to pop
  &::after {
    box-shadow: $panel__masthead__box-shadow;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5;
  }

.spark-panel__content

Panel body content

  color: $color-body;
  @include clearfix();
  padding: 2rem;
  width: 100%;

  // No padding if we're also table content
  &.spark-table__scroll,
  &table {
    padding: 0;
  }

  // No bottom margin on the last element
  >:last-child {
    margin-bottom: 0;
  }

.spark-panel--expand

An expandable panel

  border: none;
  overflow: hidden;

  // Heading has a bottom border to separate from content as well as a down arrow.
  .spark-panel__header {
    background: $panel__background-color;
    border: $panel__border;
    border-bottom: $panel__border;
    border-radius: $panel__border-radius;
    box-shadow: $panel--expand__content__shadow;
    color: $panel--expand__header__color;
    cursor: pointer;
    padding-right: 4.25rem;
    position: relative;
    transition-duration: 250ms;
    transition-property: color, border, border-radius;
    transition-timing-function: $ease-in-out-quint;
    user-select: none;
    width: 100%;
    z-index: 10;

    // Headings inherit color instead of being slate blue.
    h1, h2, h3, h4, h5, h6 {
      color: inherit;
    }

    // Focus state
    &:focus {
      outline: none;

      &::after {
        border: $btn--icon--focus__border;
      }
    }

    // Toggle arrow
    &::after {
      @extend [class^='#{$prefix}-icon-']::before;
      @extend .spark-icon-arrow-chevron-down::before;
      border: $btn--icon__border;
      border-radius: $btn--icon__border-radius;
      font-size: 2.25rem;
      margin-right: -.25rem;
      position: absolute;
      right: 2rem;
      top: 50%;
      transform: translateY(-50%) rotate(0deg);
      transform-origin: center center;
      transition: transform 250ms $ease-in-out-quint;
    }

    // Darken on hover
    &:hover {
      border: $panel--expand__header--hover__border;
      color: $panel--expand__header--hover__color;
      z-index: 100;
    }
  }

  // A flexible version of the header
  .spark-panel__header--flex {
    display: flex;
    padding-left: 1rem;
  }

  // Body has a drop shadow and is hidden by default
  .spark-panel__content {
    border: $panel__border;
    border-top: none;
    display: none;
    position: relative;
    z-index: 0;
  }

  // Show the expanded state
  &.expanded {

    // No rounded borders on the bottom
    .spark-panel__header {
      border-radius: $panel__border-radius $panel__border-radius 0 0;
    }

    // Heading arrow rotates
    .spark-panel__header::after {
      transform: translateY(-50%) rotate(180deg);
    }

    // Body becomes visible
    .spark-panel__content {
      display: block;
    }
  }

.spark-panel--card

Card panel

  h6 {
    margin-bottom: .75rem;
  }

  h4 + h6 {
    margin-top: -.25rem;
  }

.spark-panel__content--lg

Large panel content

  padding: 4rem;

.spark-panel-group

A group of panels that should be stacked

  // No borders
  .spark-panel--expand,
  .spark-panel--expand:hover,
  .spark-panel--expand.expanded {
    .spark-panel__header {
      border-radius: 0;
      border-left: 0;
      border-right: 0;
    }
  }

  // Don't double up on borders
  .spark-panel--expand + .spark-panel--expand {
    margin-top: -1px;
  }

components/popover

csss

.spark-popover

Popovers are like tooltips

  @extend .spark-tooltip;

  // But they don't show on hover like a tooltip (unless we're active)
  &:hover:not(.popover-active) {
    .spark-popover__content,
    [class*='spark-popover__content--'],
    .spark-popover__content--left,
    .spark-popover__content--right,
    .spark-popover__content--bottom {
      transform: none;
      display: none;
    }
  }

  // Show the popover when marked as active
  &.popover-active {
    @extend .spark-tooltip.tooltip-active;
  }

.popover-active

Show popover content when it's marked as active

  &.spark-popover__content,
  &[class*='#{$prefix}-popover__content--'] {
    &.animate {
      opacity: 1;
      transform: translate(0, 0);
      display: block;
    }
  }

.spark-popover__content, [class*='#{$prefix}-popover__content--']

Popover content containers

  @extend .spark-tooltip__content;
  background-color: $popover__background-color;
  border: $popover__border;
  border-radius: $popover__border-radius;
  box-shadow: $popover__box-shadow;
  color: $popover__color;
  @include fontsize($popover__font-size);
  line-height: inherit;
  font-weight: inherit;
  left: 0;
  margin-top: -1rem;
  text-transform: none;

  transition-duration: 200ms;
  transition-property: opacity, transform;
  transition-timing-function: $ease-in-out-quint;

  // Since these open on click and not hover, remove the transparent box
  &::before {
    display: none;
  }

  // Hide the after content because the caret is manually inserted
  &::after {
    display: none;
  }

  &.measure {
    display: block;
  }

  &.animate {
    visibility: visible;
    opacity: 0;
    display: block;
  }

  // The caret has to be a real element instead of a pseudo one so that we
  // can set its position in JS.
  .spark-popover__caret {
    @extend .spark-tooltip__content::after;
    background-color: $popover__background-color;
    border-top: $popover__border;
    border-right: $popover__border;
    transition-duration: 100ms;
    transition-property: left, right, bottom, top;
  }

  // Caret on the left
  &[data-anchor='left'] {
    .spark-popover__caret {
      left: 2rem;
    }
  }

  // Caret on the right
  &[data-anchor='right'] {
    .spark-popover__caret {
      left: auto;
      right: 1rem;
    }
  }

  // Caret on top
  &[data-anchor='top'] {
    .spark-popover__caret {
      top: 2rem;
    }
  }

  // Caret on the bottom
  &[data-anchor='bottom'] {
    .spark-popover__caret {
      bottom: 1rem;
      top: auto;
    }
  }

.spark-popover__content, [class*='#{$prefix}-popover__content--'], .spark-popover__content[class*='col-'], [class*='#{$prefix}-popover__content--'][class*='col-']

Win the padding battle over column sizing

  padding: 1rem 2rem;

.spark-popover__content--left

Content to the left of the popover trigger

  @extend .spark-tooltip__content--left;
  margin-top: 0;
  margin-left: -1rem;
  right: auto;
  transform: translate(.5rem, 0);

  .spark-popover__caret {
    @extend .spark-tooltip__content--left::after;
    margin-left: 0;
  }

.spark-popover__content--right

Content to the right of the popover trigger

  @extend .spark-tooltip__content--right;
  margin-top: 0;
  margin-left: 1rem;
  transform: translate(-.5rem, 0);

  .spark-popover__caret {
    @extend .spark-tooltip__content--right::after;
    margin-right: 0;
  }

.spark-popover__content--bottom

Content on the bottom of the popover trigger

  @extend .spark-tooltip__content--bottom;
  bottom: auto;
  margin-top: 1rem;
  transform: translate(0, -.5rem);

  .spark-popover__caret {
    @extend .spark-tooltip__content--bottom::after;
  }

.spark-popover__content--top

Content on the top of the popover trigger

  @extend .spark-tooltip__content--top;
  transform: translate(0, .5rem);

.spark-popover__close

A close button for the popover

  @extend .spark-icon;
  color: inherit;
  position: absolute;
  right: 2rem;
  top: 2rem;

  &::before {
    @extend .spark-icon-close::before;
  }

  &:hover {
    color: $popover--hover__color;
  }

.spark-popover__close--lg

A large close button for the popover

  font-size: 2rem;
  line-height: 2rem;

.spark-popover__close + h1, .spark-popover__close + h2, .spark-popover__close + h3, .spark-popover__close + h4, .spark-popover__close + h5, .spark-popover__close + h6

A heading after a close button should have some padding on the right

  padding-right: 4rem;

.spark-popover__list

A list of popover actions

  color: $popover--color;
  @include fontsize($popover__font-size);
  margin: -1rem -2rem;
  padding: .5rem 0;

.spark-popover__list-item

A popover list item

  @extend .spark-list-item--no-bullet;
  margin: 0;
  line-height: initial;
  position: relative;
  z-index: 5;

  &:hover {
    color: $popover--hover__color;
  }

.spark-popover-group

A group of popovers

  @include clearfix();

  // Children should be grouped together
  .spark-popover {
    float: left;
    margin-right: 1rem;

    &:last-child {
      margin-right: 0;
    }
  }

components/progress-indicator

csss

.spark-progress

Progress indicator.

  position: relative;
  max-width: 100%;
  min-height: 12rem;
  min-width: 12rem;
  width: 12rem;

  // A progress meter inside an indicator.
  // @todo is there a reason this is here and not in the root?
  .spark-progress__meter {
    height: 12rem;
    width: 12rem;
  }

  // Remove default styling from a `<progress>` element.
  progress {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    color: transparent;
    position: absolute;
    display: none;

    // Hide the Firefox styling
    &::-moz-progress-bar {
      background-color: transparent;
    }

    // Hide the webkit styling
    &::-webkit-progress-bar,
    &::-webkit-progress-value {
      background-color: transparent;
    }
  }

  // When the progress element has a value, color the text.
  progress[value] ~ .spark-progress__text {
    color: $progress-indicator--indeterminate__text__color;
    font-weight: 300;

    // Show the states.
    .spark-progress__states {
      display: block;
    }
  }

  // When the progress element has a value, don't spin indeterminately.
  progress[value] ~ .spark-progress__meter::after {
    animation: none;
  }

.spark-progress__meter

The progress meter.

  border-radius: 50%;
  background-color: $progress-indicator__meter__background-color;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  position: relative;

  // White part in the middle.
  &::before {
    background-color: $progress-indicator__background-color;
    border: $progress-indicator__meter__border;
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: calc(100% - 2rem);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 100ms ease-in-out;
    width: calc(100% - 2rem);
    z-index: 5;
  }

  // The filled color
  &::after {
    animation: spin 800ms ease 0s infinite;
    background-color: $progress-indicator__fill__background-color;
    border-radius: 100% 0 0 0;
    content: '';
    display: inline-block;
    height: 50%;
    left: 0;
    position: absolute;
    transform: rotate(90deg);
    transform-origin: bottom right;
    transition: transform 100ms linear;
    width: 50%;
  }

svg.spark-progress__meter

An SVG version of the progress loader. This is created by the JS component.

  background-color: transparent;

  // Colored fill
  .spark-progress__fill {
    stroke: $progress-indicator__fill__background-color;
    stroke-dasharray: 792;
    stroke-dashoffset: 0;
    transition-duration: 100ms;
    transition-timing-function: $ease-in-out-quint;
    transition-property: stroke, stroke-dashoffset;

    // Stop animation. Usually when the value is resetting.
    &.no-animation {
      transition-duration: 0ms;
    }
  }

  // Gray track
  .spark-progress__track {
    stroke: $progress-indicator__meter__background-color;
  }

  // Gray stroke
  .spark-progress__border {
    stroke: $progress-indicator__meter__border-color;
  }

  // Hide the white fill and track pseudo elements
  &::before,
  &::after {
    display: none;
  }

.spark-progress__text

The progress text

  color: $progress-indicator__text__color;
  @include fontsize(epsilon);
  font-weight: 400;

.spark-progress__states

A <ul> of text items to show at different percentages.

  @include fontsize(delta);
  line-height: 1.75rem;
  margin-bottom: -1rem;
  margin-top: .5rem;
  padding: 2rem;
  position: relative;
  z-index: 5;
  width: 100%;

  li {
    @extend .spark-list-item--no-bullet;
    color: $progress-indicator__states__color;
    @include fontsize(zeta);
    margin: 0;
    left: 2rem;
    line-height: initial;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateY(50%);
    transition-duration: 250ms;
    transition-property: opacity transform;
    transition-timing-function: $ease-in-out-quint;
    white-space: nowrap;
    width: calc(100% - 4rem);

    &.active {
      opacity: 1;
      transform: translateY(-50%);
    }
  }

.spark-progress--integrated

A progress indicator with an integrated value and copy.

  // The loading text. Centered.
  .spark-progress__text {
    @include fontsize(epsilon);
    left: 0;
    margin-bottom: 0;
    padding: 2rem;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 100%;
  }

  // Align the states
  .spark-progress__states {
    text-align: center;
  }

.spark-progress--horizontal

A horizontal indicator treatment

  align-items: center;
  display: flex;
  flex-direction: row;
  width: auto !important;

  // Align the text to the left and make sure it always comes after the meter.
  .spark-progress__text {
    flex: 0 1 auto;
    order: 2;
    text-align: left;
  }

  // Make the value text boldish
  .spark-progress__value {
    font-weight: 400;
  }

  // Align the states to the left and tighten up w/ the text
  .spark-progress__states {
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;

    li {
      left: 0;
    }
  }

  // Make sure the meter comes first and add some spacing between it and the text.
  .spark-progress__meter {
    flex: 0 1 auto;
    margin-right: 2rem;
    order: -1;
  }

.spark-progress--lg

A large progress indicator

  min-height: 22.5rem;
  min-width: 22.5rem;
  width: 22.5rem;

  // Make the progress text lighter
  .spark-progress__text {
    font-weight: 300;
  }

  // When the progress element has a value
  progress[value] ~ .spark-progress__text {
    @include fontsize(mega);
  }

  // Make the meter larger.
  .spark-progress__meter {
    height: 22.5rem;
    width: 22.5rem;

    // White part in the middle.
    &::before {
      height: calc(100% - 2rem);
      width: calc(100% - 2rem);
    }
  }

  // Bigger text.
  .spark-progress__text {
    @include fontsize(delta);
  }

  // Bigger state text.
  .spark-progress__states {
    @include fontsize(delta);
    margin-bottom: -2.5rem;

    li {
      white-space: normal;
    }
  }

.spark-progress--sm

A small progress indicator

  height: 5rem;
  width: 5rem;

  // Smaller meter.
  .spark-progress__meter {
    height: 5rem;
    width: 5rem;

    /// White part in the middle.
    &::before {
      height: calc(100% - 1rem);
      width: calc(100% - 1rem);
    }
  }

.spark-progress--xs, .spark-progress.spark-btn

An extra small or button progress indicator

  .spark-progress__meter {
    height: 2rem;
    width: 2rem;

    // Fill part in the middle.
    &::before {
      border: none;
      height: calc(100% - .5rem);
      width: calc(100% - .5rem);
    }
  }

.spark-progress.spark-btn

A button progress indicator

  @extend .spark-btn:hover;
  align-items: center;
  align-content: center;
  cursor: wait;
  height: auto;
  min-height: 0;
  padding-left: 4.75rem;
  width: auto;

  // Hide the bottom border
  &::before {
    display: none;
  }

  // Space out the meter from the text and change the track color
  .spark-progress__meter {
    background-color: $progress-indicator--btn--default__track__background-color;
    left: 2.25rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    // Circle color
    &::before {
      background-color: $btn--default--hover__background-color;
    }

    // Fill color
    &::after {
      background-color: $btn--default__color;
    }
  }

  // Default active state
  &:active {
    background-color: $btn--default--hover__background-color;
  }

  // Secondary button
  &.spark-btn--secondary {
    background-color: $btn--secondary--hover__background-color;
    border: $btn--secondary--hover__border;
    color: $btn--secondary--hover__color;

    .spark-progress__meter {
      background-color: $progress-indicator__meter__background-color;

      &::before {
        background-color: $btn--secondary--hover__background-color;
      }

      &::after {
        background-color: $progress-indicator__fill__background-color;
      }
    }

    &:active {
      background-color: $btn--secondary--hover__background-color;
      border: $btn--secondary--hover__border;
      color: $btn--secondary--hover__color;
    }
  }

  // Secondary button
  &.spark-btn--view-more {
    background-color: $btn--view-more--active__background-color;
    border: $btn--view-more--active__border;
    color: $btn--view-more--active__color;

    .spark-progress__meter {
      background-color: $progress-indicator__meter__background-color;

      &::before {
        background-color: $btn--view-more--active__background-color;
      }

      &::after {
        background-color: $progress-indicator__fill__background-color;
      }
    }

    &.active,
    &:active,
    &.active:hover,
    &:active:hover,
    &.focus,
    &:focus,
    &.focus:hover,
    &:focus:hover,
    &.hover,
    &:hover {
      background-color: $btn--view-more--active__background-color;
      border: $btn--view-more--active__border;
      color: $btn--view-more--active__color;
    }
  }

  // Alternate button
  &.spark-btn--alt {
    background-color: $btn--alt--hover__background-color;
    border: $btn--alt--hover__border;

    .spark-progress__meter {
      background-color: $progress-indicator--btn--alt__track__background-color;

      &::before {
        background-color: $btn--alt--hover__background-color;
      }

      &::after {
        background-color: $btn--alt__color;
      }
    }

    &:active {
      background-color: $btn--alt--hover__background-color;
      border: $btn--alt--hover__border;
    }
  }

.spark-progress--lazy-load

Progress indicator for lazy loading

  // Color the text
  .spark-progress__text {
    color: $btn--view-more--active__color;
    font-weight: $btn--default__font-weight;
    text-transform: uppercase;
  }

  &.spark-progress--disabled {

    // Hide the progress meter
    .spark-progress__meter {
      display: none;
    }

    // Change to a disabled color
    .spark-progress__text {
      color: $btn--default--disabled__color;
      font-weight: $btn--default__font-weight;
      text-transform: uppercase;
    }

  }

components/radio

csss

.spark-radio

Wrapper around the radio input. Generally a label so that clicking on any part of the container triggers the radio.

  // Placeholder disc
  .spark-radio__box {
    border-radius: 50%;
    height: 2rem;
    width: 2rem;

    &::before {
      background-color: $checkbox--active__icon__color;
      border: none;
      border-radius: 50%;
      height: .75rem;
      margin: 0;
      width: .75rem;
    }
  }

components/scroll-to-top

csss

.spark-scroll-to-top

A button that anchors itself to the bottom of the page.

  background-color: $scroll-to-top__background-color;
  border: $scroll-to-top__border;
  border-radius: 50%;
  bottom: 2rem;
  box-shadow: $scroll-to-top__box-shadow;
  cursor: pointer;
  height: 6rem;
  opacity: 0;
  position: fixed;
  right: 2rem;
  transform: scale(0);
  transition-duration: 100ms, 100ms, 100ms, 100ms, 100ms, 200ms, 200ms; // have to put the second 200ms here because transform gets expanded to -webkit-transform below, and w/o both values things get REALLY weird.
  transition-property: background-color, border-color, box-shadow, opacity, visibility, transform;
  transition-timing-function: linear;
  visibility: hidden;
  width: 6rem;
  z-index: 1000;

  &__icon {
    border-top: 1px solid $scroll-to-top__color;
    display: inline-block;
    height: 2.5rem;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: border-color 100ms linear;
    width: 2.15rem;

    &::before {
      border-left: 1px solid $scroll-to-top__color;
      border-top: 1px solid $scroll-to-top__color;
      content: '';
      display: inline-block;
      height: 1.25rem;
      left: 50%;
      position: absolute;
      top: .5rem;
      transform: translateX(-50%) rotate(45deg);
      transition: border-color 100ms linear;
      width: 1.25rem;
    }

    &::after {
      background-color: $scroll-to-top__color;
      height: 2rem;
      content: '';
      display: inline-block;
      left: 50%;
      position: absolute;
      top: calc(.5rem - 2px);
      transform: translateX(-50%);
      transition: background-color 100ms linear;
      width: 1px;
    }
  }

  &:hover {
    border: $scroll-to-top--hover__border;

    .spark-scroll-to-top__icon {
      border-top-color: $scroll-to-top--hover__color;

      &::before {
        border-left-color: $scroll-to-top--hover__color;
        border-top-color: $scroll-to-top--hover__color;
      }

      &::after{
        background-color: $scroll-to-top--hover__color;
      }
    }
  }

  &:focus {
    box-shadow: $scroll-to-top--focus__box-shadow;
    outline: 0;
  }

  &:active {
    background-color: $scroll-to-top--active__background-color;
    box-shadow: $scroll-to-top--active__box-shadow;
  }

  &[disabled] {
    background-color: $scroll-to-top--disabled__background-color;
    border: $scroll-to-top--disabled__border;
    box-shadow: $scroll-to-top--disabled__box-shadow;
    cursor: not-allowed;

    .spark-scroll-to-top__icon {
      border-top-color: $scroll-to-top--disabled__color;

      &::before {
        border-left-color: $scroll-to-top--disabled__color;
        border-top-color: $scroll-to-top--disabled__color;
      }

      &::after{
        background-color: $scroll-to-top--disabled__color;
      }
    }
  }

  &.visible {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
  }

  &.at-bottom {
    position: absolute;
  }

components/select-input

csss

.spark-select

Wrapper for a select element. Generally should be a <label>.

  background-color: $select__background-color;
  border-radius: $select__border-radius;
  color: $select__color;
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0;
  position: relative;
  transition-duration: 100ms;
  transition-property: border;
  transition-timing-function: $ease-in-out-quint;
  width: 100%;

  // On hover
  &:hover {
    background-color: $select--hover__background-color;

    .spark-label {
      &::after {
        border-top-color: $select--hover__arrow__background-color;
      }
    }

    .spark-select__input:not([disabled]) {
      border: $select--hover__border;
      color: $select--hover__color;
    }
  }

  // When we are active
  &.active {
    background-color: $select--active__background-color;

    .spark-select__input {
      border: $select--active__border;
      color: $select--active__color;
    }

    .spark-label {
      color: $select--active__label__color;
    }

    // Used with multiple selects to create a fill behind the label text
    .spark-select__input[multiple] ~ .spark-label::before {
      background-color: $select--active__background-color;
    }
  }

  // When the container has a state, show it below.
  &[data-error],
  &[data-success],
  &[data-warning] {
    border-radius: $select__border-radius $select__border-radius 0 0;

    .spark-select__input {
      border-radius: $select__border-radius $select__border-radius 0 0;
    }

    // Fade in and scale up the message.
    .spark-select__message {
      display: block;
      opacity: 1;
      position: relative;
      transform: scaleY(1);
      transition-delay: 100ms, 0ms, 0ms;
      transition-duration: 0ms, 100ms, 100ms;
    }

    &:hover:not(.has-value) {
      .spark-label {
        color: $select--state__label__color;
      }
    }
  }

  // When the container has an error state, show it below.
  &[data-error] {
    .spark-select__input,
    .spark-select__input:hover {
      border-color: $color-state-danger;
      color: $color-state-danger;
    }

    .spark-select__message {
      background-color: $color-state-danger;
    }
  }

  // When the container has an warning state, show it below.
  &[data-warning] {
    .spark-select__input,
    .spark-select__input:hover {
      border-color: $color-state-warning;
      color: $color-state-warning;
    }

    .spark-select__message {
      background-color: $color-state-warning;
    }
  }

  // When the container has an success state, show it below.
  &[data-success] {
    .spark-select__input,
    .spark-select__input:hover {
      border-color: $color-state-success;
      color: $color-state-success;
    }

    .spark-select__message {
      background-color: $color-state-success;
    }
  }

.spark-select__input

Remove the default styling from a select box

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: $select__border;
  border-radius: $select__border-radius;
  color: $select__selected-option__color;
  cursor: pointer;
  display: block;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.35rem;
  margin: 0;
  padding: 1.75rem 1rem;
  position: relative;
  transition-duration: 100ms;
  transition-property: color;
  transition-timing-function: $ease-in-out-quint;
  width: 100%;
  z-index: 5;

  // Remove outline on focus
  &:focus {
    outline: 0;
  }

  // Remove inner focus dotted line from Firefox
  &::-moz-focus-inner {
    border: 0;
    outline: 0;
  }

  // Remove IE caret
  &::-ms-expand {
    display: none;
  }

  // A basic version of the select w/o a label
  .spark-select--no-label & {
    padding: 1rem 2rem 1rem 1rem !important;
    line-height: 2rem;
  }

.spark-select.disabled .spark-select__input, .spark-select__input:disabled

When disabled, gray out the select input.

  background-color: $select--disabled__background-color;
  border: $select--disabled__border;
  color: $select--disabled__color;
  cursor: not-allowed;

.spark-select.disabled .spark-label, .spark-select__input:disabled ~ .spark-label

When disabled, make the label non-actionable.

  color: $select--disabled__color;
  cursor: not-allowed;
  z-index: 10;

  &::after {
    border-top-color: $select--disabled__color;
  }

.spark-select, .spark-select-group

Labels inside of a group or select

  // Position the label below the actual select box
  .spark-label {
    border: 1px solid transparent;
    box-sizing: border-box;
    color: $select__label__color;
    font-weight: $select__font-weight;
    height: 5rem;
    left: 0;
    padding: 1.375rem 2rem 0 1rem;
    position: absolute;
    top: 0;
    transition-duration: 100ms;
    transition-property: font-size, color, padding;
    transition-timing-function: $ease-in-out-quint;
    z-index: 0;
    width: 100%;

    // Add the caret
    &::after {
      border-color: transparent;
      border-style: solid;
      border-top-color: $select__arrow__background-color;
      border-width: .5rem;
      border-top-width: .75rem;
      content: '';
      display: inline-block;
      position: absolute;
      right: 1rem;
      top: 1.55em;
      transition-duration: 100ms;
      transition-property: color, top;
      transition-timing-function: $ease-in-out-quint;
    }
  }

.spark-select__message

The select message is the same as the input message

  @extend .spark-input__message;

.spark-select-group, .spark-select.active, .spark-select.has-value

Adjust the padding on inputs inside of active selects or a select group

  // Add padding on the top so the label has somewhere to sit
  .spark-select__input:not([multiple]) {
    padding: 2.75rem 2rem .75rem 1rem;
  }

  // Slide the label up
  .spark-label {
    @include fontsize(eta);
    padding-top: .5rem;

    &::after {
      border-top-color: $select--has-value__arrow__background-color;
      top: 2.1rem;
    }
  }

.spark-select-group

A group of select inputs should fit all its content

  display: flex;
  position: relative;

  // Flex each input.
  .spark-select {
    flex: 1;
    margin-bottom: 0;

    // Don't slide the label text up
    .spark-label {
      color: $select__label__color;
      font-size: inherit;
      line-height: 1.1rem;
      padding: 2.75rem 2rem .75rem 1rem;

      // Scale the caret
      &::after {
        top: 2.75rem;
        transform: scale(.75);
      }
    }

    // Add borders to the first and last two select elements (to account for a label)
    &:first-child:not(:hover):not(.active) .spark-select__input {
      border-left: $select__border;
    }

    &:last-child:not(:hover):not(.active) .spark-select__input,
    &:nth-last-child(2):not(:hover):not(.active) .spark-select__input {
      border-right: $select__border;
    }

    // Round the edges of the first and last select
    &:first-child .spark-select__input {
      border-radius: $select__border-radius 0 0 $select__border-radius;
    }

    &:last-child .spark-select__input,
    &:nth-last-child(2) .spark-select__input {
      border-radius: 0 $select__border-radius $select__border-radius 0;
    }

    // Hide the label of an input when that input has a value. We have to do this
    // because
    &.has-value {
      .spark-label {
        color: transparent;
        transition-duration: 0ms;
      }
    }
  }

  // Remove borders from the inputs
  .spark-select__input {
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 0;
    padding-top: 2.25rem;
  }

  // The top-level label should have no caret
  > .spark-label {
    &::after {
      display: none;
    }
  }

  // A top-level label that follows any select that is active
  .spark-select.active ~ .spark-label {
    color: $select--active__label__color;
  }

components/select-input--multiple

csss

.spark-select--multiple

A multiple select input

  position: relative;
  display: block;
  background: $select--multiple__background-color;
  &.spark-select--multiple--no-title {
    .spark-select--multiple__input {
      padding: 0;
    }
  }

  &.active {
    background: $select--multiple__background-color;
    .spark-select--multiple__label {
      border-top: $select--multiple--active__border;
      border-left: $select--multiple--active__border;
      border-right: $select--multiple--active__border;
    }
  }
  &:not(.spark-select--multiple--no-title) {
    .spark-select--multiple__input:not([disabled]) {
      border-top: $select--multiple__border--input-top !important;
    }
  }

  .spark-select--multiple__input {
    padding: 0;
    position: relative;
    z-index: 8;
    background: transparent;
    display: block;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    border-left: $select--multiple__border;
    border-right: $select--multiple__border;
    border-bottom: $select--multiple__border;
    border-radius: $select--multiple__border-radius;
    color: $select--multiple__color;
    @include fontsize(zeta);


    &:hover:not([disabled]) {
      ~ .spark-select--multiple__label {
        border-left: $select--multiple--hover__border;
        border-right: $select--multiple--hover__border;
      }
      border: $select--multiple--hover__border;
    }

    &:not([disabled]) + .spark-select--multiple__label:hover {
      border-left: $select--multiple--hover__border;
      border-right: $select--multiple--hover__border;
      cursor: pointer;
    }

    &[disabled] {
      overflow-y: hidden;
      background-color: $select--multiple--disabled__background-color;
      border: $select--multiple--disabled__border;
      color: $select--multiple--disabled__color;
      padding-top: 5rem;
      cursor: not-allowed;

      ~ .spark-select--multiple__label {
        background-color: $select--multiple--disabled__background-color;
        border: $select--multiple--disabled__border;
        color: $select--multiple--disabled__color;
        cursor: not-allowed;
        z-index: 8;
        &::after {
          border-top-color:$select--multiple--disabled__color;
        }
      }
    }

    &:not([disabled]) {
      &[data-error],
      &[data-success],
      &[data-warning] {
        border-radius: $select--multiple__border-radius $select--multiple__border-radius 0 0;

        // Fade in and scale up the message.
        & ~ .spark-select__message {
          display: block;
          opacity: 1;
          position: relative;
          transform: scaleY(1);
          transition-delay: 100ms, 0ms, 0ms;
          transition-duration: 0ms, 100ms, 100ms;
        }
      }

      &[data-error] {
        &,
        &:hover {
          &, ~ .spark-select--multiple__label, ~ .spark-select--multiple__label:hover {
            border-color: $color-state-danger;
          }
        }

        ~ .spark-select__message {
          background-color: $color-state-danger;
        }
      }

      // When the container has an warning state, show it below.
      &[data-warning] {
        &,
        &:hover {
          &, ~ .spark-select--multiple__label, ~ .spark-select--multiple__label:hover {
            border-color: $color-state-warning;
          }
        }

        ~ .spark-select__message {
          background-color: $color-state-warning;
        }
      }

      // When the container has an success state, show it below.
      &[data-success] {
        &,
        &:hover {
          &, ~ .spark-select--multiple__label, ~ .spark-select--multiple__label:hover {
            border-color: $color-state-success;
          }
        }

        ~ .spark-select__message {
          background-color: $color-state-success;
        }
      }
    }
  }

  .spark-select--multiple__label {
    @include fontsize(zeta);
    position: absolute;
    top: 0;
    left: 0;
    border-top: $select--multiple__border;
    border-left: $select--multiple__border;
    border-right: $select--multiple__border;
    border-bottom: $select--multiple__border;
    border-radius: $select--multiple__border-radius $select--multiple__border-radius 0 0;
    padding: 2rem 1rem;
    z-index: 6;
    background: $select--multiple__background-color;
    width: 100%;
    line-height: 1rem;
    @include media-breakpoint-down(xs) {
      &::after {
        border-color: transparent;
        border-style: solid;
        border-top-color: $select__arrow__background-color;
        border-width: .5rem;
        border-top-width: .75rem;
        content: '';
        display: inline-block;
        position: absolute;
        right: 1rem;
        top: 1.55em;
        transition-duration: 100ms;
        transition-property: color, top;
        transition-timing-function: $ease-in-out-quint;
      }
    }

    .spark-select--multiple__label--small {
      @include fontsize(eta);
    }
  }

  &.has-value.active {
    .spark-select--multiple__label {
      color: $select--multiple--active__label__color;
    }
  }

  .spark-select--multiple__input[disabled] {
    optgroup,
    option {
      color: $select--multiple--disabled__color;
    }
  }

  optgroup,
  option {
    padding: .75rem;
    @include fontsize(eta);
    font-family: $body__font_family;
    font-weight: 300;

    &:checked {
      font-weight: bold;
    }
  }

components/slider

csss

.spark-slider, .spark-slider--integrated

Sliders without a visible input

  position: relative;

  // Hide the input
  input {
    opacity: 0;
    position: absolute;
    visibility: hidden;
  }

.spark-slider--integrated

Slider container with the big handle

  // Special inset shadow for the handle
  .spark-slider__handle {
    border-radius: 2rem;
    bottom: 0;
    box-shadow: $slider__handle__box-shadow;
    height: 4rem;
    margin-left: -2rem;
    margin-top: -2rem;
    overflow: hidden;
    top: auto;
    width: 4rem;

    // Show value in the handle
    &::before {
      content:  attr(data-prefix) '' attr(data-value);
      position: relative;
      text-align: center;
      transform: none;
      transition: transform 100ms $ease-in-out-quint;
      width: 100%;
      z-index: 5;
    }

    // Disc to show when we're active
    &::after {
      background-color: $slider--active__handle__disc__background-color;
      border-radius: 2rem;
      content: '';
      height: 4rem;
      left: 0;
      margin: -1px;
      opacity: 0;
      position: absolute;
      top: 3.5rem;
      transition: opacity 100ms $ease-in-out-quint;
      width: 4rem;
      z-index: 0;
    }

    // Hover border color
    &:hover {
      box-shadow: $slider--integrated--hover__handle__box-shadow;
    }

    // Grow the handle when we're focused or active
    &:focus,
    &:active,
    &.active {
      border: $slider--active__handle__border;
      box-shadow: $slider--integrated--active__handle__box-shadow;
      height: 7.5rem;

      &::before {
        transform: translateY(-1.75rem);
      }

      &::after {
        opacity: 1;
      }
    }
  }

  // Stop the handle from popping up when the input is disabled.
  input:disabled ~ .spark-slider__controls .spark-slider__handle {
    &:focus,
    &:active,
    &.active {
      height: 4rem;
      transform: none;

      &::before {
        transform: none;
      }

      &::after {
        opacity: 0;
      }
    }
  }

.spark-slider, .spark-slider--integrated, .spark-slider--input

Disabled state on all versions of the slider.

  // Gray out the handle and track
  input:disabled,
  input:disabled ~ .spark-slider__controls .spark-slider__handle,
  input:disabled ~ .spark-slider__controls .spark-slider__track::before {
    background-color: $slider--disabled__track__background-color;
    border: $slider--disabled__track__border;
    box-shadow: none;
    color: $slider--disabled__color;
    cursor: not-allowed;
  }

  // Don't show the track filling
  input:disabled ~ .spark-slider__controls .spark-slider__track-fill {
    display: none;
  }

.spark-slider, .spark-slider--input, .spark-range-slider

Sliders with a visible input and the range slider

  position: relative;

  // Number input that is on the right of a regular slider and beneath on the range slider
  input {
    -moz-appearance: textfield;
    background-color: $input__background-color;
    border: $input__border;
    border-radius: $input__border-radius;
    color: $input__color;;
    @include fontsize(zeta);
    font-weight: 400;
    text-align: center;
    transition: all 100ms $ease-in-out-quint;

    // Remove the increment and decrement UI
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &:focus {
      background-color: $input--active__background-color;
      border: $input--active__border;
      outline: 0;
    }
  }

  // Make the controls a little taller than default
  .spark-slider__controls {
    height: 3rem;
  }

  // Handles are smaller
  .spark-slider__handle {

    // Don't show the extra nubbin
    &::after {
      display: none;
    }

    // Don't raise up when active
    &:focus,
    &:active,
    &.active {
      &::before {
        transform: none;
      }
    }
  }

.spark-slider--input

Slider with a number input

  display: flex;
  flex-flow: wrap;

  // The input has to come before the other elements so our :disabled ~ selectors work,
  // but it needs to appear after so we take advantage of flexbox.
  input {
    flex-grow: 1;
    order: 2;
    width: 0;
  }

  // If there is a label, it needs to take up the entire line by itselft
  label,
  .spark-label {
    flex-basis: 100%;
  }

  // Make the controls 4x as big as the input.
  .spark-slider__controls {
    flex-grow: 4;
    margin-right: 2rem;
    order: 1;
  }

  // When the slider is active, gray out the input
  &.active {
    input {
      background-color: $input--active__background-color;
      border: $input--active__border;
    }
  }

.spark-range-slider

A range of sliders

  display: flex;
  flex-flow: row wrap;

  // Have to specify the input height because they're now on their own
  // line and don't get the height of the slider__controls.
  input {
    flex-grow: 4;
    height: 3rem;
    order: 4;
    width: 0;
  }

  // Set width to 100% so the inputs get pushed to a new line
  .spark-slider__controls {
    margin-bottom: 1rem;
    order: 1;
    width: 100%;
  }

  // Divider that goes between input elements.
  .spark-range-slider__input-divider {
    align-items: center;
    display: inline-block;
    flex-grow: 1;
    font-weight: 400;
    line-height: 3rem;
    order: 4;
    text-align: center;

    &::before {
      content: '—';
    }
  }

  // Kind of a hacky solution for styling the active state
  // on an input when the handle is moving. This assumes there
  // will never be more than 5 items on a track.
  &[data-active-index='0'] input:nth-of-type(1),
  &[data-active-index='1'] input:nth-of-type(2),
  &[data-active-index='2'] input:nth-of-type(3),
  &[data-active-index='3'] input:nth-of-type(4),
  &[data-active-index='4'] input:nth-of-type(5) {
    background-color: $input--active__background-color;
    border: $input--active__border;
  }

  // If all the inputs are disabled
  &.all-disabled {

    // Gray out the track
    .spark-slider__controls .spark-slider__track::before {
      background-color: $input--disabled__background-color;
      border: $input--disabled__border;
      box-shadow: none;
      color: $input--disabled__color;
      cursor: not-allowed;
    }

    // Hide the track fill
    .spark-slider__controls .spark-slider__track-fill {
      display: none;
    }
  }

  // Gray out the handles and inputs
  input:disabled,
  .spark-slider__handle.disabled {
    background-color: $input--disabled__background-color;
    border: $input--disabled__border;
    box-shadow: none;
    color: $input--disabled__color;
    cursor: not-allowed;
  }

.spark-slider__controls

The handle(s) and track

  height: 4rem;
  position: relative;

.spark-slider__handle

Handle for the slider

  align-items: center;
  background-color: $slider__handle__background-color;
  border: $slider__handle__border;
  border-radius: 1rem;
  box-orient: vertical;
  box-shadow: $slider__handle__box-shadow;
  color: $slider__handle__color;
  cursor: pointer;
  display: flex;
  @include fontsize(zeta);
  font-weight: 400;
  height: 2rem;
  justify-content: center;
  margin-left: -1rem;
  margin-top: -1rem;
  padding: 0;
  position: absolute;
  top: 50%;
  transform-origin: center bottom;
  transition-duration: 100ms;
  transition-property: background-color, border, box-shadow, color, transform, height, border-radius;
  transition-timing-function: $ease-in-out-quint;
  width: 2rem;
  z-index: 5;

  // Remove outline because the handle is a button.
  // @todo this should have some kind of different styling most likely.
  &:focus {
    outline: 0;
  }

  // Hover background and border color
  &:hover {
    background-color: $slider--hover__handle__background-color;
    border: $slider--hover__handle__border;
    box-shadow: $slider--hover__handle__box-shadow;
    color: $slider--hover__handle__color;
  }

  // Change color on active
  &:focus,
  &:focus:hover,
  &:active,
  &:active:hover,
  &.active {
    background-color: $slider--active__handle__background-color;
    border: $slider--active__handle__border;
    box-shadow: $slider--active__handle__box-shadow;
    color: $slider--active__handle__color;
  }
  &:focus,
  &:focus:hover {
    box-shadow:$slider--default--focus__box-shadow;
  }

.spark-slider__track

Track

  border-radius: .75rem;
  content: '';
  cursor: pointer;
  display: inline-block;
  height: .5rem;
  left: 0;
  margin-top: -.25em;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transition: all 100ms $ease-in-out-quint;
  width: 100%;
  z-index: 0;

.spark-slider__track::before, .spark-slider__track-fill

Common rules for the track and the fill

  box-sizing: border-box;
  content: '';
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;

.spark-slider__track::before

The gray base of the track

  background-color: $slider__track__background-color;
  border: $slider__track__border;
  border-radius: .75rem;
  width: 100%;

.spark-slider__track-fill

The colored part of the track

  background-color: $slider__track-fill__background-color;
  border: $slider__track-fill__border;
  border-radius: .75rem 0 0 .75rem;
  width: 0;

.spark-slider--secondary

Secondary slider styles

  // Handle for the slider
  .spark-slider__handle {
    background-color: $slider--secondary__handle__background-color;
    border: $slider--secondary__handle__border;
    box-shadow: $slider--secondary__handle__box-shadow;
    color: $slider--secondary__handle__color;

    // Hover background and border color
    &:hover {
      background-color: $slider--secondary--hover__handle__background-color;
      border: $slider--secondary--hover__handle__border;
      box-shadow: $slider--secondary--hover__handle__box-shadow;
      color: $slider--secondary--hover__handle__color;
    }

    // Change color on active
    &:focus,
    &:focus:hover,
    &:active,
    &:active:hover,
    &.active {
      background-color: $slider--secondary--active__handle__background-color;
      border: $slider--secondary--active__handle__border;
      box-shadow: $slider--secondary--active__handle__box-shadow;
      color: $slider--secondary--active__handle__color;
    }
  }

  // The gray base of the track
  .spark-slider__track::before {
    background-color: $slider--secondary__track__background-color;
    border: $slider--secondary__track__border;
  }

  // The colored part of the track
  .spark-slider__track-fill {
    background-color: $slider--secondary__track-fill__background-color;
    border: $slider--secondary__track-fill__border;
  }

  // Integrated value style
  &.spark-slider--integrated {

    // Special inset shadow for the handle
    .spark-slider__handle {
      box-shadow: $slider--secondary__handle__box-shadow;

      // Disc to show when we're active
      &::after {
        background-color: $slider--secondary--active__handle__disc__background-color;
      }

      // Hover border color
      &:hover {
        box-shadow: $slider--secondary__hover__handle__box-shadow;
      }

      // Grow the handle
      &:focus,
      &:active,
      &.active {
        background-color: $slider--secondary__handle__background-color;
        border: $slider--secondary--active__handle__border;
        box-shadow: $slider--secondary--active__handle__box-shadow;
      }
    }
  }

.spark-slider, .spark-slider--input, .spark-slider--integrated, .spark-slider--secondary, .spark-range-slider

Slider label

  margin-bottom: 1rem;

  label,
  .spark-label {
    color: $slider__label__color;
    @include fontsize($slider__label__font-size);
    font-weight: $slider__label__font-weight;
    line-height: 1rem;
    padding-bottom: 1rem;
  }

components/splash-screen

csss

.spark-splash-screen

Wrapper should always be at least the height of the viewport

  background-color: $splash-screen__background-color;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  // Raise all direct children above the angle
  > * {
    position: relative;
    z-index: 5;
  }

  // 24º angle
  &::before {
    background-color: $splash-screen__angle__background-color;
    bottom: 0;
    content: '';
    display: block;
    height: 15000px;
    left: 10%;
    position: absolute;
    top: 100%;
    transform: rotate(-24deg);
    transform-origin: top left;
    width: 15000px;
    z-index: 0;
  }

  // Vignette
  &::after {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%,rgba(0,0,0,0.3) 100%);
    content: '';
    display: block;
    left: 0;
    height: 100%;
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 0;
  }

.spark-splash-screen__content

Take up as much space as possible

  align-items: center;
  color: $splash-screen__color;
  display: flex;
  flex: 1 0 auto;
  padding: 2rem;

  // A panel inside of the content has a stroke
  .spark-panel {
    border: $splash-screen__panel__border;
  }

  // Panel content has more padding
  > .spark-splash-screen__center > .spark-panel__content {
    padding: 3rem;
  }

.spark-splash-screen__heading

Heading text

  color: inherit;
  margin-top: 1rem;

.spark-splash-screen__center

Center content vertically and horizontally

  margin: 0 auto;
  text-align: center;
  width: 100%;

.spark-splash-screen__progress

Progress indicator inside splash screen

  margin: 4rem auto 0;
  min-width: auto;

.spark-splash-screen--sign-in

Sign-in Page

  // Additional padding for the content
  > .spark-splash-screen__center > .spark-panel__content {
    margin: 0 auto;
    padding: 5rem 3rem;
  }

  .spark-splash-screen__help {
    clear: both;
    float: left;
  }

  // A progress indicator inside a splash screen is hidden by default within a sign in screen
  .spark-splash-screen__progress {
    display: none;
  }

  // Show the progress indicator when loading
  &.loading {
    .spark-splash-screen__form {
      display: none;
    }

    .spark-splash-screen__progress {
      display: block;
    }
  }

components/step-indicator

csss

.spark-step-indicator

Step indicator.

  max-height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;

components/table

csss

.spark-table

Table container

  // Tables should fill the whole width
  table {
    background-color: $table__background-color;
    border-collapse: collapse;
    border: 1px solid $table__border-color;
    border-radius: $panel__border-radius;
    margin-bottom: 5rem;
    overflow: hidden;
    width: 100%;
  }

  // Pad out each cell
  .spark-table-heading__piece,
  th,
  td {
    box-sizing: border-box;
    height: 5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    position: relative;
    vertical-align: middle;

    // Allow wrapping of cell content
    &.wrap {
      white-space: normal;
    }

    // Pad out the right of the last child
    &:last-child {
      padding-right: 1.5rem;
    }

    // Negative margin on large icons so the cells have the right height
    .spark-icon--lg {
      margin: -1rem 0;
    }

    // Remove default input styling
    input:not([type="checkbox"]),
    select {
      background-color: transparent;
      color: inherit;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      transition-duration: 100ms;
      transition-property: color, background-color, border-colo;

      &:focus {
        outline: 0;
      }
    }

    // Messaging
    &[data-error],
    &[data-info],
    &[data-warning],
    &[data-success] {
      padding-left: 5rem;
      position: relative;

      .spark-table__status-icon {
        font-family: $icon__font-family--fill;
        font-size: 2rem;
        left: 2rem;
        line-height: 5rem;
        position: absolute;
        top: 0;
      }

      .spark-table__status-wrapper {
        input:not([type="checkbox"]),
        select {
          margin-left: .75rem;
          margin-top: calc(1px + .25rem);
          width: calc(100% - 1.5rem);
        }
      }

      input:not([type="checkbox"]),
      select {
        &:focus {
          ~ .spark-table__status-message {
            display: block;
          }
        }
      }
    }

    &[data-info] {

      // Icon
      .spark-table__status-icon {
        color: $message--info__icon__background-color;

        &::before {
          content: '\f188';
        }
      }

      // Text
      .spark-table__status-message {
        background-color: $message--info__message__background-color;
        color: $message--info__message__color;
      }
    }

    /// Warning message
    &[data-warning] {

      // Icon
      .spark-table__status-icon {
        color: $message--warning__icon__background-color;

        &::before {
          content: '\f104';
        }
      }

      // Text
      .spark-table__status-message {
        background-color: $message--warning__message__background-color;
        color: $message--warning__message__color;
      }
    }

    /// Error message
    &[data-error] {

      // Icon
      .spark-table__status-icon {
        color: $message--error__icon__background-color;

        &::before {
          content: '\f11a';
        }
      }

      // Text
      .spark-table__status-message {
        background-color: $message--error__message__background-color;
        color: $message--error__message__color;
      }
    }

    /// Success message
    &[data-success] {

      // Icon
      .spark-table__status-icon {
        color: $message--success__icon__background-color;

        &::before {
          content: '\f178';
        }
      }

      // Text
      .spark-table__status-message {
        background-color: $message--success__message__background-color;
        color: $message--success__message__color;
      }
    }
  }

  // Reset input styles for non-spreadsheet tables
  &:not(.spark-table--spreadsheet) {

    th, td {

      // Text inputs get a border
      input:not([type="checkbox"]) {
        border: 1px solid transparent;
        border-radius: .25rem;
        margin: -1rem -1.25rem;
        padding: 1.25rem 1rem;
        width: calc(100% + 2.5rem);
      }
    }
  }

  // Messaging for full-sized tables
  &:not(.spark-table--spreadsheet):not(.spark-table--condensed) {

    th, td {
      &[data-error],
      &[data-info],
      &[data-warning],
      &[data-success] {
        > input:not([type="checkbox"]),
        > select {
          margin-left: -4.25rem;
          width: calc(100% + 5.5rem);
        }

        input:not([type="checkbox"]),
        select {
          padding-left: 4rem;
        }

        .spark-table__status-message {
          border-radius: 0 0 .25rem .25rem;
          margin-left: .75rem;
          margin-top: -.5rem;
          padding: .75rem;
          width: calc(100% - 1.5rem);
        }
      }
    }
  }

  // Add input borders for non-spreadsheet and editable row tables
  &:not(.spark-table--spreadsheet):not(.spark-table--edit-rows),
  &.spark-table--edit-rows .editing {

    th, td {

      // Text inputs get a border
      input:not([type="checkbox"]) {
        border: 1px solid $table__input__border-color;

        &:hover {
          background-color: $table__input--hover__background-color;
          border: 1px solid $table__input--hover__border-color;
          color: $table__input--hover__color;
        }

        &:focus:not([readonly]) {
          background-color: $table__input--editing__background-color;
          border: 1px solid $table__input--editing__border-color;
          color: $table__input--focus__color;
        }
      }

      &[data-error] {
        input:not([type="checkbox"]) {
          &,
          &:hover,
          &:focus {
            border-color: $message--error__icon__background-color;
          }
        }
      }

      &[data-warning] {
        input:not([type="checkbox"]) {
          &,
          &:hover,
          &:focus {
            border-color: $message--warning__icon__background-color;
          }
        }
      }

      &[data-success] {
        input:not([type="checkbox"]) {
          &,
          &:hover,
          &:focus {
            border-color: $message--success__icon__background-color;
          }
        }
      }

      &[data-info] {
        input:not([type="checkbox"]) {
          &,
          &:hover,
          &:focus {
            border-color: $message--info__icon__background-color;
          }
        }
      }
    }
  }

  // Fill the background color of the whole heading
  thead {
    background-color: $table__head__background-color;

    tr {
      border-bottom: 1px solid $table__head__border-color;
    }

    // Color all `<th>` when we hover. This will color all elements except that
    // which is also being hovered over.
    tr:hover {
      th:not(.spark-table__disabled-column) {
        color: $table__head--hover__color;
      }

      // When a heading is hovered over, maintain its color.
      th:hover:not(.spark-table__disabled-column) {
        color: $table__head__color;
      }
    }
  }

  // Active and hover states for rows in the body
  tbody {
    position: relative;

    tr {
      cursor: pointer;
      transition-duration: 100ms;
      transition-property: background;

      &:hover {
        background: linear-gradient(to bottom, $table--hover__background-color 0,$table--hover__background-color 100%);
        color: $table--hover__color;
      }

      &.active {
        background: linear-gradient(to bottom, $table--active__background-color 0,$table--active__background-color 100%);
        border-bottom: 1px double $table--active__border-color;
        border-top: 1px double $table--active__border-color;
        color: $table--active__color;

        td {
          border-right-color: $table--active__border-color;
        }
      }

      &:first-child:not(:hover):not(.active) {
        background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0,rgba(0,0,0,0) 1rem);
      }
    }
  }

  // Table headings
  .spark-table-heading__piece,
  th {
    border-right: 1px solid $table__head__border-color;
    color: $table__head__color;
    cursor: default;
    @include fontsize($table__head__font-size);
    font-weight: $table__head__font-weight;
    text-transform: $table__head__text-transform;
    transition: color 100ms $ease-in-out-quint;
    white-space: nowrap;
  }

  // Sortable items should have a pointer cursor
  .spark-table-heading__piece,
  th[data-sort] {
    cursor: pointer;
  }

  // Sortable rows
  .spark-table-heading__piece[data-sort='desc'],
  .spark-table-heading__piece[data-sort='asc'],
  th[data-sort='desc'],
  th[data-sort='asc'] {
    font-weight: $table__head--sorted__font-weight;

    // Arrow icon
    &::after {
      @extend [class^='#{$prefix}-icon-']::before;
      @extend .spark-icon-arrow-basic-down::before;
      @extend .spark-icon--fill::before;
      transform: rotate(0deg);
      transition: transform 100ms $ease-in-out-quint;
    }

    // Animate the arrow changing direction on hover
    &:hover {
      &::after {
        transform: rotate(-180deg);
      }
    }
  }

  // Ascending arrow
  .spark-table-heading__piece[data-sort="asc"],
  th[data-sort="asc"] {
    &::after {
      transform: rotate(-180deg);
    }

    &:hover {
      &::after {
        transform: rotate(0deg);
      }
    }
  }

  // Add a bottom border to each cell in each row.
  tr {
    border-top: 1px solid $table__border-color;
    border-bottom: 1px solid $table__border-color;
    transition-duration: 100ms;
    transition-property: background-color, border, color;
    transition-timing-function: $ease-in-out-quint;

    td, th, .spark-table-heading__piece {
      transition-duration: 100ms;
      transition-property: border, color;
      transition-timing-function: $ease-in-out-quint;

      // First item in a row should have a left border
      &:first-child {
        border-left: 1px solid transparent;
      }

      // Last item in a row should have a left border
      &:last-child {
        border-right: 1px solid transparent;
      }
    }
  }

  // Grouped headings
  th.spark-table-heading {
    padding: 0;

    &[colspan="2"] {
      .spark-table-heading__piece {
        width: 50%;
      }
    }
  }

  .spark-table-heading__group {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }

  // Full width piece of the heading group
  .spark-table-heading__full {
    background-color: $table__head__border-color;
    border-right: none;
    flex-shrink: 0;
    font-weight: 400;
    height: 50%;
    text-transform: none;
    width: 100%;
  }

  // Piece of the heading group
  .spark-table-heading__piece {
    flex: 1 1 auto;
    height: 50%;

    &:last-child {
      border-right: none;
    }
  }

.spark-table__no-border

No border on a cell

  border: none !important;

.spark-table__header

Table heading. Distribute the items and align the nav to the right.

  align-items: center;
  display: flex;
  width: 100%;

  .spark-table__title {
    flex: 1;
  }

  .spark-table__nav {
    flex: 1;
  }

.spark-table__scroll

Wrap a <table> el in a scroll container so that it overflows gracefully.

  overflow-x: auto;

  // When it's also panel content, no padding.
  &.spark-panel__content {
    padding: 0;
  }

.spark-table__checkbox

The checkbox in a row

  line-height: 1;
  width: 1rem;

.spark-table__row

Table rows with specific styles

  &--align-top {
    td {
      padding-bottom: 1.5rem;
      padding-top: 1.5rem;
      vertical-align: top;
    }
  }

.spark-table__actions, .spark-table__actions--icons

Adjust margins on buttons inside of the actions group.

  white-space: nowrap;
  width: 2rem;

  // Actionable looking buttons
  [class*='spark-btn'] {
    cursor: pointer;
  }

.spark-table__actions--icons

A group of icons

  .spark-btn--icon {
    margin: -1rem 0;
    line-height: 3rem;
  }

.spark-table__edit-actions

Actions to display when editing a row

  display: flex;
  height: 100%;
  margin: 0;
  min-height: calc(5rem - 1px);
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition-duration: 100ms;
  transition-property: opacity, transform;
  visibility: hidden;
  width: auto;

  // Drop shadow
  &::before {
    background: $table__edit-actions__background;
    content: '';
    display: block;
    height: 100%;
    left: -.5rem;
    position: absolute;
    width: 1rem;
    z-index: 0;
  }

  // Make buttons full height
  .spark-btn {
    border: none;
    border-radius: 0;
    flex: 0 1 auto;
    height: 100%;
    margin: 0;
    min-width: 6rem;

    &::before {
      box-shadow: none;
    }
  }

.spark-table-heading

A grouped heading

  padding: 0;

  @for $i from 2 to 10 {
    &[colspan="#{$i}"] {
      .spark-table-heading__piece {
        width: 100% / $i;
      }
    }
  }

.spark-table__status-wrapper

Wrap the table cell contents in a div so positioning works properly in IE

  display: block;
  height: 100%;
  left: -5rem;
  position: relative;
  width: calc(100% + 7rem);

.spark-table__status-message

Messaging for a table cell

  display: none;
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 15;

.spark-table__resize

Resize handles for the table

  cursor: ew-resize;
  height: 100%;
  position: absolute;
  top: 0;
  width: 1rem;
  z-index: 5;

  &--left {
    left: -1px;
  }

  &--right {
    right: -1px;
  }

.spark-table__checkbox .spark-table__resize, .spark-table__checkbox + th .spark-table__resize--left

Hide the first resize handle after a checkbox, and the last one

  display: none;

.spark-table-expand

Expand/collapse table element extends the normal expand

  @extend .spark-expand;

.spark-table--condensed, .spark-table--spreadsheet

Condensed tables

  table {
    margin-bottom: 4rem;
  }

  th {
    height: 4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  td {
    border-right: 1px solid $table__border-color;
    @include fontsize($table--condensed__body__font-size);
    height: 3rem;
    padding: 0 1rem;
    line-height: 1.5rem;

    // Messaging
    &[data-error],
    &[data-info],
    &[data-warning],
    &[data-success] {
      padding-left: 3rem;

      .spark-table__status-icon {
        font-size: 1.5rem;
        font-family: $icon__font-family--line;
        left: 1rem;
        line-height: 3rem;
        position: absolute;
      }
    }
  }

  tr {
    th, td {
      &:last-child {
        padding-right: 1rem;
      }
    }
  }

  .spark-table__edit-actions {
    min-height: calc(3rem - 1px);
  }

.spark-table--condensed

A condensed table's inputs are smaller than a full-size table

  &:not(.spark-table--spreadsheet) {
    th, td {
      > input:not([type="checkbox"]) {
        margin: -.5rem -.75rem;
        width: calc(100% + 1.5rem);
      }

      input:not([type="checkbox"]) {
        padding: .5rem .75rem;
      }

      &[data-error],
      &[data-info],
      &[data-warning],
      &[data-success] {
        > input:not([type="checkbox"]),
        > select {
          margin-left: -2.75rem;
          width: calc(100% + 3.5rem);
        }

        input:not([type="checkbox"]),
        select {
          padding-left: 2.5rem;
        }

        .spark-table__status-wrapper {
          left: -3rem;
          width: calc(100% + 4rem);

          input:not([type="checkbox"]),
          select {
            margin-left: .25rem;
            margin-top: .25rem;
            width: calc(100% - .5rem);
          }
        }

        .spark-table__status-message {
          border-radius: 0 0 .25rem .25rem;
          margin-left: .25rem;
          margin-top: -.5rem;
          padding: .5rem .75rem;
          width: calc(100% - .5rem);
        }
      }
    }
  }

.spark-table--spreadsheet

A table that works like a spreadsheet

  td {
    input:not([type="checkbox"]),
    select {
      border: none;
      margin: -1.25rem -1rem;
      padding: 1.25rem 1rem;
      width: calc(100% + 2rem);

      &[readonly] {
        &::selection {
          background: transparent;
        }
      }
    }

    select {
      left: .5rem;
      position: relative;
      width: calc(100% + 1rem);
    }

    &.focus:not(.editing) {
      color: $table__input--focus__color;
      position: relative;

      &::before {
        background-color: $table__input--focus__background-color;
        box-shadow: $table__input--focus__box-shadow;
        border: 1px solid $table__input--focus__border-color;
      }
    }

    &.editing,
    &.focus {
      color: $table__input--focus__color;
      position: relative;

      &::before {
        background-color: $table__input--editing__background-color;
        border: 1px solid $table__input--editing__border-color;
        content: '';
        display: block;
        height: 100%;
        left: -1px;
        min-height: calc(3rem - 1px);
        position: absolute;
        top: -1px;
        width: 100%;
        z-index: 0;
      }

      > *:not(.spark-table__status-icon):not(.spark-table__status-message) {
        position: relative;
        z-index: 5;
      }
    }

    &.hover {
      color: $table__input--hover__color;

      &::before {
        background-color: $table__input--hover__background-color;
        border: 1px solid $table__input--hover__border-color;
      }
    }

    &[data-error],
    &[data-info],
    &[data-warning],
    &[data-success] {
      height: auto;

      .spark-table__status-wrapper {
        height: calc(3rem - 1px);
        left: -3rem;
        margin: 0;
        width: calc(100% + 4rem);

        input:not([type="checkbox"]),
        select {
          margin: calc(-.35rem - 1px) 0;
          padding: 1.25rem 1rem 1.25rem 3.25rem;
          width: 100%;
        }
      }

      .spark-table__status-message {
        box-shadow: $table__input--focus__box-shadow;
        padding: .5rem;
      }
    }
  }

.spark-table--edit-rows

A table with editable rows

  // The whole table is in edit mode, gray out rows except for the one being edited
  &.editing {
    tbody tr:not(.editing) {
      opacity: .5;
    }
  }

  // A row in edit mode
  tr.editing {

    // Hide everything that isn't the edit actions
    .spark-table__actions,
    .spark-table__actions--icons {
      > *:not(.spark-table__edit-actions) {
        display: none;
      }
    }

    // Show the edit actions
    .spark-table__edit-actions {
      opacity: 1;
      transform: translateX(0);
      visibility: visible;
    }
  }

.spark-table tr.spark-table__disabled-row

A disabled table row

  &,
  &:hover,
  &.active {
    background-color: $table__background-color;
    color: $table--disabled__color;
  }

  button {
    &,
    &:hover,
    &:focus {
      color: $table--disabled__color;
    }
  }

.spark-table td.spark-table__disabled-cell input, .spark-table td input[disabled]

A disabled table cell

  color: $table--disabled__color;

.spark-table th.spark-table__disabled-column

A disabled column heading

  &,
  &:hover {
    color: $table__head--disabled__color;
  }

components/tabs

csss

.spark-tabs

Holds the tabs and panels

  padding: 0 !important;

  // Extra small
  &.xs {
    .spark-tabs__tab {
      max-width: 12rem;
      min-width: 8rem;
    }
  }

  // Small
  &.sm {

  }

  // Medium
  &.md {

  }

  // Large
  &.lg {

  }

  // Extra large
  &.xl {

  }

  // Medium, Large and extra large
  &.sm, &.md, &.lg, &.xl {

    // When scrollable, show show the buttons for navigating through tabs.
    .spark-tabs__nav.scrollable {
      .spark-tabs__scroll {
        margin-right: 5rem;
      }

      .spark-tabs__btns {
        display: block;
      }
    }
  }

.spark-tabs__nav

The tabs nav. This holds the tabs as well as buttons for navigating through them.

  position: relative;
  width: 100%;

  // When the scrollable class has been set, the JS has been initialized and we should
  // start relying on that for the scrolling.
  &.scrollable {
    .spark-tabs__scroll {
      overflow: hidden;
    }
  }

  // Disable animation
  &.no-animation {
    .spark-tabs__list {
      transition: none;
    }
  }

.spark-tabs__scroll

Wrapper around the tabs to facilitate scrolling.

  overflow-x: auto;
  overflow-y: visible;
  position: relative;

.spark-tabs__list

A list of tabs. This should be a

    .

  display: table;
  left: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition-duration: 250ms;
  transition-property: transform;
  transition-timing-function: $ease-in-out-quint;
  user-select: none;
  white-space: nowrap;
  z-index: 5;

  &::after {
    z-index: 10;
  }

.spark-tabs__scroll, .spark-tabs__list

Border placeholder for the bottom. Each tab has a bottom border, but this sits behind them to fill in the borders if the tabs don't fill the whole width.

  &::after {
    border-bottom: $tabs--active__border;
    bottom: 0;
    content: '';
    display: inline-block;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
  }

.spark-tabs__tab, .spark-tabs__btn

A single tab or tab button

  @extend .spark-list-item--no-bullet;
  align-content: center;
  background-color: $tabs__background-color;
  border: $tabs__border;
  border-bottom: $tabs--active__border;
  border-right-width: 0;
  color: $tabs__color;
  box-shadow: $tabs__box-shadow;
  color: $tabs__color;
  cursor: pointer;
  display: table-cell;
  line-height: 0;
  margin: 0 -1px; // Compensate for stacked borders
  max-width: 18rem;
  min-width: 18rem;
  overflow: hidden;
  top: .33333rem;
  position: relative;
  text-align: left;
  transition-duration: 100ms;
  transition-property: background-color, box-shadow, color;
  transition-timing-function: ease-in-out;
  vertical-align: middle;

  // An icon for the tab
  [data-icon],
  [class^='#{$prefix}-icon-'],
  [class*=' #{$prefix}-icon-'] {
    left: 1rem;
    margin-top: -.33333rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition-duration: 100ms;
    transition-property: color;
    transition-timing-function: ease-in-out;
    z-index: 10;
  }

  // Links should have the same color as their parents and
  // truncate any overflowing text
  a {
    color: inherit;
    display: block;
    font-weight: 400;
    height: 100%;
    line-height: 1em;
    margin: 0;
    margin-bottom: .33333rem;
    overflow: hidden;
    padding: 1.2rem 1.5rem;
    position: relative;
    text-overflow: ellipsis;
    top: 0;
    transition: none;
    transition: color 100ms ease-in-out;
    white-space: nowrap;
    width: 100%;

    small {
      @include fontsize(eta);
      font-family: $body__font-family;
    }

    &:focus {
      border-bottom: 0;
    }
  }

  // When an anchor follows an icon, add the appropriate padding
  [data-icon] + a,
  [class^='#{$prefix}-icon-'] + a,
  [class*=' #{$prefix}-icon-'] + a {
    padding-left: 3rem;
  }

  &:not(.active).focus {
    border: $tabs--focus__border;
  }

  // When the tab is active raise the z-index so it's atop other tabs
  &.active,
  &.active:hover {
    background-color: $tabs--active__background-color;
    border: $tabs--active__border;
    border-width: 1px;
    border-bottom-color: transparent;
    border-radius: .33333rem .33333rem 0 0;
    box-shadow: none;
    color: $tabs--active__color;
    top: 1px; // Offset from the top 1px so there isn't a gap between the border of the tabs and the panels
    z-index: 15;

    a {
      margin-bottom: 0;
      padding-top: 1.45rem;
      padding-bottom: 1.33333rem;
    }

    [data-icon],
    [class^='#{$prefix}-icon-'],
    [class*=' #{$prefix}-icon-'] {
      margin-top: 0;
    }

    // Make icon fill when active
    [data-icon],
    [class^='#{$prefix}-icon-'],
    [class*=' #{$prefix}-icon-']{
      font-family: $icon__font-family--fill !important;

      // Capture the before elements too
      &::before{
        font-family: $icon__font-family--fill !important;
      }
    }
  }

  // When the user hovers over the tab
  &:hover {
    background-color: $tabs--hover__background-color;
    border: $tabs--hover__border;
    color: $tabs--hover__color;
  }

  // Used for the shadow on the active tab
  &::after {
    background-color: $tabs--active__box-shadow;
    content: '';
    height: calc(100% - .33333rem); // Full height, minus the .33333rem top offset for the border.
    opacity: 0;
    position: absolute;
    left: -.75rem;
    top: 0;
    transform: skew(-3deg);
    z-index: 5;
    width: 1rem;
  }

  // For the last tab
  &:last-child {
    border-right-width: 1px;

    // Hide the shadow when active
    &.active {
      &::after {
        display: none;
      }
    }
  }

.spark-tabs__tab:not(.active) + .spark-tabs__tab:not(.active)

A non-active tab which follows another non-active tab gets a left border.

  border-left-width: 1px;

.spark-tabs__tab.active + .spark-tabs__tab

A tab which follows the active tab shows the sliver shadow

  &::after {
    opacity: 1;
  }

.spark-tabs__btns

Nav buttons holder

  border-bottom: $tabs--active__border;
  display: none;
  font-size: 0;
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;

.spark-tabs__btn

A tab navigation button

  box-shadow: none;
  border-left-width: 1px;
  display: inline-block;
  font-size: 2.375rem;
  height: 100%;
  margin: 0;
  max-width: none;
  min-width: 0;
  padding: 0;
  position: relative;
  text-align: center;
  width: 2.5rem;

  &:last-child {
    border-right-width: 1px;
  }

  // Center vertically
  &::before {
    line-height: 50%;
  }

  &:focus {
    outline: 0;
  }

.spark-tabs__panels

Tab content container

  border: $tabs--active__border;
  border-top: none;
  position: relative;
  z-index: 0;
  width: 100%;

.spark-tabs__panel

A single tab's content

  display: none;
  padding: 1.5rem;

  // Show when active
  &.active {
    display: block;
  }

components/text-input

csss

.spark-input

Wrapper around the input. Generally a <label> so that clicking on any part of the container triggers an input focus.

  cursor: pointer;
  display: block;
  margin-bottom: 1rem;
  position: relative;
  z-index: 10;

  // Move the label up when we're focused or active
  &.active .spark-label,
  &.has-partial-value .spark-label,
  &.focus .spark-label,
  .spark-input__field:focus ~ .spark-label {
    @include fontsize(eta);
    top: .5rem;
  }

  // Show the placeholder and dividers when we're focused or active
  &.active .spark-input__placeholder,
  &.has-partial-value .spark-input__placeholder,
  &.active .spark-input__divider,
  &.has-partial-value .spark-input__divider,
  .spark-input__field:focus ~ .spark-input__placeholder,
  .spark-input__divider:focus ~ .spark-input__placeholder {
    opacity: 1;
  }

  // When the input has a total character or remaining character count
  &.active[data-characters],
  &.active[data-characters-remaining] {

    // Add padding to the label to allow space for the count.
    .spark-label {
      padding-right: 3rem;
    }

    // Place the count in the top right.
    &::before {
      color: $input__label__color;
      @include fontsize(eta);
      position: absolute;
      right: 1rem;
      top: 1.5rem;
      transform: translateY(-50%);
      text-shadow: 1px $input--active__background-color;
      z-index: 15;
    }
  }

  // Set the total characters count
  &.active[data-characters] {
    &::before {
      content: attr(data-characters);
    }
  }

  // Set the total characters remaining count
  &.active[data-characters-remaining] {
    &::before {
      content: attr(data-characters-remaining);
    }
  }

  // We've gone over our allotted character count
  &.active[data-characters-remaining-danger] {
    &::before {
      color: $color-state-danger;
    }
  }

  // On hover, darken the border
  &:hover,
  &.hover {
    > .spark-input__field:not(:focus) {
      border: $input--hover__border;
    }
  }

  // When the container has a state, show it below.
  &[data-error],
  &[data-warning],
  &[data-success] {

    // Remove the bottom border from the input so the message stays flush
    .spark-input__field {
      border-radius: $input__border-radius $input__border-radius 0 0;
    }

    .spark-input__message {
      display: block;
    }
  }

  // When the container has an error state, show it below.
  &[data-error] {
    .spark-input__field {
      border-color: $message--error__message__background-color;
    }

    .spark-input__message {
      background-color: $message--error__message__background-color;
      color: $message--error__message__color;
    }
  }

  // When the container has an warning state, show it below.
  &[data-warning] {
    .spark-input__field {
      border-color: $message--warning__message__background-color;
    }

    .spark-input__message {
      background-color: $message--warning__message__background-color;
      color: $message--warning__message__color;
    }
  }

  // When the container has an success state, show it below.
  &[data-success] {
    .spark-input__field {
      border-color: $message--success__message__background-color;
    }

    .spark-input__message {
      background-color: $message--success__message__background-color;
      color: $message--success__message__color;
    }
  }

  // Center the label and addon
  .spark-label,
  .spark-input__addon {
    color: $input__label__color;
    @include fontsize(zeta);
    position: absolute;
    top: 1.5rem;
    transition-duration: 100ms;
    transition-property: font-size, color, top, line-height;
    transition-timing-function: $ease-in-out-quint;
    z-index: 10;
  }

  .spark-input__addon {
    top: 50%;
    transform: translateY(-50%);
  }

  // If we have an addon, we need to add some padding to the right.
  &.spark-input--addon {
    .spark-input__field {
      padding-right: 3rem;
    }
  }

  // We need to bump the label 1px back to the right to account for the border.
  // Otherwise it doesn't align to the left.
  .spark-label {
    font-weight: $input__font-weight;
    left: 1rem;
    margin-left: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 2rem);

    .spark-thin {
      font-weight: $input__font-weight--thin;
    }
  }

  // Input fields and placeholders inside of the input container should have padding
  // to allow for the label.
  .spark-input__field,
  .spark-input__placeholder,
  .spark-input__overlay {
    padding: 2.25rem 1rem 0.5rem;
  }

  // Input dividers have the same top and bottom padding as fields and placeholders,
  // but they need to be snug.
  .spark-input__divider {
    padding: 2.25rem .5rem 0.5rem;
  }

  // Don't have a bottom margin if we're the last element in a group
  &:last-child {
    margin-bottom: 0;
  }

.spark-input__field, .spark-input__placeholder, .spark-input__fields, .spark-input__overlay

Inputs, placeholders and groups of inputs

  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border-radius: $input__border-radius;
  display: block;
  cursor: inherit;
  @include fontsize(zeta);
  font-family: $body__font-family;
  font-weight: $input__font-weight;
  height: 5rem;
  line-height: 2.1rem; /// Had to set this to 2.1 instead of 2 or else the placeholder wasn't aligning. @todo investigate why.
  padding: 0 1rem;
  transition-duration: 100ms;
  transition-property: background-color, border, border-radius;
  transition-timing-function: $ease-in-out-quint;
  width: 100%;

.spark-input__field, .spark-input__fields, .spark-input__overlay

Input or a group of inputs should have the same appearance

  background-color: $input__background-color;
  border: $input__border;
  color: $input__color;
  position: relative;
  z-index: 5;

.spark-input__field

A text input field needs to have a bunch of resets done to it.

  // Placeholder hidden by default
  @include placeholder {
    color: transparent;
    font-weight: $input__placeholder__font-weight;
    opacity: 0;
    transition-duration: 100ms;
    transition-property: opacity;
    transition-timing-function: $ease-in-out-quint;
  }

  // Remove custom IE stuff
  &::-ms-clear {
    // display: none;
  }

  // When the input is disabled, gray it out.
  &:disabled {
    background-color: $input--disabled__background-color;
    border: $input--disabled__border;

    & ~ .spark-label {
      color: $input--disabled__color;
    }
  }

.spark-input__field[data-typeahead]

Hide the placeholder on inputs with a typeahead

  @include placeholder {
    opacity: 0;
  }

.spark-input__field[data-typeahead], .spark-input__field[data-typeahead] ~ .spark-input__placeholder

Typeahead fields should be monospaced to prevent jumping around

  font-family: $mono__font-family;

.spark-input__field[data-typeahead]:focus

When an input with a typeahead gains focus, make background transparent so that we can see the placeholder behind it.

  background-color: transparent;

.spark-input__field[data-typeahead]:focus ~ .spark-input__placeholder

Give the placeholder the background color of the input since its background-color is transparent on focus.

  background-color: $input--active__background-color;

textarea.spark-input__field

Textarea input

  overflow: auto;
  resize: none;

.spark-input__placeholder

Input placeholder element for typeahead

  color: $input--typeahead__placeholder__color;
  left: 1px;
  opacity: 0;
  position: absolute;
  top: 1px;
  z-index: 0;

  // When inside of a field group, don't offset from the left.
  .spark-input__fields & {
    left: 0;
    top: 0;
  }

.spark-input__fields

A group of fields should flex the content to fit on one line. If you want inputs on multiple lines, don't use a group!

  display: flex;
  overflow: hidden;

  // Don't expand the size of each input
  .spark-input {
    flex: 0 0 auto;
    height: 100%;
  }

  // No background or border on nested input fields since we have that on the fields container
  .spark-input__field,
  .spark-input__placeholder {
    background-color: transparent;
    border: none;
    padding-left: 0;
    padding-right: 0;
    height: 100%;
  }

  // Don't put a border or background on the focused inputs
  .spark-input.focus & {
    .spark-input__field {
      border: none;
      background-color: transparent;
    }
  }

.spark-input__overlay

An overlay of the actual value of an input. Used in Date Typeahead to show a text version of the value.

  left: 0;
  position: absolute;
  top: 0;
  z-index: 5;

.spark-input.focus .spark-input__fields, .spark-input__field:focus

A focused group of fields and a focused field should behave the same.

  background-color: $input--active__background-color;
  border: $input--active__border;
  outline: 0;

  @include placeholder {
    color: $input__placeholder__color;
    opacity: 1;
  }

.spark-input.focus .spark-input__fields ~ .spark-label, .spark-input__field:focus ~ .spark-label

Focus text

  color: $input--active__label__color;

.spark-input__addon

Align the addon to the right.

  font-size: 1.5em;
  right: 1.5rem;

.spark-input__addon-button

Addon which has some functionality.

  padding: 1.5rem;
  right: 0;

.spark-input__addon-button:focus

Don't allow the default anchor focus styling to apply

  border-bottom: inherit;
  padding: 1.5rem;

.spark-input__divider

A divider between inline form fields

  align-items: center;
  display: flex;
  opacity: 0;

.spark-input__message

Holds any state messaging

  border-radius: 0 0 $input__border-radius $input__border-radius;
  box-sizing: border-box;
  color: $input--error__color;
  display: none;
  @include fontsize($input__message__font-size);
  font-weight: $input__message__font-weight;
  padding: .75rem 1rem;
  transform-origin: top center;
  transition-delay: 0ms, 0ms, 0ms;
  transition-duration: 200ms;
  transition-property: background-color, color;
  transition-timing-function: linear, $ease-in-out-quint, $ease-in-out-quint;
  z-index: 0;
  width: 100%;

  // Style top-level links
  a {
    color: inherit;
    font-size: inherit;
  }

  .spark-animate-height {
    transition-property: height, margin, background-color, color;
  }

.spark-input__password-show, .spark-input__password-hide

Hide both the password show and hide icons by default

  display: none;

.spark-input.active .spark-input__field[type="password"], .spark-input__field[type="password"]:focus

When we have a password input, show the toggle icon for hiding the password

  ~ .spark-input__password-toggle {
    .spark-input__password-show {
      display: block;
    }
  }

.spark-input.active .spark-input__field[type="text"], .spark-input__field[type="text"]:focus

When we have a text input, show the toggle icon for showing the password

  ~ .spark-input__password-toggle {
    .spark-input__password-hide {
      display: block;
    }
  }

.spark-input--sm

Small text input

  .spark-input__field {
    height: 3rem;
    padding: 0 1rem 0 1rem;

    @include placeholder {
      color: $input__label__color;
      opacity: 1;
    }
  }

  /// Don't show the label on a small text input.
  .spark-label {
    display: none;
  }

.spark-label

Don't show the label on a small text input.

  display: none;

components/toggle

csss

.spark-toggle, .spark-toggle-switch

Wrapper around the checkbox or radio input. Generally a label so that clicking on any part of the container triggers the checkbox or radio.

  touch-callout: none;
  user-select: none;

  // Hide the actual element from view.
  .spark-toggle__input {
    opacity: 0;
    position: absolute;
    z-index: 0;
    //the second selector here has added specificity to override another style
    &:focus, &:focus:checked:nth-child(n) {
      ~ .spark-label, ~ .spark-toggle-switch__handle {
        box-shadow: $toggle--focus__box-shadow;
        z-index: 6;
      }
    }
  }

.spark-toggle

A pill-style toggle

  display: inline-block;
  float: left;

  // The label is used to create the clickable box
  .spark-label {
    background-color: $toggle__background-color;
    border: $toggle__border;
    border-left-width: 0;
    border-bottom-width: 2px;
    border-radius: .25em;
    color: $toggle__color;
    cursor: pointer;
    display: block; // Changed to display:block to fix spacing underneath toggle issue caused by inline-block
    @include fontsize(zeta);
    font-weight: $body__font-weight--bold;
    line-height: 1rem;
    margin-top: 0;
    padding: 1rem;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    transition: all 100ms $ease-in-out-quint;
    width: 100%;
    z-index: 5;

    [data-icon],
    [class^='#{$prefix}-icon-'],
    [class*=' #{$prefix}-icon-'] {
      line-height: 1rem;
    }
  }

  // When the toggle is checked, create a depressed appearance
  // @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
  // http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
  .spark-toggle__input:checked ~ .spark-label:nth-child(n) {
    border-color: $toggle--active__border-color;
    background-color: $toggle--active__background-color;
    color: $toggle--active__color;

    // Fill icon when checked
    [data-icon],
    [class^='#{$prefix}-icon-'],
    [class*=' #{$prefix}-icon-'] {
      &::before{
        font-family: $icon__font-family--fill !important;
      }
    }
  }


  // When the toggle is disabled, all borders should only be 1px and the colors lighter
  // @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
  // http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
  .spark-toggle__input:disabled ~ .spark-label:nth-child(n) {
    background-color: $toggle--disabled__background-color;
    border: $toggle--disabled__border;
    color: $toggle--disabled__color;
    cursor: not-allowed;
  }

.spark-toggle-group

A group of toggles

  margin: 0;

  .spark-toggle {
    padding-left: 0 !important;
    padding-right: 0 !important;

    // Don't round the corners on the labels in a group
    .spark-label {
      border-radius: 0;
    }

    // First toggle in a group has no rounding on the right
    &:first-child {
      .spark-label {
        border-left-width: 1px;
        border-radius: .25em 0 0 .25em;
      }
    }

    // Last toggle in a group has no rounding on the left
    &:last-child {
      .spark-label {
        border-radius: 0 .25em .25em 0;
      }
    }
  }

.spark-toggle-switch

A toggle switch

  cursor: pointer;
  display: inline-block;
  height: 2em;
  position: relative;
  width: 3.5em;

  // The track on which the handle slides
  .spark-toggle-switch__track {
    background-color: $toggle__track__background-color;
    border: $toggle__track__border;
    border-radius: .75em;
    content: '';
    display: inline-block;
    height: 1.35em;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 100ms $ease-in-out-quint;
    width: 3.5em;
    z-index: 0;
  }

  // The circular handle
  .spark-toggle-switch__handle {
    background-color: $toggle__handle__background-color;
    border: $toggle__handle__border;
    border-radius: 50%;
    box-shadow: $toggle__handle__box-shadow;
    content: '';
    display: inline-block;
    height: 2em;
    left: 0;
    position: relative;
    transition: all 100ms $ease-in-out-quint;
    width: 2em;
    z-index: 5;
  }

  // When the input is checked, move the handle to the right and color the border
  // @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
  // http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
  .spark-toggle__input:checked ~ .spark-toggle-switch__handle:nth-child(n) {
    border: $toggle--active__handle__border;
    box-shadow: $toggle--active__handle__box-shadow;
    left: 1.5em;
  }

  // When the input is checked, color the track
  // @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
  // http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
  .spark-toggle__input:checked ~ .spark-toggle-switch__track:nth-child(n) {
    background-color: $toggle--active__track__background-color;
    border: $toggle--active__track__border;
  }

  // When the input is disabled, gray out the handle
  // @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
  // http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
  .spark-toggle__input:disabled ~ .spark-toggle-switch__handle:nth-child(n) {
    background-color: $toggle--disabled__handle__background-color;
    border: $toggle--disabled__handle__border;
    box-shadow: none;
    cursor: not-allowed;
  }

  // When the input is disabled, gray out the track
  // @todo remove the nth-child chack when iOS Chrome/Webviews fix this issue
  // http://stackoverflow.com/questions/14201694/chrome-webkit-not-rendering-css-display-change-on-inputchecked-element-elem
  .spark-toggle__input:disabled ~ .spark-toggle-switch__track:nth-child(n) {
    background-color: $toggle--disabled__track__background-color;
    border: $toggle--disabled__track__border;
    cursor: not-allowed;
  }

components/toolbar

csss

.spark-toolbar

Toolbar

  //hide the component until we finish intialization
  visibility: hidden;
  position: relative;
  display: flex;
  height: 3rem;
  //init finished, show component
  &.ready {
    visibility: visible;
  }
  &.recalc {
    .spark-toolbar__container--hidden {
      display: block;
      visibility: hidden;
    }
  }
  &:not(.ready) {
    .spark-toolbar__item {
      width: auto;
      //display dropdowns before ready so other elements can initalize
      .spark-toolbar__item--content {
        display: block;
      }
      //cause swap icons to be preloaded by browser so they aren't loaded the first time the user clicks an item
      .spark-toolbar__item-helper {
        &::before {
          font-family: 'spark-icon-fill' !important;
        }
      }
    }
  }
  //some additional padding helps make the dropdowns look nicer (optional to use this class on content)
  .spark-toolbar__item--content__container {
    padding: 2rem 1rem;
  }
  &.spark-toolbar--icon {
    .spark-toolbar__container--visible {
      //hide the text label when we're in icon-mode
      .spark-toolbar__item {
        &::before {
          display: none;
        }
        &:active {
          //set active fade on buttons that have an icon
          .spark-toolbar__item-helper {
            &, &[class^='spark-icon'] {
              background: $spark-toolbar-active-background;
              color: $spark-toolbar-active-color;
            }
          }
        }
        .spark-toolbar__item-helper {
          &::before {
            display: block;
          }
        }
        //make space for dropdown arrow indicator
        .spark-toolbar__item--content ~ .spark-toolbar__item-helper {
          width: 4.5rem;
        }
      }
    }
  }
  &:not(.spark-toolbar--icon) {
    .spark-toolbar__container--visible {
      //hide icon when not in icon-mode
      .spark-toolbar__item-helper {
        &, &[class^='spark-icon'] {
          width: 0;
          padding: 0;
        }
      }
      //if we have content, make space for dropdown arrow
      .spark-toolbar__item--content ~ .spark-toolbar__item-helper {
        padding: .5rem;
      }
    }
  }
  .spark-toolbar__item {
    &.open {
      //swap in filled icons when open
      .spark-toolbar__item-helper {
        &::before {
          font-family: 'spark-icon-fill' !important;
        }
      }
    }
    &.open, &:active {
      //change colors when a toolbar item is selected
      .spark-toolbar__item--content ~ .spark-toolbar__item-helper {
        background: $spark-toolbar-active-background;
        &:hover {
          &::before, &::after {
            color: $spark-toolbar-active-hover-color;
            border-top-color: $spark-toolbar-active-hover-color !important;
          }
        }
        &::before, &::after {
          color: $spark-toolbar-active-color;
          border-top-color: $spark-toolbar-active-color !important;
        }
      }
    }
  }
  .spark-toolbar__container--hidden {
    .spark-toolbar__item--content ~ .spark-toolbar__item-helper {
      //size buttons in hidden dropdown when they have icons
      &[class^='spark-icon'] {
        width: 4.5rem;
      }
    }
  }
  .spark-toolbar__show-more {
    //hide show more button by default
    display: none;
    //this is the arrow element for the show-more dropdown that points back to the show-more button
    &::before {
      content: '';
      position: absolute;
      right: 1rem;
      top: calc(100% + .5rem);
      display: none;
      width: 1rem;
      height: 1rem;
      border-width: 1px 0 0 1px;
      border-style: solid;
      border-color: $spark-toolbar-dropdown-border-hidden;
      background: $spark-toolbar-dropdown-background;
      z-index: 11;
      transform: rotate(45deg) translate(.25rem, .25rem);
      opacity: 0;
      transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
    }
  }

  &.show-more {
    //make space for the show-more button
    .spark-toolbar__container--visible {
      width: calc(100% - 3rem);
    }
    //now show the show-more button as we have items hidden
    .spark-toolbar__show-more {
      display: inline-block;
      width: 3rem;
      line-height: 1rem;
      text-align: center;
      padding: 1rem 0;
      cursor: pointer;
      background: $spark-toolbar-background;
      color: $spark-toolbar-color;
      border-radius: $spark-toolbar-dropdown-border-radius;
      i {
        vertical-align: baseline;
        line-height: 1rem;
      }
      &:hover {
        background: $spark-toolbar-hover-background;
        outline: 0 none;
      }
      &:focus {
        outline: 0 none;
      }
    }
    &.open {
      //swap the look of the show-more button when its activated
      .spark-toolbar__show-more {
        background: $spark-toolbar-active-background;
        color: $spark-toolbar-active-color;
        &::before {
          display: block;
        }
        i {
          &::before {
            font-family: 'spark-icon-fill' !important;
          }
        }
      }
    }
    //perform same animation on dropdown arrow as dropdown
    &.animate {
      .spark-toolbar__show-more {
        &::before {
          transform: rotate(45deg);
          opacity: 1;
        }
      }
    }
  }
  //default styling for an item
  .spark-toolbar__item {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    background: $spark-toolbar-background;
    @include fontsize(zeta);
    font-family: $spark-toolbar-label-font-family;
    font-style: normal;
    font-weight: $spark-toolbar-label-font-weight;
    line-height: 1rem;
    color: $spark-toolbar-color;
    transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
    cursor: pointer;
    border-radius: .25rem;
    &:hover, &:focus {
      outline: 0 none;
      background: $spark-toolbar-hover-background;
      .spark-toolbar__item-helper {
        background: $spark-toolbar-hover-background;
      }
    }
    //this is the text-label for an item
    &::before {
      padding: 1rem;
      content: attr(label);
      text-transform: uppercase;
      display: inline-block;
      @include fontsize(zeta);
      font-family: $spark-toolbar-label-font-family;
      font-style: normal;
      font-weight: $spark-toolbar-label-font-weight;
      white-space: nowrap;
    }
    //this is the dropdown arrow indicating which item is open
    &::after {
      position: absolute;
      top: calc(100% + .5rem);
      content: '';
      left: calc(50% - .5rem);
      width: 1rem;
      height: 1rem;
      border-top: $spark-toolbar-dropdown-border;
      border-left: $spark-toolbar-dropdown-border;
      background: $spark-toolbar-dropdown-background;
      transform: rotate(45deg);
      display: none;
      transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
      z-index: 11;
    }
    &.open {
      //when displaying the dropdown, also display the arrow
      &::after {
        opacity: 0;
        transform: rotate(45deg) translate(.25rem, .25rem);
        display: block;
      }
      //display the dropdown, initalize with a transform, then animate away
      .spark-toolbar__item--content {
        display: block;
        transform: translate(0, .5rem);
        opacity: 0;
        font-weight: $spark-toolbar-dropdown-font-weight;
      }
      //applied next tick to animate content
      &.animate {
        .spark-toolbar__item--content {
          transform: none;
          opacity: 1;
        }
        &::after {
          opacity: 1;
          transform: rotate(45deg);
        }
      }
    }
    //active and open styling when items are clicked or open
    &.open, &:active {
      background: $spark-toolbar-active-background;
      color: $spark-toolbar-active-color;
    }
    //list styling for inside dropdown
    .spark-toolbar__list {
      padding: 1rem 0;
      margin: 0;
      overflow: hidden;
      @include fontsize(eta);
      //apply a border to separate multiple lists
      + .spark-toolbar__list {
        border-top: $spark-toolbar-dropdown-border;
      }
      li {
        list-style: none;
        padding: 1rem 2rem;
        text-indent: 0;
        line-height: 1rem;
        &:hover, &:focus {
          background: $spark-toolbar-item-hover-background;
          outline: 0 none;
        }
      }
      //styling tweaks for checkbox lists to create full-size hitbox
      &.spark-toolbar__list--checkboxes {
        li {
          padding: 0;
          position: relative;
          &:hover, &:focus {
            background: inherit;
          }
          label {
            width: 100%;
            display: block;
            cursor: pointer;
            word-wrap: break-word;
            line-height: 1.5rem;
            .spark-toolbar__list--checkboxes--helper {
              position: absolute;
              left: 1rem;
              top: calc(50% - 5px);
              &::before {
                visibility: hidden;
                display: block;
                content: 'ï„¡';
                font-family: 'spark-icon-line';
                font-size: 14px;
                line-height: 10px;
                color: $spark-toolbar-color;
                padding-right: .5rem;
              }
            }
            .spark-toolbar__list--checkboxes--content {
              padding: 1rem 2rem 1rem 3rem;
              display: block;
            }
            &:hover {
              background: $spark-toolbar-item-hover-background;
            }
            input {
              //hide the actual checkbox
              opacity: 0;
              width: 0;
              height: 0;
              display: block;
              margin: 0;
              &:focus ~ .spark-toolbar__list--checkboxes--content {
                background: $spark-toolbar-item-hover-background;
              }
              &:checked {
                ~ .spark-toolbar__list--checkboxes--helper::before {
                  visibility: visible;
                }
              }
            }
          }
        }
      }
    }
    //setup the icon-button for an item
    .spark-toolbar__item-helper {
      height: 3rem;
      display: flex;
      align-items: center;
      background: $spark-toolbar-background;
      transition: color 100ms ease-in-out, background-color 100ms ease-in-out;
      border-radius: .25rem;
      font-size: 2rem;
      //if we don't have an icon size for just the dropdown arrow
      &:not([class^='spark-icon']) {
        &::before {
          content: '';
          right: calc(50% - 1.33rem/2);
        }
        //override icon-button arrow positioning if we don't have an icon
        &::after {
          right: .5rem;
        }
      }
      //if we do have an icon to display pad less
      &[class^='spark-icon'] {
        padding: .5rem;
      }
      //don't show anything if we don't have an icon
      &::before {
        display: none;
      }
      //position icon-button arrow
      &::after {
        top: calc(50% - .5rem/2);
        right: .5rem;
      }
    }
    //if we have content to display then show the helper
    .spark-toolbar__item--content ~ .spark-toolbar__item-helper {
      padding: .5rem;
      &::after {
        border-color: transparent;
        border-style: solid;
        border-top-color: $spark-toolbar-color;
        border-width: .5rem;
        border-top-width: .5rem;
        content: '';
        display: inline-block;
        position: absolute;
        transition: border-color 100ms ease-in-out;
      }
    }
    //apply some colors, and inset shadowing for dropdowns
    .spark-toolbar__item--content {
      display: none;
      position: absolute;
      top: calc(100% + 1rem);
      left: calc(50% - 12rem);
      width: 24rem;
      max-width: calc(100vw - 2rem);
      background: $spark-toolbar-dropdown-background;
      color: $spark-toolbar-dropdown-color;
      transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
      border: $spark-toolbar-dropdown-border;
      border-radius: $spark-toolbar-dropdown-border-radius;
      box-shadow: $spark-toolbar-dropdown-box-shadow;
      order: 1;
      z-index: 10;
    }
  }
  //layout the visible item
  .spark-toolbar__container--visible {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    //when small-down collapse all items into the show-more dropdown
    @include media-breakpoint-down(sm) {
      visibility: hidden;
    }
  }
  //required to make safari measure components correctly
  &.measured {
    .spark-toolbar__container--visible {
      @include media-breakpoint-down(sm) {
        width: 0 !important;
      }
    }
  }
  //apply some styling to have same dropdown look for the show-more area
  .spark-toolbar__container--hidden {
    display: none;
    border-radius: $spark-toolbar-dropdown-border-radius;
    border: $spark-toolbar-dropdown-border;
    box-shadow: $spark-toolbar-dropdown-box-shadow;
    z-index: 7;
    transform: translate(0, .5rem);
    opacity: 0;
    transition: transform 100ms ease-in-out, opacity 100ms ease-in-out;
    padding: 1rem 0;
    background: $spark-toolbar-dropdown-background;
    //reflow items to have icon button displayed inline, with content flowed below
    .spark-toolbar__item {
      width: 24rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      border-radius: 0;
      max-width: calc(100vw - 2rem);
      //pressed styling
      &:active {
        background: $spark-toolbar-background;
        color: $spark-toolbar-color;
        //don't flicker the button color and background when you are not opening a dropdown
        .spark-toolbar__item-helper {
          background: $spark-toolbar-background;
          color: $spark-toolbar-color;
        }
        //if we have a dropdown actually change the active colors
        .spark-toolbar__item--content ~ .spark-toolbar__item-helper {
          background: $spark-toolbar-active-background;
          color: $spark-toolbar-active-color;
        }
      }
      //styling for icon-button
      .spark-toolbar__item-helper {
        border-radius: 0;
        align-self: center;
        &::before {
          display: block;
        }
        //if we don't have an icon and just a dropdown arrow
        &:not([class^='spark-icon']) {
          width: 3rem;
          margin-left: 2rem;
          &::after {
            right: 1rem;
          }
        }
      }
      //this has to be in pixels because IE doesn't understand rem line-height in ::before
      &::before {
        line-height: 24px;
      }
      &::after {
        display: none;
      }
    }
    //change position to static for visible content so that it actually grows the show-more dropdown area
    //also apply some coloring, background, and an inset shadow style
    .spark-toolbar__item--content {
      position: static;
      border-color: $spark-toolbar-dropdown-border-hidden;
      border-width: 1px 0 1px 0;
      background: $spark-toolbar-dropdown-background-hidden;
      border-radius: 0;
      box-shadow: inset 0px -20px 18px -20px $spark-toolbar-dropdown-border-hidden, inset 0px 20px 18px -20px $spark-toolbar-dropdown-border-hidden;
    }
    //don't show tooltips for items in the show-more container
    [class^='spark-tooltip__content'] {
      display: none;
    }
  }
  &.open {
    //animate the dropdowns for items in the show-more dropdown
    &.animate {
      .spark-toolbar__container--hidden {
        transform: none;
        opacity: 1;
      }
    }
    //styling for the show-more dropdown
    .spark-toolbar__container--hidden {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: calc(100% + 1rem);
      right: 0;
      //round the corners of the first and last show-more dropdown items, as overflow:hidden on the show-more dropdown is not an option
      .spark-toolbar__item {
        //open styling
        &.open {
          background: $spark-toolbar-background;
          color: $spark-toolbar-color;
        }
        //reposition the helper to fit and apply rounding
        .spark-toolbar__item-helper {
          position: relative;
          border-radius: .25rem;
        }
        //force word wrapping for items in the show-more container (word wrap disabled for items in visible container)
        &::before {
          word-wrap: break-word;
          white-space: normal;
          width: calc(100% - 8.5rem);
          padding-left: 2rem;
        }
      }
    }
  }

components/tooltip

csss

.spark-tooltip

Tooltips are hidden by default.

  overflow: visible;
  position: relative;

  // Show the tooltip content when we're hover
  &:hover,
  &.tooltip-active {

    .spark-tooltip__content,
    [class*='#{$prefix}-tooltip__content--'] {
      opacity: 1;
      transform: translate(-50%, calc(-100% + 1rem));
      transition-delay: 0ms;
      display: block;
    }

    .spark-tooltip__content--left {
      transform: translate(-1rem, -50%);
    }

    .spark-tooltip__content--right {
      transform: translate(-.5rem, -50%);
    }

    .spark-tooltip__content--bottom {
      transform: translate(-50%, calc(100% - 1rem));
    }
  }

.spark-tooltip__content, [class*='#{$prefix}-tooltip__content--']

Tooltip content

  background-color: $tooltip__background-color;
  border-radius: $tooltip__border-radius;
  color: $tooltip__color;
  display: block;
  @include fontsize($tooltip__font-size);
  font-family: $body__font-family;
  font-weight: 400;
  left: 50%;
  line-height: 1rem;
  opacity: 0;
  padding: 1rem;
  position: absolute !important;
  text-transform: uppercase;
  top: -2rem;
  display: none;
  white-space: nowrap;
  z-index: 100;

  // Caret
  &::after {
    background-color: $tooltip__background-color;
    content: '';
    display: inline-block;
    height: 1rem;
    left: 50%;
    position: absolute;
    top: 100%;
    transform: translate(-50%, -50%) rotate(135deg);
    width: 1rem;
  }

  // Transparent box which extends past the caret so the tooltip content
  // is always touching the tooltip itself. Otherwise we can't mouse over
  // the tooltip. Not crucial for a tooltip but a must for popovers
  // which extend this style.
  &::before {
    background-color: transparent;
    display: block;
    content: '';
    height: calc(100% + 1rem);
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }

.spark-tooltip__content--left

Content on the left

  left: auto;
  right: 100%;
  top: 50%;
  transform: translate(-.5rem, -50%);

  // Caret on the right
  &::after {
    left: 100%;
    margin-left: -1px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  // Transparent box
  &::before {
    height: 100%;
    width: calc(100% + 1rem);
  }

.spark-tooltip__content--right

Content on the right

  left: calc(100% + 1.5rem);
  top: 50%;
  transform: translate(-1rem, -50%);

  // Caret on the left
  &::after {
    left: auto;
    margin-right: -1px;
    right: 100%;
    top: 50%;
    transform: translate(50%, -50%) rotate(-135deg);
  }

  // Transparent box
  &::before {
    height: 100%;
    left: -1rem;
    width: calc(100% + 1rem);
  }

.spark-tooltip__content--bottom

Content on the bottom

  bottom: -2rem;
  top: auto;
  transform: translate(-50%, 1.5rem);

  // Caret on the top
  &::after {
    bottom: 100%;
    left: 50%;
    top: auto;
    transform: translate(-50%, 50%) rotate(-45deg);
  }

  // Transparent box
  &::before {
    top: -1rem;
  }

.spark-tooltip__content--top

Content on the top

  top: -2rem;
  bottom: auto;
  transform: translate(-50%, -1.5rem);

  // Caret on the bottom
  &::after {
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
  }

  // Transparent box
  &::before {
    bottom: -1rem;
  }

config

variables

red

$red: #e50000 !default;

Description

Primary red

Type

{color}

red-color-steps

$red-color-steps: (100:#ffabab, 200:$red, 300:#d80000, 400:#ac0000, 500:#910000, 600:#780000, 700:#5e0000) !default;

Description

Red color steps

Type

{map}

blue

$blue: #4a5767 !default;

Description

Primary blue

Type

{color}

blue-color-steps

$blue-color-steps: (50:#e2eaf3, 100:#a3b5cc, 150:#6e8199, 200:$blue, 250:#4a5767, 300:#424e5c, 400:#37414d, 500:#242b33) !default;

Description

Blue color steps

Type

{map}

green

$green: #23826f !default;

Description

Primary green

Type

{color}

green-color-steps

$green-color-steps: (100:#abded4, 200:$green, 300:#378676, 400:#207866, 500:#1d6b5b, 600:#195e51, 700:#13453b) !default;

Description

Green color steps

Type

{map}

lightblue

$lightblue: #267da9 !default;

Description

Primary light blue

Type

{color}

lightblue-color-steps

$lightblue-color-steps: (100:#79caf2, 200:#5cb8e6, 300:$lightblue, 400:#2d86b3, 500:#206080, 600:#1a4d66, 700:#5c6c80) !default;

Description

Light blue color steps

Type

{map}

gray

$gray: #e4e4e4 !default;

Description

Primary gray

Type

{color}

grey

$grey: $gray !default;

gray-color-steps

$gray-color-steps: (100:#eee, 200:$gray, 300:#ddd, 400:#ccc, 500:#a1a1a1, 600:#767676, 700:#666, 800:#555, 900:#333, 1000:#222) !default;

Description

Gray color steps

Type

{map}

grey-color-steps

$grey-color-steps: $gray-color-steps !default;

black

$black: #000 !default;

Description

Primary black

Type

{color}

white

$white: #fff !default;

Description

Primary white

Type

{color}

orange

$orange: #ff8d2e !default;

Description

Primary orange

Type

{color}

orange-color-steps

$orange-color-steps: (100:#ffc694, 200:$orange, 300:#cc7025) !default;

Description

Orange color steps

Type

{map}

cyan

$cyan: #5fe9ea !default;

Description

Primary cyan

Type

{color}

cyan-color-steps

$cyan-color-steps: (100:$cyan, 200:#099c9d, 300:#074849) !default;

Description

Cyan color steps

Type

{map}

lime-green

$lime-green: #b0ea3b !default;

Description

Primary lime green

Type

{color}

lime-green-color-steps

$lime-green-color-steps: (100:$lime-green, 200:#729135, 300:#2e3d10) !default;

Description

Lime green color steps

Type

{map}

purple

$purple: #804f92 !default;

Description

Primary purple

Type

{color}

purple-color-steps

$purple-color-steps: (100:#d0abde, 200:$purple, 300:#53335e) !default;

Description

Purple color steps

Type

{map}

color-state-info

$color-state-info: map-get($lightblue-color-steps, 700) !default;

Description

Info color

Type

{color}

color-state-success

$color-state-success: #75a01f !default;

Description

Success color

Type

{color}

color-state-success--dark

$color-state-success--dark: #577c10 !default;

Description

Success dark color

Type

{color}

color-state-warning

$color-state-warning: #cd8511 !default;

Description

Warning color

Type

{color}

color-state-warning--dark

$color-state-warning--dark: #b97811 !default;

Description

Warning dark color

Type

{color}

color-state-danger

$color-state-danger: map-get($red-color-steps, 400) !default;

Description

Danger color

Type

{color}

color-state-danger--dark

$color-state-danger--dark: map-get($red-color-steps, 500) !default;

Description

Danger dark color

Type

{color}

color-body

$color-body: map-get($gray-color-steps, 900) !default;

Description

Body copy color

Type

{color}

color-body__background-color

$color-body__background-color: $gray !default;

Description

Body background color

Type

{color}

color-body--alt

$color-body--alt: $white !default;

Description

Alternate body copy color

Type

{color}

color-caption

$color-caption: #bdc8cc !default;

Description

Caption color

Type

{color}

color-code__background-color

$color-code__background-color: #f5f4f2 !default;

Description

Code sample background-color

Type

{color}

color-heading

$color-heading: $blue !default;

Description

Heading color

Type

{color}

ease-in-cubic

$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190) !default;

Description

Ease in cubic

Type

{string}

ease-out-cubic

$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000) !default;

Description

Ease out cubic

Type

{string}

ease-in-out-cubic

$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000) !default;

Description

Ease in and out cubic

Type

{string}

ease-in-circ

$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335) !default;

Description

Ease in circular

Type

{string}

ease-out-circ

$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000) !default;

Description

Ease out circular

Type

{string}

ease-in-out-circ

$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860) !default;

Description

Ease in and out circular

Type

{string}

ease-in-expo

$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035) !default;

Description

Ease in expo

Type

{string}

ease-out-expo

$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000) !default;

Description

Ease out expo

Type

{string}

ease-in-out-expo

$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000) !default;

Description

Ease in and out expo

Type

{string}

ease-in-quad

$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530) !default;

Description

Ease in quad

Type

{string}

ease-out-quad

$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;

Description

Ease out quad

Type

{string}

ease-in-out-quad

$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;

Description

Ease in and out quad

Type

{string}

ease-in-quart

$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220) !default;

Description

Ease in quart

Type

{string}

ease-out-quart

$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000) !default;

Description

Ease out quart

Type

{string}

ease-in-out-

$ease-in-out-: cubic-bezier(0.770, 0.000, 0.175, 1.000) !default;

Description

Ease in and out quart

Type

{string}

ease-in-quint

$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060) !default;

Description

Ease in quint

Type

{string}

ease-out-quint

$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000) !default;

Description

Ease out quint

Type

{string}

Used by

ease-in-out-quint

$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000) !default;

Description

Ease in and out quint

Type

{string}

ease-in-sine

$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715) !default;

Description

Ease in sine

Type

{string}

ease-out-sine

$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000) !default;

Description

Ease out sine

Type

{string}

ease-in-out-sine

$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950) !default;

Description

Ease in and out sine

Type

{string}

ease-in-back

$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045) !default;

Description

Ease in back

Type

{string}

ease-out-back

$ease-out-back: cubic-bezier(0.175,  0.885, 0.320, 1.275) !default;

Description

Ease out back

Type

{string}

ease-in-out-back

$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550) !default;

Description

Ease in and out back

Type

{string}

prefix

Deprecated!

Remove in 2.0.0

$prefix: 'spark' !default;

Description

Class prefix for namespacing

Type

String

image-directory

$image-directory: '../images' !default;

Description

Path to image files

Type

String

grid-breakpoints

$grid-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 796px,
  lg: 1048px,
  xl: 1800px
);

Description

Default grid breakpoints.

Type

{map}

Map structure

{Map} keyName{Map} keyDescription{Map} keyType{Map} keyValue
xs

Extra small screen / phone

Number0
sm

Small screen / phone

Number544px
md

Medium screen / tablet

Number796px
lg

Large screen / desktop

Number1024px
xl

Extra large screen / wide desktop

Number1800px

grid-columns

$grid-columns: 12;

Description

Number of columns in the grid.

Type

{number}

grid-gutter-width

$grid-gutter-width: 2rem;

Description

Padding between columns. Gets divided in half for the left and right.

Type

{number}

container-max-widths

$container-max-widths: (
  sm: 768px,
  md: 1008px,
  lg: 1368px,
  xl: 1920px
);

Description

Container sizes Define the maximum width of .container for different screen sizes.

Type

{map}

Map structure

{Map} keyName{Map} keyDescription{Map} keyType{Map} keyValue
smnoneNumbernone
mdnoneNumbernone
lgnoneNumbernone
xlnoneNumbernone

enable-flex

$enable-flex: true;

Description

Enable the Bootstrap flexible grid

Type

{boolean}

enable-grid-classes

$enable-grid-classes: true;

Description

Enable classes for the Bootsrap grid building

Type

{boolean}

font-directory

$font-directory: './fonts' !default;

Description

Directory used when resolving font paths.

Type

{string}

Used by

fonts

$fonts: (
  'Roboto': (100, 300, 400, 500, 700),
  'Roboto Slab': (100, 300, 400, 700),
  'Roboto Mono': 400
) !default;

Description

Fonts to use

Type

{map}

body__font-family

$body__font-family: Roboto, sans-serif;

Description

Body copy font-family

Type

{string}

body__font-weight--thin

$body__font-weight--thin: 100 !default;

Description

Thin body copy font-weight

Type

{number}

body__font-weight--normal

$body__font-weight--normal: 300 !default;

Description

Normal body copy font-weight

Type

{number}

body__font-weight--bold

$body__font-weight--bold: 600 !default;

Description

Bold body copy font-weight

Type

{number}

body__font-cap-height

$body__font-cap-height: 0.72 !default;

Description

Body copy capital letter height

Type

{number}

heading__font-family

$heading__font-family: 'Roboto Slab', serif;

Description

Heading copy font-family

Type

{string}

heading__font-weight--light

$heading__font-weight--light: 300 !default;

Description

Light heading copy font-weight

Type

{number}

heading__font-weight--normal

$heading__font-weight--normal: 400 !default;

Description

Normal heading copy font-weight

Type

{number}

heading__font-weight--bold

$heading__font-weight--bold: 700 !default;

Description

Bold heading copy font-weight

Type

{number}

heading__font-cap-height

$heading__font-cap-height: 0.72 !default;

Description

Heading copy capital letter height

Type

{number}

mono__font-family

$mono__font-family: 'Roboto Mono', monospace;

Description

Monospaced copy font-family

Type

{string}

mono__font-weight--normal

$mono__font-weight--normal: 400 !default;

Description

Normal monospaced copy font-weight

Type

{number}

mono__font-cap-height

$mono__font-cap-height: 0.68 !default;

Description

Monospaced copy capital letter height

Type

{number}

rootsizes

$rootsizes: (
  xs: 12,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 12
) !default;

Description

Root font-sizes for each breakpoint. Set to half desired line-height of body text. ! Make sure to have as many sizes as breakpoints above.

Type

{map}

Map structure

{Map} keyName{Map} keyDescription{Map} keyType{Map} keyValue
xsnoneNumber12
smnoneNumber12
mdnoneNumber12
lgnoneNumber12
xlnoneNumber12

Used by

font-scales

$font-scales: (
  xs: (
    giga:    76,
    mega:    61,
    alpha:   49,
    beta:    39,
    gamma:   31,
    delta:   25,
    epsilon: 20,
    zeta:    16,
    eta:     13,
    theta:   10,
    iota:    8
  ),
  sm: (
    giga:    76,
    mega:    61,
    alpha:   49,
    beta:    39,
    gamma:   31,
    delta:   25,
    epsilon: 20,
    zeta:    16,
    eta:     13,
    theta:   10,
    iota:    8
  ),
  md: (
    giga:    76,
    mega:    61,
    alpha:   49,
    beta:    39,
    gamma:   31,
    delta:   25,
    epsilon: 20,
    zeta:    16,
    eta:     13,
    theta:   10,
    iota:    8
  ),
  lg: (
    giga:    76,
    mega:    61,
    alpha:   49,
    beta:    39,
    gamma:   31,
    delta:   25,
    epsilon: 20,
    zeta:    16,
    eta:     13,
    theta:   10,
    iota:    8
  ),
  xl: (
    giga:    84,
    mega:    67,
    alpha:   54,
    beta:    43,
    gamma:   35,
    delta:   28,
    epsilon: 22,
    zeta:    18,
    eta:     14,
    theta:   11,
    iota:    9
  ),
) !default;

Description

Modular font scale Setting responsive modular-scales. Use appropriate scales for viewport sizes. May eventually include 'giga' and 'mega' as the two largest sizes for each scale.

Type

{map}

Used by

config/components

variables

calendar__background-color

$calendar__background-color: $white !default;

Description

Background color of the calendar.

Type

{color}

calendar__color

$calendar__color: map-get($blue-color-steps, 400) !default;

Description

Text color of the calendar.

Type

{color}

calendar__transition-duration

$calendar__transition-duration: 150ms;

Description

Duration for animations on the calendar. If changed, the JS should also be updated.

Type

{duration}

calendar__nav__color

$calendar__nav__color: map-get($gray-color-steps, 700) !default;

Description

Color of a navigation arrow.

Type

{color}

calendar__month-title__color

$calendar__month-title__color: map-get($blue-color-steps, 250) !default;

Description

Text color for a month title.

Type

{color}

calendar__month-title__font-size

$calendar__month-title__font-size: epsilon !default;

Description

Font size for a month title.

Type

{string}

calendar__month-title__border

$calendar__month-title__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Border for the month title when it's a select input.

Type

{string}

calendar__month-title--hover__border

$calendar__month-title--hover__border: 1px solid map-get($gray-color-steps, 800) !default;

Description

Border for the month title when it's a select input and hovered.

Type

{string}

calendar__day-of-week__color

$calendar__day-of-week__color: map-get($blue-color-steps, 250) !default;

Description

Text color for a day of the week caption.

Type

{color}

calendar__day-of-week__font-weight

$calendar__day-of-week__font-weight: 700 !default;

Description

Font weight for a day of the week caption.

Type

{color}

calendar__day__background-color

$calendar__day__background-color: $white !default;

Description

Background color of a day button.

Type

{color}

calendar__day__border

$calendar__day__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Border of a day button.

Type

{string}

calendar__day__color

$calendar__day__color: map-get($gray-color-steps, 800) !default;

Description

Text color of a day button.

Type

{color}

calendar__day__today-border

$calendar__day__today-border: 1px solid map-get($gray-color-steps, 700) !default;

Description

Border color for the current day.

Type

{color}

calendar__day__font-size

$calendar__day__font-size: zeta !default;

Description

Font size of a day button.

Type

{string}

calendar__day--hover__border

$calendar__day--hover__border: 1px solid map-get($gray-color-steps, 800) !default;

Description

Border of a hovered day button.

Type

{string}

calendar__day--hover__color

$calendar__day--hover__color: map-get($gray-color-steps, 900) !default;

Description

Text color of a day button.

Type

{color}

calendar__day--disabled__color

$calendar__day--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Text color of a day button in a past or future month from the one being viewed.

Type

{color}

calendar__day--inactive__background-color

$calendar__day--inactive__background-color: map-get($gray-color-steps, 100) !default;

Description

Background color of a day button in a past or future month from the one being viewed.

Type

{color}

calendar__day--inactive__color

$calendar__day--inactive__color: map-get($gray-color-steps, 400) !default;

Description

Text color of a day button in a past or future month from the one being viewed.

Type

{color}

calendar__day--range__background-color

$calendar__day--range__background-color: map-get($blue-color-steps, 50) !default;

Description

Background color of a day in a range.

Type

{color}

calendar__day--selected__background-color

$calendar__day--selected__background-color: map-get($blue-color-steps, 250) !default;

Description

Background color of a selected day.

Type

{color}

calendar__day--selected__border

$calendar__day--selected__border: 1px solid map-get($blue-color-steps, 250) !default;

Description

Border of a selected day.

Type

{string}

calendar__day--selected__color

$calendar__day--selected__color: $white !default;

Description

Color of a selected day.

Type

{string}

calendar__day--selected__today-highlight

$calendar__day--selected__today-highlight: map-get($blue-color-steps, 300) !default;

Description

Background highlight color for the current day on hover

Type

{color}

calendar__day--selected--hover__background-color

$calendar__day--selected--hover__background-color: map-get($blue-color-steps, 300) !default;

Description

Background color of a selected day on hover.

Type

{color}

calendar__day--selected--hover__border

$calendar__day--selected--hover__border: 1px solid map-get($blue-color-steps, 500) !default;

Description

Border of a selected day on hover.

Type

{string}

calendar__day-note__font-size

$calendar__day-note__font-size: theta !default;

Description

Day note font size.

Type

{string}

calendar__day-note__font-weight

$calendar__day-note__font-weight: 700 !default;

Description

Day note font weight.

Type

{number}

fieldset__font-size

$fieldset__font-size: zeta !default;

Description

Fieldset fontsize variable

Type

{string}

header__background-color

$header__background-color: map-get($gray-color-steps, 1000) !default;

Description

Header background-color

Type

{color}

header__border-top-width

$header__border-top-width: 4px !default;

Description

Header top border width

Type

{number}

header__border-top-color

$header__border-top-color: map-get($red-color-steps, 400) !default;

Description

Header top border color

Type

{color}

header__color

$header__color: map-get($gray-color-steps, 400) !default;

Description

Header color

Type

{color}

header__font-size

$header__font-size: zeta !default;

Description

Header fontsize variable

Type

{string}

header__title__color

$header__title__color: $white !default;

Description

Header title color

Type

{color}

header__title__font-family

$header__title__font-family: $heading__font-family !default;

Description

Header title font-family

Type

{string}

header__title__font-size

$header__title__font-size: delta !default;

Description

Header title fontsize variable

Type

{string}

header__title__font-weight

$header__title__font-weight: 300 !default;

Description

Header title font-weight

Type

{number}

header__logo--sabre__background-color

$header__logo--sabre__background-color: $red !default;

Description

Header logo background-color

Type

{color}

header__sign-in__background-color

$header__sign-in__background-color: $black !default;

Description

Header sign in background-color

Type

{color}

header__sign-in__font-weight

$header__sign-in__font-weight: 500 !default;

Description

Sign in links are bold

Type

{number}

header__login__background-color

Deprecated!

changing login to sign-in, will remove login in 2.0.0

$header__login__background-color: $header__sign-in__background-color;

Description

Header login background-color

Type

{color}

header__sign-in--hover__color

$header__sign-in--hover__color: map-get($lightblue-color-steps, 200) !default;

Description

Header sign in color on hover

Type

{color}

header__login--hover__color

Deprecated!

changing login to sign-in, will remove login in 2.0.0

$header__login--hover__color: $header__sign-in--hover__color;

Description

Header login color on hover

Type

{color}

header__search__background-color

$header__search__background-color: transparent !default;

Description

Header search background-color

Type

{color}

header__search__border-color

$header__search__border-color: map-get($gray-color-steps, 400) !default;

Description

Header search border-color

Type

{color}

header__search__color

$header__search__color: $green !default;

Description

Header search color

Type

{color}

header__search--active__background-color

$header__search--active__background-color: map-get($gray-color-steps, 100) !default;

Description

Header search background-color when active

Type

{color}

header__search--active__color

$header__search--active__color: map-get($gray-color-steps, 600) !default;

Description

Header search color when active

Type

{color}

header--visible__color

$header--visible__color: map-get($gray-color-steps, 400) !default;

Description

Desktop header color

Type

{color}

header--visible--hover__color

$header--visible--hover__color: map-get($gray-color-steps, 600) !default;

Description

Desktop header color on hover

Type

{color}

header--visible__second-level__background-color

$header--visible__second-level__background-color: $white !default;

Description

Desktop header second level background-color

Type

{color}

header--visible__third-level__font-size

$header--visible__third-level__font-size: eta !default;

Description

Desktop header third level font-size

Type

{string}

icon__font-family--line

$icon__font-family--line: 'spark-icon-line' !default;

Description

The name of the family to use for icons

Type

{string}

icon__font-family--fill

$icon__font-family--fill: 'spark-icon-fill' !default;

Description

The name of the family to use for a filled version of the icons

Type

{string}

main__padding--bottom

$main__padding--bottom: 5rem !default;

Description

Main bottom padding, equal to the footer height

Type

{number}

menu__background-color

$menu__background-color: $white !default;

Description

Menu background-color

Type

{color}

menu__color

$menu__color: map-get($gray-color-steps, 800) !default;

Description

Menu color

Type

{color}

menu__font-size

$menu__font-size: eta !default;

Description

Menu fontsize variable

Type

{string}

menu__title__font-size

$menu__title__font-size: delta !default;

Description

Menu title fontsize

Type

{string}

menu__header__background-color

$menu__header__background-color: map-get($red-color-steps, 400) !default;

Description

Menu header background-color

Type

{color}

menu__header__color

$menu__header__color: $white !default;

Description

Menu header color

Type

{color}

menu__header__toggle__background-color

$menu__header__toggle__background-color: map-get($red-color-steps, 400) !default;

Description

Menu header toggle button background-color

Type

{color}

menu__header__toggle__color

$menu__header__toggle__color: $white !default;

Description

Menu header toggle button color

Type

{color}

menu__list--background-color

$menu__list--background-color: transparent !default;

Description

Menu list background-color

Type

{color}

menu__list__color

$menu__list__color: map-get($gray-color-steps, 800) !default;

Description

Menu list color

Type

{color}

menu__list--hover__item__color

$menu__list--hover__item__color: map-get($gray-color-steps, 900) !default;

Description

Menu list item color on hover

Type

{color}

menu__list-title__background-color

$menu__list-title__background-color: map-get($gray-color-steps, 100) !default;

Description

Menu list title backgorund-color variable

Type

{color}

menu__list-title__color

$menu__list-title__color: map-get($gray-color-steps, 700) !default;

Description

Menu list title color variable

Type

{color}

menu__list-title__font-size

$menu__list-title__font-size: theta !default;

Description

Menu list title fontsize variable

Type

{string}

menu__list--second__border-top

$menu__list--second__border-top: 1px solid map-get($gray-color-steps, 400) !default;

Description

Menu secondary list border-top

Type

{string}

menu__list--second__background

$menu__list--second__background: map-get($gray-color-steps, 100) !default;

Description

Menu secondary list background-color

Type

{color}

menu__list--second__shadow

$menu__list--second__shadow: linear-gradient(to bottom, rgba(100, 100, 100, 0.125), transparent) !default;

Description

Menu secondary list background gradiant

Type

{string}

menu__list-item__background-color

$menu__list-item__background-color: transparent !default;

Description

Menu secondary list item background-color

Type

{color}

menu__list-item__border-top

$menu__list-item__border-top: 1px solid transparent !default;

Description

Menu secondary list item border-top

Type

{string}

menu__list-item__color

$menu__list-item__color: map-get($gray-color-steps, 700) !default;

Description

Menu secondary list item color

Type

{color}

menu__list-item--active__background-color

$menu__list-item--active__background-color: $blue !default;

Description

Menu secondary list item background-color when active

Type

{color}

menu__list-item--active__color

$menu__list-item--active__color: $white !default;

Description

Menu secondary list item color when active

Type

{color}

menu__list-item--open__color

$menu__list-item--open__color: $blue !default;

Description

Menu secondary list item color when open

Type

{color}

menu__list-item--open__font-weight

$menu__list-item--open__font-weight: 600 !default;

Description

Menu secondary list item font-weight when open

Type

{number}

menu__panel-header__border-bottom

$menu__panel-header__border-bottom: 1px solid map-get($gray-color-steps, 400) !default;

Description

Panel menu header border-bottom

Type

{string}

message--info__background-color

$message--info__background-color: transparent !default;

Description

Message info background-color

Type

{color}

message--info__color

$message--info__color: map-get($gray-color-steps, 900) !default;

Description

Message info color

Type

{color}

message--info__icon__background-color

$message--info__icon__background-color: $color-state-info !default;

Description

Message info icon background-color

Type

{color}

message--info__icon__border

$message--info__icon__border: 2px solid map-get($blue-color-steps, 200) !default;

Description

Message info icon border

Type

{string}

message--info__icon__color

$message--info__icon__color: $white !default;

Description

Message info icon color

Type

{color}

message--info__heading__color

$message--info__heading__color: $color-state-info !default;

Description

Message info heading color

Type

{color}

message--info__message__background-color

$message--info__message__background-color: $color-state-info !default;

Description

Message info message content background-color

Type

{color}

message--info__message__color

$message--info__message__color: $white !default;

Description

Message info message content color

Type

{color}

message--warning__background-color

$message--warning__background-color: transparent !default;

Description

Message warning background-color

Type

{color}

message--warning__color

$message--warning__color: map-get($gray-color-steps, 900) !default;

Description

Message warning color

Type

{color}

message--warning__icon__background-color

$message--warning__icon__background-color: $color-state-warning !default;

Description

Message warning icon background-color

Type

{color}

message--warning__icon__border

$message--warning__icon__border: 2px solid $color-state-warning--dark !default;

Description

Message warning icon border

Type

{string}

message--warning__icon__color

$message--warning__icon__color: $white !default;

Description

Message warning icon color

Type

{color}

message--warning__heading__color

$message--warning__heading__color: $color-state-warning !default;

Description

Message warning heading color

Type

{color}

message--warning__message__background-color

$message--warning__message__background-color: $color-state-warning !default;

Description

Message warning message content background-color

Type

{color}

message--warning__message__color

$message--warning__message__color: $white !default;

Description

Message warning message content color

Type

{color}

message--error__background-color

$message--error__background-color: transparent !default;

Description

Message error background-color

Type

{color}

message--error__color

$message--error__color: map-get($gray-color-steps, 900) !default;

Description

Message error color

Type

{color}

message--error__icon__background-color

$message--error__icon__background-color: $color-state-danger !default;

Description

Message error icon background-color

Type

{color}

message--error__icon__border

$message--error__icon__border: 2px solid $color-state-danger--dark !default;

Description

Message error icon border

Type

{string}

message--error__icon__color

$message--error__icon__color: $white !default;

Description

Message error icon color

Type

{color}

message--error__heading__color

$message--error__heading__color: $color-state-danger !default;

Description

Message error heading color

Type

{color}

message--error__message__background-color

$message--error__message__background-color: $color-state-danger !default;

Description

Message error message content background-color

Type

{color}

message--error__message__color

$message--error__message__color: $white !default;

Description

Message error message content color

Type

{color}

message--success__background-color

$message--success__background-color: transparent !default;

Description

Message success background-color

Type

{color}

message--success__color

$message--success__color: map-get($gray-color-steps, 900) !default;

Description

Message success color

Type

{color}

message--success__icon__background-color

$message--success__icon__background-color: $color-state-success !default;

Description

Message success icon background-color

Type

{color}

message--success__icon__border

$message--success__icon__border: 2px solid $color-state-success--dark !default;

Description

Message success icon border

Type

{string}

message--success__icon__color

$message--success__icon__color: $white !default;

Description

Message success icon color

Type

{color}

message--success__heading__color

$message--success__heading__color: $color-state-success !default;

Description

Message success heading color

Type

{color}

message--success__message__background-color

$message--success__message__background-color: $color-state-success !default;

Description

Message success message content background-color

Type

{color}

message--success__message__color

$message--success__message__color: $white !default;

Description

Message success message content color

Type

{color}

modal__background-color

$modal__background-color: $white !default;

Description

Modal background-color

Type

{color}

modal__border-radius

$modal__border-radius: .25rem !default;

Description

Modal border-radius

Type

{number}

modal__close__color

$modal__close__color: $white !default;

Description

Modal close button color

Type

{color}

number-selector__border-radius

$number-selector__border-radius: .25rem !default;

Description

Number picker border-radius

Type

{number}

number-selector__background-color

$number-selector__background-color: $white !default;

Description

Number selector background-color

Type

{color}

number-selector__border

$number-selector__border: 1px solid $green !default;

Description

Number selector border

Type

{string}

number-selector__color

$number-selector__color: map-get($gray-color-steps, 700);

Description

Number selector color

Type

{color}

number-selector__label__color

$number-selector__label__color: map-get($gray-color-steps, 800) !default;

Description

Number selector label color

Type

{color}

number-selector__label__font-size

$number-selector__label__font-size: zeta !default;

Description

Number selector label color

Type

{color}

number-selector__label__font-weight

$number-selector__label__font-weight: 400 !default;

Description

Number selector label font-weight

Type

{number}

number-picker__border-radius

Deprecated!

Removing .spark-number-picker in 2.0.0

$number-picker__border-radius: .25rem !default;

Description

Number picker border-radius

Type

{number}

number-picker__background-color

Deprecated!

Removing .spark-number-picker in 2.0.0

$number-picker__background-color: $white !default;

Description

Number picker background-color

Type

{color}

number-picker__border

Deprecated!

Removing .spark-number-picker in 2.0.0

$number-picker__border: 1px solid $green !default;

Description

Number picker border

Type

{string}

number-picker__color

Deprecated!

Removing .spark-number-picker in 2.0.0

$number-picker__color: map-get($gray-color-steps, 700);

Description

Number picker color

Type

{color}

pagination__item__background-color

$pagination__item__background-color: transparent !default;

Description

Pagination item background-color

Type

{color}

pagination__item__color

$pagination__item__color: $link--default__color !default;

Description

Pagination item text color

Type

{color}

pagination__item--hover__color

$pagination__item--hover__color: $blue !default;

Description

Pagination item text color on hover

Type

{color}

pagination__item--active__background-color

$pagination__item--active__background-color: $blue !default;

Description

Pagination item background-color when active

Type

{color}

pagination__item--active__color

$pagination__item--active__color: $white !default;

Description

Pagination item text color when active

Type

{color}

pagination__item--focus__border-color

$pagination__item--focus__border-color: map-get($blue-color-steps, 100) !default;

Description

Pagination item border color on focus

Type

{color}

panel__border-radius

$panel__border-radius: .25rem !default;

Description

Panel border-radius

Type

{number}

panel__background-color

$panel__background-color: $white !default;

Description

Panel background-color

Type

{color}

panel__border

$panel__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Panel border

Type

{string}

panel__masthead__box-shadow

$panel__masthead__box-shadow: inset 0 84px 84px -84px $gray !default;

Description

Panel masthead box-shadow

Type

{string}

panel--expand__content__shadow

$panel--expand__content__shadow: 0 3px 16px 0 map-get($gray-color-steps, 300) !default;

Description

Panel expanded content box-shadow

Type

{string}

panel--expand__header__border

$panel--expand__header__border: 1px solid transparent !default;

Description

Panel expanded header border

Type

{string}

panel--expand__header__color

$panel--expand__header__color: map-get($gray-color-steps, 800) !default;

Description

Panel expanded header color

Type

{color}

panel--expand__header--hover__border

$panel--expand__header--hover__border: 1px solid map-get($gray-color-steps, 500) !default;

Description

Panel expanded header border on hover

Type

{string}

panel--expand__header--hover__color

$panel--expand__header--hover__color: map-get($gray-color-steps, 800) !default;

Description

Panel expanded header color on hover

Type

{color}

popover__background-color

$popover__background-color: $white !default;

Description

Popover background-color

Type

{color}

popover__border

$popover__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Popover border

Type

{string}

popover__border-radius

$popover__border-radius: .25rem !default;

Description

Popover border-radius

Type

{number}

popover__box-shadow

$popover__box-shadow: 0 5px 5px rgba(0, 0, 0, .1) !default;

Description

Popover box-shadow

Type

{string}

popover__color

$popover__color: map-get($gray-color-steps, 800) !default;

Description

Popover color

Type

{color}

popover__font-size

$popover__font-size: eta !default;

Description

Popover fontsize variable

Type

{string}

popover--hover__background-color

$popover--hover__background-color: map-get($gray-color-steps, 100) !default;

Description

Popover background-color on hover

Type

{color}

popover--hover__color

$popover--hover__color: map-get($gray-color-steps, 900) !default;

Description

Popover color on hover

Type

{color}

progress-indicator__background-color

$progress-indicator__background-color: $white !default;

Description

Progress indicator background-color

Type

{color}

progress-indicator__meter__background-color

$progress-indicator__meter__background-color: map-get($gray-color-steps, 100) !default;

Description

Progress indicator meter background-color

Type

{color}

progress-indicator__meter__border-color

$progress-indicator__meter__border-color: map-get($gray-color-steps, 400) !default;

Description

Progress indicator meter border-color

Type

{color}

progress-indicator__meter__border

$progress-indicator__meter__border: 1px solid $progress-indicator__meter__border-color !default;

Description

Progress indicator meter border

Type

{string}

progress-indicator__fill__background-color

$progress-indicator__fill__background-color: map-get($blue-color-steps, 200) !default;

Description

Progress indicator fill background-color

Type

{color}

progress-indicator__text__color

$progress-indicator__text__color: map-get($blue-color-steps, 900) !default;

Description

Progress indicator loading text color

Type

{color}

progress-indicator__states__color

$progress-indicator__states__color: map-get($gray-color-steps, 900) !default;

Description

Progress indicator loading states color

Type

{color}

progress-indicator--indeterminate__text__color

$progress-indicator--indeterminate__text__color: map-get($blue-color-steps, 200) !default;

Description

Interdeterminate progress indicator text color

Type

{color}

progress-indicator--btn--default__track__background-color

$progress-indicator--btn--default__track__background-color: map-get($green-color-steps, 300) !default;

Description

Proress indicator default track background-color

Type

{color}

progress-indicator--btn--alt__track__background-color

$progress-indicator--btn--alt__track__background-color: map-get($blue-color-steps, 400) !default;

Description

Progress indicator alternate track background-color

Type

{color}

scroll-to-top__background-color

$scroll-to-top__background-color: transparentize($white, .1) !default;

Description

Background color of scroll to top

Type

{color}

scroll-to-top__border

$scroll-to-top__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Border of scroll to top

Type

{string}

scroll-to-top__box-shadow

$scroll-to-top__box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3) !default;

Description

Box shadow of scroll to top

Type

{string}

scroll-to-top__color

$scroll-to-top__color: $blue !default;

Description

Color of the scroll to top icon

Type

{color}

scroll-to-top--hover__border

$scroll-to-top--hover__border: 1px solid map-get($gray-color-steps, 500) !default;

Description

Border of scroll to top on hover

Type

{string}

scroll-to-top--hover__color

$scroll-to-top--hover__color: map-get($blue-color-steps, 400) !default;

Description

Color of the scroll to top icon on hover

Type

{color}

scroll-to-top--focus__box-shadow

$scroll-to-top--focus__box-shadow: 0 0 0 3px map-get($blue-color-steps, 100) !default;

Description

Box shadow of scroll to top on focus

Type

{string}

scroll-to-top--active__box-shadow

$scroll-to-top--active__box-shadow: none !default;

Description

Box shadow of scroll to top on active

Type

{string}

scroll-to-top--active__background-color

$scroll-to-top--active__background-color: map-get($gray-color-steps, 100) !default;

Description

Background color of scroll to top on active

Type

{color}

scroll-to-top--disabled__background-color

$scroll-to-top--disabled__background-color: map-get($gray-color-steps, 100) !default;

Description

Background color of scroll to top when disabled

Type

{color}

scroll-to-top--disabled__border

$scroll-to-top--disabled__border: 1px solid transparent !default;

Description

Border of scroll to top when disabled

Type

{string}

scroll-to-top--disabled__box-shadow

$scroll-to-top--disabled__box-shadow: none !default;

Description

Box shadow of scroll to top when disabled

Type

{string}

scroll-to-top--disabled__color

$scroll-to-top--disabled__color: map-get($gray-color-steps, 400) !default;

Description

Color of the scroll to top icon when disabled

Type

{color}

select--multiple__border--input-top

$select--multiple__border--input-top: calc(5rem + 3px) solid transparent !default;

Description

Select input border

Type

{string}

select--multiple__border-radius

$select--multiple__border-radius: $input__border-radius !default;

Description

Select input border-radius

Type

{number}

select--multiple__background-color

$select--multiple__background-color: $input__background-color !default;

Description

Select input background-color

Type

{color}

select--multiple__border

$select--multiple__border: $input__border !default;

Description

Select input border

Type

{string}

select--multiple__color

$select--multiple__color: $input__color !default;

Description

Select input color

Type

{color}

select--multiple__arrow__background-color

$select--multiple__arrow__background-color: map-get($gray-color-steps, 700) !default;

Description

Select input dropdown arrow background-color

Type

{color}

select--multiple--hover__border

$select--multiple--hover__border: $input--hover__border !default;

Description

Select input border on hover

Type

{string}

select--multiple--active__border

$select--multiple--active__border: $input--active__border !default;

Description

Select input border when active

Type

{string}

select--multiple--active__label__color

$select--multiple--active__label__color: $input--active__label__color !default;

Description

Select input dropdown arrow background-color when arrow

Type

{color}

select--multiple--disabled__background-color

$select--multiple--disabled__background-color: $input--disabled__background-color !default;

Description

Select input background-color when disabled

Type

{color}

select--multiple--disabled__border

$select--multiple--disabled__border: $input--disabled__border !default;

Description

Select input border when disabled

Type

{string}

select--multiple--disabled__color

$select--multiple--disabled__color: $input--disabled__color !default;

Description

Select input color when disabled

Type

{color}

select__border-radius

$select__border-radius: $input__border-radius !default;

Description

Select input border-radius

Type

{number}

select__background-color

$select__background-color: $input__background-color !default;

Description

Select input background-color

Type

{color}

select__border

$select__border: $input__border !default;

Description

Select input border

Type

{string}

select__color

$select__color: $input__color !default;

Description

Select input color

Type

{color}

select__label__color

$select__label__color: $input__label__color !default;

Description

Select input label color

Type

{color}

select__selected-option__color

$select__selected-option__color: map-get($gray-color-steps, 900) !default;

Description

Select selected option color

Type

{color}

select__placeholder__color

$select__placeholder__color: $input__placeholder__color !default;

Description

Select input placeholder copy color

Type

{color}

select__font-weight

$select__font-weight: $input__font-weight !default;

Description

Select input font-weight

Type

{number}

select__font-weight--thin

$select__font-weight--thin: $input__font-weight--thin !default;

Description

Thin select input font-weight

Type

{number}

select__placeholder__font-weight

$select__placeholder__font-weight: $input__placeholder__font-weight !default;

Description

Select input placeholder copy font-weight

Type

{number}

select__arrow__background-color

$select__arrow__background-color: map-get($gray-color-steps, 700) !default;

Description

Select input dropdown arrow background-color

Type

{color}

select--hover__background-color

$select--hover__background-color: $input--hover__background-color !default;

Description

Select input background-color on hover

Type

{color}

select--hover__border

$select--hover__border: $input--hover__border !default;

Description

Select input border on hover

Type

{string}

select--hover__color

$select--hover__color: $input--hover__color !default;

Description

Select input color on hover

Type

{color}

select--hover__arrow__background-color

$select--hover__arrow__background-color: map-get($gray-color-steps, 800) !default;

Description

Select input dropdown arrow background-color on hover

Type

{color}

select--active__background-color

$select--active__background-color: $input--active__background-color !default;

Description

Select input background-color when active

Type

{color}

select--active__border

$select--active__border: $input--active__border !default;

Description

Select input border when active

Type

{string}

select--active__color

$select--active__color: $input--active__color !default;

Description

Select input color when active

Type

{color}

select--active__label__color

$select--active__label__color: $input--active__label__color !default;

Description

Select input dropdown arrow background-color when arrow

Type

{color}

select--disabled__background-color

$select--disabled__background-color: $input--disabled__background-color !default;

Description

Select input background-color when disabled

Type

{color}

select--disabled__border

$select--disabled__border: $input--disabled__border !default;

Description

Select input border when disabled

Type

{string}

select--disabled__color

$select--disabled__color: $input--disabled__color !default;

Description

Select input color when disabled

Type

{color}

select--disabled__label__color

$select--disabled__label__color: $select__placeholder__color !default;

Description

Select input label color when disabled

Type

{color}

select--state__label__color

$select--state__label__color: $input__label__color !default;

Description

Select input state label color

Type

{color}

select--has-value__arrow__background-color

$select--has-value__arrow__background-color: map-get($gray-color-steps, 900) !default;

Description

Select input with a value arrow background-color

Type

{color}

slider__track__background-color

$slider__track__background-color: map-get($gray-color-steps, 100) !default;

Description

Slider track background-color

Type

{color}

slider__track__border

$slider__track__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Slider track border

Type

{string}

slider__track-fill__background-color

$slider__track-fill__background-color: map-get($green-color-steps, 600) !default;

Description

Slider track value fill background-color

Type

{color}

slider__track-fill__border

$slider__track-fill__border: 1px solid map-get($green-color-steps, 700) !default;

Description

Slider track value fill border

Type

{string}

slider__handle__background-color

$slider__handle__background-color: $green !default;

Description

Slider handle background-color

Type

{color}

slider__handle__border

$slider__handle__border: 1px solid map-get($green-color-steps, 600) !default;

Description

Slider handle border

Type

{string}

slider__handle__box-shadow

$slider__handle__box-shadow: inset 0 -1px 0 map-get($green-color-steps, 600) !default;

Description

Slider handle box-shadow

Type

{string}

slider__handle__color

$slider__handle__color: $white !default;

Description

Slider handle color

Type

{color}

slider--hover__handle__background-color

$slider--hover__handle__background-color: map-get($green-color-steps, 400) !default;

Description

Slider handle background-color on hover

Type

{color}

slider--hover__handle__border

$slider--hover__handle__border: 1px solid map-get($green-color-steps, 600) !default;

Description

Slider handle border on hover

Type

{string}

slider--hover__handle__box-shadow

$slider--hover__handle__box-shadow: inset 0 -1px 0 map-get($green-color-steps, 600) !default;

Description

Slider handle box-shadow on hover

Type

{string}

slider--hover__handle__color

$slider--hover__handle__color: $white !default;

Description

Slider handle color on hover

Type

{color}

slider__label__color

$slider__label__color: map-get($gray-color-steps, 800) !default;

Description

Slider label color

Type

{color}

slider__label__font-size

$slider__label__font-size: zeta !default;

Description

Slider label color

Type

{color}

slider__label__font-weight

$slider__label__font-weight: 400 !default;

Description

Slider label font-weight

Type

{number}

slider--active__handle__background-color

$slider--active__handle__background-color: map-get($green-color-steps, 400) !default;

Description

Slider handle background-color when active

Type

{color}

slider--active__handle__border

$slider--active__handle__border: 1px solid map-get($green-color-steps, 700) !default;

Description

Slider handle border when active

Type

{string}

slider--active__handle__box-shadow

$slider--active__handle__box-shadow: inset 0 -1px 0 1px map-get($green-color-steps, 700) !default;

Description

Slider handle box-shadow when active

Type

{string}

slider--default--focus__box-shadow

$slider--default--focus__box-shadow: 0 0 0 4px map-get($green-color-steps, 100) !default;

Description

Slider handle box-shadow when focused

Type

{string}

slider--active__handle__color

$slider--active__handle__color: $slider__handle__color !default;

Description

Slider handle color when active

Type

{color}

slider--active__handle__disc__background-color

$slider--active__handle__disc__background-color: map-get($green-color-steps, 500) !default;

Description

Slider handle disc color when active

Type

{color}

slider--disabled__track__background-color

$slider--disabled__track__background-color: map-get($gray-color-steps, 100) !default;

Description

Slider track background-color when disabled

Type

{color}

slider--disabled__track__border

$slider--disabled__track__border: 1px solid map-get($gray-color-steps, 100) !default;

Description

Slider handle border when disabled

Type

{string}

slider--disabled__color

$slider--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Slider color when disabled

Type

{color}

slider--secondary__track__background-color

$slider--secondary__track__background-color: map-get($gray-color-steps, 100) !default;

Description

Secondary slider track background-color

Type

{color}

slider--secondary__track__border

$slider--secondary__track__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Secondary slider track border

Type

{string}

slider--secondary__track-fill__background-color

$slider--secondary__track-fill__background-color: map-get($blue-color-steps, 200) !default;

Description

Secondary slider track value fill background-color

Type

{color}

slider--secondary__track-fill__border

$slider--secondary__track-fill__border: 1px solid map-get($blue-color-steps, 400) !default;

Description

Secondary slider track value fill border

Type

{string}

slider--secondary__handle__background-color

$slider--secondary__handle__background-color: $white !default;

Description

Secondary slider handle background-color

Type

{color}

slider--secondary__handle__border

$slider--secondary__handle__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Secondary slider handle border

Type

{string}

slider--secondary__handle__box-shadow

$slider--secondary__handle__box-shadow: inset 0 -1px 0 map-get($gray-color-steps, 400) !default;

Description

Secondary slider handle box-shadow

Type

{string}

slider--secondary__handle__color

$slider--secondary__handle__color: map-get($gray-color-steps, 800) !default;

Description

Secondary slider handle color

Type

{color}

slider--secondary--hover__handle__background-color

$slider--secondary--hover__handle__background-color: $white !default;

Description

Secondary slider handle background-color on hover

Type

{color}

slider--secondary--hover__handle__border

$slider--secondary--hover__handle__border: 1px solid map-get($gray-color-steps, 800) !default;

Description

Secondary slider handle border on hover

Type

{string}

slider--secondary--hover__handle__box-shadow

$slider--secondary--hover__handle__box-shadow: inset 0 -1px 0 transparent !default;

Description

Secondary slider handle box-shadow on hover

Type

{string}

slider--secondary--hover__handle__color

$slider--secondary--hover__handle__color: map-get($gray-color-steps, 700) !default;

Description

Secondary slider handle color on hover

Type

{color}

slider--secondary--active__handle__background-color

$slider--secondary--active__handle__background-color: $gray !default;

Description

Secondary slider handle background-color when active

Type

{color}

slider--secondary--active__handle__border

$slider--secondary--active__handle__border: 1px solid map-get($gray-color-steps, 700) !default;

Description

Secondary slider handle border when active

Type

{string}

slider--secondary--active__handle__box-shadow

$slider--secondary--active__handle__box-shadow: inset 0 -1px 0 transparent !default;

Description

Secondary slider handle box-shadow when active

Type

{string}

slider--secondary--active__handle__color

$slider--secondary--active__handle__color: map-get($gray-color-steps, 900) !default;

Description

Secondary slider handle color when active

Type

{color}

slider--secondary--active__handle__disc__background-color

$slider--secondary--active__handle__disc__background-color: map-get($gray-color-steps, 100) !default;

Description

Secondary slider handle disc color when active

Type

{color}

slider--secondary--disabled__track__background-color

$slider--secondary--disabled__track__background-color: map-get($gray-color-steps, 100) !default;

Description

Secondary slider track background-color when disabled

Type

{color}

slider--secondary--disabled__track__border

$slider--secondary--disabled__track__border: 1px solid map-get($gray-color-steps, 100) !default;

Description

Secondary slider track border when disabled

Type

{string}

slider--secondary--disabled__color

$slider--secondary--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Secondary slider color when disabled

Type

{color}

slider--integrated--hover__handle__box-shadow

$slider--integrated--hover__handle__box-shadow: inset 0 -2px 0 $green !default;

Description

Integrated slider handle box-shadow on hover

Type

{string}

slider--integrated--active__handle__box-shadow

$slider--integrated--active__handle__box-shadow: inset 0 -2px 0 transparent !default;

Description

Integrated slider handle box-shadow when active

Type

{string}

splash-screen__background-color

$splash-screen__background-color: $red !default;

Description

Splash screen background-color

Type

{color}

splash-screen__color

$splash-screen__color: $white !default;

Description

Splash screen color

Type

{color}

splash-screen__angle__background-color

$splash-screen__angle__background-color: map-get($red-color-steps, 300) !default;

Description

Splash screen background angle background-color

Type

{color}

splash-screen__panel__border

$splash-screen__panel__border: 1px solid map-get($red-color-steps, 400) !default;

Description

Splash screen panel content border

Type

{string}

step-indicator__title__background-color

$step-indicator__title__background-color: map-get($blue-color-steps, 200) !default;

Description

Step-indicator title background-color

Type

{color}

step-indicator__title__color

$step-indicator__title__color: $white !default;

Description

Step-indicator title color

Type

{color}

step-indicator__body__background-color

$step-indicator__body__background-color: $white !default;

Description

Step-indicator body background-color

Type

{color}

step-indicator__body__border

$step-indicator__body__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Step-indicator body border

Type

{color}

step-indicator__subtitle__color

$step-indicator__subtitle__color: map-get($blue-color-steps, 400) !default;

Description

Step-indicator subtitle color

Type

{color}

step-indicator__item__color

$step-indicator__item__color: map-get($gray-color-steps, 800) !default;

Description

Step-indicator item color

Type

{color}

step-indicator__item--hover__color

$step-indicator__item--hover__color: map-get($gray-color-steps, 900) !default;

Description

Step-indicator item hover color

Type

{color}

step-indicator__item--dropdown--hover__background-color

$step-indicator__item--dropdown--hover__background-color: map-get($gray-color-steps, 100) !default;

Description

Step-indicator item dropdown hover background color

Type

{color}

step-indicator__item--focus__color

$step-indicator__item--focus__color: map-get($gray-color-steps, 800) !default;

Description

Step-indicator item focus color

Type

{color}

step-indicator__icon__border-radius

$step-indicator__icon__border-radius: 50% !default;

Description

Step-indicator icon border radius

Type

{number}

step-indicator__icon__border

$step-indicator__icon__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Step-indicator icon border

Type

{string}

step-indicator__icon__background-color

$step-indicator__icon__background-color: $white !default;

Description

Step-indicator icon background-color

Type

{color}

step-indicator__icon__connection-line__color

$step-indicator__icon__connection-line__color: map-get($gray-color-steps, 400) !default;

Description

Step-indicator icon connection line color

Type

{color}

step-indicator__icon--hover__border

$step-indicator__icon--hover__border: 1px solid map-get($gray-color-steps, 500) !default;

Description

Step-indicator icon hover border

Type

{string}

step-indicator__icon--completed__background-color

$step-indicator__icon--completed__background-color: map-get($blue-color-steps, 150) !default;

Description

Step-indicator icon completed backgound color

Type

{color}

step-indicator__icon--completed__color

$step-indicator__icon--completed__color: $white !default;

Description

Step-indicator icon completed color

Type

{color}

step-indicator__icon--completed__border-color

$step-indicator__icon--completed__border-color: map-get($blue-color-steps, 150) !default;

Description

Step-indicator icon completed border color

Type

{color}

step-indicator__icon--current__background-color

$step-indicator__icon--current__background-color: map-get($blue-color-steps, 400) !default;

Description

Step-indicator icon current backgound color

Type

{color}

step-indicator__icon--current__color

$step-indicator__icon--current__color: $white !default;

Description

Step-indicator icon current color

Type

{color}

step-indicator__icon--current__border-color

$step-indicator__icon--current__border-color: map-get($blue-color-steps, 400) !default;

Description

Step-indicator icon current border color

Type

{color}

step-indicator__icon--focus__box-shadow

$step-indicator__icon--focus__box-shadow: 0 0 0 4px map-get($blue-color-steps, 100) !default;

Description

Step-indicator icon focus box-shadow

Type

{string}

step-indicator__icon--disabled__color

$step-indicator__icon--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Step-indicator icon disabled color

Type

{color}

step-indicator__icon--disabled__border-color

$step-indicator__icon--disabled__border-color: map-get($gray-color-steps, 400) !default;

Description

Step-indicator icon disabled border color

Type

{color}

step-indicator__text--completed__color

$step-indicator__text--completed__color: map-get($gray-color-steps, 800) !default;

Description

Step-indicator text completed color

Type

{color}

step-indicator__text--current__color

$step-indicator__text--current__color: map-get($blue-color-steps, 400) !default;

Description

Step-indicator text current color

Type

{color}

step-indicator__text--disabled__color

$step-indicator__text--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Step-indicator text disabled color

Type

{color}

step-indicator__list--dropdown__background-color

$step-indicator__list--dropdown__background-color: $white !default;

Description

Step-indicator list dropdown background-color

Type

{string}

step-indicator__list--dropdown__box-shadow

$step-indicator__list--dropdown__box-shadow: 1px 1px 5px map-get($gray-color-steps, 400) !default;

Description

Step-indicator list dropdown box-shadow

Type

{string}

step-indicator__list--dropdown__border

$step-indicator__list--dropdown__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Step-indicator list dropdown border

Type

{string}

step-indicator__item--dropdown--expand__background-color

$step-indicator__item--dropdown--expand__background-color: map-get($gray-color-steps, 100) !default;

Description

Step-indicator item dropdown expand background-color

Type

{string}

step-indicator__item--dropdown__header__border

$step-indicator__item--dropdown__header__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Step-indicator item dropdown expand background-color

Type

{string}

spark-step-indicator__label--dropdown__arrow__border-color

$spark-step-indicator__label--dropdown__arrow__border-color: map-get($gray-color-steps, 800) !default;

Description

Step-indicator label dropdown arrow color

Type

{color}

table__head__background-color

$table__head__background-color: map-get($gray-color-steps, 800) !default;

Description

Table heading background-color

Type

{color}

table__head__border-color

$table__head__border-color: map-get($gray-color-steps, 900) !default;

Description

Table heading border-color

Type

{color}

table__head__color

$table__head__color: $white !default;

Description

Table heading color

Type

{color}

table__head__font-weight

$table__head__font-weight: 400 !default;

Description

Table heading font-weight

Type

{number}

table__head--sorted__font-weight

$table__head--sorted__font-weight: 700 !default;

Description

Sorting table heading font-weight

Type

{number}

table__head__font-size

$table__head__font-size: eta !default;

Description

Table heading fontsize variable

Type

{string}

table__head__text-transform

$table__head__text-transform: uppercase !default;

Description

Table heading text-transform

Type

{string}

table__head--hover__color

$table__head--hover__color: map-get($gray-color-steps, 400) !default;

Description

Table heading color on hover

Type

{color}

table__head--disabled__color

$table__head--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Table heading color

Type

{color}

table__background-color

$table__background-color: $white !default;

Description

Table background-color

Type

{color}

table__border-color

$table__border-color: map-get($gray-color-steps, 400) !default;

Description

Table border-color

Type

{color}

table--hover__background-color

$table--hover__background-color: transparentize($lightblue, .9) !default;

Description

Table background-color on hover

Type

{color}

table--hover__color

$table--hover__color: map-get($gray-color-steps, 800) !default;

Description

Table color on hover

Type

{color}

table--active__background-color

$table--active__background-color: map-get($gray-color-steps, 100) !default;

Description

Table background-color when active

Type

{color}

table--active__border-color

$table--active__border-color: map-get($gray-color-steps, 800) !default;

Description

Table border-color when active

Type

{color}

table--active__color

$table--active__color: map-get($gray-color-steps, 900) !default;

Description

Table color when active

Type

{color}

table--condensed__body__font-size

$table--condensed__body__font-size: eta !default;

Description

Condensed table body content fontsize variable

Type

{string}

table__input__border-color

$table__input__border-color: map-get($gray-color-steps, 400) !default;

Description

Table input `border-color

Type

{color}

table__input--hover__background-color

$table__input--hover__background-color: transparentize($white, .5) !default;

Description

Table input background-color when hover

Type

{color}

table__input--hover__border-color

$table__input--hover__border-color: map-get($gray-color-steps, 500) !default;

Description

Table input border-color when hover

Type

{color}

table__input--hover__color

$table__input--hover__color: map-get($gray-color-steps, 900) !default;

Description

Table input color when hover

Type

{color}

table__input--focus__background-color

$table__input--focus__background-color: inherit !default;

Description

Table input background-color when focus

Type

{color}

table__input--focus__box-shadow

$table__input--focus__box-shadow: 0 0 1px 2px map-get($gray-color-steps, 300) !default;

Description

Table input box-shadow when focus

Type

{string}

table__input--focus__border-color

$table__input--focus__border-color: map-get($gray-color-steps,500) !default;

Description

Table input border-color when focus

Type

{color}

table__input--focus__color

$table__input--focus__color: map-get($gray-color-steps, 1000) !default;

Description

Table input color when focus

Type

{color}

table__input--editing__background-color

$table__input--editing__background-color: map-get($gray-color-steps, 100) !default;

Description

Table input background-color when editing

Type

{color}

table__input--editing__box-shadow

$table__input--editing__box-shadow: 0 0 2px 2px map-get($gray-color-steps, 100) !default;

Description

Table input box-shadow when editing

Type

{string}

table__input--editing__border-color

$table__input--editing__border-color: map-get($gray-color-steps,700) !default;

Description

Table input border-color when editing

Type

{color}

table__edit-actions__background

$table__edit-actions__background: linear-gradient(to left, rgba(100, 100, 100, 0.5), transparent) !default;

Description

Table edit input group's drop shadow

Type

{string}

table--disabled__color

$table--disabled__color: map-get($gray-color-steps, 500);

Description

Disabled text color

Type

{color}

tabs__background-color

$tabs__background-color: map-get($gray-color-steps, 100) !default;

Description

Tabs background-color

Type

{color}

tabs__border

$tabs__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Tabs border

Type

{string}

tabs__color

$tabs__color: map-get($gray-color-steps, 800) !default;

Description

Tabs color

Type

{color}

tabs__box-shadow

$tabs__box-shadow: inset 0 -12px 16px -10px map-get($gray-color-steps, 400) !default;

Description

Tabs box-shadow

Type

{string}

tabs--hover__background-color

$tabs--hover__background-color: $tabs__background-color !default;

Description

Tabs background-color on hover

Type

{color}

tabs--hover__border

$tabs--hover__border: 1px solid $tabs__border !default;

Description

Tabs border on hover

Type

{string}

tabs--hover__color

$tabs--hover__color: map-get($gray-color-steps, 700) !default;

Description

Tabs color on hover

Type

{color}

tabs--active__background-color

$tabs--active__background-color: $white !default;

Description

Tabs background-color when active

Type

{color}

tabs--active__border

$tabs--active__border: 1px solid map-get($gray-color-steps, 500) !default;

Description

Tabs border when active

Type

{string}

tabs--active__box-shadow

$tabs--active__box-shadow: map-get($gray-color-steps, 400) !default;

Description

Tabs box-shadow when active

Type

{string}

tabs--active__color

$tabs--active__color: map-get($gray-color-steps, 1000) !default;

Description

Tabs color when active

Type

{color}

tabs--focus__border

$tabs--focus__border: 1px solid map-get($gray-color-steps, 500) !default;

Description

Tabs border when focus

Type

{string}

input__border-radius

$input__border-radius: .25rem !default;

Description

Text input border-radius

Type

{number}

input__background-color

$input__background-color: $white !default;

Description

Text input background-color

Type

{color}

input__border

$input__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Text input border

Type

{string}

input__color

$input__color: map-get($gray-color-steps, 1000) !default;

Description

Text input color

Type

{color}

input__label__color

$input__label__color: map-get($gray-color-steps, 800) !default;

Description

Text input label color

Type

{color}

input__placeholder__color

$input__placeholder__color: map-get($gray-color-steps, 700) !default;

Description

Text input placeholder color

Type

{color}

input__font-weight

$input__font-weight: 400 !default;

Description

Text input font-weight

Type

{number}

input__font-weight--thin

$input__font-weight--thin: 300 !default;

Description

Thin text input font-weight

Type

{number}

input__placeholder__font-weight

$input__placeholder__font-weight: 300 !default;

Description

Text input placeholder font-weight

Type

{number}

input__message__font-size

$input__message__font-size: zeta !default;

Description

Text input fontsize variable

Type

{string}

input__message__font-weight

$input__message__font-weight: 700 !default;

Description

Text input fontsize variable

Type

{string}

input--hover__background-color

$input--hover__background-color: $white !default;

Description

Text input background-color on hover

Type

{color}

input--hover__border

$input--hover__border: 1px solid map-get($gray-color-steps, 500) !default;

Description

Text input border on hover

Type

{string}

input--hover__color

$input--hover__color: map-get($gray-color-steps, 800) !default;

Description

Text input color on hover

Type

{color}

input--active__background-color

$input--active__background-color: map-get($gray-color-steps, 100) !default;

Description

Text input background-color when active

Type

{color}

input--active__border

$input--active__border: 1px solid map-get($gray-color-steps, 700) !default;

Description

Text input border when active

Type

{string}

input--active__color

$input--active__color: map-get($gray-color-steps, 1000) !default;

Description

Text input color when active

Type

{color}

input--active__label__color

$input--active__label__color: map-get($green-color-steps, 400) !default;

Description

Text input label color when active

Type

{color}

input--disabled__background-color

$input--disabled__background-color: map-get($gray-color-steps, 100) !default;

Description

Text input background-color when disabled

Type

{color}

input--disabled__border

$input--disabled__border: 1px solid map-get($gray-color-steps, 100) !default;

Description

Text input border when disabled

Type

{string}

input--disabled__color

$input--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Text input color when disabled

Type

{color}

input--error__color

$input--error__color: $white !default;

Description

Text input with an error color

Type

{color}

input--typeahead__placeholder__color

$input--typeahead__placeholder__color: map-get($gray-color-steps, 500) !default;

Description

Text input with a typeahead color

Type

{color}

toggle__background-color

$toggle__background-color: $white !default;

Description

Toggle background-color

Type

{color}

toggle__border

$toggle__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Toggle border

Type

{string}

toggle__color

$toggle__color: map-get($gray-color-steps, 800) !default;

Description

Toggle color

Type

{color}

toggle__track__background-color

$toggle__track__background-color: map-get($gray-color-steps, 100) !default;

Description

Toggle track background-color

Type

{color}

toggle__track__border

$toggle__track__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Toggle track border

Type

{string}

toggle__handle__background-color

$toggle__handle__background-color: $white !default;

Description

Toggle handle background-color

Type

{color}

toggle__handle__border

$toggle__handle__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Toggle handle border

Type

{string}

toggle__handle__box-shadow

$toggle__handle__box-shadow: inset 0 -1px 0 map-get($gray-color-steps, 400) !default;

Description

Toggle handle box-shadow

Type

{string}

toggle--focus__box-shadow

$toggle--focus__box-shadow: 0 0 0 4px map-get($blue-color-steps, 100) !default;

Description

Toggle focus box-shadow

Type

{string}

toggle--active__background-color

$toggle--active__background-color: map-get($blue-color-steps, 200) !default;

Description

Toggle background-color when active

Type

{color}

toggle--active__border-color

$toggle--active__border-color: map-get($blue-color-steps, 400) !default;

Description

Toggle border-color when active

Type

{color}

toggle--active__color

$toggle--active__color: $white !default;

Description

Toggle color when active

Type

{color}

toggle--active__track__background-color

$toggle--active__track__background-color: map-get($blue-color-steps, 200)!default;

Description

Toggle track background-color when active

Type

{color}

toggle--active__track__border

$toggle--active__track__border: 1px solid map-get($green-color-steps, 400) !default;

Description

Toggle track border when active

Type

{string}

toggle--active__handle__border

$toggle--active__handle__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

Toggle handle border when active

Type

{string}

toggle--active__handle__box-shadow

$toggle--active__handle__box-shadow: inset 0 -1px 0 map-get($gray-color-steps, 100) !default;

Description

Toggle handle box-shadow when active

Type

{string}

toggle--disabled__background-color

$toggle--disabled__background-color: map-get($gray-color-steps, 100) !default;

Description

Toggle background-color when disabled

Type

{color}

toggle--disabled__border

$toggle--disabled__border: 1px solid $white !default;

Description

Toggle border when disabled

Type

{string}

toggle--disabled__color

$toggle--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Toggle color when disabled

Type

{color}

toggle--disabled__track__background-color

$toggle--disabled__track__background-color: map-get($gray-color-steps, 100) !default;

Description

Toggle track background-color when disabled

Type

{color}

toggle--disabled__track__border

$toggle--disabled__track__border: 1px solid map-get($gray-color-steps, 100) !default;

Description

Toggle track border when disabled

Type

{string}

toggle--disabled__handle__background-color

$toggle--disabled__handle__background-color: map-get($gray-color-steps, 100) !default;

Description

Toggle handle background-color when disabled

Type

{color}

toggle--disabled__handle__border

$toggle--disabled__handle__border: 1px solid $white !default;

Description

Toggle handle border when disabled

Type

{string}

tooltip__background-color

$tooltip__background-color: map-get($gray-color-steps, 1000) !default;

Description

Tooltip background-color

Type

{color}

tooltip__border-radius

$tooltip__border-radius: .25rem !default;

Description

Tooltip border-radius

Type

{number}

tooltip__color

$tooltip__color: $white !default;

Description

Tooltip color

Type

{color}

tooltip__font-size

$tooltip__font-size: eta !default;

Description

Tooltip font-size

Type

{color}

config/components navigation dots color

config/components/button

variables

btn__border-radius

$btn__border-radius: .25rem !default;

Description

Border radius for buttons

Type

{number}

btn--default__background-color

$btn--default__background-color: $green !default;

Description

Default/primary button background-color

Type

{color}

btn--default__border

$btn--default__border: 1px solid map-get($green-color-steps, 600) !default;

Description

Default/primary button border

Type

{string}

btn--default__box-shadow

$btn--default__box-shadow: inset 0 -2px 0 map-get($green-color-steps, 600) !default;

Description

Default/primary button box-shadow

Type

{string}

btn--default__box-shadow--small

$btn--default__box-shadow--small: inset 0 -2px 0 map-get($green-color-steps, 600) !default;

Description

Small default/primary button box-shadow

Type

{string}

btn--default__color

$btn--default__color: $white !default;

Description

Default/primary button color

Type

{color}

btn--default__font-size

$btn--default__font-size: zeta !default;

Description

Default/primary button fontsize variable

Type

{string}

btn--default__font-size--large

$btn--default__font-size--large: gamma !default;

Description

Large default/primary button fontsize variable

Type

{string}

btn--default__font-size--small

$btn--default__font-size--small: eta !default;

Description

Small default/primary button fontsize variable

Type

{string}

btn--default__font-weight

$btn--default__font-weight: 700 !default;

Description

Default/primary button font-weight

Type

{number}

btn--default--hover__background-color

$btn--default--hover__background-color: map-get($green-color-steps, 400) !default;

Description

Default/primary button background-color on hover

Type

{color}

btn--default--hover__color

$btn--default--hover__color: $white !default;

Description

Default/primary button color on hover

Type

{color}

btn--default--focus__box-shadow

$btn--default--focus__box-shadow: 0 0 0 4px map-get($green-color-steps, 100) !default;

Description

Default/primary button box-shadow on hover

Type

{string}

btn--default--focus__box-shadow--small

$btn--default--focus__box-shadow--small: 0 0 0 3px map-get($green-color-steps, 100) !default;

Description

Small default/primary button box-shadow on hover

Type

{string}

btn--default--active__background-color

$btn--default--active__background-color: map-get($green-color-steps, 600) !default;

Description

Default/primary button background-color when active

Type

{color}

btn--default--active__border

$btn--default--active__border: 1px solid map-get($green-color-steps, 700) !default;

Description

Default/primary button border when active

Type

{string}

btn--default--active__color

$btn--default--active__color: $white !default;

Description

Default/primary button color when active

Type

{color}

btn--default--disabled__background-color

$btn--default--disabled__background-color: map-get($gray-color-steps, 100) !default;

Description

Default/primary button background-color when disabled

Type

{color}

btn--default--disabled__border

$btn--default--disabled__border: 1px solid map-get($gray-color-steps, 100) !default;

Description

Default/primary button border when disabled

Type

{string}

btn--default--disabled__color

$btn--default--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Default/primary button color when disabled

Type

{color}

btn--brand__background-color

$btn--brand__background-color: map-get($red-color-steps, 400) !default;

Description

Brand button background-color

Type

{color}

btn--brand__border

$btn--brand__border: 1px solid map-get($red-color-steps, 700) !default;

Description

Brand button border

Type

{string}

btn--brand__box-shadow

$btn--brand__box-shadow: inset 0 -2px 0 map-get($red-color-steps, 700) !default;

Description

Brand button box-shadow

Type

{string}

btn--brand__box-shadow--small

$btn--brand__box-shadow--small: inset 0 -1px 0 map-get($red-color-steps, 700) !default;

Description

Small brand button box-shadow

Type

{string}

btn--brand--hover__background-color

$btn--brand--hover__background-color: map-get($red-color-steps, 500) !default;

Description

Brand button background-color on hover

Type

{color}

btn--brand--active__background-color

$btn--brand--active__background-color: map-get($red-color-steps, 600) !default;

Description

Brand button background-color when active

Type

{color}

btn--brand--active__border

$btn--brand--active__border: 1px solid map-get($red-color-steps, 700) !default;

Description

Brand button border when active

Type

{string}

btn--brand--focus__box-shadow

$btn--brand--focus__box-shadow: 0 0 0 4px map-get($red-color-steps, 100) !default;

Description

Brand button box-shadow when focused

Type

{string}

btn--secondary__background-color

$btn--secondary__background-color: $white !default;

Description

Secondary button background-color

Type

{color}

btn--secondary__border

$btn--secondary__border: 1px solid $green !default;

Description

Secondary button border

Type

{string}

btn--secondary__box-shadow

$btn--secondary__box-shadow: inset 0 -2px 0 $green !default;

Description

Secondary button box-shadow

Type

{string}

btn--secondary__box-shadow--small

$btn--secondary__box-shadow--small: inset 0 -1px 0 $green !default;

Description

Small secondary button box-shadow

Type

{string}

btn--secondary__color

$btn--secondary__color: $green !default;

Description

Secondary button color

Type

{color}

btn--secondary--hover__background-color

$btn--secondary--hover__background-color: $white !default;

Description

Secondary button background-color on hover

Type

{color}

btn--secondary--hover__color

$btn--secondary--hover__color: map-get($green-color-steps, 400) !default;

Description

Secondary button color on hover

Type

{color}

btn--secondary--hover__border

$btn--secondary--hover__border: 1px solid map-get($green-color-steps, 400) !default;

Description

Secondary button border on hover

Type

{string}

btn--secondary--hover__box-shadow

$btn--secondary--hover__box-shadow: inset 0 -2px 0 map-get($green-color-steps, 400) !default;

Description

Secondary button box-shadow on hover

Type

{string}

btn--secondary--hover__box-shadow--small

$btn--secondary--hover__box-shadow--small: inset 0 -1px 0 map-get($green-color-steps, 400) !default;

Description

Ssmall secondary button box-shadow on hover

Type

{string}

btn--secondary--active__color

$btn--secondary--active__color: map-get($green-color-steps, 600) !default;

Description

Secondary button color when active

Type

{color}

btn--secondary--active__border

$btn--secondary--active__border: 1px solid map-get($green-color-steps, 600) !default;

Description

Secondary button border when active

Type

{string}

btn--secondary--active__background-color

$btn--secondary--active__background-color: map-get($gray-color-steps, 100) !default;

Description

Secondary button background-color when active

Type

{color}

btn--secondary--active__box-shadow

$btn--secondary--active__box-shadow: $btn--secondary--hover__box-shadow !default;

Description

Secondary button box-shadow when active

Type

{string}

btn--secondary--active__box-shadow--small

$btn--secondary--active__box-shadow--small: $btn--secondary--hover__box-shadow--small !default;

Description

Small secondary button box-shadow when active

Type

{string}

btn--secondary--focus__box-shadow

$btn--secondary--focus__box-shadow: 0 0 0 4px map-get($green-color-steps, 100) !default;

Description

Secondary button box-shadow when focused

Type

{string}

btn--secondary--focus__box-shadow--small

$btn--secondary--focus__box-shadow--small: 0 0 0 3px map-get($green-color-steps, 100) !default;

Description

Ssmall secondary button box-shadow when focused

Type

{string}

btn--alt__background-color

Deprecated!

Remove in 2.0.0

$btn--alt__background-color: $blue !default;

Description

Alternate button color

Type

{color}

btn--alt__border

Deprecated!

Remove in 2.0.0

$btn--alt__border: 1px solid map-get($blue-color-steps, 400) !default;

Description

Alternate button border

Type

{string}

btn--alt__box-shadow

Deprecated!

Remove in 2.0.0

$btn--alt__box-shadow: inset 0 -2px 0 map-get($blue-color-steps, 400) !default;

Description

Alternate button box-shadow

Type

{string}

btn--alt__box-shadow--small

Deprecated!

Remove in 2.0.0

$btn--alt__box-shadow--small: inset 0 -1px 0 map-get($blue-color-steps, 400) !default;

Description

Small alternate button box-shadow

Type

{string}

btn--alt__color

Deprecated!

Remove in 2.0.0

$btn--alt__color: $white !default;

Description

Alternate button color

Type

{color}

btn--alt--hover__background-color

Deprecated!

Remove in 2.0.0

$btn--alt--hover__background-color: map-get($blue-color-steps, 300) !default;

Description

Alternate button background-color on hover

Type

{color}

btn--alt--hover__color

Deprecated!

Remove in 2.0.0

$btn--alt--hover__color: $white !default;

Description

Alternate button color on hover

Type

{color}

btn--alt--hover__border

Deprecated!

Remove in 2.0.0

$btn--alt--hover__border: 1px solid map-get($blue-color-steps, 500) !default;

Description

Alternate button border on hover

Type

{string}

btn--alt--hover__box-shadow

Deprecated!

Remove in 2.0.0

$btn--alt--hover__box-shadow: inset 0 -2px 0 map-get($blue-color-steps, 500) !default;

Description

Alternate button box-shadow on hover

Type

{string}

btn--alt--hover__box-shadow--small

Deprecated!

Remove in 2.0.0

$btn--alt--hover__box-shadow--small: inset 0 -1px 0 $blue !default;

Description

Small alternate button box-shadow on hover

Type

{string}

btn--alt--active__background-color

Deprecated!

Remove in 2.0.0

$btn--alt--active__background-color: map-get($blue-color-steps, 400) !default;

Description

Alternate button background-color when active

Type

{color}

btn--alt--active__border

Deprecated!

Remove in 2.0.0

$btn--alt--active__border: 1px solid map-get($blue-color-steps, 500) !default;

Description

Alternate button border when active

Type

{string}

btn--alt--active__color

Deprecated!

Remove in 2.0.0

$btn--alt--active__color: $white !default;

Description

Alternate button background-color when active

Type

{color}

btn--alt--active__box-shadow

Deprecated!

Remove in 2.0.0

$btn--alt--active__box-shadow: inset 0 -2px 0 map-get($blue-color-steps, 500) !default;

Description

Alternate button box-shadow when active

Type

{string}

btn--alt--active__box-shadow--small

Deprecated!

Remove in 2.0.0

$btn--alt--active__box-shadow--small: inset 0 -1px 0 map-get($blue-color-steps, 500) !default;

Description

Small Alternate button box-shadow when active

Type

{string}

btn--alt--focus__box-shadow

Deprecated!

Remove in 2.0.0

$btn--alt--focus__box-shadow: 0 0 0 4px map-get($blue-color-steps, 100) !default;

Description

Alternate button box-shadow when focused

Type

{string}

btn--alt--focus__box-shadow--small

Deprecated!

Remove in 2.0.0

$btn--alt--focus__box-shadow--small: 0 0 0 3px map-get($blue-color-steps, 100) !default;

Description

Small Alternate button box-shadow when focused

Type

{string}

btn--negative__background-color

$btn--negative__background-color: $white !default;

Description

Negative button background-color

Type

{color}

btn--negative__border

$btn--negative__border: 1px solid $red !default;

Description

Negative button border

Type

{string}

btn--negative__box-shadow

$btn--negative__box-shadow: inset 0 -2px 0 $red !default;

Description

Negative button box-shadow

Type

{string}

btn--negative__box-shadow--small

$btn--negative__box-shadow--small: inset 0 -1px 0 $red !default;

Description

Small negative button box-shadow

Type

{string}

btn--negative__color

$btn--negative__color: $red !default;

Description

Negative button color

Type

{color}

btn--negative--hover__background-color

$btn--negative--hover__background-color: $white !default;

Description

Negative button background-color on hover

Type

{color}

btn--negative--hover__color

$btn--negative--hover__color: map-get($red-color-steps, 400) !default;

Description

Negative button color on hover

Type

{color}

btn--negative--hover__border

$btn--negative--hover__border: 1px solid map-get($red-color-steps, 400) !default;

Description

Negative button border on hover

Type

{string}

btn--negative--hover__box-shadow

$btn--negative--hover__box-shadow: inset 0 -2px 0 map-get($red-color-steps, 400) !default;

Description

Negative button box-shadow on hover

Type

{string}

btn--negative--hover__box-shadow--small

$btn--negative--hover__box-shadow--small: inset 0 -1px 0 map-get($red-color-steps, 400) !default;

Description

Small negative button box-shadow on hover

Type

{string}

btn--negative--active__background-color

$btn--negative--active__background-color: map-get($gray-color-steps, 100) !default;

Description

Negative button background-color when active

Type

{color}

btn--negative--active__border

$btn--negative--active__border: 1px solid map-get($red-color-steps, 500) !default;

Description

Negative button border when active

Type

{string}

btn--negative--active__color

$btn--negative--active__color: map-get($red-color-steps, 500) !default;

Description

Negative button color when active

Type

{color}

btn--negative--active__box-shadow

$btn--negative--active__box-shadow: inset 0 -2px 0 map-get($red-color-steps, 500) !default;

Description

Negative button box-shadow when active

Type

{string}

btn--negative--active__box-shadow--small

$btn--negative--active__box-shadow--small: inset 0 -1px 0 map-get($red-color-steps, 500) !default;

Description

Small negative button box-shadow when active

Type

{string}

btn--negative--focus__box-shadow

$btn--negative--focus__box-shadow: 0 0 0 4px map-get($red-color-steps, 100) !default;

Description

Negative button box-shadow when focused

Type

{string}

btn--negative--focus__box-shadow--small

$btn--negative--focus__box-shadow--small: 0 0 0 3px map-get($red-color-steps, 100) !default;

Description

Small negative button box-shadow when focused

Type

{string}

btn--text__color

$btn--text__color: $green !default;

Description

Text button color

Type

{color}

btn--text--hover__color

$btn--text--hover__color: map-get($green-color-steps, 400) !default;

Description

Text button color on hover

Type

{color}

btn--icon__color

$btn--icon__color: map-get($gray-color-steps, 800) !default;

Description

Icon button color

Type

{color}

btn--icon__background-color

$btn--icon__background-color: transparent !default;

Description

Icon button background-color

Type

{color}

btn--icon__border-radius

$btn--icon__border-radius: .25rem !default;

Description

Icon button border-radius

Type

{color}

btn--icon__border

$btn--icon__border: 4px solid transparent !default;

Description

Icon button border

Type

{color}

btn--icon__font-size

$btn--icon__font-size: delta !default;

Description

Small default/primary button fontsize variable

Type

{string}

btn--icon--focus__border

$btn--icon--focus__border: 4px solid map-get($gray-color-steps, 100) !default;

Description

Icon button border on focus

Type

{color}

btn--icon--hover__color

$btn--icon--hover__color: map-get($gray-color-steps, 900) !default;

Description

Icon button color on hover

Type

{color}

btn--icon--hover__background-color

$btn--icon--hover__background-color: map-get($gray-color-steps, 100) !default;

Description

Icon button background-color on hover

Type

{color}

btn--icon--active__color

$btn--icon--active__color: $white !default;

Description

Icon button color on active

Type

{color}

btn--icon--active__background-color

$btn--icon--active__background-color: $blue !default;

Description

Icon button background-color on active

Type

{color}

btn--icon--active__border

$btn--icon--active__border: 4px solid $blue !default;

Description

Icon button border on focus

Type

{color}

btn--icon--disabled__color

$btn--icon--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Icon button color when-disabled

Type

{color}

btn--view-more__background-color

$btn--view-more__background-color: $white !default;

Description

View More button background-color

Type

{color}

btn--view-more__border

$btn--view-more__border: 1px solid map-get($gray-color-steps, 400) !default;

Description

View More button border

Type

{string}

btn--view-more__box-shadow

$btn--view-more__box-shadow: 0 0 4px map-get($gray-color-steps, 400) !default;

Description

View More button box-shadow

Type

{string}

btn--view-more__box-shadow--small

$btn--view-more__box-shadow--small: 0 0 2px map-get($gray-color-steps, 400) !default;

Description

Small View More button box-shadow

Type

{string}

btn--view-more__color

$btn--view-more__color: $blue !default;

Description

View More button color

Type

{color}

btn--view-more--hover__background-color

$btn--view-more--hover__background-color: $white !default;

Description

View More button background-color on hover

Type

{color}

btn--view-more--hover__color

$btn--view-more--hover__color: map-get($blue-color-steps, 400) !default;

Description

View More button color on hover

Type

{color}

btn--view-more--hover__border

$btn--view-more--hover__border: 1px solid map-get($gray-color-steps, 500) !default;

Description

View More button border on hover

Type

{string}

btn--view-more--hover__box-shadow

$btn--view-more--hover__box-shadow: 0 0 2px map-get($gray-color-steps, 500) !default;

Description

View More button box-shadow on hover

Type

{string}

btn--view-more--hover__box-shadow--small

$btn--view-more--hover__box-shadow--small: 0 0 1px map-get($gray-color-steps, 500) !default;

Description

Ssmall View More button box-shadow on hover

Type

{string}

btn--view-more--active__color

$btn--view-more--active__color: $blue !default;

Description

View More button color when active

Type

{color}

btn--view-more--active__border

$btn--view-more--active__border: 1px solid map-get($gray-color-steps, 500) !default;

Description

View More button border when active

Type

{string}

btn--view-more--active__background-color

$btn--view-more--active__background-color: map-get($gray-color-steps, 100) !default;

Description

View More button background-color when active

Type

{color}

btn--view-more--active__box-shadow

$btn--view-more--active__box-shadow: none !default;

Description

View More button box-shadow when active

Type

{string}

btn--view-more--active__box-shadow--small

$btn--view-more--active__box-shadow--small: none !default;

Description

Small View More button box-shadow when active

Type

{string}

btn--view-more--focus__box-shadow

$btn--view-more--focus__box-shadow: 0 0 0 4px map-get($blue-color-steps, 100) !default;

Description

View More button box-shadow when focused

Type

{string}

btn--view-more--focus__box-shadow--small

$btn--view-more--focus__box-shadow--small: 0 0 0 3px map-get($blue-color-steps, 100) !default;

Description

Ssmall View More button box-shadow when focused

Type

{string}

config/components/checkbox

variables

checkbox__background-color

$checkbox__background-color: $white !default;

Description

Checkbox background-color

Type

{color}

checkbox__border

$checkbox__border: 1px solid map-get($gray-color-steps, 500) !default;

Description

Checkbox border

Type

{string}

checkbox__color

$checkbox__color: map-get($gray-color-steps, 500) !default;

Description

Checkbox color

Type

{color}

checkbox__label__color

$checkbox__label__color: map-get($gray-color-steps, 800) !default;

Description

Checkbox label color

Type

{color}

checkbox__label--hover__color

$checkbox__label--hover__color: map-get($gray-color-steps, 900) !default;

Description

Checkbox label color on hover

Type

{color}

checkbox__icon__color

$checkbox__icon__color: transparent !default;

Description

Checkbox check icon color

Type

{color}

checkbox--hover__background-color

$checkbox--hover__background-color: $white !default;

Description

Checkbox background-color on hover

Type

{color}

checkbox--hover__border

$checkbox--hover__border: 1px solid map-get($gray-color-steps, 800) !default;

Description

Checkbox border on hover

Type

{string}

checkbox--hover__color

$checkbox--hover__color: map-get($gray-color-steps, 800) !default;

Description

Checkbox color on hover

Type

{color}

checkbox--hover__icon__color

$checkbox--hover__icon__color: transparent !default;

Description

Checkbox check icon color on hover

Type

{color}

checkbox--active__background-color

$checkbox--active__background-color: $white !default;

Description

Checkbox background-color when active

Type

{color}

checkbox--active__border

$checkbox--active__border: 1px solid map-get($gray-color-steps, 900) !default;

Description

Checkbox border when active

Type

{string}

checkbox--active__color

$checkbox--active__color: map-get($gray-color-steps, 900) !default;

Description

Checkbox color when active

Type

{color}

checkbox--active__icon__color

$checkbox--active__icon__color: map-get($blue-color-steps, 200) !default;

Description

Checkbox check icon color when active

Type

{color}

checkbox--disabled__background-color

$checkbox--disabled__background-color: map-get($gray-color-steps, 100) !default;

Description

Checkbox background-color when diabled

Type

{color}

checkbox--disabled__border

$checkbox--disabled__border: 1px solid map-get($gray-color-steps, 100) !default;

Description

Checkbox border when disabled

Type

{string}

checkbox--disabled__color

$checkbox--disabled__color: map-get($gray-color-steps, 500) !default;

Description

Checkbox color when disabled

Type

{color}

checkbox--disabled__icon__color

$checkbox--disabled__icon__color: transparent !default;

Description

Checkbox check icon color when disabled

Type

{color}

config/font/list

variables

font-list

$font-list: (
  'Roboto': (
    100: (
      'normal': (
        'local': ('Roboto Thin', 'Roboto-Thin'),
        'embedded-opentype': '/roboto/Roboto_100.eot?#iefix',
        'woff': '/roboto/Roboto_100.woff',
        'woff2': '/roboto/Roboto_100.woff2',
        'svg': '/roboto/Roboto_100.svg#Roboto',
        'truetype': '/roboto/Roboto_100.ttf'
      ),
      'italic': (
        'local': ('Roboto Thin Italic', 'Roboto-ThinItalic'),
        'embedded-opentype': '/roboto/Roboto_100italic.eot?#iefix',
        'woff': '/roboto/Roboto_100italic.woff',
        'woff2': '/roboto/Roboto_100italic.woff2',
        'svg': '/roboto/Roboto_100italic.svg#Roboto',
        'truetype': '/roboto/Roboto_100italic.ttf'
      )
    ),
    300: (
      'normal': (
        'local': ('Roboto Light', 'Roboto-Light'),
        'embedded-opentype': '/roboto/Roboto_300.eot?#iefix',
        'woff': '/roboto/Roboto_300.woff',
        'woff2': '/roboto/Roboto_300.woff2',
        'svg': '/roboto/Roboto_300.svg#Roboto',
        'truetype': '/roboto/Roboto_300.ttf'
      ),
      'italic': (
        'local': ('Roboto Light Italic', 'Roboto-LightItalic'),
        'embedded-opentype': '/roboto/Roboto_300italic.eot?#iefix',
        'woff': '/roboto/Roboto_300italic.woff',
        'woff2': '/roboto/Roboto_300italic.woff2',
        'svg': '/roboto/Roboto_300italic.svg#Roboto',
        'truetype': '/roboto/Roboto_300italic.ttf'
      )
    ),
    400: (
      'normal': (
        'local': ('Roboto', 'Roboto-Regular'),
        'embedded-opentype': '/roboto/Roboto_400.eot?#iefix',
        'woff': '/roboto/Roboto_400.woff',
        'woff2': '/roboto/Roboto_400.woff2',
        'svg': '/roboto/Roboto_400.svg#Roboto',
        'truetype': '/roboto/Roboto_400.ttf'
      ),
      'italic': (
        'local': ('Roboto Italic', 'Roboto-Italic'),
        'embedded-opentype': '/roboto/Roboto_400italic.eot?#iefix',
        'woff': '/roboto/Roboto_400italic.woff',
        'woff2': '/roboto/Roboto_400italic.woff2',
        'svg': '/roboto/Roboto_400italic.svg#Roboto',
        'truetype': '/roboto/Roboto_400italic.ttf'
      )
    ),
    500: (
      'normal': (
        'local': ('Roboto Medium', 'Roboto-Medium'),
        'embedded-opentype': '/roboto/Roboto_500.eot?#iefix',
        'woff': '/roboto/Roboto_500.woff',
        'woff2': '/roboto/Roboto_500.woff2',
        'svg': '/roboto/Roboto_500.svg#Roboto',
        'truetype': '/roboto/Roboto_500.ttf'
      ),
      'italic': (
        'local': ('Roboto Medium Italic', 'Roboto-MediumItalic'),
        'embedded-opentype': '/roboto/Roboto_500italic.eot?#iefix',
        'woff': '/roboto/Roboto_500italic.woff',
        'woff2': '/roboto/Roboto_500italic.woff2',
        'svg': '/roboto/Roboto_500italic.svg#Roboto',
        'truetype': '/roboto/Roboto_500italic.ttf'
      )
    ),
    700: (
      'normal': (
        'local': ('Roboto Bold', 'Roboto-Bold'),
        'embedded-opentype': '/roboto/Roboto_700.eot?#iefix',
        'woff': '/roboto/Roboto_700.woff',
        'woff2': '/roboto/Roboto_700.woff2',
        'svg': '/roboto/Roboto_700.svg#Roboto',
        'truetype': '/roboto/Roboto_700.ttf'
      ),
      'italic': (
        'local': ('Roboto Bold Italic', 'Roboto-BoldItalic'),
        'embedded-opentype': '/roboto/Roboto_700italic.eot?#iefix',
        'woff': '/roboto/Roboto_700italic.woff',
        'woff2': '/roboto/Roboto_700italic.woff2',
        'svg': '/roboto/Roboto_700italic.svg#Roboto',
        'truetype': '/roboto/Roboto_700italic.ttf'
      )
    ),
    900: (
      'normal': (
        'local': ('Roboto Black', 'Roboto-Black'),
        'embedded-opentype': '/roboto/Roboto_900.eot?#iefix',
        'woff': '/roboto/Roboto_900.woff',
        'woff2': '/roboto/Roboto_900.woff2',
        'svg': '/roboto/Roboto_900.svg#Roboto',
        'truetype': '/roboto/Roboto_900.ttf'
      ),
      'italic': (
        'local': ('Roboto Black Italic', 'Roboto-BlackItalic'),
        'embedded-opentype': '/roboto/Roboto_900italic.eot?#iefix',
        'woff': '/roboto/Roboto_900italic.woff',
        'woff2': '/roboto/Roboto_900italic.woff2',
        'svg': '/roboto/Roboto_900italic.svg#Roboto',
        'truetype': '/roboto/Roboto_900italic.ttf'
      )
    )
  ),
  'Roboto Slab': (
    100: (
      'normal': (
        'local': ('Roboto Slab Thin', 'RobotoSlab-Thin'),
        'embedded-opentype': '/roboto-slab/Roboto_Slab_100.eot?#iefix',
        'woff': '/roboto-slab/Roboto_Slab_100.woff',
        'woff2': '/roboto-slab/Roboto_Slab_100.woff2',
        'svg': '/roboto-slab/Roboto_Slab_100.svg#RobotoSlab',
        'truetype': '/roboto-slab/Roboto_Slab_100.ttf'
      )
    ),
    300: (
      'normal': (
        'local': ('Roboto Slab Light', 'RobotoSlab-Light'),
        'embedded-opentype': '/roboto-slab/Roboto_Slab_300.eot?#iefix',
        'woff': '/roboto-slab/Roboto_Slab_300.woff',
        'woff2': '/roboto-slab/Roboto_Slab_300.woff2',
        'svg': '/roboto-slab/Roboto_Slab_300.svg#RobotoSlab',
        'truetype': '/roboto-slab/Roboto_Slab_300.ttf'
      )
    ),
    400: (
      'normal': (
        'local': ('Roboto Slab Regular', 'RobotoSlab-Regular'),
        'embedded-opentype': '/roboto-slab/Roboto_Slab_400.eot?#iefix',
        'woff': '/roboto-slab/Roboto_Slab_400.woff',
        'woff2': '/roboto-slab/Roboto_Slab_400.woff2',
        'svg': '/roboto-slab/Roboto_Slab_400.svg#RobotoSlab',
        'truetype': '/roboto-slab/Roboto_Slab_400.ttf'
      )
    ),
    700: (
      'normal': (
        'local': ('Roboto Slab Bold', 'RobotoSlab-Bold'),
        'embedded-opentype': '/roboto-slab/Roboto_Slab_700.eot?#iefix',
        'woff': '/roboto-slab/Roboto_Slab_700.woff',
        'woff2': '/roboto-slab/Roboto_Slab_700.woff2',
        'svg': '/roboto-slab/Roboto_Slab_700.svg#RobotoSlab',
        'truetype': '/roboto-slab/Roboto_Slab_700.ttf'
      )
    )
  ),
  'Roboto Mono': (
    100: (
      'normal': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono__100.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono__100.woff',
        'woff2': '/roboto-mono/Roboto_Mono__100.woff2',
        'svg': '/roboto-mono/Roboto_Mono__100.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono__100.ttf'
      ),
      'italic': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono__100italic.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono__100italic.woff',
        'woff2': '/roboto-mono/Roboto_Mono__100italic.woff2',
        'svg': '/roboto-mono/Roboto_Mono__100italic.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono__100italic.ttf'
      )
    ),
    300: (
      'normal': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono__300.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono__300.woff',
        'woff2': '/roboto-mono/Roboto_Mono__300.woff2',
        'svg': '/roboto-mono/Roboto_Mono__300.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono__300.ttf'
      ),
      'italic': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono__300italic.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono__300italic.woff',
        'woff2': '/roboto-mono/Roboto_Mono__300italic.woff2',
        'svg': '/roboto-mono/Roboto_Mono__300italic.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono__300italic.ttf'
      )
    ),
    400: (
      'normal': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono_400.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono_400.woff',
        'woff2': '/roboto-mono/Roboto_Mono_400.woff2',
        'svg': '/roboto-mono/Roboto_Mono_400.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono_400.ttf'
      ),
      'italic': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono__400italic.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono__400italic.woff',
        'woff2': '/roboto-mono/Roboto_Mono__400italic.woff2',
        'svg': '/roboto-mono/Roboto_Mono__400italic.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono__400italic.ttf'
      )
    ),
    500: (
      'normal': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono__500.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono__500.woff',
        'woff2': '/roboto-mono/Roboto_Mono__500.woff2',
        'svg': '/roboto-mono/Roboto_Mono__500.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono__500.ttf'
      ),
      'italic': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono__500italic.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono__500italic.woff',
        'woff2': '/roboto-mono/Roboto_Mono__500italic.woff2',
        'svg': '/roboto-mono/Roboto_Mono__500italic.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono__500italic.ttf'
      )
    ),
    700: (
      'normal': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono__700.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono__700.woff',
        'woff2': '/roboto-mono/Roboto_Mono__700.woff2',
        'svg': '/roboto-mono/Roboto_Mono__700.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono__700.ttf'
      ),
      'italic': (
        'local': ('Roboto Mono', 'RobotoMono-Regular'),
        'embedded-opentype': '/roboto-mono/Roboto_Mono__700italic.eot?#iefix',
        'woff': '/roboto-mono/Roboto_Mono__700italic.woff',
        'woff2': '/roboto-mono/Roboto_Mono__700italic.woff2',
        'svg': '/roboto-mono/Roboto_Mono__700italic.svg#RobotoMono',
        'truetype': '/roboto-mono/Roboto_Mono__700italic.ttf'
      )
    )
  ),
  'Roboto Condensed': (
    300: (
      'normal': (
        'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
        'embedded-opentype': '/roboto-condensed/Roboto_Condensed__300.eot?#iefix',
        'woff': '/roboto-condensed/Roboto_Condensed__300.woff',
        'woff2': '/roboto-condensed/Roboto_Condensed__300.woff2',
        'svg': '/roboto-condensed/Roboto_Condensed__300.svg#RobotoCondensed',
        'truetype': '/roboto-condensed/Roboto_Condensed__300.ttf'
      ),
      'italic': (
        'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
        'embedded-opentype': '/roboto-condensed/Roboto_Condensed__300italic.eot?#iefix',
        'woff': '/roboto-condensed/Roboto_Condensed__300italic.woff',
        'woff2': '/roboto-condensed/Roboto_Condensed__300italic.woff2',
        'svg': '/roboto-condensed/Roboto_Condensed__300italic.svg#RobotoCondensed',
        'truetype': '/roboto-condensed/Roboto_Condensed__300italic.ttf'
      )
    ),
    400: (
      'normal': (
        'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
        'embedded-opentype': '/roboto-condensed/Roboto_Condensed_400.eot?#iefix',
        'woff': '/roboto-condensed/Roboto_Condensed_400.woff',
        'woff2': '/roboto-condensed/Roboto_Condensed_400.woff2',
        'svg': '/roboto-condensed/Roboto_Condensed_400.svg#RobotoCondensed',
        'truetype': '/roboto-condensed/Roboto_Condensed_400.ttf'
      ),
      'italic': (
        'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
        'embedded-opentype': '/roboto-condensed/Roboto_Condensed__400italic.eot?#iefix',
        'woff': '/roboto-condensed/Roboto_Condensed__400italic.woff',
        'woff2': '/roboto-condensed/Roboto_Condensed__400italic.woff2',
        'svg': '/roboto-condensed/Roboto_Condensed__400italic.svg#RobotoCondensed',
        'truetype': '/roboto-condensed/Roboto_Condensed__400italic.ttf'
      )
    ),
    700: (
      'normal': (
        'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
        'embedded-opentype': '/roboto-condensed/Roboto_Condensed__700.eot?#iefix',
        'woff': '/roboto-condensed/Roboto_Condensed__700.woff',
        'woff2': '/roboto-condensed/Roboto_Condensed__700.woff2',
        'svg': '/roboto-condensed/Roboto_Condensed__700.svg#RobotoCondensed',
        'truetype': '/roboto-condensed/Roboto_Condensed__700.ttf'
      ),
      'italic': (
        'local': ('Roboto Condensed', 'RobotoCondensed-Regular'),
        'embedded-opentype': '/roboto-condensed/Roboto_Condensed__700italic.eot?#iefix',
        'woff': '/roboto-condensed/Roboto_Condensed__700italic.woff',
        'woff2': '/roboto-condensed/Roboto_Condensed__700italic.woff2',
        'svg': '/roboto-condensed/Roboto_Condensed__700italic.svg#RobotoCondensed',
        'truetype': '/roboto-condensed/Roboto_Condensed__700italic.ttf'
      )
    )
  )
) !default;

Description

All fonts and their weights

Type

{map}

Used by

functions/base64-encode

functions

base64_encode

@function base64_encode($s) { ... }

Description

Encode a string as base64. This is needed to make inline SVG work in IE. Credit to: https://github.com/robbywashere/sass-base64-encoder

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$s

String to encode

Stringnone

Returns

String

Encoded string

Requires

Used by

order-args

@function order-args($x, $y) { ... }

Description

SassyBitwise - v1.1.0 - 2014-06-05 Order arguments decreasing

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$x

First value

Numbernone
$y

Second value

Numbernone

Returns

Number

Used by

power

@function power($x, $y) { ... }

Description

Power function Using Compass if defined

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$x

First value

Numbernone
$y

Second value

Numbernone

Returns

Number

Used by

sign

@function sign($x) { ... }

Description

Returns sign of $x

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$x

value

Numbernone

Returns

Number

Used by

binary-to-decimal

@function binary-to-decimal($value) { ... }

Description

Convert from base 2 to base 10

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$value

binary to convert

Numbernone

Returns

Number

decimal-to-binary

@function decimal-to-binary($value) { ... }

Description

Convert from base 10 to base 2

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$value

decimal to convert

Numbernone

Returns

Number

Requires

Used by

largest-power-of-2

@function largest-power-of-2($value) { ... }

Description

Returns largest power of 2 lesser than $value

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$value

value

Numbernone

Returns

Number

Used by

binary-length

@function binary-length($value) { ... }

Description

Returns binary length

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$value

value

Numbernone

Returns

Number

Requires

Used by

arguments-validator

@function arguments-validator($args) { ... }

Description

Checks whether argument list is valid

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$args

argument list

Listnone

Returns

Boolean

Used by

bw-or

@function bw-or($x, $y) { ... }

Description

or bitwise operator $x | $y

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$x

first value

Numbernone
$y

second value

Numbernone

Returns

Number

Requires

bw-xor

@function bw-xor($x, $y) { ... }

Description

xor bitwise operator $x ^ $y

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$x

first value

Numbernone
$y

second value

Numbernone

Returns

Number

Requires

bw-and

@function bw-and($x, $y) { ... }

Description

and bitwise operator $x & $y

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$x

first value

Numbernone
$y

second value

Numbernone

Returns

Number

Requires

bw-not

@function bw-not($x) { ... }

Description

not bitwise operator ~ $x

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$x

value

Numbernone

Returns

Number

Requires

Used by

bw-shift-left

@function bw-shift-left($x, $y) { ... }

Description

<< bitwise operator $x << $y

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$x

first value

Numbernone
$y

second value

Numbernone

Returns

Number

Requires

bw-shift-right

@function bw-shift-right($x, $y) { ... }

Description

>> bitwise operator $x >> $y

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$x

first value

Numbernone
$y

second value

Numbernone

Returns

Number

Requires

bitwise

@function bitwise($args) { ... }

Description

Bitwise helper function

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$args

list of parameters

Listnone

Returns

Number

Requires

Used by

bw

@function bw($args) { ... }

Description

Alias for bitwise

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$args

list of parameters

Listnone

Requires

char_code

@function char_code($char) { ... }

Description

Get the character code for a character

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$charnoneMixednone

Returns

Number

Requires

Used by

char_code_at

@function char_code_at($string, $i) { ... }

Description

Get the character at a given index.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$stringnoneStringnone
$inoneNumbernone

Returns

String

Requires

Used by

variables

charlist

$charlist: ' ','!','\"','#','$','%','&','\'','(',')','*','+',',','-','.','/','0','1','2','3','4','5','6','7','8','9',':',';','<','=','>','?','@','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','[','\\',']','^','_','`','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','{','|','}','~';

Description

UTF-8 characters

Used by

functions/str-replace

functions

str-replace

@function str-replace($string, $search, $replace) { ... }

Description

Replace $search with $replace in $string

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$string

Initial string

Stringnone
$search

Substring to replace

Stringnone
$replace

('') - New value

Stringnone

Returns

String

Updated string

Author

  • Hugo Giraudel

functions/typography

functions

remove-unit

@function remove-unit($number) { ... }

Description

Strip units from a number

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$numbernoneStringnone

Returns

Number

Used by

get-breakpoint-by-index

@function get-breakpoint-by-index($index) { ... }

Description

Get a unitless breakpoint value by the index

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$indexnoneNumbernone

Returns

Number

Requires

Used by

helpers/align

csss

.spark-align-top

Align top

  vertical-align: top;

.spark-align-baseline

Align baseline

  vertical-align: baseline;

.spark-align-middle

Align middle

  vertical-align: middle;

.spark-align-items-center

Align items to the center

  align-items: center;

helpers/animate

csss

.spark-animate-height

Animate height changes on an element

  overflow: hidden;
  transition-duration: 200ms;
  transition-property: height, margin;
  transition-timing-function: $ease-out-quint;

helpers/center

csss

.spark-center-block

Center an element

  display: block !important;
	float: none !important;
	margin: 0 auto !important;

.spark-center-text

Deprecated!

Remove in 2.0.0. Duplicate of .spark-text-center.

Center text

  text-align: center !important;

.spark-center-items

Deprecated!

Remove in 2.0.0. Duplicate of .spark-align-items-center.

Center items

  align-items: center;

helpers/clear

csss

.spark-clear

Clear an element on both sides

  clear: both;

.spark-clear-left

Clear an element on the left side

  clear: left;

.spark-clear-right

Clear an element on the right side

  clear: right;

helpers/clearfix

csss

.spark-clearfix

Clearfix for elements with floating children

  @include clearfix();

helpers/display

csss

.spark-block

Block element

  display: block !important;

.spark-inline

Inline element

  display: inline !important;

.spark-inline-block

Inline block element

  display: inline-block !important;

.spark-flex

Flex an element

  display: flex !important;

helpers/hidden

csss

.spark-hidden

Hide an element

  display: none !important;

helpers/inset-content

csss

.spark-inset-content

Content on a gray background w/ shadow on top and bottom

  background: $inset-content__background-color;
  padding: 2rem;
  position: relative;

  // Gradient to make a faux drop shadow at the top and bottom
  &::after,
  &::before {
    background: $inset-content__shadow;
    content: '';
    height: 1rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
  }

  // After at the bottom
  &::after {
    bottom: 0;
    top: auto;
    transform: rotate(180deg);
  }

helpers/line-height

csss

.spark-line-height-1

One baseline

  line-height: 1rem;

.spark-line-height-2

Two baselines

  line-height: 2rem;

.spark-line-height-3

Three baselines

  line-height: 3rem;

.spark-line-height-4

Fours baselines

  line-height: 4rem;

helpers/offset

csss

.spark-margin--sm

A small (1/2 baseline) margin on an element

  margin: .5rem !important;

.spark-margin

A standard 1 baseline margin on an element

  margin: 1rem !important;

.spark-margin--lg

A large (2 baseline) margin on an element

  margin: 2rem !important;

.spark-margin-top--sm

A small (1/2 baseline) margin on the top of an element

  margin-top: .5rem !important;

.spark-margin-top

A standard 1 baseline margin on the top of an element

  margin-top: 1rem !important;

.spark-margin-top--lg

A large (2 baseline) margin on the top of an element

  margin-top: 2rem !important;

.spark-margin-bottom--sm

A small (1/2 baseline) margin on the bottom of an element

  margin-bottom: .5rem !important;

.spark-margin-bottom

A standard 1 baseline margin on the bottom of an element

  margin-bottom: 1rem !important;

.spark-margin-bottom--lg

A large (2 baseline) margin on the bottom of an element

  margin-bottom: 2rem !important;

.spark-margin-left--sm

A small (1/2 baseline) margin on the left of an element

  margin-left: .5rem !important;

.spark-margin-left

A standard 1 baseline margin on the left of an element

  margin-left: 1rem !important;

.spark-margin-left--lg

A large (2 baseline) margin on the left of an element

  margin-left: 2rem !important;

.spark-margin-right--sm

A small (1/2 baseline) margin on the right of an element

  margin-right: .5rem !important;

.spark-margin-right

A standard 1 baseline margin on the right of an element

  margin-right: 1rem !important;

.spark-margin-right--lg

A large (2 baseline) margin on the right of an element

  margin-right: 2rem !important;

.spark-padding--sm

A small (1/2 baseline) margin on an element

  padding: .5rem !important;

.spark-padding

A standard 1 baseline padding on an element

  padding: 1rem !important;

.spark-padding--lg

A large (2 baseline) padding on an element

  padding: 2rem !important;

.spark-padding-top--sm

A small (1/2 baseline) padding on the top of an element

  padding-top: .5rem !important;

.spark-padding-top

A standard 1 baseline padding on the top of an element

  padding-top: 1rem !important;

.spark-padding-top--lg

A large (2 baseline) padding on the top of an element

  padding-top: 2rem !important;

.spark-padding-bottom--sm

A small (1/2 baseline) padding on the bottom of an element

  padding-bottom: .5rem !important;

.spark-padding-bottom

A standard 1 baseline padding on the bottom of an element

  padding-bottom: 1rem !important;

.spark-padding-bottom--lg

A large (2 baseline) padding on the bottom of an element

  padding-bottom: 2rem !important;

.spark-padding-left--sm

A small (1/2 baseline) padding on the left of an element

  padding-left: .5rem !important;

.spark-padding-left

A standard 1 baseline padding on the left of an element

  padding-left: 1rem !important;

.spark-padding-left--lg

A large (2 baseline) padding on the left of an element

  padding-left: 2rem !important;

.spark-padding-right--sm

A small (1/2 baseline) padding on the right of an element

  padding-right: .5rem !important;

.spark-padding-right

A standard 1 baseline padding on the right of an element

  padding-right: 1rem !important;

.spark-padding-right--lg

A large (2 baseline) padding on the right of an element

  padding-right: 2rem !important;

helpers/pull

csss

.spark-pull-left

Float an element to the left

  float: left !important;

.spark-pull-right

Float an element to the right

  float: right !important;

helpers/remove-padding

csss

.container .row .spark-remove-padding-xs

Remove the padding of a column on the xs breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-gte-xs

Remove the padding of a column on the xs or higher breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-sm

Remove the padding of a column on the sm breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-gte-sm

Remove the padding of a column on the sm or higher breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-lte-sm

Remove the padding of a column on the sm or below breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-md

Remove the padding of a column on the md breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-gte-md

Remove the padding of a column on the md or higher breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-lte-md

Remove the padding of a column on the md or below breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-lg

Remove the padding of a column on the lg breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-gte-lg

Remove the padding of a column on the lg or higher breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-lte-lg

Remove the padding of a column on the lg or below breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-xl

Remove the padding of a column on the xl breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

.container .row .spark-remove-padding-lte-xl

Remove the padding of a column on the xl or below breakpoint @deprecated Remove in v2.0.0 in favor of the BEM versions created above

  padding-left: 0; padding-right:0;

helpers/spacer

csss

.spark-container__spacer:before, .spark-container__spacer:after

Deprecated!

Remove in v2.0.0

Escaped unicode character for &nbsp; Must be included to give the block something to be rendered on the DOM

  content: '\0000a0';

mixins/angle

mixins

angle

@mixin angle($color, $width: 43, $height: 96) { ... }

Description

Generate an "angle" SVG for use in the header.

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$colornoneColornone
$widthnoneNumber43
$heightnoneNumber96

Output

An inline SVG image

Requires

TODO's

  • figure out a good way to replace this with a pseudo element shape or something similar.

mixins/clearfix

mixins

clearfix

@mixin clearfix() { ... }

Description

Add a floating child clearfix to an element

Parameters

None.

Output

A pair of pseudo elements that achieve a carriage return

mixins/load-font

mixins

loadFont

@mixin loadFont($name, $weights) { ... }

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$namenoneStringnone
$weightsnoneListnone

Requires

mixins/placeholder

mixins

placeholder

@mixin placeholder() { ... }

Description

Allow for styling of an input's placeholder text.

Parameters

None.

Content

This mixin allows extra content to be passed (through the @content directive). Role: The styles to apply to the placeholder

Output

Vendor-prefixed placeholder pseudo elements with the given content.

mixins/typography

mixins

rootsize

@mixin rootsize() { ... }

Description

Root font-size in %, outputted in correct breakpoints.

Parameters

None.

Output

A font-size to use on the root element.

Requires

fontsize

@mixin fontsize($name, $breakpoint, $important, $line-height) { ... }

Description

Set the font size in rems given a font name or pixel font value

Parameters

parameterNameparameterDescriptionparameterTypeparameterDefault value
$namenoneNumber or Stringnone
$breakpoint

Optional

Stringnone
$important

Optional Add the !important tag

Booleannone
$line-height

Optional Also output the line-heigh

Booleannone

Output

A font-size to apply to an element

Requires

placeholders/gray-out

placeholders

gray-out

%gray-out { ... }

Description

A full screen gray background that is semi-transparent. Hidden by default, but with transitions on its opacity and visiblity to create a fade in/out effect when active.

Requires

gray-out--active

%gray-out--active { ... }

Description

Show the gray background.

themes/whitelabel/config/components/footer

variables

themes/whitelabel/config/components/header

variables

header__background-color

$header__background-color: $white;

Description

White header background

Type

{color}

header__border-top-color

$header__border-top-color: map-get($gray-color-steps, 100);

Description

Monochromatic header border

Type

{color}

header__color

$header__color: map-get($gray-color-steps, 800);

Description

Reverse header type color from default

Type

{color}

header__title__color

$header__title__color: map-get($gray-color-steps, 900);

Description

Darker header color than copy

Type

{color}

header__logo--sabre__background-color

$header__logo--sabre__background-color: map-get($gray-color-steps, 100);

Description

Light logo background color for the logo since it is now dark

Type

{color}

header__sign-in__background-color

$header__sign-in__background-color: map-get($gray-color-steps, 100);

Description

Sign in button matches logo

Type

{color}

header__login__background-color

Deprecated!

changing login to sign-in, will remove login in 2.0.0

$header__login__background-color: $header__sign-in__background-color;

Description

Login button matches logo

Type

{color}

header--visible__color

$header--visible__color: map-get($gray-color-steps, 800);

Description

Darker text to lay on top of the white background

Type

{color}

header--visible--hover__color

$header--visible--hover__color: map-get($gray-color-steps, 500);

Description

Lighten text on hover

Type

{color}

themes/whitelabel/config/components/menu

variables

menu__header__background-color

$menu__header__background-color: map-get($gray-color-steps, 100);

Description

Lighten the menu header to match the page header treatment

Type

{color}

menu__header__color

$menu__header__color: map-get($gray-color-steps, 800);

Description

Darken type since it is now on a light background

Type

{color}

menu__header__toggle__background-color

$menu__header__toggle__background-color: $menu__header__background-color;

Description

Toggle background color to match header

Type

{color}

menu__header__toggle__color

$menu__header__toggle__color: $menu__header__color;

Description

Toggle type color to match header

Type

{color}

General

variables

spark-toolbar-label-font-family

$spark-toolbar-label-font-family: $body__font-family !default;

Description

Toolbar label font-family

Type

{string}

spark-toolbar-label-font-weight

$spark-toolbar-label-font-weight: $body__font-weight--bold !default;

Description

Toolbar label font-weight

Type

{number}

spark-toolbar-dropdown-font-weight

$spark-toolbar-dropdown-font-weight: $body__font-weight--normal !default;

Description

Toolbar dropdown font-weight

Type

{number}

spark-toolbar-active-background

$spark-toolbar-active-background: map-get($blue-color-steps, 200) !default;

Description

Toolbar active background

Type

{color}

spark-toolbar-color

$spark-toolbar-color: map-get($grey-color-steps, 800) !default;

Description

Toolbar default color

Type

{color}

spark-toolbar-active-color

$spark-toolbar-active-color: #fff !default;

Description

Toolbar active color

Type

{color}

spark-toolbar-background

$spark-toolbar-background: #fff !default;

Description

Toolbar default background

Type

{color}

spark-toolbar-dropdown-background

$spark-toolbar-dropdown-background: $popover__background-color;

Description

Toolbar dropdown default background

Type

{color}

spark-toolbar-dropdown-color

$spark-toolbar-dropdown-color: $spark-toolbar-color;

Description

Toolbar dropdown default color

Type

{color}

spark-toolbar-item-hover-background

$spark-toolbar-item-hover-background: map-get($grey-color-steps, 200) !default;

Description

Toolbar item content list background hover

Type

{color}

spark-toolbar-dropdown-border

$spark-toolbar-dropdown-border: $popover__border;

Description

Toolbar dropdown border (used for show more dropdown, as well)

Type

{color}

spark-toolbar-dropdown-border-radius

$spark-toolbar-dropdown-border-radius: $popover__border-radius;

Description

Toolbar dropdown border-radius (used for show more dropdown, as well)

Type

{number}

spark-toolbar-dropdown-box-shadow

$spark-toolbar-dropdown-box-shadow: $popover__box-shadow;

Description

Toolbar dropdown box-shadow (used for show more dropdown, as well)

Type

{string}

spark-toolbar-dropdown-background-hidden

$spark-toolbar-dropdown-background-hidden: map-get($grey-color-steps, 100) !default;

Description

Toolbar show more dropdown items background

Type

{color}

spark-toolbar-dropdown-border-hidden

$spark-toolbar-dropdown-border-hidden: map-get($grey-color-steps, 400);

Description

Toolbar show more dropdown items border color

Type

{color}

spark-toolbar-hover-background

$spark-toolbar-hover-background: map-get($grey-color-steps, 100) !default;

Description

Toolbar show more dropdown items background

Type

{color}

spark-toolbar-active-hover-color

$spark-toolbar-active-hover-color: map-get($grey-color-steps, 100) !default;

Description

Toolbar active, open state hover-color (for icon buttons only)

Type

{color}

csss

#{$class_name}--xs

#{$description} at the xs breakpoint

  @content

#{$class_name}--gte-xs

#{$description} at or greater than the xs breakpoint

  @content

#{$class_name}--sm

#{$description} at the sm breakpoint

  @content

#{$class_name}--gte-sm

#{$description} at or greater than the sm breakpoint

  @content

#{$class_name}--lte-sm

#{$description} at or less than the sm breakpoint

  @content

#{$class_name}--md

#{$description} at the md breakpoint

  @content

#{$class_name}--gte-md

#{$description} at or greater than the md breakpoint

  @content

#{$class_name}--lte-md

#{$description} at or less than the md breakpoint

  @content

#{$class_name}--lg

#{$description} at the lg breakpoint

  @content

#{$class_name}--gte-lg

#{$description} at or greater than the lg breakpoint

  @content

#{$class_name}--lte-lg

#{$description} at or less than the lg breakpoint

  @content

#{$class_name}--xl

#{$description} at the xl breakpoint

  @content

#{$class_name}--lte-xl

#{$description} at or less than the xl breakpoint

  @content

// // Generate semantic grid columns with these mixins. @mixin make-container($gutter: $grid-gutter-width)

Grid system

  margin-left: auto;
  margin-right: auto;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
  @if not $enable-flex {
    @include clearfix();
  }