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: #000
color(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: #ed5
color(green-pale)
uses the color: #f8fff0
This color is inherited by: status-bgcolor(green-light)
uses the color: #be7
color(green)
uses the color: #00852c
This color is inherited by: status status-border message-okcolor(green-dark)
uses the color: #234600
functional
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;
.