mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Highlight rows and columns
This commit is contained in:
Jeremy Thomas
parent
8c65f02627
commit
ea1a8f57c5
@ -202,6 +202,13 @@
|
||||
"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",
|
||||
@ -616,7 +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-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"],
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<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 %}
|
||||
|
||||
@ -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,46 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
|
||||
@ -1,3 +1,26 @@
|
||||
#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
|
||||
|
||||
@ -9188,296 +9188,14 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
.mx-0 {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.my-0 {
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -9492,6 +9210,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem !important;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 0.25rem !important;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem !important;
|
||||
}
|
||||
@ -9506,6 +9236,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem !important;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 0.5rem !important;
|
||||
}
|
||||
@ -9520,6 +9262,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 0.75rem !important;
|
||||
}
|
||||
|
||||
.mr-3 {
|
||||
margin-right: 0.75rem !important;
|
||||
}
|
||||
|
||||
.mb-3 {
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
|
||||
.ml-3 {
|
||||
margin-left: 0.75rem !important;
|
||||
}
|
||||
@ -9534,6 +9288,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
|
||||
.mr-4 {
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.ml-4 {
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
@ -9548,6 +9314,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 1.5rem !important;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
margin-right: 1.5rem !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.ml-5 {
|
||||
margin-left: 1.5rem !important;
|
||||
}
|
||||
@ -9562,6 +9340,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 3rem !important;
|
||||
}
|
||||
|
||||
.mr-6 {
|
||||
margin-right: 3rem !important;
|
||||
}
|
||||
|
||||
.mb-6 {
|
||||
margin-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
margin-left: 3rem !important;
|
||||
}
|
||||
@ -9580,296 +9370,14 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
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;
|
||||
}
|
||||
|
||||
.py-3 {
|
||||
padding-top: 0.75rem !important;
|
||||
padding-bottom: 0.75rem !important;
|
||||
}
|
||||
|
||||
.pr-4 {
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: 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;
|
||||
}
|
||||
|
||||
.pr-6 {
|
||||
padding-right: 3rem !important;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 3rem !important;
|
||||
padding-right: 3rem !important;
|
||||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 3rem !important;
|
||||
padding-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.px-0 {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.py-0 {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.pb-1 {
|
||||
padding-bottom: 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;
|
||||
}
|
||||
|
||||
.pb-2 {
|
||||
padding-bottom: 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;
|
||||
}
|
||||
|
||||
.pb-3 {
|
||||
padding-bottom: 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;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem !important;
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
.py-4 {
|
||||
padding-top: 1rem !important;
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.pb-5 {
|
||||
padding-bottom: 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;
|
||||
}
|
||||
|
||||
.pb-6 {
|
||||
padding-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.px-6 {
|
||||
padding-left: 3rem !important;
|
||||
padding-right: 3rem !important;
|
||||
}
|
||||
|
||||
.py-6 {
|
||||
padding-top: 3rem !important;
|
||||
padding-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.pl-0 {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
@ -9884,6 +9392,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
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;
|
||||
}
|
||||
@ -9898,6 +9418,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
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;
|
||||
}
|
||||
@ -9912,6 +9444,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
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;
|
||||
}
|
||||
@ -9926,6 +9470,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
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;
|
||||
}
|
||||
@ -9940,6 +9496,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
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;
|
||||
}
|
||||
@ -9954,6 +9522,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
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;
|
||||
}
|
||||
@ -13644,6 +13224,44 @@ svg {
|
||||
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;
|
||||
|
||||
56
docs/documentation/helpers/other-helpers.html
Normal file
56
docs/documentation/helpers/other-helpers.html
Normal 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>
|
||||
@ -8,6 +8,134 @@ breadcrumb:
|
||||
- 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>
|
||||
|
||||
@ -37,20 +37,20 @@ breadcrumb:
|
||||
{% 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 %}
|
||||
|
||||
@ -77,7 +77,6 @@ breadcrumb:
|
||||
{% 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>
|
||||
@ -96,63 +95,61 @@ breadcrumb:
|
||||
</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>
|
||||
@ -203,7 +200,7 @@ breadcrumb:
|
||||
|
||||
<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>
|
||||
@ -211,87 +208,91 @@ breadcrumb:
|
||||
</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" %}
|
||||
|
||||
|
||||
@ -34,26 +34,26 @@ breadcrumb:
|
||||
{% 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 %}
|
||||
|
||||
@ -286,3 +286,22 @@ breadcrumb:
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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,52 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
|
||||
@ -11,18 +11,18 @@ $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 $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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user