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

3
.gitignore vendored
View File

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

View File

@ -2,6 +2,11 @@
## 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
- 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 #3799: restore variable columns
- Fix #3846: restore `--bulma-column-gap` CSS variable
- Fix #3775: `has-background` helpers should only affect element it's applied to
## 1.0.1

4205
css/bulma.css vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

4
css/bulma.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -4723,6 +4723,7 @@ body.bulma-has-navbar-fixed-bottom {
.bulma-navbar-link {
color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
display: block;
gap: 0.75rem;
line-height: 1.5;
padding: 0.5rem 0.75rem;
position: relative;
@ -6850,435 +6851,435 @@ label.bulma-panel-block:hover {
display: flex;
}
}
.bulma-columns.bulma-is-variable.bulma-is-0 {
.bulma-columns.bulma-is-0 {
--bulma-column-gap: 0rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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-columns.bulma-is-variable.bulma-is-1 {
.bulma-columns.bulma-is-1 {
--bulma-column-gap: 0.25rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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-columns.bulma-is-variable.bulma-is-2 {
.bulma-columns.bulma-is-2 {
--bulma-column-gap: 0.5rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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-columns.bulma-is-variable.bulma-is-3 {
.bulma-columns.bulma-is-3 {
--bulma-column-gap: 0.75rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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-columns.bulma-is-variable.bulma-is-4 {
.bulma-columns.bulma-is-4 {
--bulma-column-gap: 1rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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-columns.bulma-is-variable.bulma-is-5 {
.bulma-columns.bulma-is-5 {
--bulma-column-gap: 1.25rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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-columns.bulma-is-variable.bulma-is-6 {
.bulma-columns.bulma-is-6 {
--bulma-column-gap: 1.5rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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-columns.bulma-is-variable.bulma-is-7 {
.bulma-columns.bulma-is-7 {
--bulma-column-gap: 1.75rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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-columns.bulma-is-variable.bulma-is-8 {
.bulma-columns.bulma-is-8 {
--bulma-column-gap: 2rem;
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@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;
}
}
@ -7595,6 +7596,66 @@ label.bulma-panel-block:hover {
.bulma-grid.bulma-is-col-min-12 {
--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 {
grid-column-end: span var(--bulma-grid-cell-column-span);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -4723,6 +4723,7 @@ body.has-navbar-fixed-bottom {
.navbar-link {
color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l));
display: block;
gap: 0.75rem;
line-height: 1.5;
padding: 0.5rem 0.75rem;
position: relative;
@ -6850,435 +6851,435 @@ label.panel-block:hover {
display: flex;
}
}
.columns.is-variable.is-0 {
.columns.is-0 {
--bulma-column-gap: 0rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-0-mobile {
.columns.is-0-mobile {
--bulma-column-gap: 0rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-0-tablet {
.columns.is-0-tablet {
--bulma-column-gap: 0rem;
}
}
@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;
}
}
@media screen and (max-width: 1023px) {
.columns.is-variable.is-0-touch {
.columns.is-0-touch {
--bulma-column-gap: 0rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-variable.is-0-desktop {
.columns.is-0-desktop {
--bulma-column-gap: 0rem;
}
}
@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;
}
}
@media screen and (min-width: 1216px) {
.columns.is-variable.is-0-widescreen {
.columns.is-0-widescreen {
--bulma-column-gap: 0rem;
}
}
@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;
}
}
@media screen and (min-width: 1408px) {
.columns.is-variable.is-0-fullhd {
.columns.is-0-fullhd {
--bulma-column-gap: 0rem;
}
}
.columns.is-variable.is-1 {
.columns.is-1 {
--bulma-column-gap: 0.25rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-1-mobile {
.columns.is-1-mobile {
--bulma-column-gap: 0.25rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-1-tablet {
.columns.is-1-tablet {
--bulma-column-gap: 0.25rem;
}
}
@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;
}
}
@media screen and (max-width: 1023px) {
.columns.is-variable.is-1-touch {
.columns.is-1-touch {
--bulma-column-gap: 0.25rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-variable.is-1-desktop {
.columns.is-1-desktop {
--bulma-column-gap: 0.25rem;
}
}
@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;
}
}
@media screen and (min-width: 1216px) {
.columns.is-variable.is-1-widescreen {
.columns.is-1-widescreen {
--bulma-column-gap: 0.25rem;
}
}
@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;
}
}
@media screen and (min-width: 1408px) {
.columns.is-variable.is-1-fullhd {
.columns.is-1-fullhd {
--bulma-column-gap: 0.25rem;
}
}
.columns.is-variable.is-2 {
.columns.is-2 {
--bulma-column-gap: 0.5rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-2-mobile {
.columns.is-2-mobile {
--bulma-column-gap: 0.5rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-2-tablet {
.columns.is-2-tablet {
--bulma-column-gap: 0.5rem;
}
}
@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;
}
}
@media screen and (max-width: 1023px) {
.columns.is-variable.is-2-touch {
.columns.is-2-touch {
--bulma-column-gap: 0.5rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-variable.is-2-desktop {
.columns.is-2-desktop {
--bulma-column-gap: 0.5rem;
}
}
@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;
}
}
@media screen and (min-width: 1216px) {
.columns.is-variable.is-2-widescreen {
.columns.is-2-widescreen {
--bulma-column-gap: 0.5rem;
}
}
@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;
}
}
@media screen and (min-width: 1408px) {
.columns.is-variable.is-2-fullhd {
.columns.is-2-fullhd {
--bulma-column-gap: 0.5rem;
}
}
.columns.is-variable.is-3 {
.columns.is-3 {
--bulma-column-gap: 0.75rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-3-mobile {
.columns.is-3-mobile {
--bulma-column-gap: 0.75rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-3-tablet {
.columns.is-3-tablet {
--bulma-column-gap: 0.75rem;
}
}
@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;
}
}
@media screen and (max-width: 1023px) {
.columns.is-variable.is-3-touch {
.columns.is-3-touch {
--bulma-column-gap: 0.75rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-variable.is-3-desktop {
.columns.is-3-desktop {
--bulma-column-gap: 0.75rem;
}
}
@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;
}
}
@media screen and (min-width: 1216px) {
.columns.is-variable.is-3-widescreen {
.columns.is-3-widescreen {
--bulma-column-gap: 0.75rem;
}
}
@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;
}
}
@media screen and (min-width: 1408px) {
.columns.is-variable.is-3-fullhd {
.columns.is-3-fullhd {
--bulma-column-gap: 0.75rem;
}
}
.columns.is-variable.is-4 {
.columns.is-4 {
--bulma-column-gap: 1rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-4-mobile {
.columns.is-4-mobile {
--bulma-column-gap: 1rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-4-tablet {
.columns.is-4-tablet {
--bulma-column-gap: 1rem;
}
}
@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;
}
}
@media screen and (max-width: 1023px) {
.columns.is-variable.is-4-touch {
.columns.is-4-touch {
--bulma-column-gap: 1rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-variable.is-4-desktop {
.columns.is-4-desktop {
--bulma-column-gap: 1rem;
}
}
@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;
}
}
@media screen and (min-width: 1216px) {
.columns.is-variable.is-4-widescreen {
.columns.is-4-widescreen {
--bulma-column-gap: 1rem;
}
}
@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;
}
}
@media screen and (min-width: 1408px) {
.columns.is-variable.is-4-fullhd {
.columns.is-4-fullhd {
--bulma-column-gap: 1rem;
}
}
.columns.is-variable.is-5 {
.columns.is-5 {
--bulma-column-gap: 1.25rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-5-mobile {
.columns.is-5-mobile {
--bulma-column-gap: 1.25rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-5-tablet {
.columns.is-5-tablet {
--bulma-column-gap: 1.25rem;
}
}
@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;
}
}
@media screen and (max-width: 1023px) {
.columns.is-variable.is-5-touch {
.columns.is-5-touch {
--bulma-column-gap: 1.25rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-variable.is-5-desktop {
.columns.is-5-desktop {
--bulma-column-gap: 1.25rem;
}
}
@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;
}
}
@media screen and (min-width: 1216px) {
.columns.is-variable.is-5-widescreen {
.columns.is-5-widescreen {
--bulma-column-gap: 1.25rem;
}
}
@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;
}
}
@media screen and (min-width: 1408px) {
.columns.is-variable.is-5-fullhd {
.columns.is-5-fullhd {
--bulma-column-gap: 1.25rem;
}
}
.columns.is-variable.is-6 {
.columns.is-6 {
--bulma-column-gap: 1.5rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-6-mobile {
.columns.is-6-mobile {
--bulma-column-gap: 1.5rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-6-tablet {
.columns.is-6-tablet {
--bulma-column-gap: 1.5rem;
}
}
@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;
}
}
@media screen and (max-width: 1023px) {
.columns.is-variable.is-6-touch {
.columns.is-6-touch {
--bulma-column-gap: 1.5rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-variable.is-6-desktop {
.columns.is-6-desktop {
--bulma-column-gap: 1.5rem;
}
}
@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;
}
}
@media screen and (min-width: 1216px) {
.columns.is-variable.is-6-widescreen {
.columns.is-6-widescreen {
--bulma-column-gap: 1.5rem;
}
}
@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;
}
}
@media screen and (min-width: 1408px) {
.columns.is-variable.is-6-fullhd {
.columns.is-6-fullhd {
--bulma-column-gap: 1.5rem;
}
}
.columns.is-variable.is-7 {
.columns.is-7 {
--bulma-column-gap: 1.75rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-7-mobile {
.columns.is-7-mobile {
--bulma-column-gap: 1.75rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-7-tablet {
.columns.is-7-tablet {
--bulma-column-gap: 1.75rem;
}
}
@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;
}
}
@media screen and (max-width: 1023px) {
.columns.is-variable.is-7-touch {
.columns.is-7-touch {
--bulma-column-gap: 1.75rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-variable.is-7-desktop {
.columns.is-7-desktop {
--bulma-column-gap: 1.75rem;
}
}
@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;
}
}
@media screen and (min-width: 1216px) {
.columns.is-variable.is-7-widescreen {
.columns.is-7-widescreen {
--bulma-column-gap: 1.75rem;
}
}
@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;
}
}
@media screen and (min-width: 1408px) {
.columns.is-variable.is-7-fullhd {
.columns.is-7-fullhd {
--bulma-column-gap: 1.75rem;
}
}
.columns.is-variable.is-8 {
.columns.is-8 {
--bulma-column-gap: 2rem;
}
@media screen and (max-width: 768px) {
.columns.is-variable.is-8-mobile {
.columns.is-8-mobile {
--bulma-column-gap: 2rem;
}
}
@media screen and (min-width: 769px), print {
.columns.is-variable.is-8-tablet {
.columns.is-8-tablet {
--bulma-column-gap: 2rem;
}
}
@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;
}
}
@media screen and (max-width: 1023px) {
.columns.is-variable.is-8-touch {
.columns.is-8-touch {
--bulma-column-gap: 2rem;
}
}
@media screen and (min-width: 1024px) {
.columns.is-variable.is-8-desktop {
.columns.is-8-desktop {
--bulma-column-gap: 2rem;
}
}
@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;
}
}
@media screen and (min-width: 1216px) {
.columns.is-variable.is-8-widescreen {
.columns.is-8-widescreen {
--bulma-column-gap: 2rem;
}
}
@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;
}
}
@media screen and (min-width: 1408px) {
.columns.is-variable.is-8-fullhd {
.columns.is-8-fullhd {
--bulma-column-gap: 2rem;
}
}
@ -7595,6 +7596,66 @@ label.panel-block:hover {
.grid.is-col-min-12 {
--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 {
grid-column-end: span var(--bulma-grid-cell-column-span);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -35,6 +35,14 @@ breadcrumb:
<div class="column">No gap</div>
</div>
{% 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 %}
<div class="columns is-gapless is-multiline is-mobile">
<div class="column is-one-quarter">is-one-quarter</div>
@ -49,9 +57,7 @@ breadcrumb:
</div>
{% endcapture %}
{% capture columns_variable_responsive_gaps %}
<div
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
>
<div class="columns 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>
@ -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-8</code> is the maximum gap of <code>2rem</code></li>
</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>
{% 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 %}
{% if vernum >= 72 %}
{%
include docs/elements/anchor.html name="Breakpoint
based column gaps"
include docs/elements/anchor.html name="Breakpoint based column gaps"
%}
<div class="content">
@ -184,19 +182,17 @@ breadcrumb:
<p>
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>
</div>
<div class="bd-highlight-full">
{% highlight html -%}
{%- highlight html -%}
{{- columns_variable_responsive_gaps -}}
{%- endhighlight %}
{%- endhighlight -%}
</div>
<div
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
>
<div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
<div class="column">
<p class="bd-notification is-primary">Column</p>
</div>

View File

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

View File

@ -22,7 +22,7 @@ breadcrumb:
</span>
<button class="js-modifier-property dn" data-property="is-col-min"></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>
{% endfor %}
</div>
@ -110,4 +110,4 @@ breadcrumb:
{{ 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>

View File

@ -43,7 +43,7 @@ By default, the Smart Grid has:
{% include docs/elements/anchor.html name="Smart Grid modifiers" %}
{% 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 %}
{% 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>
</thead>
<tbody>
{% for i in (1..12) %}
{% for i in (1..32) %}
<tr>
<td><code>is-col-min-{{ i }}</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>
{% for i in (0..8) %}
<tr>
<td><code>gap-{{ i }}</code></td>
<td><code>column-gap-{{ i }}</code></td>
<td><code>row-gap-{{ i }}</code></td>
<td><code>is-gap-{{ i }}</code></td>
<td><code>is-column-gap-{{ i }}</code></td>
<td><code>is-row-gap-{{ i }}</code></td>
<td><code>{{ i | times: 0.5 }}rem</code></td>
</tr>
{% endfor %}

View File

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

View File

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

View File

@ -48,6 +48,7 @@
"minify-all": "npm run minify-bulma && npm run minify-versions",
"clean": "rimraf css",
"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"
},
"files": [

View File

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

View File

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

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} {
@include cv.register-vars(
(

View File

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

View File

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