This documentation is deprecated. See Storybook for the most complete React documentation.
./src/oui/oui.scss

OUI

Root file compiling only OUI CSS.


OUI functions and mixins

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

OUI variables

@import 'oui-variables';

OUI partials

@import 'oui-partials';

Trumps

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

@import 'partials/trumps/background';
@import 'partials/trumps/borders';
@import 'partials/trumps/layout';
@import 'partials/trumps/margin';
@import 'partials/trumps/padding';
@import 'partials/trumps/type';
@import 'partials/trumps/sizing--deprecated';
@import 'partials/trumps/sizing';
./src/oui/partials/elements/_flexbox.scss

Flexbox

Flexbox fully supported in Chrome, Firefox and Safari and mostly supported in IE 10. In 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.


Flexbox mixins

Usage Example:

Mixins can be used in SCSS files.
.foo {
  @include display(flex);
  @include flex(1);
}
@mixin display($value) {
  display: -webkit-#{$value};
  display: -ms-#{$value}box;
  display: $value;
}

@mixin flex($num) {
  -webkit-flex: $num;
  -ms-flex: $num;
  flex: $num;
  @if ($num != '0') { // http://stackoverflow.com/questions/29398259/css-flexbox-issue-in-firefox-v36-and-greater
    min-height: 0;
    min-width: 0;
  }
}

@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;
}

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

Flexbox classes

Usage Example:

Classes can be used directly in HTML.
item
<div class="flex flex--1">item</div>
.flex {
  @include display(flex);
}

.flex--row {
  @include flex-direction(row);
}

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

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

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

// Flex align

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

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

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

// Flex justified
// Note: `justfied-around: space-around;` does not work in IE 10

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

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

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

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

// Flex wrap

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

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

// Flex align-self
// Note: applies to immediate children of `display: flex;` parent.

.flex-self--start {
  @include align-self(flex-start);
}

.flex-self--center {
  @include align-self(center);
}

.flex-self--end {
  @include align-self(flex-end);
}
./src/oui/partials/base/_reset.scss

Reset

Using inuit.css reset.

// Box-sizing reset
// 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 {
  font-style: italic;
}

b,
strong {
  font-weight: 600;
}

// ## 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
}

// Removes extra padding/spacing inside buttons, fixing alignments.

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

// 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
}
./src/oui/partials/base/_main.scss

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);
}
./src/oui/partials/base/_blockquote.scss

Blockquotes

For quoting blocks of content.

Usage Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<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);
}
./src/oui/partials/base/_code.scss

Code

Monospace code snippets, both inline and multiline.

Usage Example:

Inline code
Text can have code snippets in a sentence.
Text can have <code class="code">code snippets</code> in a sentence.

Usage Example:

Multiline code

A multiline example of code.

<pre class="pre"><code><p>A multiline example
  of code.</p></code></pre>
code {
  font-family: map-fetch($font, family monospace);
}

.#{$namespace}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);
  }
}

.#{$namespace}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;
}
./src/oui/partials/base/_form.scss

Forms

Form variations.

Usage Example:

Title

Form information might go here if there was reason to do it.

  1. This is a form note.
<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">
          Single Input
          <span class="lego-label__optional">(Optional)</span>
        </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-16"></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-16"></use>
                  </svg>
                </button>
                <button class="lego-button">
                  <svg class="lego-icon">
                    <use xlink:href="#close-16"></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-16"></use>
                  </svg>
                </button>
                <button class="lego-button">
                  <svg class="lego-icon">
                    <use xlink:href="#close-16"></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>

Usage Example:

or
  1. Checklist
  1. Use these only for short inputs where there's no chance they will wrap.

  2. Checklist
<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--highlight">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-1a" type="checkbox" checked=""> <label class="lego-label" for="foo-1a">Send me email notifications when I am projected to or have exceeded my plan limits</label>
          </li>
          <li>
            <input name="foo-2" id="foo-2a" type="checkbox"> <label class="lego-label" for="foo-2a">Send me email 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-1a" type="radio" checked=""> <label class="lego-label" for="bar-1a">Radio 1</label>
          </li>
          <li>
            <input name="radio-1" id="bar-2a" type="radio" disabled> <label class="lego-label lego-label--disabled" for="bar-2a">Radio 2 with disabled label</label>
          </li>
          <li>
            <input name="radio-1" id="bar-3a" type="radio"> <label class="lego-label" for="bar-3a">Radio 3</label>
          </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-1b" type="radio" checked=""> <label class="lego-label" for="bar-1b">Radio 1</label>
          </li>
          <li>
            <input name="radio-1" id="bar-2b" type="radio" disabled> <label class="lego-label lego-label--disabled" for="bar-2b">Radio 2 with disabled label</label>
          </li>
          <li>
            <input name="radio-1" id="bar-3b" type="radio"> <label class="lego-label" for="bar-3b">Radio 3</label>
          </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-1b" type="checkbox" checked=""> <label class="lego-label" for="foo-1b">Short option</label>
          </li>
          <li>
            <input name="foo-2" id="foo-2b" type="checkbox"> <label class="lego-label" for="foo-2b">Another short 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>

Usage Example:

Form error states
Error States
  1. This field is required.
  2. This field is required.
  3. This field is required.
<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>
.#{$namespace}form--small {
  font-size: map-fetch($font, size micro);
}

%#{$namespace}text-input,
%#{$namespace}textarea,
.#{$namespace}text-input,
.#{$namespace}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],
  &--disabled {
    background: map-fetch($color, background faint);
    color: map-fetch($color, ui medium);
    cursor: default;

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

.#{$namespace}textarea {
  height: 62px;
  resize: vertical;

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

.#{$namespace}form__header {
  margin-bottom: spacer(2);
}

.#{$namespace}form__footer {
  margin-top: spacer(3);
}

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

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

.#{$namespace}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.

.#{$namespace}label {
  display: block;
  margin-bottom: spacer(0.5);
  font-weight: 500;

  &__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 `.#{$namespace}input-lists`

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

//  Groups of checkboxes and radios.

.#{$namespace}input-list {
  list-style: none;
  margin: 0;

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

  input {
    display: table-cell;
  }

  .#{$namespace}label {
    width: 100%;
  }

  // Horizontal version of inputs.

  &--horizontal {

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

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

.#{$namespace}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.

.#{$namespace}icon-input {
  @include display(flex);
  @include align-items(center);

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

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

// Form Notes

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

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

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

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

// Form Validations

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

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

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

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

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

  .#{$namespace}text-input,
  .#{$namespace}select,
  .#{$namespace}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;
}
./src/oui/partials/base/_fonts.scss

Fonts

Pulls in fonts from self hosting. Font Support:

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

Usage Example:

Load fonts by including in theme's variable file.
$include-fonts:(
  weights: 300 400 500,
  italics: true
);
$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');
      }
    }
  }
}

Non Fluid

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

Usage Example:

<img src="http://fillmurray.com/100/100" width="20" height="20">
img[width],
img[height] {
  max-width: none;
}

Rounded images Extend or add class to html.

Usage Example:

<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.

Usage Example:

<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.

Usage Example:

<img src="http://fillmurray.com/100/100" class="img--border">
%img--border,
.img--border {
  border: 1px solid map-fetch($color, ui base);
}

Image placement

Align images with floats and margins.

Usage Example:

Image floated right
<img src="http://fillmurray.com/100/100" 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;
}
./src/oui/partials/base/_lists.scss

Lists

We provide classes to add bullets/numbers since we most commonly use ol/ul without the default styling.

Usage Example:

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

Usage Example:

  • item one
  • item two
  • item three
 <ul class="lego-list lego-list--numbered">
   <li>item one</li>
   <li>item two</li>
   <li>item three</li>
 </ul>
%#{$namespace}list,
.#{$namespace}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;
  }
}
./src/oui/partials/base/_select.scss

Select

Custom select elements for Chrome/Safari/Firefox. It partially changes select elements in IE.

.#{$namespace}select {
  @include appearance(none);
  @include transition(border-color map-fetch($transition-duration, base));
  border: 1px solid map-fetch($color, ui base);
  height: map-fetch($button, size base height);
  border-radius: map-fetch($border-radius, base);
  font-size: map-fetch($font, size base);
  padding: 0 spacer(4) 0 spacer(1.5);
  outline: none;
  cursor: pointer;
  vertical-align: middle;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMCAyMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+Cjxwb2x5Z29uIHBvaW50cz0iMTAsMTEuMiA2LjQsNy42IDQuMyw3LjYgMTAsMTMuMyAxNS43LDcuNiAxMy42LDcuNiAiLz4KPC9zdmc+Cg==);
  background-position: right spacer(1.5) center;
  background-repeat: no-repeat;
  background-size: auto 16px;
  max-width: 100%;

  &:hover {
    box-shadow: map-fetch($button, type base hover box-shadow);
    border-color: map-fetch($color, ui medium);
  }

  &--small {
    font-size: map-fetch($button, size small font-size);
    padding: 0 spacer(3.5) 0 spacer(1);
    background-position: right spacer(1) center;
    height: map-fetch($button, size small height);
  }

  &--large {
    font-size: map-fetch($button, size large font-size);
    padding: 0 spacer(4.5) 0 spacer(2);
    background-position: right spacer(2) center;
    height: map-fetch($button, size large height);
  }

  &::-ms-expand {
    display: none;
  }
}
./src/oui/partials/base/_tables.scss

Tables

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

Usage Example:

Basic table
Experiment Numbers Status
Experiment name one 258 Up
Experiment name two that runs longer 19 Down
Experiment name three 400 Up
<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>

Usage Example:

Walled table
Experiment Numbers Status
Experiment name one 258 Up
Experiment name two that runs longer 19 Down
Experiment name three 400 Up
<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>

Usage Example:

Table rule
Experiment Numbers Status
Experiment name one 258 Up
Experiment name two that runs longer 19 Down
Experiment name three 400 Up
<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>

Usage Example:

Table rule with active row and hover
Experiment Numbers Status
Experiment name one 258 Up
Experiment name two that runs longer 19 Down
Experiment name three 400 Up
<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>

Scrolling Tables

Uses flexbox to change the default behavior of the table elements.

  • The parents of table-scroll MUST be display: flex.
  • All <th> and <td> elements must have matching widths.

Usage Example:

one two three
one two three
<table class="table table--scroll table--rule">
  <thead>
    <tr>
      <th class="width--2-4">one</th>
      <th class="width--1-4">two</th>
      <th class="width--1-4">three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="width--2-4">one</td>
      <td class="width--1-4">two</td>
      <td class="width--1-4">three</td>
    </tr>
  </tbody>
</table>
.#{$namespace}table--scroll {
  @include display(flex);
  @include flex-direction(column);
  width: 100%;

  thead {
    @include display(flex);
    @include flex(none);
  }

  tbody {
    @include display(flex);
    @include flex-direction(column);
    @include flex(1);
    width: 100%;
    overflow-y: auto;
    min-height: 0;
    -ms-overflow-style: -ms-autohiding-scrollbar; // Shows/hides scroll bar on Windows.
  }

  tr {
    @include display(flex); // All table rows changed to flexbox.
    @include flex(none);
    width: 100%;
  }

  th,
  td {
    display: block;
  }
}
./src/oui/partials/base/_text.scss

Text

Special type design treatments.


Editiable

Text that can be edited, like project titles.

Usage Example:

This Text is Editable

<!-- 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);
    }
  }
}

Monospace font

Useful 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.

Usage Example:

Try to highlight and copy the plus sign
Some text
<span data-lego-pseudo-content="+"></span> Some text
[data-lego-pseudo-content]::before {
  content: attr(data-lego-pseudo-content);
}
./src/oui/partials/components/_arrows.scss

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().

Usage Example:

.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%;
  }
}
./src/oui/partials/components/_arrows-inline.scss

Arrow Inline

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

Usage Example:

Up
Down
Right
Left
<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;

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

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

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

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

  &--left {
    @extend %#{$namespace}arrow-inline;
    border-right: $border-colored;
    border-top: $border-transparent;
    border-bottom: $border-transparent;
  }
}
./src/oui/partials/components/_grid.scss

Grids

Fluid and nestable grid system with responsive option.

Usage Example:

Responsive grid that will stack vertically when the browser window is less than `500px`.
.mygrid {
  @include grid($responsive: 500px);
}

Usage Example:

Basic grid with a gutter that is set to default.
<div class="lego-grid">
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
</div>

Usage Example:

Basic grid with a narrow gutter.
<div class="lego-grid lego-grid--guttter--narrow">
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
</div>

Usage Example:

Basic grid with a narrow gutter.
<div class="lego-grid lego-grid--guttter--wide">
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
</div>

Usage Example:

Basic grid with no gutter.
<div class="lego-grid lego-grid--flush">
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell">
    <div class="background--faint">even width cells</div>
  </div>
</div>

Usage Example:

Basic grid of different widths.
<div class="lego-grid lego-grid--flush">
  <div class="lego-grid__cell width-3-5">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell width-1-5">
    <div class="background--faint">even width cells</div>
  </div>
  <div class="lego-grid__cell width-1-5">
    <div class="background--faint">even width cells</div>
  </div>
</div>
@mixin 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));

    > .#{$namespace}grid__cell {
      padding-left: spacer(1);
    }
  }

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

    > .#{$namespace}grid__cell {
      padding-left: spacer(4);
    }
  }

  &--flush {
    margin-left: 0;

    > .#{$namespace}grid__cell {
      padding-left: 0;
    }
  }

  // Grid cells only grow as large as the content.
  &--natural {
    > .#{$namespace}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.

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

%#{$namespace}grid,
.#{$namespace}grid {
  @include grid;
}
./src/oui/partials/components/_island.scss

Island

Simple, boxed off content, as per the island object.

Usage Example:

I am boxed off.
<div class="lego-island">
   I am boxed off.
</div>
%#{$namespace}island,
.#{$namespace}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;
  }
}
./src/oui/partials/components/_matrix.scss

Matrix

Creates rows of elements with one parent, extending #{$namespace}grid.

Usage Example:

Include your own margin/padding and list-item widths.
@include matrix;

Usage Example:

Include 2 columns, 4 spacing units, and responsive at `300px`.
@include matrix(2, 4, 300px);

Usage Example:

All arguments are optional but setting the number of columns value is recommened.
.foo {
  @include matrix(2);
}

Usage Example:

In this example the matrix will have 3 columns, 4 spacer units between columns, and will flatten at 300px.
.foo {
  @include matrix(3, 4, 300px);
}

Matrix classes

Some matrix classes are provided out of the box.

Usage Example:

  • matrix 1
  • matrix 2
  • matrix 3
  • matrix 4
<ul class="lego-matrix lego-matrix--1-2">
  <li><div>matrix 1</div></li>
  <li><div>matrix 2</div></li>
  <li><div>matrix 3</div></li>
  <li><div>matrix 4</div></li>
</ul>
%#{$namespace}matrix,
.#{$namespace}matrix {
  @include matrix(2);
}

%#{$namespace}matrix,
.#{$namespace}matrix {
  @include matrix(3);
}

%#{$namespace}matrix,
.#{$namespace}matrix {
  @include matrix(4);
}
./src/oui/partials/components/_media.scss

Media

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

Usage Example:

Image on the left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae 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, beatae sapiente nemo voluptates quam corporis velit harum quia eaque accusantium nam sint fugit!</p>
  </div>
</div>

Usage Example:

Image on the right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae 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, beatae 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>

Usage Example:

Nested

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus molestias, beatae 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 delectus molestias, beatae sapiente nemo voluptates quam nam sint fugit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero similique aut iste, labore esse delectus 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, beatae 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 delectus 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 delectus molestias, beatae sapiente nemo voluptates quam nam sint fugit!</p>
      </div>
    </div>
  </div>
</div>
@mixin 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);
      }
    }
  }
}

%#{$namespace}media,
.#{$namespace}media {
  @include media;
}
./src/oui/partials/components/_nav.scss

Nav

Creates simple nav pattens to extend.

Usage Example:

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>

Usage Example:

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>

Usage Example:

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>

Usage Example:

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>
%#{$namespace}nav,
.#{$namespace}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;
      }
    }
  }
}
./src/oui/partials/components/_rules.scss

Rules

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

Usage Example:

Horizontal rule

<hr class="lego-rule">

Usage Example:

Dotted horizontal rule

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

Usage Example:

Dashed horizontal rule

<hr class="lego-rule lego-rule--dashed">
%#{$namespace}rule,
.#{$namespace}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;
  }
}
./src/oui/partials/components/_stats.scss

Stats

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

Usage Example:

200
Visitors
7000
View
9,600
Followers
<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>
%#{$namespace}stat-group,
.#{$namespace}stat-group {
  @include display(flex);
}

%#{$namespace}stat,
.#{$namespace}stat {
  margin-right: spacer(1);
}
./src/oui/partials/objects/_accordion.scss

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;

Usage Example:

HTML for an accordion
  • Item One

    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.

  • Item Two

    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.

  • Item Three

    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.

<div class="flex height--300 border--all">
  <ul class="accordion" data-oui-accordion>
    <li class="accordion__item is-active" data-oui-accordion-item>
      <a class="accordion__link" href="#" data-oui-accordion-link>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" data-oui-accordion-item>
      <a class="accordion__link" href="#" data-oui-accordion-link>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" data-oui-accordion-item>
      <a class="accordion__link" href="#" data-oui-accordion-link>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);
  width: 100%;

  &__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;
    }

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

      .accordion__content {
        flex: 1;
      }
    }
  }

  .is-active {
    @include flex(1);

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

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

      &:before {
        opacity: 0;
      }
    }
  }

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

  &__content {
    padding: spacer(2);
  }

}
./src/oui/partials/objects/_array.scss

Array

Create a row of any number of items at equal height and width.

Usage Example:

Background classes are added to show the equal dimensions.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae excepturi eum suscipit necessitatibus iure nam architecto.
Lorem ipsum dolor sit amet.
<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>
%#{$namespace}array,
.#{$namespace}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;
    }
  }
}
./src/oui/partials/objects/_attention.scss

Attention

Boxes for highlighting important information or warnings.

Usage Example:

Default colored attention bar with little content
This is a note.
<div class="lego-attention text--center">
   This is a note.
</div>

Usage Example:

Default colored attention bar with long content
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.
<div class="lego-attention">
   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.
</div>

Usage Example:

Default colored attention bar with close button
This is a note.
<div class="lego-attention text--center">
  <svg class="lego-icon lego-attention__close">
    <use xlink:href="#close-16"></use>
  </svg>
  This is a note.
</div>

Usage Example:

Brand colored attention bar
This is a note.
<div class="lego-attention lego-attention--brand text--center">
  This is a note.
</div>

Usage Example:

Warning colored attention bar
This is a note.
<div class="lego-attention lego-attention--warning text--center">
  This is a note.
</div>

Usage Example:

Success colored attention bar
This is a note.
<div class="lego-attention lego-attention--good-news text--center">
  This is a note.
</div>

Usage Example:

Error colored attention bar
This is a note.
<div class="lego-attention lego-attention--bad-news text--center">
  This is a note.
</div>
%#{$namespace}attention,
.#{$namespace}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;
  }
}
./src/oui/partials/objects/_block-list.scss

Block List

Create big blocky vertical lists with dividers.

Usage Example:

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>

Usage Example:

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>

Usage Example:

Block list with boundary
<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>
%#{$namespace}block-list,
.#{$namespace}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: 0;
    }
  }

}

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

  > li:first-child {
    border: 0;
  }
}
./src/oui/partials/objects/_buttons.scss

Buttons

These are the default button styles. !important is used on colors to override default colors.

Usage Example:

Button colors
<button class="lego-button">Button</button>
<button class="lego-button lego-button--highlight">Button</button>
<button class="lego-button lego-button--danger">Button</button>
<button class="lego-button lego-button--outline">Button</button>
<button class="lego-button lego-button--plain">Button</button>

Usage Example:

Tiny buttons
<button class="lego-button lego-button--small">Button</button>

Usage Example:

Full width buttons
<button class="lego-button lego-button--full">Button</button>

Usage Example:

Disabled buttons
<button class="lego-button lego-button--disabled">Disabled with Class</button>
<button class="lego-button" disabled>Disabled with Attribute</button>
%#{$namespace}button,
.#{$namespace}button {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  margin: 0;
  line-height: map-fetch($button, size base line-height);
  border-width: 1px;
  border-style: solid;
  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);
  border-color: map-fetch($button, type base border);
  color: map-fetch($button, type base color);

  &:visited {
    color: map-fetch($button, type base color);
  }

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

  &.is-active,
  &:active {
    background: map-fetch($button, type base active background);
    border-color: map-fetch($button, type base active border);
    color: map-fetch($button, type base active color);
    box-shadow: map-fetch($button, type base active box-shadow);
    text-shadow: map-fetch($button, type base active text-shadow);
  }

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

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

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

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

  &--outline {
    background-color: map-fetch($button, type outline background);
    border-color: map-fetch($button, type outline border);
    color: map-fetch($button, type outline color);

    &:visited {
      color: map-fetch($button, type outline color);
    }

    &:hover {
      background-color: map-fetch($button, type outline background);
      border-color: map-fetch($button, type outline hover border);
      color: map-fetch($button, type outline hover color);
      text-shadow: none;
      box-shadow: none;
    }

    &:active {
      background-color: map-fetch($button, type outline background);
      border-color: map-fetch($button, type outline active border);
      color: map-fetch($button, type outline active color);
      text-shadow: none;
      box-shadow: none;
    }
  }

  &--outline-reverse {
    background-color: map-fetch($button, type outline-reverse background);
    border-color: map-fetch($button, type outline-reverse border);
    color: map-fetch($button, type outline-reverse color);

    &:visited {
      color: map-fetch($button, type outline-reverse color);
    }

    &:hover {
      background: map-fetch($button, type outline-reverse hover background);
      border-color: map-fetch($button, type outline-reverse hover border);
      color: map-fetch($button, type outline-reverse hover color);
    }

    &:active {
      background: map-fetch($button, type outline-reverse active background);
      border-color: map-fetch($button, type outline-reverse active border);
      color: map-fetch($button, type outline-reverse active color);
    }
  }

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

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

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

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

  &--plain {
    color: map-fetch($button, type plain color);
    border-color: transparent;
    background-color: transparent;
    text-shadow: none;
    box-shadow: none;

    &:hover {
      color: map-fetch($button, type plain hover color);
    }

    &:active {
      color: map-fetch($button, type plain active color);
    }

    &:visited,
    &:hover,
    &:active,
    &:focus {
      border-color: transparent;
      background-color: transparent;
      text-shadow: none;
      box-shadow: none;
    }
  }

  &--toggle {

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

    &:active,
    &.is-active:hover {
      color: map-fetch($button, type base active color);
    }

    &:not(:hover):not(.is-active) {
      border-color: transparent;
      background-color: transparent;
    }
  }

  // ### 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);
    line-height: map-fetch($button, size small line-height);
    height: map-fetch($button, size small height);
    padding: map-fetch($button, size small padding);
  }

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

  &--narrow {
    padding-left: spacer(1);
    padding-right: spacer(1);
  }

  &--tight {
    padding-left: spacer(0.5);
    padding-right: spacer(0.5);
  }

  &--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;

    .#{$namespace}icon {
      vertical-align: sub;
    }
  }

  // ### Disabled State
  // Used either an attribute or a class, depending on the use case.

  // ### Disabled State
  // Used either an attribute or a class, depending on the use case.

  &[disabled],
  &--disabled,
  &--disabled:visited,
  &--disabled:hover,
  &--disabled:active,
  &--disabled:focus {
    cursor: default;
    box-shadow: none;
    background-color: map-fetch($button, type disabled background);
    border-color: map-fetch($button, type disabled border);
    color: map-fetch($button, type disabled color);
    text-shadow: none;
    box-shadow: none;

    &.#{$namespace}button--plain {
      background-color: transparent;
      border-color: transparent;
    }

    &.#{$namespace}button--outline-reverse {
      background-color: transparent;
    }
  }
}
./src/oui/partials/objects/_button-group.scss

Button Group

For buttons that are flush against each other. It is also possible to include an text input.

Usage Example:

Default 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>

Usage Example:

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>

Usage Example:

Button group with text input
<div class="lego-button-group">
  <input type="text" class="lego-text-input">
  <button class="lego-button">Button</button>
</div>
%#{$namespace}button-group,
.#{$namespace}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;
    }
  }

  > .#{$namespace}button--highlight {
    position: relative;
  }

  > .#{$namespace}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.

  .#{$namespace}button--highlight,
  .#{$namespace}button--danger,
  .#{$namespace}button--highlight {
    z-index: 1;
  }
}
./src/oui/partials/objects/_button-row.scss

Button Row

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

Usage Example:

Left aligned button row.
<div class="lego-button-row--left">
  <button class="lego-button">Button</button>
  <button class="lego-button">Button</button>
</div>

Usage Example:

Center aligned button row.
<div class="lego-button-row--center">
  <button class="lego-button">Button</button>
  <button class="lego-button">Button</button>
</div>

Usage Example:

Right aligned button row.
<div class="lego-button-row--right">
  <button class="lego-button">Button</button>
  <button class="lego-button">Button</button>
</div>
%#{$namespace}button-row,
.#{$namespace}button-row {

  &--left {

    .#{$namespace}button {
      margin-right: spacer(1);

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

  &--right {
    text-align: right;

    .#{$namespace}button {
      margin-left: spacer(1);

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

  &--center {
    text-align: center;

    .#{$namespace}button {
      margin-left: spacer(0.5);
      margin-right: spacer(0.5);
    }
  }
}
./src/oui/partials/objects/_dialog.scss

Dialog

Dialog boxes and overlays with three width options:

  • .#{$namespace}dialog is the default
  • .#{$namespace}dialog--wide
  • .#{$namespace}dialog--narrow

Usage Example:

Basic dialog
Dialog Title

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.

<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--highlight">Done</button>
  </div>
  <div class="lego-dialog__close">
    <svg class="lego-icon">
      <use xlink:href="#close-16"></use>
    </svg>
  </div>
</div>

Usage Example:

Narrow dialog
Dialog Title

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.

<div class="lego-dialog lego-dialog--narrow">
  <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--highlight">Done</button>
  </div>
  <div class="lego-dialog__close">
    <svg class="lego-icon">
      <use xlink:href="#close-16"></use>
    </svg>
  </div>
</div>
.#{$namespace}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.
  }
}
./src/oui/partials/objects/_disclose.scss

Disclose

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

Usage Example:

Title of Disclosure

Some Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi id voluptas vitae eius expedita alias iste deserunt rndis earum voluptatibus quae, numquam dolorum perspiciatis accusantium corporis, beatae maxime quasi. Tempora.

Title of Disclosure

Some Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi id voluptas vitae eius expedita alias iste deserunt rndis earum voluptatibus quae, numquam dolorum perspiciatis accusantium corporis, beatae maxime quasi. Tempora.

<div class="disclose" data-oui-disclose>
  <a href="#" class="disclose__link link--dark" data-oui-disclose-link>
    <div class="disclose__arrow">
      <span class="disclose__symbol"></span>
      Title of Disclosure
    </div>
  </a>
  <div class="disclose__content">
    <h3>Some Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi id voluptas vitae eius expedita alias iste deserunt rndis earum voluptatibus quae, numquam dolorum perspiciatis accusantium corporis, beatae maxime quasi. Tempora.</p>
  </div>
</div>
<div class="disclose" data-oui-disclose>
  <a href="#" class="disclose__link" data-oui-disclose-link>
    <div class="disclose__arrow">
      <span class="disclose__symbol"></span>
      Title of Disclosure
    </div>
  </a>
  <div class="disclose__content">
    <h3>Some Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi id voluptas vitae eius expedita alias iste deserunt rndis earum voluptatibus quae, numquam dolorum perspiciatis accusantium corporis, beatae maxime quasi. Tempora.</p>
  </div>
</div>
.#{$namespace}disclose {
  @extend %kill-last-child-margin;

  &__link {
    display: block;
    position: relative;
    margin-bottom: 5px;
  }

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

    &::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);
  }

  &.is-active {

    .#{$namespace}disclose__content {
      display: block;
    }

    .#{$namespace}disclose__symbol {
      @include transform(rotate(90deg));
    }
  }
}
./src/oui/partials/objects/_dropdown.scss

Dropdown

A list of links that drops down from a trigger.

Usage Example:

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

Usage Example:

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

Usage Example:

Dropdown with filter
<div class="lego-dropdown-group" data-oui-dropdown>
  <button class="lego-button" data-oui-dropdown-toggle>
    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>

Usage Example:

Dropdown inside input
<div class="lego-dropdown-group" data-oui-dropdown>
  <input type="text" class="lego-text-input" data-oui-dropdown-toggle>
  <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>
.#{$namespace}dropdown-group {
  font-size: map-fetch($font, size base);
  display: inline-block;
  position: relative;
  vertical-align: top;

  &.is-active {
    .#{$namespace}dropdown {
      visibility: visible;
    }
  }
}

%#{$namespace}dropdown,
.#{$namespace}dropdown {
  @extend %#{$namespace}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 %#{$namespace}block-list__link;
  }

  &--right {
    right: 0;
    left: auto;
  }
}
./src/oui/partials/objects/_edit-text.scss

Edit Text

This is experimental and should not be used yet.

.edit-text {
  display: none;

  &__wrap {
    position: relative;
  }

  &__input {
    position: absolute;
    top: -(map-fetch($edittext, spacer)); // Moving border back for spacing around text.
    left: -(map-fetch($edittext, spacer));
    resize: none;
    overflow: auto; // Removes scrollbar in IE
    -ms-overflow-style: -ms-autohiding-scrollbar; // Shows/hides scroll bar on Windows.
    width: calc(100% + #{map-fetch($edittext, spacer)} * 2); // Can't use right/bottom here on textarea so adding extra distance.
    height: calc(100% + #{map-fetch($edittext, spacer)} * 2);
    border-radius: map-fetch($border-radius, base);
    border-bottom-right-radius: 0;
  }

  &__buttons {
    @include display(flex);
    position: absolute;
    bottom: -30px; // Magic number needed to move save/cancel buttons into position.
    right: -(map-fetch($edittext, spacer));

    .button {
      height: 22px; // Making buttons smaller, this is custom.
      line-height: 22px;
      border-radius: 0 0 map-fetch($border-radius, base);
      border: 1px solid map-fetch($color, ui brand-light);
      border-top: 0;
      background: map-fetch($color, ui white);
    }

    .button:first-child {
      border-right: 0;
      border-radius: 0 0 0 map-fetch($border-radius, base);
    }

    .button:hover {
      background: map-fetch($color, ui white);
      border: 1px solid map-fetch($color, ui brand-light);
      border-top: 0;
    }

    .button:first-child:hover {
      border-right: 0;
    }
  }
}

// This is the temporary class for the text that's being edited.
// It's added when editing, removed when complete.

.edit-text-trigger {
  display: none;
}
./src/oui/partials/objects/_help.scss

Help

Buttons and icons when help is required.

Usage Example:

This text could use some help.
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>
.#{$namespace}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: '?';
  }
}

SVG Icons

The color of the SVG will inherit the parent's color. Need help?: Ask an UI Engineer on #oui if you need access to the icons.

.#{$namespace}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 `.#{$namespace}icon`.
  + [class^="#{$namespace}-arrow-inline"] {
    vertical-align: super;
  }

  &--text-align {
    position: relative;
    top: 2px; // This moves the inline icon down so it is visually aligned with the text.
  }
}

Icon alignment fixes

Fix for icons inside buttons with text and icons inside tabs.

.#{$namespace}button .#{$namespace}icon {
  vertical-align: sub;
}

.#{$namespace}tabs-nav__item .#{$namespace}icon {
  vertical-align: sub;
}

Activity Icons

Used for showing the status item.

Usage Example:

Activity icons within a `.block-list-group`.
  • This is the active item.

  • This is good.

  • This is probably not good.

  • This is not active but holds the space if needed.

<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>
.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);
  }
}
./src/oui/partials/objects/_input-icon.scss

Input Icons

Add SVG icons, like search or calendar, to the left and/or right of inputs. Use padding classes on input as needed to provide space, e.g. soft-triple--left.

Usage Example:

Calendar and arrow icons surrounding text input
<div class="lego-input-icon">
  <input type="text" class="lego-text-input soft-triple--sides width--150">
  <svg class="lego-icon lego-input-icon__left lego-input-icon__muted">
    <use xlink:href="#calendar-16"></use>
  </svg>
  <svg class="lego-icon lego-input-icon__right">
    <use xlink:href="#arrow-down-16"></use>
  </svg>
</div>
.#{$namespace}input-icon {
  position: relative;

  &__left,
  &__right {
    @include transform(translateY(-50%));
    pointer-events: none;
    position: absolute;
    top: 50%;
  }

  &__left {
    left: spacer(1);
  }

  &__right {
    right: spacer(1);
  }

  &__muted {
    fill: map-fetch($color, ui medium);
  }
}
./src/oui/partials/objects/_pagination.scss

Pagination

This is a variation of the navigation object.

Usage Example:

<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>
.#{$namespace}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);
  }
}
./src/oui/partials/objects/_popover.scss

Popover

Information bubbles on hover.

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-top-left" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-top-center" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-top-right" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-right-top" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-right-center" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-right-bottom" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-bottom-right" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-bottom-center" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-bottom-left" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-left-bottom" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-left-center" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>

Usage Example:

  • Title

    Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!

 <div class="height--100">
 <ul class="lego-pop--over lego-pop--over--arrow-left-top" style="display: block; opacity: 1;">
   <li class="lego-pop--over__content">
     <div class="lego-pop--over__title">Title</div>
     <p>Ipsa officiis bad-news minus earum a aperiam! Aperiam reiciendis vitae nihil libero et, hic!</p>
   </li>
 </ul>
 </div>
%#{$namespace}pop--over,
.#{$namespace}pop--over {
  border: 1px solid map-fetch($color, ui base);
  border-radius: map-fetch($border-radius, base);
  background: map-fetch($color, background white);
  max-width: map-fetch($popover, max-width);
  box-shadow: 0 2px map-fetch($shadow, light);
  position: absolute;
  opacity: 0;
  display: none;

  &__content {
    @extend %kill-last-child-margin;
    padding: spacer(0.5) spacer(1);
  }

  &__title {
    font-weight: 500;
  }

  &__close {
    cursor: pointer;
    position: absolute;
    top: spacer(0.5);
    right: spacer(0.5);
  }


  // 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));
  }
}
./src/oui/partials/objects/_poptip.scss

Poptip

Information bubbles on hover.

Usage Example:

<button data-oui-pop-type="pop--tip" data-oui-pop-text="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

Usage Example:

<button data-oui-pop-type="pop--tip" data-oui-pop-location="4" data-oui-pop-text="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

Usage Example:

<button data-oui-pop-type="pop--tip" data-oui-pop-location="7" data-oui-pop-text="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>

Usage Example:

<button data-oui-pop-type="pop--tip" data-oui-pop-location="10" data-oui-pop-text="This is a pop-tip. Use only limited text." class="lego-button">
  Hover Me
</button>
.#{$namespace}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($poptip, max-width);
  display: inline-block;
  z-index: map-fetch($z-index, poptip);
  font-weight: 500;
  position: absolute;
  opacity: 0;

  // Arrow options.

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

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

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

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

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

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

  &--arrow-bottom-right {
    @include arrow(bottom, 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-left-bottom {
    @include arrow(left, bottom, map-fetch($color, ui dark));
  }

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

  &--arrow-left-top {
    @include arrow(left, top, map-fetch($color, ui dark));
  }
}
./src/oui/partials/objects/_progress.scss

Progress

Creates a progress bar.

Usage Example:

60%
<div class="lego-progress">
  <div class="lego-progress__bar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>

Usage Example:

1%
<div class="lego-progress">
  <div class="lego-progress__bar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100">1%</div>
</div>

Usage Example:

0%
<div class="lego-progress">
  <div class="lego-progress__bar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

Usage Example:

80%
<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>
.#{$namespace}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 {
    .#{$namespace}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);
    }
  }
}
./src/oui/partials/objects/_spinner.scss

Spinner

Loading spinner. Target .#{$namespace}overlay to position as needed.

Usage Example:

Default spinner
<div class="position--relative height--100">
  <div class="lego-overlay">
    <div class="spinner"></div>
  </div>
 </div>

Usage Example:

Small spinner
<div class="position--relative height--100">
  <div class="lego-overlay">
    <div class="spinner spinner--small"></div>
  </div>
 </div>

Usage Example:

Tiny spinner
<div class="position--relative height--100">
  <div class="lego-overlay">
    <div class="spinner spinner--tiny"></div>
  </div>
 </div>

Usage Example:

Spinner with overlay This gets inserted into an element and blocks user interaction. Requires a parent `div` with positioning (`absolute` or `relative`).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non cum iusto repudiandae earum porro reprehenderit perspiciatis iste delectus ipsam, accusantium ad sunt, rem mollitia, omnis illum explicabo facere quibusdam qui.
<div class="position--relative">
   <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non cum iusto repudiandae earum porro reprehenderit perspiciatis iste delectus ipsam, accusantium ad sunt, rem mollitia, omnis illum explicabo facere quibusdam qui.</div>
   <div class="lego-overlay">
     <div class="spinner spinner--small"></div>
   </div>
</div>
//    </div>
//    </div>
//    </div>
%#{$namespace}overlay,
.#{$namespace}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(spin-animate) {
  100% {
    @include transform(rotate(360deg));
  }
}

.#{$namespace}spinner {
  @include animation(spin-animate 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));
  }
}
./src/oui/partials/objects/_steps.scss

Steps

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

Usage Example:

  • Step One Label
  • Step Two Label
  • Step Three Label
  • Step Four Label
<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>
%#{$namespace}steps,
.#{$namespace}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);
      }

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

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

    &--complete {

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

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

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

}
./src/oui/partials/objects/_tabs.scss

Tabs

Creates a set of tabs.

Usage Example:

Default sized tabs
  • Tab One
  • Tab Two
  • Tab Three
Tab Content One
Tab Content Two
Tab Content Three
<div class="tabs" data-oui-tabs>
  <ul class="tabs-nav">
    <li class="tabs-nav__item is-active" data-oui-tabs-nav-item>Tab One</li>
    <li class="tabs-nav__item" data-oui-tabs-nav-item>Tab Two</li>
    <li class="tabs-nav__item" data-oui-tabs-nav-item>Tab Three</li>
  </ul>
  <div class="tabs-pane" data-oui-tabs-pane>
    <div class="tabs-pane__item is-active" data-oui-tabs-panes-item>Tab Content One</div>
    <div class="tabs-pane__item" data-oui-tabs-panes-item>Tab Content Two</div>
    <div class="tabs-pane__item" data-oui-tabs-panes-item>Tab Content Three</div>
  </div>
</div>

Usage Example:

Small tabs
  • Tab One
  • Tab Two
  • Tab Three
Tab Content One
Tab Content Two
Tab Content Three
<div class="tabs tabs--small" data-oui-tabs>
  <ul class="tabs-nav">
    <li class="tabs-nav__item is-active" data-oui-tabs-nav-item>Tab One</li>
    <li class="tabs-nav__item" data-oui-tabs-nav-item>Tab Two</li>
    <li class="tabs-nav__item" data-oui-tabs-nav-item>Tab Three</li>
  </ul>
  <div class="tabs-pane" data-oui-tabs-pane>
    <div class="tabs-pane__item is-active" data-oui-tabs-panes-item>Tab Content One</div>
    <div class="tabs-pane__item" data-oui-tabs-panes-item>Tab Content Two</div>
    <div class="tabs-pane__item" data-oui-tabs-panes-item>Tab Content Three</div>
  </div>
</div>

Usage Example:

Center aligned small tabs
  • Tab One
  • Tab Two
  • Tab Three
Tab Content One
Tab Content Two
Tab Content Three
<div class="tabs tabs--small tabs--center" data-oui-tabs>
  <ul class="tabs-nav">
    <li class="tabs-nav__item is-active" data-oui-tabs-nav-item>Tab One</li>
    <li class="tabs-nav__item" data-oui-tabs-nav-item>Tab Two</li>
    <li class="tabs-nav__item" data-oui-tabs-nav-item>Tab Three</li>
  </ul>
  <div class="tabs-pane" data-oui-tabs-pane>
    <div class="tabs-pane__item is-active" data-oui-tabs-panes-item>Tab Content One</div>
    <div class="tabs-pane__item" data-oui-tabs-panes-item>Tab Content Two</div>
    <div class="tabs-pane__item" data-oui-tabs-panes-item>Tab Content Three</div>
  </div>
</div>

Usage Example:

Alternate small tab style with bottom border
  • Tab One
  • Tab Two
  • Tab Three
Tab Content One
Tab Content Two
Tab Content Three
<div class="tabs tabs--small tabs--sub" data-oui-tabs>
  <ul class="tabs-nav">
    <li class="tabs-nav__item is-active" data-oui-tabs-nav-item>Tab One</li>
    <li class="tabs-nav__item" data-oui-tabs-nav-item>Tab Two</li>
    <li class="tabs-nav__item" data-oui-tabs-nav-item>Tab Three</li>
  </ul>
  <div class="tabs-pane" data-oui-tabs-pane>
    <div class="tabs-pane__item is-active" data-oui-tabs-panes-item>Tab Content One</div>
    <div class="tabs-pane__item" data-oui-tabs-panes-item>Tab Content Two</div>
    <div class="tabs-pane__item" data-oui-tabs-panes-item>Tab Content Three</div>
  </div>
</div>
.#{$namespace}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-top-left-radius: map-fetch($border-radius, big);
    }

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

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

    &.is-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;
      }
    }
  }
}

.#{$namespace}tabs--small {

  .#{$namespace}tabs-nav {
    border-width: 1px;
  }

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

.#{$namespace}tabs--center {
  .#{$namespace}tabs-nav {
    @include justify-content(center);
  }

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

.#{$namespace}tabs--sub {
  .#{$namespace}tabs-nav__item {
    border: 0;

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

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

.#{$namespace}tabs-pane__item {

  &__item {
    display: none;

    &.is-active {
      display: block;
    }
  }
}
./src/oui/partials/trumps/_background.scss

Background Colors

Classes to add background colors.

Usage Example:

This text has a light gray background.
<div class="background--faint">
  This text has a light gray background.
</div>
.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--charcoal {
  background-color: map-fetch($color, background charcoal) !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;
}

.background--current-color {
  background-color: currentColor !important;
}
./src/oui/partials/trumps/_borders.scss

Borders

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


Border on all sides

Usage Example:

Border on all sides
<div class="border--all">Border on all sides</div>
%border--all,
.border--all {
  border: 1px solid map-fetch($color, ui base) !important;
}

Border on ends

Usage Example:

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

Usage Example:

Border on ends
<div class="border--ends">Border on ends</div>
%border--top,
.border--top {
  border-top: 1px solid map-fetch($color, ui base) !important;
}

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

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

Border on sides

Usage Example:

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

Usage Example:

Border on sides
<div class="border--sides">Border on sides</div>
%border--left,
.border--left {
  border-left: 1px solid map-fetch($color, ui base) !important;
}

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

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

Floats

Classes to add/remove floats.

Usage Example:

content
<div class="float--right">content</div>
.float--right {
  float: right !important;
}

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

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

Anchor

Can be used to position elements on the page.

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

.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

Usage Example:

Right aligned text
content
<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

Usage Example:

A `div` that has been set to `inline`.
content
<div class="display--inline background--light">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.

Usage Example:

This text is faded. As is the icon below.
<div class="faded push--bottom">
  This text is faded. As is the icon below.
  <svg class="lego-icon faded">
    <use xlink:href="#collaborators-16"></use>
  </svg>
</div>
.faded {
  opacity: map-fetch($opacity, medium) !important;
}

Vertical Alignment for table cells.

Usage Example:

content
<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;
}

Overflow

Force scroll bars when overflowed.

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

.overflow-x--auto {
  overflow-x: auto !important;
}

.overflow-y--auto {
  overflow-y: auto !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--help {
  cursor: help !important;
}

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

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

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

.pointer-events--none {
  pointer-events: none !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;
}

Add Margins

Push elements in any direction.

Usage Example:

content
<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;
}

Remove Margins

Usage Example:

content
<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.

Usage Example:

Given the following HTML the second paragraph would ordinarily have a default bottom margin.

This is a paragraph with default bottom margin.

This is a paragraph with a killed 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>

Usage Example:

Margin goes away with the `%kill-last-child-margin` extended to it.
.foo { @extend %kill-last-child-margin; }
.foo {
  @extend %kill-last-child-margin;
}
%kill-last-child-margin {
  & > *:last-child, // scss-lint:disable UnnecessaryParentReference
  & > *:last-child > *:last-child, // scss-lint:disable UnnecessaryParentReference
  & > *:last-child > *:last-child > *:last-child { // scss-lint:disable UnnecessaryParentReference
    margin-bottom: 0;
  }
}

Add Paddings

Pad elements in any direction.

Usage Example:

Padding on all sides.
content
<div class="push--soft background--light">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

Usage Example:

Top padding removed from element.
content
<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;
}

Font Weights

Usage Example:

This is light text.
<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: 600 !important;
}

Font Style

Usage Example:

This is italic text.
<div class="style--italic">This is italic text.</div>
.style--italic {
  font-style: italic !important;
}

.style--normal {
  font-style: normal !important;
}

Underline

Adds text-decoration: underline to text.

Usage Example:

You can underline words.
<div>You can <span class="underline">underline</span> words.</div>
.underline {
  text-decoration: underline !important;
}

Strike through

Add a line through text.

Usage Example:

You can strike words.
<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.

Usage Example:

Muted text.
This is a muted color. Can be applied to anything.
<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.:

Usage Example:

<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.

Usage Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas voluptatibus aliquam pariatur consequuntur, dicta reiciendis numquam vero.
<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.:

Usage Example:

<a href=# class="go">Read more</a>
.go::after {
  content: '\00A0' '\00BB' !important;
}

Uppercase

Apply capital case to an element.

Usage Example:

<a href=# class="caps">Read more</a>
.caps {
  text-transform: uppercase !important;
}

Break Word & No Wrap

Break or don't break long strings.

Usage Example:

<a href=# class="force-break">alongunbrokenstringthatgoesonalongunbrokenstringthatgoesonalongunbrokenstringthatgoesonalongunbrokenstringthatgoeson</a>
.force-break {
  word-wrap: break-word !important;
}

.nowrap {
  white-space: nowrap !important;
}

Text

Adjust block and inline.

Usage Example:

<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.

Usage Example:

This is base color text

This is brand color text

This is good news text

This is warning text

This is bad news text

<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;
}

%color--charcoal,
.color--charcoal {
  color: map-fetch($color, text charcoal) !important;
}

Width Percentages

Used most frequently in grids or tables for flexible columns.

Usage Example:

1/1
3/5
1/5
1/5
Whole
<div class="lego-grid">
  <div class="lego-grid__cell width--1-1">
    <div class="background--faint">1/1</div>
  </div>
</div>
<div class="lego-grid">
  <div class="lego-grid__cell width--3-5">
    <div class="background--faint">3/5</div>
  </div>
  <div class="lego-grid__cell width--1-5">
    <div class="background--faint">1/5</div>
  </div>
  <div class="lego-grid__cell width--1-5">
    <div class="background--faint">1/5</div>
  </div>
</div>
Whole
%width--1-1,
.width--1-1 {
  width: 100% !important;
}

Halves

%width--1-2,
.width--1-2 {
  width: 50% !important;
}

Thirds

%width--1-3,
.width--1-3 {
  width: 33.333% !important;
}

%width--2-3,
.width--2-3 {
  width: 66.666% !important;
}

Fourths

%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

%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

%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

%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

%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

%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--10-12 {
  @extend %width--5-6;
}

%width--11-12,
.width--11-12 {
  width: 91.666% !important;
}

Fixed widths

// 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--1-1 {
  height: 100% !important;
}

.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;
}