"icon": "arrows-alt-h",
"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",
"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-typography", "helpers-visibility", "helpers-spacing"],
+ "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"],
<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 == 'Helpers' %}
- <span class="tag bd-mini-tag is-danger">
+ <span class="tag bd-mini-tag is-primary">
New!
</span>
{% endif %}
// 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
}
}
+ // Spacing table
+
+ const spacingEl = document.getElementById('spacingTable');
+ const spacingRows = getAll('tbody tr', spacingEl);
+ const spacingCells = getAll('tbody td', spacingEl);
+ const spacingValues = getAll('tfoot th', spacingEl);
+
+ spacingEl.addEventListener('mouseleave', () => {
+ resetTable();
+ });
+
+ spacingCells.forEach(el => {
+ el.addEventListener('mouseenter', () => {
+ resetTable();
+ 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);
+ });
+ });
+
+ function resetTable() {
+ spacingRows.forEach(el => el.classList.remove('bd-current-row'));
+ spacingCells.forEach(el => el.classList.remove('bd-current-column'));
+ spacingValues.forEach(el => el.classList.remove('bd-current-value'));
+ }
+
+ function highlightRowAndColumn(rowIndex, columnIndex) {
+ const row = spacingRows[rowIndex];
+ row.classList.add('bd-current-row');
+
+ spacingRows.forEach(r => {
+ r.children[columnIndex].classList.add('bd-current-column');
+ });
+
+ if (columnIndex < 2) {
+ return;
+ }
+ spacingValues[columnIndex - 1].classList.add('bd-current-value');
+ }
+
// Scroll
function upOrDown(lastY, currentY) {
+#spacingTable
+ &:hover
+ color: $border
+ code
+ background: none
+ color: $border
+ .bd-current-row
+ background-color: $background
+ td:first-child,
+ .bd-current-column:not(:first-child)
+ background-color: $danger-light
+ color: $text-strong
+ code
+ background-color: $danger
+ color: $danger-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
margin-top: 0 !important;
}
-.mx-0 {
- margin-left: 0 !important;
- margin-right: 0 !important;
-}
-
-.my-0 {
- margin-top: 0 !important;
- margin-bottom: 0 !important;
-}
-
-.mt-1 {
- margin-top: 0.25rem !important;
-}
-
-.mx-1 {
- margin-left: 0.25rem !important;
- margin-right: 0.25rem !important;
-}
-
-.my-1 {
- margin-top: 0.25rem !important;
- margin-bottom: 0.25rem !important;
-}
-
-.mt-2 {
- margin-top: 0.5rem !important;
-}
-
-.mx-2 {
- margin-left: 0.5rem !important;
- margin-right: 0.5rem !important;
-}
-
-.my-2 {
- margin-top: 0.5rem !important;
- margin-bottom: 0.5rem !important;
-}
-
-.mt-3 {
- margin-top: 0.75rem !important;
-}
-
-.mx-3 {
- margin-left: 0.75rem !important;
- margin-right: 0.75rem !important;
-}
-
-.my-3 {
- margin-top: 0.75rem !important;
- margin-bottom: 0.75rem !important;
-}
-
-.mt-4 {
- margin-top: 1rem !important;
-}
-
-.mx-4 {
- margin-left: 1rem !important;
- margin-right: 1rem !important;
-}
-
-.my-4 {
- margin-top: 1rem !important;
- margin-bottom: 1rem !important;
-}
-
-.mt-5 {
- margin-top: 1.5rem !important;
-}
-
-.mx-5 {
- margin-left: 1.5rem !important;
- margin-right: 1.5rem !important;
-}
-
-.my-5 {
- margin-top: 1.5rem !important;
- margin-bottom: 1.5rem !important;
-}
-
-.mt-6 {
- margin-top: 3rem !important;
-}
-
-.mx-6 {
- margin-left: 3rem !important;
- margin-right: 3rem !important;
-}
-
-.my-6 {
- margin-top: 3rem !important;
- margin-bottom: 3rem !important;
-}
-
.mr-0 {
margin-right: 0 !important;
}
-.mx-0 {
- margin-left: 0 !important;
- margin-right: 0 !important;
-}
-
-.my-0 {
- margin-top: 0 !important;
+.mb-0 {
margin-bottom: 0 !important;
}
-.mr-1 {
- margin-right: 0.25rem !important;
-}
-
-.mx-1 {
- margin-left: 0.25rem !important;
- margin-right: 0.25rem !important;
-}
-
-.my-1 {
- margin-top: 0.25rem !important;
- margin-bottom: 0.25rem !important;
-}
-
-.mr-2 {
- margin-right: 0.5rem !important;
-}
-
-.mx-2 {
- margin-left: 0.5rem !important;
- margin-right: 0.5rem !important;
-}
-
-.my-2 {
- margin-top: 0.5rem !important;
- margin-bottom: 0.5rem !important;
-}
-
-.mr-3 {
- margin-right: 0.75rem !important;
-}
-
-.mx-3 {
- margin-left: 0.75rem !important;
- margin-right: 0.75rem !important;
-}
-
-.my-3 {
- margin-top: 0.75rem !important;
- margin-bottom: 0.75rem !important;
-}
-
-.mr-4 {
- margin-right: 1rem !important;
-}
-
-.mx-4 {
- margin-left: 1rem !important;
- margin-right: 1rem !important;
-}
-
-.my-4 {
- margin-top: 1rem !important;
- margin-bottom: 1rem !important;
-}
-
-.mr-5 {
- margin-right: 1.5rem !important;
-}
-
-.mx-5 {
- margin-left: 1.5rem !important;
- margin-right: 1.5rem !important;
-}
-
-.my-5 {
- margin-top: 1.5rem !important;
- margin-bottom: 1.5rem !important;
-}
-
-.mr-6 {
- margin-right: 3rem !important;
-}
-
-.mx-6 {
- margin-left: 3rem !important;
- margin-right: 3rem !important;
-}
-
-.my-6 {
- margin-top: 3rem !important;
- margin-bottom: 3rem !important;
-}
-
-.mb-0 {
- margin-bottom: 0 !important;
+.ml-0 {
+ margin-left: 0 !important;
}
.mx-0 {
margin-bottom: 0 !important;
}
-.mb-1 {
- margin-bottom: 0.25rem !important;
+.mt-1 {
+ margin-top: 0.25rem !important;
}
-.mx-1 {
- margin-left: 0.25rem !important;
+.mr-1 {
margin-right: 0.25rem !important;
}
-.my-1 {
- margin-top: 0.25rem !important;
+.mb-1 {
margin-bottom: 0.25rem !important;
}
-.mb-2 {
- margin-bottom: 0.5rem !important;
-}
-
-.mx-2 {
- margin-left: 0.5rem !important;
- margin-right: 0.5rem !important;
-}
-
-.my-2 {
- margin-top: 0.5rem !important;
- margin-bottom: 0.5rem !important;
-}
-
-.mb-3 {
- margin-bottom: 0.75rem !important;
-}
-
-.mx-3 {
- margin-left: 0.75rem !important;
- margin-right: 0.75rem !important;
-}
-
-.my-3 {
- margin-top: 0.75rem !important;
- margin-bottom: 0.75rem !important;
-}
-
-.mb-4 {
- margin-bottom: 1rem !important;
-}
-
-.mx-4 {
- margin-left: 1rem !important;
- margin-right: 1rem !important;
-}
-
-.my-4 {
- margin-top: 1rem !important;
- margin-bottom: 1rem !important;
-}
-
-.mb-5 {
- margin-bottom: 1.5rem !important;
-}
-
-.mx-5 {
- margin-left: 1.5rem !important;
- margin-right: 1.5rem !important;
-}
-
-.my-5 {
- margin-top: 1.5rem !important;
- margin-bottom: 1.5rem !important;
-}
-
-.mb-6 {
- margin-bottom: 3rem !important;
-}
-
-.mx-6 {
- margin-left: 3rem !important;
- margin-right: 3rem !important;
-}
-
-.my-6 {
- margin-top: 3rem !important;
- margin-bottom: 3rem !important;
-}
-
-.ml-0 {
- margin-left: 0 !important;
-}
-
-.mx-0 {
- margin-left: 0 !important;
- margin-right: 0 !important;
-}
-
-.my-0 {
- margin-top: 0 !important;
- margin-bottom: 0 !important;
-}
-
.ml-1 {
margin-left: 0.25rem !important;
}
margin-bottom: 0.25rem !important;
}
-.ml-2 {
- margin-left: 0.5rem !important;
-}
-
-.mx-2 {
- margin-left: 0.5rem !important;
- margin-right: 0.5rem !important;
-}
-
-.my-2 {
+.mt-2 {
margin-top: 0.5rem !important;
- margin-bottom: 0.5rem !important;
-}
-
-.ml-3 {
- margin-left: 0.75rem !important;
-}
-
-.mx-3 {
- margin-left: 0.75rem !important;
- margin-right: 0.75rem !important;
-}
-
-.my-3 {
- margin-top: 0.75rem !important;
- margin-bottom: 0.75rem !important;
-}
-
-.ml-4 {
- margin-left: 1rem !important;
-}
-
-.mx-4 {
- margin-left: 1rem !important;
- margin-right: 1rem !important;
-}
-
-.my-4 {
- margin-top: 1rem !important;
- margin-bottom: 1rem !important;
-}
-
-.ml-5 {
- margin-left: 1.5rem !important;
-}
-
-.mx-5 {
- margin-left: 1.5rem !important;
- margin-right: 1.5rem !important;
-}
-
-.my-5 {
- margin-top: 1.5rem !important;
- margin-bottom: 1.5rem !important;
-}
-
-.ml-6 {
- margin-left: 3rem !important;
-}
-
-.mx-6 {
- margin-left: 3rem !important;
- margin-right: 3rem !important;
-}
-
-.my-6 {
- margin-top: 3rem !important;
- margin-bottom: 3rem !important;
-}
-
-.pt-0 {
- padding-top: 0 !important;
-}
-
-.px-0 {
- padding-left: 0 !important;
- padding-right: 0 !important;
-}
-
-.py-0 {
- padding-top: 0 !important;
- padding-bottom: 0 !important;
-}
-
-.pt-1 {
- padding-top: 0.25rem !important;
-}
-
-.px-1 {
- padding-left: 0.25rem !important;
- padding-right: 0.25rem !important;
}
-.py-1 {
- padding-top: 0.25rem !important;
- padding-bottom: 0.25rem !important;
-}
-
-.pt-2 {
- padding-top: 0.5rem !important;
-}
-
-.px-2 {
- padding-left: 0.5rem !important;
- padding-right: 0.5rem !important;
-}
-
-.py-2 {
- padding-top: 0.5rem !important;
- padding-bottom: 0.5rem !important;
-}
-
-.pt-3 {
- padding-top: 0.75rem !important;
-}
-
-.px-3 {
- padding-left: 0.75rem !important;
- padding-right: 0.75rem !important;
-}
-
-.py-3 {
- padding-top: 0.75rem !important;
- padding-bottom: 0.75rem !important;
-}
-
-.pt-4 {
- padding-top: 1rem !important;
-}
-
-.px-4 {
- padding-left: 1rem !important;
- padding-right: 1rem !important;
-}
-
-.py-4 {
- padding-top: 1rem !important;
- padding-bottom: 1rem !important;
-}
-
-.pt-5 {
- padding-top: 1.5rem !important;
-}
-
-.px-5 {
- padding-left: 1.5rem !important;
- padding-right: 1.5rem !important;
-}
-
-.py-5 {
- padding-top: 1.5rem !important;
- padding-bottom: 1.5rem !important;
-}
-
-.pt-6 {
- padding-top: 3rem !important;
-}
-
-.px-6 {
- padding-left: 3rem !important;
- padding-right: 3rem !important;
-}
-
-.py-6 {
- padding-top: 3rem !important;
- padding-bottom: 3rem !important;
-}
-
-.pr-0 {
- padding-right: 0 !important;
-}
-
-.px-0 {
- padding-left: 0 !important;
- padding-right: 0 !important;
-}
-
-.py-0 {
- padding-top: 0 !important;
- padding-bottom: 0 !important;
-}
-
-.pr-1 {
- padding-right: 0.25rem !important;
-}
-
-.px-1 {
- padding-left: 0.25rem !important;
- padding-right: 0.25rem !important;
-}
-
-.py-1 {
- padding-top: 0.25rem !important;
- padding-bottom: 0.25rem !important;
-}
-
-.pr-2 {
- padding-right: 0.5rem !important;
-}
-
-.px-2 {
- padding-left: 0.5rem !important;
- padding-right: 0.5rem !important;
-}
-
-.py-2 {
- padding-top: 0.5rem !important;
- padding-bottom: 0.5rem !important;
-}
-
-.pr-3 {
- padding-right: 0.75rem !important;
-}
-
-.px-3 {
- padding-left: 0.75rem !important;
- padding-right: 0.75rem !important;
+.mr-2 {
+ margin-right: 0.5rem !important;
}
-.py-3 {
- padding-top: 0.75rem !important;
- padding-bottom: 0.75rem !important;
+.mb-2 {
+ margin-bottom: 0.5rem !important;
}
-.pr-4 {
- padding-right: 1rem !important;
+.ml-2 {
+ margin-left: 0.5rem !important;
}
-.px-4 {
- padding-left: 1rem !important;
- padding-right: 1rem !important;
+.mx-2 {
+ margin-left: 0.5rem !important;
+ margin-right: 0.5rem !important;
}
-.py-4 {
- padding-top: 1rem !important;
- padding-bottom: 1rem !important;
+.my-2 {
+ margin-top: 0.5rem !important;
+ margin-bottom: 0.5rem !important;
}
-.pr-5 {
- padding-right: 1.5rem !important;
+.mt-3 {
+ margin-top: 0.75rem !important;
}
-.px-5 {
- padding-left: 1.5rem !important;
- padding-right: 1.5rem !important;
+.mr-3 {
+ margin-right: 0.75rem !important;
}
-.py-5 {
- padding-top: 1.5rem !important;
- padding-bottom: 1.5rem !important;
+.mb-3 {
+ margin-bottom: 0.75rem !important;
}
-.pr-6 {
- padding-right: 3rem !important;
+.ml-3 {
+ margin-left: 0.75rem !important;
}
-.px-6 {
- padding-left: 3rem !important;
- padding-right: 3rem !important;
+.mx-3 {
+ margin-left: 0.75rem !important;
+ margin-right: 0.75rem !important;
}
-.py-6 {
- padding-top: 3rem !important;
- padding-bottom: 3rem !important;
+.my-3 {
+ margin-top: 0.75rem !important;
+ margin-bottom: 0.75rem !important;
}
-.pb-0 {
- padding-bottom: 0 !important;
+.mt-4 {
+ margin-top: 1rem !important;
}
-.px-0 {
- padding-left: 0 !important;
- padding-right: 0 !important;
+.mr-4 {
+ margin-right: 1rem !important;
}
-.py-0 {
- padding-top: 0 !important;
- padding-bottom: 0 !important;
+.mb-4 {
+ margin-bottom: 1rem !important;
}
-.pb-1 {
- padding-bottom: 0.25rem !important;
+.ml-4 {
+ margin-left: 1rem !important;
}
-.px-1 {
- padding-left: 0.25rem !important;
- padding-right: 0.25rem !important;
+.mx-4 {
+ margin-left: 1rem !important;
+ margin-right: 1rem !important;
}
-.py-1 {
- padding-top: 0.25rem !important;
- padding-bottom: 0.25rem !important;
+.my-4 {
+ margin-top: 1rem !important;
+ margin-bottom: 1rem !important;
}
-.pb-2 {
- padding-bottom: 0.5rem !important;
+.mt-5 {
+ margin-top: 1.5rem !important;
}
-.px-2 {
- padding-left: 0.5rem !important;
- padding-right: 0.5rem !important;
+.mr-5 {
+ margin-right: 1.5rem !important;
}
-.py-2 {
- padding-top: 0.5rem !important;
- padding-bottom: 0.5rem !important;
+.mb-5 {
+ margin-bottom: 1.5rem !important;
}
-.pb-3 {
- padding-bottom: 0.75rem !important;
+.ml-5 {
+ margin-left: 1.5rem !important;
}
-.px-3 {
- padding-left: 0.75rem !important;
- padding-right: 0.75rem !important;
+.mx-5 {
+ margin-left: 1.5rem !important;
+ margin-right: 1.5rem !important;
}
-.py-3 {
- padding-top: 0.75rem !important;
- padding-bottom: 0.75rem !important;
+.my-5 {
+ margin-top: 1.5rem !important;
+ margin-bottom: 1.5rem !important;
}
-.pb-4 {
- padding-bottom: 1rem !important;
+.mt-6 {
+ margin-top: 3rem !important;
}
-.px-4 {
- padding-left: 1rem !important;
- padding-right: 1rem !important;
+.mr-6 {
+ margin-right: 3rem !important;
}
-.py-4 {
- padding-top: 1rem !important;
- padding-bottom: 1rem !important;
+.mb-6 {
+ margin-bottom: 3rem !important;
}
-.pb-5 {
- padding-bottom: 1.5rem !important;
+.ml-6 {
+ margin-left: 3rem !important;
}
-.px-5 {
- padding-left: 1.5rem !important;
- padding-right: 1.5rem !important;
+.mx-6 {
+ margin-left: 3rem !important;
+ margin-right: 3rem !important;
}
-.py-5 {
- padding-top: 1.5rem !important;
- padding-bottom: 1.5rem !important;
+.my-6 {
+ margin-top: 3rem !important;
+ margin-bottom: 3rem !important;
}
-.pb-6 {
- padding-bottom: 3rem !important;
+.pt-0 {
+ padding-top: 0 !important;
}
-.px-6 {
- padding-left: 3rem !important;
- padding-right: 3rem !important;
+.pr-0 {
+ padding-right: 0 !important;
}
-.py-6 {
- padding-top: 3rem !important;
- padding-bottom: 3rem !important;
+.pb-0 {
+ padding-bottom: 0 !important;
}
.pl-0 {
padding-bottom: 0 !important;
}
+.pt-1 {
+ padding-top: 0.25rem !important;
+}
+
+.pr-1 {
+ padding-right: 0.25rem !important;
+}
+
+.pb-1 {
+ padding-bottom: 0.25rem !important;
+}
+
.pl-1 {
padding-left: 0.25rem !important;
}
padding-bottom: 0.25rem !important;
}
+.pt-2 {
+ padding-top: 0.5rem !important;
+}
+
+.pr-2 {
+ padding-right: 0.5rem !important;
+}
+
+.pb-2 {
+ padding-bottom: 0.5rem !important;
+}
+
.pl-2 {
padding-left: 0.5rem !important;
}
padding-bottom: 0.5rem !important;
}
+.pt-3 {
+ padding-top: 0.75rem !important;
+}
+
+.pr-3 {
+ padding-right: 0.75rem !important;
+}
+
+.pb-3 {
+ padding-bottom: 0.75rem !important;
+}
+
.pl-3 {
padding-left: 0.75rem !important;
}
padding-bottom: 0.75rem !important;
}
+.pt-4 {
+ padding-top: 1rem !important;
+}
+
+.pr-4 {
+ padding-right: 1rem !important;
+}
+
+.pb-4 {
+ padding-bottom: 1rem !important;
+}
+
.pl-4 {
padding-left: 1rem !important;
}
padding-bottom: 1rem !important;
}
+.pt-5 {
+ padding-top: 1.5rem !important;
+}
+
+.pr-5 {
+ padding-right: 1.5rem !important;
+}
+
+.pb-5 {
+ padding-bottom: 1.5rem !important;
+}
+
.pl-5 {
padding-left: 1.5rem !important;
}
padding-bottom: 1.5rem !important;
}
+.pt-6 {
+ padding-top: 3rem !important;
+}
+
+.pr-6 {
+ padding-right: 3rem !important;
+}
+
+.pb-6 {
+ padding-bottom: 3rem !important;
+}
+
.pl-6 {
padding-left: 3rem !important;
}
width: 1em;
}
+#spacingTable:hover {
+ color: #dbdbdb;
+}
+
+#spacingTable:hover code {
+ background: none;
+ color: #dbdbdb;
+}
+
+#spacingTable .bd-current-row {
+ background-color: whitesmoke;
+}
+
+#spacingTable .bd-current-row td:first-child,
+#spacingTable .bd-current-row .bd-current-column:not(:first-child) {
+ background-color: #feecf0;
+ color: #363636;
+}
+
+#spacingTable .bd-current-row td:first-child code,
+#spacingTable .bd-current-row .bd-current-column:not(:first-child) code {
+ background-color: #f14668;
+ color: #fff;
+}
+
+#spacingTable .bd-current-column {
+ background-color: whitesmoke;
+}
+
+#spacingTable .bd-current-value {
+ background-color: #feecf0;
+}
+
+#spacingTable .bd-current-value code {
+ background-color: #f14668;
+ color: #fff;
+}
+
::-moz-selection {
background-color: #00d1b2;
color: #fff;
--- /dev/null
+---
+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>
- 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
---
-{% include elements/anchor.html name="Text spacing" %}
+{% include elements/new-tag.html version="0.9.0" %}
+
+<div class="content">
+ <p>Bulma provides you <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 can <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>
+</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" %}
+
+<table id="spacingTable" class="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 page.values %}
+ <th><code>{{ value[1] }}</code></th>
+ {% endfor %}
+ </tr>
+ </tfoot>
+ <tbody>
+ {% for shortcut in page.shortcuts %}
+ {% for direction in page.directions %}
+ <tr>
+ <td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
+ <td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
+ {% for value in page.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] }}{{ page.horizontal }}</code></td>
+ {% for value in page.values %}
+ <td><code>{{ shortcut[1] }}{{ page.horizontal }}-{{ value[0] }}</code></td>
+ {% endfor %}
+ </tr>
+
+ <tr>
+ <td>
+ <code>{{ shortcut[0] }}-top</code> <small>and</small> <br>
+ <code>{{ shortcut[0] }}-bottom</code>
+ </td>
+ <td><code>{{ shortcut[1] }}{{ page.vertical }}</code></td>
+ {% for value in page.values %}
+ <td><code>{{ shortcut[1] }}{{ page.vertical }}-{{ value[0] }}</code></td>
+ {% endfor %}
+ </tr>
+ {% endfor %}
+ </tbody>
+</table>
{% endcapture %}
{% capture size1 %}
-<td class="is-narrow">
- <p class="notification is-primary"><code>{{ initial_vars['$size-1'].value }}</code></p>
+<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">
- <p class="notification">unchanged</p>
+<td class="is-narrow has-text-grey-light">
+ unchanged
</td>
{% endcapture %}
{% capture left %}
-<td class="is-narrow">
- <p class="notification is-primary">left-aligned</p>
+<td class="is-narrow has-background-primary-light has-text-primary">
+ left-aligned
</td>
{% endcapture %}
{% 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>
</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="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>
<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.
+ 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>
</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="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>
-
+<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" %}
{% endcapture %}
{% capture flex %}
-<td class="is-narrow has-background-primary-light">
- <p><strong class="has-text-primary">Flex</strong></p>
+<td class="is-narrow has-text-primary has-background-primary-light">
+ Flex
</td>
{% endcapture %}
{% capture visible %}
-<td class="is-narrow has-background-primary-light">
- <p><strong class="has-text-primary">Visible</strong></p>
+<td class="is-narrow has-text-success has-background-success-light">
+ Visible
</td>
{% endcapture %}
{% capture hidden %}
-<td class="is-narrow">
- <p class="has-text-grey-light">Hidden</p>
+<td class="is-narrow has-text-danger has-background-danger-light">
+ Hidden
</td>
{% endcapture %}
{% capture unchanged %}
-<td class="is-narrow">
- <p class="has-text-grey-light">Unchanged</p>
+<td class="is-narrow has-text-grey-light">
+ Unchanged
</td>
{% endcapture %}
</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>
- 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>
+
- 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 %}
// 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
}
}
+ // Spacing table
+
+ var spacingEl = document.getElementById('spacingTable');
+ var spacingRows = getAll('tbody tr', spacingEl);
+ var spacingCells = getAll('tbody td', spacingEl);
+ var spacingValues = getAll('tfoot th', spacingEl);
+
+ spacingEl.addEventListener('mouseleave', function () {
+ resetTable();
+ });
+
+ spacingCells.forEach(function (el) {
+ el.addEventListener('mouseenter', function () {
+ resetTable();
+ 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);
+ });
+ });
+
+ function resetTable() {
+ spacingRows.forEach(function (el) {
+ return el.classList.remove('bd-current-row');
+ });
+ spacingCells.forEach(function (el) {
+ return el.classList.remove('bd-current-column');
+ });
+ spacingValues.forEach(function (el) {
+ return el.classList.remove('bd-current-value');
+ });
+ }
+
+ function highlightRowAndColumn(rowIndex, columnIndex) {
+ var row = spacingRows[rowIndex];
+ row.classList.add('bd-current-row');
+
+ spacingRows.forEach(function (r) {
+ r.children[columnIndex].classList.add('bd-current-column');
+ });
+
+ if (columnIndex < 2) {
+ return;
+ }
+ spacingValues[columnIndex - 1].classList.add('bd-current-value');
+ }
+
// Scroll
function upOrDown(lastY, currentY) {
$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 $direction, $suffix in $spacing-directions
- @each $name, $value in $spacing-values
- // Cardinal directions
+ @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
+ // 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
projects / thirdparty / bulma.git / commitdiff
