bootstrap-tlnd-theme

Version:

Bootstrap theme based on Talend styleguide

19 lines (17 loc) • 27.7 kB

HTML

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Bootstrap-tlnd-theme</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><meta property="og:title" content="Bootstrap-tlnd-theme - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Bootstrap theme based on Talend styleguide</p> "><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title"><a href="https://github.com/Talend/bootstrap-theme#readme">Bootstrap-tlnd-theme</a></h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="bootstrap"><a href="#bootstrap">bootstrap</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="bootstrap-variable"><a href="#bootstrap-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="bootstrap" data-name="breadcrumb-links-color" data-type="variable"><a href="#bootstrap-variable-breadcrumb-links-color">breadcrumb-links-color</a></li><li class="sidebar__item sassdoc__item" data-group="bootstrap" data-name="breadcrumb-separator-color" data-type="variable"><a href="#bootstrap-variable-breadcrumb-separator-color">breadcrumb-separator-color</a></li><li class="sidebar__item sassdoc__item" data-group="bootstrap" data-name="breadcrumb-separator-padding" data-type="variable"><a href="#bootstrap-variable-breadcrumb-separator-padding">breadcrumb-separator-padding</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="buttons"><a href="#buttons">buttons</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="buttons-variable"><a href="#buttons-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="buttons" data-name="btn-font-size" data-type="variable"><a href="#buttons-variable-btn-font-size">btn-font-size</a></li><li class="sidebar__item sassdoc__item" data-group="buttons" data-name="btn-box-shadow-width" data-type="variable"><a href="#buttons-variable-btn-box-shadow-width">btn-box-shadow-width</a></li><li class="sidebar__item sassdoc__item" data-group="buttons" data-name="btn-background-tint-percent" data-type="variable"><a href="#buttons-variable-btn-background-tint-percent">btn-background-tint-percent</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="buttons-mixin"><a href="#buttons-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="buttons" data-name="btn-colors" data-type="mixin"><a href="#buttons-mixin-btn-colors">btn-colors</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="navbar"><a href="#navbar">navbar</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="navbar-variable"><a href="#navbar-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="navbar" data-name="navbar-brand-logo-width" data-type="variable"><a href="#navbar-variable-navbar-brand-logo-width">navbar-brand-logo-width</a></li><li class="sidebar__item sassdoc__item" data-group="navbar" data-name="navbar-search-btn-color" data-type="variable"><a href="#navbar-variable-navbar-search-btn-color">navbar-search-btn-color</a></li><li class="sidebar__item sassdoc__item" data-group="navbar" data-name="navbar-search-btn-width" data-type="variable"><a href="#navbar-variable-navbar-search-btn-width">navbar-search-btn-width</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="undefined"><a href="#undefined">General</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-variable"><a href="#undefined-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="st-tropaz" data-type="variable"><a href="#undefined-variable-st-tropaz">st-tropaz</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="rio-grande" data-type="variable"><a href="#undefined-variable-rio-grande">rio-grande</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="scooter" data-type="variable"><a href="#undefined-variable-scooter">scooter</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="limeade" data-type="variable"><a href="#undefined-variable-limeade">limeade</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="lightning-yellow" data-type="variable"><a href="#undefined-variable-lightning-yellow">lightning-yellow</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="chestnut-rose" data-type="variable"><a href="#undefined-variable-chestnut-rose">chestnut-rose</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="black" data-type="variable"><a href="#undefined-variable-black">black</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="dove-gray" data-type="variable"><a href="#undefined-variable-dove-gray">dove-gray</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="silver" data-type="variable"><a href="#undefined-variable-silver">silver</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="alto" data-type="variable"><a href="#undefined-variable-alto">alto</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="concrete" data-type="variable"><a href="#undefined-variable-concrete">concrete</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="white" data-type="variable"><a href="#undefined-variable-white">white</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-function"><a href="#undefined-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="tint" data-type="function"><a href="#undefined-function-tint">tint</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="shade" data-type="function"><a href="#undefined-function-shade">shade</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><h1 class="main__heading" id="bootstrap"><div class="container">bootstrap</div></h1><section class="main__sub-section" id="bootstrap-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="bootstrap-variable-breadcrumb-links-color"><h3 class="item__heading"><a class="item__name" href="#variable-breadcrumb-links-color">breadcrumb-links-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$breadcrumb-links-color: $brand-primary !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Breadcrumb not selected links color</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="bootstrap-variable-breadcrumb-separator-color"><h3 class="item__heading"><a class="item__name" href="#variable-breadcrumb-separator-color">breadcrumb-separator-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$breadcrumb-separator-color: $breadcrumb-color !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Breadcrumb separator color</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="bootstrap-variable-breadcrumb-separator-padding"><h3 class="item__heading"><a class="item__name" href="#variable-breadcrumb-separator-padding">breadcrumb-separator-padding</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$breadcrumb-separator-padding: $padding-large-horizontal !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Breadcrumb separator padding</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number</code></p></section></section></section><section class="main__section"><h1 class="main__heading" id="buttons"><div class="container">buttons</div></h1><section class="main__sub-section" id="buttons-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="buttons-variable-btn-font-size"><h3 class="item__heading"><a class="item__name" href="#variable-btn-font-size">btn-font-size</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$btn-font-size: 12px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Button font size</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number (unit)</code></p></section><section class="main__item container item" id="buttons-variable-btn-box-shadow-width"><h3 class="item__heading"><a class="item__name" href="#variable-btn-box-shadow-width">btn-box-shadow-width</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$btn-box-shadow-width: 3px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Button box shadow width</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number (unit)</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#buttons-mixin-btn-colors"><code>btn-colors</code></a></li></ul></section><section class="main__item container item" id="buttons-variable-btn-background-tint-percent"><h3 class="item__heading"><a class="item__name" href="#variable-btn-background-tint-percent">btn-background-tint-percent</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$btn-background-tint-percent: 10 !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Button background tinting percent</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number (unitless)</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#buttons-mixin-btn-colors"><code>btn-colors</code></a></li></ul></section></section><section class="main__sub-section" id="buttons-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="buttons-mixin-btn-colors"><h3 class="item__heading"><a class="item__name" href="#mixin-btn-colors">btn-colors</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin btn-colors($btn-bg: $btn-default-bg) { transition: box-shadow 0.1s ease-out; box-shadow: 0 (-1 * $btn-box-shadow-width) 0 rgba(0, 0, 0, 0.15) inset; &:hover { background-color: tint($btn-bg, $btn-background-tint-percent); box-shadow: 0 (-1 * $btn-box-shadow-width) 0 rgba(0, 0, 0, 0.2) inset; } &:active { background-color: $btn-bg; box-shadow: 0 (-1 * $btn-box-shadow-width) 0 rgba(0, 0, 0, 0) inset; } }" data-collapsed="@mixin btn-colors($btn-bg: $btn-default-bg) { ... }"><code>@mixin btn-colors($btn-bg: $btn-default-bg) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Define button colors based on its background</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$btn-bg</code></th><td data-label="desc"><p>button background color to tint</p></td><td data-label="type"><code>Color</code></td><td data-label="default"><code>$btn-default-bg</code></td></tr></tbody></table><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#undefined-function-tint"><code>tint</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#buttons-variable-btn-box-shadow-width"><code>btn-box-shadow-width</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#buttons-variable-btn-background-tint-percent"><code>btn-background-tint-percent</code></a></li></ul></section></section></section><section class="main__section"><h1 class="main__heading" id="navbar"><div class="container">navbar</div></h1><section class="main__sub-section" id="navbar-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="navbar-variable-navbar-brand-logo-width"><h3 class="item__heading"><a class="item__name" href="#variable-navbar-brand-logo-width">navbar-brand-logo-width</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$navbar-brand-logo-width: 75px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Navbar brand logo width</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number (unit)</code></p></section><section class="main__item container item" id="navbar-variable-navbar-search-btn-color"><h3 class="item__heading"><a class="item__name" href="#variable-navbar-search-btn-color">navbar-search-btn-color</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$navbar-search-btn-color: #FFF !default;</code></pre><span class="color-preview--block" style="background: #FFF"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Navbar search text and border bottom color</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="navbar-variable-navbar-search-btn-width"><h3 class="item__heading"><a class="item__name" href="#variable-navbar-search-btn-width">navbar-search-btn-width</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$navbar-search-btn-width: 40px !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Navbar search btn width</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number (unit)</code></p></section></section></section><section class="main__section"><h1 class="main__heading" id="undefined"><div class="container">General</div></h1><section class="main__sub-section" id="undefined-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="undefined-variable-st-tropaz"><h3 class="item__heading"><a class="item__name" href="#variable-st-tropaz">st-tropaz</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$st-tropaz: #266092;</code></pre><span class="color-preview--block" style="background: #266092"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Primary color, mostly used for the selected elements and to draw attention to the important elements of interaction.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-rio-grande"><h3 class="item__heading"><a class="item__name" href="#variable-rio-grande">rio-grande</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$rio-grande: #C3D600;</code></pre><span class="color-preview--block" style="background: #C3D600"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Secondary color</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-scooter"><h3 class="item__heading"><a class="item__name" href="#variable-scooter">scooter</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$scooter: #3DB0D6;</code></pre><span class="color-preview--block" style="background: #3DB0D6"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Contextual color for informational alert messages</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-limeade"><h3 class="item__heading"><a class="item__name" href="#variable-limeade">limeade</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$limeade: #8ABC00;</code></pre><span class="color-preview--block" style="background: #8ABC00"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Linked to valid/validated/validation elements.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-lightning-yellow"><h3 class="item__heading"><a class="item__name" href="#variable-lightning-yellow">lightning-yellow</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$lightning-yellow: #FEB914;</code></pre><span class="color-preview--block" style="background: #FEB914"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Used to notify unvalid elements or warning information.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-chestnut-rose"><h3 class="item__heading"><a class="item__name" href="#variable-chestnut-rose">chestnut-rose</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$chestnut-rose: #CE6464;</code></pre><span class="color-preview--block" style="background: #CE6464"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Used for errors.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-black"><h3 class="item__heading"><a class="item__name" href="#variable-black">black</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$black: #000;</code></pre><span class="color-preview--block" style="background: #000"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Used for labels, titles.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-dove-gray"><h3 class="item__heading"><a class="item__name" href="#variable-dove-gray">dove-gray</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$dove-gray: #666;</code></pre><span class="color-preview--block" style="background: #666"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Used for subtitles.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-silver"><h3 class="item__heading"><a class="item__name" href="#variable-silver">silver</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$silver: #C0C0C0;</code></pre><span class="color-preview--block" style="background: #C0C0C0"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Used for backgrounds.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-alto"><h3 class="item__heading"><a class="item__name" href="#variable-alto">alto</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$alto: #DEDEDE;</code></pre><span class="color-preview--block" style="background: #DEDEDE"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Used for backgrounds etc.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-concrete"><h3 class="item__heading"><a class="item__name" href="#variable-concrete">concrete</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$concrete: #F2F2F2;</code></pre><span class="color-preview--block" style="background: #F2F2F2"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Used for panels.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section><section class="main__item container item" id="undefined-variable-white"><h3 class="item__heading"><a class="item__name" href="#variable-white">white</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$white: #FFF;</code></pre><span class="color-preview--block" style="background: #FFF"></span></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Used for empty spaces, toolbar-panels etc.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Color</code></p></section></section><section class="main__sub-section" id="undefined-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="undefined-function-tint"><h3 class="item__heading"><a class="item__name" href="#function-tint">tint</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function tint($color, $percentage) { @return mix(white, $color, $percentage); }" data-collapsed="@function tint($color, $percentage) { ... }"><code>@function tint($color, $percentage) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Slightly lighten a color</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc"><p>color to tint</p></td><td data-label="type"><code>Color</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$percentage</code></th><td data-label="desc"><p>percentage of <code>$color</code> in returned color</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Color</code></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#buttons-mixin-btn-colors"><code>btn-colors</code></a></li></ul><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://css-tricks.com/snippets/sass/tint-shade-functions/">https://css-tricks.com/snippets/sass/tint-shade-functions/</a></li></ul></section><section class="main__item container item" id="undefined-function-shade"><h3 class="item__heading"><a class="item__name" href="#function-shade">shade</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function shade($color, $percentage) { @return mix(black, $color, $percentage); }" data-collapsed="@function shade($color, $percentage) { ... }"><code>@function shade($color, $percentage) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Slightly darken a color</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter</span>Name</th><th scope="col"><span class="visually-hidden">parameter</span>Description</th><th scope="col"><span class="visually-hidden">parameter</span>Type</th><th scope="col"><span class="visually-hidden">parameter</span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$color</code></th><td data-label="desc"><p>color to shade</p></td><td data-label="type"><code>Color</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$percentage</code></th><td data-label="desc"><p>percentage of <code>$color</code> in returned color</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden">none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Color</code></div><h3 class="item__sub-heading">Links</h3><ul class="list-unstyled"><li><a href="https://css-tricks.com/snippets/sass/tint-shade-functions/">https://css-tricks.com/snippets/sass/tint-shade-functions/</a></li></ul></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><a class="project-info__name" href="https://github.com/Talend/bootstrap-theme#readme">Bootstrap-tlnd-theme</a> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>