library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #2984 from jgthms/new-helpers

Browse Source 
New helpers
This commit is contained in:
Jeremy Thomas 2020-06-07 13:44:37 +01:00 committed by GitHub
commit 776c8e657e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
58 changed files with 6862 additions and 4872 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -3,6 +3,8 @@
.DS_Store
.ruby-version
npm-debug.log
test.css
test.css.map
test.html
test.sass
test.css

46
CHANGELOG.md
View File

@ -2,6 +2,52 @@
## 0.9.0
### New features
Bulma now has **spacing helpers**: https://bulma.io/documentation/helpers/spacing-helpers/
<p>Bulma provides <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>
<ul>
<li>
<code>*t</code> for <strong>top</strong>
</li>
<li>
<code>*r</code> for <strong>right</strong>
</li>
<li>
<code>*b</code> for <strong>bottom</strong>
</li>
<li>
<code>*l</code> for <strong>left</strong>
</li>
<li>
<code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong>
</li>
<li>
<code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong>
</li>
</ul>
<p>
You need to <strong>combine</strong> a margin/padding prefix with a direciton suffix. For example:
</p>
<ul>
<li>for a <code>margin-top</code>, use <code>mt-*</code></li>
<li>for a <code>padding-bottom</code>, use <code>pb-*</code></li>
<li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li>
</ul>
<p>
Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong>
</p>
This release also includes the following helpers:
* light and dark color helpers
* light and dark background color helpers
### Improvements
* #2925 Center table cell content vertically with `is-vcentered`

1
bulma.sass vendored
View File

@ -6,4 +6,5 @@
@import "sass/form/_all"
@import "sass/components/_all"
@import "sass/grid/_all"
@import "sass/helpers/_all"
@import "sass/layout/_all"

2771
css/bulma-rtl.css
View File

File diff suppressed because it is too large Load Diff

2
css/bulma-rtl.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2771
css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

43
docs/_data/links.json
View File

@ -167,6 +167,48 @@
"icon": "font",
"path": "/documentation/modifiers/typography-helpers"
},
"helpers": {
"name": "Helpers",
"subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style",
"color": "danger",
"icon": "medkit",
"path": "/documentation/helpers"
},
"helpers-color": {
"name": "Color",
"subtitle": "Change the <strong>color</strong> of the text and/or background",
"color": "info",
"icon": "tint",
"path": "/documentation/helpers/color-helpers"
},
"helpers-typography": {
"name": "Typography",
"subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text",
"color": "grey-dark",
"icon": "font",
"path": "/documentation/helpers/typography-helpers"
},
"helpers-spacing": {
"name": "Spacing",
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
"color": "grey-dark",
"icon": "arrows-alt-h",
"path": "/documentation/helpers/spacing-helpers"
},
"helpers-visibility": {
"name": "Visibility",
"subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
"color": "primary",
"icon": "eye",
"path": "/documentation/helpers/visibility-helpers"
},
"helpers-other": {
"name": "Other",
"subtitle": "Other useful Bulma helpers",
"color": "primary",
"icon": "medkit",
"path": "/documentation/helpers/other-helpers"
},
"columns": {
"name": "Columns",
"subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
@ -581,6 +623,7 @@
"overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
"customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
"helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-other"],
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
"layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],

2
docs/_includes/color/blue-dark.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(217, 71%, 45%);"></span>
<code>hsl(217, 71%, 45%)</code>

2
docs/_includes/color/blue-light.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(219, 70%, 96%);"></span>
<code>hsl(219, 70%, 96%)</code>

2
docs/_includes/color/cyan-dark.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(204, 71%, 39%);"></span>
<code>hsl(204, 71%, 39%)</code>

2
docs/_includes/color/cyan-light.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(206, 70%, 96%);"></span>
<code>hsl(206, 70%, 96%)</code>

2
docs/_includes/color/green-dark.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(141, 53%, 31%);"></span>
<code>hsl(141, 53%, 31%)</code>

2
docs/_includes/color/green-light.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(142, 52%, 96%);"></span>
<code>hsl(142, 52%, 96%)</code>

2
docs/_includes/color/red-dark.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(348, 86%, 43%);"></span>
<code>hsl(348, 86%, 43%)</code>

2
docs/_includes/color/red-light.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(347, 90%, 96%);"></span>
<code>hsl(347, 90%, 96%)</code>

2
docs/_includes/color/turquoise-dark.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(171, 100%, 29%);"></span>
<code>hsl(171, 100%, 29%)</code>

2
docs/_includes/color/turquoise-light.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(171, 100%, 96%);"></span>
<code>hsl(171, 100%, 96%)</code>

2
docs/_includes/color/yellow-dark.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(48, 100%, 29%);"></span>
<code>hsl(48, 100%, 29%)</code>

2
docs/_includes/color/yellow-light.html Normal file
View File

@ -0,0 +1,2 @@
<span class="bd-color" style="background: hsl(48, 100%, 96%);"></span>
<code>hsl(48, 100%, 96%)</code>

4
docs/_includes/components/categories.html
View File

@ -13,8 +13,8 @@
</a>
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
<strong>{{ category_link.name }}</strong>
{% if category_link.name == 'Customize' %}
<span class="tag bd-mini-tag is-success">
{% if category_link.name == 'Helpers' %}
<span class="tag bd-mini-tag is-primary">
New!
</span>
{% endif %}

54
docs/_includes/components/spacing-table.html Normal file
View File

@ -0,0 +1,54 @@
<table class="bd-spacing-table table is-bordered">
<thead>
<tr>
<th>Property</th>
<th>Shortcut</th>
<th colspan="7">Classes ↓</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2">Values →</th>
{% for value in include.values %}
<th><code>{{ value[1] }}</code></th>
{% endfor %}
</tr>
</tfoot>
<tbody>
{% for shortcut in include.shortcuts %}
{% for direction in include.directions %}
<tr>
<td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
<td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
{% for value in include.values %}
<td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td>
<code>{{ shortcut[0] }}-left</code> <small>and</small> <br>
<code>{{ shortcut[0] }}-right</code>
</td>
<td><code>{{ shortcut[1] }}{{ include.horizontal }}</code></td>
{% for value in include.values %}
<td><code>{{ shortcut[1] }}{{ include.horizontal }}-{{ value[0] }}</code></td>
{% endfor %}
</tr>
{% if include.vertical %}
<tr>
<td>
<code>{{ shortcut[0] }}-top</code> <small>and</small> <br>
<code>{{ shortcut[0] }}-bottom</code>
</td>
<td><code>{{ shortcut[1] }}{{ include.vertical }}</code></td>
{% for value in include.values %}
<td><code>{{ shortcut[1] }}{{ include.vertical }}-{{ value[0] }}</code></td>
{% endfor %}
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>

3
docs/_includes/index/customize.html
View File

@ -98,7 +98,6 @@
</div>
{% include components/hero-buttons.html href=customize_link.path
content="<span>Learn how to <strong>customize</strong></span
>" %}
content="<span>Learn how to <strong>customize</strong></span>" %}
</div>
</section>

52
docs/_javascript/main.js
View File

@ -260,8 +260,8 @@ document.addEventListener('DOMContentLoaded', () => {
// Functions
function getAll(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
function getAll(selector, parent = document) {
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
}
// Scrolling
@ -345,6 +345,54 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
// Spacing table
const spacingTables = getAll('.bd-spacing-table');
spacingTables.forEach(spacingEl => {
const spacingRows = getAll('tbody tr', spacingEl);
const spacingCells = getAll('tbody td', spacingEl);
const spacingValues = getAll('tfoot th', spacingEl);
spacingEl.addEventListener('mouseleave', () => {
resetTable(spacingCells, spacingValues);
});
spacingCells.forEach(el => {
el.addEventListener('mouseenter', () => {
resetTable(spacingCells, spacingValues);
const row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode);
const column = Array.prototype.indexOf.call(el.parentNode.children, el);
highlightRowAndColumn(row, column, spacingRows, spacingValues);
});
});
});
function resetTable(cells, values) {
cells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column'));
values.forEach(el => el.classList.remove('bd-current-value'));
}
function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
const row = rows[rowIndex];
let i = columnIndex;
while (i > -1) {
row.children[i].classList.add('bd-current-row');
i--;
}
const nextRows = rows.slice(rowIndex);
nextRows.forEach(r => {
r.children[columnIndex].classList.add('bd-current-column');
});
if (columnIndex < 2) {
return;
}
values[columnIndex - 1].classList.add('bd-current-value');
}
// Scroll
function upOrDown(lastY, currentY) {

28
docs/_sass/specific.sass
View File

@ -1,3 +1,31 @@
.bd-spacing-table
&:hover
color: $border
code
background: none
color: $border
.bd-current-row
background-color: $background
&:first-child
background-color: $danger-light
color: $text-strong
code
background-color: $danger
color: $danger-invert
&.bd-current-column
background-color: $primary-light
color: $text-strong
code
background-color: $primary
color: $primary-invert
.bd-current-column
background-color: $background
.bd-current-value
background-color: $danger-light
code
background-color: $danger
color: $danger-invert
+selection
background-color: $primary
color: $primary-invert

2866
docs/css/bulma-docs.css
View File

File diff suppressed because it is too large Load Diff

2
docs/css/bulma-docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

61
docs/documentation/components/list.html
View File

@ -1,61 +0,0 @@
---
title: List
layout: documentation
doc-tab: components
doc-subtab: list
breadcrumb:
- home
- documentation
- components
- components-list
meta:
colors: false
sizes: false
variables: true
---
{% capture list_example %}
<div class="list is-hoverable">
<a class="list-item">
Featured
</a>
<a class="list-item">
All Posts
</a>
<a class="list-item is-active">
Announcements
</a>
<a class="list-item">
Business
</a>
<a class="list-item">
Community
</a>
<a class="list-item">
Data
</a>
<a class="list-item">
Editor Tools
</a>
<a class="list-item">
Education
</a>
<a class="list-item">
Engineering
</a>
<a class="list-item">
Events
</a>
<a class="list-item">
Policy
</a>
</div>
{% endcapture %}
<div class="content">
<p>
The list component consists of several elements:
</p>
</div>
{% include elements/snippet.html content=list_example more=true %}

12
docs/documentation/helpers.html Normal file
View File

@ -0,0 +1,12 @@
---
title: Helpers
layout: documentation
doc-tab: helpers
hide_tabs: true
breadcrumb:
- home
- documentation
- helpers
---
{% include components/links.html category_id='helpers' %}

203
docs/documentation/helpers/color-helpers.html Normal file
View File

@ -0,0 +1,203 @@
---
title: Color helpers
layout: documentation
doc-tab: helpers
doc-subtab: helpers-color
breadcrumb:
- home
- documentation
- helpers
- helpers-color
---
{% include elements/anchor.html name="Text color" %}
<div class="content">
<p>
You can set any element to one of the <strong>10 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Color
</th>
<th>
Example
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td><td class="has-text-white has-background-black">Hello Bulma</td></tr>
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td><td class="has-text-black">Hello Bulma</td></tr>
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td><td class="has-text-light has-background-grey">Hello Bulma</td></tr>
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-dark">Hello Bulma</td></tr>
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td><td class="has-text-primary">Hello Bulma</td></tr>
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td><td class="has-text-link">Hello Bulma</td></tr>
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td><td class="has-text-info">Hello Bulma</td></tr>
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td><td class="has-text-success">Hello Bulma</td></tr>
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td><td class="has-text-warning">Hello Bulma</td></tr>
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td><td class="has-text-danger">Hello Bulma</td></tr>
</tbody>
</table>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Shade
</th>
<th>
Example
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td><td class="has-text-black-bis">Hello Bulma</td></tr>
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td><td class="has-text-black-ter">Hello Bulma</td></tr>
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td><td class="has-text-grey-darker">Hello Bulma</td></tr>
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td><td class="has-text-grey-dark">Hello Bulma</td></tr>
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td><td class="has-text-grey">Hello Bulma</td></tr>
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td><td class="has-text-grey-light">Hello Bulma</td></tr>
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td><td class="has-text-grey-lighter">Hello Bulma</td></tr>
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td><td class="has-background-black-ter has-text-white-ter">Hello Bulma</td></tr>
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td><td class="has-background-black-bis has-text-white-bis">Hello Bulma</td></tr>
</tbody>
</table>
{% include elements/new-tag.html version="0.9.0" %}
<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Light/Dark color
</th>
<th>
Example
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-background-dark has-text-primary-light">Hello Bulma</td></tr>
<tr><td><code>has-text-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-background-dark has-text-link-light">Hello Bulma</td></tr>
<tr><td><code>has-text-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-background-dark has-text-info-light">Hello Bulma</td></tr>
<tr><td><code>has-text-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-background-dark has-text-success-light">Hello Bulma</td></tr>
<tr><td><code>has-text-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-background-dark has-text-warning-light">Hello Bulma</td></tr>
<tr><td><code>has-text-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-background-dark has-text-danger-light">Hello Bulma</td></tr>
<tr><td><code>has-text-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-primary-dark">Hello Bulma</td></tr>
<tr><td><code>has-text-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-link-dark">Hello Bulma</td></tr>
<tr><td><code>has-text-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-info-dark">Hello Bulma</td></tr>
<tr><td><code>has-text-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-success-dark">Hello Bulma</td></tr>
<tr><td><code>has-text-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-warning-dark">Hello Bulma</td></tr>
<tr><td><code>has-text-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-danger-dark">Hello Bulma</td></tr>
</tbody>
</table>
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
{% include elements/anchor.html name="Background color" %}
{% include elements/new-tag.html version="0.7.0" %}
<div class="content">
<p>
You can set any element to one of the <strong>10 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Background color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
</tbody>
</table>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Background shade
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
{% include elements/new-tag.html version="0.9.0" %}
<p class="block">You can use each color in their <strong>light</strong> and <strong>dark versions</strong>. Simply append <code>*-light</code> or <code>*-dark</code>.</p>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Light/Dark background
</th>
<th>
Example
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-background-primary-light</code></td><td>{% include color/turquoise-light.html %}</td><td class="has-text-primary has-background-primary-light">Hello Bulma</td></tr>
<tr><td><code>has-background-link-light</code></td><td>{% include color/blue-light.html %}</td><td class="has-text-link has-background-link-light">Hello Bulma</td></tr>
<tr><td><code>has-background-info-light</code></td><td>{% include color/cyan-light.html %}</td><td class="has-text-info has-background-info-light">Hello Bulma</td></tr>
<tr><td><code>has-background-success-light</code></td><td>{% include color/green-light.html %}</td><td class="has-text-success has-background-success-light">Hello Bulma</td></tr>
<tr><td><code>has-background-warning-light</code></td><td>{% include color/yellow-light.html %}</td><td class="has-text-warning has-background-warning-light">Hello Bulma</td></tr>
<tr><td><code>has-background-danger-light</code></td><td>{% include color/red-light.html %}</td><td class="has-text-danger has-background-danger-light">Hello Bulma</td></tr>
<tr><td><code>has-background-primary-dark</code></td><td>{% include color/turquoise-dark.html %}</td><td class="has-text-white has-background-primary-dark">Hello Bulma</td></tr>
<tr><td><code>has-background-link-dark</code></td><td>{% include color/blue-dark.html %}</td><td class="has-text-white has-background-link-dark">Hello Bulma</td></tr>
<tr><td><code>has-background-info-dark</code></td><td>{% include color/cyan-dark.html %}</td><td class="has-text-white has-background-info-dark">Hello Bulma</td></tr>
<tr><td><code>has-background-success-dark</code></td><td>{% include color/green-dark.html %}</td><td class="has-text-white has-background-success-dark">Hello Bulma</td></tr>
<tr><td><code>has-background-warning-dark</code></td><td>{% include color/yellow-dark.html %}</td><td class="has-text-white has-background-warning-dark">Hello Bulma</td></tr>
<tr><td><code>has-background-danger-dark</code></td><td>{% include color/red-dark.html %}</td><td class="has-text-white has-background-danger-dark">Hello Bulma</td></tr>
</tbody>
</table>

56
docs/documentation/helpers/other-helpers.html Normal file
View File

@ -0,0 +1,56 @@
---
title: Other helpers
layout: documentation
doc-tab: helpers
doc-subtab: helpers-other
breadcrumb:
- home
- documentation
- helpers
- helpers-other
---
<p class="block">
Here are some other helpers shipped with Bulma:
</p>
<table class="table is-bordered">
<tbody>
<tr>
<td><code>is-clearfix</code></td>
<td>Fixes an element's floating children</td>
</tr>
<tr>
<td><code>is-pulled-left</code></td>
<td>Moves an element to the <strong>left</strong></td>
</tr>
<tr>
<td><code>is-pulled-right</code></td>
<td>Moves an element to the <strong>right</strong></td>
</tr>
<tr>
<td><code>is-overlay</code></td>
<td>Completely <strong>covers</strong> the first positioned parent</td>
</tr>
<tr>
<td><code>is-clipped</code></td>
<td>Adds overflow <strong>hidden</strong></td>
</tr>
<tr>
<td><code>is-radiusless</code></td>
<td>Removes any <strong>radius</strong></td>
</tr>
<tr>
<td><code>is-shadowless</code></td>
<td>Removes any <strong>shadow</strong></td>
</tr>
<tr>
<td><code>is-unselectable</code></td>
<td>Prevents the text from being <strong>selectable</strong></td>
</tr>
<tr>
<td><code>is-relative</code></td>
<td>Applies <code>position: relative</code> to the element.</td>
</tr>
</tbody>
</table>

183
docs/documentation/helpers/spacing-helpers.html Normal file
View File

@ -0,0 +1,183 @@
---
title: Spacing helpers
layout: documentation
doc-tab: helpers
doc-subtab: helpers-spacing
breadcrumb:
- home
- documentation
- helpers
- helpers-spacing
shortcuts:
margin: m
padding: p
directions:
top: t
right: r
bottom: b
left: l
horizontal: x
vertical: y
values:
0: 0
1: 0.25rem
2: 0.5rem
3: 0.75rem
4: 1rem
5: 1.5rem
6: 3rem
customShortcuts:
margin: mg
customHorizontal: h
customValues:
small: 10px
medium: 30px
large: 60px
---
{% include elements/new-tag.html version="0.9.0" %}
<div class="content">
<p>Bulma provides <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>
<ul>
<li>
<code>*t</code> for <strong>top</strong>
</li>
<li>
<code>*r</code> for <strong>right</strong>
</li>
<li>
<code>*b</code> for <strong>bottom</strong>
</li>
<li>
<code>*l</code> for <strong>left</strong>
</li>
<li>
<code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong>
</li>
<li>
<code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong>
</li>
</ul>
<p>
You need to <strong>combine</strong> a margin/padding prefix with a direction suffix. For example:
</p>
<ul>
<li>for a <code>margin-top</code>, use <code>mt-*</code></li>
<li>for a <code>padding-bottom</code>, use <code>pb-*</code></li>
<li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li>
</ul>
<p>
Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<th>Suffix</th>
<th>Value</th>
</thead>
<tbody>
<tr><td><code>*-0</code></td><td><code>0</code></td></tr>
<tr><td><code>*-1</code></td><td><code>0.25rem</code></td></tr>
<tr><td><code>*-2</code></td><td><code>0.5rem</code></td></tr>
<tr><td><code>*-3</code></td><td><code>0.75rem</code></td></tr>
<tr><td><code>*-4</code></td><td><code>1rem</code></td></tr>
<tr><td><code>*-5</code></td><td><code>1.5rem</code></td></tr>
<tr><td><code>*-6</code></td><td><code>3rem</code></td></tr>
</tbody>
</table>
{% include elements/anchor.html name="List of all spacing helpers" %}
<p class="block">
There are <strong>84 spacing helpers</strong> to choose from:
</p>
{% include
components/spacing-table.html
values=page.values
shortcuts=page.shortcuts
directions=page.directions
horizontal=page.horizontal
vertical=page.vertical
%}
<div class="content">
<p>
To use these classes, simply append them to any HTML element:
</p>
</div>
{% highlight html %}
<!-- Adds 1rem of margin at the bottom -->
<p class="mb-4">
Margin bottom
</p>
<!-- Adds 0.25rem of padding on the left and the right -->
<p class="px-1">
Horizontal padding
</p>
<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
<p class="mr-0 pt-3">
Both
</p>
{% endhighlight %}
{% include elements/anchor.html name="Configuration" %}
{% capture custom %}
$spacing-shortcuts: ("margin": "mg");
$spacing-horizontal: "h";
$spacing-vertical: null;
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
{% endcapture %}
<div class="content">
<p>
Because every developer has their own preferences, and to satisfy Bulma's customization features, it's possible to specify your own <strong>class name shortcuts</strong> as well as the <strong>spacing values</strong>.
</p>
<p>
For example, if you wanted:
</p>
<ul>
<li>
<strong>margin</strong> to be abbreviated to <code>mg</code>
</li>
<li>
<strong>padding</strong> to be totally <strong class="has-text-danger">excluded</strong>
</li>
<li>
<strong>horizontal</strong> to be abbreviated to <code>h</code>
</li>
<li>
<strong>vertical</strong> to be excluded as well
</li>
<li>
and to only have 3 values: <strong>"small"</strong> at <code>10px</code>, <strong>"medium"</strong> at <code>30px</code>, and <strong>"large"</strong> at <code>60px</code>
</li>
</ul>
<p>
You can simplify the CSS output by customizing these <strong>SCSS variables</strong>:
</p>
</div>
{% highlight scss %}{{ custom }}{% endhighlight %}
{% include
components/spacing-table.html
values=page.customValues
shortcuts=page.customShortcuts
directions=page.directions
horizontal=page.customHorizontal
%}
<p>
By customizing the output, you've narrowed down the list of spacing helpers from 84 to only <strong>15</strong>.
</p>

410
docs/documentation/helpers/typography-helpers.html Normal file
View File

@ -0,0 +1,410 @@
---
title: Typography helpers
layout: documentation
doc-tab: helpers
doc-subtab: helpers-typography
breadcrumb:
- home
- documentation
- helpers
- helpers-typography
---
{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
{% assign sizes = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
{% capture thead %}
<thead>
<tr>
<th>
Class
</th>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th>
{{ breakpoint.name }}<br>
{% if breakpoint.id == 'mobile' %}
Up to <code>{{ breakpoint.to }}px</code>
{% elsif breakpoint.id == 'fullhd' %}
<code>{{ breakpoint.from }}px</code> and above
{% else %}
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endcapture %}
{% capture size1 %}
<td class="is-narrow has-background-danger-light">
<code class="has-background-danger-light">{{ initial_vars['$size-1'].value }}</code>
</td>
{% endcapture %}
{% capture unchanged %}
<td class="is-narrow has-text-grey-light">
unchanged
</td>
{% endcapture %}
{% capture left %}
<td class="is-narrow has-background-primary-light has-text-primary">
left-aligned
</td>
{% endcapture %}
{% include elements/anchor.html name="Size" %}
<div class="content">
<p>
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Font-size
</th>
</tr>
</thead>
<tbody>
{% for size in sizes %}
<tr>
{% assign key = '$size-' | append: forloop.index %}
<td><code>is-size-{{ forloop.index }}</code></td>
<td><code>{{ initial_vars[key].value }}</code></td>
</tr>
{% endfor %}
</tbody>
</table>
{% include elements/anchor.html name="Responsive size" %}
<div class="content">
<p>
You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the size modifier.
</p>
<p>
For example, here are the modifiers for <code>$size-1</code>:
</p>
</div>
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow"><code>is-size-1-mobile</code></td>
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow"><code>is-size-1-touch</code></td>
{{ size1 }}
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow"><code>is-size-1-tablet</code></td>
{{ unchanged }}
{{ size1 }}
{{ size1 }}
{{ size1 }}
{{ size1 }}
</tr>
<tr>
<td class="is-narrow"><code>is-size-1-desktop</code></td>
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
{{ size1 }}
{{ size1 }}
</tr>
<tr>
<td class="is-narrow"><code>is-size-1-widescreen</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
{{ size1 }}
</tr>
<tr>
<td class="is-narrow"><code>is-size-1-fullhd</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
</tr>
</tbody>
</table>
</div>
<div class="content">
<p>
You can use the same logic for each of the <strong>7 sizes</strong>.
</p>
</div>
{% include elements/anchor.html name="Alignment" %}
<div class="content">
<p>
You can align the text with the use of one of <strong>4 alignment helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Alignment
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-centered</code></td>
<td>Makes the text <strong>centered</strong></td>
</tr>
<tr>
<td><code>has-text-justified</code></td>
<td>Makes the text <strong>justified</strong></td>
</tr>
<tr>
<td><code>has-text-left</code></td>
<td>Makes the text aligned to the <strong>left</strong></td>
</tr>
<tr>
<td><code>has-text-right</code></td>
<td>Makes the text aligned to the <strong>right</strong></td>
</tr>
</tbody>
</table>
{% include elements/anchor.html name="Responsive Alignment" %}
<div class="content">
<p>
You can <strong>align text</strong> differently for each <strong>viewport width</strong>. Simply append the <strong>viewport width</strong> to the alignment modifier.
</p>
<p>
For example, here are the modifiers for <code>has-text-left</code>:
</p>
</div>
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow"><code>has-text-left-mobile</code></td>
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow"><code>has-text-left-touch</code></td>
{{ left }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow"><code>has-text-left-tablet-only</code></td>
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow"><code>has-text-left-tablet</code></td>
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
{{ left }}
</tr>
<tr>
<td class="is-narrow"><code>has-text-left-desktop-only</code></td>
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow"><code>has-text-left-desktop</code></td>
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
</tr>
<tr>
<td class="is-narrow"><code>has-text-left-widescreen-only</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow"><code>has-text-left-widescreen</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
</tr>
<tr>
<td class="is-narrow"><code>has-text-left-fullhd</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
</tr>
</tbody>
</table>
</div>
<div class="content">
<p>
You can use the same logic for each of the <strong>4 alignments</strong>.
</p>
</div>
{% include elements/anchor.html name="Text transformation" %}
<div class="content">
<p>
You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Transformation
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>is-capitalized</code></td>
<td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
</tr>
<tr>
<td><code>is-lowercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
</tr>
<tr>
<td><code>is-uppercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
</tr>
<tr>
<td><code>is-italic</code></td>
<td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
</tr>
</tbody>
</table>
{% include elements/anchor.html name="Text weight" %}
<div class="content">
<p>
You can transform the text weight with the use of one of <strong>5 text weight helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Weight
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-weight-light</code></td>
<td>Transforms text weight to <strong>light</strong></td>
</tr>
<tr>
<td><code>has-text-weight-normal</code></td>
<td>Transforms text weight to <strong>normal</strong></td>
</tr>
<tr>
<td><code>has-text-weight-medium</code></td>
<td>Transforms text weight to <strong>medium</strong></td>
</tr>
<tr>
<td><code>has-text-weight-semibold</code></td>
<td>Transforms text weight to <strong>semi-bold</strong></td>
</tr>
<tr>
<td><code>has-text-weight-bold</code></td>
<td>Transforms text weight to <strong>bold</strong></td>
</tr>
</tbody>
</table>
{% include elements/anchor.html name="Font family" %}
{% include elements/new-tag.html version="0.7.4" %}
<div class="content">
<p>
You can change the font family with the use of one of <strong>5 font family helpers</strong>:
</p>
</div>
{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %}
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Family
</th>
</tr>
</thead>
<tbody>
{% for family in font_families %}
<tr>
<td><code>is-family-{{ family }}</code></td>
<td>Sets font family to <code>$family-{{ family }}</code></td>
</tr>
{% endfor %}
</tbody>
</table>

307
docs/documentation/helpers/visibility-helpers.html Normal file
View File

@ -0,0 +1,307 @@
---
title: Responsive helpers
layout: documentation
doc-tab: helpers
doc-subtab: helpers-visibility
breadcrumb:
- home
- documentation
- helpers
- helpers-visibility
---
{% capture thead %}
<thead>
<tr>
<th>
Class
</th>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th>
{{ breakpoint.name }}<br>
{% if breakpoint.id == 'mobile' %}
Up to <code>{{ breakpoint.to }}px</code>
{% elsif breakpoint.id == 'fullhd' %}
<code>{{ breakpoint.from }}px</code> and above
{% else %}
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endcapture %}
{% capture flex %}
<td class="is-narrow has-text-primary has-background-primary-light">
Flex
</td>
{% endcapture %}
{% capture visible %}
<td class="is-narrow has-text-success has-background-success-light">
Visible
</td>
{% endcapture %}
{% capture hidden %}
<td class="is-narrow has-text-danger has-background-danger-light">
Hidden
</td>
{% endcapture %}
{% capture unchanged %}
<td class="is-narrow has-text-grey-light">
Unchanged
</td>
{% endcapture %}
{% include elements/anchor.html name="Show" %}
<div class="content">
<p>
You can use one of the following <code>display</code> classes:
</p>
<ul>
<li><code>is-block</code></li>
<li><code>is-flex</code></li>
<li><code>is-inline</code></li>
<li><code>is-inline-block</code></li>
<li><code>is-inline-flex</code></li>
</ul>
<p>For example, here's how the <code>is-flex</code> helper works:</p>
</div>
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-flex-mobile</code>
</td>
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet-only</code>
</td>
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
</tr>
<tr>
<th colspan="5">
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-touch</code>
</td>
{{ flex }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet</code>
</td>
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-fullhd</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
</tr>
</tbody>
</table>
</div>
<div class="content">
<p>
For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
</p>
</div>
{% include elements/anchor.html name="Hide" %}
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-hidden-mobile</code>
</td>
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet-only</code>
</td>
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-desktop-only</code>
</td>
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-widescreen-only</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
</tr>
<tr>
<th colspan="5">
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-touch</code>
</td>
{{ hidden }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet</code>
</td>
{{ visible }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-desktop</code>
</td>
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-widescreen</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-fullhd</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
</tr>
</tbody>
</table>
</div>
{% include elements/anchor.html name="Other visibility helpers" %}
<table class="table is-bordered">
<tbody>
<tr>
<td><code>is-invisible</code></td>
<td>Adds visibility <strong>hidden</strong></td>
</tr>
<tr>
<td><code>is-hidden</code></td>
<td>Hides element</td>
</tr>
<tr>
<td><code>is-sr-only</code></td>
<td>Hide elements <strong>visually</strong> but keep the element available to be announced by a <strong>screen reader</strong></td>
</tr>
</tbody>
</table>

92
docs/documentation/modifiers/color-helpers.html
View File

@ -9,95 +9,3 @@ breadcrumb:
- modifiers
- modifiers-color-helpers
---
{% include elements/anchor.html name="Text color" %}
<div class="content">
<p>
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
{% if vernum >= 70 %}
{% include elements/anchor.html name="Background color" %}
{% include elements/new-tag.html version="0.7.0" %}
<div class="content">
<p>
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Background color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-background-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-background-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-background-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-background-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-background-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-background-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-background-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-background-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-background-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-background-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-background-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-background-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-background-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-background-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-background-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-background-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-background-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-background-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
{% endif %}

64
docs/documentation/modifiers/helpers.html
View File

@ -10,66 +10,4 @@ breadcrumb:
- modifiers-helpers
---
<table class="table is-bordered">
<tbody>
<tr>
<th rowspan="3">Float</th>
<td><code>is-clearfix</code></td>
<td>Fixes an element's floating children</td>
</tr>
<tr>
<td><code>is-pulled-left</code></td>
<td>Moves an element to the left</td>
</tr>
<tr>
<td><code>is-pulled-right</code></td>
<td>Moves an element to the right</td>
</tr>
<tr>
<th rowspan="2">Spacing</th>
<td><code>is-marginless</code></td>
<td>Removes any <strong>margin</strong></td>
</tr>
<tr>
<td><code>is-paddingless</code></td>
<td>Removes any <strong>padding</strong></td>
</tr>
<tr>
<th rowspan="9">Other</th>
<td><code>is-overlay</code></td>
<td>Completely covers the first positioned parent</td>
</tr>
<tr>
<td><code>is-clipped</code></td>
<td>Adds overflow <strong>hidden</strong></td>
</tr>
<tr>
<td><code>is-radiusless</code></td>
<td>Removes any <strong>radius</strong></td>
</tr>
<tr>
<td><code>is-shadowless</code></td>
<td>Removes any <strong>shadow</strong></td>
</tr>
<tr>
<td><code>is-unselectable</code></td>
<td>Prevents the text from being <strong>selectable</strong></td>
</tr>
<tr>
<td><code>is-invisible</code></td>
<td>Adds visibility <strong>hidden</strong></td>
</tr>
<tr>
<td><code>is-hidden</code></td>
<td>Hides element</td>
</tr>
<tr>
<td><code>is-sr-only</code></td>
<td>Hide elements <strong>visually</strong> but keep the element available to be announced by a <strong>screen reader</strong></td>
</tr>
<tr>
<td><code>is-relative</code></td>
<td>Applies <code>position: relative</code> to the element.</td>
</tr>
</tbody>
</table>

289
docs/documentation/modifiers/responsive-helpers.html
View File

@ -10,292 +10,3 @@ breadcrumb:
- modifiers
- modifiers-responsive-helpers
---
{% capture thead %}
<thead>
<tr>
<th>
Class
</th>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th>
{{ breakpoint.name }}<br>
{% if breakpoint.id == 'mobile' %}
Up to <code>{{ breakpoint.to }}px</code>
{% elsif breakpoint.id == 'fullhd' %}
<code>{{ breakpoint.from }}px</code> and above
{% else %}
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endcapture %}
{% capture flex %}
<td class="is-narrow">
<p class="notification is-primary">flex</p>
</td>
{% endcapture %}
{% capture visible %}
<td class="is-narrow">
<p class="notification is-primary">visible</p>
</td>
{% endcapture %}
{% capture hidden %}
<td class="is-narrow">
<p class="notification">hidden</p>
</td>
{% endcapture %}
{% capture unchanged %}
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{% endcapture %}
{% include elements/anchor.html name="Show" %}
<div class="content">
<p>
You can use one of the following <code>display</code> classes:
</p>
<ul>
<li><code>is-block</code></li>
<li><code>is-flex</code></li>
<li><code>is-inline</code></li>
<li><code>is-inline-block</code></li>
<li><code>is-inline-flex</code></li>
</ul>
<p>For example, here's how the <code>is-flex</code> helper works:</p>
</div>
{% include layout/main-close.html show_categories=true %}
<div class="container">
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-flex-mobile</code>
</td>
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet-only</code>
</td>
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen-only</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ unchanged }}
</tr>
<tr>
<th colspan="5">
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-touch</code>
</td>
{{ flex }}
{{ flex }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-tablet</code>
</td>
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-desktop</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-widescreen</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
{{ flex }}
</tr>
<tr>
<td class="is-narrow">
<code>is-flex-fullhd</code>
</td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ flex }}
</tr>
</tbody>
</table>
</div>
</div>
{% include layout/main-open.html %}
<div class="content">
<p>
For the other display options, just replace <code>is-flex</code> with <code>is-block</code> <code>is-inline</code> <code>is-inline-block</code> or <code>is-inline-flex</code>
</p>
</div>
{% include elements/anchor.html name="Hide" %}
{% include layout/main-close.html %}
<div class="container">
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td class="is-narrow">
<code>is-hidden-mobile</code>
</td>
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet-only</code>
</td>
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-desktop-only</code>
</td>
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-widescreen-only</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ visible }}
</tr>
<tr>
<th colspan="5">
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
</th>
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-touch</code>
</td>
{{ hidden }}
{{ hidden }}
{{ visible }}
{{ visible }}
{{ visible }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-tablet</code>
</td>
{{ visible }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-desktop</code>
</td>
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-widescreen</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
{{ hidden }}
</tr>
<tr>
<td class="is-narrow">
<code>is-hidden-fullhd</code>
</td>
{{ visible }}
{{ visible }}
{{ visible }}
{{ visible }}
{{ hidden }}
</tr>
</tbody>
</table>
</div>
</div>
{% include layout/main-open.html %}

440
docs/documentation/modifiers/typography-helpers.html
View File

@ -10,443 +10,3 @@ breadcrumb:
- modifiers-typography-helpers
---
{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %}
{% assign sizes = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %}
{% capture thead %}
<thead>
<tr>
<th>
Class
</th>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th>
{{ breakpoint.name }}<br>
{% if breakpoint.id == 'mobile' %}
Up to <code>{{ breakpoint.to }}px</code>
{% elsif breakpoint.id == 'fullhd' %}
<code>{{ breakpoint.from }}px</code> and above
{% else %}
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endcapture %}
{% capture size1 %}
<td class="is-narrow">
<p class="notification is-primary"><code>{{ initial_vars['$size-1'].value }}</code></p>
</td>
{% endcapture %}
{% capture unchanged %}
<td class="is-narrow">
<p class="notification">unchanged</p>
</td>
{% endcapture %}
{% capture left %}
<td class="is-narrow">
<p class="notification is-primary">left-aligned</p>
</td>
{% endcapture %}
{% include elements/anchor.html name="Size" %}
<div class="content">
<p>
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Font-size
</th>
</tr>
</thead>
<tbody>
{% for size in sizes %}
<tr>
{% assign key = '$size-' | append: forloop.index %}
<td><code>is-size-{{ forloop.index }}</code></td>
<td><code>{{ initial_vars[key].value }}</code></td>
</tr>
{% endfor %}
</tbody>
</table>
{% include elements/anchor.html name="Responsive size" %}
<div class="content">
<p>
You can choose a <strong>specific</strong> size for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the size modifier.
</p>
<p>
For example, here are the modifiers for <code>$size-1</code>:
</p>
</div>
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td><code>is-size-1-mobile</code></td>
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>is-size-1-tablet</code></td>
{{ unchanged }}
{{ size1 }}
{{ size1 }}
{{ size1 }}
{{ size1 }}
</tr>
<tr>
<td><code>is-size-1-touch</code></td>
{{ size1 }}
{{ size1 }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>is-size-1-desktop</code></td>
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
{{ size1 }}
{{ size1 }}
</tr>
<tr>
<td><code>is-size-1-widescreen</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
{{ size1 }}
</tr>
<tr>
<td><code>is-size-1-fullhd</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ size1 }}
</tr>
</tbody>
</table>
</div>
<div class="content">
<p>
You can use the same logic for each of the <strong>7 sizes</strong>.
</p>
</div>
{% include elements/anchor.html name="Colors" %}
<div class="content">
<p>
You can set any element to one of the <strong>9 colors</strong> or <strong>9 shades of grey</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Color
</th>
</tr>
</thead>
<tbody>
<tr><td><code>has-text-white</code></td><td>{% include color/white.html %}</td></tr>
<tr><td><code>has-text-black</code></td><td>{% include color/black.html %}</td></tr>
<tr><td><code>has-text-light</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-dark</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-primary</code></td><td>{% include color/turquoise.html %}</td></tr>
<tr><td><code>has-text-info</code></td><td>{% include color/cyan.html %}</td></tr>
<tr><td><code>has-text-link</code></td><td>{% include color/blue.html %}</td></tr>
<tr><td><code>has-text-success</code></td><td>{% include color/green.html %}</td></tr>
<tr><td><code>has-text-warning</code></td><td>{% include color/yellow.html %}</td></tr>
<tr><td><code>has-text-danger</code></td><td>{% include color/red.html %}</td></tr>
<tr><td><code>has-text-black-bis</code></td><td>{% include color/black-bis.html %}</td></tr>
<tr><td><code>has-text-black-ter</code></td><td>{% include color/black-ter.html %}</td></tr>
<tr><td><code>has-text-grey-darker</code></td><td>{% include color/grey-darker.html %}</td></tr>
<tr><td><code>has-text-grey-dark</code></td><td>{% include color/grey-dark.html %}</td></tr>
<tr><td><code>has-text-grey</code></td><td>{% include color/grey.html %}</td></tr>
<tr><td><code>has-text-grey-light</code></td><td>{% include color/grey-light.html %}</td></tr>
<tr><td><code>has-text-grey-lighter</code></td><td>{% include color/grey-lighter.html %}</td></tr>
<tr><td><code>has-text-white-ter</code></td><td>{% include color/white-ter.html %}</td></tr>
<tr><td><code>has-text-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
{% include elements/anchor.html name="Alignment" %}
<div class="content">
<p>
You can align the text with the use of one of <strong>4 alignment helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Alignment
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-centered</code></td>
<td>Makes the text <strong>centered</strong></td>
</tr>
<tr>
<td><code>has-text-justified</code></td>
<td>Makes the text <strong>justified</strong></td>
</tr>
<tr>
<td><code>has-text-left</code></td>
<td>Makes the text aligned to the <strong>left</strong></td>
</tr>
<tr>
<td><code>has-text-right</code></td>
<td>Makes the text aligned to the <strong>right</strong></td>
</tr>
</tbody>
</table>
{% include elements/anchor.html name="Responsive Alignment" %}
<div class="content">
<p>
You can now <strong>align text</strong> for <em>each</em> viewport width. You simply need to append the <strong>viewport width</strong> to the alignment modifier.
</p>
<p>
For example, here are the modifiers for <code>has-text-left</code>:
</p>
</div>
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
<tr>
<td><code>has-text-left-mobile</code></td>
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-tablet</code></td>
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
{{ left }}
</tr>
<tr>
<td><code>has-text-left-tablet-only</code></td>
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-touch</code></td>
{{ left }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-desktop</code></td>
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
{{ left }}
</tr>
<tr>
<td><code>has-text-left-desktop-only</code></td>
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-widescreen</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ left }}
</tr>
<tr>
<td><code>has-text-left-widescreen-only</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
{{ unchanged }}
</tr>
<tr>
<td><code>has-text-left-fullhd</code></td>
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ unchanged }}
{{ left }}
</tr>
</tbody>
</table>
</div>
{% include elements/anchor.html name="Text transformation" %}
<div class="content">
<p>
You can transform the text with the use of one of <strong>4 text transformation helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Transformation
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>is-capitalized</code></td>
<td>Transforms <strong>the first character</strong> of each word to <strong>uppercase</strong></td>
</tr>
<tr>
<td><code>is-lowercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>lowercase</strong></td>
</tr>
<tr>
<td><code>is-uppercase</code></td>
<td>Transforms <strong>all characters</strong> to <strong>uppercase</strong></td>
</tr>
<tr>
<td><code>is-italic</code></td>
<td>Transforms <strong>all characters</strong> to <strong>italic</strong></td>
</tr>
</tbody>
</table>
{% include elements/anchor.html name="Text weight" %}
<div class="content">
<p>
You can transform the text weight with the use of one of <strong>5 text weight helpers</strong>:
</p>
</div>
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Weight
</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>has-text-weight-light</code></td>
<td>Transforms text weight to <strong>light</strong></td>
</tr>
<tr>
<td><code>has-text-weight-normal</code></td>
<td>Transforms text weight to <strong>normal</strong></td>
</tr>
<tr>
<td><code>has-text-weight-medium</code></td>
<td>Transforms text weight to <strong>medium</strong></td>
</tr>
<tr>
<td><code>has-text-weight-semibold</code></td>
<td>Transforms text weight to <strong>semi-bold</strong></td>
</tr>
<tr>
<td><code>has-text-weight-bold</code></td>
<td>Transforms text weight to <strong>bold</strong></td>
</tr>
</tbody>
</table>
{% include elements/anchor.html name="Font family" %}
{% include elements/new-tag.html version="0.7.4" %}
<div class="content">
<p>
You can change the font family with the use of one of <strong>5 font family helpers</strong>:
</p>
</div>
{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %}
<table class="table is-bordered">
<thead>
<tr>
<th>
Class
</th>
<th>
Family
</th>
</tr>
</thead>
<tbody>
{% for family in font_families %}
<tr>
<td><code>is-family-{{ family }}</code></td>
<td>Sets font family to <code>$family-{{ family }}</code></td>
</tr>
{% endfor %}
</tbody>
</table>

56
docs/lib/main.js
View File

@ -263,7 +263,9 @@ document.addEventListener('DOMContentLoaded', function () {
// Functions
function getAll(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
}
// Scrolling
@ -347,6 +349,58 @@ document.addEventListener('DOMContentLoaded', function () {
}
}
// Spacing table
var spacingTables = getAll('.bd-spacing-table');
spacingTables.forEach(function (spacingEl) {
var spacingRows = getAll('tbody tr', spacingEl);
var spacingCells = getAll('tbody td', spacingEl);
var spacingValues = getAll('tfoot th', spacingEl);
spacingEl.addEventListener('mouseleave', function () {
resetTable(spacingCells, spacingValues);
});
spacingCells.forEach(function (el) {
el.addEventListener('mouseenter', function () {
resetTable(spacingCells, spacingValues);
var row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode);
var column = Array.prototype.indexOf.call(el.parentNode.children, el);
highlightRowAndColumn(row, column, spacingRows, spacingValues);
});
});
});
function resetTable(cells, values) {
cells.forEach(function (el) {
return el.classList.remove('bd-current-row', 'bd-current-column');
});
values.forEach(function (el) {
return el.classList.remove('bd-current-value');
});
}
function highlightRowAndColumn(rowIndex, columnIndex, rows, values) {
var row = rows[rowIndex];
var i = columnIndex;
while (i > -1) {
row.children[i].classList.add('bd-current-row');
i--;
}
var nextRows = rows.slice(rowIndex);
nextRows.forEach(function (r) {
r.children[columnIndex].classList.add('bd-current-column');
});
if (columnIndex < 2) {
return;
}
values[columnIndex - 1].classList.add('bd-current-value');
}
// Scroll
function upOrDown(lastY, currentY) {

1
sass/base/_all.sass
View File

@ -2,4 +2,3 @@
@import "minireset.sass"
@import "generic.sass"
@import "helpers.sass"

282
sass/base/helpers.sass
View File

@ -1,281 +1 @@
// Float
.is-clearfix
+clearfix
.is-pulled-left
float: left !important
.is-pulled-right
float: right !important
// Overflow
.is-clipped
overflow: hidden !important
// Overlay
.is-overlay
@extend %overlay
// Typography
=typography-size($target:'')
@each $size in $sizes
$i: index($sizes, $size)
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
font-size: $size !important
+typography-size()
+mobile
+typography-size('mobile')
+tablet
+typography-size('tablet')
+touch
+typography-size('touch')
+desktop
+typography-size('desktop')
+widescreen
+typography-size('widescreen')
+fullhd
+typography-size('fullhd')
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
@each $alignment, $text-align in $alignments
.has-text-#{$alignment}
text-align: #{$text-align} !important
@each $alignment, $text-align in $alignments
+mobile
.has-text-#{$alignment}-mobile
text-align: #{$text-align} !important
+tablet
.has-text-#{$alignment}-tablet
text-align: #{$text-align} !important
+tablet-only
.has-text-#{$alignment}-tablet-only
text-align: #{$text-align} !important
+touch
.has-text-#{$alignment}-touch
text-align: #{$text-align} !important
+desktop
.has-text-#{$alignment}-desktop
text-align: #{$text-align} !important
+desktop-only
.has-text-#{$alignment}-desktop-only
text-align: #{$text-align} !important
+widescreen
.has-text-#{$alignment}-widescreen
text-align: #{$text-align} !important
+widescreen-only
.has-text-#{$alignment}-widescreen-only
text-align: #{$text-align} !important
+fullhd
.has-text-#{$alignment}-fullhd
text-align: #{$text-align} !important
.is-capitalized
text-transform: capitalize !important
.is-lowercase
text-transform: lowercase !important
.is-uppercase
text-transform: uppercase !important
.is-italic
font-style: italic !important
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
color: $color !important
a.has-text-#{$name}
&:hover,
&:focus
color: bulmaDarken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important
@each $name, $shade in $shades
.has-text-#{$name}
color: $shade !important
.has-background-#{$name}
background-color: $shade !important
.has-text-weight-light
font-weight: $weight-light !important
.has-text-weight-normal
font-weight: $weight-normal !important
.has-text-weight-medium
font-weight: $weight-medium !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
.has-text-weight-bold
font-weight: $weight-bold !important
.is-family-primary
font-family: $family-primary !important
.is-family-secondary
font-family: $family-secondary !important
.is-family-sans-serif
font-family: $family-sans-serif !important
.is-family-monospace
font-family: $family-monospace !important
.is-family-code
font-family: $family-code !important
// Visibility
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays
.is-#{$display}
display: #{$display} !important
+mobile
.is-#{$display}-mobile
display: #{$display} !important
+tablet
.is-#{$display}-tablet
display: #{$display} !important
+tablet-only
.is-#{$display}-tablet-only
display: #{$display} !important
+touch
.is-#{$display}-touch
display: #{$display} !important
+desktop
.is-#{$display}-desktop
display: #{$display} !important
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
+widescreen-only
.is-#{$display}-widescreen-only
display: #{$display} !important
+fullhd
.is-#{$display}-fullhd
display: #{$display} !important
.is-hidden
display: none !important
.is-sr-only
border: none !important
clip: rect(0, 0, 0, 0) !important
height: 0.01em !important
overflow: hidden !important
padding: 0 !important
position: absolute !important
white-space: nowrap !important
width: 0.01em !important
+mobile
.is-hidden-mobile
display: none !important
+tablet
.is-hidden-tablet
display: none !important
+tablet-only
.is-hidden-tablet-only
display: none !important
+touch
.is-hidden-touch
display: none !important
+desktop
.is-hidden-desktop
display: none !important
+desktop-only
.is-hidden-desktop-only
display: none !important
+widescreen
.is-hidden-widescreen
display: none !important
+widescreen-only
.is-hidden-widescreen-only
display: none !important
+fullhd
.is-hidden-fullhd
display: none !important
.is-invisible
visibility: hidden !important
+mobile
.is-invisible-mobile
visibility: hidden !important
+tablet
.is-invisible-tablet
visibility: hidden !important
+tablet-only
.is-invisible-tablet-only
visibility: hidden !important
+touch
.is-invisible-touch
visibility: hidden !important
+desktop
.is-invisible-desktop
visibility: hidden !important
+desktop-only
.is-invisible-desktop-only
visibility: hidden !important
+widescreen
.is-invisible-widescreen
visibility: hidden !important
+widescreen-only
.is-invisible-widescreen-only
visibility: hidden !important
+fullhd
.is-invisible-fullhd
visibility: hidden !important
// Other
.is-marginless
margin: 0 !important
.is-paddingless
padding: 0 !important
.is-radiusless
border-radius: 0 !important
.is-shadowless
box-shadow: none !important
.is-unselectable
@extend %unselectable
.is-relative
position: relative !important
@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."

1
sass/components/_all.sass
View File

@ -4,7 +4,6 @@
@import "card.sass"
@import "dropdown.sass"
@import "level.sass"
@import "list.sass"
@import "media.sass"
@import "menu.sass"
@import "message.sass"

39
sass/components/list.sass
View File

@ -1,39 +0,0 @@
$list-background-color: $scheme-main !default
$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$list-radius: $radius !default
$list-item-border: 1px solid $border !default
$list-item-color: $text !default
$list-item-active-background-color: $link !default
$list-item-active-color: $link-invert !default
$list-item-hover-background-color: $background !default
.list
@extend %block
background-color: $list-background-color
border-radius: $list-radius
box-shadow: $list-shadow
// &.is-hoverable > .list-item:hover:not(.is-active)
// background-color: $list-item-hover-background-color
// cursor: pointer
.list-item
display: block
padding: 0.5em 1em
&:not(a)
color: $list-item-color
&:first-child
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:last-child
border-bottom-left-radius: $list-radius
border-bottom-right-radius: $list-radius
&:not(:last-child)
border-bottom: $list-item-border
&.is-active
background-color: $list-item-active-background-color
color: $list-item-active-color
a.list-item
background-color: $list-item-hover-background-color
cursor: pointer

10
sass/helpers/_all.sass Normal file
View File

@ -0,0 +1,10 @@
@charset "utf-8"
@import "color.sass"
@import "float.sass"
@import "other.sass"
@import "overflow.sass"
@import "position.sass"
@import "spacing.sass"
@import "typography.sass"
@import "visibility.sass"

37
sass/helpers/color.sass Normal file
View File

@ -0,0 +1,37 @@
@each $name, $pair in $colors
$color: nth($pair, 1)
.has-text-#{$name}
color: $color !important
a.has-text-#{$name}
&:hover,
&:focus
color: bulmaDarken($color, 10%) !important
.has-background-#{$name}
background-color: $color !important
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
// Light
.has-text-#{$name}-light
color: $color-light !important
a.has-text-#{$name}-light
&:hover,
&:focus
color: bulmaDarken($color-light, 10%) !important
.has-background-#{$name}-light
background-color: $color-light !important
// Dark
.has-text-#{$name}-dark
color: $color-dark !important
a.has-text-#{$name}-dark
&:hover,
&:focus
color: bulmaLighten($color-dark, 10%) !important
.has-background-#{$name}-dark
background-color: $color-dark !important
@each $name, $shade in $shades
.has-text-#{$name}
color: $shade !important
.has-background-#{$name}
background-color: $shade !important

8
sass/helpers/float.sass Normal file
View File

@ -0,0 +1,8 @@
.is-clearfix
+clearfix
.is-pulled-left
float: left !important
.is-pulled-right
float: right !important

8
sass/helpers/other.sass Normal file
View File

@ -0,0 +1,8 @@
.is-radiusless
border-radius: 0 !important
.is-shadowless
box-shadow: none !important
.is-unselectable
@extend %unselectable

2
sass/helpers/overflow.sass Normal file
View File

@ -0,0 +1,2 @@
.is-clipped
overflow: hidden !important

5
sass/helpers/position.sass Normal file
View File

@ -0,0 +1,5 @@
.is-overlay
@extend %overlay
.is-relative
position: relative !important

28
sass/helpers/spacing.sass Normal file
View File

@ -0,0 +1,28 @@
.is-marginless
margin: 0 !important
.is-paddingless
padding: 0 !important
$spacing-shortcuts: ("margin": "m", "padding": "p") !default
$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
$spacing-horizontal: "x" !default
$spacing-vertical: "y" !default
$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
@each $property, $shortcut in $spacing-shortcuts
@each $name, $value in $spacing-values
// Cardinal directions
@each $direction, $suffix in $spacing-directions
.#{$shortcut}#{$suffix}-#{$name}
#{$property}-#{$direction}: $value !important
// Horizontal axis
@if $spacing-horizontal != null
.#{$shortcut}#{$spacing-horizontal}-#{$name}
#{$property}-left: $value !important
#{$property}-right: $value !important
// Vertical axis
@if $spacing-vertical != null
.#{$shortcut}#{$spacing-vertical}-#{$name}
#{$property}-top: $value !important
#{$property}-bottom: $value !important

98
sass/helpers/typography.sass Normal file
View File

@ -0,0 +1,98 @@
=typography-size($target:'')
@each $size in $sizes
$i: index($sizes, $size)
.is-size-#{$i}#{if($target == '', '', '-' + $target)}
font-size: $size !important
+typography-size()
+mobile
+typography-size('mobile')
+tablet
+typography-size('tablet')
+touch
+typography-size('touch')
+desktop
+typography-size('desktop')
+widescreen
+typography-size('widescreen')
+fullhd
+typography-size('fullhd')
$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
@each $alignment, $text-align in $alignments
.has-text-#{$alignment}
text-align: #{$text-align} !important
@each $alignment, $text-align in $alignments
+mobile
.has-text-#{$alignment}-mobile
text-align: #{$text-align} !important
+tablet
.has-text-#{$alignment}-tablet
text-align: #{$text-align} !important
+tablet-only
.has-text-#{$alignment}-tablet-only
text-align: #{$text-align} !important
+touch
.has-text-#{$alignment}-touch
text-align: #{$text-align} !important
+desktop
.has-text-#{$alignment}-desktop
text-align: #{$text-align} !important
+desktop-only
.has-text-#{$alignment}-desktop-only
text-align: #{$text-align} !important
+widescreen
.has-text-#{$alignment}-widescreen
text-align: #{$text-align} !important
+widescreen-only
.has-text-#{$alignment}-widescreen-only
text-align: #{$text-align} !important
+fullhd
.has-text-#{$alignment}-fullhd
text-align: #{$text-align} !important
.is-capitalized
text-transform: capitalize !important
.is-lowercase
text-transform: lowercase !important
.is-uppercase
text-transform: uppercase !important
.is-italic
font-style: italic !important
.has-text-weight-light
font-weight: $weight-light !important
.has-text-weight-normal
font-weight: $weight-normal !important
.has-text-weight-medium
font-weight: $weight-medium !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
.has-text-weight-bold
font-weight: $weight-bold !important
.is-family-primary
font-family: $family-primary !important
.is-family-secondary
font-family: $family-secondary !important
.is-family-sans-serif
font-family: $family-sans-serif !important
.is-family-monospace
font-family: $family-monospace !important
.is-family-code
font-family: $family-code !important

122
sass/helpers/visibility.sass Normal file
View File

@ -0,0 +1,122 @@
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
@each $display in $displays
.is-#{$display}
display: #{$display} !important
+mobile
.is-#{$display}-mobile
display: #{$display} !important
+tablet
.is-#{$display}-tablet
display: #{$display} !important
+tablet-only
.is-#{$display}-tablet-only
display: #{$display} !important
+touch
.is-#{$display}-touch
display: #{$display} !important
+desktop
.is-#{$display}-desktop
display: #{$display} !important
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
+widescreen-only
.is-#{$display}-widescreen-only
display: #{$display} !important
+fullhd
.is-#{$display}-fullhd
display: #{$display} !important
.is-hidden
display: none !important
.is-sr-only
border: none !important
clip: rect(0, 0, 0, 0) !important
height: 0.01em !important
overflow: hidden !important
padding: 0 !important
position: absolute !important
white-space: nowrap !important
width: 0.01em !important
+mobile
.is-hidden-mobile
display: none !important
+tablet
.is-hidden-tablet
display: none !important
+tablet-only
.is-hidden-tablet-only
display: none !important
+touch
.is-hidden-touch
display: none !important
+desktop
.is-hidden-desktop
display: none !important
+desktop-only
.is-hidden-desktop-only
display: none !important
+widescreen
.is-hidden-widescreen
display: none !important
+widescreen-only
.is-hidden-widescreen-only
display: none !important
+fullhd
.is-hidden-fullhd
display: none !important
.is-invisible
visibility: hidden !important
+mobile
.is-invisible-mobile
visibility: hidden !important
+tablet
.is-invisible-tablet
visibility: hidden !important
+tablet-only
.is-invisible-tablet-only
visibility: hidden !important
+touch
.is-invisible-touch
visibility: hidden !important
+desktop
.is-invisible-desktop
visibility: hidden !important
+desktop-only
.is-invisible-desktop-only
visibility: hidden !important
+widescreen
.is-invisible-widescreen
visibility: hidden !important
+widescreen-only
.is-invisible-widescreen-only
visibility: hidden !important
+fullhd
.is-invisible-fullhd
visibility: hidden !important

2
sass/utilities/_all.sass
View File

@ -2,7 +2,7 @@
@import "initial-variables.sass"
@import "functions.sass"
@import "derived-variables.sass"
@import "derived-variables.scss"
@import "animations.sass"
@import "mixins.sass"
@import "controls.sass"

106
sass/utilities/derived-variables.sass
View File

@ -1,106 +0,0 @@
$primary: $turquoise !default
$info: $cyan !default
$success: $green !default
$warning: $yellow !default
$danger: $red !default
$light: $white-ter !default
$dark: $grey-darker !default
// Invert colors
$orange-invert: findColorInvert($orange) !default
$yellow-invert: findColorInvert($yellow) !default
$green-invert: findColorInvert($green) !default
$turquoise-invert: findColorInvert($turquoise) !default
$cyan-invert: findColorInvert($cyan) !default
$blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default
$primary-invert: findColorInvert($primary) !default
$primary-light: findLightColor($primary) !default
$primary-dark: findDarkColor($primary) !default
$info-invert: findColorInvert($info) !default
$info-light: findLightColor($info) !default
$info-dark: findDarkColor($info) !default
$success-invert: findColorInvert($success) !default
$success-light: findLightColor($success) !default
$success-dark: findDarkColor($success) !default
$warning-invert: findColorInvert($warning) !default
$warning-light: findLightColor($warning) !default
$warning-dark: findDarkColor($warning) !default
$danger-invert: findColorInvert($danger) !default
$danger-light: findLightColor($danger) !default
$danger-dark: findDarkColor($danger) !default
$light-invert: findColorInvert($light) !default
$dark-invert: findColorInvert($dark) !default
// General colors
$scheme-main: $white !default
$scheme-main-bis: $white-bis !default
$scheme-main-ter: $white-ter !default
$scheme-invert: $black !default
$scheme-invert-bis: $black-bis !default
$scheme-invert-ter: $black-ter !default
$background: $white-ter !default
$border: $grey-lighter !default
$border-hover: $grey-light !default
$border-light: $grey-lightest !default
$border-light-hover: $grey-light !default
// Text colors
$text: $grey-dark !default
$text-invert: findColorInvert($text) !default
$text-light: $grey !default
$text-strong: $grey-darker !default
// Code colors
$code: $red !default
$code-background: $background !default
$pre: $text !default
$pre-background: $background !default
// Link colors
$link: $blue !default
$link-invert: findColorInvert($link) !default
$link-light: findLightColor($link) !default
$link-dark: findDarkColor($link) !default
$link-visited: $purple !default
$link-hover: $grey-darker !default
$link-hover-border: $grey-light !default
$link-focus: $grey-darker !default
$link-focus-border: $blue !default
$link-active: $grey-darker !default
$link-active-border: $grey-dark !default
// Typography
$family-primary: $family-sans-serif !default
$family-secondary: $family-sans-serif !default
$family-code: $family-monospace !default
$size-small: $size-7 !default
$size-normal: $size-6 !default
$size-medium: $size-5 !default
$size-large: $size-4 !default
// Lists and maps
$custom-colors: null !default
$custom-shades: null !default
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

132
sass/utilities/derived-variables.scss Normal file
View File

@ -0,0 +1,132 @@
$primary: $turquoise !default;
$info : $cyan !default;
$success: $green !default;
$warning: $yellow !default;
$danger : $red !default;
$light : $white-ter !default;
$dark : $grey-darker !default;
// Invert colors
$orange-invert : findColorInvert($orange) !default;
$yellow-invert : findColorInvert($yellow) !default;
$green-invert : findColorInvert($green) !default;
$turquoise-invert: findColorInvert($turquoise) !default;
$cyan-invert : findColorInvert($cyan) !default;
$blue-invert : findColorInvert($blue) !default;
$purple-invert : findColorInvert($purple) !default;
$red-invert : findColorInvert($red) !default;
$primary-invert : findColorInvert($primary) !default;
$primary-light : findLightColor($primary) !default;
$primary-dark : findDarkColor($primary) !default;
$info-invert : findColorInvert($info) !default;
$info-light : findLightColor($info) !default;
$info-dark : findDarkColor($info) !default;
$success-invert : findColorInvert($success) !default;
$success-light : findLightColor($success) !default;
$success-dark : findDarkColor($success) !default;
$warning-invert : findColorInvert($warning) !default;
$warning-light : findLightColor($warning) !default;
$warning-dark : findDarkColor($warning) !default;
$danger-invert : findColorInvert($danger) !default;
$danger-light : findLightColor($danger) !default;
$danger-dark : findDarkColor($danger) !default;
$light-invert : findColorInvert($light) !default;
$dark-invert : findColorInvert($dark) !default;
// General colors
$scheme-main : $white !default;
$scheme-main-bis : $white-bis !default;
$scheme-main-ter : $white-ter !default;
$scheme-invert : $black !default;
$scheme-invert-bis : $black-bis !default;
$scheme-invert-ter : $black-ter !default;
$background : $white-ter !default;
$border : $grey-lighter !default;
$border-hover : $grey-light !default;
$border-light : $grey-lightest !default;
$border-light-hover: $grey-light !default;
// Text colors
$text : $grey-dark !default;
$text-invert: findColorInvert($text) !default;
$text-light : $grey !default;
$text-strong: $grey-darker !default;
// Code colors
$code : $red !default;
$code-background: $background !default;
$pre : $text !default;
$pre-background : $background !default;
// Link colors
$link : $blue !default;
$link-invert : findColorInvert($link) !default;
$link-light : findLightColor($link) !default;
$link-dark : findDarkColor($link) !default;
$link-visited : $purple !default;
$link-hover : $grey-darker !default;
$link-hover-border : $grey-light !default;
$link-focus : $grey-darker !default;
$link-focus-border : $blue !default;
$link-active : $grey-darker !default;
$link-active-border: $grey-dark !default;
// Typography
$family-primary : $family-sans-serif !default;
$family-secondary: $family-sans-serif !default;
$family-code : $family-monospace !default;
$size-small : $size-7 !default;
$size-normal: $size-6 !default;
$size-medium: $size-5 !default;
$size-large : $size-4 !default;
// Lists and maps
$custom-colors: null !default;
$custom-shades: null !default;
$colors: mergeColorMaps(
(
"white" : ($white, $black),
"black" : ($black, $white),
"light" : ($light, $light-invert),
"dark" : ($dark, $dark-invert),
"primary": ($primary, $primary-invert, $primary-light, $primary-dark),
"link" : ($link, $link-invert, $link-light, $link-dark),
"info" : ($info, $info-invert, $info-light, $info-dark),
"success": ($success, $success-invert, $success-light, $success-dark),
"warning": ($warning, $warning-invert, $warning-light, $warning-dark),
"danger" : ($danger, $danger-invert, $danger-light, $danger-dark)),
$custom-colors
) !default;
$shades: mergeColorMaps(
(
"black-bis" : $black-bis,
"black-ter" : $black-ter,
"grey-darker" : $grey-darker,
"grey-dark" : $grey-dark,
"grey" : $grey,
"grey-light" : $grey-light,
"grey-lighter": $grey-lighter,
"white-ter" : $white-ter,
"white-bis" : $white-bis),
$custom-shades
) !default;
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;

5
sass/utilities/functions.sass
View File

@ -108,3 +108,8 @@
@if type-of($color) != 'color'
@return $color
@return darken($color, $amount)
@function bulmaLighten($color, $amount)
@if type-of($color) != 'color'
@return $color
@return lighten($color, $amount)