Add documentation of all CSS variables available

This commit is contained in:
Jeremy Thomas 2024-09-18 14:46:10 +01:00
parent 29aea4dfc4
commit 15ff0be367
35 changed files with 635 additions and 97 deletions

View File

@ -37,7 +37,7 @@
}, },
{ {
"name": "card-header-shadow", "name": "card-header-shadow",
"value": "0 0.125em 0.25em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n )", "value": "0 0.125em 0.25em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n)",
"css-var": "card-header-shadow" "css-var": "card-header-shadow"
}, },
{ {
@ -138,4 +138,4 @@
"value": "var(--bulma-block-spacing)" "value": "var(--bulma-block-spacing)"
} }
] ]
} }

View File

@ -99,10 +99,6 @@
"name": "modal-card-body-padding", "name": "modal-card-body-padding",
"value": "2rem", "value": "2rem",
"css-var": "modal-card-body-padding" "css-var": "modal-card-body-padding"
},
{
"name": "modal-breakpoint",
"value": "iv.$tablet"
} }
], ],
"css-vars": [ "css-vars": [
@ -187,4 +183,4 @@
"value": "2rem" "value": "2rem"
} }
] ]
} }

View File

@ -2,14 +2,17 @@
"sass-vars": [ "sass-vars": [
{ {
"name": "navbar-background-color", "name": "navbar-background-color",
"css-var": "navbar-background-color",
"value": "var(--bulma-scheme-main)" "value": "var(--bulma-scheme-main)"
}, },
{ {
"name": "navbar-box-shadow-size", "name": "navbar-box-shadow-size",
"css-var": "navbar-box-shadow-size",
"value": "0 0.125em 0 0" "value": "0 0.125em 0 0"
}, },
{ {
"name": "navbar-box-shadow-color", "name": "navbar-box-shadow-color",
"css-var": "navbar-box-shadow-color",
"value": "var(--bulma-background)" "value": "var(--bulma-background)"
}, },
{ {
@ -19,125 +22,145 @@
}, },
{ {
"name": "navbar-padding-vertical", "name": "navbar-padding-vertical",
"css-var": "navbar-padding-vertical",
"value": "1rem" "value": "1rem"
}, },
{ {
"name": "navbar-padding-horizontal", "name": "navbar-padding-horizontal",
"css-var": "navbar-padding-horizontal",
"value": "2rem" "value": "2rem"
}, },
{ {
"name": "navbar-z", "name": "navbar-z",
"css-var": "navbar-z",
"value": "30" "value": "30"
}, },
{ {
"name": "navbar-fixed-z", "name": "navbar-fixed-z",
"css-var": "navbar-fixed-z",
"value": "30" "value": "30"
}, },
{ {
"name": "navbar-item-img-max-height", "name": "navbar-item-img-max-height",
"css-var": "navbar-item-img-max-height",
"value": "1.75rem" "value": "1.75rem"
}, },
{ {
"name": "navbar-burger-color", "name": "navbar-burger-color",
"css-var": "navbar-burger-color",
"value": "var(--bulma-navbar-item-color)" "value": "var(--bulma-navbar-item-color)"
}, },
{ {
"name": "navbar-tab-hover-background-color", "name": "navbar-tab-hover-background-color",
"css-var": "navbar-tab-hover-background-color",
"value": "transparent" "value": "transparent"
}, },
{ {
"name": "navbar-tab-hover-border-bottom-color", "name": "navbar-tab-hover-border-bottom-color",
"css-var": "navbar-tab-hover-border-bottom-color",
"value": "var(--bulma-link)" "value": "var(--bulma-link)"
}, },
{ {
"name": "navbar-tab-active-color", "name": "navbar-tab-active-color",
"css-var": "navbar-tab-active-color",
"value": "var(--bulma-link)" "value": "var(--bulma-link)"
}, },
{ {
"name": "navbar-tab-active-background-color", "name": "navbar-tab-active-background-color",
"css-var": "navbar-tab-active-background-color",
"value": "transparent" "value": "transparent"
}, },
{ {
"name": "navbar-tab-active-border-bottom-color", "name": "navbar-tab-active-border-bottom-color",
"css-var": "navbar-tab-active-border-bottom-color",
"value": "var(--bulma-link)" "value": "var(--bulma-link)"
}, },
{ {
"name": "navbar-tab-active-border-bottom-style", "name": "navbar-tab-active-border-bottom-style",
"css-var": "navbar-tab-active-border-bottom-style",
"value": "solid" "value": "solid"
}, },
{ {
"name": "navbar-tab-active-border-bottom-width", "name": "navbar-tab-active-border-bottom-width",
"css-var": "navbar-tab-active-border-bottom-width",
"value": "0.1875em" "value": "0.1875em"
}, },
{ {
"name": "navbar-dropdown-background-color", "name": "navbar-dropdown-background-color",
"css-var": "navbar-dropdown-background-color",
"value": "var(--bulma-scheme-main)" "value": "var(--bulma-scheme-main)"
}, },
{ {
"name": "navbar-dropdown-border-l", "name": "navbar-dropdown-border-l",
"css-var": "navbar-dropdown-border-l",
"value": "var(--bulma-border-l)" "value": "var(--bulma-border-l)"
}, },
{ {
"name": "navbar-dropdown-border-color", "name": "navbar-dropdown-border-color",
"css-var": "navbar-dropdown-border-color",
"value": "hsl(\n var(--bulma-navbar-h),\n var(--bulma-navbar-s),\n var(--bulma-navbar-dropdown-border-l)\n)" "value": "hsl(\n var(--bulma-navbar-h),\n var(--bulma-navbar-s),\n var(--bulma-navbar-dropdown-border-l)\n)"
}, },
{ {
"name": "navbar-dropdown-border-style", "name": "navbar-dropdown-border-style",
"css-var": "navbar-dropdown-border-style",
"value": "solid" "value": "solid"
}, },
{ {
"name": "navbar-dropdown-border-width", "name": "navbar-dropdown-border-width",
"css-var": "navbar-dropdown-border-width",
"value": "0.125em" "value": "0.125em"
}, },
{ {
"name": "navbar-dropdown-offset", "name": "navbar-dropdown-offset",
"css-var": "navbar-dropdown-offset",
"value": "-0.25em" "value": "-0.25em"
}, },
{ {
"name": "navbar-dropdown-arrow", "name": "navbar-dropdown-arrow",
"css-var": "navbar-dropdown-arrow",
"value": "var(--bulma-link)" "value": "var(--bulma-link)"
}, },
{ {
"name": "navbar-dropdown-radius", "name": "navbar-dropdown-radius",
"css-var": "navbar-dropdown-radius",
"value": "var(--bulma-radius-large)" "value": "var(--bulma-radius-large)"
}, },
{ {
"name": "navbar-dropdown-z", "name": "navbar-dropdown-z",
"css-var": "navbar-dropdown-z",
"value": "20" "value": "20"
}, },
{ {
"name": "navbar-dropdown-boxed-radius", "name": "navbar-dropdown-boxed-radius",
"css-var": "navbar-dropdown-boxed-radius",
"value": "var(--bulma-radius-large)" "value": "var(--bulma-radius-large)"
}, },
{ {
"name": "navbar-dropdown-boxed-shadow", "name": "navbar-dropdown-boxed-shadow",
"value": "0 0.5em 0.5em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n ),\n 0 0 0 1px\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n )" "css-var": "navbar-dropdown-boxed-shadow",
"value": "0 0.5em 0.5em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n),\n0 0 0 1px hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n)"
}, },
{ {
"name": "navbar-divider-background-l", "name": "navbar-divider-background-l",
"css-var": "navbar-divider-background-l",
"value": "var(--bulma-background-l)" "value": "var(--bulma-background-l)"
}, },
{ {
"name": "navbar-divider-height", "name": "navbar-divider-height",
"css-var": "navbar-divider-height",
"value": "0.125em" "value": "0.125em"
}, },
{ {
"name": "navbar-bottom-box-shadow-size", "name": "navbar-bottom-box-shadow-size",
"css-var": "navbar-bottom-box-shadow-size",
"value": "0 -0.125em 0 0" "value": "0 -0.125em 0 0"
},
{
"name": "navbar-breakpoint",
"value": "iv.$desktop"
},
{
"name": "navbar-colors",
"value": "dv.$colors"
} }
], ],
"css-vars": [ "css-vars": [
{ {
"name": "navbar-height", "name": "navbar-height",
"css-var": "navbar-height",
"value": "3.25rem" "value": "3.25rem"
} }
] ]
} }

View File

@ -87,7 +87,7 @@
}, },
{ {
"name": "pagination-shadow-inset", "name": "pagination-shadow-inset",
"value": "inset 0 0.0625em 0.125em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n )", "value": "inset 0 0.0625em 0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n)",
"css-var": "pagination-shadow-inset" "css-var": "pagination-shadow-inset"
} }
], ],
@ -226,7 +226,7 @@
}, },
{ {
"name": "pagination-shadow-inset", "name": "pagination-shadow-inset",
"value": "inset 0 0.0625em 0.125em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n )" "value": "inset 0 0.0625em 0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n)"
}, },
{ {
"name": "pagination-selected-item-h", "name": "pagination-selected-item-h",
@ -253,4 +253,4 @@
"value": "#{$pagination-selected-item-color-l}," "value": "#{$pagination-selected-item-color-l},"
} }
] ]
} }

View File

@ -1,4 +1,9 @@
{ {
"sass-vars": [], "sass-vars": [],
"css-vars": [] "css-vars": [
} {
"name": "block-spacing",
"value": "1.5rem"
}
]
}

View File

@ -27,12 +27,12 @@
}, },
{ {
"name": "box-link-hover-shadow", "name": "box-link-hover-shadow",
"value": "0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), #{cv.getVar(\n \"scheme-invert-l\"\n )}, 0.1),\n 0 0 0 1px var(--bulma-link)", "value": "0 0.5em 1em -0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n),\n0 0 0 1px var(--bulma-link)",
"css-var": "box-link-hover-shadow" "css-var": "box-link-hover-shadow"
}, },
{ {
"name": "box-link-active-shadow", "name": "box-link-active-shadow",
"value": "inset 0 1px 2px\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n ),\n 0 0 0 1px var(--bulma-link)", "value": "inset 0 1px 2px hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n),\n0 0 0 1px var(--bulma-link)",
"css-var": "box-link-active-shadow" "css-var": "box-link-active-shadow"
} }
], ],
@ -59,11 +59,11 @@
}, },
{ {
"name": "box-link-hover-shadow", "name": "box-link-hover-shadow",
"value": "0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), #{cv.getVar(\n \"scheme-invert-l\"\n )}, 0.1),\n 0 0 0 1px var(--bulma-link)" "value": "0 0.5em 1em -0.125em hsla(\nvar(--bulma-scheme-h),\nvar(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1),\n0 0 0 1px var(--bulma-link)"
}, },
{ {
"name": "box-link-active-shadow", "name": "box-link-active-shadow",
"value": "inset 0 1px 2px\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n ),\n 0 0 0 1px var(--bulma-link)" "value": "inset 0 1px 2px hsla( var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2),\n0 0 0 1px var(--bulma-link)"
} }
] ]
} }

View File

@ -148,10 +148,6 @@
{ {
"name": "button-colors", "name": "button-colors",
"value": "dv.$colors" "value": "dv.$colors"
},
{
"name": "button-responsive-sizes",
"value": "(\n \"mobile\": (\n \"small\": calc(var(--bulma-size-small) * 0.75),\n \"normal\": calc(var(--bulma-size-small) * 0.875),\n \"medium\": var(--bulma-size-small),\n \"large\": var(--bulma-size-normal),\n ),\n \"tablet-only\": (\n \"small\": calc(var(--bulma-size-small) * 0.875),\n \"normal\": var(--bulma-size-small),\n \"medium\": var(--bulma-size-normal),\n \"large\": var(--bulma-size-medium),\n ),\n)"
} }
], ],
"css-vars": [ "css-vars": [
@ -272,4 +268,4 @@
"value": "var(--bulma-border)" "value": "var(--bulma-border)"
} }
] ]
} }

View File

@ -1,4 +1,21 @@
{ {
"sass-vars": [], "sass-vars": [],
"css-vars": [] "css-vars": [
} {
"name": "delete-dimensions",
"value": "1.25rem"
},
{
"name": "delete-background-l",
"value": "0%"
},
{
"name": "delete-background-alpha",
"value": "0.5"
},
{
"name": "delete-color",
"value": "var(--bulma-white)"
}
]
}

View File

@ -97,7 +97,7 @@
}, },
{ {
"name": "table-striped-row-even-hover-background-color", "name": "table-striped-row-even-hover-background-color",
"value": "cv.getVar(\n \"scheme-main-ter\"\n)", "value": "var(--bulma-scheme-main-ter)",
"css-var": "table-striped-row-even-hover-background-color" "css-var": "table-striped-row-even-hover-background-color"
}, },
{ {
@ -187,4 +187,4 @@
"value": "cv.getVar(\n \"scheme-main-ter\"\n)" "value": "cv.getVar(\n \"scheme-main-ter\"\n)"
} }
] ]
} }

View File

@ -36,10 +36,6 @@
"name": "file-name-max-width", "name": "file-name-max-width",
"value": "16em", "value": "16em",
"css-var": "file-name-max-width" "css-var": "file-name-max-width"
},
{
"name": "file-colors",
"value": "shared.$form-colors"
} }
], ],
"css-vars": [ "css-vars": [
@ -124,4 +120,4 @@
"value": "#{$file-active-color-l-delta}," "value": "#{$file-active-color-l-delta},"
} }
] ]
} }

View File

@ -0,0 +1,174 @@
{
"sass-vars": [
{
"name": "control-radius",
"value": "var(--bulma-radius)",
"css-var": "control-radius"
},
{
"name": "control-radius-small",
"value": "var(--bulma-radius-small)",
"css-var": "control-radius-small"
},
{
"name": "control-border-width",
"value": "1px",
"css-var": "control-border-width"
},
{
"name": "control-size",
"value": "var(--bulma-size-normal)",
"css-var": "control-size"
},
{
"name": "control-height",
"value": "2.5em",
"css-var": "control-height"
},
{
"name": "control-line-height",
"value": "1.5",
"css-var": "control-line-height"
},
{
"name": "control-padding-vertical",
"value": "calc(0.5em - 1px)",
"css-var": "control-padding-vertical"
},
{
"name": "control-padding-horizontal",
"value": "calc(0.75em - 1px)",
"css-var": "control-padding-horizontal"
},
{
"name": "control-focus-shadow-l",
"value": "50%",
"css-var": "control-focus-shadow-l"
},
{
"name": "label-color",
"css-var": "label-color",
"value": "var(--bulma-text-strong)"
},
{
"name": "label-weight",
"css-var": "label-weight",
"value": "var(--bulma-weight-semibold)"
},
{
"name": "help-size",
"css-var": "help-size",
"value": "var(--bulma-size-small)"
}
],
"css-vars": [
{
"name": "input-h",
"value": "var(--bulma-scheme-h)"
},
{
"name": "input-s",
"value": "var(--bulma-scheme-s)"
},
{
"name": "input-l",
"value": "var(--bulma-scheme-main-l)"
},
{
"name": "input-border-l",
"value": "var(--bulma-border-l)"
},
{
"name": "input-border-l-delta",
"value": "0%"
},
{
"name": "input-hover-border-l-delta",
"value": "var(--bulma-hover-border-l-delta)"
},
{
"name": "input-active-border-l-delta",
"value": "var(--bulma-active-border-l-delta)"
},
{
"name": "input-focus-h",
"value": "var(--bulma-focus-h)"
},
{
"name": "input-focus-s",
"value": "var(--bulma-focus-s)"
},
{
"name": "input-focus-l",
"value": "var(--bulma-focus-l)"
},
{
"name": "input-focus-shadow-size",
"value": "var(--bulma-focus-shadow-size)"
},
{
"name": "input-focus-shadow-alpha",
"value": "var(--bulma-focus-shadow-alpha)"
},
{
"name": "input-color-l",
"value": "var(--bulma-text-strong-l)"
},
{
"name": "input-background-l",
"value": "var(--bulma-scheme-main-l)"
},
{
"name": "input-background-l-delta",
"value": "0%"
},
{
"name": "input-height",
"value": "var(--bulma-control-height)"
},
{
"name": "input-shadow",
"value": "inset 0 0.0625em 0.125em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.05\n )"
},
{
"name": "input-placeholder-color",
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-strong-l),\n 0.3\n)"
},
{
"name": "input-disabled-color",
"value": "var(--bulma-text-weak)"
},
{
"name": "input-disabled-background-color",
"value": "var(--bulma-background)"
},
{
"name": "input-disabled-border-color",
"value": "var(--bulma-background)"
},
{
"name": "input-disabled-placeholder-color",
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-weak-l),\n 0.3\n)"
},
{
"name": "input-arrow",
"value": "var(--bulma-link)"
},
{
"name": "input-icon-color",
"value": "var(--bulma-text-light)"
},
{
"name": "input-icon-hover-color",
"value": "var(--bulma-text-weak)"
},
{
"name": "input-icon-focus-color",
"value": "var(--bulma-link)"
},
{
"name": "input-radius",
"value": "var(--bulma-radius)"
}
]
}

View File

@ -0,0 +1,249 @@
{
"sass-vars": [
{
"name": "input-h",
"value": "var(--bulma-scheme-h)",
"css-var": "input-h"
},
{
"name": "input-s",
"value": "var(--bulma-scheme-s)",
"css-var": "input-s"
},
{
"name": "input-l",
"value": "var(--bulma-scheme-main-l)",
"css-var": "input-l"
},
{
"name": "input-border-l",
"value": "var(--bulma-border-l)",
"css-var": "input-border-l"
},
{
"name": "input-border-l-delta",
"value": "0%",
"css-var": "input-border-l-delta"
},
{
"name": "input-hover-border-l-delta",
"value": "var(--bulma-hover-border-l-delta)",
"css-var": "input-hover-border-l-delta"
},
{
"name": "input-active-border-l-delta",
"value": "var(--bulma-active-border-l-delta)",
"css-var": "input-active-border-l-delta"
},
{
"name": "input-color-l",
"value": "var(--bulma-text-strong-l)",
"css-var": "input-color-l"
},
{
"name": "input-background-l",
"value": "var(--bulma-scheme-main-l)",
"css-var": "input-background-l"
},
{
"name": "input-background-l-delta",
"value": "0%",
"css-var": "input-background-l-delta"
},
{
"name": "input-height",
"value": "var(--bulma-control-height)",
"css-var": "input-height"
},
{
"name": "input-shadow",
"value": "inset 0 0.0625em 0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.05\n)",
"css-var": "input-shadow"
},
{
"name": "input-placeholder-color",
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-strong-l),\n 0.3\n)",
"css-var": "input-placeholder-color"
},
{
"name": "input-focus-h",
"value": "var(--bulma-focus-h)",
"css-var": "input-focus-h"
},
{
"name": "input-focus-s",
"value": "var(--bulma-focus-s)",
"css-var": "input-focus-s"
},
{
"name": "input-focus-l",
"value": "var(--bulma-focus-l)",
"css-var": "input-focus-l"
},
{
"name": "input-focus-shadow-size",
"value": "var(--bulma-focus-shadow-size)",
"css-var": "input-focus-shadow-size"
},
{
"name": "input-focus-shadow-alpha",
"value": "var(--bulma-focus-shadow-alpha)",
"css-var": "input-focus-shadow-alpha"
},
{
"name": "input-disabled-color",
"value": "var(--bulma-text-weak)",
"css-var": "input-disabled-color"
},
{
"name": "input-disabled-background-color",
"value": "var(--bulma-background)",
"css-var": "input-disabled-background-color"
},
{
"name": "input-disabled-border-color",
"value": "var(--bulma-background)",
"css-var": "input-disabled-border-color"
},
{
"name": "input-disabled-placeholder-color",
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-weak-l),\n 0.3\n)",
"css-var": "input-disabled-placeholder-color"
},
{
"name": "input-arrow",
"value": "var(--bulma-link)",
"css-var": "input-arrow"
},
{
"name": "input-icon-color",
"value": "var(--bulma-text-light)",
"css-var": "input-icon-color"
},
{
"name": "input-icon-hover-color",
"value": "var(--bulma-text-weak)",
"css-var": "input-icon-hover-color"
},
{
"name": "input-icon-focus-color",
"value": "var(--bulma-link)",
"css-var": "input-icon-focus-color"
},
{
"name": "input-radius",
"value": "var(--bulma-radius)",
"css-var": "input-radius"
}
],
"css-vars": [
{
"name": "input-h",
"value": "var(--bulma-scheme-h)"
},
{
"name": "input-s",
"value": "var(--bulma-scheme-s)"
},
{
"name": "input-l",
"value": "var(--bulma-scheme-main-l)"
},
{
"name": "input-border-l",
"value": "var(--bulma-border-l)"
},
{
"name": "input-border-l-delta",
"value": "0%"
},
{
"name": "input-hover-border-l-delta",
"value": "var(--bulma-hover-border-l-delta)"
},
{
"name": "input-active-border-l-delta",
"value": "var(--bulma-active-border-l-delta)"
},
{
"name": "input-focus-h",
"value": "var(--bulma-focus-h)"
},
{
"name": "input-focus-s",
"value": "var(--bulma-focus-s)"
},
{
"name": "input-focus-l",
"value": "var(--bulma-focus-l)"
},
{
"name": "input-focus-shadow-size",
"value": "var(--bulma-focus-shadow-size)"
},
{
"name": "input-focus-shadow-alpha",
"value": "var(--bulma-focus-shadow-alpha)"
},
{
"name": "input-color-l",
"value": "var(--bulma-text-strong-l)"
},
{
"name": "input-background-l",
"value": "var(--bulma-scheme-main-l)"
},
{
"name": "input-background-l-delta",
"value": "0%"
},
{
"name": "input-height",
"value": "var(--bulma-control-height)"
},
{
"name": "input-shadow",
"value": "inset 0 0.0625em 0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.05\n)"
},
{
"name": "input-placeholder-color",
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-strong-l),\n 0.3\n)"
},
{
"name": "input-disabled-color",
"value": "var(--bulma-text-weak)"
},
{
"name": "input-disabled-background-color",
"value": "var(--bulma-background)"
},
{
"name": "input-disabled-border-color",
"value": "var(--bulma-background)"
},
{
"name": "input-disabled-placeholder-color",
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-weak-l),\n 0.3\n)"
},
{
"name": "input-arrow",
"value": "var(--bulma-link)"
},
{
"name": "input-icon-color",
"value": "var(--bulma-text-light)"
},
{
"name": "input-icon-hover-color",
"value": "var(--bulma-text-weak)"
},
{
"name": "input-icon-focus-color",
"value": "var(--bulma-link)"
},
{
"name": "input-radius",
"value": "var(--bulma-radius)"
}
]
}

View File

@ -0,0 +1,41 @@
{
"sass-vars": [
{
"name": "textarea-padding",
"css-var": "textarea-padding",
"value": "var(--bulma-control-padding-horizontal)"
},
{
"name": "textarea-max-height",
"css-var": "textarea-max-height",
"value": "40em"
},
{
"name": "textarea-min-height",
"css-var": "textarea-min-height",
"value": "8em"
}
],
"css-vars": [
{
"name": "input-h",
"value": "#{cv.getVar(\"scheme-h\")},"
},
{
"name": "input-s",
"value": "#{cv.getVar(\"scheme-s\")},"
},
{
"name": "input-border-style",
"value": "solid,"
},
{
"name": "input-border-width",
"value": "1px,"
},
{
"name": "input-border-l",
"value": "#{cv.getVar(\"border-l\")},"
}
]
}

View File

@ -2,12 +2,14 @@
"sass-vars": [ "sass-vars": [
{ {
"name": "container-offset", "name": "container-offset",
"value": "2 * iv.$gap" "css-var": "container-offset",
"value": "64px"
}, },
{ {
"name": "container-max-width", "name": "container-max-width",
"value": "iv.$fullhd" "css-var": "container-max-width",
"value": "1408px"
} }
], ],
"css-vars": [] "css-vars": []
} }

View File

@ -26,8 +26,19 @@
"css-var": "hero-body-padding-large" "css-var": "hero-body-padding-large"
}, },
{ {
"name": "hero-colors", "name": "hero-gradient-h-offset",
"value": "dv.$colors" "value": "5deg",
"css-var": "hero-gradient-h-offset"
},
{
"name": "hero-gradient-s-offset",
"value": "10%",
"css-var": "hero-gradient-s-offset"
},
{
"name": "hero-gradient-l-offset",
"value": "5%",
"css-var": "hero-gradient-l-offset:"
} }
], ],
"css-vars": [ "css-vars": [
@ -52,4 +63,4 @@
"value": "18rem 6rem" "value": "18rem 6rem"
} }
] ]
} }

View File

@ -6,4 +6,4 @@
} }
], ],
"css-vars": [] "css-vars": []
} }

View File

@ -2,8 +2,14 @@
{% assign subtab = include.subtab | default: page.doc-subtab %} {% assign subtab = include.subtab | default: page.doc-subtab %}
{% assign data = include.data | default: site.data.variables[tab][subtab] %} {% assign data = include.data | default: site.data.variables[tab][subtab] %}
{% assign sass_vars = include.data | default: data["sass-vars"] %} {% assign sass_vars = include.data | default: data["sass-vars"] %}
{% assign sass_vars_size = sass_vars | size %}
{% assign css_vars = include.data | default: data["css-vars"] %} {% assign css_vars = include.data | default: data["css-vars"] %}
{% assign css_vars_size = css_vars | size %}
{% if sass_vars_size > 0 or css_vars_size > 0 %}
{% include docs/elements/anchor.html name="Sass and CSS variables" %}
{% if sass_vars_size > 0 %}
<div class="bd-vars-table block table-container"> <div class="bd-vars-table block table-container">
<table> <table>
<thead> <thead>
@ -14,7 +20,7 @@
<span>Sass Variable</span> <span>Sass Variable</span>
</div> </div>
</th> </th>
{% unless include.hide_css_vars %} {% unless include.hide_css_vars or page.meta.hide_css_vars %}
<th> <th>
<div class="icon-text"> <div class="icon-text">
<span class="icon has-text-link"><i class="fab fa-css3"></i></span> <span class="icon has-text-link"><i class="fab fa-css3"></i></span>
@ -36,7 +42,7 @@
{% unless sass_var["value"] == "dv.$colors" %} {% unless sass_var["value"] == "dv.$colors" %}
<tr> <tr>
<td class="bd-theme-sass">{% highlight sass %}${{ sass_var["name"] }}{% endhighlight %}</td> <td class="bd-theme-sass">{% highlight sass %}${{ sass_var["name"] }}{% endhighlight %}</td>
{% unless include.hide_css_vars %} {% unless include.hide_css_vars or page.meta.hide_css_vars %}
<td class="bd-theme-code">{% highlight css %}var(--bulma-{{ sass_var["css-var"] }}){% endhighlight %}</td> <td class="bd-theme-code">{% highlight css %}var(--bulma-{{ sass_var["css-var"] }}){% endhighlight %}</td>
{% endunless %} {% endunless %}
<td class="bd-theme-docs">{% highlight css %}{{ sass_var["value"] }}{% endhighlight %}</td> <td class="bd-theme-docs">{% highlight css %}{{ sass_var["value"] }}{% endhighlight %}</td>
@ -46,3 +52,35 @@
</tbody> </tbody>
</table> </table>
</div> </div>
{% elsif css_vars_size > 0 %}
<div class="bd-vars-table block table-container">
<table>
<thead>
<tr>
<th>
<div class="icon-text">
<span class="icon has-text-link"><i class="fab fa-css3"></i></span>
<span>CSS Variable</span>
</div>
</th>
<th>
<div class="icon-text">
<span class="icon has-text-success"><i class="fas fa-code"></i></span>
<span>Value</span>
</div>
</th>
</tr>
</thead>
<tbody>
{% for css_var in css_vars %}
<tr>
<td class="bd-theme-sass">{% highlight sass %}var(--bulma-{{ css_var["name"] }}){% endhighlight %}</td>
<td class="bd-theme-docs">{% highlight css %}{{ css_var["value"] }}{% endhighlight %}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endif %}

View File

@ -39,10 +39,9 @@ route: documentation
{{ content }} {{ content }}
{% endif %} {% endif %}
{% if page.meta.variables %} {% if page.meta.variables %}
{% include docs/elements/anchor.html name="Sass and CSS variables" %} {% include docs/components/variables.html %}
{% include docs/components/variables.html %} {% endif %}
{% endif %}
</div> </div>
{% include docs/components/pagination.html %} {% include docs/components/pagination.html %}

View File

@ -482,9 +482,8 @@ name="Combining" %}
</div> </div>
{% include docs/elements/snippet.html content=tabs_centered_boxed_example {% include docs/elements/snippet.html content=tabs_centered_boxed_example
horizontal=true more=true %} {% include docs/elements/snippet.html horizontal=true more=true %}
content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include {% include docs/elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
docs/elements/snippet.html content=tabs_centered_boxed_medium_example {% include docs/elements/snippet.html content=tabs_centered_boxed_medium_example
horizontal=true more=true %} {% include docs/elements/snippet.html horizontal=true more=true %}
content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} {% {% include docs/elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
include docs/components/variables.html type='component' %}

View File

@ -78,3 +78,5 @@ meta:
</div> </div>
{% include docs/elements/snippet.html content=cross_elements_example %} {% include docs/elements/snippet.html content=cross_elements_example %}
{% include docs/components/variables.html %}

View File

@ -21,6 +21,7 @@ meta:
colors: false colors: false
sizes: false sizes: false
variables: true variables: true
hide_css_vars: true
--- ---
{% capture image %} {% capture image %}
<figure class="image is-128x128"> <figure class="image is-128x128">

View File

@ -862,7 +862,3 @@ meta:
{{- scrollable_table -}} {{- scrollable_table -}}
{%- endhighlight %} {%- endhighlight %}
{{ simple_scrollable_table_example }} {{ simple_scrollable_table_example }}
{%
include docs/components/variables.html
type='element'
%}

View File

@ -450,7 +450,3 @@ meta:
</div> </div>
{% include docs/elements/snippet.html horizontal=true content=file_javascript %} {% include docs/elements/snippet.html horizontal=true content=file_javascript %}
{%
include docs/components/variables.html type='element'
variables_keys=page.variables_keys folder='elements' file='form'
%}

View File

@ -1108,14 +1108,3 @@ variables_keys:
folder='utilities' folder='utilities'
file='controls' file='controls'
%} %}
{%
include docs/components/variables.html
anchor_name='Form variables'
type='element'
variables_keys=page.variables_keys
folder='elements'
file='form'
hide_anchor=true
hide_content=true
%}

View File

@ -442,8 +442,3 @@ meta:
{%- endhighlight %} {%- endhighlight %}
</div> </div>
</div> </div>
{%
include docs/components/variables.html type='element'
variables_keys=page.variables_keys folder='elements' file='form'
%}

View File

@ -12,7 +12,7 @@ breadcrumb:
meta: meta:
colors: true colors: true
sizes: true sizes: true
variables: false variables: true
--- ---
{% capture textarea_example %} {% capture textarea_example %}
<textarea class="textarea" placeholder="e.g. Hello world"></textarea> <textarea class="textarea" placeholder="e.g. Hello world"></textarea>

View File

@ -15,6 +15,7 @@ meta:
colors: false colors: false
sizes: true sizes: true
variables: true variables: true
hide_css_vars: true
--- ---
{% capture container_example %} {% capture container_example %}
@ -310,6 +311,4 @@ maximum widths" %}
<div class="bd-example is-fullwidth">{{ container_fluid_example }}</div> <div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>
{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %} {% {% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %}
include docs/components/variables.html type='element'
data=site.data.variables.elements.container %}

View File

@ -9,6 +9,8 @@ breadcrumb:
- documentation - documentation
- layout - layout
- layout-footer - layout-footer
meta:
variables: true
--- ---
{% capture footer_example %} {% capture footer_example %}
<footer class="footer"> <footer class="footer">

View File

@ -9,6 +9,9 @@ breadcrumb:
- documentation - documentation
- layout - layout
- layout-level - layout-level
meta:
variables: true
hide_css_vars: true
--- ---
{% capture nav_example %} {% capture nav_example %}
<!-- Main container --> <!-- Main container -->

View File

@ -9,6 +9,8 @@ breadcrumb:
- documentation - documentation
- layout - layout
- layout-media - layout-media
meta:
variables: true
--- ---
{% capture media_example %} {% capture media_example %}
<article class="media"> <article class="media">

View File

@ -10,6 +10,8 @@ breadcrumb:
- documentation - documentation
- layout - layout
- layout-section - layout-section
meta:
variables: true
--- ---
{% capture section_example %} {% capture section_example %}
<section class="section"> <section class="section">

View File

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

View File

@ -13,6 +13,11 @@ $input-border-style: solid !default;
$input-border-width: cv.getVar("control-border-width") !default; $input-border-width: cv.getVar("control-border-width") !default;
$input-border-l: cv.getVar("border-l") !default; $input-border-l: cv.getVar("border-l") !default;
$input-border-l-delta: 0% !default; $input-border-l-delta: 0% !default;
$input-border-color: hsl(
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
) !default;
$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default; $input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default; $input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
$input-color-l: cv.getVar("text-strong-l") !default; $input-color-l: cv.getVar("text-strong-l") !default;
@ -70,6 +75,7 @@ $input-radius: cv.getVar("radius") !default;
"input-border-width": #{$input-border-width}, "input-border-width": #{$input-border-width},
"input-border-l": #{$input-border-l}, "input-border-l": #{$input-border-l},
"input-border-l-delta": #{$input-border-l-delta}, "input-border-l-delta": #{$input-border-l-delta},
"input-border-color": #{$input-border-color},
"input-hover-border-l-delta": #{$input-hover-border-l-delta}, "input-hover-border-l-delta": #{$input-hover-border-l-delta},
"input-active-border-l-delta": #{$input-active-border-l-delta}, "input-active-border-l-delta": #{$input-active-border-l-delta},
"input-focus-h": #{$input-focus-h}, "input-focus-h": #{$input-focus-h},
@ -107,11 +113,7 @@ $input-radius: cv.getVar("radius") !default;
)} )}
) )
); );
border-color: hsl( border-color: cv.getVar("input-border-color");
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
);
border-radius: cv.getVar("input-radius"); border-radius: cv.getVar("input-radius");
color: hsl( color: hsl(
#{cv.getVar("input-h")}, #{cv.getVar("input-h")},

View File

@ -10,9 +10,9 @@ $hero-body-padding-small: 1.5rem !default;
$hero-body-padding-medium: 9rem 4.5rem !default; $hero-body-padding-medium: 9rem 4.5rem !default;
$hero-body-padding-large: 18rem 6rem !default; $hero-body-padding-large: 18rem 6rem !default;
$hero-gradient-h-offset: 5deg; $hero-gradient-h-offset: 5deg !default;
$hero-gradient-s-offset: 10%; $hero-gradient-s-offset: 10% !default;
$hero-gradient-l-offset: 5%; $hero-gradient-l-offset: 5% !default;
$hero-colors: dv.$colors !default; $hero-colors: dv.$colors !default;
@ -25,6 +25,9 @@ $hero-colors: dv.$colors !default;
"hero-body-padding-small": #{$hero-body-padding-small}, "hero-body-padding-small": #{$hero-body-padding-small},
"hero-body-padding-medium": #{$hero-body-padding-medium}, "hero-body-padding-medium": #{$hero-body-padding-medium},
"hero-body-padding-large": #{$hero-body-padding-large}, "hero-body-padding-large": #{$hero-body-padding-large},
"hero-gradient-h-offset": #{$hero-gradient-h-offset},
"hero-gradient-s-offset": #{$hero-gradient-s-offset},
"hero-gradient-l-offset": #{$hero-gradient-l-offset},
) )
); );
} }