o-

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>O- - v0.7.0</title><link rel="stylesheet" href="assets/css/main.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><meta property="og:title" content="O- - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>A collection of functions, mixins, and placeholders for sass</p> "><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">O- - 0.7.0</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="color"><a href="#color">color</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="color-function"><a href="#color-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="o-gray" data-type="function"><a href="#color-function-o-gray">o-gray</a></li><li class="sidebar__item sassdoc__item" data-name="o-random-color" data-type="function"><a href="#color-function-o-random-color">o-random-color</a></li><li class="sidebar__item sassdoc__item" data-name="o-md-color" data-type="function"><a href="#color-function-o-md-color">o-md-color</a></li><li class="sidebar__item sassdoc__item" data-name="o-closest-md-color" data-type="function"><a href="#color-function-o-closest-md-color">o-closest-md-color</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="form"><a href="#form">form</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="form-mixin"><a href="#form-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="o-checkbox" data-type="mixin"><a href="#form-mixin-o-checkbox">o-checkbox</a></li><li class="sidebar__item sassdoc__item" data-name="o-radio" data-type="mixin"><a href="#form-mixin-o-radio">o-radio</a></li><li class="sidebar__item sassdoc__item" data-name="o-range" data-type="mixin"><a href="#form-mixin-o-range">o-range</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="grid"><a href="#grid">grid</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-variable"><a href="#grid-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="o-auto-break" data-type="variable"><a href="#grid-variable-o-auto-break">o-auto-break</a></li><li class="sidebar__item sassdoc__item" data-name="o-break-at" data-type="variable"><a href="#grid-variable-o-break-at">o-break-at</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-placeholder"><a href="#grid-placeholder">placeholders</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="o-grid" data-type="placeholder"><a href="#grid-placeholder-o-grid">o-grid</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-mixin"><a href="#grid-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="o-span" data-type="mixin"><a href="#grid-mixin-o-span">o-span</a></li><li class="sidebar__item sassdoc__item" data-name="o-generate-grid-classes" data-type="mixin"><a href="#grid-mixin-o-generate-grid-classes">o-generate-grid-classes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="undefined"><a href="#undefined">General</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-placeholder"><a href="#undefined-placeholder">placeholders</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="o-clearfix" data-type="placeholder"><a href="#undefined-placeholder-o-clearfix">o-clearfix</a></li><li class="sidebar__item sassdoc__item" data-name="o-nopaque" data-type="placeholder"><a href="#undefined-placeholder-o-nopaque">o-nopaque</a></li><li class="sidebar__item sassdoc__item" data-name="o-opaque" data-type="placeholder"><a href="#undefined-placeholder-o-opaque">o-opaque</a></li><li class="sidebar__item sassdoc__item" data-name="o-v-center-child" data-type="placeholder"><a href="#undefined-placeholder-o-v-center-child">o-v-center-child</a></li><li class="sidebar__item sassdoc__item" data-name="o-v-center-parent" data-type="placeholder"><a href="#undefined-placeholder-o-v-center-parent">o-v-center-parent</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-mixin"><a href="#undefined-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="o-input-range" data-type="mixin"><a href="#undefined-mixin-o-input-range">o-input-range <span class="sidebar__annotation sidebar__annotation--alias">alias</span></a></li><li class="sidebar__item sassdoc__item" data-name="o-border-box" data-type="mixin"><a href="#undefined-mixin-o-border-box">o-border-box</a></li><li class="sidebar__item sassdoc__item" data-name="o-box-shadow" data-type="mixin"><a href="#undefined-mixin-o-box-shadow">o-box-shadow</a></li><li class="sidebar__item sassdoc__item" data-name="o-minimal-box-shadow" data-type="mixin"><a href="#undefined-mixin-o-minimal-box-shadow">o-minimal-box-shadow <span class="sidebar__annotation sidebar__annotation--alias">alias</span></a></li><li class="sidebar__item sassdoc__item" data-name="o-center" data-type="mixin"><a href="#undefined-mixin-o-center">o-center</a></li><li class="sidebar__item sassdoc__item" data-name="o-ellipsis" data-type="mixin"><a href="#undefined-mixin-o-ellipsis">o-ellipsis</a></li><li class="sidebar__item sassdoc__item" data-name="o-emboss" data-type="mixin"><a href="#undefined-mixin-o-emboss">o-emboss</a></li><li class="sidebar__item sassdoc__item" data-name="o-horizontal-list" data-type="mixin"><a href="#undefined-mixin-o-horizontal-list">o-horizontal-list</a></li><li class="sidebar__item sassdoc__item" data-name="o-hlist" data-type="mixin"><a href="#undefined-mixin-o-hlist">o-hlist <span class="sidebar__annotation sidebar__annotation--alias">alias</span></a></li><li class="sidebar__item sassdoc__item" data-name="o-list-unstyled" data-type="mixin"><a href="#undefined-mixin-o-list-unstyled">o-list-unstyled</a></li><li class="sidebar__item sassdoc__item" data-name="o-unstyled-list" data-type="mixin"><a href="#undefined-mixin-o-unstyled-list">o-unstyled-list</a></li><li class="sidebar__item sassdoc__item" data-name="o-media" data-type="mixin"><a href="#undefined-mixin-o-media">o-media</a></li><li class="sidebar__item sassdoc__item" data-name="o-trickle" data-type="mixin"><a href="#undefined-mixin-o-trickle">o-trickle</a></li><li class="sidebar__item sassdoc__item" data-name="o-size" data-type="mixin"><a href="#undefined-mixin-o-size">o-size</a></li><li class="sidebar__item sassdoc__item" data-name="o-square" data-type="mixin"><a href="#undefined-mixin-o-square">o-square</a></li><li class="sidebar__item sassdoc__item" data-name="o-underline-on-hover" data-type="mixin"><a href="#undefined-mixin-o-underline-on-hover">o-underline-on-hover</a></li><li class="sidebar__item sassdoc__item" data-name="o-underline-text-on-hover" data-type="mixin"><a href="#undefined-mixin-o-underline-text-on-hover">o-underline-text-on-hover <span class="sidebar__annotation sidebar__annotation--alias">alias</span></a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-function"><a href="#undefined-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="o-as-percent" data-type="function"><a href="#undefined-function-o-as-percent">o-as-percent</a></li><li class="sidebar__item sassdoc__item" data-name="o-golden-ratio" data-type="function"><a href="#undefined-function-o-golden-ratio">o-golden-ratio</a></li><li class="sidebar__item sassdoc__item" data-name="o-golden" data-type="function"><a href="#undefined-function-o-golden">o-golden <span class="sidebar__annotation sidebar__annotation--alias">alias</span></a></li><li class="sidebar__item sassdoc__item" data-name="o-grey" data-type="function"><a href="#undefined-function-o-grey">o-grey <span class="sidebar__annotation sidebar__annotation--alias">alias</span></a></li><li class="sidebar__item sassdoc__item" data-name="o-rand-color" data-type="function"><a href="#undefined-function-o-rand-color">o-rand-color <span class="sidebar__annotation sidebar__annotation--alias">alias</span></a></li><li class="sidebar__item sassdoc__item" data-name="o-strip-unit" data-type="function"><a href="#undefined-function-o-strip-unit">o-strip-unit</a></li><li class="sidebar__item sassdoc__item" data-name="o-strip" data-type="function"><a href="#undefined-function-o-strip">o-strip <span class="sidebar__annotation sidebar__annotation--alias">alias</span></a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-variable"><a href="#undefined-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-name="o-phi" data-type="variable"><a href="#undefined-variable-o-phi">o-phi</a></li><li class="sidebar__item sassdoc__item" data-name="o-break-small" data-type="variable"><a href="#undefined-variable-o-break-small">o-break-small</a></li><li class="sidebar__item sassdoc__item" data-name="o-break-large" data-type="variable"><a href="#undefined-variable-o-break-large">o-break-large</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><div class="container"><h1 id="o-">o-</h1><h6 id="pronounced-oh-dash-">pronounced "Oh Dash"</h6><blockquote><p>A collection of functions, mixins, and placeholders for <a href="http://sass-lang.com">sass</a></p></blockquote><h2 id="install">Install</h2><p>via npm</p><pre><code class="lang-bash">npm install o- --save-dev </code></pre><p>or through bower</p><pre><code class="lang-bash">bower install o-dash --save </code></pre><h2 id="usage">Usage</h2><p>Import <strong>o-</strong> into your sass/scss</p><pre><code class="lang-scss">@import 'node_modules/o-'; </code></pre><p>As of <a href="https://github.com/sass/node-sass">node-sass</a> >= v3.0.0, js functions can be registered at configuration time, which is needed for <code>o-md-color</code> and <code>o-closest-md-color</code> functions. You will need <a href="https://github.com/sass/node-sass">node-sass</a>, <a href="https://github.com/dlmanning/gulp-sass">gulp-sass</a>, or <a href="https://github.com/sindresorhus/grunt-sass">grunt-sass</a> depending on your build setup.</p><p>Grunt:</p><pre><code class="lang-js">// ... sass: { options: { functions: require('o-') }, build: { files: { 'style.css': 'style.scss' } } } // ... </code></pre><p>Gulp:</p><pre><code class="lang-js">// ... gulp.task('sass', () => { return gulp.src('style.scss') .pipe(sass({ functions: require('o-') })) .pipe(gulp.src('style.css')) }) // ... </code></pre><p>Node:</p><pre><code class="lang-js">// ... sass.render({ data: ` body { color: o-closest-md-color(o-random-color()) } `, functions: require('o-') }, (err, result) => {/*...*/}) // ... </code></pre><h2 id="api">API</h2><p>You can refer to the documentation online at <a href="http://lokua.github.io/o-">lokua.github.io/o-</a>, or internally by opening <a href="doc/index.html">doc/index.html</a>.</p><h2 id="dev">Dev</h2><p><code>NODE_ENV=development && npm install</code></p><p>If adding a new file, run <code>npm run gen</code> afterword to repopulate the <code>lib/_index.scss</code> imports file.</p><p>Documentation is generated with the much awesome <a href="http://sassdoc.com/">sassdoc</a>. <code>npm run doc</code></p><h2 id="license">License</h2><p><a href="http://lokua.net/license-mit.html">MIT</a></p></div></section><section class="main__section"><h1 class="main__heading" id="color"><div class="container">color</div></h1><section class="main__sub-section" id="color-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="color-function-o-gray"><h3 class="item__heading"><a class="item__name" href="#function-o-gray">o-gray</a> <span class="item__aliased">(aliased as <a href="#function-o-grey"><code>o-grey</code></a> )</span></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function o-gray($value: 50, $alpha: 1) { $x: round(($value / 100) * 255); @return rgba($x, $x, $x, $alpha); }" data-collapsed="@function o-gray($value: 50, $alpha: 1) { ... }"><code>@function o-gray($value: 50, $alpha: 1) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Create a grayscale color range 0-100 with optional alpha value</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$value</code></th><td data-label="desc"><p>range [0, 100]</p></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>50</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$alpha</code></th><td data-label="desc"><p>range [0, 1]</p></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>1</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Color</code> —<p>rgba color</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#function-o-grey"><code>o-grey</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="http://codepen.io/Lokua/pen/zxKQWG?editors=110">http://codepen.io/Lokua/pen/zxKQWG?editors=110</a></li></ul></section><section class="main__item container item" id="color-function-o-random-color"><h3 class="item__heading"><a class="item__name" href="#function-o-random-color">o-random-color</a> <span class="item__aliased">(aliased as <a href="#function-o-rand-color"><code>o-rand-color</code></a> )</span></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function o-random-color($alpha: false) { @if ($alpha == true) { @return rgba(random(256)-1, random(256)-1, random(256)-1, random(100) / 100); } @return rgb(random(256)-1, random(256)-1, random(256)-1); }" data-collapsed="@function o-random-color($alpha: false) { ... }"><code>@function o-random-color($alpha: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Get a random rgb[a] color</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$alpha</code></th><td data-label="desc"><p>if true, randomize the alpha value in addition to the rgb</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Color</code> —<p>rgb or rgba if <code>$alpha</code> is true</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#function-o-rand-color"><code>o-rand-color</code></a></li></ul></section><section class="main__item container item" id="color-function-o-md-color"><h3 class="item__heading"><a class="item__name" href="#function-o-md-color">o-md-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function o-md-color($color, $shade: 500) { // this function requires registration of o- with node-sass:options.functions }" data-collapsed="@function o-md-color($color, $shade: 500) { ... }"><code>@function o-md-color($color, $shade: 500) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Material design colors accessor.</p><h1 id="note-">Note:</h1><p>this function requires registration of <code>o-</code> with node-sass:options.functions</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc"><p>The material design color name (must be wrapped in quotes)</p></td><td data-label="type"><code>String</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$shade</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>500</code></td></tr></tbody></table></section><section class="main__item container item" id="color-function-o-closest-md-color"><h3 class="item__heading"><a class="item__name" href="#function-o-closest-md-color">o-closest-md-color</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function o-closest-md-color($color) { // this function requires registration of o- with node-sass:options.functions }" data-collapsed="@function o-closest-md-color($color) { ... }"><code>@function o-closest-md-color($color) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Find the material design color that is closest to <code>$color</code></p><h1 id="note-">Note:</h1><p>this function requires registration of <code>o-</code> with node-sass:options.functions</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc"><p>Any valid SassColor</p></td><td data-label="type"><code>Color</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr></tbody></table></section></section></section><section class="main__section"><h1 class="main__heading" id="form"><div class="container">form</div></h1><section class="main__sub-section" id="form-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="form-mixin-o-checkbox"><h3 class="item__heading"><a class="item__name" href="#mixin-o-checkbox">o-checkbox</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-checkbox($class: checkbox, $size: 18px, $color: #222, $background: #ddd, $border: 2px solid lighten($color, 10%), $border-radius: 0) { .#{$class} { position: relative; display: inline-block; input[type=checkbox] { opacity: 0; position: absolute; top: 0; left: 0; width: $size; height: $size; margin: 0; padding: 0; cursor: pointer; baseline-shift: super; &:checked + label:after { position: absolute; top: $size * 0.125 * -1; display: inline-block; margin: 0; padding: 0; text-align: center; content: '\2713'; font-family: monospace; font-weight: bold; font-size: $size; width: $size; height: $size; } &:not(checked) + label { content: ''; } } label { display: inline-block; width: $size; height: $size; color: $color; background: $background; border: $border; border-radius: $border-radius; pointer-events: none; } } }" data-collapsed="@mixin o-checkbox($class: checkbox, $size: 18px, $color: #222, $background: #ddd, $border: 2px solid lighten($color, 10%), $border-radius: 0) { ... }"><code>@mixin o-checkbox($class: checkbox, $size: 18px, $color: #222, $background: #ddd, $border: 2px solid lighten($color, 10%), $border-radius: 0) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Custom checkbox factory. Customizations not available through parametes can be applied to the label element child of classname <code>$class</code> as follows:</p><ul><li>Using the mixins defaults, the colors and appearence of the checkbox can be targeted via <code>.checkbox label</code>.</li><li>For the checkmark itself, target <code>.checkbox input:checked + label:after</code></li></ul><p>See the example for required markup:</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$class</code></th><td data-label="desc"><p>the classname for your checkbox container</p></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>checkbox</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$size</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>18px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>#222</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$background</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>#ddd</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$border</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>2px solid lighten($color, 10%)</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$border-radius</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>0</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-html"><code><div class="checkbox"> <input type="checkbox" checked> <label></label> </div></code></pre></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="http://codepen.io/Lokua/pen/jWOZJd?editors=110">http://codepen.io/Lokua/pen/jWOZJd?editors=110</a></li></ul></section><section class="main__item container item" id="form-mixin-o-radio"><h3 class="item__heading"><a class="item__name" href="#mixin-o-radio">o-radio</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-radio($class: checkbox, $size: 18px, $color: #222, $background: #ddd, $border: 2px solid lighten($color, 10%)) { .#{$class} { position: relative; display: inline-block; input[type=radio] { opacity: 0; position: absolute; top: 0; left: 0; width: $size; height: $size; margin: 0; padding: 0; cursor: pointer; &:checked + label:after { $bullet-size: $size / 1.5; display: block; position: absolute; text-align: center; top: $bullet-size/4; left: $bullet-size/4; width: $bullet-size; height: $bullet-size; background: $color; border-radius: 50%; content: ''; } &:not(:checked) + label:after { opacity: 0; } } label { box-sizing: border-box; display: inline-block; width: $size; height: $size; color: $color; background: $background; border: $border; border-radius: 50%; pointer-events: none; } } }" data-collapsed="@mixin o-radio($class: checkbox, $size: 18px, $color: #222, $background: #ddd, $border: 2px solid lighten($color, 10%)) { ... }"><code>@mixin o-radio($class: checkbox, $size: 18px, $color: #222, $background: #ddd, $border: 2px solid lighten($color, 10%)) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Custom radio factory. Customizations not available through parameters can be applied to the label element child of classname <code>$class</code> as follows:</p><ul><li>Using the mixins defaults, the colors and appearence of the radio can be targeted via <code>.radio label</code>.</li><li>For the bullet inside the radio, target <code>.radio input:radio + label:after</code></li></ul><p>See the example for required markup:</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$class</code></th><td data-label="desc"><p>the classname for your checkbox container</p></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>checkbox</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$size</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>18px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>#222</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$background</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>#ddd</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$border</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>2px solid lighten($color, 10%)</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-html"><code><div class="radio"> <input type="radio" name="a"/> <label></label> </div> <div class="radio"> <input type="radio" name="a"/> <label></label> </div></code></pre></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="http://codepen.io/Lokua/pen/YwzaGe?editors=110">http://codepen.io/Lokua/pen/YwzaGe?editors=110</a></li></ul></section><section class="main__item container item" id="form-mixin-o-range"><h3 class="item__heading"><a class="item__name" href="#mixin-o-range">o-range</a> <span class="item__aliased">(aliased as <a href="#mixin-o-input-range"><code>o-input-range</code></a> )</span></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-range($track-color: #aaa, $knob-color: #444, $rounded: false) { $track-height: 2px; $knob-height: 14px; $knob-width: 8px; $webkit-knob-margin-top: -3px; @if ($rounded == false) { $webkit-knob-margin-top: -6px; } input[type=range] { -webkit-appearance: none; margin: 10px 0; width: 100%; &:focus { outline: none; } &::-webkit-slider-runnable-track { width: 100%; height: $track-height; cursor: pointer; animate: 0.2s; background: $track-color; } &::-webkit-slider-thumb { background: $knob-color; cursor: pointer; -webkit-appearance: none; margin-top: $webkit-knob-margin-top; @if $rounded == true { border-radius: 50%; height: $knob-width; width: $knob-width; } @else { height: $knob-height; width: $knob-width; } } &:focus::-webkit-slider-runnable-track { background: $track-color; } &::-moz-range-track { width: 100%; height: $track-height; cursor: pointer; animate: 0.2s; background: $track-color; } &::-moz-range-thumb { border: none; background: $knob-color; cursor: pointer; @if $rounded == true { border-radius: 50%; height: $knob-width; width: $knob-width; } @else { border-radius: 0%; height: $knob-height; width: $knob-width; } } &::-ms-track { width: 100%; height: $track-height; cursor: pointer; animate: 0.2s; background: transparent; border-color: transparent; border-width: $knob-width 0; color: transparent; } &::-ms-fill-lower { background: $track-color; border: 0px solid #000101; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } &::-ms-fill-upper { background: $track-color; border: 0px solid #000101; box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; } &::-ms-thumb { box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; border: 0px solid #000000; height: 20px; width: $knob-width; background: $knob-color; cursor: pointer; } &:focus::-ms-fill-lower { background: $track-color; } &:focus::-ms-fill-upper { background: $track-color; } } }" data-collapsed="@mixin o-range($track-color: #aaa, $knob-color: #444, $rounded: false) { ... }"><code>@mixin o-range($track-color: #aaa, $knob-color: #444, $rounded: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Cross-browser css input[type=range], implemented as a mixin to enable coloring of the track and thumb, as well as rounded or square thumb option.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$track-color</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>#aaa</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$knob-color</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>#444</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$rounded</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Bool</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/">https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/</a></li><li><a href="http://codepen.io/Lokua/pen/ogaaPd">http://codepen.io/Lokua/pen/ogaaPd</a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="grid"><div class="container">grid</div></h1><section class="main__sub-section" id="grid-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="grid-variable-o-auto-break"><h3 class="item__heading"><a class="item__name" href="#variable-o-auto-break">o-auto-break</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$o-auto-break: true;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>If true, <code>%o-col-*</code> placeholders will expand to 100% width on screens smaller than <code>$o-break-at</code></p></div><h3 class="item__sub-heading">Type</h3><p><code>{bool}</code></p><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[variable]</span> <a href="#variable-o-break-at"><code>o-break-at</code></a></li></ul></section><section class="main__item container item" id="grid-variable-o-break-at"><h3 class="item__heading"><a class="item__name" href="#variable-o-break-at">o-break-at</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$o-break-at: 768px;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>If <code>$o-auto-break</code> is true, sets the breakpoint at which screens smaller than will force all grid placeholders to assume full width</p></div><h3 class="item__sub-heading">Type</h3><p><code>{number}</code></p></section></section><section class="main__sub-section" id="grid-placeholder"><h2 class="main__heading--secondary"><div class="container">placeholders</div></h2><section class="main__item container item" id="grid-placeholder-o-grid"><h3 class="item__heading"><a class="item__name" href="#placeholder-o-grid">o-grid</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="%o-grid { @extend %o-clearfix; width: 100%; }" data-collapsed="%o-grid { ... }"><code>%o-grid { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generic grid container</p></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[placeholder]</span> <a href="#placeholder-o-clearfix"><code>o-clearfix</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#mixin-o-generate-grid-classes"><code>o-generate-grid-classes</code></a></li></ul></section></section><section class="main__sub-section" id="grid-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="grid-mixin-o-span"><h3 class="item__heading"><a class="item__name" href="#mixin-o-span">o-span</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-span() { width: 100 * ($cols/12) + 0%; float: $float; }" data-collapsed="@mixin o-span() { ... }"><code>@mixin o-span() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Dynamically add <code>$cols</code> number of columns to an element. Assumes a 12 column grid with no gutters.</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p></section><section class="main__item container item" id="grid-mixin-o-generate-grid-classes"><h3 class="item__heading"><a class="item__name" href="#mixin-o-generate-grid-classes">o-generate-grid-classes</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-generate-grid-classes() { .o-grid { @extend %o-grid; } @for $i from 1 through 12 { .o-col-#{$i} { @extend %o-col-#{$i}; } } }" data-collapsed="@mixin o-generate-grid-classes() { ... }"><code>@mixin o-generate-grid-classes() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Use this mixin if you'd prefer to generate static bootstrap-style <code>.o-grid</code> and <code>o-col-*</code> (<code>.o-col-1</code> through <code>.o-col-12</code>) classes.</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[placeholder]</span> <a href="#placeholder-o-grid"><code>o-grid</code></a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="undefined"><div class="container">General</div></h1><section class="main__sub-section" id="undefined-placeholder"><h2 class="main__heading--secondary"><div class="container">placeholders</div></h2><section class="main__item container item" id="undefined-placeholder-o-clearfix"><h3 class="item__heading"><a class="item__name" href="#placeholder-o-clearfix">o-clearfix</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="%o-clearfix { &:after { content: ''; display: table; clear: both; } }" data-collapsed="%o-clearfix { ... }"><code>%o-clearfix { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>modern clearfix</p></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[placeholder]</span> <a href="#placeholder-o-grid"><code>o-grid</code></a></li></ul></section><section class="main__item container item" id="undefined-placeholder-o-nopaque"><h3 class="item__heading"><a class="item__name" href="#placeholder-o-nopaque">o-nopaque</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="%o-nopaque { opacity: 0; }" data-collapsed="%o-nopaque { ... }"><code>%o-nopaque { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>"no opacity" - you can't see me</p></div><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[placeholder]</span> <a href="#placeholder-o-opaque"><code>o-opaque</code></a></li></ul></section><section class="main__item container item" id="undefined-placeholder-o-opaque"><h3 class="item__heading"><a class="item__name" href="#placeholder-o-opaque">o-opaque</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="%o-opaque { opacity: 1; }" data-collapsed="%o-opaque { ... }"><code>%o-opaque { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Maximum opacity</p></div><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[placeholder]</span> <a href="#placeholder-o-opaque"><code>o-opaque</code></a></li></ul></section><section class="main__item container item" id="undefined-placeholder-o-v-center-child"><h3 class="item__heading"><a class="item__name" href="#placeholder-o-v-center-child">o-v-center-child</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="%o-v-center-child { vertical-align: middle; }" data-collapsed="%o-v-center-child { ... }"><code>%o-v-center-child { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Vertically center an element that is a direct descendent of an element that extends <code>%o-v-center-parent</code>.</p></div><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[placeholder]</span> <a href="#placeholder-o-v-center-parent"><code>o-v-center-parent</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="http://codepen.io/Lokua/pen/zxKQWG?editors=110">http://codepen.io/Lokua/pen/zxKQWG?editors=110</a></li></ul></section><section class="main__item container item" id="undefined-placeholder-o-v-center-parent"><h3 class="item__heading"><a class="item__name" href="#placeholder-o-v-center-parent">o-v-center-parent</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="%o-v-center-parent { display: table-cell; vertical-align: middle; }" data-collapsed="%o-v-center-parent { ... }"><code>%o-v-center-parent { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Container for vertically centering child elements. To comply, child elements must have <code>vertical-align: middle;</code> or you can simply <code>@extend %o-v-center-child</code>. Note that <code>%o-center-parent</code> also has <code>vertical-align: middle</code>, so parents can be nested.</p></div><h3 class="item__sub-heading">See</h3><ul class="list-unstyled"><li><span class="item__cross-type">[placeholder]</span> <a href="#placeholder-o-v-center-child"><code>o-v-center-child</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="http://codepen.io/Lokua/pen/zxKQWG?editors=110">http://codepen.io/Lokua/pen/zxKQWG?editors=110</a></li></ul></section></section><section class="main__sub-section" id="undefined-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item item--alias item--deprecated" id="undefined-mixin-o-input-range"><h3 class="item__heading"><a class="item__name" href="#mixin-o-input-range">o-input-range</a> <span class="item__alias">(alias for <a href="#mixin-o-range"><code>o-range</code></a>)</span></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>Keeping for backwards compatibility. Use <code>o-range</code> instead</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-input-range() { @return o-range($track-color, $knob-color, $rounded); }" data-collapsed="@mixin o-input-range() { ... }"><code>@mixin o-input-range() { ... }</code></pre></div><p>Refer to <a href="#mixin-o-range">o-range</a>.</p></section><section class="main__item container item" id="undefined-mixin-o-border-box"><h3 class="item__heading"><a class="item__name" href="#mixin-o-border-box">o-border-box</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-border-box() { *, *:before, *:after { box-sizing: border-box; } }" data-collapsed="@mixin o-border-box() { ... }"><code>@mixin o-border-box() { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Paul Irish box-sizing:border-box for errthang</p></div><h3 class="item__sub-heading">Parameters</h3><p>None.</p></section><section class="main__item container item" id="undefined-mixin-o-box-shadow"><h3 class="item__heading"><a class="item__name" href="#mixin-o-box-shadow">o-box-shadow</a> <span class="item__aliased">(aliased as <a href="#mixin-o-minimal-box-shadow"><code>o-minimal-box-shadow</code></a> )</span></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-box-shadow($color: rgba(#000, 0.25)) { box-shadow: 0px 1px 2px 1px $color; }" data-collapsed="@mixin o-box-shadow($color: rgba(#000, 0.25)) { ... }"><code>@mixin o-box-shadow($color: rgba(#000, 0.25)) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Opinionated minimal box shadow</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>rgba(#000, 0.25)</code></td></tr></tbody></table></section><section class="main__item container item item--alias item--deprecated" id="undefined-mixin-o-minimal-box-shadow"><h3 class="item__heading"><a class="item__name" href="#mixin-o-minimal-box-shadow">o-minimal-box-shadow</a> <span class="item__alias">(alias for <a href="#mixin-o-box-shadow"><code>o-box-shadow</code></a>)</span></h3><div class="item__deprecated"><strong>Deprecated!</strong><p>Keeping for backwards compatibility. Use <code>o-box-shadow</code> instead</p></div><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-minimal-box-shadow() { @return o-box-shadow($color); }" data-collapsed="@mixin o-minimal-box-shadow() { ... }"><code>@mixin o-minimal-box-shadow() { ... }</code></pre></div><p>Refer to <a href="#mixin-o-box-shadow">o-box-shadow</a>.</p></section><section class="main__item container item" id="undefined-mixin-o-center"><h3 class="item__heading"><a class="item__name" href="#mixin-o-center">o-center</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin o-center($top: 0, $bottom: $top) { margin: $top auto $bottom; }" data-collapsed="@mixin o-center($top: 0, $bottom: $top) { ... }"><code>@mixin o-center($top: 0, $bottom: $top) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Symantic shorthand for <code>margin: 0 auto</code></p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$top</code></th><td data-label="desc">—<span class="visually-hidden">none</span></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__paramet