Introduction

This is a "living style guide" that parses Markdown comments within in the Sass source code to generate this HTML file. As our Sass is added or changed the documenation should be updated along with it ensuring that this file is always up to date.

This document contains:

• Full documenation of all Sass code for optimizely.com
• Code block examples with live HTML where appropriate

Click to Copy Examples

Each HTML/code pair can be copied by clicking on the "Copy" button. This will put the contents of that code onto your clipboard. This functionality happens automatically.

Adding Documentation

Your _partial.scss file should be formatted as follows:

// # Title of Partial
// Summary of what this partial does.
//
// # Examples
//
//[hc]
//    <div>code example</div>
//[/hc]
//
// # SCSS

... SCSS code here ...

1. Each partial file should have a title as the first line, example: // # Title of Partial
2. Add a summary of what the partial does below the title.
3. Provide any code/html example of how to use it. This will render in this document.
4. Place SCSS code at bottom.
5. Add descriptions using the Markdown syntax as needed with a new line before any Sass code.
6. To create a custom code block, wrap indented code in one of the options below:

Code Only Example

//[c]
//    .foo {
//         color: red;
//    }
//[/c]

HTML Only Example

This will create a live HTML example but no underlying code will be shown.

//[h]
//    <div>code example</div>
//[/h]

HTML and Code Example

This will both render the html and show the code used and allow the viewer to copy to HTML to their clipboard.

//[hc]
//    <div>code example</div>
//[/hc]

OUI Core

Includes just core for documentation purposes.

$include-fonts:(
  weights: 300 400 500,
  italics: true
);

Compass polyfills

@import 'core-polyfills';

Core functions and mixins

@import 'partials/elements/functions';
@import 'partials/elements/mixins';

Core & Wireframe variables

@import 'core-variables';

Core & Wireframe partials

@import 'core-partials';

Trumps Trumps use !important classes for overrides and should always be loaded last.

@import 'partials/trumps/background';
@import 'partials/trumps/layout';
@import 'partials/trumps/margin';
@import 'partials/trumps/padding';
@import 'partials/trumps/type';
@import 'partials/trumps/sizing';

Compass Polyfills

These remove dependencies on Compass.

@import 'polyfills/animations';
@import 'polyfills/box-sizing';
@import 'polyfills/mixins';
@import 'polyfills/prefixer';
@import 'polyfills/tint';
@import 'polyfills/transform';
@import 'polyfills/transitions';

Animations

Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.

@mixin animation ($animations...) {
  @include prefixer(animation, $animations, webkit moz spec);
}

@mixin animation-name ($names...) {
  @include prefixer(animation-name, $names, webkit moz spec);
}

@mixin animation-duration ($times...) {
  @include prefixer(animation-duration, $times, webkit moz spec);
}

@mixin animation-timing-function ($motions...) {
  @include prefixer(animation-timing-function, $motions, webkit moz spec);
}

@mixin animation-iteration-count ($values...) {
  @include prefixer(animation-iteration-count, $values, webkit moz spec);
}

@mixin animation-direction ($directions...) {
  @include prefixer(animation-direction, $directions, webkit moz spec);
}

@mixin animation-play-state ($states...) {
  @include prefixer(animation-play-state, $states, webkit moz spec);
}

@mixin animation-delay ($times...) {
  @include prefixer(animation-delay, $times, webkit moz spec);
}

@mixin animation-fill-mode ($modes...) {
  @include prefixer(animation-fill-mode, $modes, webkit moz spec);
}

Box sizing option.

@mixin box-sizing($box) {
  @include prefixer(box-sizing, $box, webkit moz spec);
}

Polyfill mixins

@import 'prefixer';
@import 'transitions';
@import 'transform';
@import 'box-sizing';

A mixin for generating vendor prefixes on non-standardized properties.

$prefix-for-webkit:    true !default;
$prefix-for-mozilla:   true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera:     true !default;
$prefix-for-spec:      true !default;

@mixin prefixer($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    } @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    } @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    } @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    } @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    } @else  {
      @warn 'Unrecognized prefix: #{$prefix}';
    }
  }
}

@mixin disable-prefix-for-all() {
  $prefix-for-webkit:    false !global;
  $prefix-for-mozilla:   false !global;
  $prefix-for-microsoft: false !global;
  $prefix-for-opera:     false !global;
  $prefix-for-spec:      false !global;
}

Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.

@include transition (all 2s ease-in-out);

@mixin transition($properties...) {
  $needs-prefixes: false;
  $webkit: ();
  $moz: ();
  $spec: ();

  @each $list in $properties {
    @if nth($list, 1) == 'transform' {
      $needs-prefixes: true;
      $list1: -webkit-transform;
      $list2: -moz-transform;
      $list3: ();

      @each $var in $list {
        $list3: join($list3, $var);

        @if $var != 'transform' {
          $list1: join($list1, $var);
          $list2: join($list2, $var);
        }
      }

      $webkit: append($webkit, $list1);
      $moz: append($moz, $list2);
      $spec: append($spec, $list3);
    } @else {
      $webkit: append($webkit, $list, comma);
      $moz: append($moz, $list, comma);
      $spec: append($spec, $list, comma);
    }
  }

  @if $needs-prefixes {
    -webkit-transition: $webkit;
    -moz-transition: $moz;
    transition: $spec;
  } @else {
    @if length($properties) >= 1 {
      @include prefixer(transition, $properties, webkit moz spec);
    } @else {
      $properties: all 0.15s ease-out 0s;
      @include prefixer(transition, $properties, webkit moz spec);
    }
  }
}

@mixin transition-property($properties...) {
  -webkit-transition-property: transition-property-names($properties, 'webkit');
  -moz-transition-property: transition-property-names($properties, 'moz');
  transition-property: transition-property-names($properties, false);
}

@mixin transition-duration($times...) {
  @include prefixer(transition-duration, $times, webkit moz spec);
}

@mixin transition-timing-function($motions...) {
  @include prefixer(transition-timing-function, $motions, webkit moz spec);
}

@mixin transition-delay($times...) {
  @include prefixer(transition-delay, $times, webkit moz spec);
}

Transform

@mixin transform($property: none) {
  @include prefixer(transform, $property, webkit moz ms o spec);
}

@mixin transform-origin($axes: 50%) {
  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
}

@mixin transform-style($style: flat) {
  @include prefixer(transform-style, $style, webkit moz ms o spec);
}

Box sizing option.

@mixin box-sizing($box) {
  @include prefixer(box-sizing, $box, webkit moz spec);
}

A mixin for generating vendor prefixes on non-standardized properties.

$prefix-for-webkit:    true !default;
$prefix-for-mozilla:   true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera:     true !default;
$prefix-for-spec:      true !default;

@mixin prefixer($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    } @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    } @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    } @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    } @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    } @else  {
      @warn 'Unrecognized prefix: #{$prefix}';
    }
  }
}

@mixin disable-prefix-for-all() {
  $prefix-for-webkit:    false !global;
  $prefix-for-mozilla:   false !global;
  $prefix-for-microsoft: false !global;
  $prefix-for-opera:     false !global;
  $prefix-for-spec:      false !global;
}

Returns color tint.

@function tint($color, $percent) {
  @return mix(#fff, $color, $percent);
}

Transform

@mixin transform($property: none) {
  @include prefixer(transform, $property, webkit moz ms o spec);
}

@mixin transform-origin($axes: 50%) {
  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
}

@mixin transform-style($style: flat) {
  @include prefixer(transform-style, $style, webkit moz ms o spec);
}

Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.

@include transition (all 2s ease-in-out);

@mixin transition($properties...) {
  $needs-prefixes: false;
  $webkit: ();
  $moz: ();
  $spec: ();

  @each $list in $properties {
    @if nth($list, 1) == 'transform' {
      $needs-prefixes: true;
      $list1: -webkit-transform;
      $list2: -moz-transform;
      $list3: ();

      @each $var in $list {
        $list3: join($list3, $var);

        @if $var != 'transform' {
          $list1: join($list1, $var);
          $list2: join($list2, $var);
        }
      }

      $webkit: append($webkit, $list1);
      $moz: append($moz, $list2);
      $spec: append($spec, $list3);
    } @else {
      $webkit: append($webkit, $list, comma);
      $moz: append($moz, $list, comma);
      $spec: append($spec, $list, comma);
    }
  }

  @if $needs-prefixes {
    -webkit-transition: $webkit;
    -moz-transition: $moz;
    transition: $spec;
  } @else {
    @if length($properties) >= 1 {
      @include prefixer(transition, $properties, webkit moz spec);
    } @else {
      $properties: all 0.15s ease-out 0s;
      @include prefixer(transition, $properties, webkit moz spec);
    }
  }
}

@mixin transition-property($properties...) {
  -webkit-transition-property: transition-property-names($properties, 'webkit');
  -moz-transition-property: transition-property-names($properties, 'moz');
  transition-property: transition-property-names($properties, false);
}

@mixin transition-duration($times...) {
  @include prefixer(transition-duration, $times, webkit moz spec);
}

@mixin transition-timing-function($motions...) {
  @include prefixer(transition-timing-function, $motions, webkit moz spec);
}

@mixin transition-delay($times...) {
  @include prefixer(transition-delay, $times, webkit moz spec);
}

Spacer

Using this function requires that the value passed be a multiple of .5 This encourages greater spacing consistentcy. The following example will output 25px. It will test to see if value is multiple of .5. If not it will provide a warning.

Usage:

padding: spacer(2.5);

@function spacer($value) {
  @if ($value * 2) % 1 != 0 {
    @warn 'Spacer value must be a multiple of 0.5';
    @return 'Spacer value must be a multiple of 0.5';
  } @else {
    @return $spacer-unit * $value;
  }
}

Map Fetch

Retrieves values from any map, nested or not. Adapted from https://gist.github.com/jlong/8760275 - added errors.

Usage:

color: map-fetch($color, ui base);

@function map-fetch($map, $keys) {
  $key: nth($keys, 1);
  $length: length($keys);
  $value: map-get($map, $key);
  @if ($length > 1) {
    $rest: ();
    @for $i from 2 through $length {
      $rest: append($rest, nth($keys, $i));
    }
    @if ($value == null) {
      @error "The value '#{$key}' doesn't exist in the map.";
    }
    @return map-fetch($value, $rest)
  } @else {
    @if ($value == null) {
      @error "The value '#{$key}' doesn't exist in the map.";
    }
    @return $value;
  }
}

Map Extend

Extends Sass maps. Used within products to override defaults. Adapted from http://www.sitepoint.com/extra-map-functions-sass/

$color: map-extend($color,
  (
    ui: (
      brand                    : #00415d,
      good-news                : #14A54A,
      highlight                : #0074B4,
      draft                    : #F4B852
    ),
    text: (
      good-news                : #21a350
    )
  )
);

@function map-extend($map, $maps...) {
  $max: length($maps);
  @for $i from 1 through $max {
    $current: nth($maps, $i);
    @each $key, $value in $current {
      @if type-of($value) == 'map' and type-of(map-get($map, $key)) == 'map' {
        $value: map-extend(map-get($map, $key), $value);
      }
      $map: map-merge($map, ($key: $value));
    }
  }
  @return $map;
}

Mixins

Font Smoothing

Better rendering of fonts on OS X. Does not affect IE.

@mixin font-smoothing($value: antialiased) {
  @if $value == antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  } @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

Media Query Breakpoints

Provides a simple way of adding custom breakpoints. Note that you cannot use @extend inside media queries.

Usage

Include the breakpoint mixin with a min and/or max value.

@include breakpoint($min: 992px) {
  color: red;
}
@include breakpoint($max: 1000px) {
  color: red;
}
@include breakpoint($min: 992px, $max: 1000px) {
  color: red;
}

outputs:

@media (min-width: 992px) {
  color: red;
}
@media (max-width: 1000px) {
  color: red;
}
@media (min-width: 992px) and (max-width: 1000px) {
  color: red;
}

@mixin breakpoint($min: 0, $max: 0) {
  $query: '';
  @if $min != 0 and $max != 0 {
    $query: '(min-width: #{$min}) and (max-width: #{$max})';
  } @else if $min != 0 and $max == 0 {
    $query: '(min-width: #{$min})';
  } @else if $min == 0 and $max != 0 {
    $query: '(max-width: #{$max})';
  } @media #{$query} {
    @content;
  }
}

Flex Center

Centers elements inside the element that has this mixin.

 @include flex-center;

@mixin flex-center {
  @include display(flex);
  @include justify-content(center);
  @include align-items(center);
}

CSS Arrows

This mixin creates a CSS arrow on a given element. We can have the arrow appear in one of 12 locations, 3 positions for each side.

You pass this position in along with a desired arrow color and optional border color, for example:

 @include arrow(top, left, red)

for just a single, red arrow, or:

 @include arrow(bottom, center, red, black)

which will create a red triangle with a black border which sits at the bottom center of the element. Call the mixin this way:

.foo {
    @include arrow(top, left, #BADA55, #ACE);
    background-color: #BADA55;
    border: 1px solid #ACE;
}

@mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color) {
  @if $arrow-edge == top {
    @extend %arrow--top;

    &::before {
      border-bottom-color: $border-color;
    }

    &::after {
      border-bottom-color: $arrow-color;
    }

    @if $arrow-location == left {
      @extend %arrow--left;
    }

    @if $arrow-location == center {
      @extend %arrow--center;
    }

    @if $arrow-location == right {
      @extend %arrow--right;
    }
  }

  @if $arrow-edge == right {
    @extend %arrow--far;

    &::before {
      border-left-color: $border-color;
    }

    &::after {
      border-left-color: $arrow-color;
    }

    @if $arrow-location == top {
      @extend %arrow--upper;
    }

    @if $arrow-location == center {
      @extend %arrow--middle;
    }

    @if $arrow-location == bottom {
      @extend %arrow--lower;
    }
  }

  @if $arrow-edge == bottom {
    @extend %arrow--bottom;

    &::before {
      border-top-color: $border-color;
    }

    &::after {
      border-top-color: $arrow-color;
    }

    @if $arrow-location == left {
      @extend %arrow--left;
    }

    @if $arrow-location == center {
      @extend %arrow--center;
    }

    @if $arrow-location == right {
      @extend %arrow--right;
    }
  }

  @if $arrow-edge == left {
    @extend %arrow--near;

    &::before {
      border-right-color: $border-color;
    }

    &::after {
      border-right-color: $arrow-color;
    }

    @if $arrow-location == top {
      @extend %arrow--upper;
    }

    @if $arrow-location == center {
      @extend %arrow--middle;
    }

    @if $arrow-location == bottom {
      @extend %arrow--lower;
    }
  }
}

Keyframes mixin

$name = Name of animation to be referenced later in "animation:" property.

@include keyframes(fadeIn) {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

Core Variables

Variables for all elements and objects in core should be listed here.

Colors

Default color for objects' borders etc.

IMPORTANT Do not use these values directly in your Sass files. Use the more specifically named variables below that use these root values.

$base-black                  : #000;
$base-white                  : #FFF;

$root-color: (
  grey-85                    : tint($base-black, 15%),
  grey-50                    : tint($base-black, 50%),
  grey-40                    : tint($base-black, 60%),
  grey-35                    : tint($base-black, 65%),
  grey-25                    : tint($base-black, 75%),
  grey-12                    : tint($base-black, 88%),
  grey-06                    : tint($base-black, 94%),
  grey-03                    : tint($base-black, 97%),
  brand                      : #0081BA,
  brand-light                : #9ACCE2,
  brand-dark                 : #036,
  warning                    : #FFD40C,
  bad-news                   : #C60C0C,
  good-news                  : #97C70A
);

Base Colors

These are colors can be used on UI elements like borders.

$color: (

  ui: (
    white                    : $base-white,
    faint                    : map-fetch($root-color, grey-03),
    light                    : map-fetch($root-color, grey-06),
    base                     : map-fetch($root-color, grey-12),
    medium                   : map-fetch($root-color, grey-40),
    dark                     : map-fetch($root-color, grey-85),
    brand                    : map-fetch($root-color, brand),
    brand-light              : map-fetch($root-color, brand-light),
    brand-dark               : map-fetch($root-color, brand-dark),
    warning                  : map-fetch($root-color, warning),
    bad-news                 : map-fetch($root-color, bad-news),
    good-news                : map-fetch($root-color, good-news)
  ),

  link: (
    base                     : map-fetch($root-color, brand),
    brand-light              : map-fetch($root-color, brand-light),
    bad-news                 : map-fetch($root-color, bad-news),
    white                    : $base-white
  ),

  background: (
    base                     : $base-white,
    white                    : $base-white,
    faint                    : map-fetch($root-color, grey-03),
    light                    : map-fetch($root-color, grey-06),
    muted                    : map-fetch($root-color, grey-35),
    medium                   : map-fetch($root-color, grey-50),
    black                    : $base-black,
    brand                    : map-fetch($root-color, brand),
    brand-dark               : map-fetch($root-color, brand-dark),
    brand-light              : #F2F7FC,
    warning                  : #FCF8E3,
    bad-news                 : #F9E3E4,
    good-news                : #E9F6C3
  ),

  text: (
    base                     : map-fetch($root-color, grey-85),
    white                    : $base-white,
    faint                    : map-fetch($root-color, grey-12),
    light                    : map-fetch($root-color, grey-25),
    muted                    : map-fetch($root-color, grey-35),
    medium                   : map-fetch($root-color, grey-50),
    dark                     : map-fetch($root-color, grey-85),
    brand                    : map-fetch($root-color, brand),
    brand-dark               : map-fetch($root-color, brand-dark),
    warning                  : map-fetch($root-color, warning),
    bad-news                 : map-fetch($root-color, bad-news),
    good-news                : map-fetch($root-color, good-news)
  )

);

Fonts

Font Sizes

These defaults can be overriden by custom variables.

$font: (

  size: (
    base                     : 14px,
    micro                    : 11px,
    milli                    : 12px,
    alpha                    : 28px, // h1
    beta                     : 24px, // h2
    gamma                    : 20px, // h3
    delta                    : 16px, // h4
    epsilon                  : 14px, // h5
    zeta                     : 12px, // h6
    kilo                     : 40px, // Extra large fonts.
    mega                     : 50px,
    giga                     : 65px
  ),

  line-height: (
    base                     : 1.6,
    tight                    : 1.2,
    loose                    : 1.8
  ),

  family: (
    base                     : unquote('Proxima, Helvetica, Verdana, sans-serif'),
    monospace                : monospace
  ),

  letter-spacing: (
    loose                    : 1px,
    tight                    : -1px,
    extra-tight              : -2px
  )

);

Buttons

$button: (

  size: (
    base: (
      height                 : 34px,
      font-size              : 13px,
      padding                : 0 10px,
      font-weight            : 400,
      border-radius          : 3px
    ),
    small: (
      height                 : 25px,
      font-size              : 11px,
      padding                : 0 7px,
      font-weight            : 400,
      border-radius          : 2px
    ),
  ),

  type: (
    base: (
      background             : #EEE,
      hover:(
        background           : #DDD
      ),
      active:(
        background           : #CCC
      )
    ),
    brand: (
      background             : #147CC5,
      hover:(
        background           : #1270B1
      ),
      active:(
        background           : #08568B
      )
    ),
    highlight: (
      background             : #A1CD1E,
      hover:(
        background           : #91B81C
      ),
      active:(
        background           : #719505
      )
    ),
    danger: (
      background             : #AA280D,
      hover:(
        background           : #991E04
      ),
      active:(
        background           : #641100
      )
    )
  )
);

UI Elements

Rounded corners.

$border-radius: (
  base                       : 2px,
  big                        : 4px,
  full                       : 50%
);

Shadows

$shadow: (
  base                       : 4px rgba(0, 0, 0, 0.2),
  light                      : 3px rgba(0, 0, 0, 0.1),
  big                        : 8px rgba(0, 0, 0, 0.3)
);

Opacity

$opacity: (
  medium                     : 0.5
);

Dialog Widths

$dialog: (
  width:(
    base                     : 700px,
    narrow                   : 500px,
    wide                     : 900px
  )
);

Transitions

$transition-duration: (
  fast                       : 0.1s,
  base                       : 0.3s,
  slow                       : 0.5s
);

Accordion

$accordion-link-height       : 26px;

Popover

$popover: (
  max-width                  : 250px
);

Poptip

$pop-tip: (
  max-width                  : 250px
);

Progress Bar

$progress-bar: (
  height: 20px,
  bar: (
    min-width: 20px
  )
);

Spinner

$spinner: (
  size:(
    base                     : 40px,
    small                    : 26px,
    tiny                     : 16px
  ),
  border:(
    width:(
      base                   : 4px,
      small                  : 3px,
      tiny                   : 2px
    ),
  ),
  speed                      : 800ms
);

Z-index Values

This can be overriden by the application.

$z-index: (
  poptip                     : 100
);

Spacing Unit

Defines spacing for paddings and margins using spacer function.

$spacer-unit                 : 10px;

Core Partials

This represents the bulk of the paritals used by all sites: desktop, mobile, tablet. They are the building blocks of all patterns and are width and layout independent.

@charset 'UTF-8';

Elements

Abstractions that provide basic structure, generally extended into larger objects.

@import 'partials/elements/clearfix';
@import 'partials/elements/flexbox';

Base

Baseline rules.

@import 'partials/base/reset';
@import 'partials/base/main';

@import 'partials/base/blockquote';
@import 'partials/base/code';
@import 'partials/base/form';
@import 'partials/base/fonts';
@import 'partials/base/images';
@import 'partials/base/links';
@import 'partials/base/lists';
@import 'partials/base/tables';
@import 'partials/base/text';

Elements

Simple, low level blocks.

@import 'partials/components/arrows';
@import 'partials/components/arrows-inline';
@import 'partials/components/borders';
@import 'partials/components/grid';
@import 'partials/components/island';
@import 'partials/components/layout';
@import 'partials/components/matrix';
@import 'partials/components/media';
@import 'partials/components/nav';
@import 'partials/components/rules';
@import 'partials/components/stats';

Objects

Simple styled objects that can be extended or used directly in HTML.

@import 'partials/objects/accordion';
@import 'partials/objects/array';
@import 'partials/objects/attention';
@import 'partials/objects/block-list';
@import 'partials/objects/buttons';
@import 'partials/objects/button-group';
@import 'partials/objects/button-row';
@import 'partials/objects/dialog';
@import 'partials/objects/disclose';
@import 'partials/objects/dropdown';
@import 'partials/objects/help';
@import 'partials/objects/icons';
@import 'partials/objects/pagination';
@import 'partials/objects/popover';
@import 'partials/objects/poptip';
@import 'partials/objects/progress';
@import 'partials/objects/search';
@import 'partials/objects/spinner';
@import 'partials/objects/steps';
@import 'partials/objects/tabs';
@import 'partials/objects/tags';

Clearfix

Used to clear floats with this technique. To use, extend the clearfix class.

Note: If you're using Flexbox CSS for layout you will not need this.

.foo {
     @extend %cf;
}

%cf,
.cf {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

Flexbox

Flexbox support is full on Chrome, Firefox and Safari (with prefix) and nearly full for IE 10.

• With IE10 at least one of the flex children needs to have a width or flex value otherwise the content in those children will not wrap. However, if none of children will collide, no width or flex value is needed.

flex-grow is not supported by IE10, justify-content is the next best thing.

Use in Sass with:

.foo {
     @include display(flex);
     @include flex(1);
}

or the corresponding classes directly in the HTML.

<div class="flex flex-1">item</div>

@mixin display($value) {
  display: -webkit-#{$value};
  display: -ms-#{$value}box;
  display: $value;
}

@mixin flex($num) {
  -webkit-flex: $num;
  -ms-flex: $num;
  flex: $num;
}

@mixin flex-wrap($value) {
  -webkit-flex-wrap: $value;
  -ms-flex-wrap: $value;
  flex-wrap: $value;
}

@mixin flex-grow($value) {
  -webkit-flex-grow: $value;
  -ms-flex-grow: $value; // Doesn't work in IE 10.
  flex-grow: $value;
}

@mixin flex-direction($value) {
  -webkit-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

@mixin justify-content($value) {
  -webkit-justify-content: $value;
  @if ($value == 'space-between') {
    -ms-flex-pack: justify;
  } @elseif ($value == 'flex-start') {
    -ms-flex-pack: start;
  } @elseif ($value == 'flex-end') {
    -ms-flex-pack: end;
  } @else {
    -ms-flex-pack: $value;
  }
  justify-content: $value;
}

@mixin align-items($value) {
  -webkit-align-items: $value;
  @if ($value == 'flex-start') {
    -ms-flex-align: start;
  } @elseif ($value == 'flex-end') {
    -ms-flex-align: end;
  } @else {
    -ms-flex-align: $value;
  }
  align-items: $value;
}

Flex classes

.flex {
  @include display(flex);
}

.flex-1 {
  @include flex(1);
}

.flex-none {
  @include flex(none);
}

.flex-wrap--wrap {
  @include flex-wrap(wrap);
}

.flex-wrap--nowrap {
  @include flex-wrap(nowrap);
}

.flex-direction--column {
  @include flex-direction(column)
}

.justify-content--space-between {
  @include justify-content(space-between);
}

.justify-content--center {
  @include justify-content(center);
}

.justify-content--flex-start {
  @include justify-content(flex-start);
}

.justify-content--flex-end {
  @include justify-content(flex-end);
}

.align-items--center {
  @include align-items(center)
}

.align-items--flex-start {
  @include align-items(flex-start)
}

.align-items--flex-end {
  @include align-items(flex-end)
}

Reset

Box-sizing

Reset all elements to use the border-box model.

* {
  &,
  &::before,
  &::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

General resets.

body {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
dl,
dd,
ol,
ul,
form,
fieldset,
legend,
table,
th,
td,
caption,
hr {
  margin: 0;
  padding: 0;
}

Remove default list-style.

ol,
ul {
  list-style: none;
}

Normalize headings to one weight.

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

Set tables to collapse.

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Give a help cursor to elements that give extra info on :hover.

abbr[title],
dfn[title] {
  cursor: help;
}

Remove underlines from potentially troublesome elements.

u,
ins {
  text-decoration: none;
}

Apply faux underline via border-bottom.

ins {
  border-bottom: 1px solid;
}

So that alt text is visually offset if images don't load. Set to display block by default.

img {
  font-style: italic;
}

Give form elements some cursor interactions...

button,
select,
option,
input[type="checkbox"] + label,
input[type="radio"] + label {
  cursor: pointer;
}

[type=text]:active,
[type=text]:focus,
[type=password]:active,
[type=password]:focus,
[type=email]:active,
[type=email]:focus,
textarea:active,
textarea:focus {
  cursor: text;
  outline: none;
}

Links

a {
  text-decoration: none;
}

Improve readability when focused and also mouse hovered in all browsers.

a:active,
a:hover {
  outline: 0;
}

Typography

Prevent sub and sup affecting line-height in all browsers.

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

em,
b,
strong {
  font-style: normal;
  font-weight: 500;
}

Forms

Remove border from fieldset.

fieldset {
  border: 0;
}

Improve readability and alignment in all browsers.

textarea {
  vertical-align: top;
}

1. Address appearance set to searchfield in Safari 5 and Chrome.
2. Address box-sizing set to border-box in Safari 5 and Chrome

input[type="search"] {
  -webkit-appearance: textfield; // 1
  -webkit-box-sizing: content-box; // 2
  box-sizing: content-box;
}

Re-set default cursor for disabled elements.

button[disabled],
html input[disabled] {
  cursor: default;
}

Address inconsistent text-transform inheritance for button and select. All other form control elements do not inherit text-transform values. Correct button style inheritance.

button,
select {
  text-transform: none;
}

1. Correct font family not being inherited in all browsers.
2. Correct font size not being inherited in all browsers.
3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.

button,
input,
select,
textarea {
  font-family: inherit; // 1
  font-size: 100%; // 2
  margin: 0; // 3
}

Remove inner padding and search cancel button in Safari 5 and Chrome on OS X.

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native audio and video controls.
2. Correct inability to style clickable input types in iOS.
3. Improve usability and consistency of cursor style between image-type input and others.

button,
html input[type="button"], // 1
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; // 2
  cursor: pointer; // 3
}

Main

High level defaults establishing font and color.

html {
  color: map-fetch($color, text base);
  background-color: map-fetch($color, background base);
  font-family: map-fetch($font, family base);
  font-size: map-fetch($font, size base);
  line-height: map-fetch($font, line-height base);
}

p {
  margin-bottom: spacer(1);
}

Blockquotes

For quoting blocks of content.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>

blockquote {
  border-left: 3px solid map-fetch($color, ui base);
  padding-left: spacer(1.5);
}

Code

For monospace code snippets, both inline and multiline.

Text can have <code>code snippets</code> in a sentence.

code {
  font-family: map-fetch($font, family monospace);
}

.lego-pre {
  margin-bottom: spacer(1);
  white-space: pre-wrap;

  code {
    padding: spacer(1);
    background: map-fetch($color, background faint);
    overflow-x: auto;
    display: block;
    border-radius: map-fetch($border-radius, base);
    border: 1px solid map-fetch($color, ui base);
  }
}

.lego-code {
  background: map-fetch($color, background faint);
  border-radius: map-fetch($border-radius, base);
  border: 1px solid map-fetch($color, ui base);
  padding: 1px 3px;
}

Forms

Form variations.

<form>
  <div class="lego-form__header">
    <div class="lego-form__title">Title</div>
    <p>Form information might go here if there was reason to do it.</p>
  </div>
  <fieldset>
    <ol class="lego-form-fields">
      <li class="lego-form-field__item">
        <label class="lego-label lego-label--optional">Single Input</label>
        <input type="text" class="lego-text-input">
        <div class="lego-form-note">This is a form note.</div>
      </li>
      <li class="lego-form-field__item">
        <label class="lego-label">Diabled Input</label>
        <input type="text" class="lego-text-input" disabled>
      </li>
      <li class="lego-form-field__item">
        <label class="lego-label">Add/Remove Row</label>
        <table class="lego-table lego-table--add-row width-1">
          <tr>
            <td><input type="text" class="lego-text-input"></td>
            <td><input type="text" class="lego-text-input"></td>
            <td class="lego-table--add-row__controls">
              <div class="flex">
                <button class="lego-button push--right">
                  <svg class="lego-icon">
                    <use xlink:href="#add"></use>
                  </svg>
                </button>
              </div>
            </td>
          </tr>
          <tr>
            <td><input type="text" class="lego-text-input"></td>
            <td><input type="text" class="lego-text-input"></td>
            <td class="lego-table--add-row__controls">
              <div class="flex">
                <button class="lego-button push--right">
                  <svg class="lego-icon">
                    <use xlink:href="#add"></use>
                  </svg>
                </button>
                <button class="lego-button">
                  <svg class="lego-icon">
                    <use xlink:href="#close"></use>
                  </svg>
                </button>
              </div>
            </td>
          </tr>
          <tr>
            <td><input type="text" class="lego-text-input"></td>
            <td><input type="text" class="lego-text-input"></td>
            <td class="lego-table--add-row__controls">
              <div class="flex">
                <button class="lego-button push--right">
                  <svg class="lego-icon">
                    <use xlink:href="#add"></use>
                  </svg>
                </button>
                <button class="lego-button">
                  <svg class="lego-icon">
                    <use xlink:href="#close"></use>
                  </svg>
                </button>
              </div>
            </td>
          </tr>
        </table>
      </li>
    </ol>
  </fieldset>
  <div class="lego-form__footer lego-button-row lego-button-row--right">
    <button class="lego-button">Cancel</button>
    <button class="lego-button lego-button--highlight">Submit</button>
  </div>
</form>

<form>
  <fieldset>
    <ol class="lego-form-fields">
      <li class="lego-form-field__item">
        <label class="lego-label">Textarea</label>
        <textarea class="lego-textarea"></textarea>
      </li>
      <li class="lego-form-field__item">
        <label class="lego-label">Fixed-width Input</label>
        <input type="text" class="lego-text-input width-150">
      </li>
      <li class="lego-form-field__item">
        <label class="lego-label">Fixed-width Input</label>
        <input type="text" class="lego-text-input width-250">
      </li>
      <li class="lego-form-field__item">
        <div class="lego-grid">
          <div class="lego-grid__cell">
            <label class="lego-label">Split Inputs</label>
            <input type="text" class="lego-text-input" placeholder="This is placeholder">
          </div>
          <div class="lego-grid__cell">
            <label class="lego-label">Split Inputs</label>
            <input type="text" class="lego-text-input" placeholder="This is placeholder">
          </div>
        </div>
      </li>
      <li class="lego-form-field__item">
        <div class="lego-grid">
          <div class="lego-grid__cell">
            <label class="lego-label">Split Inputs</label>
            <input type="text" class="lego-text-input" placeholder="This is placeholder">
          </div>
          <div class="lego-grid__cell">
            <label class="lego-label">Split Inputs</label>
            <select name="zoo" id="zoo" class="lego-select">
              <option value="one">This is option one</option>
              <option value="two">And this is option two</option>
            </select>
          </div>
        </div>
      </li>
      <li class="lego-form-field__item">
        <div class="lego-grid">
          <div class="lego-grid__cell">
            <label class="lego-label">Split Inputs</label>
            <input type="text" class="lego-text-input" placeholder="This is placeholder">
          </div>
          <div class="lego-grid__cell">
            <label class="lego-label">Split Inputs</label>
            <input type="text" class="lego-text-input" placeholder="This is placeholder">
          </div>
          <div class="lego-grid__cell">
            <label class="lego-label">Split Inputs</label>
            <input type="text" class="lego-text-input" placeholder="This is placeholder">
          </div>
        </div>
      </li>
      <li class="lego-form-field__item">
        <label class="lego-label">Fill Space</label>
        <div class="lego-grid">
          <div class="lego-grid__cell">
            <input type="text" class="lego-text-input" placeholder="This is placeholder">
          </div>
          <div class="push-double--left">
            <button class="lego-button lego-button--brand">Do This</button>
          </div>
        </div>
      </li>
      <li class="lego-form-field__item">
        <label class="lego-label">Fill Space</label>
        <div class="lego-grid">
          <div class="lego-grid__cell">
            <input type="text" class="lego-text-input" placeholder="This is placeholder">
          </div>
          <div class="push-double--left">
            <select name="zoo" id="zoo" class="lego-select">
              <option value="one">This is option one</option>
              <option value="two">And this is option two</option>
            </select>
          </div>
        </div>
      </li>
    </ol>
  </fieldset>
  <div class="lego-or">or</div>
  <fieldset>
    <ol class="lego-form-fields">
      <li class="lego-label">Checklist</li>
      <li class="lego-form-field__item">
        <ul class="lego-input-list">
          <li>
            <input name="foo-1" id="foo-1" type="checkbox" checked=""> <label class="lego-label" for="foo-1">Se  nd me email notifications when I am projected to or have exceeded my plan limits</label>
          </li>
          <li>
            <input name="foo-2" id="foo-2" type="checkbox"> <label class="lego-label" for="foo-2">Send me em  ail summaries of my experiment results</label>
          </li>
        </ul>
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <ol class="lego-form-fields">
      <li class="lego-form-field__item">
        <label class="lego-label">Select one thing or another</label>
        <select name="zoo" id="zoo" class="lego-select">
          <option value="one">This is option one</option>
          <option value="two">And this is option two</option>
        </select>
      </li>
      <li class="lego-form-field__item">
        <ul class="lego-input-list">
          <li>
            <input name="radio-1" id="bar-1" type="radio" checked=""> <label class="lego-label" for="bar-1">Radio1</label>
          </li>
          <li>
            <input name="radio-1" id="bar-2" type="radio" disabled> <label class="lego-label lego-label--di  sabled" for="bar-2">Radio 2 with disabled label</label>
          </li>
          <li>
            <input name="radio-1" id="bar-3" type="radio"> <label class="lego-label" for="bar-3">Radio 3</la  bel>
          </li>
        </ul>
      </li>
    </ol>
  </fieldset>
  <fieldset>
    <ol class="lego-form-fields">
      <li class="lego-form-field__item">
        <label class="lego-label">Horizontal Inputs</label>
        <p>Use these only for short inputs where there's no chance they will wrap.</p>
        <ul class="lego-input-list lego-input-list--horizontal">
          <li>
            <input name="radio-1" id="bar-1" type="radio" checked=""> <label class="lego-label" for="bar-1">Radio 1</label>
          </li>
          <li>
            <input name="radio-1" id="bar-2" type="radio" disabled> <label class="lego-label lego-label--di  sabled" for="bar-2">Radio 2 with disabled label</label>
          </li>
          <li>
            <input name="radio-1" id="bar-3" type="radio"> <label class="lego-label" for="bar-3">Radio 3</la  bel>
          </li>
        </ul>
      </li>
      <li class="lego-label">Checklist</li>
      <li class="lego-form-field__item">
        <ul class="lego-input-list lego-input-list--horizontal">
          <li>
            <input name="foo-1" id="foo-1" type="checkbox" checked=""> <label class="lego-label" for="foo-1">Sh  ort option</label>
          </li>
          <li>
            <input name="foo-2" id="foo-2" type="checkbox"> <label class="lego-label" for="foo-2">Another sh  ort option</label>
          </li>
        </ul>
      </li>
    </ol>
  </fieldset>
  <div class="lego-form__footer lego-button-row lego-button-row--right">
    <button class="lego-button">Cancel</button>
    <button class="lego-button lego-button--highlight">Submit</button>
  </div>
</form>

<form>
  <div class="lego-form__header">
    <div class="lego-form__title">Error States</div>
  </div>
  <fieldset>
    <ol class="lego-form-fields">
      <li class="lego-form-field__item lego-form-bad-news">
        <label class="lego-label lego-label--required">Address</label>
        <input type="text" class="lego-text-input">
        <div class="lego-form-note lego-form-note--bad-news">This field is required.</div>
      </li>
      <li class="lego-form-field__item lego-form-bad-news">
        <label class="lego-label lego-label--required">Fill Space</label>
        <select name="zoo" id="zoo" class="lego-select">
          <option value="one">This is option one</option>
          <option value="two">And this is option two</option>
        </select>
        <div class="lego-form-note lego-form-note--bad-news">This field is required.</div>
      </li>
      <li class="lego-form-field__item lego-form-bad-news">
        <label class="lego-label lego-label--required">Textarea</label>
        <textarea class="lego-textarea"></textarea>
        <div class="lego-form-note lego-form-note--bad-news">This field is required.</div>
      </li>
    </ol>
  </fieldset>
</form>

Text inputs

Instead of a [type] selector for each kind of form input, we just use a class to target any/every one, e.g.:

.lego-form--small {
  font-size: map-fetch($font, size micro);
}

%lego-text-input,
%lego-textarea,
.lego-text-input,
.lego-textarea {
  @include transition(border-color map-fetch($transition-duration, base));
  width: 100%;
  border: 1px solid map-fetch($color, ui base);
  border-radius: map-fetch($border-radius, base);
  padding: 7px;
  vertical-align: middle;
  line-height: 1.3;

  &--small {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  &:hover {
    border-color: map-fetch($color, ui medium);
  }

  &:focus {
    border-color: map-fetch($color, ui brand-light);
  }

  &[disabled] {
    background: map-fetch($color, background faint);

    &:hover {
      border-color: map-fetch($color, ui base);
    }
  }
}

.lego-textarea {
  height: 62px;
  resize: vertical;

  &--tall {
    height: 100px;
  }
}

.lego-select {
  @include transition(border-color map-fetch($transition-duration, base));
  display: inline-block;
  height: map-fetch($button, size base height);
  line-height: map-fetch($button, size base height);
  background: map-fetch($color, background white);
  border: 1px solid map-fetch($color, ui base);
  border-radius: map-fetch($border-radius, base);
  padding: 7px;
  max-width: 100%;

  &:hover {
    border-color: map-fetch($color, ui medium);
  }

  &[disabled] {
    background: map-fetch($color, background faint);
    cursor: default;

    &:hover {
      border-color: map-fetch($color, ui base);
    }
  }
}

.lego-form__header {
  margin-bottom: spacer(2);
}

.lego-form__footer {
  margin-top: spacer(3);
}

.lego-form__title {
  font-size: map-fetch($font, size gamma);
  margin-bottom: spacer(1);
  line-height: 1;
}

.lego-form-fields {
  @extend %kill-last-child-margin;
  list-style: none;
  margin: 0;
}

.lego-form-field__item {
  margin-bottom: spacer(1.5);
}

fieldset {
  margin-bottom: spacer(4);
}

Labels

Define a .label class as well as a <label> element. This means we can apply label-like styling to meta-labels for groups of options where a <label> element is not suitable.

.lego-label {
  display: block;
  margin-bottom: spacer(0.5);
  font-weight: 500;

  &--optional::after {
    content: '(Optional)';
    margin-left: spacer(0.5);
    color: map-fetch($color, text muted);
    font-size: map-fetch($font, size micro);
    font-weight: 400;
  }

  &--required::after {
    content: '*';
    margin-left: spacer(0.5);
    color: map-fetch($color, text bad-news);
    font-weight: 400;
    font-size: map-fetch($font, size delta);
    line-height: 1;
    position: relative;
    top: 2px; // Corrects position.
  }

  &--rule {
    border-bottom: 1px solid map-fetch($color, ui base);
    padding-bottom: spacer(0.5);
  }

  &--disabled {
    color: map-fetch($color, text muted);
    cursor: default !important;
  }
}

Labels in lego-input-lists

.lego-check-label,
.lego-input-list .lego-label {
  display: table-cell;
  padding-left: spacer(1);
  font-weight: 400;
}

Groups of checkboxes and radios.

.lego-input-list {
  list-style: none;
  margin: 0;

  > li {
    display: table;
    margin-bottom: spacer(0.5);
  }

  input {
    display: table-cell;
  }

  .lego-label {
    width: 100%;
  }

Horizontal version of inputs.

  &--horizontal {

    > li {
      padding-right: spacer(2);
      display: inline-block;
    }

    .lego-label {
      display: inline;
      padding-left: 6px; // Should be 10px but this compensates for white space.
    }
  }
}

.lego-input--disabled {
  background-color: map-fetch($color, background light);
}

.lego-or {
  text-align: center;
  color: map-fetch($color, text base);
  text-transform: uppercase;
  margin: spacer(1.5) auto;
  position: relative;

  &::before,
  &::after {
    content: '';
    border-top: 1px dotted map-fetch($color, ui base);
    width: 40%;
    position: absolute;
    left: 0;
    top: 50%;
  }

  &::after {
    left: auto;
    right: 0;
  }
}

Icons in inputs

This places an svg icon "inside" an input, to the right.

.lego-icon-input {
  @include display(flex);
  @include align-items(center);

  > input {
    z-index: 1;
    background: transparent;
  }

  .lego-icon-input__icon {
    margin-left: -(spacer(2.5));
    line-height: 1;
  }
}

Form Notes

.lego-form-note {
  padding-top: spacer(0.5);
  font-size: map-fetch($font, size micro);
}

.lego-form-note--good-news {
  color: map-fetch($color, text good-news);
}

.lego-form-note--bad-news {
  color: map-fetch($color, text bad-news);
}

.lego-form-note--warning {
  color: map-fetch($color, text warning);
}

Form Validations

.lego-form-good-news {
  .lego-label {
    color: map-fetch($color, text good-news);
  }

  .lego-text-input,
  .lego-select,
  .lego-textarea {
    border-color: map-fetch($color, ui good-news);
  }
}

.lego-form-bad-news {
  .lego-label {
    color: map-fetch($color, text bad-news);
  }

  .lego-text-input,
  .lego-select,
  .lego-textarea {
    border-color: map-fetch($color, ui bad-news);
  }
}

.lego-form-warning {
  .lego-label {
    color: map-fetch($color, text warning);
  }

  .lego-text-input,
  .lego-select,
  .lego-textarea {
    border-color: map-fetch($color, ui warning);
  }
}

Form Validation Browser Overrides

This prevents Firefox from adding an ugly red box shadow around required inputs.

[required] {
  box-shadow: none;
}

Fonts

Pulls in fonts from self hosting.

Usage In the theme's variables file:

$include-fonts:(
  weights: 300 400 500,
  italics: true
);

Font Support

• woff2: Chrome 26+, Opera 23+
• woff: Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+

$hosted-fonts:(
  weights:(
    200: thin,
    300: light,
    400: reg,
    500: medium,
    600: sbold,
    700: bold,
    800: xbold,
    900: black
  ),
  url: '//dhm5hy2vn8l0l.cloudfront.net/proxima/'
);

@if variable-exists(include-fonts) {
  @each $weight in map-fetch($include-fonts, weights) {

    @font-face {
      font-family: 'Proxima';
      font-weight: $weight;
      src: url('#{map-fetch($hosted-fonts, url)}' + 'proximanova-#{map-fetch($hosted-fonts, weights $weight)}.woff2') format('woff2'),
           url('#{map-fetch($hosted-fonts, url)}' + 'proximanova-#{map-fetch($hosted-fonts, weights $weight)}.woff') format('woff');
    }

If italic versions should be included.

    @if (map-fetch($include-fonts, italics) == true ) {
      @font-face {
        font-family: 'Proxima';
        font-weight: $weight;
        font-style: italic;
        src: url('#{map-fetch($hosted-fonts, url)}' + 'proximanova-#{map-fetch($hosted-fonts, weights $weight)}it.woff2') format('woff2'),
             url('#{map-fetch($hosted-fonts, url)}' + 'proximanova-#{map-fetch($hosted-fonts, weights $weight)}it.woff') format('woff');
      }
    }
  }
}

Images

img {
  display: block;
  max-width: 100%;
}

figure > img {
  display: block;
}

a img {
  border: 0;
}

Non Fluid

Non-fluid images if you specify width and/or height attributes.

<img src="image.png" width="20" height="20">

img[width],
img[height] {
  max-width: none;
}

Rounded images

Extend or add class to html.

<img src="http://fillmurray.com/100/100" class="img--round">

%img--round,
.img--round {
  border-radius: map-fetch($border-radius, base);
}

Circle images

Extend or add class to html.

<img src="http://fillmurray.com/100/100" class="img--circle">

%img--circle,
.img--circle {
  border-radius: 100%;
}

Border images

Extend or add class to html.

<img src="http://fillmurray.com/100/100" class="img--border">

%img--border,
.img--border {
  border: 1px solid map-fetch($color, ui base);
}

Image placement

Floats images, don't use on Flexbox children.

<img src="image.png" class="img--right">

%img--right,
.img--right {
  float: right;
  margin-bottom: spacer(1);
  margin-left: spacer(1);
}

%img--left,
.img--left {
  float: left;
  margin-right: spacer(1);
  margin-bottom: spacer(1);
}

%img--center,
.img--center {
  display: block;
  margin-right: auto;
  margin-bottom: spacer(1);
  margin-left: auto;
}

Links

Links will use the map-fetch($color, link base). You can also apply a .link class to an element.

HTML Examples

Text can have <span class="link">link color</span> when not a HTML anchor.

Links can be <a href="#" class="link--disabled">disabled</a> if need be.

a,
%link,
.link {
  color: map-fetch($color, link base);
  cursor: pointer;

  &:visited,
  &:active {
    color: map-fetch($color, link base);
  }

  &:hover {
    color: lighten(map-fetch($color, link base), 10%);
  }
}

%link--dark,
.link--dark {
  color: map-fetch($color, text base);
  cursor: pointer;

  &:visited,
  &:active {
    color: map-fetch($color, text base);
  }

  &:hover {
    color: map-fetch($color, link base);
  }
}

Use sparingly, such as an icon inside a link that needs a hover state (see multipage experience editor tabs for one example)

%link--muted,
.link--muted {
  color: map-fetch($color, text muted);
  cursor: pointer;

  &:visited,
  &:active {
    color: map-fetch($color, text muted);
  }

  &:hover {
    color: map-fetch($color, link base);
  }
}

%link--bad-news,
.link--bad-news {
  color: map-fetch($color, text base);
  cursor: pointer;

  &:visited,
  &:hover,
  &:active {
    color: map-fetch($color, link bad-news);
  }
}

%link--reverse,
.link--reverse {
  color: map-fetch($color, link white) !important;
  cursor: pointer;

  &:hover {
    color: lighten(map-fetch($color, link brand-light), 15%) !important;
  }
}

%link--disabled,
.link--disabled {
  color: map-fetch($color, text muted);

  &:visited,
  &:hover,
  &:active {
    color: map-fetch($color, text muted);
    cursor: default;
  }
}

Lists

Because we most commoly use ol/ul without the default styling we're providing classes to add bullets/numbers.

<ul class="lego-list lego-list--bullet">
  <li>item one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

<ul class="lego-list lego-list--numbered">
  <li>item one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

%lego-list,
.lego-list {
  margin-bottom: spacer(1);

  &--bullet {
    margin-left: spacer(2);
    list-style-type: disc;
  }

  &--numbered {
    margin-left: spacer(2.5);
    list-style-type: decimal;
  }

  &--lower-alpha {
    margin-left: spacer(2.5);
    list-style-type: lower-alpha;
  }

  &--spaced {
    > li {
      margin-bottom: spacer(0.5);
    }
  }
}

Nested List Spacing

Vertical spacing will be removed from nested lists.

li {
  > ul,
  > ol {
    margin-bottom: 0;
  }
}

Tables

Tables will often require heavier use of helper classes than normal.

Basic Table

<table class="lego-table">
  <thead>
    <tr>
      <th>Experiment</th>
      <th class="numerical">Numbers</th>
      <th class="cell-collapse">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Experiment name one</td>
      <td class="numerical">258</td>
      <td>Up</td>
    </tr>
    <tr>
      <td>Experiment name two that runs longer</td>
      <td class="numerical">19</td>
      <td>Down</td>
    </tr>
    <tr>
      <td>Experiment name three</td>
      <td class="numerical">400</td>
      <td>Up</td>
    </tr>
  </tbody>
</table>

Table Walled

<table class="lego-table lego-table--wall">
  <thead>
    <tr>
      <th>Experiment</th>
      <th class="numerical">Numbers</th>
      <th class="cell-collapse">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Experiment name one</td>
      <td class="numerical">258</td>
      <td>Up</td>
    </tr>
    <tr>
      <td>Experiment name two that runs longer</td>
      <td class="numerical">19</td>
      <td>Down</td>
    </tr>
    <tr>
      <td>Experiment name three</td>
      <td class="numerical">400</td>
      <td>Up</td>
    </tr>
  </tbody>
</table>

Table Rule

<table class="lego-table lego-table--rule">
  <thead>
    <tr>
      <th>Experiment</th>
      <th class="numerical">Numbers</th>
      <th class="cell-collapse">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Experiment name one</td>
      <td class="numerical">258</td>
      <td>Up</td>
    </tr>
    <tr>
      <td>Experiment name two that runs longer</td>
      <td class="numerical">19</td>
      <td>Down</td>
    </tr>
    <tr>
      <td>Experiment name three</td>
      <td class="numerical">400</td>
      <td>Up</td>
    </tr>
  </tbody>
</table>

Table Rule with Active Row and Hover

<table class="lego-table lego-table--rule lego-table--hover">
  <thead>
    <tr>
      <th>Experiment</th>
      <th class="numerical">Numbers</th>
      <th class="cell-collapse">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Experiment name one</td>
      <td class="numerical">258</td>
      <td>Up</td>
    </tr>
    <tr class="lego-table-row--active">
      <td>Experiment name two that runs longer</td>
      <td class="numerical">19</td>
      <td>Down</td>
    </tr>
    <tr>
      <td>Experiment name three</td>
      <td class="numerical">400</td>
      <td>Up</td>
    </tr>
  </tbody>
</table>

%lego-table,
.lego-table {
  width: 100%;
  font-size: inherit;

  th,
  td {
    padding-left: spacer(2);
    padding-top: spacer(0.5);
    padding-bottom: spacer(0.5);

    &:first-child {
      padding-left: 0;
    }
  }

  th {
    text-transform: uppercase;
    font-weight: 500;
    font-size: map-fetch($font, size micro);
    color: map-fetch($color, text muted);
    letter-spacing: 1px;
    text-align: left;

For columns that are sortable.

    &[field] {
      cursor: pointer;
    }
  }

  td {
    vertical-align: top;
  }

Cell Alignments

Defaults for cell alignments with one helper class for numbers.

  [rowspan] {
    vertical-align: middle;
  }

  [rowspan="1"] {
    vertical-align: top;
  }

  [colspan] {
    text-align: center;
  }

  [colspan="1"] {
    text-align: left;
  }

  .numerical {
    text-align: right;
  }

  .cell-collapse {
    width: 1%;
  }

Table Variations

We're using direct decendent selectors so any child tables do not inherit styles.

  &--rule {

    > thead {

      > th {
        padding-bottom: spacer(1);
      }

      > tr {
        border-bottom: 1px solid map-fetch($color, ui base);
      }
    }

    > tbody > tr {
      border-bottom: 1px solid map-fetch($color, ui light);

If no thead is present we'll have a border top.

      &:first-child {
        border-bottom: 1px solid map-fetch($color, ui light);
      }
    }

  }

  &--wall {

    > thead > tr > th,
    > tbody > tr > td {
      border-left: 1px solid map-fetch($color, ui light);
      padding-right: spacer(1);

      &:first-child {
        border-left: 0;
      }
    }
  }

  &--hover {

    > tbody > tr {

      &:hover {
        background-color: map-fetch($color, background brand-light);
        cursor: pointer;
      }
    }

    > thead > tr > th:first-child,
    > tbody > tr > td:first-child {
      padding-left: spacer(1);
    }

    > thead > tr > th:last-child,
    > tbody > tr > td:last-child {
      padding-right: spacer(1);
    }
  }

Add/Remove Rows

  &--add-row {

Removes top padding of first row so spacing is consistent with other form elements. tbody > tr:first-child > td { padding-top: 0; }

    td {
      padding-bottom: spacer(1);
    }

    &__controls {
      vertical-align: middle !important;

      .flex {
        width: 50px;

        > * {
          @include flex(none);
        }

TODO (kelly): remove link--bad-news once all forms in the product have been converted to use the new button .link--bad-news, .lego-button--remove { margin-left: auto; } } } } }

Added to the table row.

.lego-table-row--active {
  background-color: map-fetch($color, background faint);
}

Text

Special type design treatments.

Editiable

Text that can be edited, like project titles.

<!-- Can be applied to any element -->
<p v-editable-text>This Text is Editable</p>

.editable {

  &:hover {
    color: map-fetch($color, text muted);

    &::after {
      color: map-fetch($color, text muted);
      content: '\270E';
      font-size: 1em;
      padding-left: spacer(0.5);
    }
  }
}

For code examples.

.monospace {
  font-family: map-fetch($font, family monospace);
}

Pseudo Content

Content that is applied as a pseudo-element and defined as an attribute on an empty element. This is useful for preventing an element's text from being copied to the clipboard.

<span data-lego-pseudo-content="+"></span> Some text

[data-lego-pseudo-content]::before {
  content: attr(data-lego-pseudo-content);
}

Arrows

If you only need an inline arrow for dropdown menus or similar uses, see "Arrow Inline" below for ready-made classes.

It is a common design treatment to give an element a triangular points-out arrow, we typically build these with CSS. These following classes allow us to generate these arbitrarily with a mixin, @arrow().

.foo {
    @include arrow(top, right, red);
    width: 100px;
    height: 100px;
    background: red;
}

$arrow-size: 6px !default;
$arrow-border: 1 !default;
$border: $arrow-size;
$arrow: $arrow-size - $arrow-border;

Forms the basis for any/all CSS arrows.

%arrow {
  position: relative;

  &::before,
  &::after {
    content: '';
    position: absolute;
    border-collapse: separate;
    pointer-events: none; // Added to preview hover issues. FF/Saf/Chrome/IE 10+.
  }

  &::before {
    border: $border solid transparent;
  }

  &::after {
    border: $arrow solid transparent;
  }
}

Define individual edges so we can combine what we need, when we need.

%arrow--top {
  @extend %arrow;

  &::before,
  &::after {
    bottom: 100%;
  }
}

%arrow--upper {
  @extend %arrow;

  &::before {
    top: $arrow;
  }

  &::after {
    top: $border;
  }
}

%arrow--middle {
  @extend %arrow;

  &::before,
  &::after {
    top: 50%;
    margin-top: -$border;
  }

  &::after {
    margin-top: -$arrow;
  }
}

%arrow--lower {
  @extend %arrow;

  &::before {
    bottom: $arrow;
  }

  &::after {
    bottom: $border;
  }
}

%arrow--bottom {
  @extend %arrow;

  &::before,
  &::after {
    top: 100%;
  }
}

%arrow--near {
  @extend %arrow;

  &::before,
  &::after {
    right: 100%;
  }
}

%arrow--left {
  @extend %arrow;

  &::before {
    left: $arrow;
  }

  &::after {
    left: $border;
  }
}

%arrow--center {
  @extend %arrow;

  &::before,
  &::after {
    left: 50%;
    margin-left: -$border;
  }

  &::after {
    margin-left: -$arrow;
  }
}

%arrow--right {
  @extend %arrow;

  &::before {
    right: $arrow;
  }

  &::after {
    right: $border;
  }
}

%arrow--far {
  @extend %arrow;

  &::before,
  &::after {
    left: 100%;
  }
}

Arrow Inline

Small arrows as needed next to navigational elements. The arrows will inherit the color of the parent color value.

<div><span class="lego-arrow-inline--up"></span> Up</div>
<div><span class="lego-arrow-inline--down"></span> Down</div>
<div><span class="lego-arrow-inline--right"></span> Right</div>
<div><span class="lego-arrow-inline--left"></span> Left</div>

$border-colored: 4px solid currentColor;
$border-transparent: 4px solid transparent;

%lego-arrow-inline,
.lego-arrow-inline {
  display: inline-block;
  width: 0;
  height: 0;
  margin-top: -2px;
  margin-left: 2px;
  vertical-align: middle;

  &--up {
    @extend %lego-arrow-inline;
    border-bottom: $border-colored;
    border-right: $border-transparent;
    border-left: $border-transparent;
  }

  &--down {
    @extend %lego-arrow-inline;
    border-top: $border-colored;
    border-right: $border-transparent;
    border-left: $border-transparent;
  }

  &--right {
    @extend %lego-arrow-inline;
    border-left: $border-colored;
    border-top: $border-transparent;
    border-bottom: $border-transparent;
  }

  &--left {
    @extend %lego-arrow-inline;
    border-right: $border-colored;
    border-top: $border-transparent;
    border-bottom: $border-transparent;
  }
}

Borders

This adds a border and additional spacing directly to an element.

Examples

 <div class="border--top">Border on top</div>

 <div class="border--bottom">Border on bottom</div>

 <div class="border--right">Border on right</div>

 <div class="border--left">Border on left</div>

Border All

With default padding.

%border--all,
.border--all {
  border: 1px solid map-fetch($color, ui base);
}

Border Top/Bottom

These add padding on top and bottom.

%border--top,
.border--top {
  border-top: 1px solid map-fetch($color, ui base);
}

%border--bottom,
.border--bottom {
  border-bottom: 1px solid map-fetch($color, ui base);
}

%border--ends,
.border--ends {
  @extend %border--top;
  @extend %border--bottom;
}

Border Left/Right

These don't add margin so they remain flush with right/left side.

%border--left,
.border--left {
  border-left: 1px solid map-fetch($color, ui base);
}

%border--right,
.border--right {
  border-right: 1px solid map-fetch($color, ui base);
}

%border--sides,
.border--sides {
  @extend %border--left;
  @extend %border--right;
}

Grids

Fluid and nestable grid system with responsive option.

Responsive

To include a responsive grid in your Sass...

.mygrid {
  @include lego-grid($responsive: 500px);
}

This will cause the grid to stack vertically when the browser window is less than 500px.

Basic Grid

A gutter is set by default.

<div class="lego-grid">
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
</div>

<div class="lego-grid lego-grid--gutter--narrow">
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
</div>

<div class="lego-grid lego-grid--gutter--wide">
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
</div>

Grid That Wraps

<div class="lego-grid">
  <div class="lego-grid__cell width-1-3">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell width-1-3">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell width-1-3">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell width-1-3">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell width-1-3">
    <div class="doc-placeholder">even width cells</div>
  </div>
</div>

Grid Flush

<div class="lego-grid lego-grid--flush">
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="doc-placeholder">even width cells</div>
  </div>
</div>

Different Widths

<div class="lego-grid">
  <div class="lego-grid__cell width-3-5">
    <div class="doc-placeholder">3/5</div>
  </div>
  <div class="lego-grid__cell width-1-5">
    <div class="doc-placeholder">1/5</div>
  </div>
  <div class="lego-grid__cell width-1-5">
    <div class="doc-placeholder">1/5</div>
  </div>
</div>

@mixin lego-grid($responsive: null) {
  @include display(flex);
  @include flex-wrap(wrap);
  margin-left: -(spacer(2));

  &__cell {
    @include flex(1);
    padding-left: spacer(2);
  }

  &--gutter--narrow {
    margin-left: -(spacer(1));

    > .lego-grid__cell {
      padding-left: spacer(1);
    }
  }

  &--gutter--wide {
    margin-left: -(spacer(4));

    > .lego-grid__cell {
      padding-left: spacer(4);
    }
  }

  &--flush {
    margin-left: 0;

    > .lego-grid__cell {
      padding-left: 0;
    }
  }

Grid cells only grow as large as the content.

  &--natural {
    > .lego-grid__cell {
      @include flex(none);
    }
  }

  @if ($responsive) {
    @include breakpoint($max: $responsive) {
      display: block;
      margin-left: 0;

      &__cell {
        @include flex(none);
        padding-left: 0 !important;
        margin-bottom: spacer(2);
      }

      &--gutter--wide,
      &--gutter--narrow {
        margin-left: 0;
      }
    }
  }

Grid Alignment

Moves grid cells to align center or anchored at the bottom of the grid.

  &--center {
    @include align-items(center);
  }

  &--bottom {
    @include align-items(flex-end);
  }

Grid Widths

If a width is specificed on a cell__grid then have to disable the default flex value otherwise it won't obey the width.

<div class="lego-grid__cell width-1-3">grid cell</div>

  &__cell[class*="width-"] {
    -webkit-flex: none;
    -ms-flex: none;
    flex: none;
  }
}

%lego-grid,
.lego-grid {
  @include lego-grid;
}

Island

Simple, boxed off content, as per: Island Object

Example

<div class="lego-island">
   I am boxed off.
</div>

%lego-island,
.lego-island {
  @extend %kill-last-child-margin;
  border: 1px solid map-fetch($color, ui light);
  border-radius: map-fetch($border-radius, base);
  background: map-fetch($color, background faint);
  padding: spacer(1);

  &--center {
    text-align: center;
  }
}

Layout

Classes for building page layouts. Use this only to build the major layout areas of a page.

• lego-pane-group defines a flexbox area.
• lego-pane-group--column defines the direction of the flex to be a column. By default flex children are in a row.
• lego-pane--full sets the height to 100%. Generally only needed on the first child of the body, essentially a wrapper.
• lego-pane is the child of the flexbox. By itself doesn't have CSS associated with it but it does help identify the structure when troubleshooting.
• lego-pane--flex-1 is equivalent to flex:1.

Example

<div class="lego-pane-group lego-pane-group--column lego-pane--full">
  <div class="lego-pane">
    <div class="docs-layout-item">pane</div>
  </div>
  <div class="lego-pane lego-pane-group lego-pane--flex-1">
    <div class="lego-pane lego-pane--flex-1">
      <div class="docs-layout-item">pane</div>
    </div>
    <div class="lego-pane">
      <div class="docs-layout-item">pane</div>
    </div>
  </div>
</div>

Panes

%lego-pane-group,
.lego-pane-group {
  @include display(flex);

This deals with the way FF handles display:flex defaults and overflow. http://stackoverflow.com/questions/29398259/css-flexbox-issue-in-firefox-v36-and-greater min-height: 0;

  &--column {
    @include flex-direction(column);
  }
}

%lego-pane,
.lego-pane {

  &--full {
    height: 100%;
  }

  &--flex {
    @include display(flex);
  }

  &--flex-1 {
    @include flex(1);
  }

  &--flex-none {
    @include flex(none);
  }

  &--scroll-y {
    overflow-y: auto;
  }

  &--empty {
    @include display(flex);
    @include justify-content(center);
    @include align-items(center);
  }
}

OUI Fence

This adds padding or margin to full-width items to move them away from the walls for their container.

%lego-fence--soft,
.lego-fence--soft {
  padding-left: spacer(2);
  padding-right: spacer(2);
}

%lego-fence--push,
.lego-fence--push {
  margin-left: spacer(2);
  margin-right: spacer(2);
}

.empty-state-message {
  color: map-fetch($color, text muted);
  font-size: map-fetch($font, size epsilon);
  text-align: center;
}

Full Screen

Make an element fill the window.

.full-screen {
  position: absolute;
  width: 100%;
  height: 100%;
}

Matrix

Creates rows of elements with one parent, extending lego-grid.

<ul class="lego-matrix lego-matrix--1-2">
  <li><div class="doc-placeholder">matrix 1</div></li>
  <li><div class="doc-placeholder">matrix 2</div></li>
  <li><div class="doc-placeholder">matrix 3</div></li>
  <li><div class="doc-placeholder">matrix 4</div></li>
  <li><div class="doc-placeholder">matrix 5</div></li>
  <li><div class="doc-placeholder">matrix 6</div></li>
  <li><div class="doc-placeholder">matrix 7</div></li>
</ul>

<ul class="lego-matrix lego-matrix--1-3">
  <li><div class="doc-placeholder">matrix 1</div></li>
  <li><div class="doc-placeholder">matrix 2</div></li>
  <li><div class="doc-placeholder">matrix 3</div></li>
  <li><div class="doc-placeholder">matrix 4</div></li>
  <li><div class="doc-placeholder">matrix 5</div></li>
  <li><div class="doc-placeholder">matrix 6</div></li>
  <li><div class="doc-placeholder">matrix 7</div></li>
</ul>

<ul class="lego-matrix lego-matrix--1-4">
  <li><div class="doc-placeholder">matrix 1</div></li>
  <li><div class="doc-placeholder">matrix 2</div></li>
  <li><div class="doc-placeholder">matrix 3</div></li>
  <li><div class="doc-placeholder">matrix 4</div></li>
  <li><div class="doc-placeholder">matrix 5</div></li>
  <li><div class="doc-placeholder">matrix 6</div></li>
  <li><div class="doc-placeholder">matrix 7</div></li>
</ul>

@mixin lego-matrix($responsive: null) {
  @extend %lego-grid;
  margin-left: -(spacer(2));

  > li {
    padding-left: spacer(2);
  }

  &--1-2 {
    > li {
      width: 50%;
    }
  }

  &--1-3 {
    > li {
      width: 33.333%;
    }
  }

  &--1-4 {
    > li {
      width: 25%;
    }
  }

  @if ($responsive) {
    @include breakpoint($max: $responsive) {
      display: block;
      margin-left: 0;

      > li {
        padding-left: 0;
        margin-bottom: spacer(2);
        width: auto;
      }
    }
  }
}

%lego-matrix,
.lego-matrix {
  @include lego-matrix;
}

Media

Place any image and text-like content side-by-side.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, be e sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!

<div class="lego-media">
  <img src="http://fillmurray.com/50/50" alt="" class="lego-media__img">
  <div class="lego-media__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, be     e sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!</p>
  </div>
</div>

Reversed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, be e sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!

<div class="lego-media">
  <div class="lego-media__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, be     e sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!</p>
  </div>
  <img src="http://fillmurray.com/50/50" alt="" class="lego-media__img--rev">
</div>

Nested

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, be e sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse de tus molestias, beatae sapiente nemo voluptates quam nam sint fugit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse de tus molestias, beatae sapiente nemo voluptates quam nam sint fugit!

<div class="lego-media">
  <img src="http://fillmurray.com/50/50" alt="" class="lego-media__img">
  <div class="lego-media__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, be     e sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!</p>
    <div class="lego-media push--bottom">
      <img src="http://fillmurray.com/25/25" alt="" class="lego-media__img">
      <div class="lego-media__body">
        <p class="micro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse de     tus molestias, beatae sapiente nemo voluptates quam nam sint fugit!</p>
      </div>
    </div>
    <div class="lego-media">
      <img src="http://fillmurray.com/25/25" alt="" class="lego-media__img">
      <div class="lego-media__body">
        <p class="micro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse de     tus molestias, beatae sapiente nemo voluptates quam nam sint fugit!</p>
      </div>
    </div>
  </div>
</div>

@mixin lego-media($responsive: null) {
  @include display(flex);
  @include align-items(flex-start);

  &__img {
    margin-right: spacer(1);
    margin-top: 0.7%; // Aligns image better with text.
  }

  &__img--rev {
    margin-left: spacer(1);
    margin-top: 0.7%; // Aligns image better with text.
  }

  &__body {
    @extend %kill-last-child-margin;
    @include flex(1);
  }

  @if ($responsive) {
    @include breakpoint($max: $responsive) {
      display: block;

      &__img,
      &__img--rev {
        margin-right: 0;
        margin-top: 0;
      }

      &__body {
        @include flex(none);
      }
    }
  }
}

%lego-media,
.lego-media {
  @include lego-media;
}

Nav

Creates simple nav pattens to extend.

Default

<ul class="lego-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Stacked

<ul class="lego-nav lego-nav--stacked">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Banner (Centered)

<ul class="lego-nav lego-nav--center">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Fit

<ul class="lego-nav lego-nav--fit">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

%lego-nav,
.lego-nav {
  @include display(flex);

  > li {
    margin-right: spacer(1);

    > a {
      display: block;
    }
  }

  &--stacked {
    display: block;

    > li {
      margin-right: 0;
    }
  }

  &--center {
    @include justify-content(center);

    > li {
      margin-left: spacer(0.5);
      margin-right: spacer(0.5);
    }
  }

  &--fit {
    @include display(flex);

    > li {
      @include flex(1);

      > a {
        display: block;
      }
    }
  }
}

Rules

Adds styling to an 'hr'. Use this between blocks of text or other elements to provide separation.

<hr class="lego-rule">

<hr class="lego-rule lego-rule--dotted">

<hr class="lego-rule lego-rule--dashed">

%lego-rule,
.lego-rule {
  border: 0;
  height: 0;
  border-top: 1px solid map-fetch($color, ui base);
  margin-top: spacer(1) - 1px;
  margin-bottom: spacer(1);

  &--dotted {
    border-top-style: dotted;
  }

  &--dashed {
    border-top-style: dashed;
  }
}

Stats

Simple object to display key-value statistic-like information, for example Issue counts.

<div class="lego-stat-group">
  <div class="lego-stat">
    <div class="stat__value">200</div>
    <div class="stat__title">Visitors</div>
  </div>
  <div class="lego-stat">
    <div class="stat__value">7000</div>
    <div class="stat__title">View</div>
  </div>
  <div class="lego-stat">
    <div class="stat__value">9,600</div>
    <div class="stat__title">Followers</div>
  </div>
</div>

%lego-stat-group,
.lego-stat-group {
  @include display(flex);
}

%lego-stat,
.lego-stat {
  margin-right: spacer(1);
}

Accordion

A vertical accordion with any number of panels.

There are two dependencies:

• The parent div must be display:flex;
• The parent div must have height, usually accomplished with a flex: 1;

The wrapping <div class="doc-accordion-example"> here has been added for purposes of the documentation and should be removed.

<div class="flex height-300">
<ul class="accordion" v-accordion>
  <li class="accordion__item" v-effect="accordion">
    <a class="accordion__link" href="#">Item One</a>
    <div class="accordion__content-wrap">
      <div class="accordion__content">
        <p>Dimensions can be used to track extra data about visitors. You can use dimensions to filter your results or de  fine new audiences for targeting. Learn more.</p>
      </div>
    </div>
  </li>
  <li class="accordion__item  accordion__item--active" v-effect="accordion">
    <a class="accordion__link" href="#">Item Two</a>
    <div class="accordion__content-wrap">
      <div class="accordion__content">
        <p>Dimensions can be used to track extra data about visitors. You can use dimensions to filter your results or de  fine new audiences for targeting. Learn more.</p>
      </div>
    </div>
  </li>
  <li class="accordion__item" v-effect="accordion">
    <a class="accordion__link" href="#">Item Three</a>
    <div class="accordion__content-wrap">
      <div class="accordion__content">
        <p>Dimensions can be used to track extra data about visitors. You can use dimensions to filter your results or de  fine new audiences for targeting. Learn more.</p>
      </div>
    </div>
  </li>
</ul>
</div>

.accordion {
  @include display(flex);
  @include flex-direction(column);

  &__link {
    @include transition-property(height);
    @include transition-duration(map-fetch($transition-duration, base));
    @include display(flex);
    @include align-items(center);
    letter-spacing: map-fetch($font, letter-spacing loose);
    font-size: map-fetch($font, size milli);
    padding: 0 spacer(2);
    background: map-fetch($color, background faint);
    line-height: 1;
    height: $accordion-link-height;
    box-shadow: inset 0 1px 0 map-fetch($color, ui base);
    font-weight: 500;
    text-transform: uppercase;

    &:hover {
      background: map-fetch($color, background light);
      color: map-fetch($color, text base);
    }

    &:focus {
      outline: none;
    }

    &::before {
      content: '+';
      margin-left: -(spacer(1));
      width: spacer(1);
      display: inline-block;
    }
  }

  &__item {
    @include display(flex);
    @include flex-direction(column);
    height: $accordion-link-height;
    overflow: hidden;

    &:first-child .accordion__link {
      box-shadow: none;
    }

    &--active {
      @include flex(1);

      .accordion__link {
        color: map-fetch($color, text base);
        cursor: default;

        &:hover {
          background: map-fetch($color, background faint);
        }

        &:before {
          opacity: 0;
        }
      }
    }

    &--empty {
      .accordion__content-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .accordion__content {
        flex: 1;
      }
    }
  }

  &__content-wrap {
    @include flex(1);
    overflow-y: auto;
  }

  &__content {
    padding: spacer(2);
  }

}

Array

Row of any number of items at equal height and width. Background classees here only to show the items are the same height and width.

<div class="lego-array">
  <div class="lego-array__item background--faint">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="lego-array__item background--faint">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae excepturi eum suscipit necessitatibus iure nam architecto.
  </div>
  <div class="lego-array__item background--faint">
    Lorem ipsum dolor sit amet.
  </div>
</div>

%lego-array,
.lego-array {
  @include display(flex);

  &__item {
    @include flex(1);
    margin-left: spacer(1);
    margin-right: spacer(1);

    &:first-child {
      margin-left: 0;
    }

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

Attention

Boxes for highlighting important information or warnings.

Default

For general notifications using the default color.

<div class="lego-attention text--center push-double--bottom">
   This is a note.
</div>
<div class="lego-attention">
  <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae re     endis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
</div>

Default With Close

For general notifications using the default color.

<div class="lego-attention text--center push-double--bottom">
    <svg class="lego-icon lego-attention__close">
      <use xlink:href="#close"></use>
    </svg>
    This is a note.
</div>
<div class="lego-attention">
    <svg class="lego-icon lego-attention__close">
      <use xlink:href="#close"></use>
    </svg>
  <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae re     endis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
</div>

Brand

For general notifications using the brand color.

<div class="lego-attention lego-attention--brand text--center push-double--bottom">
   This is a note.
</div>
<div class="lego-attention lego-attention--brand">
  <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae re     endis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
</div>

Warning

For alterting a user to information that's important.

<div class="lego-attention lego-attention--warning text--center push-double--bottom">
   This is a note.
</div>


<div class="lego-attention lego-attention--warning">
  <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae re     endis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
</div>

Good News

For alterting a user to information that's good.

<div class="lego-attention lego-attention--good-news text--center push-double--bottom">
   This is a note.
</div>


<div class="lego-attention lego-attention--good-news">
  <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae re     endis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
</div>

Error

For bad-news states or bad news.

<div class="lego-attention lego-attention--bad-news text--center push-double--bottom">
   This is a note.
</div>


<div class="lego-attention lego-attention--bad-news">
  <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae re     endis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
</div>

%lego-attention,
.lego-attention {
  @extend %kill-last-child-margin;
  padding: spacer(1);
  border-radius: map-fetch($border-radius, base);
  border: 1px solid map-fetch($color, ui base);
  background: map-fetch($color, background faint);

  &--brand {
    border-color: map-fetch($color, ui brand-light);
    background-color: map-fetch($color, background brand-light);
  }

  &--warning {
    border-color: map-fetch($color, ui warning);
    background-color: map-fetch($color, background warning);
  }

  &--good-news {
    border-color: map-fetch($color, ui good-news);
    background-color: map-fetch($color, background good-news);
  }

  &--bad-news {
    border-color: map-fetch($color, ui bad-news);
    background-color: map-fetch($color, background bad-news);
  }

  &__close {
    float: right;
    margin-left: spacer(1);
    cursor: pointer;
  }
}

Block List

Create big blocky vertical lists with dividers.

Default Block List

<ul class="lego-block-list">
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
  <li><a href="#" class="lego-block-list__link">Foo Bar Baz</a></li>
</ul>

Block List with Bottom Border

<ul class="lego-block-list lego-block-list--all">
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
  <li><a href="#" class="lego-block-list__link">Foo Bar Baz</a></li>
</ul>

Block List with Boundry

<ul class="lego-block-list-group">
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
  <li><a href="#" class="lego-block-list__link">Foo Bar Baz</a></li>
</ul>

%lego-block-list,
.lego-block-list {
  list-style: none;
  margin-left: 0;

  > li {
    padding: spacer(0.5) spacer(1);
    border-top: 1px solid map-fetch($color, ui light);
  }

For links that will take up full space of list item.

  &__link {
    display: block;
    padding: spacer(0.5) spacer(1);
    margin-left: -(spacer(1));
    margin-right: -(spacer(1));

    &:hover {
      background-color: map-fetch($color, background brand-light);
    }

    &--active {
      background-color: map-fetch($color, background faint);
    }

    &:first-child {
      margin-top: -(spacer(0.5));
    }

    &:last-child {
      margin-bottom: -(spacer(0.5));
    }

  }

Removes padding on left/right so items are not indented.

  &--flush {
    li {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &--all {
    li:last-child {
      border-bottom: 1px solid map-fetch($color, ui light);
    }
  }

  &--no-border {
    > li {
      border-top: none;
    }
  }

}

Block List Group

Extends ruled list to create a self-contained grouping.

%lego-block-list-group,
.lego-block-list-group {
  @extend %lego-block-list;
  border: 1px solid map-fetch($color, ui base);
  border-radius: map-fetch($border-radius, base);

  > li:first-child {
    border: 0;
  }
}

Buttons

These are the default button styles.

Button Row Left

<div class="lego-button-row--left">
  <button class="lego-button">Button</button>
  <button class="lego-button lego-button--brand">Button</button>
  <button class="lego-button lego-button--highlight">Button</button>
  <button class="lego-button lego-button--danger">Button</button>
</div>

Button Row Center

<div class="lego-button-row--center">
  <button class="lego-button">Button</button>
  <button class="lego-button lego-button--brand">Button</button>
  <button class="lego-button lego-button--highlight">Button</button>
  <button class="lego-button lego-button--danger">Button</button>
</div>

Button Row Right

<div class="lego-button-row--right">
  <button class="lego-button">Button</button>
  <button class="lego-button lego-button--brand">Button</button>
  <button class="lego-button lego-button--highlight">Button</button>
  <button class="lego-button lego-button--danger">Button</button>
</div>

Button Small

<div class="lego-button-row--left">
  <button class="lego-button lego-button--small">Button</button>
  <button class="lego-button lego-button--small lego-button--brand">Button</button>
  <button class="lego-button lego-button--small lego-button--highlight">Button</button>
  <button class="lego-button lego-button--small lego-button--danger">Button</button>
</div>

Button Full

   <button class="lego-button lego-button--brand lego-button--full">Button</button>

Full Spread Buttons

<div class="lego-grid lego-grid--gutter">
  <div class="lego-grid__cell">
      <button class="lego-button lego-button--brand lego-button--full">Button</button>
  </div>
  <div class="lego-grid__cell">
      <button class="lego-button lego-button--brand lego-button--full">Button</button>
  </div>
  <div class="lego-grid__cell">
      <button class="lego-button lego-button--brand lego-button--full">Button</button>
  </div>
</div>

Button Disabled

<div class="lego-button-row--left">
  <button class="lego-button lego-button--disabled">Button</button>
  <button class="lego-button lego-button--brand lego-button--disabled">Button</button>
</div>

Button Variables

Shadows for buttons.

%lego-button,
.lego-button {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  border: 0;
  margin: 0;
  line-height: 1;
  font-size: map-fetch($button, size base font-size);
  font-weight: map-fetch($button, size base font-weight);
  border-radius: map-fetch($button, size base border-radius);
  height: map-fetch($button, size base height);
  padding: map-fetch($button, size base padding);

Unique styles for the base button start here.

  background-color: map-fetch($button, type base background);
  color: map-fetch($color, text base);

  &:hover {
    background: map-fetch($button, type base hover background);
  }

  &:active {
    background: map-fetch($button, type base active background);
  }

  &:hover,
  &:active,
  &:visited,
  &:focus {
    outline: none;
    color: map-fetch($color, text base);
  }

  &--brand {
    background-color: map-fetch($button, type brand background);
    color: map-fetch($color, text white);

    &:hover {
      background: map-fetch($button, type brand hover background);
    }

    &:active {
      background: map-fetch($button, type brand active background);
    }

    &:hover,
    &:active,
    &:visited,
    &:focus {
      color: map-fetch($color, text white);
    }
  }

  &--highlight {
    background-color: map-fetch($button, type highlight background);
    color: map-fetch($color, text white);

    &:hover {
      background: map-fetch($button, type highlight hover background);
    }

    &:active {
      background: map-fetch($button, type highlight active background);
    }

    &:hover,
    &:active,
    &:visited,
    &:focus {
      color: map-fetch($color, text white);
    }
  }

  &--danger {
    background-color: map-fetch($button, type danger background);
    color: map-fetch($color, text white);

    &:hover {
      background: map-fetch($button, type danger hover background);
    }

    &:active {
      background: map-fetch($button, type danger active background);
    }

    &:hover,
    &:active,
    &:visited,
    &:focus {
      color: map-fetch($color, text white);
    }
  }

Button Sizes

Button size variations.

  &--small {
    font-size: map-fetch($button, size small font-size);
    font-weight: map-fetch($button, size small font-weight);
    border-radius: map-fetch($button, size small border-radius);
    height: map-fetch($button, size small height);
    padding: map-fetch($button, size small padding);
  }

  &--full {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    text-align: center;
  }

With Icon

Some extra help is needed to get the icon and text to line up.

  &--icon {
    line-height: 1.4;

    .lego-icon {
      vertical-align: sub;
    }
  }

Disabled State

Used either an attribute or a class, depending on the use case.

  &[disabled],
  &[disabled]:hover,
  &[disabled]:active,
  &[disabled]:focus,
  &--disabled,
  &--disabled:hover,
  &--disabled:active,
  &--disabled:focus {
    cursor: default;
    box-shadow: none;
    background-color: #F8F8F8;
    color: map-fetch($color, text medium);
    border-color: map-fetch($color, ui base);
    opacity: map-fetch($opacity, medium);

    + .lego-button--brand {
      background-color: map-fetch($button, type brand background);
      color: map-fetch($color, text white);
    }

    + .lego-button--highlight {
      background-color: map-fetch($button, type highlight background);
      color: map-fetch($color, text white);
    }

    + .lego-button--danger {
      background-color: map-fetch($button, type danger background);
      color: map-fetch($color, text white);
    }
  }
}

Button Group

For buttons that are flush against each other. Also possible to include an text input.

Button Group

<div class="lego-button-group">
  <button class="lego-button">Button</button>
  <button class="lego-button">Button</button>
  <button class="lego-button">Button</button>
</div>

Button Group with Active

<div class="lego-button-group">
  <button class="lego-button">Button</button>
  <button class="lego-button lego-button--brand">Button</button>
  <button class="lego-button">Button</button>
</div>

Button Group with Text Input

<div class="lego-button-group">
  <button class="lego-button">Select <span class="lego-arrow-inline--down"></span></button>
  <input type="text" class="lego-text-input">
</div>

Button Group with Text Input

<div class="lego-button-group">
  <input type="text" class="lego-text-input">
  <button class="lego-button">Button</button>
</div>

%lego-button-group,
.lego-button-group {
  @include display(flex);

  > * {
    margin-left: 0;
    border-radius: 0;

    &:not(:first-child) {
      margin-left: -1px;
    }

    &:hover,
    &:focus {
      position: relative;
    }

    &:first-child {
      border-radius: map-get($border-radius, base) 0 0 map-get($border-radius, base);
    }

    &:last-child {
      border-radius: 0 map-get($border-radius, base) map-get($border-radius, base) 0;
    }
  }

  > .lego-button--brand {
    position: relative;
  }

  > .lego-text-input {
    @include flex(1);
    width: auto;
  }

If inside a button group bring the colored buttons to the top so that the borders are intact.

  .lego-button--highlight,
  .lego-button--danger,
  .lego-button--brand {
    z-index: 1;
  }
}

Button Row

For buttons that align left or right with space between them.

%lego-button-row,
.lego-button-row {

  &--left {

    .lego-button {
      margin-right: spacer(1);

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

  &--right {
    text-align: right;

    .lego-button {
      margin-left: spacer(1);

      &:first-child {
        margin-left: 0;
      }
    }
  }

  &--center {
    text-align: center;

    .lego-button {
      margin-left: spacer(0.5);
      margin-right: spacer(0.5);
    }
  }
}

Dialog

Dialog boxes and overlays with three width options:

• .lego-dialog is the default
• .lego-dialog--wide
• .lego-dialog--narrow

Example

For purposes of this documentation the following example has its width set to auto. Real world usage will always have widths.

<div class="lego-dialog">
  <div class="lego-dialog__header">
    <div class="lego-dialog__title">Dialog Title</div>
  </div>
  <div class="lego-dialog__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ab quaerat dolor autem pariatur iure nisi debitis, dolores possimus ut, optio magni ratione incidunt cumque, inventore alias? Fugit, iusto eum.</p>
  </div>
  <div class="lego-dialog__footer lego-button-row--right">
    <button class="lego-button">Cancel</button>
    <button class="lego-button lego-button--brand">Done</button>
  </div>
  <div class="lego-dialog__close">
    <svg class="lego-icon">
      <use xlink:href="#close"></use>
    </svg>
  </div>
</div>

.lego-dialog {
  position: relative;
  box-shadow: 0 0 map-fetch($shadow, big);
  width: map-fetch($dialog, width base);

  &--narrow {
    width: map-fetch($dialog, width narrow);
  }

  &--wide {
    width: map-fetch($dialog, width wide);
  }

  &__header,
  &__body,
  &__footer {
    padding: spacer(2);
  }

  &__header,
  &__footer {
    background-color: map-fetch($color, background faint);
  }

  &__header {
    border-bottom: 1px solid map-fetch($color, ui light);
  }

  &__footer {
    border-top: 1px solid map-fetch($color, ui light);
  }

  &__title {
    font-size: map-fetch($font, size beta);
    color: map-fetch($color, text brand-dark);
    line-height: 1;
  }

  &__body {
    @extend %kill-last-child-margin;
    background: map-fetch($color, background white);
    padding-bottom: spacer(3);
  }

  &__close {
    @include flex-center;
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    background: map-fetch($color, background black);
    color: map-fetch($color, ui white);
    border: 2px solid map-fetch($color, ui white);
    box-shadow: 0 0 map-fetch($shadow, big);
    z-index: 1; // This is needed to bring the close icon above the dialog background.
  }
}

Disclose

Similar to an accordion but any number of items can be opened closed independently.

<div class="lego-disclose__item" v-disclose>
  <a href="#" class="lego-disclose__link">
    <span class="lego-disclose__symbol"></span>
    Title of Disclosure
  </a>
  <div class="lego-disclose__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi id voluptas vitae eius expedita alias iste deserunt re     ndis earum voluptatibus quae, numquam dolorum perspiciatis accusantium corporis, beatae maxime quasi. Tempora.
  </div>
</div>
<div class="lego-disclose__item" v-disclose>
  <a href="#" class="lego-disclose__link link--dark">
    <span class="lego-disclose__symbol"></span>
    Title of Disclosure with Dark Link Text
  </a>
  <div class="lego-disclose__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi id voluptas vitae eius expedita alias iste deserunt re     ndis earum voluptatibus quae, numquam dolorum perspiciatis accusantium corporis, beatae maxime quasi. Tempora.
  </div>
</div>

.lego-disclose {
  @extend %kill-last-child-margin;

  &__link {
    display: block;
  }

  &__symbol {
    @include transition(transform map-fetch($transition-duration, base));
    width: spacer(1);
    display: inline-block;
    pointer-events: none; // This makes clicking the arrow icon still open the disclose object.

    &::before {
      line-height: 1;
      font-size: map-fetch($font, size micro);
      content: '\25B6';
    }
  }

By default item is closed.

  &__content {
    display: none;
  }

  &__item {
    margin-bottom: spacer(1);

    &--active {

      > .lego-disclose__content {
        display: block;
      }

      > .lego-disclose__link > .lego-disclose__symbol {
        @include transform(rotate(90deg));
      }
    }
  }
}

Dropdown

A list of links that drops down from a trigger.

Dropdowns are used by default for navigation elements, interactive, functional lists that show up below the trigger. This can include internal anchor links or wrapping links for the whole item.

In rare cases popovers may be used.

Dropdown Default

<div class="lego-dropdown-group" v-dropdown>
  <button class="lego-button" data-toggle-dropdown>
    Dropdown <span class="lego-arrow-inline--down"></span>
  </button>
  <ul class="lego-dropdown">
    <li class="lego-dropdown__item">
      <a href="#" class="lego-dropdown__block-link">Manage Collaborators</a>
      <a href="#" class="lego-dropdown__block-link">Manage This Thing</a>
    </li>
    <li class="lego-dropdown__item">
      <a href="#" class="lego-dropdown__block-link">Experiment Change History</a>
    </li>
  </ul>
</div>

Dropdown Right

Ignore the outer div in this example. It's used only to move the button to the right.

<div class="text--right">
  <div class="lego-dropdown-group" v-dropdown>
    <button class="lego-button" data-toggle-dropdown>
      Dropdown <span class="lego-arrow-inline--down"></span>
    </button>
    <ul class="lego-dropdown lego-dropdown--right">
      <li class="lego-dropdown__item">
        <a href="#" class="lego-dropdown__block-link">Manage Collaborators</a>
        <a href="#" class="lego-dropdown__block-link">Manage This Thing</a>
      </li>
      <li class="lego-dropdown__item">
        <a href="#" class="lego-dropdown__block-link">Experiment Change History</a>
      </li>
    </ul>
  </div>
</div>

Dropdown with non-links

<div class="lego-dropdown-group" v-dropdown>
  <button class="lego-button" data-toggle-dropdown>
    Dropdown <span class="lego-arrow-inline--down"></span>
  </button>
  <ul class="lego-dropdown">
    <li class="lego-dropdown__item">
      <a href="#">Manage Collaborators</a> and some text
    </li>
    <li class="lego-dropdown__item">
      <a href="#" class="lego-dropdown__block-link">Experiment Change History</a>
      <a href="#" class="lego-dropdown__block-link">Another Link</a>
    </li>
  </ul>
</div>

Dropdown with Filter

<div class="lego-dropdown-group" v-dropdown>
  <button class="lego-button" data-toggle-dropdown>
    Dropdown <span class="lego-arrow-inline--down"></span>
  </button>
  <ul class="lego-dropdown">
    <li class="lego-dropdown__item">
      <form class="soft-half--ends">
          <input type="text" class="lego-text-input lego-text-input--search">
      </form>
    </li>
    <li class="lego-dropdown__item">
      <a href="#" class="lego-dropdown__block-link">Experiment Change History</a>
    </li>
  </ul>
</div>

Dropdown inside Input

<div class="lego-dropdown-group" v-dropdown>
  <input type="text" class="lego-text-input" data-toggle-dropdown />
  <ul class="lego-dropdown">
    <li class="lego-dropdown__item">
      <a href="#" class="lego-dropdown__block-link">Item One</a>
      <a href="#" class="lego-dropdown__block-link">Item Two</a>
    </li>
  </ul>
</div>

.lego-dropdown-group {
  font-size: map-fetch($font, size base);
  display: inline-block;
  position: relative;
  vertical-align: top;

  &.shown {
    .lego-dropdown {
      visibility: visible;
    }
  }
}

%lego-dropdown,
.lego-dropdown {
  @extend %lego-block-list-group;
  background: map-fetch($color, background white);
  box-shadow: 0 2px map-fetch($shadow, light);
  min-width: 100%;
  position: absolute;
  top: 100%;
  left: auto;
  z-index: 1;
  margin-top: 2px;
  text-align: left;
  visibility: hidden;

  &__item {
    white-space: nowrap;
    color: map-fetch($color, text base);

    &--active {
      background: map-fetch($color, background faint);
    }
  }

  &__block-link {
    @extend %lego-block-list__link;
  }

  &--right {
    right: 0;
    left: auto;
  }
}

Help

Buttons and icons when help is required.

This text could use some help. <span class="lego-help-dot" v-poptip data-dir="top-center" data-content="This should be short text, no more than a sentence."></span>

.lego-help-dot {
  background: map-fetch($color, background muted);
  color: map-fetch($color, text white);
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  font-size: 10px;

  &::after {
    content: '?';
  }
}

Icons

SVG and activity icons. A few things to note about SVGs:

• Use these class options on your SVG. Only size them in your CSS if absolutely necessary.
• The color of the SVG will inherit the parent's color.
• Note: To use this icons make sure that the SVG source sprite is placed immediately after the <body>, like so:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="collapse" viewBox="0 0 14 15">
      <title>collapse</title>
      <path d="M0 0h14v3H0zM5 15v-3H1.97L7 7l5.028 5H9v3h5V5H0v10z"/>
    </symbol>
    ... additional symbol entries here...
</svg>

Activity Icons

<ul class="lego-block-list-group">
  <li>
    <div class="lego-media">
      <span class="icon-status--active lego-media__img flush--top"></span>
      <div class="lego-media__body">
        <p>This is the active item.</p>
      </div>
    </div>
  </li>
  <li>
    <div class="lego-media">
      <span class="icon-status--good-news lego-media__img flush--top"></span>
      <div class="lego-media__body">
        <p>This is good.</p>
      </div>
    </div>
  </li>
  <li>
    <div class="lego-media">
      <span class="icon-status--bad-news lego-media__img flush--top"></span>
      <div class="lego-media__body">
        <p>This is probably not good.</p>
      </div>
    </div>
  </li>
  <li>
    <div class="lego-media">
      <span class="icon-status--empty lego-media__img flush--top"></span>
      <div class="lego-media__body">
        <p>This is not active but holds the space if needed.</p>
      </div>
    </div>
  </li>
</ul>

SVG Icons

Click to copy.

icon examples are generated by javascript

.lego-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  fill: currentColor;

  &--small {
    width: 12px;
    height: 12px;
  }

  &--large {
    width: 32px;
    height: 32px;
  }

This is a vertical alignment fix when used to the right of .lego-icon.

  + [class^="lego-arrow-inline"] {
    vertical-align: super;
  }
}

Fix for icons inside buttons with text.

.lego-button + .lego-icon {
  vertical-align: middle;
}

Fix for icons inside tabs.

.lego-tabs-nav__item .lego-icon {
  vertical-align: sub;
}

Activity Icons

Used for showing the status item.

.icon-status {

  &--active,
  &--bad-news,
  &--good-news,
  &--empty {
    &::before {
      content: '';
      border-radius: map-fetch($border-radius, full);
      display: inline-block;
      width: 10px;
      height: 10px;
    }
  }

  &--active::before {
    background: map-fetch($color, ui brand);
  }

  &--bad-news::before {
    background: map-fetch($color, ui bad-news);
  }

  &--good-news::before {
    background: map-fetch($color, ui good-news);
  }
}

Pagination

This is a variatoin of the nav object.

<ol class="lego-nav lego-pagination">
  <li class="lego-pagination__first"><a href="#">First</a></li>
  <li class="lego-pagination__prev"><a href="#">Previous</a></li>
  <li><a href="/page/1">1</a></li>
  <li><a href="/page/2">2</a></li>
  <li class="lego-pagination__current"><a href="/page/3">3</a></li>
  <li><a href="/page/4">4</a></li>
  <li><a href="/page/5">5</a></li>
  <li class="lego-pagination__next"><a href="/page/next">Next</a></li>
  <li class="lego-pagination__last"><a href="/page/last">Last</a></li>
</ol>

.lego-pagination {
  @include justify-content(center);

  > li {
    padding: spacer(0.5);
  }

  &__first a::before {
    content: '\00AB' '\00A0';
  }

  &__last a::after {
    content: '\00A0' '\00BB';
  }

  &__current > a {
    color: map-fetch($color, text base);
  }
}

Popover

Information bubbles on hover.

Used when the text is too long or too complicated for a poptip. Can also be used for navigation menus when dropdowns cannot be used, for exammple, when the menu extends to the right or left of the trigger.

<ul class="lego-popover lego-popover--arrow-top-left">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-top-center">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-top-right">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-right-top">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-right-center">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-right-bottom">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-bottom-right">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-bottom-center">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-bottom-left">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-left-bottom">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-left-center">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

<ul class="lego-popover lego-popover--arrow-left-top">
  <li class="lego-popover__content">
    <div class="lego-popover__title">Title</div>
    <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
  </li>
</ul>

%lego-popover,
.lego-popover {
  @extend %lego-block-list-group;
  background: map-fetch($color, background white);
  max-width: map-fetch($popover, max-width);
  display: inline-block;
  box-shadow: 0 2px map-fetch($shadow, light);

  &__content {
    @extend %kill-last-child-margin;
  }

  &__title {
    font-weight: 500;
  }

Arrow options. 12 possible positions.

  &--arrow-top-left {
    @include arrow(top, left, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-top-center {
    @include arrow(top, center, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-top-right {
    @include arrow(top, right, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-right-top {
    @include arrow(right, top, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-right-center {
    @include arrow(right, center, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-right-bottom {
    @include arrow(right, bottom, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-bottom-right {
    @include arrow(bottom, right, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-bottom-center {
    @include arrow(bottom, center, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-bottom-left {
    @include arrow(bottom, left, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-left-bottom {
    @include arrow(left, bottom, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-left-center {
    @include arrow(left, center, map-fetch($color, ui white), map-fetch($color, ui base));
  }

  &--arrow-left-top {
    @include arrow(left, top, map-fetch($color, ui white), map-fetch($color, ui base));
  }
}

Poptip

Information bubbles on hover.

<button v-poptip data-dir="top-left" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

<button v-poptip data-dir="top-center" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

<button v-poptip data-dir="top-right" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

<button v-poptip data-dir="bottom-left" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

<button v-poptip data-dir="bottom-center" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

<button v-poptip data-dir="bottom-right" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

<button v-poptip data-dir="right" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

<button v-poptip data-dir="left" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

<button v-poptip data-dir="top" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

<button v-poptip data-dir="bottom" data-content="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

.lego-pop-tip {
  background: map-fetch($color, ui dark);
  color: map-fetch($color, text white);
  border-radius: map-fetch($border-radius, base);
  font-size: map-fetch($font, size micro);
  padding: spacer(0.5) spacer(1);
  max-width: map-fetch($pop-tip, max-width);
  display: inline-block;
  z-index: map-fetch($z-index, poptip);

Arrow options.

  &--arrow-top-center {
    @include arrow(top, center, map-fetch($color, ui dark));
  }

  &--arrow-top-left {
    @include arrow(top, left, map-fetch($color, ui dark));
  }

  &--arrow-top-right {
    @include arrow(top, right, map-fetch($color, ui dark));
  }

  &--arrow-bottom-center {
    @include arrow(bottom, center, map-fetch($color, ui dark));
  }

  &--arrow-bottom-left {
    @include arrow(bottom, left, map-fetch($color, ui dark));
  }

  &--arrow-bottom-right {
    @include arrow(bottom, right, map-fetch($color, ui dark));
  }

  &--arrow-left {
    @include arrow(left, center, map-fetch($color, ui dark));
  }

  &--arrow-right {
    @include arrow(right, center, map-fetch($color, ui dark));
  }
}

Progress

Creates a progress bar.

<div class="lego-progress push-double--bottom">
  <div class="lego-progress__bar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
<div class="lego-progress push-double--bottom">
  <div class="lego-progress__bar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">1%</div>
</div>
<div class="lego-progress push-double--bottom">
  <div class="lego-progress__bar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="lego-progress lego-progress--bad-news">
  <div class="lego-progress__bar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>

.lego-progress {
  background: map-fetch($color, background faint);
  height: map-fetch($progress-bar, height);
  border-radius: map-fetch($border-radius, base);
  box-shadow: inset 0 1px map-fetch($shadow, light);
  overflow: hidden;

  &--bad-news {
    .lego-progress__bar {
      background: map-fetch($color, ui bad-news);
    }
  }

  &__bar {
    @include transition(width map-fetch($transition-duration, base));
    @include display(flex);
    @include align-items(center);
    @include justify-content(center);
    line-height: 1;
    height: 100%;
    background: map-fetch($color, background brand);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    color: map-fetch($color, text white);
    font-size: map-fetch($font, size milli);
    min-width: map-fetch($progress-bar, bar min-width);
    max-width: 100%;

    &[aria-valuenow="0"] {
      background: transparent;
      box-shadow: none;
      color: map-fetch($color, text medium);
    }
  }
}

Search

A clear-able search box. Works with the clearable_search Vue directive.

<div class="lego-search" v-clearable-search clearevent="clearSearch">
  <input type="text" class="lego-text-input lego-text-input--search width-200" placeholder="Filter by Name"
    v-on="keyup: setStringFilter($event)"
    v-model="filters.string">
</div>

.lego-search {
  position: relative;

Using background-image here to avoid hacky CSS.

  .lego-text-input--search {
    padding-left: spacer(3);
    padding-right: spacer(3);
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGZpbGw9IiM4NDg0ODQiIGQ9Ik0zODQsMTkyQzM4NCw4NiwyOTgsMCwxOTIsMFMwLDg2LDAsMTkyczg2LDE5MiwxOTIsMTkyUzM4NCwyOTgsMzg0LDE5MnogTTE5MiwzMzYNCgkJYy03OS40LDAtMTQ0LTY0LjYtMTQ0LTE0NFMxMTIuNiw0OCwxOTIsNDhzMTQ0LDY0LjYsMTQ0LDE0NFMyNzEuNCwzMzYsMTkyLDMzNnoiLz4NCgk8cGF0aCBmaWxsPSIjODQ4NDg0IiBkPSJNNDk3LjksNDMwLjFMMzgwLjUsMzEyLjZjLTE3LjUsMjcuMi00MC43LDUwLjQtNjcuOSw2Ny45bDExNy41LDExNy41YzE4LjgsMTguOCw0OS4yLDE4LjgsNjcuOSwwDQoJCUM1MTYuNyw0NzkuMiw1MTYuNyw0NDguOCw0OTcuOSw0MzAuMXoiLz4NCjwvZz4NCjwvc3ZnPg0K');
    background-repeat: no-repeat;
    background-position: left 8px center;
    background-size: 16px 16px;
  }

  .lego-icon {
    @include transform(translateY(-50%));
    position: absolute;
    top: 50%;
    right: spacer(1);
    cursor: pointer;
    display: none;
  }
}

.lego-search--active .lego-icon {
  display: block;
}

Spinner

Loading spinner. Target '.lego-spinner-wrap' to position as needed.

<div class="lego-spinner-wrap">
  <div class="lego-spinner"></div>
</div>
<div class="lego-spinner-wrap">
  <div class="lego-spinner lego-spinner--small"></div>
</div>
<div class="lego-spinner-wrap">
  <div class="lego-spinner lego-spinner--tiny"></div>
</div>

With Overlay

This gets inserted into an element and blocks user interaction. Requires a parent div with positioning (absolute or relative).

.lego-overlay {
  @include display(flex);
  @include justify-content(center);
  @include align-items(center);
  background: rgba(255, 255, 255, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  justify-content: center;
  align-items: center;
}

@include keyframes(lego-spin) {
  100% {
    @include transform(rotate(360deg));
  }
}

.lego-spinner {
  @include animation(lego-spin map-fetch($spinner, speed) infinite linear);
  width: map-fetch($spinner, size base);
  height: map-fetch($spinner, size base);
  border: map-fetch($spinner, border width base) solid map-fetch($color, background brand-light);
  display: inline-block;
  border-radius: 50%;
  position: relative;

  &::before {
    content: '';
    width: map-fetch($spinner, size base);
    height: map-fetch($spinner, size base);
    border-radius: 50%;
    display: block;
    position: absolute;
    left: -(map-fetch($spinner, border width base));
    top: -(map-fetch($spinner, border width base));
    border-width: map-fetch($spinner, border width base);
    border-style: solid;
    border-right-color: map-fetch($color, background brand-light);
    border-top-color: map-fetch($color, background brand-light);
    border-left-color: map-fetch($color, background brand);
    border-bottom-color: map-fetch($color, background brand-light);
  }

  &--small,
  &--small::before {
    width: map-fetch($spinner, size small);
    height: map-fetch($spinner, size small);
    border-width: map-fetch($spinner, border width small);
    left: -(map-fetch($spinner, border width small));
    top: -(map-fetch($spinner, border width small));
  }

  &--tiny,
  &--tiny::before {
    width: map-fetch($spinner, size tiny);
    height: map-fetch($spinner, size tiny);
    border-width: map-fetch($spinner, border width tiny);
    left: -(map-fetch($spinner, border width tiny));
    top: -(map-fetch($spinner, border width tiny));
  }
}

Steps

A type of progress bar showing steps through a flow. Use with a width helper class if needed so that it fits cleanly.

 <ul class="lego-steps width-9-10">
   <li class="lego-steps__item lego-steps__item--complete">
     <div class="lego-steps__dot"></div>
     <div class="lego-steps__label">Step One Label</div>
   </li>
   <li class="lego-steps__item lego-steps__item--complete">
     <div class="lego-steps__dot"></div>
     <div class="lego-steps__label">Step Two Label</div>
   </li>
   <li class="lego-steps__item lego-steps__item--active">
     <div class="lego-steps__dot"></div>
     <div class="lego-steps__label">Step Three Label</div>
   </li>
   <li class="lego-steps__item">
     <div class="lego-steps__dot"></div>
     <div class="lego-steps__label">Step Four Label</div>
   </li>
 </ul>

%lego-steps,
.lego-steps {
  @include display(flex);
  @include justify-content(center);
  margin-left: auto;
  margin-right: auto;

  &__dot {
    @include transform(translateX(-50%));
    @include transition(all map-fetch($transition-duration, base));
    position: absolute;
    width: 16px;
    height: 16px;
    top: -7px;
    left: 50%;
    border-radius: 50%;
    border: 3px solid map-fetch($color, ui base);
    background: map-fetch($color, ui white);
    z-index: 1;
  }

  &__label {
    text-align: center;
    font-weight: 400;
    color: map-fetch($color, text muted);
  }

  &__item {
    @include flex(1);
    padding-top: spacer(2);
    position: relative;

    &::before {
      content: '';
      height: 3px;
      background: map-fetch($color, ui base);
      width: 100%;
      position: absolute;
      top: 0;
      right: 50%;
    }

    &--active {
      &::before {
        background: map-fetch($color, ui brand);
      }

      .lego-steps__dot {
        background: map-fetch($color, ui brand);
        border-color: map-fetch($color, ui brand);
      }

      .lego-steps__label {
        color: map-fetch($color, text brand);
      }
    }

    &--complete {

      &::before {
        background: map-fetch($color, ui brand);
      }

      .lego-steps__dot {
        border-color: map-fetch($color, ui brand);
      }
    }

Prevents line showing up on step. &:first-child { &::before { display: none; } } }

}

Tabs

Creates a set of tabs.

<div class="lego-tabs" v-tabs="tabContainer">
  <ul class="lego-tabs-nav">
    <li class="lego-tabs-nav__item tab-active">Tab One</li>
    <li class="lego-tabs-nav__item">Tab Two</li>
    <li class="lego-tabs-nav__item">Tab Three</li>
  </ul>
</div>
<div id="tabContainer">
  <div class="lego-tabs-pane tab-active">Tab Content One</div>
  <div class="lego-tabs-pane">Tab Content Two</div>
  <div class="lego-tabs-pane">Tab Content Three</div>
</div>

<div class="lego-tabs lego-tabs--small" v-tabs="smallTabContainer">
  <ul class="lego-tabs-nav">
    <li class="lego-tabs-nav__item tab-active">Tab One</li>
    <li class="lego-tabs-nav__item">Tab Two</li>
    <li class="lego-tabs-nav__item">Tab Three</li>
  </ul>
</div>
<div id="smallTabContainer">
  <div class="lego-tabs-pane tab-active">Tab Content One</div>
  <div class="lego-tabs-pane">Tab Content Two</div>
  <div class="lego-tabs-pane">Tab Content Three</div>
</div>

<div class="lego-tabs lego-tabs--small" v-tabs="tabs-container">
  <ul class="lego-tabs-nav">
    <li class="lego-tabs-nav__item tab-active">Tab One</li>
    <li class="lego-tabs-nav__item">Tab Two</li>
    <li class="lego-tabs-nav__item">Tab Three</li>
  </ul>
</div>
<div id="tabs-container" class="lego-tabs-container">
  <div class="lego-tabs-pane tab-active">Tab Content One</div>
  <div class="lego-tabs-pane">Tab Content Two</div>
  <div class="lego-tabs-pane">Tab Content Three</div>
</div>

<div class="lego-tabs lego-tabs--small lego-tabs--center" v-tabs="centerTabContainer">
  <ul class="lego-tabs-nav">
    <li class="lego-tabs-nav__item tab-active">Tab One</li>
    <li class="lego-tabs-nav__item">Tab Two</li>
    <li class="lego-tabs-nav__item">Tab Three</li>
  </ul>
</div>
<div id="centerTabContainer">
  <div class="lego-tabs-pane tab-active">Tab Content One</div>
  <div class="lego-tabs-pane">Tab Content Two</div>
  <div class="lego-tabs-pane">Tab Content Three</div>
</div>

<div class="lego-tabs lego-tabs--small lego-tabs--sub" v-tabs="subTabContainer">
  <ul class="lego-tabs-nav">
    <li class="lego-tabs-nav__item tab-active">Tab One</li>
    <li class="lego-tabs-nav__item">Tab Two</li>
    <li class="lego-tabs-nav__item">Tab Three</li>
  </ul>
</div>
<div id="subTabContainer">
  <div class="lego-tabs-pane tab-active">Tab Content One</div>
  <div class="lego-tabs-pane">Tab Content Two</div>
  <div class="lego-tabs-pane">Tab Content Three</div>
</div>

Tabs with relationship defined by data attribute

<div class="lego-tabs" v-tabs="dataTabContainer">
  <ul class="lego-tabs-nav">
    <li class="lego-tabs-nav__item tab-active" data-tab-related="one">Tab One</li>
    <li class="lego-tabs-nav__item" data-tab-related="two">Tab Two</li>
    <li class="lego-tabs-nav__item" data-tab-related="three">Tab Three</li>
  </ul>
</div>
<div id="dataTabContainer">
  <div class="lego-tabs-pane tab-active" data-tab-related="one">Tab Content One</div>
  <div class="lego-tabs-pane" data-tab-related="two">Tab Content Two</div>
  <div class="lego-tabs-pane" data-tab-related="three">Tab Content Three</div>
</div>

.lego-tabs-nav {
  @include display(flex);
  border-bottom: 3px solid map-fetch($color, ui base);

  &__item {
    position: relative;
    text-align: center;
    padding: spacer(1) spacer(1.5);
    border: 1px solid map-fetch($color, ui base);
    border-right: 0;
    border-bottom: 0;
    color: map-fetch($color, text medium);
    font-weight: 400;
    background-color: map-fetch($color, background faint);
    cursor: pointer;

    &:first-child {
      border-radius: map-fetch($border-radius, big) 0 0;
    }

    &:last-child {
      border-radius: 0 map-fetch($border-radius, big) 0 0;
      border-right: 1px solid map-fetch($color, ui base);
    }

    &:hover,
    &.tab-active {
      color: map-fetch($color, text brand);
    }

    &.tab-active {
      background-color: map-fetch($color, background white);
      cursor: default;

      &::after { // Creates the white bar under the active tab.
        content: '';
        display: block;
        height: 3px;
        background: map-fetch($color, background white);
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
      }
    }
  }
}

.lego-tabs--small {

  .lego-tabs-nav {
    border-width: 1px;
  }

  .lego-tabs-nav__item {
    background-color: transparent;
    padding: spacer(0.5) spacer(1);
    font-size: map-fetch($font, size milli);
  }
}

.lego-tabs--center {
  .lego-tabs-nav {
    @include justify-content(center);
  }

  .lego-tabs-nav__item:first-child {
    margin-left: spacer(0.5);
  }
}

.lego-tabs--sub {
  .lego-tabs-nav__item {
    border: 0;

    &.tab-active::after {
      height: 2px;
      background: map-fetch($color, background brand);
      bottom: -1px;
    }

    &.tab-disabled {
      @extend %link--disabled;
      cursor: default;
    }
  }
}

.lego-tabs-pane {
  display: none;

  &.tab-active {
    display: block;
  }
}

.lego-tabs-container {
  margin-bottom: spacer(2);

  .lego-tabs-pane {
    padding: spacer(2);
    border: 1px solid map-fetch($color, ui base);
    border-top: 0;
  }
}

Tags

Hashtags used to help identify experiments.

.lego-tag {
  color: map-fetch($color, text muted);
}

Background Trumps

Adding background colors via classes.

.background--white {
  background-color: map-fetch($color, background white) !important;
}

.background--faint {
  background-color: map-fetch($color, background faint) !important;
}

.background--light {
  background-color: map-fetch($color, background light) !important;
}

.background--muted {
  background-color: map-fetch($color, background muted) !important;
}

.background--medium {
  background-color: map-fetch($color, background medium) !important;
}

.background--brand {
  background-color: map-fetch($color, background brand) !important;
}

.background--brand-dark {
  background-color: map-fetch($color, background brand-dark) !important;
}

.background--warning {
  background-color: map-fetch($color, background warning) !important;
}

.background--bad-news {
  background-color: map-fetch($color, background bad-news) !important;
}

.background--good-news {
  background-color: map-fetch($color, background good-news) !important;
}

Layout Trumps

Floats

Add/remove floats.

<div class="float--right">content</div>

.float--right {
  float: right !important;
}

.float--left {
  float: left !important;
}

.float--none {
  float: none !important;
}

Anchor

.anchor--middle {
  margin-right: auto !important;
  margin-left: auto !important;
}

Flexbox anchors, moves element to right or left.

.anchor--right {
  margin-left: auto !important;
}

.anchor--left {
  margin-right: auto !important;
}

.anchor--top {
  margin-bottom: auto !important;
}

.anchor--bottom {
  margin-top: auto !important;
}

Text Alignment

<div class="text--right">content</div>

.text--left {
  text-align: left !important;
}

.text--center {
  text-align: center !important;
}

.text--right {
  text-align: right !important;
}

Display

<div class="display--inline-block">content</div>

.display--block {
  display: block !important;
}

.display--inline-block {
  display: inline-block !important;
}

.display--inline {
  display: inline !important;
}

.display--none {
  display: none !important;
}

Faded

Sets opacity to 0.5. Useful for a simulated disabled state.

<div class="faded push--bottom">This text is faded. As is the icon below.</div>
<svg class="lego-icon faded">
  <use xlink:href="#collaborators"></use>
</svg>

.faded {
  opacity: map-fetch($opacity, medium) !important;
}

Vertical Alignment for table cells.

<div class="vertical-align--bottom">content</div>

.vertical-align--top {
  vertical-align: top !important;
}

.vertical-align--middle {
  vertical-align: middle !important;
}

.vertical-align--bottom {
  vertical-align: bottom !important;
}

Remove Borders

Remove borders from all or just one side.

.no-border {
  border: 0 !important;
}

.no-border--top {
  border-top: none !important;
}

.no-border--right {
  border-right: none !important;
}

.no-border--bottom {
  border-bottom: none !important;
}

.no-border--left {
  border-left: none !important;
}

Max Scroll

Set a max-height to provide scrolling.

.max-scroll--small {
  max-height: 100px !important;
  overflow-y: auto !important;
}

.max-scroll--medium {
  max-height: 200px !important;
  overflow-y: auto !important;
}

.max-scroll--large {
  max-height: 300px !important;
  overflow-y: auto !important;
}

Max Width

Set a max-width for content.

.max-width--large {
  max-width: 800px !important;
}

Cursors

Helpers for cursors.

.cursor--default {
  cursor: default !important;
}

.cursor--pointer {
  cursor: pointer !important;
}

.cursor--text {
  cursor: text !important;
}

Text Area No Resize

Prevent resizing of textarea. Use only if absolutely necessary.

.no-resize {
  resize: none !important;
}

Position

Change the positioning of element.

.position--relative {
  position: relative !important;
}

.position--absolute {
  position: absolute !important;
}

.position--fixed {
  position: fixed !important;
}

Visibility

Change the positioning of element.

.visibility--hidden {
  visibility: hidden !important;
}

Prevent User Selection

Text inside element will not be selectable by the user.

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

Margin Trumps

Add Margins

Push elements in any direction.

<div class="push--top">content</div>

.push {
  margin: spacer(1) !important;
}

.push--top {
  margin-top: spacer(1) !important;
}

.push--right {
  margin-right: spacer(1) !important;
}

.push--bottom {
  margin-bottom: spacer(1) !important;
}

.push--left {
  margin-left: spacer(1) !important;
}

.push--ends {
  margin-top: spacer(1) !important;
  margin-bottom: spacer(1) !important;
}

.push--sides {
  margin-right: spacer(1) !important;
  margin-left: spacer(1) !important;
}

.push-half {
  margin: spacer(0.5) !important;
}

.push-half--top {
  margin-top: spacer(0.5) !important;
}

.push-half--right {
  margin-right: spacer(0.5) !important;
}

.push-half--bottom {
  margin-bottom: spacer(0.5) !important;
}

.push-half--left {
  margin-left: spacer(0.5) !important;
}

.push-half--ends {
  margin-top: spacer(0.5) !important;
  margin-bottom: spacer(0.5) !important;
}

.push-half--sides {
  margin-right: spacer(0.5) !important;
  margin-left: spacer(0.5) !important;
}

.push-double {
  margin: spacer(2) !important;
}

.push-double--top {
  margin-top: spacer(2) !important;
}

.push-double--right {
  margin-right: spacer(2) !important;
}

.push-double--bottom {
  margin-bottom: spacer(2) !important;
}

.push-double--left {
  margin-left: spacer(2) !important;
}

.push-double--ends {
  margin-top: spacer(2) !important;
  margin-bottom: spacer(2) !important;
}

.push-double--sides {
  margin-right: spacer(2) !important;
  margin-left: spacer(2) !important;
}

.push-triple {
  margin: spacer(3) !important;
}

.push-triple--top {
  margin-top: spacer(3) !important;
}

.push-triple--right {
  margin-right: spacer(3) !important;
}

.push-triple--bottom {
  margin-bottom: spacer(3) !important;
}

.push-triple--left {
  margin-left: spacer(3) !important;
}

.push-triple--ends {
  margin-top: spacer(3) !important;
  margin-bottom: spacer(3) !important;
}

.push-triple--sides {
  margin-right: spacer(3) !important;
  margin-left: spacer(3) !important;
}

.push-quad {
  margin: spacer(4) !important;
}

.push-quad--top {
  margin-top: spacer(4) !important;
}

.push-quad--right {
  margin-right: spacer(4) !important;
}

.push-quad--bottom {
  margin-bottom: spacer(4) !important;
}

.push-quad--left {
  margin-left: spacer(4) !important;
}

.push-quad--ends {
  margin-top: spacer(4) !important;
  margin-bottom: spacer(4) !important;
}

.push-quad--sides {
  margin-right: spacer(4) !important;
  margin-left: spacer(4) !important;
}

Zero Margins

<div class="flush--top">content</div>

.flush {
  margin: 0 !important;
}

.flush--top {
  margin-top: 0 !important;
}

.flush--right {
  margin-right: 0 !important;
}

.flush--bottom {
  margin-bottom: 0 !important;
}

.flush--left {
  margin-left: 0 !important;
}

.flush--ends {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.flush--sides {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

Last Item Margin

Per http://css-tricks.com/spacing-the-bottom-of-modules/ this removes the margin from the last child that would otherwise create too much space inside a element with bottom padding.

Given the following HTML the second paragraph would ordinarily have a default bottom margin.

<div class="foo">
  <p>This is a paragraph with default bottom margin.</p>
  <p>This is a paragraph with a killed bottom margin.</p>
</div>

But with the %kill-last-child-margin extended to it that margin will go away.

.foo {
  @extend %kill-last-child-margin;
}

%kill-last-child-margin {
  > *:last-child,
  > *:last-child > *:last-child,
  > *:last-child > *:last-child > *:last-child {
    margin-bottom: 0;
  }
}

Padding Trumps

Add Paddings

Pad elements in any direction.

<div class="push--soft">content</div>

.soft {
  padding: spacer(1) !important;
}

.soft--top {
  padding-top: spacer(1) !important;
}

.soft--right {
  padding-right: spacer(1) !important;
}

.soft--bottom {
  padding-bottom: spacer(1) !important;
}

.soft--left {
  padding-left: spacer(1) !important;
}

.soft--ends {
  padding-top: spacer(1) !important;
  padding-bottom: spacer(1) !important;
}

.soft--sides {
  padding-right: spacer(1) !important;
  padding-left: spacer(1) !important;
}

.soft-half {
  padding: spacer(0.5) !important;
}

.soft-half--top {
  padding-top: spacer(0.5) !important;
}

.soft-half--right {
  padding-right: spacer(0.5) !important;
}

.soft-half--bottom {
  padding-bottom: spacer(0.5) !important;
}

.soft-half--left {
  padding-left: spacer(0.5) !important;
}

.soft-half--ends {
  padding-top: spacer(0.5) !important;
  padding-bottom: spacer(0.5) !important;
}

.soft-half--sides {
  padding-right: spacer(0.5) !important;
  padding-left: spacer(0.5) !important;
}

.soft-one-and-half--sides {
  padding-right: spacer(1.5) !important;
  padding-left: spacer(1.5) !important;
}

.soft-double {
  padding: spacer(2) !important;
}

.soft-double--top {
  padding-top: spacer(2) !important;
}

.soft-double--right {
  padding-right: spacer(2) !important;
}

.soft-double--bottom {
  padding-bottom: spacer(2) !important;
}

.soft-double--left {
  padding-left: spacer(2) !important;
}

.soft-double--ends {
  padding-top: spacer(2) !important;
  padding-bottom: spacer(2) !important;
}

.soft-double--sides {
  padding-right: spacer(2) !important;
  padding-left: spacer(2) !important;
}

.soft-triple {
  padding: spacer(3) !important;
}

.soft-triple--top {
  padding-top: spacer(3) !important;
}

.soft-triple--right {
  padding-right: spacer(3) !important;
}

.soft-triple--bottom {
  padding-bottom: spacer(3) !important;
}

.soft-triple--left {
  padding-left: spacer(3) !important;
}

.soft-triple--ends {
  padding-top: spacer(3) !important;
  padding-bottom: spacer(3) !important;
}

.soft-triple--sides {
  padding-right: spacer(3) !important;
  padding-left: spacer(3) !important;
}

.soft-quad {
  padding: spacer(4) !important;
}

.soft-quad--top {
  padding-top: spacer(4) !important;
}

.soft-quad--right {
  padding-right: spacer(4) !important;
}

.soft-quad--bottom {
  padding-bottom: spacer(4) !important;
}

.soft-quad--left {
  padding-left: spacer(4) !important;
}

.soft-quad--ends {
  padding-top: spacer(4) !important;
  padding-bottom: spacer(4) !important;
}

.soft-quad--sides {
  padding-right: spacer(4) !important;
  padding-left: spacer(4) !important;
}

Zero Paddings

<div class="hard--top">content</div>

.hard {
  padding: 0 !important;
}

.hard--top {
  padding-top: 0 !important;
}

.hard--right {
  padding-right: 0 !important;
}

.hard--bottom {
  padding-bottom: 0 !important;
}

.hard--left {
  padding-left: 0 !important;
}

.hard--ends {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hard--sides {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

Type Trumps

Font Weights

<div class="weight--light">This is light text.</div>

.weight--light {
  font-weight: 300 !important;
}

.weight--normal {
  font-weight: 400 !important;
}

.weight--bold {
  font-weight: 500 !important;
}

Font Style

<div class="style--italic">This is italic text.</div>

.style--italic {
  font-style: italic !important;
}

.style--normal {
  font-style: normal !important;
}

Help Cursor

Add a help cursor to any element that gives the user extra information on :hover.

<div class="informative">Hover over me for a help cursor.</div>

.informative {
  cursor: help !important;
}

Underline

Adds text-decoration: underline to text.

<div>You can <span class="underline">underline</span> words.</div>

.underline {
  text-decoration: underline !important;
}

Adds text-decoration: line-through;.

<div>You can <span class="strike">strike</span> words.</div>

.strike {
  text-decoration: line-through !important;
}

Font Colors

Mute text or reverse for dark backgrounds.

<div class="muted">This is a muted color. Can be applied to anything.</div>

.reverse {
  color: map-fetch($color, text white) !important;
}

.muted {
  color: map-fetch($color, text muted) !important;
}

.faint {
  color: map-fetch($color, text faint) !important;
}

Proceed (Align Right)

Align items to the right where they imply progression/movement forward, e.g.:

<div class="proceed"><a href="#">Read more...</a></div>

.proceed {
  text-align: right !important;
}

Ellipsis

Truncates item to a single line, adding ellipsis at the end.

<div class="truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas voluptatibus aliquam pariatur consequuntur, dicta reiciendis numquam vero.</div>

%truncate,
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Right-Angle Quote

Add a right-angled quote to links that imply movement, e.g.:

<a href=# class="go">Read more</a>

.go::after {
  content: '\00A0' '\00BB' !important;
}

Uppercase

Apply capital case to an element.

<a href=# class="caps">Read more</a>

.caps {
  text-transform: uppercase !important;
}

Break Word & No Wrap

Break or don't break long strings.

<a href=# class="force-break">alongunbrokenstringthatgoesonalongunbrokenstringthatgoesonalongunbrokenstringthatgoesonalongunbrokenstringthatgoeson</a>

.force-break {
  word-wrap: break-word !important;
}

.nowrap {
  white-space: nowrap !important;
}

Text

Adjust block and inline.

<a href="#" class="text--block">block link</a>

.text--block {
  display: block !important;
}

.text--inline {
  display: inline !important;
}

Line Height

For adjusting line-heights.

.line--tight {
  line-height: map-fetch($font, line-height tight) !important;
}

.line--loose {
  line-height: map-fetch($font, line-height loose) !important;
}

.line--1 {
  line-height: 1 !important;
}

Text wrapping & breaking.

.word-break {
  word-break: break-all !important;
}

Text Color

Use for both text and on icons.

<p href="#" class="color--base">This is base color text</p>
<p href="#" class="color--brand">This is brand color text</p>
<p href="#" class="color--good-news">This is good news text</p>
<p href="#" class="color--warning">This is warning text</p>
<p href="#" class="color--bad-news">This is bad news text</p>

%color--base,
.color--base {
  color: map-fetch($color, text base) !important;
}

%color--brand,
.color--brand {
  color: map-fetch($color, text brand) !important;
}

%color--good-news,
.color--good-news {
  color: map-fetch($color, text good-news) !important;
}

%color--warning,
.color--warning {
  color: map-fetch($color, text warning) !important;
}

%color--bad-news,
.color--bad-news {
  color: map-fetch($color, text bad-news) !important;
}

Sizing Trumps

With Percentages

Used most frequently in grids or tables for flexible columns.

Examples

<div class="lego-grid">
  <div class="lego-grid__cell width-3-5">
    <div class="doc-placeholder">3/5</div>
  </div>
  <div class="lego-grid__cell width-1-5">
    <div class="doc-placeholder">1/5</div>
  </div>
  <div class="lego-grid__cell width-1-5">
    <div class="doc-placeholder">1/5</div>
  </div>
</div>

Whole

<div class="width-1"><div class="doc-placeholder"></div></div>

%width-1,
.width-1 {
  width: 100% !important;
}

Halves

<div class="width-1-2"><div class="doc-placeholder"></div></div>

%width-1-2,
.width-1-2 {
  width: 50% !important;
}

Thirds

<div class="width-1-3"><div class="doc-placeholder"></div></div>

%width-1-3,
.width-1-3 {
  width: 33.333% !important;
}

%width-2-3,
.width-2-3 {
  width: 66.666% !important;
}

Fourths

<div class="width-1-4"><div class="doc-placeholder"></div></div>

%width-1-4,
.width-1-4 {
  width: 25% !important;
}

.width-2-4 {
  @extend %width-1-2;
}

%width-3-4,
.width-3-4 {
  width: 75% !important;
}

Fifths

<div class="width-1-5"><div class="doc-placeholder"></div></div>

%width-1-5,
.width-1-5 {
  width: 20% !important;
}

%width-2-5,
.width-2-5 {
  width: 40% !important;
}

%width-3-5,
.width-3-5 {
  width: 60% !important;
}

%width-4-5,
.width-4-5 {
  width: 80% !important;
}

Sixths

<div class="width-1-6"><div class="doc-placeholder"></div></div>

%width-1-6,
.width-1-6 {
  width: 16.666% !important;
}

.width-2-6 {
  @extend %width-1-3;
}

.width-3-6 {
  @extend %width-1-2;
}

.width-4-6 {
  @extend %width-2-3;
}

%width-5-6,
.width-5-6 {
  width: 83.333% !important;
}

Eighths

<div class="width-1-8"><div class="doc-placeholder"></div></div>

%width-1-8,
.width-1-8 {
  width: 12.5% !important;
}

.width-2-8 {
  @extend %width-1-4;
}

%width-3-8,
.width-3-8 {
  width: 37.5% !important;
}

.width-4-8 {
  @extend %width-1-2;
}

%width-5-8,
.width-5-8 {
  width: 62.5% !important;
}

.width-6-8 {
  @extend %width-3-4;
}

%width-7-8,
.width-7-8 {
  width: 87.5% !important;
}

Tenths

<div class="width-1-10"><div class="doc-placeholder"></div></div>

%width-1-10,
.width-1-10 {
  width: 10% !important;
}

.width-2-10 {
  @extend %width-1-5;
}

%width-3-10,
.width-3-10 {
  width: 30% !important;
}

.width-4-10 {
  @extend %width-2-5;
}

.width-5-10 {
  @extend %width-1-2;
}

.width-6-10 {
  @extend %width-3-5;
}

%width-7-10,
.width-7-10 {
  width: 70% !important;
}

.width-8-10 {
  @extend %width-4-5;
}

%width-9-10,
.width-9-10 {
  width: 90% !important;
}

Twelths

<div class="width-1-12"><div class="doc-placeholder"></div></div>

%width-1-12,
.width-1-12 {
  width: 8.333% !important;
}

.width-2-12 {
  @extend %width-1-6;
}

.width-3-12 {
  @extend %width-1-4;
}

.width-4-12 {
  @extend %width-1-3;
}

%width-5-12,
.width-5-12 {
  width: 41.666% !important;
}

.width-6-12 {
  @extend %width-1-2;
}

%width-7-12,
.width-7-12 {
  width: 58.333% !important;
}

.width-8-12 {
  @extend %width-2-3;
}

.width-9-12 {
  @extend %width-3-4;
}

.width-ten-12 {
  @extend %width-5-6;
}

%width-11-12,
.width-11-12 {
  width: 91.666% !important;
}

IE10: The -ms-flex-preferred-size values are to overcome any flex:... values the element may have. Otherwise the width collapses in IE.

.width-50 {
  width: 50px !important;
  -ms-flex-preferred-size: 50px !important;
}

.width-75 {
  width: 75px !important;
  -ms-flex-preferred-size: 50px !important;
}

.width-100 {
  width: 100px !important;
  -ms-flex-preferred-size: 100px !important;
}

.width-150 {
  width: 150px !important;
  -ms-flex-preferred-size: 150px !important;
}

.width-200 {
  width: 200px !important;
  -ms-flex-preferred-size: 200px !important;
}

.width-250 {
  width: 250px !important;
  -ms-flex-preferred-size: 250px !important;
}

.width-300 {
  width: 300px !important;
  -ms-flex-preferred-size: 300px !important;
}

Max Width Trumps

.max-width-50 {
  max-width: 50px !important;
}

.max-width-75 {
  max-width: 75px !important;
}

.max-width-100 {
  max-width: 100px !important;
}

.max-width-150 {
  max-width: 150px !important;
}

.max-width-200 {
  max-width: 200px !important;
}

.max-width-250 {
  max-width: 250px !important;
}

.max-width-300 {
  max-width: 300px !important;
}

Min Width Trumps

.min-width-50 {
  min-width: 50px !important;
}

.min-width-75 {
  min-width: 75px !important;
}

.min-width-100 {
  min-width: 100px !important;
}

.min-width-150 {
  min-width: 150px !important;
}

.min-width-200 {
  min-width: 200px !important;
}

.min-width-250 {
  min-width: 250px !important;
}

.min-width-300 {
  min-width: 300px !important;
}

Height Trumps

.height-50 {
  height: 50px !important;
}

.height-75 {
  height: 75px !important;
}

.height-100 {
  height: 100px !important;
}

.height-150 {
  height: 150px !important;
}

.height-200 {
  height: 200px !important;
}

.height-250 {
  height: 250px !important;
}

.height-300 {
  height: 300px !important;
}

Min Height Trumps

.min-height-50 {
  min-height: 50px !important;
}

.min-height-75 {
  min-height: 75px !important;
}

.min-height-100 {
  min-height: 100px !important;
}

.min-height-150 {
  min-height: 150px !important;
}

.min-height-200 {
  min-height: 200px !important;
}

.min-height-250 {
  min-height: 250px !important;
}

.min-height-300 {
  min-height: 300px !important;
}