mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 20:04:30 -07:00
Move docs to bulma repo (#299)
* Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder
This commit is contained in:
Jeremy Thomas
37
docs/documentation/overview/classes.html
Normal file
37
docs/documentation/overview/classes.html
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: classes
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Classes</h1>
|
||||
<h2 class="subtitle">Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
|
||||
<br>
|
||||
<a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">https://github.com/jgthms/bulma/blob/master/css/bulma.css</a></p>
|
||||
<p>
|
||||
Because Bulma solely comprises CSS classes, the HTML code you write has <strong>no impact</strong> on the styling of your page. That's why <code>.input</code> exists as a class, so you can choose <em>which</em> <code><input type="text"></code> elements you want to style.
|
||||
</p>
|
||||
<p>
|
||||
Bulma only styles <strong>generic</strong> tags directly <strong>twice</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/jgthms/bulma/blob/master/bulma/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
|
||||
</li>
|
||||
<li>
|
||||
the <a href="{{ site.baseurl }}/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
161
docs/documentation/overview/responsiveness.html
Normal file
161
docs/documentation/overview/responsiveness.html
Normal file
@@ -0,0 +1,161 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: responsiveness
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Responsiveness</h1>
|
||||
<h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Breakpoints</h3>
|
||||
<div class="content">
|
||||
<p>Bulma has 4 breakpoints:</p>
|
||||
<ul>
|
||||
<li><code>mobile</code>: up to <code>768px</code></li>
|
||||
<li><code>tablet</code>: from <code>769px</code></li>
|
||||
<li><code>desktop</code>: from <code>980px</code></li>
|
||||
<li><code>widescreen</code>: from <code>1180px</code></li>
|
||||
</ul>
|
||||
<p>Bulma uses 7 responsive mixins:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>=mobile</code><br>
|
||||
until <code>768px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=tablet</code><br>
|
||||
from <code>769px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=tablet-only</code><br>
|
||||
from <code>769px</code> and until <code>979px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>979px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop</code><br>
|
||||
from <code>980px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=desktop-only</code><br>
|
||||
from <code>980px</code> and until <code>1179px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>=widescreen</code><br>
|
||||
from <code>1180px</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>How Bulma works is that <strong>everything is mobile-first</strong> by default, and responsive mixins act as <em>minimum viewport widths</em> where some alternative styles are applied.</p>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Mobile<br>
|
||||
Up to <code>768px</code>
|
||||
</th>
|
||||
<th>
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>979px</code>
|
||||
</th>
|
||||
<th>
|
||||
Desktop<br>
|
||||
Between <code>980px</code> and <code>1179px</code>
|
||||
</th>
|
||||
<th>
|
||||
Widescreen<br>
|
||||
<code>1180px</code> and above
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success">mobile</p>
|
||||
</td>
|
||||
<td class="is-narrow" colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td class="is-narrow" colspan="3">
|
||||
<p class="notification is-success">tablet</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow" colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td class="is-narrow" colspan="3">
|
||||
<p class="notification is-success">desktop</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow" colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success">widescreen</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success">tablet-only</p>
|
||||
</td>
|
||||
<td class="is-narrow" colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow" colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success">desktop-only</p>
|
||||
</td>
|
||||
<td class="is-narrow">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="is-narrow" colspan="2">
|
||||
<p class="notification is-success">touch</p>
|
||||
</td>
|
||||
<td class="is-narrow" colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h4>
|
||||
|
||||
<h3 class="title">Vertical by default</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
Every element in Bulma is <strong>mobile-first</strong> and optmizes for <strong>vertical reading</strong>, so by default on mobile:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>columns</code> are stacked vertically</li>
|
||||
<li>the <code>level</code> component will show its children stacked vertically</li>
|
||||
<li>the <code>nav</code> menu will be hidden</li>
|
||||
</ul>
|
||||
<p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
135
docs/documentation/overview/start.html
Normal file
135
docs/documentation/overview/start.html
Normal file
@@ -0,0 +1,135 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: start
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title"><strong>3</strong> ways to start</h1>
|
||||
<h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">1</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use <strong>NPM</strong> <em>(recommended)</em>:
|
||||
</p>
|
||||
{% highlight bash %}
|
||||
npm install bulma
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">2</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
|
||||
<br>
|
||||
<a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">3</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
Download from the <strong>repository</strong>
|
||||
<br>
|
||||
<a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
Font Awesome icons
|
||||
</div>
|
||||
<div class="message-body">
|
||||
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p>
|
||||
{% highlight html %}
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Customizing with Sass</h3>
|
||||
|
||||
<div class="content">
|
||||
<p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">1</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Download</strong> the source files:
|
||||
</p>
|
||||
{% highlight bash %}
|
||||
npm install bulma
|
||||
{% endhighlight %}
|
||||
<div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">2</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Set</strong> your variables:<br>
|
||||
{% highlight sass %}
|
||||
// Override initial variables here
|
||||
// You can add new ones or update existing ones:
|
||||
|
||||
$blue: #72d0eb // Update blue
|
||||
$pink: #ffb3b3 // Add pink
|
||||
$family-serif: "Georgia", serif // Add a serif family
|
||||
|
||||
// Override generated variables here
|
||||
// For example, by default, the $danger color is $red and the font is sans-serif
|
||||
// You can change these values:
|
||||
|
||||
$danger: $orange // Use the existing orange
|
||||
$family-primary: $family-serif // Use the new serif family
|
||||
{% endhighlight %}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-number">3</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">
|
||||
<strong>Import</strong> Bulma <em>after</em> having set your variables:<br>
|
||||
{% highlight sass %}
|
||||
// Override variables here
|
||||
// You can add new ones or update existing ones:
|
||||
|
||||
$blue: #72d0eb // Update blue
|
||||
$pink: #ffb3b3 // Add pink
|
||||
$family-serif: "Georgia", serif // Add a serif family
|
||||
|
||||
// Override generated variables here
|
||||
// For example, by default, the $danger color is $red and the font is sans-serif
|
||||
// You can change these values:
|
||||
|
||||
$danger: $orange // Use the existing orange
|
||||
$family-primary: $family-serif // Use the new serif family
|
||||
|
||||
@import "bulma"
|
||||
{% endhighlight %}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
314
docs/documentation/overview/variables.html
Normal file
314
docs/documentation/overview/variables.html
Normal file
@@ -0,0 +1,314 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: variables
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Variables</h1>
|
||||
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has 1 variable file divided into <strong>4</strong> sections:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Initial variables</strong>: where you define variables by <strong>direct value</strong>, like:
|
||||
<ul>
|
||||
<li><strong>colors</strong>: <code>$blue: #42afe3</code></li>
|
||||
<li><strong>font families</strong>: <code>$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif</code></li>
|
||||
<li><strong>font sizes</strong>: <code>$size-1: 48px</code></li>
|
||||
<li><strong>other values</strong>: <code>$nav-height: 50px</code> or <code>$easing: ease-out</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Primary colors</strong> derived from the initial variables:
|
||||
<ul>
|
||||
<li><code>$primary: $turquoise</code></li>
|
||||
<li><code>$info: $blue</code></li>
|
||||
<li><code>$success: $green</code></li>
|
||||
<li><code>$warning: $yellow</code></li>
|
||||
<li><code>$danger: $red</code></li>
|
||||
<li><code>$dark: $grey-darker</code></li>
|
||||
<li><code>$text: $grey-dark</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Generated variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
|
||||
<ul>
|
||||
<li><code>$body-background: $grey-lighter</code>: the page's main background is the lighter grey</li>
|
||||
<li><code>$link: $primary</code>: the links use the primary color</li>
|
||||
<li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Lists and maps</strong> which are collections so already defined variables:
|
||||
<ul>
|
||||
<li><code>$colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))</code></li>
|
||||
<li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<table class="table is-bordered is-striped">
|
||||
<tr><th colspan="2">1. Initial variables</th></tr>
|
||||
|
||||
<tr><th colspan="2">Colors</th></tr>
|
||||
|
||||
<tr>
|
||||
<td><code>$black</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #111;"></span>
|
||||
#111
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey-darker</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #222324;"></span>
|
||||
#222324
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey-dark</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #69707a;"></span>
|
||||
#69707a
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #aeb1b5;"></span>
|
||||
#aeb1b5
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey-light</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #d3d6db;"></span>
|
||||
#d3d6db
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$grey-lighter</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #f5f7fa;"></span>
|
||||
#f5f7fa
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$white</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #fff;"></span>
|
||||
#fff
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$blue</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #42afe3;"></span>
|
||||
#42afe3
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$green</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #97cd76;"></span>
|
||||
#97cd76
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$orange</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #f68b39;"></span>
|
||||
#f68b39
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$purple</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #847bb9;"></span>
|
||||
#847bb9
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$red</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #ed6c63;"></span>
|
||||
#ed6c63
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$turquoise</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #1fc8db;"></span>
|
||||
#1fc8db
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>$yellow</code></td>
|
||||
<td>
|
||||
<span class="color" style="background-color: #fce473;"></span>
|
||||
#fce473
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr><th colspan="2">Typography</th></tr>
|
||||
|
||||
<tr><td><code>$family-sans-serif</code></td><td>"Helvetica Neue", "Helvetica", "Arial", sans-serif</td></tr>
|
||||
<tr><td><code>$family-monospace</code></td><td>"Source Code Pro", "Monaco", "Inconsolata", monospace</td></tr>
|
||||
|
||||
<tr><td><code>$size-1</code></td><td>48px</td></tr>
|
||||
<tr><td><code>$size-2</code></td><td>40px</td></tr>
|
||||
<tr><td><code>$size-3</code></td><td>28px</td></tr>
|
||||
<tr><td><code>$size-4</code></td><td>24px</td></tr>
|
||||
<tr><td><code>$size-5</code></td><td>18px</td></tr>
|
||||
<tr><td><code>$size-6</code></td><td>14px</td></tr>
|
||||
|
||||
<tr><td><code>$size-7</code></td><td>11px</td></tr>
|
||||
|
||||
<tr><td><code>$weight-normal</code></td><td>400</td></tr>
|
||||
<tr><td><code>$weight-bold</code></td><td>700</td></tr>
|
||||
<tr><td><code>$weight-title-normal</code></td><td>300</td></tr>
|
||||
<tr><td><code>$weight-title-bold</code></td><td>500</td></tr>
|
||||
|
||||
<tr><th colspan="2">Breakpoints</th></tr>
|
||||
|
||||
<tr><td><code>$tablet</code></td><td>769px</td></tr>
|
||||
<tr><td><code>$desktop</code></td><td>980px</td></tr>
|
||||
<tr><td><code>$widescreen</code></td><td>1180px</td></tr>
|
||||
|
||||
<tr><th colspan="2">Dimensions</th></tr>
|
||||
|
||||
<tr><td><code>$column-gap</code></td><td>20px</td></tr>
|
||||
|
||||
<tr><td><code>$nav-height</code></td><td>50px</td></tr>
|
||||
|
||||
<tr><th colspan="2">Miscellaneous</th></tr>
|
||||
|
||||
<tr><td><code>$easing</code></td><td>ease-out</td></tr>
|
||||
<tr><td><code>$radius</code></td><td>3px</td></tr>
|
||||
<tr><td><code>$speed</code></td><td>86ms</td></tr>
|
||||
|
||||
<tr><th colspan="2">2. Primary colors</th></tr>
|
||||
|
||||
<tr><td><code>$primary</code></td><td>$turquoise</td></tr>
|
||||
|
||||
<tr><td><code>$info</code></td><td>$blue</td></tr>
|
||||
<tr><td><code>$success</code></td><td>$green</td></tr>
|
||||
<tr><td><code>$warning</code></td><td>$yellow</td></tr>
|
||||
<tr><td><code>$danger</code></td><td>$red</td></tr>
|
||||
|
||||
<tr><td><code>$light</code></td><td>$grey-lighter</td></tr>
|
||||
<tr><td><code>$dark</code></td><td>$grey-dark</td></tr>
|
||||
|
||||
<tr><td><code>$text</code></td><td>$grey-dark</td></tr>
|
||||
|
||||
<tr><th colspan="2">3. Generated variables</th></tr>
|
||||
|
||||
<tr><th colspan="2">Invert colors</th></tr>
|
||||
|
||||
<tr><td><code>$primary-invert</code></td><td>findColorInvert($primary)</td></tr>
|
||||
|
||||
<tr><td><code>$info-invert</code></td><td>findColorInvert($info)</td></tr>
|
||||
<tr><td><code>$success-invert</code></td><td>findColorInvert($success)</td></tr>
|
||||
<tr><td><code>$warning-invert</code></td><td>findColorInvert($warning)</td></tr>
|
||||
<tr><td><code>$danger-invert</code></td><td>findColorInvert($danger)</td></tr>
|
||||
|
||||
<tr><td><code>$light-invert</code></td><td>$dark</td></tr>
|
||||
<tr><td><code>$dark-invert</code></td><td>$light</td></tr>
|
||||
|
||||
<tr><th colspan="2">General colors</th></tr>
|
||||
|
||||
<tr><td><code>$body-background</code></td><td>$grey-lighter</td></tr>
|
||||
|
||||
<tr><td><code>$background</code></td><td>$grey-lighter</td></tr>
|
||||
|
||||
<tr><td><code>$border</code></td><td>$grey-light</td></tr>
|
||||
<tr><td><code>$border-hover</code></td><td>$grey</td></tr>
|
||||
|
||||
<tr><th colspan="2">Text colors</th></tr>
|
||||
|
||||
<tr><td><code>$text-invert</code></td><td>findColorInvert($text)</td></tr>
|
||||
<tr><td><code>$text-light</code></td><td>$grey</td></tr>
|
||||
<tr><td><code>$text-strong</code></td><td>$grey-darker</td></tr>
|
||||
|
||||
<tr><th colspan="2">Code colors</th></tr>
|
||||
|
||||
<tr><td><code>$code</code></td><td>$red</td></tr>
|
||||
<tr><td><code>$code-background</code></td><td>$background</td></tr>
|
||||
|
||||
<tr><td><code>$pre</code></td><td>$text</td></tr>
|
||||
<tr><td><code>$pre-background</code></td><td>$background</td></tr>
|
||||
|
||||
<tr><th colspan="2">Link colors</th></tr>
|
||||
|
||||
<tr><td><code>$link</code></td><td>$primary</td></tr>
|
||||
<tr><td><code>$link-invert</code></td><td>$primary-invert</td></tr>
|
||||
<tr><td><code>$link-visited</code></td><td>$purple</td></tr>
|
||||
|
||||
<tr><td><code>$link-hover</code></td><td>$grey-darker</td></tr>
|
||||
<tr><td><code>$link-hover-background</code></td><td>$grey-lighter</td></tr>
|
||||
<tr><td><code>$link-hover-border</code></td><td>$grey-darker</td></tr>
|
||||
|
||||
<tr><td><code>$link-active</code></td><td>$grey-darker</td></tr>
|
||||
<tr><td><code>$link-active-border</code></td><td>$grey-darker</td></tr>
|
||||
|
||||
<tr><th colspan="2">Control colors</th></tr>
|
||||
|
||||
<tr><td><code>$control</code></td><td>$text-strong</td></tr>
|
||||
<tr><td><code>$control-background</code></td><td>$text-invert</td></tr>
|
||||
<tr><td><code>$control-border</code></td><td>$border</td></tr>
|
||||
|
||||
<tr><td><code>$control-hover</code></td><td>$link-hover</td></tr>
|
||||
<tr><td><code>$control-hover-border</code></td><td>$border-hover</td></tr>
|
||||
|
||||
<tr><td><code>$control-active</code></td><td>$link</td></tr>
|
||||
<tr><td><code>$control-active-background</code></td><td>$link</td></tr>
|
||||
<tr><td><code>$control-active-background-invert</code></td><td>$link-invert</td></tr>
|
||||
<tr><td><code>$control-active-border</code></td><td>$link</td></tr>
|
||||
|
||||
<tr><th colspan="2">Typography</th></tr>
|
||||
|
||||
<tr><td><code>$family-primary</code></td><td>$family-sans-serif</td></tr>
|
||||
<tr><td><code>$family-code</code></td><td>$family-monospace</td></tr>
|
||||
|
||||
<tr><td><code>$size-small</code></td><td>$size-7</td></tr>
|
||||
<tr><td><code>$size-normal</code></td><td>$size-6</td></tr>
|
||||
<tr><td><code>$size-medium</code></td><td>$size-5</td></tr>
|
||||
<tr><td><code>$size-large</code></td><td>$size-3</td></tr>
|
||||
<tr><td><code>$size-huge</code></td><td>$size-1</td></tr>
|
||||
|
||||
<tr><th colspan="2">4. Lists and maps</th></tr>
|
||||
|
||||
<tr>
|
||||
<td><code>$colors</code>
|
||||
<td>
|
||||
(white: ($white, $black),<br>
|
||||
black: ($black, $white),<br>
|
||||
light: ($light, $light-invert),<br>
|
||||
dark: ($dark, $dark-invert),<br>
|
||||
primary: ($primary, $primary-invert),<br>
|
||||
info: ($info, $info-invert),<br>
|
||||
success: ($success, $success-invert),<br>
|
||||
warning: ($warning, $warning-invert),<br>
|
||||
danger: ($danger, $danger-invert))
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr><td><code>$sizes</code></td><td>$size-1 $size-2 $size-3 $size-4 $size-5 $size-6</td></tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
Reference in New Issue
Block a user