840 lines
54 KiB
HTML
840 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Hugo Zen Style Guide</title>
|
|
|
|
<meta name="description" content="">
|
|
<meta name="generator" content="kss-node">
|
|
<meta name="viewport" content="width=device-width">
|
|
|
|
<link rel="stylesheet" href="kss-assets/kss.css">
|
|
<link rel="stylesheet" href="../static/css/styles.css">
|
|
<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
|
|
<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
|
|
|
|
</head>
|
|
<body id="kss-node" >
|
|
|
|
<div class="kss-sidebar kss-style">
|
|
<header class="kss-header">
|
|
<h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
|
|
</header>
|
|
<nav class="kss-nav">
|
|
<ul class="kss-nav__menu">
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="./">
|
|
<span class="kss-nav__ref">0</span
|
|
><span class="kss-nav__name">Overview</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html">
|
|
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
|
|
</a>
|
|
<ul class="kss-nav__menu-child">
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-colors">
|
|
<span class="kss-nav__ref ">1.1</span
|
|
><span class="kss-nav__name">Colors</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-init">
|
|
<span class="kss-nav__ref ">1.2</span
|
|
><span class="kss-nav__name">Initialization partial</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-modules">
|
|
<span class="kss-nav__ref ">1.3</span
|
|
><span class="kss-nav__name">3rd party libraries</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables">
|
|
<span class="kss-nav__ref ">1.4</span
|
|
><span class="kss-nav__name">Variables</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-breakpoints">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.4.1</span
|
|
><span class="kss-nav__name">Breakpoints</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-support-for">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.4.2</span
|
|
><span class="kss-nav__name">Browser support</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-typey">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.4.3</span
|
|
><span class="kss-nav__name">Font faces, stacks and sizes.</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-zen-grids">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.4.4</span
|
|
><span class="kss-nav__name">Zen grids</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-variables-misc">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.4.5</span
|
|
><span class="kss-nav__name">Miscellaneous variables</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-functions">
|
|
<span class="kss-nav__ref ">1.5</span
|
|
><span class="kss-nav__name">Functions</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins">
|
|
<span class="kss-nav__ref ">1.6</span
|
|
><span class="kss-nav__name">Mixins</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-clearfix">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.6.1</span
|
|
><span class="kss-nav__name">clearfix()</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-image-url">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.6.2</span
|
|
><span class="kss-nav__name">image-url()</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-rtl">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.6.3</span
|
|
><span class="kss-nav__name">rtl()</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.6.4</span
|
|
><span class="kss-nav__name">visually-hidden()</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden--focusable">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.6.5</span
|
|
><span class="kss-nav__name">visually-hidden--focusable()</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-sass.html#kssref-sass-mixins-visually-hidden--off">
|
|
<span class="kss-nav__ref kss-nav__ref-child">1.6.6</span
|
|
><span class="kss-nav__name">visually-hidden--off()</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-base.html">
|
|
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-layouts.html">
|
|
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-components.html">
|
|
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
|
|
</a>
|
|
</li>
|
|
<li class="kss-nav__menu-item">
|
|
<a class="kss-nav__menu-link" href="section-navigation.html">
|
|
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<article role="main" class="kss-main">
|
|
|
|
|
|
<div id="kssref-sass" class="kss-section kss-section--depth-1 ">
|
|
<div class="kss-style">
|
|
<h1 class="kss-title kss-title--level-1">
|
|
<a class="kss-title__permalink" href="#kssref-sass">
|
|
<span class="kss-title__ref">
|
|
1
|
|
<span class="kss-title__permalink-hash">
|
|
sass
|
|
</span>
|
|
</span>
|
|
Colors and Sass
|
|
</a>
|
|
</h1>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Documentation for colors and Sass mixins and variables.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>styles.scss</code>, line 8
|
|
</div>
|
|
</div>
|
|
<section id="kssref-sass-colors" class="kss-section kss-section--depth-2 ">
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-sass-colors">
|
|
<span class="kss-title__ref">
|
|
1.1
|
|
<span class="kss-title__permalink-hash">
|
|
sass.colors
|
|
</span>
|
|
</span>
|
|
Colors
|
|
</a>
|
|
</h2>
|
|
|
|
<p class="kss-toolbar">
|
|
<a href="#kssref-sass-colors" data-kss-fullscreen="kssref-sass-colors">
|
|
<span class="kss-toolbar__tooltip">Toggle full screen</span>
|
|
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
|
|
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
|
|
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
|
|
</svg>
|
|
</a>
|
|
<a href="item-sass-colors.html" target="_blank">
|
|
<span class="kss-toolbar__tooltip">Open in new window</span>
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
|
|
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
|
|
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
|
|
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
|
|
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-sass-colors" data-kss-guides="true">
|
|
<span class="kss-toolbar__tooltip">Toggle example guides</span>
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
|
|
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
|
|
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
|
|
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
|
|
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
|
|
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
|
|
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
|
|
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
|
|
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
|
|
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
|
|
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
|
|
</svg>
|
|
</a>
|
|
<a href="#kssref-sass-colors" data-kss-markup="true">
|
|
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
|
|
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
|
|
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
|
|
</svg>
|
|
</a>
|
|
</p>
|
|
|
|
<div class="kss-description">
|
|
<p>Use the <code>color()</code> function to add colors to CSS properties. To learn more,
|
|
<a href="http://johnalbin.github.io/chroma/">read the Chroma documentation</a>.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-modifier__wrapper">
|
|
<div class="kss-modifier__heading kss-style">
|
|
Example </div>
|
|
|
|
|
|
<div class="kss-modifier__example">
|
|
/*! typey | GPLv2 License | https://github.com/jptaranto/typey <!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">branding</h3><p class="chroma-kss__description">The site's main colors. Can be used to define colors in other color schemes.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code></span> <span class="chroma-kss__reference">This color is inherited by: nearblack, grey-dark, grey, grey-light, grey-extra-light, brand, brand-alt, brand-dark, text, link, link-visited, link-hover, border, border-dark, autocomplete, header-bg, backdrop, button, button-disabled, fieldset-summary, menu-active, progress-bar-bg, progress-bar-border, resizable-grippie, row-disabled, skip-link-bg, status-highlight, warning, tabs-border, tab, tab-bg, tab-secondary, watermark, headings</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(nearblack)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: brand, link-hover, border-dark, header-bg, button, headings</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(grey-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: brand-dark, progress-bar-border, skip-link-bg, tab-secondary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: brand-alt, button-disabled, fieldset-summary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(grey-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: border, progress-bar-bg, row-disabled, tabs-border, tab-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(grey-extra-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: backdrop, resizable-grippie, watermark</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code></span> <span class="chroma-kss__reference">This color is inherited by: text-bg, autocomplete-bg, autocomplete-select, body-bg, row-stripe, skip-link, tabs-bg, tab-text-shadow</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code></span> <span class="chroma-kss__reference">This color is inherited by: autocomplete-select-bg, progress-bar</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(red)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code></span> <span class="chroma-kss__reference">This color is inherited by: link-active, form-error, mark-highlight, error, error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #43a808"></span><code class="chroma-kss__variable">color(green)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#43a808</code></span> <span class="chroma-kss__reference">This color is inherited by: status, status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(yellow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code></span> <span class="chroma-kss__reference">This color is inherited by: mark-bg, preview-bg, warning-bg, warning-border, table-drag, table-select</span></div><h3 class="chroma-kss__title">functional</h3><p class="chroma-kss__description">Colors used by functional parts of the design.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(brand)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (nearblack)</span> <span class="chroma-kss__reference">This color is inherited by: link-hover, header-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(brand-alt)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(brand-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(text)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (black)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete, menu-active, status-highlight, warning, tab</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(text-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete-bg, tabs-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (black)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(link-visited)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (black)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(link-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (brand)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(link-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span> <span class="chroma-kss__reference">This color is inherited by: tabs-border</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(border-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (nearblack)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(autocomplete)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(autocomplete-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(autocomplete-select-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(body-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(header-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (brand)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(backdrop)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(button)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (nearblack)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(button-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(fieldset-summary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code> (grey)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(form-error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(mark-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(mark-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(menu-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(preview-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(progress-bar)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0072b9</code> (blue)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(progress-bar-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(progress-bar-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(resizable-grippie)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(row-stripe)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(row-disabled)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(skip-link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(skip-link-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #43a808"></span><code class="chroma-kss__variable">color(status)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#43a808</code> (green)</span> <span class="chroma-kss__reference">This color is inherited by: status-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f4feee"></span><code class="chroma-kss__variable">color(status-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f4feee</code> (status)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(status-highlight)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(warning)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffce6"></span><code class="chroma-kss__variable">color(warning-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffce6</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fd0"></span><code class="chroma-kss__variable">color(warning-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fd0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#c00</code> (red)</span> <span class="chroma-kss__reference">This color is inherited by: error-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff0f0"></span><code class="chroma-kss__variable">color(error-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff0f0</code> (error)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #cccccc"></span><code class="chroma-kss__variable">color(tabs-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#cccccc</code> (border)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tabs-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (text-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(tab)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(tab-text-shadow)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (white)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #dddddd"></span><code class="chroma-kss__variable">color(tab-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#dddddd</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666666"></span><code class="chroma-kss__variable">color(tab-secondary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffadb"></span><code class="chroma-kss__variable">color(table-drag)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffadb</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fffdf0"></span><code class="chroma-kss__variable">color(table-select)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fffdf0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eeeeee"></span><code class="chroma-kss__variable">color(watermark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eeeeee</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333333"></span><code class="chroma-kss__variable">color(headings)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333333</code> (nearblack)</span></div></div>
|
|
|
|
<div class="kss-modifier__example-footer"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/_colors.scss</code>, line 3
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-init" class="kss-section kss-section--depth-2 ">
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-sass-init">
|
|
<span class="kss-title__ref">
|
|
1.2
|
|
<span class="kss-title__permalink-hash">
|
|
sass.init
|
|
</span>
|
|
</span>
|
|
Initialization partial
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>To make it easier to use all variables and mixins in any Sass file in this
|
|
project, each .scss file has a <code>@import 'init';</code> declaration. The _init.scss
|
|
file is in charge of importing all the other partials needed for the
|
|
project.</p>
|
|
<p>The initialization partial is organized in this way:</p>
|
|
<ul>
|
|
<li>First we set any shared Sass variables.</li>
|
|
<li>Next we import Sass modules.</li>
|
|
<li>Last we define our custom mixins for this project.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_init.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-modules" class="kss-section kss-section--depth-2 ">
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-sass-modules">
|
|
<span class="kss-title__ref">
|
|
1.3
|
|
<span class="kss-title__permalink-hash">
|
|
sass.modules
|
|
</span>
|
|
</span>
|
|
3rd party libraries
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>The following sass modules are shared with all .scss files:</p>
|
|
<ul>
|
|
<li><a href="http://breakpoint-sass.com/">Breakpoint</a></li>
|
|
<li><a href="https://github.com/JohnAlbin/chroma">Chroma</a></li>
|
|
<li><a href="https://github.com/JohnAlbin/support-for">Support-for</a></li>
|
|
<li><a href="https://github.com/jptaranto/typey">Typey</a></li>
|
|
<li><a href="http://zengrids.com/help/">Zen Grids</a></li>
|
|
</ul>
|
|
<p>Additional pre-built libraries can be found on the <a href="http://www.sache.in/">Sache website</a>.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_init.scss</code>, line 27
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-variables" class="kss-section kss-section--depth-2 ">
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-sass-variables">
|
|
<span class="kss-title__ref">
|
|
1.4
|
|
<span class="kss-title__permalink-hash">
|
|
sass.variables
|
|
</span>
|
|
</span>
|
|
Variables
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Set variables for this site before a library sets its !default value.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/_variables.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-variables-breakpoints" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-variables-breakpoints">
|
|
<span class="kss-title__ref">
|
|
1.4.1
|
|
<span class="kss-title__permalink-hash">
|
|
sass.variables.breakpoints
|
|
</span>
|
|
</span>
|
|
Breakpoints
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Use the <code>respond-to()</code> mixin to use named breakpoints. Documentation is
|
|
available in the <a href="https://github.com/at-import/breakpoint/wiki/Respond-To">Breakpoint wiki
|
|
pages</a>.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/_variables.scss</code>, line 138
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-variables-support-for" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-variables-support-for">
|
|
<span class="kss-title__ref">
|
|
1.4.2
|
|
<span class="kss-title__permalink-hash">
|
|
sass.variables.support-for
|
|
</span>
|
|
</span>
|
|
Browser support
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>For older versions of browsers, some Sass relies on the <code>support-for()</code> to
|
|
control whether extra CSS is needed to be output. The <code>support-for()</code>
|
|
function and the <code>$support-for</code> variable are documented on the <a href="https://github.com/JohnAlbin/support-for">support-for
|
|
homepage</a>.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/_variables.scss</code>, line 8
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-variables-typey" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-variables-typey">
|
|
<span class="kss-title__ref">
|
|
1.4.3
|
|
<span class="kss-title__permalink-hash">
|
|
sass.variables.typey
|
|
</span>
|
|
</span>
|
|
Font faces, stacks and sizes.
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Font styling and line heights are controlled by the several variables that
|
|
used by mixins like <code>type-layout()</code>, <code>margin-top()</code>, and <code>margin-bottom()</code>.
|
|
These variable and mixins are documented on the <a href="https://github.com/jptaranto/typey">Typey
|
|
homepage</a>.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/_variables.scss</code>, line 27
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-variables-zen-grids" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-variables-zen-grids">
|
|
<span class="kss-title__ref">
|
|
1.4.4
|
|
<span class="kss-title__permalink-hash">
|
|
sass.variables.zen-grids
|
|
</span>
|
|
</span>
|
|
Zen grids
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>The default grid system is built using the Zen Grids sass module. Full
|
|
documentation is available on the <a href="http://zengrids.com/">Zen Grids website</a>.</p>
|
|
<p>Note: if you are more comfortable using another grid system, you can easily
|
|
remove Zen Grids and its layouts.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/_variables.scss</code>, line 160
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-variables-misc" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-variables-misc">
|
|
<span class="kss-title__ref">
|
|
1.4.5
|
|
<span class="kss-title__permalink-hash">
|
|
sass.variables.misc
|
|
</span>
|
|
</span>
|
|
Miscellaneous variables
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p><code>$indent-amount</code> controls the amount lists, blockquotes and comments are indented.</p>
|
|
<p><code>$include-rtl</code> controls whether RTL styles are output. Rather than include a separate <code>*-rtl.css</code> file, Zen 6 uses Drupal 8's standard <code>[dir="rtl"]</code> selector for RTL language support.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/_variables.scss</code>, line 199
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-functions" class="kss-section kss-section--depth-2 ">
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-sass-functions">
|
|
<span class="kss-title__ref">
|
|
1.5
|
|
<span class="kss-title__permalink-hash">
|
|
sass.functions
|
|
</span>
|
|
</span>
|
|
Functions
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Custom functions used on this site.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_init.scss</code>, line 62
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-mixins" class="kss-section kss-section--depth-2 ">
|
|
<div class="kss-style">
|
|
<h2 class="kss-title kss-title--level-2">
|
|
<a class="kss-title__permalink" href="#kssref-sass-mixins">
|
|
<span class="kss-title__ref">
|
|
1.6
|
|
<span class="kss-title__permalink-hash">
|
|
sass.mixins
|
|
</span>
|
|
</span>
|
|
Mixins
|
|
</a>
|
|
</h2>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Custom mixins used on this site.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>_init.scss</code>, line 51
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-mixins-clearfix" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-mixins-clearfix">
|
|
<span class="kss-title__ref">
|
|
1.6.1
|
|
<span class="kss-title__permalink-hash">
|
|
sass.mixins.clearfix
|
|
</span>
|
|
</span>
|
|
clearfix()
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Allows the bottom of an element to extend to the bottom of all floated
|
|
children elements. @see <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a></p>
|
|
<p>We use the micro-clearfix, optimized for use in <code>@extend</code> where fewer <code>&</code> is
|
|
better.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/clearfix/_clearfix.scss</code>, line 1
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-mixins-image-url" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-mixins-image-url">
|
|
<span class="kss-title__ref">
|
|
1.6.2
|
|
<span class="kss-title__permalink-hash">
|
|
sass.mixins.image-url
|
|
</span>
|
|
</span>
|
|
image-url()
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>If you include your images next to your component Sass files, you need to
|
|
specify a url() to point from the generated CSS to the Sass source like this:</p>
|
|
<pre><code class="lang-css">content: url(../sass/components/is-quite/long.svg);
|
|
</code></pre>
|
|
<p>With the <code>image-url()</code> function the path to all your components is assumed to
|
|
start with <code>../sass/components/</code> and you just need to give it the last, short
|
|
bit of the path in your Sass code like this:</p>
|
|
<pre><code class="lang-scss">content: image-url(is-quite/short.svg);
|
|
</code></pre>
|
|
<p>If you want to point at an image that is not in the components sub-directory
|
|
of your sass directory, you can override the default $subdirectory by
|
|
passing it in as the first parameter of <code>image-url()</code> like this:</p>
|
|
<pre><code class="lang-scss">content: image-url(base, grouping/blockquote.svg);
|
|
</code></pre>
|
|
<p>which would output <code>url(../sass/base/grouping/blockquote.svg)</code>.</p>
|
|
|
|
</div>
|
|
|
|
<div class="kss-parameters__title">Parameters:</div>
|
|
<ul class="kss-parameters">
|
|
<li class="kss-parameters__item">
|
|
<div class="kss-parameters__name"><code>$subdirectory</code></div>
|
|
<div class="kss-parameters__description">
|
|
Optional. The relative path from the root of your Sass source to the sub-directory where components usually lie.
|
|
<div class="kss-parameters__default-value">
|
|
Defaults to: <code>$image-url-subdirectory</code>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="kss-parameters__item">
|
|
<div class="kss-parameters__name"><code>$path</code></div>
|
|
<div class="kss-parameters__description">
|
|
Required. The path to the image relative to the <code>$subdirectory</code>.
|
|
</div>
|
|
</li>
|
|
<li class="kss-parameters__item">
|
|
<div class="kss-parameters__name"><code>$path-to-source</code></div>
|
|
<div class="kss-parameters__description">
|
|
Optional. The relative path from the css build directory to the sass source directory.
|
|
<div class="kss-parameters__default-value">
|
|
Defaults to: <code>$image-url-path-to-source</code>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/image-url/_image-url.scss</code>, line 6
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-mixins-rtl" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-mixins-rtl">
|
|
<span class="kss-title__ref">
|
|
1.6.3
|
|
<span class="kss-title__permalink-hash">
|
|
sass.mixins.rtl
|
|
</span>
|
|
</span>
|
|
rtl()
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Includes Right-To-Left language support by adding a parent selector of
|
|
<code>[dir="rtl"]</code>. Since the dir attribute is usually defined on the html element
|
|
of a page, using this mixin on a ruleset that matches the html element won't
|
|
work.</p>
|
|
<p>Can be turned off globally by setting <code>$include-rtl: false;</code>.</p>
|
|
|
|
</div>
|
|
|
|
<div class="kss-parameters__title">Parameters:</div>
|
|
<ul class="kss-parameters">
|
|
<li class="kss-parameters__item">
|
|
<div class="kss-parameters__name"><code>$selector</code></div>
|
|
<div class="kss-parameters__description">
|
|
The RTL parent selector.
|
|
<div class="kss-parameters__default-value">
|
|
Defaults to: <code>'[dir="rtl"]'</code>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/rtl/_rtl.scss</code>, line 3
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-mixins-visually-hidden" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden">
|
|
<span class="kss-title__ref">
|
|
1.6.4
|
|
<span class="kss-title__permalink-hash">
|
|
sass.mixins.visually-hidden
|
|
</span>
|
|
</span>
|
|
visually-hidden()
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Make an element visually hidden, but accessible to screen readers, etc.
|
|
@see <a href="http://snook.ca/archives/html_and_css/hiding-content-for-accessibility">http://snook.ca/archives/html_and_css/hiding-content-for-accessibility</a></p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 3
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-mixins-visually-hidden--focusable" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden--focusable">
|
|
<span class="kss-title__ref">
|
|
1.6.5
|
|
<span class="kss-title__permalink-hash">
|
|
sass.mixins.visually-hidden--focusable
|
|
</span>
|
|
</span>
|
|
visually-hidden--focusable()
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Makes an element visually hidden by default, but visible when receiving
|
|
focus.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 31
|
|
</div>
|
|
</section>
|
|
<section id="kssref-sass-mixins-visually-hidden--off" class="kss-section kss-section--depth-3 ">
|
|
<div class="kss-style">
|
|
<h3 class="kss-title kss-title--level-3">
|
|
<a class="kss-title__permalink" href="#kssref-sass-mixins-visually-hidden--off">
|
|
<span class="kss-title__ref">
|
|
1.6.6
|
|
<span class="kss-title__permalink-hash">
|
|
sass.mixins.visually-hidden--off
|
|
</span>
|
|
</span>
|
|
visually-hidden--off()
|
|
</a>
|
|
</h3>
|
|
|
|
|
|
<div class="kss-description">
|
|
<p>Turns off the visually-hidden effect.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="kss-source kss-style">
|
|
Source: <code>init/visually-hidden/_visually-hidden.scss</code>, line 18
|
|
</div>
|
|
</section>
|
|
</article>
|
|
|
|
<!-- SCRIPTS -->
|
|
<script src="kss-assets/kss.js"></script>
|
|
<script src="kss-assets/scrollspy.js"></script>
|
|
<script src="kss-assets/prettify.js"></script>
|
|
<script src="kss-assets/kss-fullscreen.js"></script>
|
|
<script src="kss-assets/kss-guides.js"></script>
|
|
<script src="kss-assets/kss-markup.js"></script>
|
|
<script>
|
|
prettyPrint();
|
|
var spy = new ScrollSpy('#kss-node', {
|
|
nav: '.kss-nav__menu-child > li > a',
|
|
className: 'is-in-viewport'
|
|
});
|
|
var kssFullScreen = new KssFullScreen({
|
|
idPrefix: 'kss-fullscreen-',
|
|
bodyClass: 'kss-fullscreen-mode',
|
|
elementClass: 'is-fullscreen'
|
|
});
|
|
var kssGuides = new KssGuides({
|
|
bodyClass: 'kss-guides-mode'
|
|
});
|
|
var kssMarkup = new KssMarkup({
|
|
bodyClass: 'kss-markup-mode',
|
|
detailsClass: 'kss-markup'
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
|
|
</body>
|
|
</html>
|