microscope-sass
Version:
Sass microframework for building scoped user interfaces.
2 lines • 546 kB
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Microscope-sass - v2.0.0</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://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"><!-- Open Graph tags --><meta property="og:title" content="Microscope-sass - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Sass microframework for building scoped user interfaces.</p>
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title"><a href="https://github.com/maykinmedia/microscope-sass#readme">Microscope-sass - v2.0.0</a></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="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-variable"><a href="#animation-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="animation-default-duration-fast" data-type="variable"><a href="#animation-variable-animation-default-duration-fast">animation-default-duration-fast</a></li><li class="sidebar__item sassdoc__item" data-group="animation" data-name="animation-default-duration-medium" data-type="variable"><a href="#animation-variable-animation-default-duration-medium">animation-default-duration-medium</a></li><li class="sidebar__item sassdoc__item" data-group="animation" data-name="animation-default-duration-slow" data-type="variable"><a href="#animation-variable-animation-default-duration-slow">animation-default-duration-slow</a></li><li class="sidebar__item sassdoc__item" data-group="animation" data-name="animation-default-delay" data-type="variable"><a href="#animation-variable-animation-default-delay">animation-default-delay</a></li><li class="sidebar__item sassdoc__item" data-group="animation" data-name="animation-default-function" data-type="variable"><a href="#animation-variable-animation-default-function">animation-default-function</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-css"><a href="#animation-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="Import animation library." data-type="css"><a href="#animation-css-Import animation library.">Import animation library.</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="animate" data-type="mixin"><a href="#animation-mixin-animate">animate</a></li><li class="sidebar__item sassdoc__item" data-group="animation" data-name="fade-in" data-type="mixin"><a href="#animation-mixin-fade-in">fade-in</a></li><li class="sidebar__item sassdoc__item" data-group="animation" data-name="hover-fade" data-type="mixin"><a href="#animation-mixin-hover-fade">hover-fade</a></li><li class="sidebar__item sassdoc__item" data-group="animation" data-name="ken-burns" data-type="mixin"><a href="#animation-mixin-ken-burns">ken-burns</a></li><li class="sidebar__item sassdoc__item" data-group="animation" data-name="keyframes" data-type="mixin"><a href="#animation-mixin-keyframes">keyframes</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="bem"><a href="#bem">bem</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="bem-css"><a href="#bem-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="bem" data-name="Import BEM library." data-type="css"><a href="#bem-css-Import BEM library.">Import BEM library.</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="bem-mixin"><a href="#bem-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="bem" data-name="element" data-type="mixin"><a href="#bem-mixin-element">element</a></li><li class="sidebar__item sassdoc__item" data-group="bem" data-name="modifier" data-type="mixin"><a href="#bem-mixin-modifier">modifier</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="browser"><a href="#browser">browser</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="browser-css"><a href="#browser-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="browser" data-name="Import browser library." data-type="css"><a href="#browser-css-Import browser library.">Import browser library.</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="browser-mixin"><a href="#browser-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="browser" data-name="ie11" data-type="mixin"><a href="#browser-mixin-ie11">ie11</a></li></ul></div><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-variable"><a href="#color-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-black" data-type="variable"><a href="#color-variable-color-black">color-black</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-white" data-type="variable"><a href="#color-variable-color-white">color-white</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-gray" data-type="variable"><a href="#color-variable-color-gray">color-gray</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-gray-darker" data-type="variable"><a href="#color-variable-color-gray-darker">color-gray-darker</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-blue" data-type="variable"><a href="#color-variable-color-blue">color-blue</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-green" data-type="variable"><a href="#color-variable-color-green">color-green</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-red" data-type="variable"><a href="#color-variable-color-red">color-red</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-orange" data-type="variable"><a href="#color-variable-color-orange">color-orange</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-yellow" data-type="variable"><a href="#color-variable-color-yellow">color-yellow</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-primary" data-type="variable"><a href="#color-variable-color-primary">color-primary</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-secondary" data-type="variable"><a href="#color-variable-color-secondary">color-secondary</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-background" data-type="variable"><a href="#color-variable-color-background">color-background</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-border" data-type="variable"><a href="#color-variable-color-border">color-border</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-danger" data-type="variable"><a href="#color-variable-color-danger">color-danger</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-info" data-type="variable"><a href="#color-variable-color-info">color-info</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-success" data-type="variable"><a href="#color-variable-color-success">color-success</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-warning" data-type="variable"><a href="#color-variable-color-warning">color-warning</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="color-mixin"><a href="#color-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-primary" data-type="mixin"><a href="#color-mixin-color-primary">color-primary</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-secondary" data-type="mixin"><a href="#color-mixin-color-secondary">color-secondary</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-background" data-type="mixin"><a href="#color-mixin-color-background">color-background</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-border" data-type="mixin"><a href="#color-mixin-color-border">color-border</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-danger" data-type="mixin"><a href="#color-mixin-color-danger">color-danger</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-info" data-type="mixin"><a href="#color-mixin-color-info">color-info</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-success" data-type="mixin"><a href="#color-mixin-color-success">color-success</a></li><li class="sidebar__item sassdoc__item" data-group="color" data-name="color-warning" data-type="mixin"><a href="#color-mixin-color-warning">color-warning</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-group="grid" data-name="grid-columns-mobile" data-type="variable"><a href="#grid-variable-grid-columns-mobile">grid-columns-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-columns-tablet" data-type="variable"><a href="#grid-variable-grid-columns-tablet">grid-columns-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-columns-laptop" data-type="variable"><a href="#grid-variable-grid-columns-laptop">grid-columns-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-columns-desktop" data-type="variable"><a href="#grid-variable-grid-columns-desktop">grid-columns-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-gutter-base" data-type="variable"><a href="#grid-variable-grid-gutter-base">grid-gutter-base</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-gutter-mobile" data-type="variable"><a href="#grid-variable-grid-gutter-mobile">grid-gutter-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-gutter-tablet" data-type="variable"><a href="#grid-variable-grid-gutter-tablet">grid-gutter-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-gutter-laptop" data-type="variable"><a href="#grid-variable-grid-gutter-laptop">grid-gutter-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-gutter-desktop" data-type="variable"><a href="#grid-variable-grid-gutter-desktop">grid-gutter-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-row-height" data-type="variable"><a href="#grid-variable-grid-row-height">grid-row-height</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-margin-base" data-type="variable"><a href="#grid-variable-grid-container-margin-base">grid-container-margin-base</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-padding-base" data-type="variable"><a href="#grid-variable-grid-container-padding-base">grid-container-padding-base</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-margin" data-type="variable"><a href="#grid-variable-grid-container-margin">grid-container-margin</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-margin-small" data-type="variable"><a href="#grid-variable-grid-container-margin-small">grid-container-margin-small</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-margin-big" data-type="variable"><a href="#grid-variable-grid-container-margin-big">grid-container-margin-big</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-padding" data-type="variable"><a href="#grid-variable-grid-container-padding">grid-container-padding</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-padding-small" data-type="variable"><a href="#grid-variable-grid-container-padding-small">grid-container-padding-small</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-padding-big" data-type="variable"><a href="#grid-variable-grid-container-padding-big">grid-container-padding-big</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-size" data-type="variable"><a href="#grid-variable-grid-container-size">grid-container-size</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-size-small" data-type="variable"><a href="#grid-variable-grid-container-size-small">grid-container-size-small</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-container-size-big" data-type="variable"><a href="#grid-variable-grid-container-size-big">grid-container-size-big</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-0" data-type="variable"><a href="#grid-variable-grid-margin-0">grid-margin-0</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-1" data-type="variable"><a href="#grid-variable-grid-margin-1">grid-margin-1</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-2" data-type="variable"><a href="#grid-variable-grid-margin-2">grid-margin-2</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-3" data-type="variable"><a href="#grid-variable-grid-margin-3">grid-margin-3</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-4" data-type="variable"><a href="#grid-variable-grid-margin-4">grid-margin-4</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-5" data-type="variable"><a href="#grid-variable-grid-margin-5">grid-margin-5</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-6" data-type="variable"><a href="#grid-variable-grid-margin-6">grid-margin-6</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-7" data-type="variable"><a href="#grid-variable-grid-margin-7">grid-margin-7</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-8" data-type="variable"><a href="#grid-variable-grid-margin-8">grid-margin-8</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-9" data-type="variable"><a href="#grid-variable-grid-margin-9">grid-margin-9</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="grid-margin-10" data-type="variable"><a href="#grid-variable-grid-margin-10">grid-margin-10</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-group="grid" data-name="container" data-type="mixin"><a href="#grid-mixin-container">container</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="container--big" data-type="mixin"><a href="#grid-mixin-container--big">container--big</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="container--small" data-type="mixin"><a href="#grid-mixin-container--small">container--small</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="clearfix" data-type="mixin"><a href="#grid-mixin-clearfix">clearfix</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="container-margin" data-type="mixin"><a href="#grid-mixin-container-margin">container-margin</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="container-padding" data-type="mixin"><a href="#grid-mixin-container-padding">container-padding</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="breakout-margin" data-type="mixin"><a href="#grid-mixin-breakout-margin">breakout-margin</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="breakout-padding" data-type="mixin"><a href="#grid-mixin-breakout-padding">breakout-padding</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="breakout" data-type="mixin"><a href="#grid-mixin-breakout">breakout</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="columns-smart" data-type="mixin"><a href="#grid-mixin-columns-smart">columns-smart</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="columns-responsive" data-type="mixin"><a href="#grid-mixin-columns-responsive">columns-responsive</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="columns-mobile" data-type="mixin"><a href="#grid-mixin-columns-mobile">columns-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="columns-tablet" data-type="mixin"><a href="#grid-mixin-columns-tablet">columns-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="columns-laptop" data-type="mixin"><a href="#grid-mixin-columns-laptop">columns-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="columns-desktop" data-type="mixin"><a href="#grid-mixin-columns-desktop">columns-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="columns" data-type="mixin"><a href="#grid-mixin-columns">columns</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="columns-layout" data-type="mixin"><a href="#grid-mixin-columns-layout">columns-layout</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="gutter" data-type="mixin"><a href="#grid-mixin-gutter">gutter</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="omega" data-type="mixin"><a href="#grid-mixin-omega">omega</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="omega-smart" data-type="mixin"><a href="#grid-mixin-omega-smart">omega-smart</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="omega-smart-mobile" data-type="mixin"><a href="#grid-mixin-omega-smart-mobile">omega-smart-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="omega-smart-tablet" data-type="mixin"><a href="#grid-mixin-omega-smart-tablet">omega-smart-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="omega-smart-laptop" data-type="mixin"><a href="#grid-mixin-omega-smart-laptop">omega-smart-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="omega-smart-desktop" data-type="mixin"><a href="#grid-mixin-omega-smart-desktop">omega-smart-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="omega-nth" data-type="mixin"><a href="#grid-mixin-omega-nth">omega-nth</a></li><li class="sidebar__item sassdoc__item" data-group="grid" data-name="rows" data-type="mixin"><a href="#grid-mixin-rows">rows</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="grid-function"><a href="#grid-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="grid" data-name="columns" data-type="function"><a href="#grid-function-columns">columns</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="responsive"><a href="#responsive">responsive</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="responsive-variable"><a href="#responsive-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="breakpoint-mobile-s" data-type="variable"><a href="#responsive-variable-breakpoint-mobile-s">breakpoint-mobile-s</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="breakpoint-mobile-m" data-type="variable"><a href="#responsive-variable-breakpoint-mobile-m">breakpoint-mobile-m</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="breakpoint-mobile-l" data-type="variable"><a href="#responsive-variable-breakpoint-mobile-l">breakpoint-mobile-l</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="breakpoint-tablet" data-type="variable"><a href="#responsive-variable-breakpoint-tablet">breakpoint-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="breakpoint-laptop" data-type="variable"><a href="#responsive-variable-breakpoint-laptop">breakpoint-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="breakpoint-desktop" data-type="variable"><a href="#responsive-variable-breakpoint-desktop">breakpoint-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="responsive-default-media" data-type="variable"><a href="#responsive-variable-responsive-default-media">responsive-default-media</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="responsive-mixin"><a href="#responsive-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="breakpoint" data-type="mixin"><a href="#responsive-mixin-breakpoint">breakpoint</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="responsive" data-type="mixin"><a href="#responsive-mixin-responsive">responsive</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="mobile-only" data-type="mixin"><a href="#responsive-mixin-mobile-only">mobile-only</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="tablet" data-type="mixin"><a href="#responsive-mixin-tablet">tablet</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="laptop" data-type="mixin"><a href="#responsive-mixin-laptop">laptop</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="desktop" data-type="mixin"><a href="#responsive-mixin-desktop">desktop</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="show-on-mobile" data-type="mixin"><a href="#responsive-mixin-show-on-mobile">show-on-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="show-on-tablet" data-type="mixin"><a href="#responsive-mixin-show-on-tablet">show-on-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="show-on-laptop" data-type="mixin"><a href="#responsive-mixin-show-on-laptop">show-on-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="show-on-desktop" data-type="mixin"><a href="#responsive-mixin-show-on-desktop">show-on-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="hide-on-mobile" data-type="mixin"><a href="#responsive-mixin-hide-on-mobile">hide-on-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="hide-on-tablet" data-type="mixin"><a href="#responsive-mixin-hide-on-tablet">hide-on-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="hide-on-laptop" data-type="mixin"><a href="#responsive-mixin-hide-on-laptop">hide-on-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="responsive" data-name="hide-on-desktop" data-type="mixin"><a href="#responsive-mixin-hide-on-desktop">hide-on-desktop</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="transform"><a href="#transform">transform</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="transform-variable"><a href="#transform-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="transform" data-name="transform-shadow-default-color" data-type="variable"><a href="#transform-variable-transform-shadow-default-color">transform-shadow-default-color</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="transform-shadow-default-offset-x" data-type="variable"><a href="#transform-variable-transform-shadow-default-offset-x">transform-shadow-default-offset-x</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="transform-shadow-default-offset-y" data-type="variable"><a href="#transform-variable-transform-shadow-default-offset-y">transform-shadow-default-offset-y</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="transform-shadow-default-blur" data-type="variable"><a href="#transform-variable-transform-shadow-default-blur">transform-shadow-default-blur</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="transform-shadow-default-spread" data-type="variable"><a href="#transform-variable-transform-shadow-default-spread">transform-shadow-default-spread</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="transform-mixin"><a href="#transform-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="transform" data-name="absolute" data-type="mixin"><a href="#transform-mixin-absolute">absolute</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="aspect-ratio" data-type="mixin"><a href="#transform-mixin-aspect-ratio">aspect-ratio</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="center-h" data-type="mixin"><a href="#transform-mixin-center-h">center-h</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="center-v" data-type="mixin"><a href="#transform-mixin-center-v">center-v</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="center-hv" data-type="mixin"><a href="#transform-mixin-center-hv">center-hv</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="overlay" data-type="mixin"><a href="#transform-mixin-overlay">overlay</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="rounded" data-type="mixin"><a href="#transform-mixin-rounded">rounded</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="shadow" data-type="mixin"><a href="#transform-mixin-shadow">shadow</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="rotate" data-type="mixin"><a href="#transform-mixin-rotate">rotate</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="scale" data-type="mixin"><a href="#transform-mixin-scale">scale</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="translate" data-type="mixin"><a href="#transform-mixin-translate">translate</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="transform-function"><a href="#transform-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="transform" data-name="tr_rotate" data-type="function"><a href="#transform-function-tr_rotate">tr_rotate</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="tr_scale" data-type="function"><a href="#transform-function-tr_scale">tr_scale</a></li><li class="sidebar__item sassdoc__item" data-group="transform" data-name="tr_translate" data-type="function"><a href="#transform-function-tr_translate">tr_translate</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="typography"><a href="#typography">typography</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="typography-variable"><a href="#typography-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-color-base" data-type="variable"><a href="#typography-variable-typography-color-base">typography-color-base</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-color-text" data-type="variable"><a href="#typography-variable-typography-color-text">typography-color-text</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-color-link" data-type="variable"><a href="#typography-variable-typography-color-link">typography-color-link</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-color-link-hover" data-type="variable"><a href="#typography-variable-typography-color-link-hover">typography-color-link-hover</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-color-h" data-type="variable"><a href="#typography-variable-typography-color-h">typography-color-h</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-color-border" data-type="variable"><a href="#typography-variable-typography-color-border">typography-color-border</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-default-hover-link" data-type="variable"><a href="#typography-variable-typography-default-hover-link">typography-default-hover-link</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-decoration-link" data-type="variable"><a href="#typography-variable-typography-decoration-link">typography-decoration-link</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-family-base" data-type="variable"><a href="#typography-variable-typography-font-family-base">typography-font-family-base</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-family-text" data-type="variable"><a href="#typography-variable-typography-font-family-text">typography-font-family-text</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-family-h" data-type="variable"><a href="#typography-variable-typography-font-family-h">typography-font-family-h</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text" data-type="variable"><a href="#typography-variable-typography-font-size-text">typography-font-size-text</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-mobile" data-type="variable"><a href="#typography-variable-typography-font-size-text-mobile">typography-font-size-text-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-tablet" data-type="variable"><a href="#typography-variable-typography-font-size-text-tablet">typography-font-size-text-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-laptop" data-type="variable"><a href="#typography-variable-typography-font-size-text-laptop">typography-font-size-text-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-desktop" data-type="variable"><a href="#typography-variable-typography-font-size-text-desktop">typography-font-size-text-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-big" data-type="variable"><a href="#typography-variable-typography-font-size-text-big">typography-font-size-text-big</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-big-mobile" data-type="variable"><a href="#typography-variable-typography-font-size-text-big-mobile">typography-font-size-text-big-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-big-tablet" data-type="variable"><a href="#typography-variable-typography-font-size-text-big-tablet">typography-font-size-text-big-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-big-laptop" data-type="variable"><a href="#typography-variable-typography-font-size-text-big-laptop">typography-font-size-text-big-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-big-desktop" data-type="variable"><a href="#typography-variable-typography-font-size-text-big-desktop">typography-font-size-text-big-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-small" data-type="variable"><a href="#typography-variable-typography-font-size-text-small">typography-font-size-text-small</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-small-mobile" data-type="variable"><a href="#typography-variable-typography-font-size-text-small-mobile">typography-font-size-text-small-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-small-tablet" data-type="variable"><a href="#typography-variable-typography-font-size-text-small-tablet">typography-font-size-text-small-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-small-laptop" data-type="variable"><a href="#typography-variable-typography-font-size-text-small-laptop">typography-font-size-text-small-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-text-small-desktop" data-type="variable"><a href="#typography-variable-typography-font-size-text-small-desktop">typography-font-size-text-small-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h1" data-type="variable"><a href="#typography-variable-typography-font-size-h1">typography-font-size-h1</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h1-mobile" data-type="variable"><a href="#typography-variable-typography-font-size-h1-mobile">typography-font-size-h1-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h1-tablet" data-type="variable"><a href="#typography-variable-typography-font-size-h1-tablet">typography-font-size-h1-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h1-laptop" data-type="variable"><a href="#typography-variable-typography-font-size-h1-laptop">typography-font-size-h1-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h1-desktop" data-type="variable"><a href="#typography-variable-typography-font-size-h1-desktop">typography-font-size-h1-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h2" data-type="variable"><a href="#typography-variable-typography-font-size-h2">typography-font-size-h2</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h2-mobile" data-type="variable"><a href="#typography-variable-typography-font-size-h2-mobile">typography-font-size-h2-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h2-tablet" data-type="variable"><a href="#typography-variable-typography-font-size-h2-tablet">typography-font-size-h2-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h2-laptop" data-type="variable"><a href="#typography-variable-typography-font-size-h2-laptop">typography-font-size-h2-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h2-desktop" data-type="variable"><a href="#typography-variable-typography-font-size-h2-desktop">typography-font-size-h2-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h3" data-type="variable"><a href="#typography-variable-typography-font-size-h3">typography-font-size-h3</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h3-mobile" data-type="variable"><a href="#typography-variable-typography-font-size-h3-mobile">typography-font-size-h3-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h3-tablet" data-type="variable"><a href="#typography-variable-typography-font-size-h3-tablet">typography-font-size-h3-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h3-laptop" data-type="variable"><a href="#typography-variable-typography-font-size-h3-laptop">typography-font-size-h3-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h3-desktop" data-type="variable"><a href="#typography-variable-typography-font-size-h3-desktop">typography-font-size-h3-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h4" data-type="variable"><a href="#typography-variable-typography-font-size-h4">typography-font-size-h4</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h4-mobile" data-type="variable"><a href="#typography-variable-typography-font-size-h4-mobile">typography-font-size-h4-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h4-tablet" data-type="variable"><a href="#typography-variable-typography-font-size-h4-tablet">typography-font-size-h4-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h4-laptop" data-type="variable"><a href="#typography-variable-typography-font-size-h4-laptop">typography-font-size-h4-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h4-desktop" data-type="variable"><a href="#typography-variable-typography-font-size-h4-desktop">typography-font-size-h4-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h5" data-type="variable"><a href="#typography-variable-typography-font-size-h5">typography-font-size-h5</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h5-mobile" data-type="variable"><a href="#typography-variable-typography-font-size-h5-mobile">typography-font-size-h5-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h5-tablet" data-type="variable"><a href="#typography-variable-typography-font-size-h5-tablet">typography-font-size-h5-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h5-laptop" data-type="variable"><a href="#typography-variable-typography-font-size-h5-laptop">typography-font-size-h5-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h5-desktop" data-type="variable"><a href="#typography-variable-typography-font-size-h5-desktop">typography-font-size-h5-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h6" data-type="variable"><a href="#typography-variable-typography-font-size-h6">typography-font-size-h6</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h6-mobile" data-type="variable"><a href="#typography-variable-typography-font-size-h6-mobile">typography-font-size-h6-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h6-tablet" data-type="variable"><a href="#typography-variable-typography-font-size-h6-tablet">typography-font-size-h6-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h6-laptop" data-type="variable"><a href="#typography-variable-typography-font-size-h6-laptop">typography-font-size-h6-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-size-h6-desktop" data-type="variable"><a href="#typography-variable-typography-font-size-h6-desktop">typography-font-size-h6-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-weight-text" data-type="variable"><a href="#typography-variable-typography-font-weight-text">typography-font-weight-text</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-weight-h" data-type="variable"><a href="#typography-variable-typography-font-weight-h">typography-font-weight-h</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-weight-h1" data-type="variable"><a href="#typography-variable-typography-font-weight-h1">typography-font-weight-h1</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-weight-h2" data-type="variable"><a href="#typography-variable-typography-font-weight-h2">typography-font-weight-h2</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-weight-h3" data-type="variable"><a href="#typography-variable-typography-font-weight-h3">typography-font-weight-h3</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-weight-h4" data-type="variable"><a href="#typography-variable-typography-font-weight-h4">typography-font-weight-h4</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-weight-h5" data-type="variable"><a href="#typography-variable-typography-font-weight-h5">typography-font-weight-h5</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-font-weight-h6" data-type="variable"><a href="#typography-variable-typography-font-weight-h6">typography-font-weight-h6</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-base" data-type="variable"><a href="#typography-variable-typography-line-height-base">typography-line-height-base</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text" data-type="variable"><a href="#typography-variable-typography-line-height-text">typography-line-height-text</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-mobile" data-type="variable"><a href="#typography-variable-typography-line-height-text-mobile">typography-line-height-text-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-tablet" data-type="variable"><a href="#typography-variable-typography-line-height-text-tablet">typography-line-height-text-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-laptop" data-type="variable"><a href="#typography-variable-typography-line-height-text-laptop">typography-line-height-text-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-desktop" data-type="variable"><a href="#typography-variable-typography-line-height-text-desktop">typography-line-height-text-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-big" data-type="variable"><a href="#typography-variable-typography-line-height-text-big">typography-line-height-text-big</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-big-mobile" data-type="variable"><a href="#typography-variable-typography-line-height-text-big-mobile">typography-line-height-text-big-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-big-tablet" data-type="variable"><a href="#typography-variable-typography-line-height-text-big-tablet">typography-line-height-text-big-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-big-laptop" data-type="variable"><a href="#typography-variable-typography-line-height-text-big-laptop">typography-line-height-text-big-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-big-desktop" data-type="variable"><a href="#typography-variable-typography-line-height-text-big-desktop">typography-line-height-text-big-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-small" data-type="variable"><a href="#typography-variable-typography-line-height-text-small">typography-line-height-text-small</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-small-mobile" data-type="variable"><a href="#typography-variable-typography-line-height-text-small-mobile">typography-line-height-text-small-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-small-tablet" data-type="variable"><a href="#typography-variable-typography-line-height-text-small-tablet">typography-line-height-text-small-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-small-laptop" data-type="variable"><a href="#typography-variable-typography-line-height-text-small-laptop">typography-line-height-text-small-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-text-small-desktop" data-type="variable"><a href="#typography-variable-typography-line-height-text-small-desktop">typography-line-height-text-small-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h" data-type="variable"><a href="#typography-variable-typography-line-height-h">typography-line-height-h</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h1" data-type="variable"><a href="#typography-variable-typography-line-height-h1">typography-line-height-h1</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h1-mobile" data-type="variable"><a href="#typography-variable-typography-line-height-h1-mobile">typography-line-height-h1-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h1-tablet" data-type="variable"><a href="#typography-variable-typography-line-height-h1-tablet">typography-line-height-h1-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h1-laptop" data-type="variable"><a href="#typography-variable-typography-line-height-h1-laptop">typography-line-height-h1-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h1-desktop" data-type="variable"><a href="#typography-variable-typography-line-height-h1-desktop">typography-line-height-h1-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h2" data-type="variable"><a href="#typography-variable-typography-line-height-h2">typography-line-height-h2</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h2-mobile" data-type="variable"><a href="#typography-variable-typography-line-height-h2-mobile">typography-line-height-h2-mobile</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h2-tablet" data-type="variable"><a href="#typography-variable-typography-line-height-h2-tablet">typography-line-height-h2-tablet</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h2-laptop" data-type="variable"><a href="#typography-variable-typography-line-height-h2-laptop">typography-line-height-h2-laptop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h2-desktop" data-type="variable"><a href="#typography-variable-typography-line-height-h2-desktop">typography-line-height-h2-desktop</a></li><li class="sidebar__item sassdoc__item" data-group="typography" data-name="typography-line-height-h3" data-type="variable"><a href="#typography-variable-typography-line-height-h3">typography-line-height-h3</a></li><li class="sidebar__item sassdoc__item" data-g