1 #sass Colors and Sass
Documentation for colors and Sass mixins and variables.
1.1 #sass.colors Colors
Use the color() function to add colors to CSS properties.
default
Descriptive color names for use in "functional" color names below.
color(white) uses the color: #fff This color is inherited by: text-bg autocomplete-bg autocomplete-select body-bg progress-bar-text skip-link secondary-menu message-color tabs-bg tab-text-shadow navbar header-color button-color-hover form-element-bgcolor(white-smoke) uses the color: #f3f3f3 This color is inherited by: border-color border progress-bar-bg info-bg tabs-border navbar-bg-hover search-color-light search-border-light search-bg search-button-light button-bg form-element-bg-hover social-bgcolor(grey-extra-light) uses the color: #e8e8e8 This color is inherited by: resizable-grippie row-stripe watermark pager-bg form-element-border social-bg-hovercolor(grey-light) uses the color: #ccc This color is inherited by: row-disabled secondary-menu-hover tab-bg search-border form-element-border-bottomcolor(grey-medium) uses the color: #999 This color is inherited by: fieldset-summarycolor(grey-medium-dark) uses the color: #636363 This color is inherited by: datecolor(grey-dark) uses the color: #666 This color is inherited by: skip-link-bg tab-secondary search-color breadcrumb-color comment-date comment-iconcolor(grey-extra-dark) uses the color: #333 This color is inherited by: text autocomplete nav-bg menu-active nav-menu-active status-highlight tab navbar-bg navbar-activecolor(black) uses the color: #000color(blue) uses the color: #0072b9 This color is inherited by: autocomplete-select-bg button-colorcolor(blue-steel) uses the color: #466bc8 This color is inherited by: link progress-bar search-button header-background button-bg-hover social-iconcolor(blue-royal) uses the color: #3a59a5 This color is inherited by: link-hover tab-hover form-element-border-hovercolor(turquoise) uses the color: #52c2c7 This color is inherited by: link-border-focuscolor(blue-pale) uses the color: #3a59a5 This color is inherited by: link-activecolor(purple) uses the color: #5a5f8d This color is inherited by: link-visitedcolor(violet) uses the color: #6c6f8f This color is inherited by: info-border info message-infocolor(pink-pale) uses the color: #fef5f1 This color is inherited by: error-bgcolor(red) uses the color: #c00 This color is inherited by: form-error mark-highlight error error-border message-errorcolor(rust) uses the color: #8c2e0b This color is inherited by: warningcolor(orange) uses the color: #e86c19 This color is inherited by: warning-border message-warningcolor(yellow-pale) uses the color: #ffd This color is inherited by: preview-bg warning-bg table-drag table-selectcolor(yellow) uses the color: #ff0 This color is inherited by: mark-bgcolor(yellow-dark) uses the color: #ed5color(green-pale) uses the color: #f8fff0 This color is inherited by: status-bgcolor(green-light) uses the color: #be7color(green) uses the color: #00852c This color is inherited by: status status-border message-okcolor(green-dark) uses the color: #234600functional
Colors used by functional parts of the design.
color(text) uses the color: #333 (grey-extra-dark) This color is inherited by: autocomplete menu-active status-highlightcolor(text-bg) uses the color: #fff (white) This color is inherited by: autocomplete-bg body-bg tabs-bg form-element-bgcolor(link) uses the color: #466bc8 (blue-steel)color(link-active) uses the color: #3a59a5 (blue-pale)color(link-visited) uses the color: #5a5f8d (purple)color(link-hover) uses the color: #3a59a5 (blue-royal)color(link-border-focus) uses the color: #52c2c7 (turquoise)color(border-color) uses the color: #f3f3f3 (white-smoke)color(border) uses the color: #f3f3f3 (white-smoke) This color is inherited by: tabs-bordercolor(autocomplete) uses the color: #333 (text)color(autocomplete-bg) uses the color: #fff (text-bg)color(autocomplete-select) uses the color: #fff (white)color(autocomplete-select-bg) uses the color: #0072b9 (blue)color(body-bg) uses the color: #fff (text-bg) This color is inherited by: form-element-bgcolor(nav-bg) uses the color: #333 (grey-extra-dark)color(fieldset-summary) uses the color: #999 (grey-medium)color(form-error) uses the color: #c00 (red)color(mark-highlight) uses the color: #c00 (red)color(mark-bg) uses the color: #ff0 (yellow)color(menu-active) uses the color: #333 (text)color(preview-bg) uses the color: #ffd (yellow-pale)color(progress-bar) uses the color: #466bc8 (blue-steel)color(progress-bar-bg) uses the color: #f3f3f3 (white-smoke)color(progress-bar-text) uses the color: #fff (white)color(resizable-grippie) uses the color: #e8e8e8 (grey-extra-light)color(row-stripe) uses the color: #e8e8e8 (grey-extra-light)color(row-disabled) uses the color: #ccc (grey-light)color(skip-link) uses the color: #fff (white)color(skip-link-bg) uses the color: #666 (grey-dark)color(nav-menu-active) uses the color: #333 (grey-extra-dark)color(secondary-menu) uses the color: #fff (white)color(secondary-menu-hover) uses the color: #ccc (grey-light)color(status) uses the color: #00852c (green)color(status-bg) uses the color: #f8fff0 (green-pale)color(status-border) uses the color: #00852c (green)color(status-highlight) uses the color: #333 (text)color(warning) uses the color: #8c2e0b (rust)color(warning-bg) uses the color: #ffd (yellow-pale)color(warning-border) uses the color: #e86c19 (orange)color(error) uses the color: #c00 (red)color(error-bg) uses the color: #fef5f1 (pink-pale)color(error-border) uses the color: #c00 (red)color(info-border) uses the color: #6c6f8f (violet)color(info-bg) uses the color: #f3f3f3 (white-smoke)color(info) uses the color: #6c6f8f (violet)color(message-ok) uses the color: #00852c (green)color(message-error) uses the color: #c00 (red)color(message-info) uses the color: #6c6f8f (violet)color(message-warning) uses the color: #e86c19 (orange)color(message-color) uses the color: #fff (white)color(tabs-border) uses the color: #f3f3f3 (border)color(tabs-bg) uses the color: #fff (text-bg)color(tab) uses the color: #333 (grey-extra-dark)color(tab-text-shadow) uses the color: #fff (white)color(tab-bg) uses the color: #ccc (grey-light)color(tab-secondary) uses the color: #666 (grey-dark)color(tab-hover) uses the color: #3a59a5 (blue-royal)color(table-drag) uses the color: #ffd (yellow-pale)color(table-select) uses the color: #ffd (yellow-pale)color(watermark) uses the color: #e8e8e8 (grey-extra-light)color(navbar-bg) uses the color: #333 (grey-extra-dark)color(navbar-active) uses the color: #333 (grey-extra-dark)color(navbar) uses the color: #fff (white)color(navbar-bg-hover) uses the color: #f3f3f3 (white-smoke)color(search-color-light) uses the color: #f3f3f3 (white-smoke)color(search-color) uses the color: #666 (grey-dark)color(search-border) uses the color: #ccc (grey-light)color(search-border-light) uses the color: #f3f3f3 (white-smoke)color(search-bg) uses the color: #f3f3f3 (white-smoke)color(search-button) uses the color: #466bc8 (blue-steel)color(search-button-light) uses the color: #f3f3f3 (white-smoke)color(header-background) uses the color: #466bc8 (blue-steel)color(header-color) uses the color: #fff (white)color(pager-bg) uses the color: #e8e8e8 (grey-extra-light)color(button-color) uses the color: #0072b9 (blue)color(button-color-hover) uses the color: #fff (white)color(button-bg) uses the color: #f3f3f3 (white-smoke)color(button-bg-hover) uses the color: #466bc8 (blue-steel)color(form-element-border) uses the color: #e8e8e8 (grey-extra-light)color(form-element-border-bottom) uses the color: #ccc (grey-light)color(form-element-border-hover) uses the color: #3a59a5 (blue-royal)color(form-element-bg) uses the color: #fff (body-bg)color(form-element-bg-hover) uses the color: #f3f3f3 (white-smoke)color(breadcrumb-color) uses the color: #666 (grey-dark)color(comment-date) uses the color: #666 (grey-dark)color(comment-icon) uses the color: #666 (grey-dark)color(date) uses the color: #636363 (grey-medium-dark)color(social-bg) uses the color: #f3f3f3 (white-smoke)color(social-bg-hover) uses the color: #e8e8e8 (grey-extra-light)color(social-icon) uses the color: #466bc8 (blue-steel)<!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">default</h3><p class="chroma-kss__description">Descriptive color names for use in "functional" color names below.</p><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 progress-bar-text skip-link secondary-menu message-color tabs-bg tab-text-shadow navbar header-color button-color-hover form-element-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(white-smoke)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code></span> <span class="chroma-kss__reference">This color is inherited by: border-color border progress-bar-bg info-bg tabs-border navbar-bg-hover search-color-light search-border-light search-bg search-button-light button-bg form-element-bg-hover social-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></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>#e8e8e8</code></span> <span class="chroma-kss__reference">This color is inherited by: resizable-grippie row-stripe watermark pager-bg form-element-border social-bg-hover</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></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>#ccc</code></span> <span class="chroma-kss__reference">This color is inherited by: row-disabled secondary-menu-hover tab-bg search-border form-element-border-bottom</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999"></span><code class="chroma-kss__variable">color(grey-medium)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999</code></span> <span class="chroma-kss__reference">This color is inherited by: fieldset-summary</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #636363"></span><code class="chroma-kss__variable">color(grey-medium-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#636363</code></span> <span class="chroma-kss__reference">This color is inherited by: date</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></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>#666</code></span> <span class="chroma-kss__reference">This color is inherited by: skip-link-bg tab-secondary search-color breadcrumb-color comment-date comment-icon</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(grey-extra-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code></span> <span class="chroma-kss__reference">This color is inherited by: text autocomplete nav-bg menu-active nav-menu-active status-highlight tab navbar-bg navbar-active</span></div><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></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 button-color</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></span><code class="chroma-kss__variable">color(blue-steel)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#466bc8</code></span> <span class="chroma-kss__reference">This color is inherited by: link progress-bar search-button header-background button-bg-hover social-icon</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></span><code class="chroma-kss__variable">color(blue-royal)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#3a59a5</code></span> <span class="chroma-kss__reference">This color is inherited by: link-hover tab-hover form-element-border-hover</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #52c2c7"></span><code class="chroma-kss__variable">color(turquoise)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#52c2c7</code></span> <span class="chroma-kss__reference">This color is inherited by: link-border-focus</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></span><code class="chroma-kss__variable">color(blue-pale)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#3a59a5</code></span> <span class="chroma-kss__reference">This color is inherited by: link-active</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #5a5f8d"></span><code class="chroma-kss__variable">color(purple)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#5a5f8d</code></span> <span class="chroma-kss__reference">This color is inherited by: link-visited</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #6c6f8f"></span><code class="chroma-kss__variable">color(violet)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#6c6f8f</code></span> <span class="chroma-kss__reference">This color is inherited by: info-border info message-info</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fef5f1"></span><code class="chroma-kss__variable">color(pink-pale)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fef5f1</code></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: #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: form-error mark-highlight error error-border message-error</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #8c2e0b"></span><code class="chroma-kss__variable">color(rust)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#8c2e0b</code></span> <span class="chroma-kss__reference">This color is inherited by: warning</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e86c19"></span><code class="chroma-kss__variable">color(orange)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e86c19</code></span> <span class="chroma-kss__reference">This color is inherited by: warning-border message-warning</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></span><code class="chroma-kss__variable">color(yellow-pale)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ffd</code></span> <span class="chroma-kss__reference">This color is inherited by: preview-bg warning-bg table-drag table-select</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ff0"></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>#ff0</code></span> <span class="chroma-kss__reference">This color is inherited by: mark-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ed5"></span><code class="chroma-kss__variable">color(yellow-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ed5</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f8fff0"></span><code class="chroma-kss__variable">color(green-pale)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f8fff0</code></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: #be7"></span><code class="chroma-kss__variable">color(green-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#be7</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #00852c"></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>#00852c</code></span> <span class="chroma-kss__reference">This color is inherited by: status status-border message-ok</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #234600"></span><code class="chroma-kss__variable">color(green-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#234600</code></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: #333"></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>#333</code> (grey-extra-dark)</span> <span class="chroma-kss__reference">This color is inherited by: autocomplete menu-active status-highlight</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 body-bg tabs-bg form-element-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></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>#466bc8</code> (blue-steel)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></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>#3a59a5</code> (blue-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #5a5f8d"></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>#5a5f8d</code> (purple)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></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>#3a59a5</code> (blue-royal)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #52c2c7"></span><code class="chroma-kss__variable">color(link-border-focus)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#52c2c7</code> (turquoise)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(border-color)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></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>#f3f3f3</code> (white-smoke)</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: #333"></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>#333</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> (text-bg)</span> <span class="chroma-kss__reference">This color is inherited by: form-element-bg</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(nav-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code> (grey-extra-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999"></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>#999</code> (grey-medium)</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: #ff0"></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>#ff0</code> (yellow)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></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>#333</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></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>#ffd</code> (yellow-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></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>#466bc8</code> (blue-steel)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></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>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(progress-bar-text)</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: #e8e8e8"></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>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></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>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></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>#ccc</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: #666"></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>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(nav-menu-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code> (grey-extra-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(secondary-menu)</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: #ccc"></span><code class="chroma-kss__variable">color(secondary-menu-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #00852c"></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>#00852c</code> (green)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f8fff0"></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>#f8fff0</code> (green-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #00852c"></span><code class="chroma-kss__variable">color(status-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#00852c</code> (green)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></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>#333</code> (text)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #8c2e0b"></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>#8c2e0b</code> (rust)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></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>#ffd</code> (yellow-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e86c19"></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>#e86c19</code> (orange)</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></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fef5f1"></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>#fef5f1</code> (pink-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(error-border)</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: #6c6f8f"></span><code class="chroma-kss__variable">color(info-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#6c6f8f</code> (violet)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(info-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #6c6f8f"></span><code class="chroma-kss__variable">color(info)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#6c6f8f</code> (violet)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #00852c"></span><code class="chroma-kss__variable">color(message-ok)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#00852c</code> (green)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #c00"></span><code class="chroma-kss__variable">color(message-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: #6c6f8f"></span><code class="chroma-kss__variable">color(message-info)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#6c6f8f</code> (violet)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e86c19"></span><code class="chroma-kss__variable">color(message-warning)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e86c19</code> (orange)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(message-color)</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: #f3f3f3"></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>#f3f3f3</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: #333"></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>#333</code> (grey-extra-dark)</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: #ccc"></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>#ccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></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>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></span><code class="chroma-kss__variable">color(tab-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#3a59a5</code> (blue-royal)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></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>#ffd</code> (yellow-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ffd"></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>#ffd</code> (yellow-pale)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></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>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(navbar-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code> (grey-extra-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(navbar-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code> (grey-extra-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(navbar)</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: #f3f3f3"></span><code class="chroma-kss__variable">color(navbar-bg-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(search-color-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(search-color)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></span><code class="chroma-kss__variable">color(search-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(search-border-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(search-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></span><code class="chroma-kss__variable">color(search-button)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#466bc8</code> (blue-steel)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(search-button-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></span><code class="chroma-kss__variable">color(header-background)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#466bc8</code> (blue-steel)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(header-color)</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: #e8e8e8"></span><code class="chroma-kss__variable">color(pager-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0072b9"></span><code class="chroma-kss__variable">color(button-color)</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(button-color-hover)</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: #f3f3f3"></span><code class="chroma-kss__variable">color(button-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></span><code class="chroma-kss__variable">color(button-bg-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#466bc8</code> (blue-steel)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></span><code class="chroma-kss__variable">color(form-element-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></span><code class="chroma-kss__variable">color(form-element-border-bottom)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ccc</code> (grey-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #3a59a5"></span><code class="chroma-kss__variable">color(form-element-border-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#3a59a5</code> (blue-royal)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(form-element-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code> (body-bg)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(form-element-bg-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(breadcrumb-color)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(comment-date)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(comment-icon)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code> (grey-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #636363"></span><code class="chroma-kss__variable">color(date)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#636363</code> (grey-medium-dark)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f3f3f3"></span><code class="chroma-kss__variable">color(social-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f3f3f3</code> (white-smoke)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e8e8e8"></span><code class="chroma-kss__variable">color(social-bg-hover)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e8e8e8</code> (grey-extra-light)</span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #466bc8"></span><code class="chroma-kss__variable">color(social-icon)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#466bc8</code> (blue-steel)</span></div></div>
1.2 #sass.init Initialization partial
To make it easier to use all variables and mixins in any Sass file in this
theme, each .scss file has a @import 'init'; declaration. The _init.scss
file is in charge of importing all the other partials needed for the theme.
The initialization partial is organized in this way:
- First we set any shared Sass variables.
- Next we import Sass modules (sometimes called Compass plug-ins).
- Last we define our custom mixins for this theme.
1.3 #sass.modules 3rd party libraries
The following sass modules are shared with all .scsss files:
Additional pre-built libraries can be found on the Sache website.
1.4 #sass.variables Variables
Set variables for this site before a library sets its !default value.
1.4.1 #sass.variables.breakpoints Breakpoints
Use the respond-to() mixin to use named breakpoints. Documentation is
available in the Breakpoint wiki
pages.
1.5 #sass.functions Functions
Custom functions used on this site.
1.6 #sass.mixins Mixins
Custom mixins used on this site.
1.6.1 #sass.mixins.clearfix clearfix()
Allows the bottom of an element to extend to the bottom of all floated children elements. @see http://nicolasgallagher.com/micro-clearfix-hack/
We use the micro-clearfix, optimized for use in @extend where fewer & is
better.
1.6.2 #sass.mixins.rtl rtl()
Includes Right-To-Left langauge support. Can be turned off globally by
setting $include-rtl: false;.