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 documentation of all CSS variables available

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_data/variables/components/card.json
View File

@ -37,7 +37,7 @@
},
{
"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"
},
{

4
docs/_data/variables/components/modal.json
View File

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

41
docs/_data/variables/components/navbar.json
View File

@ -2,14 +2,17 @@
"sass-vars": [
{
"name": "navbar-background-color",
"css-var": "navbar-background-color",
"value": "var(--bulma-scheme-main)"
},
{
"name": "navbar-box-shadow-size",
"css-var": "navbar-box-shadow-size",
"value": "0 0.125em 0 0"
},
{
"name": "navbar-box-shadow-color",
"css-var": "navbar-box-shadow-color",
"value": "var(--bulma-background)"
},
{
@ -19,124 +22,144 @@
},
{
"name": "navbar-padding-vertical",
"css-var": "navbar-padding-vertical",
"value": "1rem"
},
{
"name": "navbar-padding-horizontal",
"css-var": "navbar-padding-horizontal",
"value": "2rem"
},
{
"name": "navbar-z",
"css-var": "navbar-z",
"value": "30"
},
{
"name": "navbar-fixed-z",
"css-var": "navbar-fixed-z",
"value": "30"
},
{
"name": "navbar-item-img-max-height",
"css-var": "navbar-item-img-max-height",
"value": "1.75rem"
},
{
"name": "navbar-burger-color",
"css-var": "navbar-burger-color",
"value": "var(--bulma-navbar-item-color)"
},
{
"name": "navbar-tab-hover-background-color",
"css-var": "navbar-tab-hover-background-color",
"value": "transparent"
},
{
"name": "navbar-tab-hover-border-bottom-color",
"css-var": "navbar-tab-hover-border-bottom-color",
"value": "var(--bulma-link)"
},
{
"name": "navbar-tab-active-color",
"css-var": "navbar-tab-active-color",
"value": "var(--bulma-link)"
},
{
"name": "navbar-tab-active-background-color",
"css-var": "navbar-tab-active-background-color",
"value": "transparent"
},
{
"name": "navbar-tab-active-border-bottom-color",
"css-var": "navbar-tab-active-border-bottom-color",
"value": "var(--bulma-link)"
},
{
"name": "navbar-tab-active-border-bottom-style",
"css-var": "navbar-tab-active-border-bottom-style",
"value": "solid"
},
{
"name": "navbar-tab-active-border-bottom-width",
"css-var": "navbar-tab-active-border-bottom-width",
"value": "0.1875em"
},
{
"name": "navbar-dropdown-background-color",
"css-var": "navbar-dropdown-background-color",
"value": "var(--bulma-scheme-main)"
},
{
"name": "navbar-dropdown-border-l",
"css-var": "navbar-dropdown-border-l",
"value": "var(--bulma-border-l)"
},
{
"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)"
},
{
"name": "navbar-dropdown-border-style",
"css-var": "navbar-dropdown-border-style",
"value": "solid"
},
{
"name": "navbar-dropdown-border-width",
"css-var": "navbar-dropdown-border-width",
"value": "0.125em"
},
{
"name": "navbar-dropdown-offset",
"css-var": "navbar-dropdown-offset",
"value": "-0.25em"
},
{
"name": "navbar-dropdown-arrow",
"css-var": "navbar-dropdown-arrow",
"value": "var(--bulma-link)"
},
{
"name": "navbar-dropdown-radius",
"css-var": "navbar-dropdown-radius",
"value": "var(--bulma-radius-large)"
},
{
"name": "navbar-dropdown-z",
"css-var": "navbar-dropdown-z",
"value": "20"
},
{
"name": "navbar-dropdown-boxed-radius",
"css-var": "navbar-dropdown-boxed-radius",
"value": "var(--bulma-radius-large)"
},
{
"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",
"css-var": "navbar-divider-background-l",
"value": "var(--bulma-background-l)"
},
{
"name": "navbar-divider-height",
"css-var": "navbar-divider-height",
"value": "0.125em"
},
{
"name": "navbar-bottom-box-shadow-size",
"css-var": "navbar-bottom-box-shadow-size",
"value": "0 -0.125em 0 0"
},
{
"name": "navbar-breakpoint",
"value": "iv.$desktop"
},
{
"name": "navbar-colors",
"value": "dv.$colors"
}
],
"css-vars": [
{
"name": "navbar-height",
"css-var": "navbar-height",
"value": "3.25rem"
}
]

4
docs/_data/variables/components/pagination.json
View File

@ -87,7 +87,7 @@
},
{
"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"
}
],
@ -226,7 +226,7 @@
},
{
"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",

7
docs/_data/variables/elements/block.json
View File

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

8
docs/_data/variables/elements/box.json
View File

@ -27,12 +27,12 @@
},
{
"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"
},
{
"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"
}
],
@ -59,11 +59,11 @@
},
{
"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",
"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)"
}
]
}

4
docs/_data/variables/elements/button.json
View File

@ -148,10 +148,6 @@
{
"name": "button-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": [

19
docs/_data/variables/elements/delete.json
View File

@ -1,4 +1,21 @@
{
"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)"
}
]
}

2
docs/_data/variables/elements/table.json
View File

@ -97,7 +97,7 @@
},
{
"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"
},
{

4
docs/_data/variables/form/file.json
View File

@ -36,10 +36,6 @@
"name": "file-name-max-width",
"value": "16em",
"css-var": "file-name-max-width"
},
{
"name": "file-colors",
"value": "shared.$form-colors"
}
],
"css-vars": [

174
docs/_data/variables/form/general.json Normal file
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)"
}
]
}

249
docs/_data/variables/form/input.json Normal file
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)"
}
]
}

41
docs/_data/variables/form/textarea.json Normal file
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\")},"
}
]
}

6
docs/_data/variables/layout/container.json
View File

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

15
docs/_data/variables/layout/hero.json
View File

@ -26,8 +26,19 @@
"css-var": "hero-body-padding-large"
},
{
"name": "hero-colors",
"value": "dv.$colors"
"name": "hero-gradient-h-offset",
"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": [

0
docs/_data/variables/layout/media.json → docs/_data/variables/layout/media-object.json
View File

42
docs/_includes/docs/components/variables.html
View File

@ -2,8 +2,14 @@
{% assign subtab = include.subtab | default: page.doc-subtab %}
{% assign data = include.data | default: site.data.variables[tab][subtab] %}
{% 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_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">
<table>
<thead>
@ -14,7 +20,7 @@
<span>Sass Variable</span>
</div>
</th>
{% unless include.hide_css_vars %}
{% unless include.hide_css_vars or page.meta.hide_css_vars %}
<th>
<div class="icon-text">
<span class="icon has-text-link"><i class="fab fa-css3"></i></span>
@ -36,7 +42,7 @@
{% unless sass_var["value"] == "dv.$colors" %}
<tr>
<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>
{% endunless %}
<td class="bd-theme-docs">{% highlight css %}{{ sass_var["value"] }}{% endhighlight %}</td>
@ -46,3 +52,35 @@
</tbody>
</table>
</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 %}

1
docs/_layouts/docs.html
View File

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

11
docs/documentation/components/tabs.html
View File

@ -482,9 +482,8 @@ name="Combining" %}
</div>
{% include docs/elements/snippet.html content=tabs_centered_boxed_example
horizontal=true more=true %} {% include docs/elements/snippet.html
content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include
docs/elements/snippet.html content=tabs_centered_boxed_medium_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' %}
horizontal=true more=true %}
{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
{% include docs/elements/snippet.html content=tabs_centered_boxed_medium_example
horizontal=true more=true %}
{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}

2
docs/documentation/elements/delete.html
View File

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

1
docs/documentation/elements/image.html
View File

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

4
docs/documentation/elements/table.html
View File

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

4
docs/documentation/form/file.html
View File

@ -450,7 +450,3 @@ meta:
</div>
{% 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'
%}

11
docs/documentation/form/general.html
View File

@ -1108,14 +1108,3 @@ variables_keys:
folder='utilities'
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
%}

5
docs/documentation/form/input.html
View File

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

2
docs/documentation/form/textarea.html
View File

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

5
docs/documentation/layout/container.html
View File

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

2
docs/documentation/layout/footer.html
View File

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

3
docs/documentation/layout/level.html
View File

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

2
docs/documentation/layout/media-object.html
View File

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

2
docs/documentation/layout/section.html
View File

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

2
package.json
View File

@ -48,7 +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",
"test": "sass --style=expanded --source-map --watch test.scss test.css",
"start": "npm run build-bulma -- --watch"
},
"files": [

12
sass/form/shared.scss
View File

@ -13,6 +13,11 @@ $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-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-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !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-l": #{$input-border-l},
"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-active-border-l-delta": #{$input-active-border-l-delta},
"input-focus-h": #{$input-focus-h},
@ -107,11 +113,7 @@ $input-radius: cv.getVar("radius") !default;
)}
)
);
border-color: hsl(
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
);
border-color: cv.getVar("input-border-color");
border-radius: cv.getVar("input-radius");
color: hsl(
#{cv.getVar("input-h")},

9
sass/layout/hero.scss
View File

@ -10,9 +10,9 @@ $hero-body-padding-small: 1.5rem !default;
$hero-body-padding-medium: 9rem 4.5rem !default;
$hero-body-padding-large: 18rem 6rem !default;
$hero-gradient-h-offset: 5deg;
$hero-gradient-s-offset: 10%;
$hero-gradient-l-offset: 5%;
$hero-gradient-h-offset: 5deg !default;
$hero-gradient-s-offset: 10% !default;
$hero-gradient-l-offset: 5% !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-medium": #{$hero-body-padding-medium},
"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},
)
);
}