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

Add more Sass and CSS variables

Browse Source
This commit is contained in:
Jeremy Thomas 2024-07-07 21:01:04 +01:00
parent ab4a7b7d18
commit 05f898d4d8
22 changed files with 163 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
CHANGELOG.md
View File

@ -10,6 +10,19 @@
- Add `is-max-tablet` modifier to the Container element
- Add `currentColor` and `inherit` as possible values for the color and background helpers
- The Section can now have a minimum height of `100vh` with the `is-fullheight` modifier
- Add more SCSS variables:
- `$input-border-style`
- `$input-border-width`
- `$label-spacing`
- `$field-block-spacing`
- Add more CSS variables:
- `--bulma-input-border-style`
- `--bulma-input-border-width`
- `--bulma-label-color`
- `--bulma-label-spacing`
- `--bulma-label-weight`
- `--bulma-help-size`
- `--bulma-field-block-spacing`
### Bug fixes

27
css/bulma.css vendored
View File

@ -4025,6 +4025,8 @@ a.box:active {
.content ol {
list-style-position: outside;
margin-inline-start: 2em;
}
.content ol:not(:first-child) {
margin-top: 1em;
}
.content ol:not([type]) {
@ -4045,6 +4047,8 @@ a.box:active {
.content ul {
list-style: disc outside;
margin-inline-start: 2em;
}
.content ul:not(:first-child) {
margin-top: 1em;
}
.content ul ul {
@ -5433,6 +5437,8 @@ button.tag:active,
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-l: var(--bulma-scheme-main-l);
--bulma-input-border-style: solid;
--bulma-input-border-width: var(--bulma-control-border-width);
--bulma-input-border-l: var(--bulma-border-l);
--bulma-input-border-l-delta: 0%;
--bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
@ -5508,11 +5514,6 @@ button.tag:active,
/* Bulma Form */
.textarea, .input {
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-border-style: solid;
--bulma-input-border-width: 1px;
--bulma-input-border-l: var(--bulma-border-l);
box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);
max-width: 100%;
width: 100%;
@ -6168,14 +6169,22 @@ button.tag:active,
}
/* Bulma Form */
:root {
--bulma-label-color: var(--bulma-text-strong);
--bulma-label-spacing: 0.5em;
--bulma-label-weight: var(--bulma-weight-semibold);
--bulma-help-size: var(--bulma-size-small);
--bulma-field-block-spacing: 0.75rem;
}
.label {
color: var(--bulma-text-strong);
color: var(--bulma-label-color);
display: block;
font-size: var(--bulma-size-normal);
font-weight: var(--bulma-weight-semibold);
}
.label:not(:last-child) {
margin-bottom: 0.5em;
margin-bottom: var(--bulma-label-spacing);
}
.label.is-small {
font-size: var(--bulma-size-small);
@ -6189,7 +6198,7 @@ button.tag:active,
.help {
display: block;
font-size: var(--bulma-size-small);
font-size: var(--bulma-help-size);
margin-top: 0.25rem;
}
.help.is-white {
@ -6227,7 +6236,7 @@ button.tag:active,
}
.field {
--bulma-block-spacing: 0.75rem;
--bulma-block-spacing: var(--bulma-field-block-spacing);
}
.field.has-addons {
display: flex;

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

2
css/bulma.min.css vendored
View File

File diff suppressed because one or more lines are too long

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

@ -1222,6 +1222,8 @@ a.box:active {
.content ol {
list-style-position: outside;
margin-inline-start: 2em;
}
.content ol:not(:first-child) {
margin-top: 1em;
}
.content ol:not([type]) {
@ -1242,6 +1244,8 @@ a.box:active {
.content ul {
list-style: disc outside;
margin-inline-start: 2em;
}
.content ul:not(:first-child) {
margin-top: 1em;
}
.content ul ul {
@ -2630,6 +2634,8 @@ button.tag:active,
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-l: var(--bulma-scheme-main-l);
--bulma-input-border-style: solid;
--bulma-input-border-width: var(--bulma-control-border-width);
--bulma-input-border-l: var(--bulma-border-l);
--bulma-input-border-l-delta: 0%;
--bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
@ -2705,11 +2711,6 @@ button.tag:active,
/* Bulma Form */
.textarea, .input {
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-border-style: solid;
--bulma-input-border-width: 1px;
--bulma-input-border-l: var(--bulma-border-l);
box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);
max-width: 100%;
width: 100%;
@ -3365,14 +3366,22 @@ button.tag:active,
}
/* Bulma Form */
:root {
--bulma-label-color: var(--bulma-text-strong);
--bulma-label-spacing: 0.5em;
--bulma-label-weight: var(--bulma-weight-semibold);
--bulma-help-size: var(--bulma-size-small);
--bulma-field-block-spacing: 0.75rem;
}
.label {
color: var(--bulma-text-strong);
color: var(--bulma-label-color);
display: block;
font-size: var(--bulma-size-normal);
font-weight: var(--bulma-weight-semibold);
}
.label:not(:last-child) {
margin-bottom: 0.5em;
margin-bottom: var(--bulma-label-spacing);
}
.label.is-small {
font-size: var(--bulma-size-small);
@ -3386,7 +3395,7 @@ button.tag:active,
.help {
display: block;
font-size: var(--bulma-size-small);
font-size: var(--bulma-help-size);
margin-top: 0.25rem;
}
.help.is-white {
@ -3424,7 +3433,7 @@ button.tag:active,
}
.field {
--bulma-block-spacing: 0.75rem;
--bulma-block-spacing: var(--bulma-field-block-spacing);
}
.field.has-addons {
display: flex;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -1222,6 +1222,8 @@ a.bulma-box:active {
.bulma-content ol {
list-style-position: outside;
margin-inline-start: 2em;
}
.bulma-content ol:not(:first-child) {
margin-top: 1em;
}
.bulma-content ol:not([type]) {
@ -1242,6 +1244,8 @@ a.bulma-box:active {
.bulma-content ul {
list-style: disc outside;
margin-inline-start: 2em;
}
.bulma-content ul:not(:first-child) {
margin-top: 1em;
}
.bulma-content ul ul {
@ -2630,6 +2634,8 @@ button.bulma-tag:active,
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-l: var(--bulma-scheme-main-l);
--bulma-input-border-style: solid;
--bulma-input-border-width: var(--bulma-control-border-width);
--bulma-input-border-l: var(--bulma-border-l);
--bulma-input-border-l-delta: 0%;
--bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
@ -2705,11 +2711,6 @@ button.bulma-tag:active,
/* Bulma Form */
.bulma-textarea, .bulma-input {
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-border-style: solid;
--bulma-input-border-width: 1px;
--bulma-input-border-l: var(--bulma-border-l);
box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);
max-width: 100%;
width: 100%;
@ -3365,14 +3366,22 @@ button.bulma-tag:active,
}
/* Bulma Form */
:root {
--bulma-label-color: var(--bulma-text-strong);
--bulma-label-spacing: 0.5em;
--bulma-label-weight: var(--bulma-weight-semibold);
--bulma-help-size: var(--bulma-size-small);
--bulma-field-block-spacing: 0.75rem;
}
.bulma-label {
color: var(--bulma-text-strong);
color: var(--bulma-label-color);
display: block;
font-size: var(--bulma-size-normal);
font-weight: var(--bulma-weight-semibold);
}
.bulma-label:not(:last-child) {
margin-bottom: 0.5em;
margin-bottom: var(--bulma-label-spacing);
}
.bulma-label.bulma-is-small {
font-size: var(--bulma-size-small);
@ -3386,7 +3395,7 @@ button.bulma-tag:active,
.bulma-help {
display: block;
font-size: var(--bulma-size-small);
font-size: var(--bulma-help-size);
margin-top: 0.25rem;
}
.bulma-help.bulma-is-white {
@ -3424,7 +3433,7 @@ button.bulma-tag:active,
}
.bulma-field {
--bulma-block-spacing: 0.75rem;
--bulma-block-spacing: var(--bulma-field-block-spacing);
}
.bulma-field.bulma-has-addons {
display: flex;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -1222,6 +1222,8 @@ a.box:active {
.content ol {
list-style-position: outside;
margin-inline-start: 2em;
}
.content ol:not(:first-child) {
margin-top: 1em;
}
.content ol:not([type]) {
@ -1242,6 +1244,8 @@ a.box:active {
.content ul {
list-style: disc outside;
margin-inline-start: 2em;
}
.content ul:not(:first-child) {
margin-top: 1em;
}
.content ul ul {
@ -2630,6 +2634,8 @@ button.tag:active,
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-l: var(--bulma-scheme-main-l);
--bulma-input-border-style: solid;
--bulma-input-border-width: var(--bulma-control-border-width);
--bulma-input-border-l: var(--bulma-border-l);
--bulma-input-border-l-delta: 0%;
--bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
@ -2705,11 +2711,6 @@ button.tag:active,
/* Bulma Form */
.textarea, .input {
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-border-style: solid;
--bulma-input-border-width: 1px;
--bulma-input-border-l: var(--bulma-border-l);
box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);
max-width: 100%;
width: 100%;
@ -3365,14 +3366,22 @@ button.tag:active,
}
/* Bulma Form */
:root {
--bulma-label-color: var(--bulma-text-strong);
--bulma-label-spacing: 0.5em;
--bulma-label-weight: var(--bulma-weight-semibold);
--bulma-help-size: var(--bulma-size-small);
--bulma-field-block-spacing: 0.75rem;
}
.label {
color: var(--bulma-text-strong);
color: var(--bulma-label-color);
display: block;
font-size: var(--bulma-size-normal);
font-weight: var(--bulma-weight-semibold);
}
.label:not(:last-child) {
margin-bottom: 0.5em;
margin-bottom: var(--bulma-label-spacing);
}
.label.is-small {
font-size: var(--bulma-size-small);
@ -3386,7 +3395,7 @@ button.tag:active,
.help {
display: block;
font-size: var(--bulma-size-small);
font-size: var(--bulma-help-size);
margin-top: 0.25rem;
}
.help.is-white {
@ -3424,7 +3433,7 @@ button.tag:active,
}
.field {
--bulma-block-spacing: 0.75rem;
--bulma-block-spacing: var(--bulma-field-block-spacing);
}
.field.has-addons {
display: flex;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -4025,6 +4025,8 @@ a.bulma-box:active {
.bulma-content ol {
list-style-position: outside;
margin-inline-start: 2em;
}
.bulma-content ol:not(:first-child) {
margin-top: 1em;
}
.bulma-content ol:not([type]) {
@ -4045,6 +4047,8 @@ a.bulma-box:active {
.bulma-content ul {
list-style: disc outside;
margin-inline-start: 2em;
}
.bulma-content ul:not(:first-child) {
margin-top: 1em;
}
.bulma-content ul ul {
@ -5433,6 +5437,8 @@ button.bulma-tag:active,
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-l: var(--bulma-scheme-main-l);
--bulma-input-border-style: solid;
--bulma-input-border-width: var(--bulma-control-border-width);
--bulma-input-border-l: var(--bulma-border-l);
--bulma-input-border-l-delta: 0%;
--bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
@ -5508,11 +5514,6 @@ button.bulma-tag:active,
/* Bulma Form */
.bulma-textarea, .bulma-input {
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-border-style: solid;
--bulma-input-border-width: 1px;
--bulma-input-border-l: var(--bulma-border-l);
box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);
max-width: 100%;
width: 100%;
@ -6168,14 +6169,22 @@ button.bulma-tag:active,
}
/* Bulma Form */
:root {
--bulma-label-color: var(--bulma-text-strong);
--bulma-label-spacing: 0.5em;
--bulma-label-weight: var(--bulma-weight-semibold);
--bulma-help-size: var(--bulma-size-small);
--bulma-field-block-spacing: 0.75rem;
}
.bulma-label {
color: var(--bulma-text-strong);
color: var(--bulma-label-color);
display: block;
font-size: var(--bulma-size-normal);
font-weight: var(--bulma-weight-semibold);
}
.bulma-label:not(:last-child) {
margin-bottom: 0.5em;
margin-bottom: var(--bulma-label-spacing);
}
.bulma-label.bulma-is-small {
font-size: var(--bulma-size-small);
@ -6189,7 +6198,7 @@ button.bulma-tag:active,
.bulma-help {
display: block;
font-size: var(--bulma-size-small);
font-size: var(--bulma-help-size);
margin-top: 0.25rem;
}
.bulma-help.bulma-is-white {
@ -6227,7 +6236,7 @@ button.bulma-tag:active,
}
.bulma-field {
--bulma-block-spacing: 0.75rem;
--bulma-block-spacing: var(--bulma-field-block-spacing);
}
.bulma-field.bulma-has-addons {
display: flex;

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -7464,6 +7464,8 @@ a.box:active {
.content ol {
list-style-position: outside;
margin-inline-start: 2em;
}
.content ol:not(:first-child) {
margin-top: 1em;
}
.content ol:not([type]) {
@ -7484,6 +7486,8 @@ a.box:active {
.content ul {
list-style: disc outside;
margin-inline-start: 2em;
}
.content ul:not(:first-child) {
margin-top: 1em;
}
.content ul ul {
@ -9272,6 +9276,8 @@ button.tag:active,
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-l: var(--bulma-scheme-main-l);
--bulma-input-border-style: solid;
--bulma-input-border-width: var(--bulma-control-border-width);
--bulma-input-border-l: var(--bulma-border-l);
--bulma-input-border-l-delta: 0%;
--bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta);
@ -9347,11 +9353,6 @@ button.tag:active,
/* Bulma Form */
.textarea, .input {
--bulma-input-h: var(--bulma-scheme-h);
--bulma-input-s: var(--bulma-scheme-s);
--bulma-input-border-style: solid;
--bulma-input-border-width: 1px;
--bulma-input-border-l: var(--bulma-border-l);
box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05);
max-width: 100%;
width: 100%;
@ -10277,14 +10278,22 @@ button.tag:active,
}
/* Bulma Form */
:root {
--bulma-label-color: var(--bulma-text-strong);
--bulma-label-spacing: 0.5em;
--bulma-label-weight: var(--bulma-weight-semibold);
--bulma-help-size: var(--bulma-size-small);
--bulma-field-block-spacing: 0.75rem;
}
.label {
color: var(--bulma-text-strong);
color: var(--bulma-label-color);
display: block;
font-size: var(--bulma-size-normal);
font-weight: var(--bulma-weight-semibold);
}
.label:not(:last-child) {
margin-bottom: 0.5em;
margin-bottom: var(--bulma-label-spacing);
}
.label.is-small {
font-size: var(--bulma-size-small);
@ -10298,7 +10307,7 @@ button.tag:active,
.help {
display: block;
font-size: var(--bulma-size-small);
font-size: var(--bulma-help-size);
margin-top: 0.25rem;
}
.help.is-white {
@ -10366,7 +10375,7 @@ button.tag:active,
}
.field {
--bulma-block-spacing: 0.75rem;
--bulma-block-spacing: var(--bulma-field-block-spacing);
}
.field.has-addons {
display: flex;

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

File diff suppressed because one or more lines are too long

6
sass/elements/content.scss
View File

@ -133,7 +133,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
ol {
list-style-position: outside;
margin-inline-start: 2em;
&:not(:first-child) {
margin-top: 1em;
}
&:not([type]) {
list-style-type: decimal;
@ -159,7 +162,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
ul {
list-style: disc outside;
margin-inline-start: 2em;
&:not(:first-child) {
margin-top: 1em;
}
ul {
list-style-type: circle;

10
sass/form/input-textarea.scss
View File

@ -12,16 +12,6 @@ $textarea-colors: shared.$form-colors !default;
%input-textarea {
@extend %input;
@include cv.register-vars(
(
"input-h": #{cv.getVar("scheme-h")},
"input-s": #{cv.getVar("scheme-s")},
"input-border-style": solid,
"input-border-width": 1px,
"input-border-l": #{cv.getVar("border-l")},
)
);
box-shadow: shared.$input-shadow;
max-width: 100%;
width: 100%;

4
sass/form/shared.scss
View File

@ -9,6 +9,8 @@ $form-colors: dv.$colors !default;
$input-h: #{cv.getVar("scheme-h")} !default;
$input-s: #{cv.getVar("scheme-s")} !default;
$input-l: #{cv.getVar("scheme-main-l")} !default;
$input-border-style: solid !default;
$input-border-width: cv.getVar("control-border-width") !default;
$input-border-l: cv.getVar("border-l") !default;
$input-border-l-delta: 0% !default;
$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
@ -64,6 +66,8 @@ $input-radius: cv.getVar("radius") !default;
"input-h": #{$input-h},
"input-s": #{$input-s},
"input-l": #{$input-l},
"input-border-style": #{$input-border-style},
"input-border-width": #{$input-border-width},
"input-border-l": #{$input-border-l},
"input-border-l-delta": #{$input-border-l-delta},
"input-hover-border-l-delta": #{$input-hover-border-l-delta},

23
sass/form/tools.scss
View File

@ -6,20 +6,35 @@
@use "../utilities/mixins" as mx;
$label-color: cv.getVar("text-strong") !default;
$label-spacing: 0.5em !default;
$label-weight: cv.getVar("weight-semibold") !default;
$help-size: cv.getVar("size-small") !default;
$label-colors: shared.$form-colors !default;
$field-block-spacing: 0.75rem !default;
:root {
@include cv.register-vars(
(
"label-color": #{$label-color},
"label-spacing": #{$label-spacing},
"label-weight": #{$label-weight},
"help-size": #{$help-size},
"field-block-spacing": #{$field-block-spacing},
)
);
}
.#{iv.$class-prefix}label {
color: $label-color;
color: cv.getVar("label-color");
display: block;
font-size: cv.getVar("size-normal");
font-weight: $label-weight;
&:not(:last-child) {
margin-bottom: 0.5em;
margin-bottom: cv.getVar("label-spacing");
}
// Sizes
@ -38,7 +53,7 @@ $label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}help {
display: block;
font-size: $help-size;
font-size: cv.getVar("help-size");
margin-top: 0.25rem;
@each $name, $pair in $label-colors {
@ -57,7 +72,7 @@ $label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}field {
@include cv.register-vars(
(
"block-spacing": 0.75rem,
"block-spacing": #{cv.getVar("field-block-spacing")},
)
);