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

Fix #3775, Fix #3829

Browse Source
This commit is contained in:
Jeremy Thomas 2024-07-06 15:42:36 +01:00
parent fc7db1b204
commit 2ed62be159
32 changed files with 7431 additions and 14068 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -7,8 +7,7 @@ test.css
test.css.map test.css.map
test.html test.html
test.sass test.sass
test.css test.scss
test.css.map
# Folders # Folders

6
CHANGELOG.md
View File

@ -2,6 +2,11 @@
## 1.0.2 ## 1.0.2
### Improvements
- Smart Grid `is-col-min` now goes up to `32` (Fixes #3829)
- Remove need for `is-variable` modifier for Column gaps
### Bug fixes ### Bug fixes
- Fix #3824: ability to override `$scheme-h`, `$scheme-s`, `$dark-l` and `$light-l` Sass variables - Fix #3824: ability to override `$scheme-h`, `$scheme-s`, `$dark-l` and `$light-l` Sass variables
@ -9,6 +14,7 @@
- Fix #3743: make sure 12 columns system take up whole width - Fix #3743: make sure 12 columns system take up whole width
- Fix #3799: restore variable columns - Fix #3799: restore variable columns
- Fix #3846: restore `--bulma-column-gap` CSS variable - Fix #3846: restore `--bulma-column-gap` CSS variable
- Fix #3775: `has-background` helpers should only affect element it's applied to
## 1.0.1 ## 1.0.1

4205
css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

4
css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

4185
css/versions/bulma-no-dark-mode.css
View File

File diff suppressed because it is too large Load Diff

2
css/versions/bulma-no-dark-mode.css.map
View File

File diff suppressed because one or more lines are too long

2
css/versions/bulma-no-dark-mode.min.css vendored
View File

File diff suppressed because one or more lines are too long

241
css/versions/bulma-no-helpers-prefixed.css
View File

@ -4723,6 +4723,7 @@ body.bulma-has-navbar-fixed-bottom {
.bulma-navbar-link { .bulma-navbar-link {
color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l)); color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
display: block; display: block;
gap: 0.75rem;
line-height: 1.5; line-height: 1.5;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
position: relative; position: relative;
@ -6850,435 +6851,435 @@ label.bulma-panel-block:hover {
display: flex; display: flex;
} }
} }
.bulma-columns.bulma-is-variable.bulma-is-0 { .bulma-columns.bulma-is-0 {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bulma-columns.bulma-is-variable.bulma-is-0-mobile { .bulma-columns.bulma-is-0-mobile {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.bulma-columns.bulma-is-variable.bulma-is-0-tablet { .bulma-columns.bulma-is-0-tablet {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-0-tablet-only { .bulma-columns.bulma-is-0-tablet-only {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-0-touch { .bulma-columns.bulma-is-0-touch {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bulma-columns.bulma-is-variable.bulma-is-0-desktop { .bulma-columns.bulma-is-0-desktop {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.bulma-columns.bulma-is-variable.bulma-is-0-desktop-only { .bulma-columns.bulma-is-0-desktop-only {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.bulma-columns.bulma-is-variable.bulma-is-0-widescreen { .bulma-columns.bulma-is-0-widescreen {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.bulma-columns.bulma-is-variable.bulma-is-0-widescreen-only { .bulma-columns.bulma-is-0-widescreen-only {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.bulma-columns.bulma-is-variable.bulma-is-0-fullhd { .bulma-columns.bulma-is-0-fullhd {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
.bulma-columns.bulma-is-variable.bulma-is-1 { .bulma-columns.bulma-is-1 {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bulma-columns.bulma-is-variable.bulma-is-1-mobile { .bulma-columns.bulma-is-1-mobile {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.bulma-columns.bulma-is-variable.bulma-is-1-tablet { .bulma-columns.bulma-is-1-tablet {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-1-tablet-only { .bulma-columns.bulma-is-1-tablet-only {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-1-touch { .bulma-columns.bulma-is-1-touch {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bulma-columns.bulma-is-variable.bulma-is-1-desktop { .bulma-columns.bulma-is-1-desktop {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.bulma-columns.bulma-is-variable.bulma-is-1-desktop-only { .bulma-columns.bulma-is-1-desktop-only {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.bulma-columns.bulma-is-variable.bulma-is-1-widescreen { .bulma-columns.bulma-is-1-widescreen {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.bulma-columns.bulma-is-variable.bulma-is-1-widescreen-only { .bulma-columns.bulma-is-1-widescreen-only {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.bulma-columns.bulma-is-variable.bulma-is-1-fullhd { .bulma-columns.bulma-is-1-fullhd {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
.bulma-columns.bulma-is-variable.bulma-is-2 { .bulma-columns.bulma-is-2 {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bulma-columns.bulma-is-variable.bulma-is-2-mobile { .bulma-columns.bulma-is-2-mobile {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.bulma-columns.bulma-is-variable.bulma-is-2-tablet { .bulma-columns.bulma-is-2-tablet {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-2-tablet-only { .bulma-columns.bulma-is-2-tablet-only {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-2-touch { .bulma-columns.bulma-is-2-touch {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bulma-columns.bulma-is-variable.bulma-is-2-desktop { .bulma-columns.bulma-is-2-desktop {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.bulma-columns.bulma-is-variable.bulma-is-2-desktop-only { .bulma-columns.bulma-is-2-desktop-only {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.bulma-columns.bulma-is-variable.bulma-is-2-widescreen { .bulma-columns.bulma-is-2-widescreen {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.bulma-columns.bulma-is-variable.bulma-is-2-widescreen-only { .bulma-columns.bulma-is-2-widescreen-only {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.bulma-columns.bulma-is-variable.bulma-is-2-fullhd { .bulma-columns.bulma-is-2-fullhd {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
.bulma-columns.bulma-is-variable.bulma-is-3 { .bulma-columns.bulma-is-3 {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bulma-columns.bulma-is-variable.bulma-is-3-mobile { .bulma-columns.bulma-is-3-mobile {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.bulma-columns.bulma-is-variable.bulma-is-3-tablet { .bulma-columns.bulma-is-3-tablet {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-3-tablet-only { .bulma-columns.bulma-is-3-tablet-only {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-3-touch { .bulma-columns.bulma-is-3-touch {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bulma-columns.bulma-is-variable.bulma-is-3-desktop { .bulma-columns.bulma-is-3-desktop {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.bulma-columns.bulma-is-variable.bulma-is-3-desktop-only { .bulma-columns.bulma-is-3-desktop-only {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.bulma-columns.bulma-is-variable.bulma-is-3-widescreen { .bulma-columns.bulma-is-3-widescreen {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.bulma-columns.bulma-is-variable.bulma-is-3-widescreen-only { .bulma-columns.bulma-is-3-widescreen-only {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.bulma-columns.bulma-is-variable.bulma-is-3-fullhd { .bulma-columns.bulma-is-3-fullhd {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
.bulma-columns.bulma-is-variable.bulma-is-4 { .bulma-columns.bulma-is-4 {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bulma-columns.bulma-is-variable.bulma-is-4-mobile { .bulma-columns.bulma-is-4-mobile {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.bulma-columns.bulma-is-variable.bulma-is-4-tablet { .bulma-columns.bulma-is-4-tablet {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-4-tablet-only { .bulma-columns.bulma-is-4-tablet-only {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-4-touch { .bulma-columns.bulma-is-4-touch {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bulma-columns.bulma-is-variable.bulma-is-4-desktop { .bulma-columns.bulma-is-4-desktop {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.bulma-columns.bulma-is-variable.bulma-is-4-desktop-only { .bulma-columns.bulma-is-4-desktop-only {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.bulma-columns.bulma-is-variable.bulma-is-4-widescreen { .bulma-columns.bulma-is-4-widescreen {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.bulma-columns.bulma-is-variable.bulma-is-4-widescreen-only { .bulma-columns.bulma-is-4-widescreen-only {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.bulma-columns.bulma-is-variable.bulma-is-4-fullhd { .bulma-columns.bulma-is-4-fullhd {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
.bulma-columns.bulma-is-variable.bulma-is-5 { .bulma-columns.bulma-is-5 {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bulma-columns.bulma-is-variable.bulma-is-5-mobile { .bulma-columns.bulma-is-5-mobile {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.bulma-columns.bulma-is-variable.bulma-is-5-tablet { .bulma-columns.bulma-is-5-tablet {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-5-tablet-only { .bulma-columns.bulma-is-5-tablet-only {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-5-touch { .bulma-columns.bulma-is-5-touch {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bulma-columns.bulma-is-variable.bulma-is-5-desktop { .bulma-columns.bulma-is-5-desktop {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.bulma-columns.bulma-is-variable.bulma-is-5-desktop-only { .bulma-columns.bulma-is-5-desktop-only {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.bulma-columns.bulma-is-variable.bulma-is-5-widescreen { .bulma-columns.bulma-is-5-widescreen {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.bulma-columns.bulma-is-variable.bulma-is-5-widescreen-only { .bulma-columns.bulma-is-5-widescreen-only {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.bulma-columns.bulma-is-variable.bulma-is-5-fullhd { .bulma-columns.bulma-is-5-fullhd {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
.bulma-columns.bulma-is-variable.bulma-is-6 { .bulma-columns.bulma-is-6 {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bulma-columns.bulma-is-variable.bulma-is-6-mobile { .bulma-columns.bulma-is-6-mobile {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.bulma-columns.bulma-is-variable.bulma-is-6-tablet { .bulma-columns.bulma-is-6-tablet {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-6-tablet-only { .bulma-columns.bulma-is-6-tablet-only {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-6-touch { .bulma-columns.bulma-is-6-touch {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bulma-columns.bulma-is-variable.bulma-is-6-desktop { .bulma-columns.bulma-is-6-desktop {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.bulma-columns.bulma-is-variable.bulma-is-6-desktop-only { .bulma-columns.bulma-is-6-desktop-only {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.bulma-columns.bulma-is-variable.bulma-is-6-widescreen { .bulma-columns.bulma-is-6-widescreen {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.bulma-columns.bulma-is-variable.bulma-is-6-widescreen-only { .bulma-columns.bulma-is-6-widescreen-only {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.bulma-columns.bulma-is-variable.bulma-is-6-fullhd { .bulma-columns.bulma-is-6-fullhd {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
.bulma-columns.bulma-is-variable.bulma-is-7 { .bulma-columns.bulma-is-7 {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bulma-columns.bulma-is-variable.bulma-is-7-mobile { .bulma-columns.bulma-is-7-mobile {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.bulma-columns.bulma-is-variable.bulma-is-7-tablet { .bulma-columns.bulma-is-7-tablet {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-7-tablet-only { .bulma-columns.bulma-is-7-tablet-only {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-7-touch { .bulma-columns.bulma-is-7-touch {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bulma-columns.bulma-is-variable.bulma-is-7-desktop { .bulma-columns.bulma-is-7-desktop {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.bulma-columns.bulma-is-variable.bulma-is-7-desktop-only { .bulma-columns.bulma-is-7-desktop-only {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.bulma-columns.bulma-is-variable.bulma-is-7-widescreen { .bulma-columns.bulma-is-7-widescreen {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.bulma-columns.bulma-is-variable.bulma-is-7-widescreen-only { .bulma-columns.bulma-is-7-widescreen-only {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.bulma-columns.bulma-is-variable.bulma-is-7-fullhd { .bulma-columns.bulma-is-7-fullhd {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
.bulma-columns.bulma-is-variable.bulma-is-8 { .bulma-columns.bulma-is-8 {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.bulma-columns.bulma-is-variable.bulma-is-8-mobile { .bulma-columns.bulma-is-8-mobile {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.bulma-columns.bulma-is-variable.bulma-is-8-tablet { .bulma-columns.bulma-is-8-tablet {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-8-tablet-only { .bulma-columns.bulma-is-8-tablet-only {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.bulma-columns.bulma-is-variable.bulma-is-8-touch { .bulma-columns.bulma-is-8-touch {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.bulma-columns.bulma-is-variable.bulma-is-8-desktop { .bulma-columns.bulma-is-8-desktop {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.bulma-columns.bulma-is-variable.bulma-is-8-desktop-only { .bulma-columns.bulma-is-8-desktop-only {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.bulma-columns.bulma-is-variable.bulma-is-8-widescreen { .bulma-columns.bulma-is-8-widescreen {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.bulma-columns.bulma-is-variable.bulma-is-8-widescreen-only { .bulma-columns.bulma-is-8-widescreen-only {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.bulma-columns.bulma-is-variable.bulma-is-8-fullhd { .bulma-columns.bulma-is-8-fullhd {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@ -7595,6 +7596,66 @@ label.bulma-panel-block:hover {
.bulma-grid.bulma-is-col-min-12 { .bulma-grid.bulma-is-col-min-12 {
--bulma-grid-column-min: 18rem; --bulma-grid-column-min: 18rem;
} }
.bulma-grid.bulma-is-col-min-13 {
--bulma-grid-column-min: 19.5rem;
}
.bulma-grid.bulma-is-col-min-14 {
--bulma-grid-column-min: 21rem;
}
.bulma-grid.bulma-is-col-min-15 {
--bulma-grid-column-min: 22.5rem;
}
.bulma-grid.bulma-is-col-min-16 {
--bulma-grid-column-min: 24rem;
}
.bulma-grid.bulma-is-col-min-17 {
--bulma-grid-column-min: 25.5rem;
}
.bulma-grid.bulma-is-col-min-18 {
--bulma-grid-column-min: 27rem;
}
.bulma-grid.bulma-is-col-min-19 {
--bulma-grid-column-min: 28.5rem;
}
.bulma-grid.bulma-is-col-min-20 {
--bulma-grid-column-min: 30rem;
}
.bulma-grid.bulma-is-col-min-21 {
--bulma-grid-column-min: 31.5rem;
}
.bulma-grid.bulma-is-col-min-22 {
--bulma-grid-column-min: 33rem;
}
.bulma-grid.bulma-is-col-min-23 {
--bulma-grid-column-min: 34.5rem;
}
.bulma-grid.bulma-is-col-min-24 {
--bulma-grid-column-min: 36rem;
}
.bulma-grid.bulma-is-col-min-25 {
--bulma-grid-column-min: 37.5rem;
}
.bulma-grid.bulma-is-col-min-26 {
--bulma-grid-column-min: 39rem;
}
.bulma-grid.bulma-is-col-min-27 {
--bulma-grid-column-min: 40.5rem;
}
.bulma-grid.bulma-is-col-min-28 {
--bulma-grid-column-min: 42rem;
}
.bulma-grid.bulma-is-col-min-29 {
--bulma-grid-column-min: 43.5rem;
}
.bulma-grid.bulma-is-col-min-30 {
--bulma-grid-column-min: 45rem;
}
.bulma-grid.bulma-is-col-min-31 {
--bulma-grid-column-min: 46.5rem;
}
.bulma-grid.bulma-is-col-min-32 {
--bulma-grid-column-min: 48rem;
}
.bulma-cell { .bulma-cell {
grid-column-end: span var(--bulma-grid-cell-column-span); grid-column-end: span var(--bulma-grid-cell-column-span);

2
css/versions/bulma-no-helpers-prefixed.css.map
View File

File diff suppressed because one or more lines are too long

2
css/versions/bulma-no-helpers-prefixed.min.css vendored
View File

File diff suppressed because one or more lines are too long

241
css/versions/bulma-no-helpers.css
View File

@ -4723,6 +4723,7 @@ body.has-navbar-fixed-bottom {
.navbar-link { .navbar-link {
color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l)); color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
display: block; display: block;
gap: 0.75rem;
line-height: 1.5; line-height: 1.5;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
position: relative; position: relative;
@ -6850,435 +6851,435 @@ label.panel-block:hover {
display: flex; display: flex;
} }
} }
.columns.is-variable.is-0 { .columns.is-0 {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.columns.is-variable.is-0-mobile { .columns.is-0-mobile {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.columns.is-variable.is-0-tablet { .columns.is-0-tablet {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.columns.is-variable.is-0-tablet-only { .columns.is-0-tablet-only {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.columns.is-variable.is-0-touch { .columns.is-0-touch {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.columns.is-variable.is-0-desktop { .columns.is-0-desktop {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.columns.is-variable.is-0-desktop-only { .columns.is-0-desktop-only {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.columns.is-variable.is-0-widescreen { .columns.is-0-widescreen {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.columns.is-variable.is-0-widescreen-only { .columns.is-0-widescreen-only {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.columns.is-variable.is-0-fullhd { .columns.is-0-fullhd {
--bulma-column-gap: 0rem; --bulma-column-gap: 0rem;
} }
} }
.columns.is-variable.is-1 { .columns.is-1 {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.columns.is-variable.is-1-mobile { .columns.is-1-mobile {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.columns.is-variable.is-1-tablet { .columns.is-1-tablet {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.columns.is-variable.is-1-tablet-only { .columns.is-1-tablet-only {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.columns.is-variable.is-1-touch { .columns.is-1-touch {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.columns.is-variable.is-1-desktop { .columns.is-1-desktop {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.columns.is-variable.is-1-desktop-only { .columns.is-1-desktop-only {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.columns.is-variable.is-1-widescreen { .columns.is-1-widescreen {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.columns.is-variable.is-1-widescreen-only { .columns.is-1-widescreen-only {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.columns.is-variable.is-1-fullhd { .columns.is-1-fullhd {
--bulma-column-gap: 0.25rem; --bulma-column-gap: 0.25rem;
} }
} }
.columns.is-variable.is-2 { .columns.is-2 {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.columns.is-variable.is-2-mobile { .columns.is-2-mobile {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.columns.is-variable.is-2-tablet { .columns.is-2-tablet {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.columns.is-variable.is-2-tablet-only { .columns.is-2-tablet-only {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.columns.is-variable.is-2-touch { .columns.is-2-touch {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.columns.is-variable.is-2-desktop { .columns.is-2-desktop {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.columns.is-variable.is-2-desktop-only { .columns.is-2-desktop-only {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.columns.is-variable.is-2-widescreen { .columns.is-2-widescreen {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.columns.is-variable.is-2-widescreen-only { .columns.is-2-widescreen-only {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.columns.is-variable.is-2-fullhd { .columns.is-2-fullhd {
--bulma-column-gap: 0.5rem; --bulma-column-gap: 0.5rem;
} }
} }
.columns.is-variable.is-3 { .columns.is-3 {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.columns.is-variable.is-3-mobile { .columns.is-3-mobile {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.columns.is-variable.is-3-tablet { .columns.is-3-tablet {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.columns.is-variable.is-3-tablet-only { .columns.is-3-tablet-only {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.columns.is-variable.is-3-touch { .columns.is-3-touch {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.columns.is-variable.is-3-desktop { .columns.is-3-desktop {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.columns.is-variable.is-3-desktop-only { .columns.is-3-desktop-only {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.columns.is-variable.is-3-widescreen { .columns.is-3-widescreen {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.columns.is-variable.is-3-widescreen-only { .columns.is-3-widescreen-only {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.columns.is-variable.is-3-fullhd { .columns.is-3-fullhd {
--bulma-column-gap: 0.75rem; --bulma-column-gap: 0.75rem;
} }
} }
.columns.is-variable.is-4 { .columns.is-4 {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.columns.is-variable.is-4-mobile { .columns.is-4-mobile {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.columns.is-variable.is-4-tablet { .columns.is-4-tablet {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.columns.is-variable.is-4-tablet-only { .columns.is-4-tablet-only {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.columns.is-variable.is-4-touch { .columns.is-4-touch {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.columns.is-variable.is-4-desktop { .columns.is-4-desktop {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.columns.is-variable.is-4-desktop-only { .columns.is-4-desktop-only {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.columns.is-variable.is-4-widescreen { .columns.is-4-widescreen {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.columns.is-variable.is-4-widescreen-only { .columns.is-4-widescreen-only {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.columns.is-variable.is-4-fullhd { .columns.is-4-fullhd {
--bulma-column-gap: 1rem; --bulma-column-gap: 1rem;
} }
} }
.columns.is-variable.is-5 { .columns.is-5 {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.columns.is-variable.is-5-mobile { .columns.is-5-mobile {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.columns.is-variable.is-5-tablet { .columns.is-5-tablet {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.columns.is-variable.is-5-tablet-only { .columns.is-5-tablet-only {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.columns.is-variable.is-5-touch { .columns.is-5-touch {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.columns.is-variable.is-5-desktop { .columns.is-5-desktop {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.columns.is-variable.is-5-desktop-only { .columns.is-5-desktop-only {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.columns.is-variable.is-5-widescreen { .columns.is-5-widescreen {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.columns.is-variable.is-5-widescreen-only { .columns.is-5-widescreen-only {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.columns.is-variable.is-5-fullhd { .columns.is-5-fullhd {
--bulma-column-gap: 1.25rem; --bulma-column-gap: 1.25rem;
} }
} }
.columns.is-variable.is-6 { .columns.is-6 {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.columns.is-variable.is-6-mobile { .columns.is-6-mobile {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.columns.is-variable.is-6-tablet { .columns.is-6-tablet {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.columns.is-variable.is-6-tablet-only { .columns.is-6-tablet-only {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.columns.is-variable.is-6-touch { .columns.is-6-touch {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.columns.is-variable.is-6-desktop { .columns.is-6-desktop {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.columns.is-variable.is-6-desktop-only { .columns.is-6-desktop-only {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.columns.is-variable.is-6-widescreen { .columns.is-6-widescreen {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.columns.is-variable.is-6-widescreen-only { .columns.is-6-widescreen-only {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.columns.is-variable.is-6-fullhd { .columns.is-6-fullhd {
--bulma-column-gap: 1.5rem; --bulma-column-gap: 1.5rem;
} }
} }
.columns.is-variable.is-7 { .columns.is-7 {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.columns.is-variable.is-7-mobile { .columns.is-7-mobile {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.columns.is-variable.is-7-tablet { .columns.is-7-tablet {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.columns.is-variable.is-7-tablet-only { .columns.is-7-tablet-only {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.columns.is-variable.is-7-touch { .columns.is-7-touch {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.columns.is-variable.is-7-desktop { .columns.is-7-desktop {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.columns.is-variable.is-7-desktop-only { .columns.is-7-desktop-only {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.columns.is-variable.is-7-widescreen { .columns.is-7-widescreen {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.columns.is-variable.is-7-widescreen-only { .columns.is-7-widescreen-only {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.columns.is-variable.is-7-fullhd { .columns.is-7-fullhd {
--bulma-column-gap: 1.75rem; --bulma-column-gap: 1.75rem;
} }
} }
.columns.is-variable.is-8 { .columns.is-8 {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.columns.is-variable.is-8-mobile { .columns.is-8-mobile {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 769px), print {
.columns.is-variable.is-8-tablet { .columns.is-8-tablet {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1023px) { @media screen and (min-width: 769px) and (max-width: 1023px) {
.columns.is-variable.is-8-tablet-only { .columns.is-8-tablet-only {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.columns.is-variable.is-8-touch { .columns.is-8-touch {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
.columns.is-variable.is-8-desktop { .columns.is-8-desktop {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1024px) and (max-width: 1215px) { @media screen and (min-width: 1024px) and (max-width: 1215px) {
.columns.is-variable.is-8-desktop-only { .columns.is-8-desktop-only {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1216px) { @media screen and (min-width: 1216px) {
.columns.is-variable.is-8-widescreen { .columns.is-8-widescreen {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1216px) and (max-width: 1407px) { @media screen and (min-width: 1216px) and (max-width: 1407px) {
.columns.is-variable.is-8-widescreen-only { .columns.is-8-widescreen-only {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@media screen and (min-width: 1408px) { @media screen and (min-width: 1408px) {
.columns.is-variable.is-8-fullhd { .columns.is-8-fullhd {
--bulma-column-gap: 2rem; --bulma-column-gap: 2rem;
} }
} }
@ -7595,6 +7596,66 @@ label.panel-block:hover {
.grid.is-col-min-12 { .grid.is-col-min-12 {
--bulma-grid-column-min: 18rem; --bulma-grid-column-min: 18rem;
} }
.grid.is-col-min-13 {
--bulma-grid-column-min: 19.5rem;
}
.grid.is-col-min-14 {
--bulma-grid-column-min: 21rem;
}
.grid.is-col-min-15 {
--bulma-grid-column-min: 22.5rem;
}
.grid.is-col-min-16 {
--bulma-grid-column-min: 24rem;
}
.grid.is-col-min-17 {
--bulma-grid-column-min: 25.5rem;
}
.grid.is-col-min-18 {
--bulma-grid-column-min: 27rem;
}
.grid.is-col-min-19 {
--bulma-grid-column-min: 28.5rem;
}
.grid.is-col-min-20 {
--bulma-grid-column-min: 30rem;
}
.grid.is-col-min-21 {
--bulma-grid-column-min: 31.5rem;
}
.grid.is-col-min-22 {
--bulma-grid-column-min: 33rem;
}
.grid.is-col-min-23 {
--bulma-grid-column-min: 34.5rem;
}
.grid.is-col-min-24 {
--bulma-grid-column-min: 36rem;
}
.grid.is-col-min-25 {
--bulma-grid-column-min: 37.5rem;
}
.grid.is-col-min-26 {
--bulma-grid-column-min: 39rem;
}
.grid.is-col-min-27 {
--bulma-grid-column-min: 40.5rem;
}
.grid.is-col-min-28 {
--bulma-grid-column-min: 42rem;
}
.grid.is-col-min-29 {
--bulma-grid-column-min: 43.5rem;
}
.grid.is-col-min-30 {
--bulma-grid-column-min: 45rem;
}
.grid.is-col-min-31 {
--bulma-grid-column-min: 46.5rem;
}
.grid.is-col-min-32 {
--bulma-grid-column-min: 48rem;
}
.cell { .cell {
grid-column-end: span var(--bulma-grid-cell-column-span); grid-column-end: span var(--bulma-grid-cell-column-span);

2
css/versions/bulma-no-helpers.css.map
View File

File diff suppressed because one or more lines are too long

2
css/versions/bulma-no-helpers.min.css vendored
View File

File diff suppressed because one or more lines are too long

4205
css/versions/bulma-prefixed.min.css vendored
View File

File diff suppressed because it is too large Load Diff

2
css/versions/bulma-prefixed.min.css.map
View File

File diff suppressed because one or more lines are too long

4
css/versions/bulma-prefixed.min.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/_sass/docs/docs.scss
View File

@ -38,7 +38,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--p); gap: var(--p);
overflow: hidden;
} }
.bd-docs-button { .bd-docs-button {

7790
docs/assets/css/website.css
View File

File diff suppressed because it is too large Load Diff

4
docs/assets/css/website.min.css vendored
View File

File diff suppressed because one or more lines are too long

44
docs/documentation/columns/gap.html
View File

@ -35,6 +35,14 @@ breadcrumb:
<div class="column">No gap</div> <div class="column">No gap</div>
</div> </div>
{% endcapture %} {% endcapture %}
{% capture columns_variable_gap %}
<div class="columns is-8">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
{% endcapture %}
{% capture columns_gapless_multiline %} {% capture columns_gapless_multiline %}
<div class="columns is-gapless is-multiline is-mobile"> <div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-quarter">is-one-quarter</div> <div class="column is-one-quarter">is-one-quarter</div>
@ -49,9 +57,7 @@ breadcrumb:
</div> </div>
{% endcapture %} {% endcapture %}
{% capture columns_variable_responsive_gaps %} {% capture columns_variable_responsive_gaps %}
<div <div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
>
<div class="column">Column</div> <div class="column">Column</div>
<div class="column">Column</div> <div class="column">Column</div>
<div class="column">Column</div> <div class="column">Column</div>
@ -155,28 +161,20 @@ breadcrumb:
<li><code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value</li> <li><code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value</li>
<li><code>is-8</code> is the maximum gap of <code>2rem</code></li> <li><code>is-8</code> is the maximum gap of <code>2rem</code></li>
</ul> </ul>
<p>Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.</p> </div>
<div class="bd-highlight-full">
{% highlight html -%}
{{- columns_variable_gap -}}
{%- endhighlight %}
</div> </div>
{% include docs/content/klmn.html %} {% include docs/content/klmn.html %}
<div class="message is-warning">
<div class="message-body">
<p>
This feature is only available in browsers that support
<a
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables"
>CSS Variables</a
>.
</p>
</div>
</div>
{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %} {% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
{% if vernum >= 72 %} {% if vernum >= 72 %}
{% {%
include docs/elements/anchor.html name="Breakpoint include docs/elements/anchor.html name="Breakpoint based column gaps"
based column gaps"
%} %}
<div class="content"> <div class="content">
@ -184,19 +182,17 @@ breadcrumb:
<p> <p>
For example, here's how it looks with the following modifiers: For example, here's how it looks with the following modifiers:
<code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code> <code>is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
</p> </p>
</div> </div>
<div class="bd-highlight-full"> <div class="bd-highlight-full">
{% highlight html -%} {%- highlight html -%}
{{- columns_variable_responsive_gaps -}} {{- columns_variable_responsive_gaps -}}
{%- endhighlight %} {%- endhighlight -%}
</div> </div>
<div <div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
>
<div class="column"> <div class="column">
<p class="bd-notification is-primary">Column</p> <p class="bd-notification is-primary">Column</p>
</div> </div>

8
docs/documentation/grid/grid-cells.html
View File

@ -90,7 +90,7 @@ Each Bulma grid is comprised of several **cells**. You can adjust the width and
{% endcapture %} {% endcapture %}
{% capture markdown %} {% capture markdown %}
Change which column a cell ends at, counting from the end. Change which column a cell starts at.
{% endcapture %} {% endcapture %}
{% include markdown.html content=markdown %} {% include markdown.html content=markdown %}
@ -130,7 +130,7 @@ Change which column a cell ends at, counting from the end.
{% endcapture %} {% endcapture %}
{% capture markdown %} {% capture markdown %}
Change which column a cell starts at. Change which column a cell ends at, counting from the end.
{% endcapture %} {% endcapture %}
{% include markdown.html content=markdown %} {% include markdown.html content=markdown %}
@ -212,7 +212,7 @@ Change how many columns a cell spans.
{% endcapture %} {% endcapture %}
{% capture markdown %} {% capture markdown %}
Change which row a cell ends at, counting from the end. Change which row a cell starts at.
{% endcapture %} {% endcapture %}
{% include markdown.html content=markdown %} {% include markdown.html content=markdown %}
@ -252,7 +252,7 @@ Change which row a cell ends at, counting from the end.
{% endcapture %} {% endcapture %}
{% capture markdown %} {% capture markdown %}
Change which row a cell starts at. Change which row a cell ends at, counting from the end.
{% endcapture %} {% endcapture %}
{% include markdown.html content=markdown %} {% include markdown.html content=markdown %}

4
docs/documentation/grid/playground.html
View File

@ -22,7 +22,7 @@ breadcrumb:
</span> </span>
<button class="js-modifier-property dn" data-property="is-col-min"></button> <button class="js-modifier-property dn" data-property="is-col-min"></button>
<button class="button js-modifier-value is-link">Default</button> <button class="button js-modifier-value is-link">Default</button>
{% for i in (1..12) %} {% for i in (1..32) %}
<button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button> <button class="button js-modifier-value" data-value="{{ i }}">{{ i }}</button>
{% endfor %} {% endfor %}
</div> </div>
@ -110,4 +110,4 @@ breadcrumb:
{{ fixed_grid_playground }} {{ fixed_grid_playground }}
<div style="padding-top: 50vh;"><em>Space intentionally left blank to prevent layout jumps</em></div> <div style="padding-top: 50vh;"><em>Space intentionally left blank to prevent layout jumps</em></div>

10
docs/documentation/grid/smart-grid.html
View File

@ -43,7 +43,7 @@ By default, the Smart Grid has:
{% include docs/elements/anchor.html name="Smart Grid modifiers" %} {% include docs/elements/anchor.html name="Smart Grid modifiers" %}
{% capture markdown %} {% capture markdown %}
You can change the minimum column width by increments of `1.5rem`, by adding the `is-col-min` modifier class with a value ranging from `0` to `12`: You can change the minimum column width by increments of `1.5rem`, by adding the `is-col-min` modifier class with a value ranging from `0` to `32`:
{% endcapture %} {% endcapture %}
{% include markdown.html content=markdown %} {% include markdown.html content=markdown %}
@ -56,7 +56,7 @@ You can change the minimum column width by increments of `1.5rem`, by adding the
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for i in (1..12) %} {% for i in (1..32) %}
<tr> <tr>
<td><code>is-col-min-{{ i }}</code></td> <td><code>is-col-min-{{ i }}</code></td>
<td><code>{{ i | times: 1.5 }}rem</code></td> <td><code>{{ i | times: 1.5 }}rem</code></td>
@ -83,9 +83,9 @@ You can also change the `gap`, `column-gap` and/or `row-gap` by increments of `0
<tbody> <tbody>
{% for i in (0..8) %} {% for i in (0..8) %}
<tr> <tr>
<td><code>gap-{{ i }}</code></td> <td><code>is-gap-{{ i }}</code></td>
<td><code>column-gap-{{ i }}</code></td> <td><code>is-column-gap-{{ i }}</code></td>
<td><code>row-gap-{{ i }}</code></td> <td><code>is-row-gap-{{ i }}</code></td>
<td><code>{{ i | times: 0.5 }}rem</code></td> <td><code>{{ i | times: 0.5 }}rem</code></td>
</tr> </tr>
{% endfor %} {% endfor %}

23
docs/documentation/helpers/color-helpers.html
View File

@ -231,49 +231,59 @@ breadcrumb:
<thead> <thead>
<tr> <tr>
<th>Class</th> <th>Class</th>
<th>Background color</th> <th colspan="2">Background color</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>has-background-white</code></td> <td><code>has-background-white</code></td>
<td>{% include docs/color/white.html %}</td> <td>{% include docs/color/white.html %}</td>
<td class="has-background-white" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-black</code></td> <td><code>has-background-black</code></td>
<td>{% include docs/color/black.html %}</td> <td>{% include docs/color/black.html %}</td>
<td class="has-background-black" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-light</code></td> <td><code>has-background-light</code></td>
<td>{% include docs/color/white-ter.html %}</td> <td>{% include docs/color/white-ter.html %}</td>
<td class="has-background-light" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-dark</code></td> <td><code>has-background-dark</code></td>
<td>{% include docs/color/grey-darker.html %}</td> <td>{% include docs/color/grey-darker.html %}</td>
<td class="has-background-dark" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-primary</code></td> <td><code>has-background-primary</code></td>
<td>{% include docs/color/turquoise.html %}</td> <td>{% include docs/color/turquoise.html %}</td>
<td class="has-background-primary" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-link</code></td> <td><code>has-background-link</code></td>
<td>{% include docs/color/blue.html %}</td> <td>{% include docs/color/blue.html %}</td>
<td class="has-background-link" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-info</code></td> <td><code>has-background-info</code></td>
<td>{% include docs/color/cyan.html %}</td> <td>{% include docs/color/cyan.html %}</td>
<td class="has-background-info" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-success</code></td> <td><code>has-background-success</code></td>
<td>{% include docs/color/green.html %}</td> <td>{% include docs/color/green.html %}</td>
<td class="has-background-success" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-warning</code></td> <td><code>has-background-warning</code></td>
<td>{% include docs/color/yellow.html %}</td> <td>{% include docs/color/yellow.html %}</td>
<td class="has-background-warning" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-danger</code></td> <td><code>has-background-danger</code></td>
<td>{% include docs/color/red.html %}</td> <td>{% include docs/color/red.html %}</td>
<td class="has-background-danger" style="width: 3rem;"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -282,45 +292,54 @@ breadcrumb:
<thead> <thead>
<tr> <tr>
<th>Class</th> <th>Class</th>
<th>Background shade</th> <th colspan="2">Background shade</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td><code>has-background-black-bis</code></td> <td><code>has-background-black-bis</code></td>
<td>{% include docs/color/black-bis.html %}</td> <td>{% include docs/color/black-bis.html %}</td>
<td class="has-background-black-bis" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-black-ter</code></td> <td><code>has-background-black-ter</code></td>
<td>{% include docs/color/black-ter.html %}</td> <td>{% include docs/color/black-ter.html %}</td>
<td class="has-background-black-ter" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-grey-darker</code></td> <td><code>has-background-grey-darker</code></td>
<td>{% include docs/color/grey-darker.html %}</td> <td>{% include docs/color/grey-darker.html %}</td>
<td class="has-background-grey-darker" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-grey-dark</code></td> <td><code>has-background-grey-dark</code></td>
<td>{% include docs/color/grey-dark.html %}</td> <td>{% include docs/color/grey-dark.html %}</td>
<td class="has-background-grey-dark" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-grey</code></td> <td><code>has-background-grey</code></td>
<td>{% include docs/color/grey.html %}</td> <td>{% include docs/color/grey.html %}</td>
<td class="has-background-grey" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-grey-light</code></td> <td><code>has-background-grey-light</code></td>
<td>{% include docs/color/grey-light.html %}</td> <td>{% include docs/color/grey-light.html %}</td>
<td class="has-background-grey-light" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-grey-lighter</code></td> <td><code>has-background-grey-lighter</code></td>
<td>{% include docs/color/grey-lighter.html %}</td> <td>{% include docs/color/grey-lighter.html %}</td>
<td class="has-background-grey-lighter" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-white-ter</code></td> <td><code>has-background-white-ter</code></td>
<td>{% include docs/color/white-ter.html %}</td> <td>{% include docs/color/white-ter.html %}</td>
<td class="has-background-white-ter" style="width: 3rem;"></td>
</tr> </tr>
<tr> <tr>
<td><code>has-background-white-bis</code></td> <td><code>has-background-white-bis</code></td>
<td>{% include docs/color/white-bis.html %}</td> <td>{% include docs/color/white-bis.html %}</td>
<td class="has-background-white-bis" style="width: 3rem;"></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

8
docs/documentation/helpers/palette-helpers.html
View File

@ -36,10 +36,8 @@ breadcrumb:
<tr> <tr>
<th>Class</th> <th>Class</th>
<th>Code</th> <th>Code</th>
<th>Example</th> <th colspan="2">Example</th>
<th>Swatch</th> <th colspan="2">Invert</th>
<th>Invert</th>
<th>Swatch</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -86,4 +84,4 @@ Hello Bulma
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>

1
package.json
View File

@ -48,6 +48,7 @@
"minify-all": "npm run minify-bulma && npm run minify-versions", "minify-all": "npm run minify-bulma && npm run minify-versions",
"clean": "rimraf css", "clean": "rimraf css",
"deploy": "npm run clean && npm run build-all && npm run minify-all", "deploy": "npm run clean && npm run build-all && npm run minify-all",
"test": "sass --style=expanded --source-map --watch test.scss css/test.css",
"start": "npm run build-bulma -- --watch" "start": "npm run build-bulma -- --watch"
}, },
"files": [ "files": [

1
sass/components/navbar.scss
View File

@ -271,6 +271,7 @@ body {
#{cv.getVar("navbar-item-color-l")} #{cv.getVar("navbar-item-color-l")}
); );
display: block; display: block;
gap: 0.75rem;
line-height: 1.5; line-height: 1.5;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
position: relative; position: relative;

152
sass/grid/columns.scss
View File

@ -859,104 +859,102 @@ $column-gap: 0.75rem !default;
} }
} }
&.#{iv.$class-prefix}is-variable { @for $i from 0 through 8 {
@for $i from 0 through 8 { &.#{iv.$class-prefix}is-#{$i} {
&.#{iv.$class-prefix}is-#{$i} { @include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
@include mx.mobile {
&.#{iv.$class-prefix}is-#{$i}-mobile {
@include cv.register-vars( @include cv.register-vars(
( (
"column-gap": #{$i * 0.25rem}, "column-gap": #{$i * 0.25rem},
) )
); );
} }
}
@include mx.mobile { @include mx.tablet {
&.#{iv.$class-prefix}is-#{$i}-mobile { &.#{iv.$class-prefix}is-#{$i}-tablet {
@include cv.register-vars( @include cv.register-vars(
( (
"column-gap": #{$i * 0.25rem}, "column-gap": #{$i * 0.25rem},
) )
); );
}
} }
}
@include mx.tablet { @include mx.tablet-only {
&.#{iv.$class-prefix}is-#{$i}-tablet { &.#{iv.$class-prefix}is-#{$i}-tablet-only {
@include cv.register-vars( @include cv.register-vars(
( (
"column-gap": #{$i * 0.25rem}, "column-gap": #{$i * 0.25rem},
) )
); );
}
} }
}
@include mx.tablet-only { @include mx.touch {
&.#{iv.$class-prefix}is-#{$i}-tablet-only { &.#{iv.$class-prefix}is-#{$i}-touch {
@include cv.register-vars( @include cv.register-vars(
( (
"column-gap": #{$i * 0.25rem}, "column-gap": #{$i * 0.25rem},
) )
); );
}
} }
}
@include mx.touch { @include mx.desktop {
&.#{iv.$class-prefix}is-#{$i}-touch { &.#{iv.$class-prefix}is-#{$i}-desktop {
@include cv.register-vars( @include cv.register-vars(
( (
"column-gap": #{$i * 0.25rem}, "column-gap": #{$i * 0.25rem},
) )
); );
}
} }
}
@include mx.desktop { @include mx.desktop-only {
&.#{iv.$class-prefix}is-#{$i}-desktop { &.#{iv.$class-prefix}is-#{$i}-desktop-only {
@include cv.register-vars( @include cv.register-vars(
( (
"column-gap": #{$i * 0.25rem}, "column-gap": #{$i * 0.25rem},
) )
); );
}
} }
}
@include mx.desktop-only { @include mx.widescreen {
&.#{iv.$class-prefix}is-#{$i}-desktop-only { &.#{iv.$class-prefix}is-#{$i}-widescreen {
@include cv.register-vars( @include cv.register-vars(
( (
"column-gap": #{$i * 0.25rem}, "column-gap": #{$i * 0.25rem},
) )
); );
}
} }
}
@include mx.widescreen { @include mx.widescreen-only {
&.#{iv.$class-prefix}is-#{$i}-widescreen { &.#{iv.$class-prefix}is-#{$i}-widescreen-only {
@include cv.register-vars( @include cv.register-vars(
( (
"column-gap": #{$i * 0.25rem}, "column-gap": #{$i * 0.25rem},
) )
); );
}
} }
}
@include mx.widescreen-only { @include mx.fullhd {
&.#{iv.$class-prefix}is-#{$i}-widescreen-only { &.#{iv.$class-prefix}is-#{$i}-fullhd {
@include cv.register-vars( @include cv.register-vars(
( (
"column-gap": #{$i * 0.25rem}, "column-gap": #{$i * 0.25rem},
) )
); );
}
}
@include mx.fullhd {
&.#{iv.$class-prefix}is-#{$i}-fullhd {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
} }
} }
} }

2
sass/grid/grid.scss
View File

@ -110,7 +110,7 @@ $grid-container-name: bulma-fixed-grid;
); );
} }
@for $i from 1 through 12 { @for $i from 1 through 32 {
&.#{iv.$class-prefix}is-col-min-#{$i} { &.#{iv.$class-prefix}is-col-min-#{$i} {
@include cv.register-vars( @include cv.register-vars(
( (

336
sass/helpers/color.scss
View File

@ -34,306 +34,272 @@ $digits: (
$background: hsl( $background: hsl(
#{cv.getVar($name, "", "-h")}, #{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")}, #{cv.getVar($name, "", "-s")},
calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")}) #{cv.getVar($name, "", "-l")}
); );
$color: hsl( $color: hsl(
#{cv.getVar($name, "", "-h")}, #{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")}, #{cv.getVar($name, "", "-s")},
calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")}) #{cv.getVar($name, "", "-l")}
); );
[class*="#{iv.$helpers-prefix}color-#{$name}"], .#{iv.$helpers-has-prefix}text-#{$name} {
[class*="#{iv.$helpers-has-prefix}text-#{$name}"] {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-l")},
"color-l-delta": 0%,
)
);
color: $color !important; color: $color !important;
} }
[class*="#{iv.$helpers-prefix}background-#{$name}"], .#{iv.$helpers-has-prefix}background-#{$name} {
[class*="#{iv.$helpers-has-prefix}background-#{$name}"] {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-l")},
"background-l-delta": 0%,
)
);
background-color: $background !important; background-color: $background !important;
} }
// Invert // Invert
.#{iv.$helpers-prefix}color-#{$name}-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-invert { .#{iv.$helpers-has-prefix}text-#{$name}-invert {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar($name, "", "-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-invert-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-invert { .#{iv.$helpers-has-prefix}background-#{$name}-invert {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar($name, "", "-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-invert-l")}
); ) !important;
} }
// On Scheme // On Scheme
.#{iv.$helpers-prefix}color-#{$name}-on-scheme,
.#{iv.$helpers-has-prefix}text-#{$name}-on-scheme { .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar($name, "", "-on-scheme-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-on-scheme-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-on-scheme,
.#{iv.$helpers-has-prefix}background-#{$name}-on-scheme { .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar($name, "", "-on-scheme-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-on-scheme-l")}
); ) !important;
} }
// Light // Light
.#{iv.$helpers-prefix}color-#{$name}-light,
.#{iv.$helpers-has-prefix}text-#{$name}-light { .#{iv.$helpers-has-prefix}text-#{$name}-light {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar($name, "", "-light-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-light-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-light,
.#{iv.$helpers-has-prefix}background-#{$name}-light { .#{iv.$helpers-has-prefix}background-#{$name}-light {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar($name, "", "-light-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-light-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}color-#{$name}-light-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-light-invert { .#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar($name, "", "-light-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-light-invert-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-light-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-light-invert { .#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar($name, "", "-light-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-light-invert-l")}
); ) !important;
} }
// Dark // Dark
.#{iv.$helpers-prefix}color-#{$name}-dark,
.#{iv.$helpers-has-prefix}text-#{$name}-dark { .#{iv.$helpers-has-prefix}text-#{$name}-dark {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar($name, "", "-dark-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-dark-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-dark,
.#{iv.$helpers-has-prefix}background-#{$name}-dark { .#{iv.$helpers-has-prefix}background-#{$name}-dark {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar($name, "", "-dark-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-dark-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}color-#{$name}-dark-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-dark-invert { .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar($name, "", "-dark-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-dark-invert-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-dark-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-dark-invert { .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar($name, "", "-dark-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-dark-invert-l")}
); ) !important;
} }
// Soft/Bold // Soft/Bold
.#{iv.$helpers-prefix}color-#{$name}-soft,
.#{iv.$helpers-has-prefix}text-#{$name}-soft { .#{iv.$helpers-has-prefix}text-#{$name}-soft {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar("soft-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar("soft-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-soft,
.#{iv.$helpers-has-prefix}background-#{$name}-soft { .#{iv.$helpers-has-prefix}background-#{$name}-soft {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar("soft-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar("soft-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}color-#{$name}-bold,
.#{iv.$helpers-has-prefix}text-#{$name}-bold { .#{iv.$helpers-has-prefix}text-#{$name}-bold {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar("bold-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar("bold-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-bold,
.#{iv.$helpers-has-prefix}background-#{$name}-bold { .#{iv.$helpers-has-prefix}background-#{$name}-bold {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar("bold-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar("bold-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}color-#{$name}-soft-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-soft-invert { .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar("soft-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar("soft-invert-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-soft-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-soft-invert { .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar("soft-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar("soft-invert-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}color-#{$name}-bold-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-bold-invert { .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar("bold-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar("bold-invert-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-bold-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-bold-invert { .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar("bold-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar("bold-invert-l")}
); ) !important;
} }
@each $digit in $digits { @each $digit in $digits {
.#{iv.$helpers-prefix}color-#{$name}-#{$digit},
.#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} { .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar($name, "", "-#{$digit}-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-#{$digit}-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-#{$digit},
.#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} { .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar($name, "", "-#{$digit}-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-#{$digit}-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert { .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-#{$digit}-invert-l")}
); ) !important;
} }
.#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert { .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")}, #{cv.getVar($name, "", "-s")},
) #{cv.getVar($name, "", "-#{$digit}-invert-l")}
); ) !important;
} }
} }
// Hover // Hover
a.#{iv.$helpers-prefix}color-#{$name},
button.#{iv.$helpers-prefix}color-#{$name},
#{iv.$helpers-prefix}color-#{$name}.is-hoverable,
a.#{iv.$helpers-has-prefix}text-#{$name}, a.#{iv.$helpers-has-prefix}text-#{$name},
button.#{iv.$helpers-has-prefix}text-#{$name}, button.#{iv.$helpers-has-prefix}text-#{$name},
#{iv.$helpers-has-prefix}text-#{$name}.is-hoverable { #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
&:hover, &:hover,
&:focus-visible { &:focus-visible {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l-delta": #{cv.getVar("hover-color-l-delta")}, #{cv.getVar($name, "", "-s")},
calc(
#{cv.getVar($name, "", "-l")} + #{cv.getVar("hover-color-l-delta")}
) )
); ) !important;
} }
&:active { &:active {
@include cv.register-vars( color: hsl(
( #{cv.getVar($name, "", "-h")},
"color-l-delta": #{cv.getVar("active-color-l-delta")}, #{cv.getVar($name, "", "-s")},
calc(
#{cv.getVar($name, "", "-l")} + #{cv.getVar("active-color-l-delta")}
) )
); ) !important;
} }
} }
a.#{iv.$helpers-prefix}background-#{$name},
button.#{iv.$helpers-prefix}background-#{$name},
#{iv.$helpers-prefix}background-#{$name}.is-hoverable,
a.#{iv.$helpers-has-prefix}background-#{$name}, a.#{iv.$helpers-has-prefix}background-#{$name},
button.#{iv.$helpers-has-prefix}background-#{$name}, button.#{iv.$helpers-has-prefix}background-#{$name},
#{iv.$helpers-has-prefix}background-#{$name}.is-hoverable { #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
&:hover, &:hover,
&:focus-visible { &:focus-visible {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l-delta": #{cv.getVar("hover-background-l-delta")}, #{cv.getVar($name, "", "-s")},
calc(
#{cv.getVar($name, "", "-l")} +
#{cv.getVar("hover-background-l-delta")}
) )
); ) !important;
} }
&:active { &:active {
@include cv.register-vars( background-color: hsl(
( #{cv.getVar($name, "", "-h")},
"background-l-delta": #{cv.getVar("active-background-l-delta")}, #{cv.getVar($name, "", "-s")},
calc(
#{cv.getVar($name, "", "-l")} +
#{cv.getVar("active-background-l-delta")}
) )
); ) !important;
} }
} }
@ -352,12 +318,10 @@ $digits: (
} }
@each $name, $shade in dv.$shades { @each $name, $shade in dv.$shades {
.#{iv.$helpers-prefix}color-#{$name},
.#{iv.$helpers-has-prefix}text-#{$name} { .#{iv.$helpers-has-prefix}text-#{$name} {
color: $shade !important; color: $shade !important;
} }
.#{iv.$helpers-prefix}background-#{$name},
.#{iv.$helpers-has-prefix}background-#{$name} { .#{iv.$helpers-has-prefix}background-#{$name} {
background-color: $shade !important; background-color: $shade !important;
} }

5
sass/utilities/css-variables.scss
View File

@ -211,8 +211,9 @@
} }
} }
$shades: map.set($shades, "100", 100%); $l-100: math.min($l-0 + 100%, 100%);
@include register-var($name, 100%, "", "-100-l"); $shades: map.set($shades, "100", $l-100);
@include register-var($name, $l-100, "", "-100-l");
// === STEP 3 === // === STEP 3 ===
// Find accessible color combinations // Find accessible color combinations