mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Jeremy Thomas
parent
fc7db1b204
commit
2ed62be159
3
.gitignore
vendored
3
.gitignore
vendored
@ -7,8 +7,7 @@ test.css
|
||||
test.css.map
|
||||
test.html
|
||||
test.sass
|
||||
test.css
|
||||
test.css.map
|
||||
test.scss
|
||||
|
||||
# Folders
|
||||
|
||||
|
||||
@ -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
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
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
2
css/versions/bulma-no-dark-mode.min.css
vendored
2
css/versions/bulma-no-dark-mode.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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
@ -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
2
css/versions/bulma-no-helpers.min.css
vendored
2
css/versions/bulma-no-helpers.min.css
vendored
File diff suppressed because one or more lines are too long
4205
css/versions/bulma-prefixed.min.css
vendored
4205
css/versions/bulma-prefixed.min.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/versions/bulma-prefixed.min.min.css
vendored
4
css/versions/bulma-prefixed.min.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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
4
docs/assets/css/website.min.css
vendored
4
docs/assets/css/website.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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": [
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -859,7 +859,6 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-variable {
|
||||
@for $i from 0 through 8 {
|
||||
&.#{iv.$class-prefix}is-#{$i} {
|
||||
@include cv.register-vars(
|
||||
@ -960,4 +959,3 @@ $column-gap: 0.75rem !default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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(
|
||||
(
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user