mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Docs/variables data (#1314)
* Replace variables.json with colors.json and update related files accordingly * Add variables data files * Update variables include template and all related files to use new variables data * Fix mobile breakpoint id typo in responsivness docs page * Fix Liquid syntax error in made-with-bulma docs page * Update bulma sass files count in modular docs page * Use breakpoints data in responsiveness helpers docs page * Use breakpoints and variables data in typography helpers docs page * Add missing page titles in docs pages front matter
This commit is contained in:
bstashio
Jeremy Thomas
parent
e4fd1b7579
commit
1523ce8527
152
docs/_data/colors.json
Normal file
152
docs/_data/colors.json
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
{
|
||||||
|
"initial": [
|
||||||
|
{
|
||||||
|
"id":"black",
|
||||||
|
"name":"Black",
|
||||||
|
"value": "hsl(0, 0%, 4%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"black-bis",
|
||||||
|
"name":"Black bis",
|
||||||
|
"value": "hsl(0, 0%, 7%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"black-ter",
|
||||||
|
"name":"Black ter",
|
||||||
|
"value": "hsl(0, 0%, 14%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"grey-darker",
|
||||||
|
"name":"Grey darker",
|
||||||
|
"value": "hsl(0, 0%, 21%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"grey-dark",
|
||||||
|
"name":"Grey dark",
|
||||||
|
"value": "hsl(0, 0%, 29%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"grey",
|
||||||
|
"name":"Grey",
|
||||||
|
"value": "hsl(0, 0%, 48%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"grey-light",
|
||||||
|
"name":"Grey light",
|
||||||
|
"value": "hsl(0, 0%, 71%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"grey-lighter",
|
||||||
|
"name":"Grey lighter",
|
||||||
|
"value": "hsl(0, 0%, 86%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"white-ter",
|
||||||
|
"name":"White ter",
|
||||||
|
"value": "hsl(0, 0%, 96%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"white-bis",
|
||||||
|
"name":"White bis",
|
||||||
|
"value": "hsl(0, 0%, 98%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"white",
|
||||||
|
"name":"White",
|
||||||
|
"value": "hsl(0, 0%, 100%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"orange",
|
||||||
|
"name":"Orange",
|
||||||
|
"value": "hsl(14, 100%, 53%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"yellow",
|
||||||
|
"name":"Yellow",
|
||||||
|
"value": "hsl(48, 100%, 67%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"green",
|
||||||
|
"name":"Green",
|
||||||
|
"value": "hsl(141, 71%, 48%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"turquoise",
|
||||||
|
"name":"Turquoise",
|
||||||
|
"value": "hsl(171, 100%, 41%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"cyan",
|
||||||
|
"name":"Cyan",
|
||||||
|
"value": "hsl(204, 86%, 53%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"blue",
|
||||||
|
"name":"Blue",
|
||||||
|
"value": "hsl(217, 71%, 53%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"purple",
|
||||||
|
"name":"Purple",
|
||||||
|
"value": "hsl(271, 100%, 71%)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"red",
|
||||||
|
"name":"red",
|
||||||
|
"value": "hsl(348, 100%, 61%)"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"derived": [
|
||||||
|
{
|
||||||
|
"id": "white",
|
||||||
|
"valueId": "white",
|
||||||
|
"invertId": "black"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "black",
|
||||||
|
"valueId": "black",
|
||||||
|
"invertId": "white"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "light",
|
||||||
|
"valueId": "white-ter",
|
||||||
|
"invertId": "grey-darker"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "dark",
|
||||||
|
"valueId": "grey-darker",
|
||||||
|
"invertId": "white-ter"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "primary",
|
||||||
|
"valueId": "turquoise",
|
||||||
|
"invertValue": "#fff"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "link",
|
||||||
|
"valueId": "blue",
|
||||||
|
"invertValue": "#fff"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "info",
|
||||||
|
"valueId": "cyan",
|
||||||
|
"invertValue": "#fff"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "success",
|
||||||
|
"valueId": "green",
|
||||||
|
"invertValue": "#fff"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "warning",
|
||||||
|
"valueId": "yellow",
|
||||||
|
"invertValue": "rgba(0, 0, 0, 0.7)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "danger",
|
||||||
|
"valueId": "red",
|
||||||
|
"invertValue": "#fff"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"justColors": ["primary", "link", "info", "success", "warning", "danger"]
|
||||||
|
}
|
||||||
@ -1,156 +0,0 @@
|
|||||||
{
|
|
||||||
"initial": {
|
|
||||||
"colors": [
|
|
||||||
{
|
|
||||||
"id":"black",
|
|
||||||
"name":"Black",
|
|
||||||
"value": "hsl(0, 0%, 4%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"black-bis",
|
|
||||||
"name":"Black bis",
|
|
||||||
"value": "hsl(0, 0%, 7%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"black-ter",
|
|
||||||
"name":"Black ter",
|
|
||||||
"value": "hsl(0, 0%, 14%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"grey-darker",
|
|
||||||
"name":"Grey darker",
|
|
||||||
"value": "hsl(0, 0%, 21%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"grey-dark",
|
|
||||||
"name":"Grey dark",
|
|
||||||
"value": "hsl(0, 0%, 29%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"grey",
|
|
||||||
"name":"Grey",
|
|
||||||
"value": "hsl(0, 0%, 48%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"grey-light",
|
|
||||||
"name":"Grey light",
|
|
||||||
"value": "hsl(0, 0%, 71%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"grey-lighter",
|
|
||||||
"name":"Grey lighter",
|
|
||||||
"value": "hsl(0, 0%, 86%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"white-ter",
|
|
||||||
"name":"White ter",
|
|
||||||
"value": "hsl(0, 0%, 96%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"white-bis",
|
|
||||||
"name":"White bis",
|
|
||||||
"value": "hsl(0, 0%, 98%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"white",
|
|
||||||
"name":"White",
|
|
||||||
"value": "hsl(0, 0%, 100%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"orange",
|
|
||||||
"name":"Orange",
|
|
||||||
"value": "hsl(14, 100%, 53%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"yellow",
|
|
||||||
"name":"Yellow",
|
|
||||||
"value": "hsl(48, 100%, 67%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"green",
|
|
||||||
"name":"Green",
|
|
||||||
"value": "hsl(141, 71%, 48%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"turquoise",
|
|
||||||
"name":"Turquoise",
|
|
||||||
"value": "hsl(171, 100%, 41%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"cyan",
|
|
||||||
"name":"Cyan",
|
|
||||||
"value": "hsl(204, 86%, 53%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"blue",
|
|
||||||
"name":"Blue",
|
|
||||||
"value": "hsl(217, 71%, 53%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"purple",
|
|
||||||
"name":"Purple",
|
|
||||||
"value": "hsl(271, 100%, 71%)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"red",
|
|
||||||
"name":"red",
|
|
||||||
"value": "hsl(348, 100%, 61%)"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
},
|
|
||||||
"derived": {
|
|
||||||
"colors": [
|
|
||||||
{
|
|
||||||
"id": "white",
|
|
||||||
"valueId": "white",
|
|
||||||
"invertId": "black"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "black",
|
|
||||||
"valueId": "black",
|
|
||||||
"invertId": "white"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "light",
|
|
||||||
"valueId": "white-ter",
|
|
||||||
"invertId": "grey-darker"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "dark",
|
|
||||||
"valueId": "grey-darker",
|
|
||||||
"invertId": "white-ter"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "primary",
|
|
||||||
"valueId": "turquoise",
|
|
||||||
"invertValue": "#fff"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "link",
|
|
||||||
"valueId": "blue",
|
|
||||||
"invertValue": "#fff"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "info",
|
|
||||||
"valueId": "cyan",
|
|
||||||
"invertValue": "#fff"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "success",
|
|
||||||
"valueId": "green",
|
|
||||||
"invertValue": "#fff"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "warning",
|
|
||||||
"valueId": "yellow",
|
|
||||||
"invertValue": "rgba(0, 0, 0, 0.7)"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id": "danger",
|
|
||||||
"valueId": "red",
|
|
||||||
"invertValue": "#fff"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"justColors": ["primary", "link", "info", "success", "warning", "danger"]
|
|
||||||
}
|
|
||||||
90
docs/_data/variables/base/generic.json
Normal file
90
docs/_data/variables/base/generic.json
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "base",
|
||||||
|
"file_name": "generic",
|
||||||
|
"file_relative_path": "base/generic.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 19,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass#L1,L19",
|
||||||
|
"vars": {
|
||||||
|
"body-background-color": {
|
||||||
|
"id": "body-background-color",
|
||||||
|
"name": "$body-background-color",
|
||||||
|
"value": "#fff"
|
||||||
|
},
|
||||||
|
"body-size": {
|
||||||
|
"id": "body-size",
|
||||||
|
"name": "$body-size",
|
||||||
|
"value": "16px"
|
||||||
|
},
|
||||||
|
"body-rendering": {
|
||||||
|
"id": "body-rendering",
|
||||||
|
"name": "$body-rendering",
|
||||||
|
"value": "optimizeLegibility"
|
||||||
|
},
|
||||||
|
"body-family": {
|
||||||
|
"id": "body-family",
|
||||||
|
"name": "$body-family",
|
||||||
|
"value": "$family-primary"
|
||||||
|
},
|
||||||
|
"body-color": {
|
||||||
|
"id": "body-color",
|
||||||
|
"name": "$body-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"body-weight": {
|
||||||
|
"id": "body-weight",
|
||||||
|
"name": "$body-weight",
|
||||||
|
"value": "$weight-normal"
|
||||||
|
},
|
||||||
|
"body-line-height": {
|
||||||
|
"id": "body-line-height",
|
||||||
|
"name": "$body-line-height",
|
||||||
|
"value": "1.5"
|
||||||
|
},
|
||||||
|
"code-family": {
|
||||||
|
"id": "code-family",
|
||||||
|
"name": "$code-family",
|
||||||
|
"value": "$family-code"
|
||||||
|
},
|
||||||
|
"code-padding": {
|
||||||
|
"id": "code-padding",
|
||||||
|
"name": "$code-padding",
|
||||||
|
"value": "0.25em 0.5em 0.25em"
|
||||||
|
},
|
||||||
|
"code-weight": {
|
||||||
|
"id": "code-weight",
|
||||||
|
"name": "$code-weight",
|
||||||
|
"value": "normal"
|
||||||
|
},
|
||||||
|
"code-size": {
|
||||||
|
"id": "code-size",
|
||||||
|
"name": "$code-size",
|
||||||
|
"value": "0.875em"
|
||||||
|
},
|
||||||
|
"hr-background-color": {
|
||||||
|
"id": "hr-background-color",
|
||||||
|
"name": "$hr-background-color",
|
||||||
|
"value": "$border"
|
||||||
|
},
|
||||||
|
"hr-height": {
|
||||||
|
"id": "hr-height",
|
||||||
|
"name": "$hr-height",
|
||||||
|
"value": "1px"
|
||||||
|
},
|
||||||
|
"hr-margin": {
|
||||||
|
"id": "hr-margin",
|
||||||
|
"name": "$hr-margin",
|
||||||
|
"value": "1.5rem 0"
|
||||||
|
},
|
||||||
|
"strong-color": {
|
||||||
|
"id": "strong-color",
|
||||||
|
"name": "$strong-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"strong-weight": {
|
||||||
|
"id": "strong-weight",
|
||||||
|
"name": "$strong-weight",
|
||||||
|
"value": "$weight-bold"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
30
docs/_data/variables/components/breadcrumb.json
Normal file
30
docs/_data/variables/components/breadcrumb.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "breadcrumb",
|
||||||
|
"file_relative_path": "components/breadcrumb.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 5,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/breadcrumb.sass#L1,L5",
|
||||||
|
"vars": {
|
||||||
|
"breadcrumb-item-color": {
|
||||||
|
"id": "breadcrumb-item-color",
|
||||||
|
"name": "$breadcrumb-item-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"breadcrumb-item-hover-color": {
|
||||||
|
"id": "breadcrumb-item-hover-color",
|
||||||
|
"name": "$breadcrumb-item-hover-color",
|
||||||
|
"value": "$link-hover"
|
||||||
|
},
|
||||||
|
"breadcrumb-item-active-color": {
|
||||||
|
"id": "breadcrumb-item-active-color",
|
||||||
|
"name": "$breadcrumb-item-active-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"breadcrumb-item-separator-color": {
|
||||||
|
"id": "breadcrumb-item-separator-color",
|
||||||
|
"name": "$breadcrumb-item-separator-color",
|
||||||
|
"value": "$text"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
45
docs/_data/variables/components/card.json
Normal file
45
docs/_data/variables/components/card.json
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "card",
|
||||||
|
"file_relative_path": "components/card.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 9,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/card.sass#L1,L9",
|
||||||
|
"vars": {
|
||||||
|
"card-color": {
|
||||||
|
"id": "card-color",
|
||||||
|
"name": "$card-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"card-background-color": {
|
||||||
|
"id": "card-background-color",
|
||||||
|
"name": "$card-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"card-shadow": {
|
||||||
|
"id": "card-shadow",
|
||||||
|
"name": "$card-shadow",
|
||||||
|
"value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
|
||||||
|
},
|
||||||
|
"card-header-color": {
|
||||||
|
"id": "card-header-color",
|
||||||
|
"name": "$card-header-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"card-header-shadow": {
|
||||||
|
"id": "card-header-shadow",
|
||||||
|
"name": "$card-header-shadow",
|
||||||
|
"value": "0 1px 2px rgba($black, 0.1)"
|
||||||
|
},
|
||||||
|
"card-header-weight": {
|
||||||
|
"id": "card-header-weight",
|
||||||
|
"name": "$card-header-weight",
|
||||||
|
"value": "$weight-bold"
|
||||||
|
},
|
||||||
|
"card-footer-border-top": {
|
||||||
|
"id": "card-footer-border-top",
|
||||||
|
"name": "$card-footer-border-top",
|
||||||
|
"value": "1px solid $border"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
70
docs/_data/variables/components/dropdown.json
Normal file
70
docs/_data/variables/components/dropdown.json
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "dropdown",
|
||||||
|
"file_relative_path": "components/dropdown.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 14,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/dropdown.sass#L1,L14",
|
||||||
|
"vars": {
|
||||||
|
"dropdown-content-background-color": {
|
||||||
|
"id": "dropdown-content-background-color",
|
||||||
|
"name": "$dropdown-content-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"dropdown-content-arrow": {
|
||||||
|
"id": "dropdown-content-arrow",
|
||||||
|
"name": "$dropdown-content-arrow",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"dropdown-content-offset": {
|
||||||
|
"id": "dropdown-content-offset",
|
||||||
|
"name": "$dropdown-content-offset",
|
||||||
|
"value": "4px"
|
||||||
|
},
|
||||||
|
"dropdown-content-radius": {
|
||||||
|
"id": "dropdown-content-radius",
|
||||||
|
"name": "$dropdown-content-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"dropdown-content-shadow": {
|
||||||
|
"id": "dropdown-content-shadow",
|
||||||
|
"name": "$dropdown-content-shadow",
|
||||||
|
"value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
|
||||||
|
},
|
||||||
|
"dropdown-content-z": {
|
||||||
|
"id": "dropdown-content-z",
|
||||||
|
"name": "$dropdown-content-z",
|
||||||
|
"value": "20"
|
||||||
|
},
|
||||||
|
"dropdown-item-color": {
|
||||||
|
"id": "dropdown-item-color",
|
||||||
|
"name": "$dropdown-item-color",
|
||||||
|
"value": "$grey-dark"
|
||||||
|
},
|
||||||
|
"dropdown-item-hover-color": {
|
||||||
|
"id": "dropdown-item-hover-color",
|
||||||
|
"name": "$dropdown-item-hover-color",
|
||||||
|
"value": "$black"
|
||||||
|
},
|
||||||
|
"dropdown-item-hover-background-color": {
|
||||||
|
"id": "dropdown-item-hover-background-color",
|
||||||
|
"name": "$dropdown-item-hover-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"dropdown-item-active-color": {
|
||||||
|
"id": "dropdown-item-active-color",
|
||||||
|
"name": "$dropdown-item-active-color",
|
||||||
|
"value": "$link-invert"
|
||||||
|
},
|
||||||
|
"dropdown-item-active-background-color": {
|
||||||
|
"id": "dropdown-item-active-background-color",
|
||||||
|
"name": "$dropdown-item-active-background-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"dropdown-divider-background-color": {
|
||||||
|
"id": "dropdown-divider-background-color",
|
||||||
|
"name": "$dropdown-divider-background-color",
|
||||||
|
"value": "$border"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
50
docs/_data/variables/components/menu.json
Normal file
50
docs/_data/variables/components/menu.json
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "menu",
|
||||||
|
"file_relative_path": "components/menu.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 10,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/menu.sass#L1,L10",
|
||||||
|
"vars": {
|
||||||
|
"menu-item-color": {
|
||||||
|
"id": "menu-item-color",
|
||||||
|
"name": "$menu-item-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"menu-item-radius": {
|
||||||
|
"id": "menu-item-radius",
|
||||||
|
"name": "$menu-item-radius",
|
||||||
|
"value": "$radius-small"
|
||||||
|
},
|
||||||
|
"menu-item-hover-color": {
|
||||||
|
"id": "menu-item-hover-color",
|
||||||
|
"name": "$menu-item-hover-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"menu-item-hover-background-color": {
|
||||||
|
"id": "menu-item-hover-background-color",
|
||||||
|
"name": "$menu-item-hover-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"menu-item-active-color": {
|
||||||
|
"id": "menu-item-active-color",
|
||||||
|
"name": "$menu-item-active-color",
|
||||||
|
"value": "$link-invert"
|
||||||
|
},
|
||||||
|
"menu-item-active-background-color": {
|
||||||
|
"id": "menu-item-active-background-color",
|
||||||
|
"name": "$menu-item-active-background-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"menu-list-border-left": {
|
||||||
|
"id": "menu-list-border-left",
|
||||||
|
"name": "$menu-list-border-left",
|
||||||
|
"value": "1px solid $border"
|
||||||
|
},
|
||||||
|
"menu-label-color": {
|
||||||
|
"id": "menu-label-color",
|
||||||
|
"name": "$menu-label-color",
|
||||||
|
"value": "$text-light"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
70
docs/_data/variables/components/message.json
Normal file
70
docs/_data/variables/components/message.json
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "message",
|
||||||
|
"file_relative_path": "components/message.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 15,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/message.sass#L1,L15",
|
||||||
|
"vars": {
|
||||||
|
"message-background-color": {
|
||||||
|
"id": "message-background-color",
|
||||||
|
"name": "$message-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"message-radius": {
|
||||||
|
"id": "message-radius",
|
||||||
|
"name": "$message-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"message-header-background-color": {
|
||||||
|
"id": "message-header-background-color",
|
||||||
|
"name": "$message-header-background-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"message-header-color": {
|
||||||
|
"id": "message-header-color",
|
||||||
|
"name": "$message-header-color",
|
||||||
|
"value": "$text-invert"
|
||||||
|
},
|
||||||
|
"message-header-padding": {
|
||||||
|
"id": "message-header-padding",
|
||||||
|
"name": "$message-header-padding",
|
||||||
|
"value": "0.5em 0.75em"
|
||||||
|
},
|
||||||
|
"message-header-radius": {
|
||||||
|
"id": "message-header-radius",
|
||||||
|
"name": "$message-header-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"message-body-border": {
|
||||||
|
"id": "message-body-border",
|
||||||
|
"name": "$message-body-border",
|
||||||
|
"value": "1px solid $border"
|
||||||
|
},
|
||||||
|
"message-body-color": {
|
||||||
|
"id": "message-body-color",
|
||||||
|
"name": "$message-body-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"message-body-padding": {
|
||||||
|
"id": "message-body-padding",
|
||||||
|
"name": "$message-body-padding",
|
||||||
|
"value": "1em 1.25em"
|
||||||
|
},
|
||||||
|
"message-body-radius": {
|
||||||
|
"id": "message-body-radius",
|
||||||
|
"name": "$message-body-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"message-body-pre-background-color": {
|
||||||
|
"id": "message-body-pre-background-color",
|
||||||
|
"name": "$message-body-pre-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"message-body-pre-code-background-color": {
|
||||||
|
"id": "message-body-pre-code-background-color",
|
||||||
|
"name": "$message-body-pre-code-background-color",
|
||||||
|
"value": "transparent"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
115
docs/_data/variables/components/modal.json
Normal file
115
docs/_data/variables/components/modal.json
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "modal",
|
||||||
|
"file_relative_path": "components/modal.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 29,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/modal.sass#L1,L29",
|
||||||
|
"vars": {
|
||||||
|
"modal-z": {
|
||||||
|
"id": "modal-z",
|
||||||
|
"name": "$modal-z",
|
||||||
|
"value": "20"
|
||||||
|
},
|
||||||
|
"modal-background-background-color": {
|
||||||
|
"id": "modal-background-background-color",
|
||||||
|
"name": "$modal-background-background-color",
|
||||||
|
"value": "rgba($black, 0.86)"
|
||||||
|
},
|
||||||
|
"modal-content-width": {
|
||||||
|
"id": "modal-content-width",
|
||||||
|
"name": "$modal-content-width",
|
||||||
|
"value": "640px"
|
||||||
|
},
|
||||||
|
"modal-content-margin-mobile": {
|
||||||
|
"id": "modal-content-margin-mobile",
|
||||||
|
"name": "$modal-content-margin-mobile",
|
||||||
|
"value": "20px"
|
||||||
|
},
|
||||||
|
"modal-content-spacing-mobile": {
|
||||||
|
"id": "modal-content-spacing-mobile",
|
||||||
|
"name": "$modal-content-spacing-mobile",
|
||||||
|
"value": "160px"
|
||||||
|
},
|
||||||
|
"modal-content-spacing-tablet": {
|
||||||
|
"id": "modal-content-spacing-tablet",
|
||||||
|
"name": "$modal-content-spacing-tablet",
|
||||||
|
"value": "40px"
|
||||||
|
},
|
||||||
|
"modal-close-dimensions": {
|
||||||
|
"id": "modal-close-dimensions",
|
||||||
|
"name": "$modal-close-dimensions",
|
||||||
|
"value": "40px"
|
||||||
|
},
|
||||||
|
"modal-close-right": {
|
||||||
|
"id": "modal-close-right",
|
||||||
|
"name": "$modal-close-right",
|
||||||
|
"value": "20px"
|
||||||
|
},
|
||||||
|
"modal-close-top": {
|
||||||
|
"id": "modal-close-top",
|
||||||
|
"name": "$modal-close-top",
|
||||||
|
"value": "20px"
|
||||||
|
},
|
||||||
|
"modal-card-spacing": {
|
||||||
|
"id": "modal-card-spacing",
|
||||||
|
"name": "$modal-card-spacing",
|
||||||
|
"value": "40px"
|
||||||
|
},
|
||||||
|
"modal-card-head-background-color": {
|
||||||
|
"id": "modal-card-head-background-color",
|
||||||
|
"name": "$modal-card-head-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"modal-card-head-border-bottom": {
|
||||||
|
"id": "modal-card-head-border-bottom",
|
||||||
|
"name": "$modal-card-head-border-bottom",
|
||||||
|
"value": "1px solid $border"
|
||||||
|
},
|
||||||
|
"modal-card-head-padding": {
|
||||||
|
"id": "modal-card-head-padding",
|
||||||
|
"name": "$modal-card-head-padding",
|
||||||
|
"value": "20px"
|
||||||
|
},
|
||||||
|
"modal-card-head-radius": {
|
||||||
|
"id": "modal-card-head-radius",
|
||||||
|
"name": "$modal-card-head-radius",
|
||||||
|
"value": "$radius-large"
|
||||||
|
},
|
||||||
|
"modal-card-title-color": {
|
||||||
|
"id": "modal-card-title-color",
|
||||||
|
"name": "$modal-card-title-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"modal-card-title-line-height": {
|
||||||
|
"id": "modal-card-title-line-height",
|
||||||
|
"name": "$modal-card-title-line-height",
|
||||||
|
"value": "1"
|
||||||
|
},
|
||||||
|
"modal-card-title-size": {
|
||||||
|
"id": "modal-card-title-size",
|
||||||
|
"name": "$modal-card-title-size",
|
||||||
|
"value": "$size-4"
|
||||||
|
},
|
||||||
|
"modal-card-foot-radius": {
|
||||||
|
"id": "modal-card-foot-radius",
|
||||||
|
"name": "$modal-card-foot-radius",
|
||||||
|
"value": "$radius-large"
|
||||||
|
},
|
||||||
|
"modal-card-foot-border-top": {
|
||||||
|
"id": "modal-card-foot-border-top",
|
||||||
|
"name": "$modal-card-foot-border-top",
|
||||||
|
"value": "1px solid $border"
|
||||||
|
},
|
||||||
|
"modal-card-body-background-color": {
|
||||||
|
"id": "modal-card-body-background-color",
|
||||||
|
"name": "$modal-card-body-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"modal-card-body-padding": {
|
||||||
|
"id": "modal-card-body-padding",
|
||||||
|
"name": "$modal-card-body-padding",
|
||||||
|
"value": "20px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
150
docs/_data/variables/components/navbar.json
Normal file
150
docs/_data/variables/components/navbar.json
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "navbar",
|
||||||
|
"file_relative_path": "components/navbar.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 34,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/navbar.sass#L1,L34",
|
||||||
|
"vars": {
|
||||||
|
"navbar-background-color": {
|
||||||
|
"id": "navbar-background-color",
|
||||||
|
"name": "$navbar-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"navbar-height": {
|
||||||
|
"id": "navbar-height",
|
||||||
|
"name": "$navbar-height",
|
||||||
|
"value": "3.25rem"
|
||||||
|
},
|
||||||
|
"navbar-item-color": {
|
||||||
|
"id": "navbar-item-color",
|
||||||
|
"name": "$navbar-item-color",
|
||||||
|
"value": "$grey-dark"
|
||||||
|
},
|
||||||
|
"navbar-item-hover-color": {
|
||||||
|
"id": "navbar-item-hover-color",
|
||||||
|
"name": "$navbar-item-hover-color",
|
||||||
|
"value": "$black"
|
||||||
|
},
|
||||||
|
"navbar-item-hover-background-color": {
|
||||||
|
"id": "navbar-item-hover-background-color",
|
||||||
|
"name": "$navbar-item-hover-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"navbar-item-active-color": {
|
||||||
|
"id": "navbar-item-active-color",
|
||||||
|
"name": "$navbar-item-active-color",
|
||||||
|
"value": "$black"
|
||||||
|
},
|
||||||
|
"navbar-item-active-background-color": {
|
||||||
|
"id": "navbar-item-active-background-color",
|
||||||
|
"name": "$navbar-item-active-background-color",
|
||||||
|
"value": "transparent"
|
||||||
|
},
|
||||||
|
"navbar-item-img-max-height": {
|
||||||
|
"id": "navbar-item-img-max-height",
|
||||||
|
"name": "$navbar-item-img-max-height",
|
||||||
|
"value": "1.75rem"
|
||||||
|
},
|
||||||
|
"navbar-tab-hover-background-color": {
|
||||||
|
"id": "navbar-tab-hover-background-color",
|
||||||
|
"name": "$navbar-tab-hover-background-color",
|
||||||
|
"value": "transparent"
|
||||||
|
},
|
||||||
|
"navbar-tab-hover-border-bottom-color": {
|
||||||
|
"id": "navbar-tab-hover-border-bottom-color",
|
||||||
|
"name": "$navbar-tab-hover-border-bottom-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"navbar-tab-active-color": {
|
||||||
|
"id": "navbar-tab-active-color",
|
||||||
|
"name": "$navbar-tab-active-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"navbar-tab-active-background-color": {
|
||||||
|
"id": "navbar-tab-active-background-color",
|
||||||
|
"name": "$navbar-tab-active-background-color",
|
||||||
|
"value": "transparent"
|
||||||
|
},
|
||||||
|
"navbar-tab-active-border-bottom-color": {
|
||||||
|
"id": "navbar-tab-active-border-bottom-color",
|
||||||
|
"name": "$navbar-tab-active-border-bottom-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"navbar-tab-active-border-bottom-style": {
|
||||||
|
"id": "navbar-tab-active-border-bottom-style",
|
||||||
|
"name": "$navbar-tab-active-border-bottom-style",
|
||||||
|
"value": "solid"
|
||||||
|
},
|
||||||
|
"navbar-tab-active-border-bottom-width": {
|
||||||
|
"id": "navbar-tab-active-border-bottom-width",
|
||||||
|
"name": "$navbar-tab-active-border-bottom-width",
|
||||||
|
"value": "3px"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-background-color": {
|
||||||
|
"id": "navbar-dropdown-background-color",
|
||||||
|
"name": "$navbar-dropdown-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-border-top": {
|
||||||
|
"id": "navbar-dropdown-border-top",
|
||||||
|
"name": "$navbar-dropdown-border-top",
|
||||||
|
"value": "1px solid $border"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-offset": {
|
||||||
|
"id": "navbar-dropdown-offset",
|
||||||
|
"name": "$navbar-dropdown-offset",
|
||||||
|
"value": "-4px"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-arrow": {
|
||||||
|
"id": "navbar-dropdown-arrow",
|
||||||
|
"name": "$navbar-dropdown-arrow",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-radius": {
|
||||||
|
"id": "navbar-dropdown-radius",
|
||||||
|
"name": "$navbar-dropdown-radius",
|
||||||
|
"value": "$radius-large"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-z": {
|
||||||
|
"id": "navbar-dropdown-z",
|
||||||
|
"name": "$navbar-dropdown-z",
|
||||||
|
"value": "20"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-boxed-radius": {
|
||||||
|
"id": "navbar-dropdown-boxed-radius",
|
||||||
|
"name": "$navbar-dropdown-boxed-radius",
|
||||||
|
"value": "$radius-large"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-boxed-shadow": {
|
||||||
|
"id": "navbar-dropdown-boxed-shadow",
|
||||||
|
"name": "$navbar-dropdown-boxed-shadow",
|
||||||
|
"value": "0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-item-hover-color": {
|
||||||
|
"id": "navbar-dropdown-item-hover-color",
|
||||||
|
"name": "$navbar-dropdown-item-hover-color",
|
||||||
|
"value": "$black"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-item-hover-background-color": {
|
||||||
|
"id": "navbar-dropdown-item-hover-background-color",
|
||||||
|
"name": "$navbar-dropdown-item-hover-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-item-active-color": {
|
||||||
|
"id": "navbar-dropdown-item-active-color",
|
||||||
|
"name": "$navbar-dropdown-item-active-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"navbar-dropdown-item-active-background-color": {
|
||||||
|
"id": "navbar-dropdown-item-active-background-color",
|
||||||
|
"name": "$navbar-dropdown-item-active-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"navbar-divider-background-color": {
|
||||||
|
"id": "navbar-divider-background-color",
|
||||||
|
"name": "$navbar-divider-background-color",
|
||||||
|
"value": "$border"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
90
docs/_data/variables/components/pagination.json
Normal file
90
docs/_data/variables/components/pagination.json
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "pagination",
|
||||||
|
"file_relative_path": "components/pagination.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 22,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/pagination.sass#L1,L22",
|
||||||
|
"vars": {
|
||||||
|
"pagination-color": {
|
||||||
|
"id": "pagination-color",
|
||||||
|
"name": "$pagination-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"pagination-border-color": {
|
||||||
|
"id": "pagination-border-color",
|
||||||
|
"name": "$pagination-border-color",
|
||||||
|
"value": "$grey-lighter"
|
||||||
|
},
|
||||||
|
"pagination-margin": {
|
||||||
|
"id": "pagination-margin",
|
||||||
|
"name": "$pagination-margin",
|
||||||
|
"value": "-0.25rem"
|
||||||
|
},
|
||||||
|
"pagination-hover-color": {
|
||||||
|
"id": "pagination-hover-color",
|
||||||
|
"name": "$pagination-hover-color",
|
||||||
|
"value": "$link-hover"
|
||||||
|
},
|
||||||
|
"pagination-hover-border-color": {
|
||||||
|
"id": "pagination-hover-border-color",
|
||||||
|
"name": "$pagination-hover-border-color",
|
||||||
|
"value": "$link-hover-border"
|
||||||
|
},
|
||||||
|
"pagination-focus-color": {
|
||||||
|
"id": "pagination-focus-color",
|
||||||
|
"name": "$pagination-focus-color",
|
||||||
|
"value": "$link-focus"
|
||||||
|
},
|
||||||
|
"pagination-focus-border-color": {
|
||||||
|
"id": "pagination-focus-border-color",
|
||||||
|
"name": "$pagination-focus-border-color",
|
||||||
|
"value": "$link-focus-border"
|
||||||
|
},
|
||||||
|
"pagination-active-color": {
|
||||||
|
"id": "pagination-active-color",
|
||||||
|
"name": "$pagination-active-color",
|
||||||
|
"value": "$link-active"
|
||||||
|
},
|
||||||
|
"pagination-active-border-color": {
|
||||||
|
"id": "pagination-active-border-color",
|
||||||
|
"name": "$pagination-active-border-color",
|
||||||
|
"value": "$link-active-border"
|
||||||
|
},
|
||||||
|
"pagination-disabled-color": {
|
||||||
|
"id": "pagination-disabled-color",
|
||||||
|
"name": "$pagination-disabled-color",
|
||||||
|
"value": "$grey"
|
||||||
|
},
|
||||||
|
"pagination-disabled-background-color": {
|
||||||
|
"id": "pagination-disabled-background-color",
|
||||||
|
"name": "$pagination-disabled-background-color",
|
||||||
|
"value": "$grey-lighter"
|
||||||
|
},
|
||||||
|
"pagination-disabled-border-color": {
|
||||||
|
"id": "pagination-disabled-border-color",
|
||||||
|
"name": "$pagination-disabled-border-color",
|
||||||
|
"value": "$grey-lighter"
|
||||||
|
},
|
||||||
|
"pagination-current-color": {
|
||||||
|
"id": "pagination-current-color",
|
||||||
|
"name": "$pagination-current-color",
|
||||||
|
"value": "$link-invert"
|
||||||
|
},
|
||||||
|
"pagination-current-background-color": {
|
||||||
|
"id": "pagination-current-background-color",
|
||||||
|
"name": "$pagination-current-background-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"pagination-current-border-color": {
|
||||||
|
"id": "pagination-current-border-color",
|
||||||
|
"name": "$pagination-current-border-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"pagination-ellipsis-color": {
|
||||||
|
"id": "pagination-ellipsis-color",
|
||||||
|
"name": "$pagination-ellipsis-color",
|
||||||
|
"value": "$grey-light"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
105
docs/_data/variables/components/panel.json
Normal file
105
docs/_data/variables/components/panel.json
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "panel",
|
||||||
|
"file_relative_path": "components/panel.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 24,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/panel.sass#L1,L24",
|
||||||
|
"vars": {
|
||||||
|
"panel-item-border": {
|
||||||
|
"id": "panel-item-border",
|
||||||
|
"name": "$panel-item-border",
|
||||||
|
"value": "1px solid $border"
|
||||||
|
},
|
||||||
|
"panel-heading-background-color": {
|
||||||
|
"id": "panel-heading-background-color",
|
||||||
|
"name": "$panel-heading-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"panel-heading-color": {
|
||||||
|
"id": "panel-heading-color",
|
||||||
|
"name": "$panel-heading-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"panel-heading-line-height": {
|
||||||
|
"id": "panel-heading-line-height",
|
||||||
|
"name": "$panel-heading-line-height",
|
||||||
|
"value": "1.25"
|
||||||
|
},
|
||||||
|
"panel-heading-padding": {
|
||||||
|
"id": "panel-heading-padding",
|
||||||
|
"name": "$panel-heading-padding",
|
||||||
|
"value": "0.5em 0.75em"
|
||||||
|
},
|
||||||
|
"panel-heading-radius": {
|
||||||
|
"id": "panel-heading-radius",
|
||||||
|
"name": "$panel-heading-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"panel-heading-size": {
|
||||||
|
"id": "panel-heading-size",
|
||||||
|
"name": "$panel-heading-size",
|
||||||
|
"value": "1.25em"
|
||||||
|
},
|
||||||
|
"panel-heading-weight": {
|
||||||
|
"id": "panel-heading-weight",
|
||||||
|
"name": "$panel-heading-weight",
|
||||||
|
"value": "$weight-light"
|
||||||
|
},
|
||||||
|
"panel-tab-border-bottom": {
|
||||||
|
"id": "panel-tab-border-bottom",
|
||||||
|
"name": "$panel-tab-border-bottom",
|
||||||
|
"value": "1px solid $border"
|
||||||
|
},
|
||||||
|
"panel-tab-active-border-bottom-color": {
|
||||||
|
"id": "panel-tab-active-border-bottom-color",
|
||||||
|
"name": "$panel-tab-active-border-bottom-color",
|
||||||
|
"value": "$link-active-border"
|
||||||
|
},
|
||||||
|
"panel-tab-active-color": {
|
||||||
|
"id": "panel-tab-active-color",
|
||||||
|
"name": "$panel-tab-active-color",
|
||||||
|
"value": "$link-active"
|
||||||
|
},
|
||||||
|
"panel-list-item-color": {
|
||||||
|
"id": "panel-list-item-color",
|
||||||
|
"name": "$panel-list-item-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"panel-list-item-hover-color": {
|
||||||
|
"id": "panel-list-item-hover-color",
|
||||||
|
"name": "$panel-list-item-hover-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"panel-block-color": {
|
||||||
|
"id": "panel-block-color",
|
||||||
|
"name": "$panel-block-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"panel-block-hover-background-color": {
|
||||||
|
"id": "panel-block-hover-background-color",
|
||||||
|
"name": "$panel-block-hover-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"panel-block-active-border-left-color": {
|
||||||
|
"id": "panel-block-active-border-left-color",
|
||||||
|
"name": "$panel-block-active-border-left-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"panel-block-active-color": {
|
||||||
|
"id": "panel-block-active-color",
|
||||||
|
"name": "$panel-block-active-color",
|
||||||
|
"value": "$link-active"
|
||||||
|
},
|
||||||
|
"panel-block-active-icon-color": {
|
||||||
|
"id": "panel-block-active-icon-color",
|
||||||
|
"name": "$panel-block-active-icon-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"panel-icon-color": {
|
||||||
|
"id": "panel-icon-color",
|
||||||
|
"name": "$panel-icon-color",
|
||||||
|
"value": "$text-light"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
130
docs/_data/variables/components/tabs.json
Normal file
130
docs/_data/variables/components/tabs.json
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "components",
|
||||||
|
"file_name": "tabs",
|
||||||
|
"file_relative_path": "components/tabs.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 27,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/tabs.sass#L1,L27",
|
||||||
|
"vars": {
|
||||||
|
"tabs-border-bottom-color": {
|
||||||
|
"id": "tabs-border-bottom-color",
|
||||||
|
"name": "$tabs-border-bottom-color",
|
||||||
|
"value": "$border"
|
||||||
|
},
|
||||||
|
"tabs-border-bottom-style": {
|
||||||
|
"id": "tabs-border-bottom-style",
|
||||||
|
"name": "$tabs-border-bottom-style",
|
||||||
|
"value": "solid"
|
||||||
|
},
|
||||||
|
"tabs-border-bottom-width": {
|
||||||
|
"id": "tabs-border-bottom-width",
|
||||||
|
"name": "$tabs-border-bottom-width",
|
||||||
|
"value": "1px"
|
||||||
|
},
|
||||||
|
"tabs-link-color": {
|
||||||
|
"id": "tabs-link-color",
|
||||||
|
"name": "$tabs-link-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"tabs-link-hover-border-bottom-color": {
|
||||||
|
"id": "tabs-link-hover-border-bottom-color",
|
||||||
|
"name": "$tabs-link-hover-border-bottom-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"tabs-link-hover-color": {
|
||||||
|
"id": "tabs-link-hover-color",
|
||||||
|
"name": "$tabs-link-hover-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"tabs-link-active-border-bottom-color": {
|
||||||
|
"id": "tabs-link-active-border-bottom-color",
|
||||||
|
"name": "$tabs-link-active-border-bottom-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"tabs-link-active-color": {
|
||||||
|
"id": "tabs-link-active-color",
|
||||||
|
"name": "$tabs-link-active-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"tabs-link-padding": {
|
||||||
|
"id": "tabs-link-padding",
|
||||||
|
"name": "$tabs-link-padding",
|
||||||
|
"value": "0.5em 1em"
|
||||||
|
},
|
||||||
|
"tabs-boxed-link-radius": {
|
||||||
|
"id": "tabs-boxed-link-radius",
|
||||||
|
"name": "$tabs-boxed-link-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"tabs-boxed-link-hover-background-color": {
|
||||||
|
"id": "tabs-boxed-link-hover-background-color",
|
||||||
|
"name": "$tabs-boxed-link-hover-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"tabs-boxed-link-hover-border-bottom-color": {
|
||||||
|
"id": "tabs-boxed-link-hover-border-bottom-color",
|
||||||
|
"name": "$tabs-boxed-link-hover-border-bottom-color",
|
||||||
|
"value": "$border"
|
||||||
|
},
|
||||||
|
"tabs-boxed-link-active-background-color": {
|
||||||
|
"id": "tabs-boxed-link-active-background-color",
|
||||||
|
"name": "$tabs-boxed-link-active-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"tabs-boxed-link-active-border-color": {
|
||||||
|
"id": "tabs-boxed-link-active-border-color",
|
||||||
|
"name": "$tabs-boxed-link-active-border-color",
|
||||||
|
"value": "$border"
|
||||||
|
},
|
||||||
|
"tabs-boxed-link-active-border-bottom-color": {
|
||||||
|
"id": "tabs-boxed-link-active-border-bottom-color",
|
||||||
|
"name": "$tabs-boxed-link-active-border-bottom-color",
|
||||||
|
"value": "transparent"
|
||||||
|
},
|
||||||
|
"tabs-toggle-link-border-color": {
|
||||||
|
"id": "tabs-toggle-link-border-color",
|
||||||
|
"name": "$tabs-toggle-link-border-color",
|
||||||
|
"value": "$border"
|
||||||
|
},
|
||||||
|
"tabs-toggle-link-border-style": {
|
||||||
|
"id": "tabs-toggle-link-border-style",
|
||||||
|
"name": "$tabs-toggle-link-border-style",
|
||||||
|
"value": "solid"
|
||||||
|
},
|
||||||
|
"tabs-toggle-link-border-width": {
|
||||||
|
"id": "tabs-toggle-link-border-width",
|
||||||
|
"name": "$tabs-toggle-link-border-width",
|
||||||
|
"value": "1px"
|
||||||
|
},
|
||||||
|
"tabs-toggle-link-hover-background-color": {
|
||||||
|
"id": "tabs-toggle-link-hover-background-color",
|
||||||
|
"name": "$tabs-toggle-link-hover-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"tabs-toggle-link-hover-border-color": {
|
||||||
|
"id": "tabs-toggle-link-hover-border-color",
|
||||||
|
"name": "$tabs-toggle-link-hover-border-color",
|
||||||
|
"value": "$border-hover"
|
||||||
|
},
|
||||||
|
"tabs-toggle-link-radius": {
|
||||||
|
"id": "tabs-toggle-link-radius",
|
||||||
|
"name": "$tabs-toggle-link-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"tabs-toggle-link-active-background-color": {
|
||||||
|
"id": "tabs-toggle-link-active-background-color",
|
||||||
|
"name": "$tabs-toggle-link-active-background-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"tabs-toggle-link-active-border-color": {
|
||||||
|
"id": "tabs-toggle-link-active-border-color",
|
||||||
|
"name": "$tabs-toggle-link-active-border-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"tabs-toggle-link-active-color": {
|
||||||
|
"id": "tabs-toggle-link-active-color",
|
||||||
|
"name": "$tabs-toggle-link-active-color",
|
||||||
|
"value": "$link-invert"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
45
docs/_data/variables/elements/box.json
Normal file
45
docs/_data/variables/elements/box.json
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "box",
|
||||||
|
"file_relative_path": "elements/box.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 8,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/box.sass#L1,L8",
|
||||||
|
"vars": {
|
||||||
|
"box-color": {
|
||||||
|
"id": "box-color",
|
||||||
|
"name": "$box-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"box-background-color": {
|
||||||
|
"id": "box-background-color",
|
||||||
|
"name": "$box-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"box-radius": {
|
||||||
|
"id": "box-radius",
|
||||||
|
"name": "$box-radius",
|
||||||
|
"value": "$radius-large"
|
||||||
|
},
|
||||||
|
"box-shadow": {
|
||||||
|
"id": "box-shadow",
|
||||||
|
"name": "$box-shadow",
|
||||||
|
"value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
|
||||||
|
},
|
||||||
|
"box-padding": {
|
||||||
|
"id": "box-padding",
|
||||||
|
"name": "$box-padding",
|
||||||
|
"value": "1.25rem"
|
||||||
|
},
|
||||||
|
"box-link-hover-shadow": {
|
||||||
|
"id": "box-link-hover-shadow",
|
||||||
|
"name": "$box-link-hover-shadow",
|
||||||
|
"value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link"
|
||||||
|
},
|
||||||
|
"box-link-active-shadow": {
|
||||||
|
"id": "box-link-active-shadow",
|
||||||
|
"name": "$box-link-active-shadow",
|
||||||
|
"value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
115
docs/_data/variables/elements/button.json
Normal file
115
docs/_data/variables/elements/button.json
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "button",
|
||||||
|
"file_relative_path": "elements/button.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 27,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/button.sass#L1,L27",
|
||||||
|
"vars": {
|
||||||
|
"button-color": {
|
||||||
|
"id": "button-color",
|
||||||
|
"name": "$button-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"button-background-color": {
|
||||||
|
"id": "button-background-color",
|
||||||
|
"name": "$button-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"button-border-color": {
|
||||||
|
"id": "button-border-color",
|
||||||
|
"name": "$button-border-color",
|
||||||
|
"value": "$grey-lighter"
|
||||||
|
},
|
||||||
|
"button-hover-color": {
|
||||||
|
"id": "button-hover-color",
|
||||||
|
"name": "$button-hover-color",
|
||||||
|
"value": "$link-hover"
|
||||||
|
},
|
||||||
|
"button-hover-border-color": {
|
||||||
|
"id": "button-hover-border-color",
|
||||||
|
"name": "$button-hover-border-color",
|
||||||
|
"value": "$link-hover-border"
|
||||||
|
},
|
||||||
|
"button-focus-color": {
|
||||||
|
"id": "button-focus-color",
|
||||||
|
"name": "$button-focus-color",
|
||||||
|
"value": "$link-focus"
|
||||||
|
},
|
||||||
|
"button-focus-border-color": {
|
||||||
|
"id": "button-focus-border-color",
|
||||||
|
"name": "$button-focus-border-color",
|
||||||
|
"value": "$link-focus-border"
|
||||||
|
},
|
||||||
|
"button-focus-box-shadow-size": {
|
||||||
|
"id": "button-focus-box-shadow-size",
|
||||||
|
"name": "$button-focus-box-shadow-size",
|
||||||
|
"value": "0 0 0 0.125em"
|
||||||
|
},
|
||||||
|
"button-focus-box-shadow-color": {
|
||||||
|
"id": "button-focus-box-shadow-color",
|
||||||
|
"name": "$button-focus-box-shadow-color",
|
||||||
|
"value": "rgba($link, 0.25)"
|
||||||
|
},
|
||||||
|
"button-active-color": {
|
||||||
|
"id": "button-active-color",
|
||||||
|
"name": "$button-active-color",
|
||||||
|
"value": "$link-active"
|
||||||
|
},
|
||||||
|
"button-active-border-color": {
|
||||||
|
"id": "button-active-border-color",
|
||||||
|
"name": "$button-active-border-color",
|
||||||
|
"value": "$link-active-border"
|
||||||
|
},
|
||||||
|
"button-text-color": {
|
||||||
|
"id": "button-text-color",
|
||||||
|
"name": "$button-text-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"button-text-hover-background-color": {
|
||||||
|
"id": "button-text-hover-background-color",
|
||||||
|
"name": "$button-text-hover-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"button-text-hover-color": {
|
||||||
|
"id": "button-text-hover-color",
|
||||||
|
"name": "$button-text-hover-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"button-disabled-background-color": {
|
||||||
|
"id": "button-disabled-background-color",
|
||||||
|
"name": "$button-disabled-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"button-disabled-border-color": {
|
||||||
|
"id": "button-disabled-border-color",
|
||||||
|
"name": "$button-disabled-border-color",
|
||||||
|
"value": "$grey-lighter"
|
||||||
|
},
|
||||||
|
"button-disabled-shadow": {
|
||||||
|
"id": "button-disabled-shadow",
|
||||||
|
"name": "$button-disabled-shadow",
|
||||||
|
"value": "none"
|
||||||
|
},
|
||||||
|
"button-disabled-opacity": {
|
||||||
|
"id": "button-disabled-opacity",
|
||||||
|
"name": "$button-disabled-opacity",
|
||||||
|
"value": "0.5"
|
||||||
|
},
|
||||||
|
"button-static-color": {
|
||||||
|
"id": "button-static-color",
|
||||||
|
"name": "$button-static-color",
|
||||||
|
"value": "$grey"
|
||||||
|
},
|
||||||
|
"button-static-background-color": {
|
||||||
|
"id": "button-static-background-color",
|
||||||
|
"name": "$button-static-background-color",
|
||||||
|
"value": "$white-ter"
|
||||||
|
},
|
||||||
|
"button-static-border-color": {
|
||||||
|
"id": "button-static-border-color",
|
||||||
|
"name": "$button-static-border-color",
|
||||||
|
"value": "$grey-lighter"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
90
docs/_data/variables/elements/content.json
Normal file
90
docs/_data/variables/elements/content.json
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "content",
|
||||||
|
"file_relative_path": "elements/content.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 19,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/content.sass#L1,L19",
|
||||||
|
"vars": {
|
||||||
|
"content-heading-color": {
|
||||||
|
"id": "content-heading-color",
|
||||||
|
"name": "$content-heading-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"content-heading-weight": {
|
||||||
|
"id": "content-heading-weight",
|
||||||
|
"name": "$content-heading-weight",
|
||||||
|
"value": "$weight-normal"
|
||||||
|
},
|
||||||
|
"content-heading-line-height": {
|
||||||
|
"id": "content-heading-line-height",
|
||||||
|
"name": "$content-heading-line-height",
|
||||||
|
"value": "1.125"
|
||||||
|
},
|
||||||
|
"content-blockquote-background-color": {
|
||||||
|
"id": "content-blockquote-background-color",
|
||||||
|
"name": "$content-blockquote-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"content-blockquote-border-left": {
|
||||||
|
"id": "content-blockquote-border-left",
|
||||||
|
"name": "$content-blockquote-border-left",
|
||||||
|
"value": "5px solid $border"
|
||||||
|
},
|
||||||
|
"content-blockquote-padding": {
|
||||||
|
"id": "content-blockquote-padding",
|
||||||
|
"name": "$content-blockquote-padding",
|
||||||
|
"value": "1.25em 1.5em"
|
||||||
|
},
|
||||||
|
"content-pre-padding": {
|
||||||
|
"id": "content-pre-padding",
|
||||||
|
"name": "$content-pre-padding",
|
||||||
|
"value": "1.25em 1.5em"
|
||||||
|
},
|
||||||
|
"content-table-cell-border": {
|
||||||
|
"id": "content-table-cell-border",
|
||||||
|
"name": "$content-table-cell-border",
|
||||||
|
"value": "1px solid $border"
|
||||||
|
},
|
||||||
|
"content-table-cell-border-width": {
|
||||||
|
"id": "content-table-cell-border-width",
|
||||||
|
"name": "$content-table-cell-border-width",
|
||||||
|
"value": "0 0 1px"
|
||||||
|
},
|
||||||
|
"content-table-cell-padding": {
|
||||||
|
"id": "content-table-cell-padding",
|
||||||
|
"name": "$content-table-cell-padding",
|
||||||
|
"value": "0.5em 0.75em"
|
||||||
|
},
|
||||||
|
"content-table-cell-heading-color": {
|
||||||
|
"id": "content-table-cell-heading-color",
|
||||||
|
"name": "$content-table-cell-heading-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"content-table-row-hover-background-color": {
|
||||||
|
"id": "content-table-row-hover-background-color",
|
||||||
|
"name": "$content-table-row-hover-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"content-table-head-cell-border-width": {
|
||||||
|
"id": "content-table-head-cell-border-width",
|
||||||
|
"name": "$content-table-head-cell-border-width",
|
||||||
|
"value": "0 0 2px"
|
||||||
|
},
|
||||||
|
"content-table-head-cell-color": {
|
||||||
|
"id": "content-table-head-cell-color",
|
||||||
|
"name": "$content-table-head-cell-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"content-table-foot-cell-border-width": {
|
||||||
|
"id": "content-table-foot-cell-border-width",
|
||||||
|
"name": "$content-table-foot-cell-border-width",
|
||||||
|
"value": "2px 0 0"
|
||||||
|
},
|
||||||
|
"content-table-foot-cell-color": {
|
||||||
|
"id": "content-table-foot-cell-color",
|
||||||
|
"name": "$content-table-foot-cell-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
160
docs/_data/variables/elements/form.json
Normal file
160
docs/_data/variables/elements/form.json
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "form",
|
||||||
|
"file_relative_path": "elements/form.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 41,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/form.sass#L1,L41",
|
||||||
|
"vars": {
|
||||||
|
"input-color": {
|
||||||
|
"id": "input-color",
|
||||||
|
"name": "$input-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"input-background-color": {
|
||||||
|
"id": "input-background-color",
|
||||||
|
"name": "$input-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"input-border-color": {
|
||||||
|
"id": "input-border-color",
|
||||||
|
"name": "$input-border-color",
|
||||||
|
"value": "$grey-lighter"
|
||||||
|
},
|
||||||
|
"input-shadow": {
|
||||||
|
"id": "input-shadow",
|
||||||
|
"name": "$input-shadow",
|
||||||
|
"value": "inset 0 1px 2px rgba($black, 0.1)"
|
||||||
|
},
|
||||||
|
"input-hover-color": {
|
||||||
|
"id": "input-hover-color",
|
||||||
|
"name": "$input-hover-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"input-hover-border-color": {
|
||||||
|
"id": "input-hover-border-color",
|
||||||
|
"name": "$input-hover-border-color",
|
||||||
|
"value": "$grey-light"
|
||||||
|
},
|
||||||
|
"input-focus-color": {
|
||||||
|
"id": "input-focus-color",
|
||||||
|
"name": "$input-focus-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"input-focus-border-color": {
|
||||||
|
"id": "input-focus-border-color",
|
||||||
|
"name": "$input-focus-border-color",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"input-focus-box-shadow-size": {
|
||||||
|
"id": "input-focus-box-shadow-size",
|
||||||
|
"name": "$input-focus-box-shadow-size",
|
||||||
|
"value": "0 0 0 0.125em"
|
||||||
|
},
|
||||||
|
"input-focus-box-shadow-color": {
|
||||||
|
"id": "input-focus-box-shadow-color",
|
||||||
|
"name": "$input-focus-box-shadow-color",
|
||||||
|
"value": "rgba($link, 0.25)"
|
||||||
|
},
|
||||||
|
"input-disabled-color": {
|
||||||
|
"id": "input-disabled-color",
|
||||||
|
"name": "$input-disabled-color",
|
||||||
|
"value": "$text-light"
|
||||||
|
},
|
||||||
|
"input-disabled-background-color": {
|
||||||
|
"id": "input-disabled-background-color",
|
||||||
|
"name": "$input-disabled-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"input-disabled-border-color": {
|
||||||
|
"id": "input-disabled-border-color",
|
||||||
|
"name": "$input-disabled-border-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"input-arrow": {
|
||||||
|
"id": "input-arrow",
|
||||||
|
"name": "$input-arrow",
|
||||||
|
"value": "$link"
|
||||||
|
},
|
||||||
|
"input-icon-color": {
|
||||||
|
"id": "input-icon-color",
|
||||||
|
"name": "$input-icon-color",
|
||||||
|
"value": "$grey-lighter"
|
||||||
|
},
|
||||||
|
"input-icon-active-color": {
|
||||||
|
"id": "input-icon-active-color",
|
||||||
|
"name": "$input-icon-active-color",
|
||||||
|
"value": "$grey"
|
||||||
|
},
|
||||||
|
"input-radius": {
|
||||||
|
"id": "input-radius",
|
||||||
|
"name": "$input-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"file-border-color": {
|
||||||
|
"id": "file-border-color",
|
||||||
|
"name": "$file-border-color",
|
||||||
|
"value": "$border"
|
||||||
|
},
|
||||||
|
"file-radius": {
|
||||||
|
"id": "file-radius",
|
||||||
|
"name": "$file-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"file-cta-background-color": {
|
||||||
|
"id": "file-cta-background-color",
|
||||||
|
"name": "$file-cta-background-color",
|
||||||
|
"value": "$white-ter"
|
||||||
|
},
|
||||||
|
"file-cta-color": {
|
||||||
|
"id": "file-cta-color",
|
||||||
|
"name": "$file-cta-color",
|
||||||
|
"value": "$grey-dark"
|
||||||
|
},
|
||||||
|
"file-cta-hover-color": {
|
||||||
|
"id": "file-cta-hover-color",
|
||||||
|
"name": "$file-cta-hover-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"file-cta-active-color": {
|
||||||
|
"id": "file-cta-active-color",
|
||||||
|
"name": "$file-cta-active-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"file-name-border-color": {
|
||||||
|
"id": "file-name-border-color",
|
||||||
|
"name": "$file-name-border-color",
|
||||||
|
"value": "$border"
|
||||||
|
},
|
||||||
|
"file-name-border-style": {
|
||||||
|
"id": "file-name-border-style",
|
||||||
|
"name": "$file-name-border-style",
|
||||||
|
"value": "solid"
|
||||||
|
},
|
||||||
|
"file-name-border-width": {
|
||||||
|
"id": "file-name-border-width",
|
||||||
|
"name": "$file-name-border-width",
|
||||||
|
"value": "1px 1px 1px 0"
|
||||||
|
},
|
||||||
|
"file-name-max-width": {
|
||||||
|
"id": "file-name-max-width",
|
||||||
|
"name": "$file-name-max-width",
|
||||||
|
"value": "16em"
|
||||||
|
},
|
||||||
|
"label-color": {
|
||||||
|
"id": "label-color",
|
||||||
|
"name": "$label-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"label-weight": {
|
||||||
|
"id": "label-weight",
|
||||||
|
"name": "$label-weight",
|
||||||
|
"value": "$weight-bold"
|
||||||
|
},
|
||||||
|
"help-size": {
|
||||||
|
"id": "help-size",
|
||||||
|
"name": "$help-size",
|
||||||
|
"value": "$size-small"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
30
docs/_data/variables/elements/icon.json
Normal file
30
docs/_data/variables/elements/icon.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "icon",
|
||||||
|
"file_relative_path": "elements/icon.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 4,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/icon.sass#L1,L4",
|
||||||
|
"vars": {
|
||||||
|
"icon-dimensions": {
|
||||||
|
"id": "icon-dimensions",
|
||||||
|
"name": "$icon-dimensions",
|
||||||
|
"value": "1.5rem"
|
||||||
|
},
|
||||||
|
"icon-dimensions-small": {
|
||||||
|
"id": "icon-dimensions-small",
|
||||||
|
"name": "$icon-dimensions-small",
|
||||||
|
"value": "1rem"
|
||||||
|
},
|
||||||
|
"icon-dimensions-medium": {
|
||||||
|
"id": "icon-dimensions-medium",
|
||||||
|
"name": "$icon-dimensions-medium",
|
||||||
|
"value": "2rem"
|
||||||
|
},
|
||||||
|
"icon-dimensions-large": {
|
||||||
|
"id": "icon-dimensions-large",
|
||||||
|
"name": "$icon-dimensions-large",
|
||||||
|
"value": "3rem"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
15
docs/_data/variables/elements/image.json
Normal file
15
docs/_data/variables/elements/image.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "image",
|
||||||
|
"file_relative_path": "elements/image.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 1,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/image.sass#L1,L1",
|
||||||
|
"vars": {
|
||||||
|
"dimensions": {
|
||||||
|
"id": "dimensions",
|
||||||
|
"name": "$dimensions",
|
||||||
|
"value": "16 24 32 48 64 96 128"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
25
docs/_data/variables/elements/notification.json
Normal file
25
docs/_data/variables/elements/notification.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "notification",
|
||||||
|
"file_relative_path": "elements/notification.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 3,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/notification.sass#L1,L3",
|
||||||
|
"vars": {
|
||||||
|
"notification-background-color": {
|
||||||
|
"id": "notification-background-color",
|
||||||
|
"name": "$notification-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"notification-radius": {
|
||||||
|
"id": "notification-radius",
|
||||||
|
"name": "$notification-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"notification-padding": {
|
||||||
|
"id": "notification-padding",
|
||||||
|
"name": "$notification-padding",
|
||||||
|
"value": "1.25rem 2.5rem 1.25rem 1.5rem"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
20
docs/_data/variables/elements/progress.json
Normal file
20
docs/_data/variables/elements/progress.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "progress",
|
||||||
|
"file_relative_path": "elements/progress.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 2,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/progress.sass#L1,L2",
|
||||||
|
"vars": {
|
||||||
|
"progress-bar-background-color": {
|
||||||
|
"id": "progress-bar-background-color",
|
||||||
|
"name": "$progress-bar-background-color",
|
||||||
|
"value": "$border"
|
||||||
|
},
|
||||||
|
"progress-value-background-color": {
|
||||||
|
"id": "progress-value-background-color",
|
||||||
|
"name": "$progress-value-background-color",
|
||||||
|
"value": "$text"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
85
docs/_data/variables/elements/table.json
Normal file
85
docs/_data/variables/elements/table.json
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "table",
|
||||||
|
"file_relative_path": "elements/table.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 20,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/table.sass#L1,L20",
|
||||||
|
"vars": {
|
||||||
|
"table-color": {
|
||||||
|
"id": "table-color",
|
||||||
|
"name": "$table-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"table-background-color": {
|
||||||
|
"id": "table-background-color",
|
||||||
|
"name": "$table-background-color",
|
||||||
|
"value": "$white"
|
||||||
|
},
|
||||||
|
"table-cell-border": {
|
||||||
|
"id": "table-cell-border",
|
||||||
|
"name": "$table-cell-border",
|
||||||
|
"value": "1px solid $grey-lighter"
|
||||||
|
},
|
||||||
|
"table-cell-border-width": {
|
||||||
|
"id": "table-cell-border-width",
|
||||||
|
"name": "$table-cell-border-width",
|
||||||
|
"value": "0 0 1px"
|
||||||
|
},
|
||||||
|
"table-cell-padding": {
|
||||||
|
"id": "table-cell-padding",
|
||||||
|
"name": "$table-cell-padding",
|
||||||
|
"value": "0.5em 0.75em"
|
||||||
|
},
|
||||||
|
"table-cell-heading-color": {
|
||||||
|
"id": "table-cell-heading-color",
|
||||||
|
"name": "$table-cell-heading-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"table-head-cell-border-width": {
|
||||||
|
"id": "table-head-cell-border-width",
|
||||||
|
"name": "$table-head-cell-border-width",
|
||||||
|
"value": "0 0 2px"
|
||||||
|
},
|
||||||
|
"table-head-cell-color": {
|
||||||
|
"id": "table-head-cell-color",
|
||||||
|
"name": "$table-head-cell-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"table-foot-cell-border-width": {
|
||||||
|
"id": "table-foot-cell-border-width",
|
||||||
|
"name": "$table-foot-cell-border-width",
|
||||||
|
"value": "2px 0 0"
|
||||||
|
},
|
||||||
|
"table-foot-cell-color": {
|
||||||
|
"id": "table-foot-cell-color",
|
||||||
|
"name": "$table-foot-cell-color",
|
||||||
|
"value": "$text-strong"
|
||||||
|
},
|
||||||
|
"table-row-hover-background-color": {
|
||||||
|
"id": "table-row-hover-background-color",
|
||||||
|
"name": "$table-row-hover-background-color",
|
||||||
|
"value": "$white-bis"
|
||||||
|
},
|
||||||
|
"table-row-active-background-color": {
|
||||||
|
"id": "table-row-active-background-color",
|
||||||
|
"name": "$table-row-active-background-color",
|
||||||
|
"value": "$primary"
|
||||||
|
},
|
||||||
|
"table-row-active-color": {
|
||||||
|
"id": "table-row-active-color",
|
||||||
|
"name": "$table-row-active-color",
|
||||||
|
"value": "$primary-invert"
|
||||||
|
},
|
||||||
|
"table-striped-row-even-background-color": {
|
||||||
|
"id": "table-striped-row-even-background-color",
|
||||||
|
"name": "$table-striped-row-even-background-color",
|
||||||
|
"value": "$white-bis"
|
||||||
|
},
|
||||||
|
"table-striped-row-even-hover-background-color": {
|
||||||
|
"id": "table-striped-row-even-hover-background-color",
|
||||||
|
"name": "$table-striped-row-even-hover-background-color",
|
||||||
|
"value": "$white-ter"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
30
docs/_data/variables/elements/tag.json
Normal file
30
docs/_data/variables/elements/tag.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "tag",
|
||||||
|
"file_relative_path": "elements/tag.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 4,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/tag.sass#L1,L4",
|
||||||
|
"vars": {
|
||||||
|
"tag-background-color": {
|
||||||
|
"id": "tag-background-color",
|
||||||
|
"name": "$tag-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"tag-color": {
|
||||||
|
"id": "tag-color",
|
||||||
|
"name": "$tag-color",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"tag-radius": {
|
||||||
|
"id": "tag-radius",
|
||||||
|
"name": "$tag-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"tag-delete-margin": {
|
||||||
|
"id": "tag-delete-margin",
|
||||||
|
"name": "$tag-delete-margin",
|
||||||
|
"value": "1px"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
60
docs/_data/variables/elements/title.json
Normal file
60
docs/_data/variables/elements/title.json
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "elements",
|
||||||
|
"file_name": "title",
|
||||||
|
"file_relative_path": "elements/title.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 11,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/title.sass#L1,L11",
|
||||||
|
"vars": {
|
||||||
|
"title-color": {
|
||||||
|
"id": "title-color",
|
||||||
|
"name": "$title-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"title-size": {
|
||||||
|
"id": "title-size",
|
||||||
|
"name": "$title-size",
|
||||||
|
"value": "$size-3"
|
||||||
|
},
|
||||||
|
"title-weight": {
|
||||||
|
"id": "title-weight",
|
||||||
|
"name": "$title-weight",
|
||||||
|
"value": "$weight-semibold"
|
||||||
|
},
|
||||||
|
"title-strong-color": {
|
||||||
|
"id": "title-strong-color",
|
||||||
|
"name": "$title-strong-color",
|
||||||
|
"value": "inherit"
|
||||||
|
},
|
||||||
|
"title-strong-weight": {
|
||||||
|
"id": "title-strong-weight",
|
||||||
|
"name": "$title-strong-weight",
|
||||||
|
"value": "inherit"
|
||||||
|
},
|
||||||
|
"subtitle-color": {
|
||||||
|
"id": "subtitle-color",
|
||||||
|
"name": "$subtitle-color",
|
||||||
|
"value": "$grey-dark"
|
||||||
|
},
|
||||||
|
"subtitle-size": {
|
||||||
|
"id": "subtitle-size",
|
||||||
|
"name": "$subtitle-size",
|
||||||
|
"value": "$size-5"
|
||||||
|
},
|
||||||
|
"subtitle-weight": {
|
||||||
|
"id": "subtitle-weight",
|
||||||
|
"name": "$subtitle-weight",
|
||||||
|
"value": "$weight-normal"
|
||||||
|
},
|
||||||
|
"subtitle-strong-color": {
|
||||||
|
"id": "subtitle-strong-color",
|
||||||
|
"name": "$subtitle-strong-color",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"subtitle-strong-weight": {
|
||||||
|
"id": "subtitle-strong-weight",
|
||||||
|
"name": "$subtitle-strong-weight",
|
||||||
|
"value": "$weight-semibold"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
15
docs/_data/variables/grid/columns.json
Normal file
15
docs/_data/variables/grid/columns.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "grid",
|
||||||
|
"file_name": "columns",
|
||||||
|
"file_relative_path": "grid/columns.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 1,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/grid/columns.sass#L1,L1",
|
||||||
|
"vars": {
|
||||||
|
"column-gap": {
|
||||||
|
"id": "column-gap",
|
||||||
|
"name": "$column-gap",
|
||||||
|
"value": "0.75rem"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
15
docs/_data/variables/layout/footer.json
Normal file
15
docs/_data/variables/layout/footer.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "layout",
|
||||||
|
"file_name": "footer",
|
||||||
|
"file_relative_path": "layout/footer.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 1,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/layout/footer.sass#L1,L1",
|
||||||
|
"vars": {
|
||||||
|
"footer-background-color": {
|
||||||
|
"id": "footer-background-color",
|
||||||
|
"name": "$footer-background-color",
|
||||||
|
"value": "$background"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
25
docs/_data/variables/layout/section.json
Normal file
25
docs/_data/variables/layout/section.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "layout",
|
||||||
|
"file_name": "section",
|
||||||
|
"file_relative_path": "layout/section.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 3,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/layout/section.sass#L1,L3",
|
||||||
|
"vars": {
|
||||||
|
"section-padding": {
|
||||||
|
"id": "section-padding",
|
||||||
|
"name": "$section-padding",
|
||||||
|
"value": "3rem 1.5rem"
|
||||||
|
},
|
||||||
|
"section-padding-medium": {
|
||||||
|
"id": "section-padding-medium",
|
||||||
|
"name": "$section-padding-medium",
|
||||||
|
"value": "9rem 1.5rem"
|
||||||
|
},
|
||||||
|
"section-padding-large": {
|
||||||
|
"id": "section-padding-large",
|
||||||
|
"name": "$section-padding-large",
|
||||||
|
"value": "18rem 1.5rem"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
30
docs/_data/variables/utilities/controls.json
Normal file
30
docs/_data/variables/utilities/controls.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "utilities",
|
||||||
|
"file_name": "controls",
|
||||||
|
"file_relative_path": "utilities/controls.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 5,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/controls.sass#L1,L5",
|
||||||
|
"vars": {
|
||||||
|
"control-radius": {
|
||||||
|
"id": "control-radius",
|
||||||
|
"name": "$control-radius",
|
||||||
|
"value": "$radius"
|
||||||
|
},
|
||||||
|
"control-radius-small": {
|
||||||
|
"id": "control-radius-small",
|
||||||
|
"name": "$control-radius-small",
|
||||||
|
"value": "$radius-small"
|
||||||
|
},
|
||||||
|
"control-padding-vertical": {
|
||||||
|
"id": "control-padding-vertical",
|
||||||
|
"name": "$control-padding-vertical",
|
||||||
|
"value": "calc(0.375em - 1px)"
|
||||||
|
},
|
||||||
|
"control-padding-horizontal": {
|
||||||
|
"id": "control-padding-horizontal",
|
||||||
|
"name": "$control-padding-horizontal",
|
||||||
|
"value": "calc(0.625em - 1px)"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
265
docs/_data/variables/utilities/derived-variables.json
Normal file
265
docs/_data/variables/utilities/derived-variables.json
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "utilities",
|
||||||
|
"file_name": "derived-variables",
|
||||||
|
"file_relative_path": "utilities/derived-variables.sass",
|
||||||
|
"file_line_from": 1,
|
||||||
|
"file_line_to": 82,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/derived-variables.sass#L1,L82",
|
||||||
|
"vars": {
|
||||||
|
"primary": {
|
||||||
|
"id": "primary",
|
||||||
|
"name": "$primary",
|
||||||
|
"value": "$turquoise"
|
||||||
|
},
|
||||||
|
"info": {
|
||||||
|
"id": "info",
|
||||||
|
"name": "$info",
|
||||||
|
"value": "$cyan"
|
||||||
|
},
|
||||||
|
"success": {
|
||||||
|
"id": "success",
|
||||||
|
"name": "$success",
|
||||||
|
"value": "$green"
|
||||||
|
},
|
||||||
|
"warning": {
|
||||||
|
"id": "warning",
|
||||||
|
"name": "$warning",
|
||||||
|
"value": "$yellow"
|
||||||
|
},
|
||||||
|
"danger": {
|
||||||
|
"id": "danger",
|
||||||
|
"name": "$danger",
|
||||||
|
"value": "$red"
|
||||||
|
},
|
||||||
|
"light": {
|
||||||
|
"id": "light",
|
||||||
|
"name": "$light",
|
||||||
|
"value": "$white-ter"
|
||||||
|
},
|
||||||
|
"dark": {
|
||||||
|
"id": "dark",
|
||||||
|
"name": "$dark",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"orange-invert": {
|
||||||
|
"id": "orange-invert",
|
||||||
|
"name": "$orange-invert",
|
||||||
|
"value": "findColorInvert($orange)"
|
||||||
|
},
|
||||||
|
"yellow-invert": {
|
||||||
|
"id": "yellow-invert",
|
||||||
|
"name": "$yellow-invert",
|
||||||
|
"value": "findColorInvert($yellow)"
|
||||||
|
},
|
||||||
|
"green-invert": {
|
||||||
|
"id": "green-invert",
|
||||||
|
"name": "$green-invert",
|
||||||
|
"value": "findColorInvert($green)"
|
||||||
|
},
|
||||||
|
"turquoise-invert": {
|
||||||
|
"id": "turquoise-invert",
|
||||||
|
"name": "$turquoise-invert",
|
||||||
|
"value": "findColorInvert($turquoise)"
|
||||||
|
},
|
||||||
|
"cyan-invert": {
|
||||||
|
"id": "cyan-invert",
|
||||||
|
"name": "$cyan-invert",
|
||||||
|
"value": "findColorInvert($cyan)"
|
||||||
|
},
|
||||||
|
"blue-invert": {
|
||||||
|
"id": "blue-invert",
|
||||||
|
"name": "$blue-invert",
|
||||||
|
"value": "findColorInvert($blue)"
|
||||||
|
},
|
||||||
|
"purple-invert": {
|
||||||
|
"id": "purple-invert",
|
||||||
|
"name": "$purple-invert",
|
||||||
|
"value": "findColorInvert($purple)"
|
||||||
|
},
|
||||||
|
"red-invert": {
|
||||||
|
"id": "red-invert",
|
||||||
|
"name": "$red-invert",
|
||||||
|
"value": "findColorInvert($red)"
|
||||||
|
},
|
||||||
|
"primary-invert": {
|
||||||
|
"id": "primary-invert",
|
||||||
|
"name": "$primary-invert",
|
||||||
|
"value": "$turquoise-invert"
|
||||||
|
},
|
||||||
|
"info-invert": {
|
||||||
|
"id": "info-invert",
|
||||||
|
"name": "$info-invert",
|
||||||
|
"value": "$cyan-invert"
|
||||||
|
},
|
||||||
|
"success-invert": {
|
||||||
|
"id": "success-invert",
|
||||||
|
"name": "$success-invert",
|
||||||
|
"value": "$green-invert"
|
||||||
|
},
|
||||||
|
"warning-invert": {
|
||||||
|
"id": "warning-invert",
|
||||||
|
"name": "$warning-invert",
|
||||||
|
"value": "$yellow-invert"
|
||||||
|
},
|
||||||
|
"danger-invert": {
|
||||||
|
"id": "danger-invert",
|
||||||
|
"name": "$danger-invert",
|
||||||
|
"value": "$red-invert"
|
||||||
|
},
|
||||||
|
"light-invert": {
|
||||||
|
"id": "light-invert",
|
||||||
|
"name": "$light-invert",
|
||||||
|
"value": "$dark"
|
||||||
|
},
|
||||||
|
"dark-invert": {
|
||||||
|
"id": "dark-invert",
|
||||||
|
"name": "$dark-invert",
|
||||||
|
"value": "$light"
|
||||||
|
},
|
||||||
|
"background": {
|
||||||
|
"id": "background",
|
||||||
|
"name": "$background",
|
||||||
|
"value": "$white-ter"
|
||||||
|
},
|
||||||
|
"border": {
|
||||||
|
"id": "border",
|
||||||
|
"name": "$border",
|
||||||
|
"value": "$grey-lighter"
|
||||||
|
},
|
||||||
|
"border-hover": {
|
||||||
|
"id": "border-hover",
|
||||||
|
"name": "$border-hover",
|
||||||
|
"value": "$grey-light"
|
||||||
|
},
|
||||||
|
"text": {
|
||||||
|
"id": "text",
|
||||||
|
"name": "$text",
|
||||||
|
"value": "$grey-dark"
|
||||||
|
},
|
||||||
|
"text-invert": {
|
||||||
|
"id": "text-invert",
|
||||||
|
"name": "$text-invert",
|
||||||
|
"value": "findColorInvert($text)"
|
||||||
|
},
|
||||||
|
"text-light": {
|
||||||
|
"id": "text-light",
|
||||||
|
"name": "$text-light",
|
||||||
|
"value": "$grey"
|
||||||
|
},
|
||||||
|
"text-strong": {
|
||||||
|
"id": "text-strong",
|
||||||
|
"name": "$text-strong",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"code": {
|
||||||
|
"id": "code",
|
||||||
|
"name": "$code",
|
||||||
|
"value": "$red"
|
||||||
|
},
|
||||||
|
"code-background": {
|
||||||
|
"id": "code-background",
|
||||||
|
"name": "$code-background",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"pre": {
|
||||||
|
"id": "pre",
|
||||||
|
"name": "$pre",
|
||||||
|
"value": "$text"
|
||||||
|
},
|
||||||
|
"pre-background": {
|
||||||
|
"id": "pre-background",
|
||||||
|
"name": "$pre-background",
|
||||||
|
"value": "$background"
|
||||||
|
},
|
||||||
|
"link": {
|
||||||
|
"id": "link",
|
||||||
|
"name": "$link",
|
||||||
|
"value": "$blue"
|
||||||
|
},
|
||||||
|
"link-invert": {
|
||||||
|
"id": "link-invert",
|
||||||
|
"name": "$link-invert",
|
||||||
|
"value": "$blue-invert"
|
||||||
|
},
|
||||||
|
"link-visited": {
|
||||||
|
"id": "link-visited",
|
||||||
|
"name": "$link-visited",
|
||||||
|
"value": "$purple"
|
||||||
|
},
|
||||||
|
"link-hover": {
|
||||||
|
"id": "link-hover",
|
||||||
|
"name": "$link-hover",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"link-hover-border": {
|
||||||
|
"id": "link-hover-border",
|
||||||
|
"name": "$link-hover-border",
|
||||||
|
"value": "$grey-light"
|
||||||
|
},
|
||||||
|
"link-focus": {
|
||||||
|
"id": "link-focus",
|
||||||
|
"name": "$link-focus",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"link-focus-border": {
|
||||||
|
"id": "link-focus-border",
|
||||||
|
"name": "$link-focus-border",
|
||||||
|
"value": "$blue"
|
||||||
|
},
|
||||||
|
"link-active": {
|
||||||
|
"id": "link-active",
|
||||||
|
"name": "$link-active",
|
||||||
|
"value": "$grey-darker"
|
||||||
|
},
|
||||||
|
"link-active-border": {
|
||||||
|
"id": "link-active-border",
|
||||||
|
"name": "$link-active-border",
|
||||||
|
"value": "$grey-dark"
|
||||||
|
},
|
||||||
|
"family-primary": {
|
||||||
|
"id": "family-primary",
|
||||||
|
"name": "$family-primary",
|
||||||
|
"value": "$family-sans-serif"
|
||||||
|
},
|
||||||
|
"family-code": {
|
||||||
|
"id": "family-code",
|
||||||
|
"name": "$family-code",
|
||||||
|
"value": "$family-monospace"
|
||||||
|
},
|
||||||
|
"size-small": {
|
||||||
|
"id": "size-small",
|
||||||
|
"name": "$size-small",
|
||||||
|
"value": "$size-7"
|
||||||
|
},
|
||||||
|
"size-normal": {
|
||||||
|
"id": "size-normal",
|
||||||
|
"name": "$size-normal",
|
||||||
|
"value": "$size-6"
|
||||||
|
},
|
||||||
|
"size-medium": {
|
||||||
|
"id": "size-medium",
|
||||||
|
"name": "$size-medium",
|
||||||
|
"value": "$size-5"
|
||||||
|
},
|
||||||
|
"size-large": {
|
||||||
|
"id": "size-large",
|
||||||
|
"name": "$size-large",
|
||||||
|
"value": "$size-4"
|
||||||
|
},
|
||||||
|
"colors": {
|
||||||
|
"id": "colors",
|
||||||
|
"name": "$colors",
|
||||||
|
"value": "(\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert), \"link\": ($link, $link-invert), \"info\": ($info, $info-invert), \"success\": ($success, $success-invert), \"warning\": ($warning, $warning-invert), \"danger\": ($danger, $danger-invert))"
|
||||||
|
},
|
||||||
|
"shades": {
|
||||||
|
"id": "shades",
|
||||||
|
"name": "$shades",
|
||||||
|
"value": "(\"black-bis\": $black-bis, \"black-ter\": $black-ter, \"grey-darker\": $grey-darker, \"grey-dark\": $grey-dark, \"grey\": $grey, \"grey-light\": $grey-light, \"grey-lighter\": $grey-lighter, \"white-ter\": $white-ter, \"white-bis\": $white-bis)"
|
||||||
|
},
|
||||||
|
"sizes": {
|
||||||
|
"id": "sizes",
|
||||||
|
"name": "$sizes",
|
||||||
|
"value": "$size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
230
docs/_data/variables/utilities/initial-variables.json
Normal file
230
docs/_data/variables/utilities/initial-variables.json
Normal file
@ -0,0 +1,230 @@
|
|||||||
|
{
|
||||||
|
"dir_name": "utilities",
|
||||||
|
"file_name": "initial-variables",
|
||||||
|
"file_relative_path": "utilities/initial-variables.sass",
|
||||||
|
"file_line_from": 3,
|
||||||
|
"file_line_to": 65,
|
||||||
|
"file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/initial-variables.sass#L3,L65",
|
||||||
|
"vars": {
|
||||||
|
"black": {
|
||||||
|
"id": "black",
|
||||||
|
"name": "$black",
|
||||||
|
"value": "hsl(0, 0%, 4%)"
|
||||||
|
},
|
||||||
|
"black-bis": {
|
||||||
|
"id": "black-bis",
|
||||||
|
"name": "$black-bis",
|
||||||
|
"value": "hsl(0, 0%, 7%)"
|
||||||
|
},
|
||||||
|
"black-ter": {
|
||||||
|
"id": "black-ter",
|
||||||
|
"name": "$black-ter",
|
||||||
|
"value": "hsl(0, 0%, 14%)"
|
||||||
|
},
|
||||||
|
"grey-darker": {
|
||||||
|
"id": "grey-darker",
|
||||||
|
"name": "$grey-darker",
|
||||||
|
"value": "hsl(0, 0%, 21%)"
|
||||||
|
},
|
||||||
|
"grey-dark": {
|
||||||
|
"id": "grey-dark",
|
||||||
|
"name": "$grey-dark",
|
||||||
|
"value": "hsl(0, 0%, 29%)"
|
||||||
|
},
|
||||||
|
"grey": {
|
||||||
|
"id": "grey",
|
||||||
|
"name": "$grey",
|
||||||
|
"value": "hsl(0, 0%, 48%)"
|
||||||
|
},
|
||||||
|
"grey-light": {
|
||||||
|
"id": "grey-light",
|
||||||
|
"name": "$grey-light",
|
||||||
|
"value": "hsl(0, 0%, 71%)"
|
||||||
|
},
|
||||||
|
"grey-lighter": {
|
||||||
|
"id": "grey-lighter",
|
||||||
|
"name": "$grey-lighter",
|
||||||
|
"value": "hsl(0, 0%, 86%)"
|
||||||
|
},
|
||||||
|
"white-ter": {
|
||||||
|
"id": "white-ter",
|
||||||
|
"name": "$white-ter",
|
||||||
|
"value": "hsl(0, 0%, 96%)"
|
||||||
|
},
|
||||||
|
"white-bis": {
|
||||||
|
"id": "white-bis",
|
||||||
|
"name": "$white-bis",
|
||||||
|
"value": "hsl(0, 0%, 98%)"
|
||||||
|
},
|
||||||
|
"white": {
|
||||||
|
"id": "white",
|
||||||
|
"name": "$white",
|
||||||
|
"value": "hsl(0, 0%, 100%)"
|
||||||
|
},
|
||||||
|
"orange": {
|
||||||
|
"id": "orange",
|
||||||
|
"name": "$orange",
|
||||||
|
"value": "hsl(14, 100%, 53%)"
|
||||||
|
},
|
||||||
|
"yellow": {
|
||||||
|
"id": "yellow",
|
||||||
|
"name": "$yellow",
|
||||||
|
"value": "hsl(48, 100%, 67%)"
|
||||||
|
},
|
||||||
|
"green": {
|
||||||
|
"id": "green",
|
||||||
|
"name": "$green",
|
||||||
|
"value": "hsl(141, 71%, 48%)"
|
||||||
|
},
|
||||||
|
"turquoise": {
|
||||||
|
"id": "turquoise",
|
||||||
|
"name": "$turquoise",
|
||||||
|
"value": "hsl(171, 100%, 41%)"
|
||||||
|
},
|
||||||
|
"cyan": {
|
||||||
|
"id": "cyan",
|
||||||
|
"name": "$cyan",
|
||||||
|
"value": "hsl(204, 86%, 53%)"
|
||||||
|
},
|
||||||
|
"blue": {
|
||||||
|
"id": "blue",
|
||||||
|
"name": "$blue",
|
||||||
|
"value": "hsl(217, 71%, 53%)"
|
||||||
|
},
|
||||||
|
"purple": {
|
||||||
|
"id": "purple",
|
||||||
|
"name": "$purple",
|
||||||
|
"value": "hsl(271, 100%, 71%)"
|
||||||
|
},
|
||||||
|
"red": {
|
||||||
|
"id": "red",
|
||||||
|
"name": "$red",
|
||||||
|
"value": "hsl(348, 100%, 61%)"
|
||||||
|
},
|
||||||
|
"family-sans-serif": {
|
||||||
|
"id": "family-sans-serif",
|
||||||
|
"name": "$family-sans-serif",
|
||||||
|
"value": "BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif"
|
||||||
|
},
|
||||||
|
"family-monospace": {
|
||||||
|
"id": "family-monospace",
|
||||||
|
"name": "$family-monospace",
|
||||||
|
"value": "monospace"
|
||||||
|
},
|
||||||
|
"render-mode": {
|
||||||
|
"id": "render-mode",
|
||||||
|
"name": "$render-mode",
|
||||||
|
"value": "optimizeLegibility"
|
||||||
|
},
|
||||||
|
"size-1": {
|
||||||
|
"id": "size-1",
|
||||||
|
"name": "$size-1",
|
||||||
|
"value": "3rem"
|
||||||
|
},
|
||||||
|
"size-2": {
|
||||||
|
"id": "size-2",
|
||||||
|
"name": "$size-2",
|
||||||
|
"value": "2.5rem"
|
||||||
|
},
|
||||||
|
"size-3": {
|
||||||
|
"id": "size-3",
|
||||||
|
"name": "$size-3",
|
||||||
|
"value": "2rem"
|
||||||
|
},
|
||||||
|
"size-4": {
|
||||||
|
"id": "size-4",
|
||||||
|
"name": "$size-4",
|
||||||
|
"value": "1.5rem"
|
||||||
|
},
|
||||||
|
"size-5": {
|
||||||
|
"id": "size-5",
|
||||||
|
"name": "$size-5",
|
||||||
|
"value": "1.25rem"
|
||||||
|
},
|
||||||
|
"size-6": {
|
||||||
|
"id": "size-6",
|
||||||
|
"name": "$size-6",
|
||||||
|
"value": "1rem"
|
||||||
|
},
|
||||||
|
"size-7": {
|
||||||
|
"id": "size-7",
|
||||||
|
"name": "$size-7",
|
||||||
|
"value": "0.75rem"
|
||||||
|
},
|
||||||
|
"weight-light": {
|
||||||
|
"id": "weight-light",
|
||||||
|
"name": "$weight-light",
|
||||||
|
"value": "300"
|
||||||
|
},
|
||||||
|
"weight-normal": {
|
||||||
|
"id": "weight-normal",
|
||||||
|
"name": "$weight-normal",
|
||||||
|
"value": "400"
|
||||||
|
},
|
||||||
|
"weight-medium": {
|
||||||
|
"id": "weight-medium",
|
||||||
|
"name": "$weight-medium",
|
||||||
|
"value": "500"
|
||||||
|
},
|
||||||
|
"weight-semibold": {
|
||||||
|
"id": "weight-semibold",
|
||||||
|
"name": "$weight-semibold",
|
||||||
|
"value": "600"
|
||||||
|
},
|
||||||
|
"weight-bold": {
|
||||||
|
"id": "weight-bold",
|
||||||
|
"name": "$weight-bold",
|
||||||
|
"value": "700"
|
||||||
|
},
|
||||||
|
"gap": {
|
||||||
|
"id": "gap",
|
||||||
|
"name": "$gap",
|
||||||
|
"value": "32px"
|
||||||
|
},
|
||||||
|
"tablet": {
|
||||||
|
"id": "tablet",
|
||||||
|
"name": "$tablet",
|
||||||
|
"value": "769px"
|
||||||
|
},
|
||||||
|
"desktop": {
|
||||||
|
"id": "desktop",
|
||||||
|
"name": "$desktop",
|
||||||
|
"value": "960px + (2 * $gap)"
|
||||||
|
},
|
||||||
|
"widescreen": {
|
||||||
|
"id": "widescreen",
|
||||||
|
"name": "$widescreen",
|
||||||
|
"value": "1152px + (2 * $gap)"
|
||||||
|
},
|
||||||
|
"fullhd": {
|
||||||
|
"id": "fullhd",
|
||||||
|
"name": "$fullhd",
|
||||||
|
"value": "1344px + (2 * $gap)"
|
||||||
|
},
|
||||||
|
"easing": {
|
||||||
|
"id": "easing",
|
||||||
|
"name": "$easing",
|
||||||
|
"value": "ease-out"
|
||||||
|
},
|
||||||
|
"radius-small": {
|
||||||
|
"id": "radius-small",
|
||||||
|
"name": "$radius-small",
|
||||||
|
"value": "2px"
|
||||||
|
},
|
||||||
|
"radius": {
|
||||||
|
"id": "radius",
|
||||||
|
"name": "$radius",
|
||||||
|
"value": "3px"
|
||||||
|
},
|
||||||
|
"radius-large": {
|
||||||
|
"id": "radius-large",
|
||||||
|
"name": "$radius-large",
|
||||||
|
"value": "5px"
|
||||||
|
},
|
||||||
|
"speed": {
|
||||||
|
"id": "speed",
|
||||||
|
"name": "$speed",
|
||||||
|
"value": "86ms"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,12 +1,48 @@
|
|||||||
{% include anchor.html name="Variables" %}
|
{% capture content %}
|
||||||
|
|
||||||
|
{% assign anchor_name = include.anchor_name | default: 'Variables' %}
|
||||||
|
{% assign tab = include.tab | default: page.doc-tab %}
|
||||||
|
{% assign subtab = include.subtab | default: page.doc-subtab %}
|
||||||
|
{% assign type = include.type | default: tab %}
|
||||||
|
{% assign data = include.data | default: site.data.variables[tab][subtab] %}
|
||||||
|
{% assign variables = include.variables | default: data.vars %}
|
||||||
|
{% assign table_class = include.table_class | default: 'is-bordered' %}
|
||||||
|
|
||||||
|
{% if include.custom_message %}
|
||||||
|
|
||||||
|
{{ include.custom_message }}
|
||||||
|
|
||||||
|
{% else %}
|
||||||
|
|
||||||
|
{% assign variables_link_text = "these variables" %}
|
||||||
|
|
||||||
|
{% capture variables_link %}
|
||||||
|
|
||||||
|
{% if data.file_url %}
|
||||||
|
|
||||||
|
<a href="{{ data.file_url }}" target="_blank">{{ variables_link_text }}</a>
|
||||||
|
|
||||||
|
{% else %}
|
||||||
|
|
||||||
|
{{ variables_link_text }}
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
You can use {{ variables_link | strip }} to <strong>customize</strong> this {{ type }}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% include anchor.html name=anchor_name %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>{{ content | strip }}</p>
|
||||||
{% if include.custom_message %}{{ include.custom_message }}{% else %}You can use these variables to <strong>customize</strong> this {%if include.element %}element{% elsif include.layout %}layout{% else %}component{% endif %}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endif %}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="table is-bordered">
|
<table class="table {{ table_class }}">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
@ -20,7 +56,8 @@
|
|||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for variable in page.variables %}
|
{% for variable_hash in variables %}
|
||||||
|
{% assign variable = variable_hash[1] %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<code>{{ variable.name }}</code>
|
<code>{{ variable.name }}</code>
|
||||||
|
|||||||
@ -1,16 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Breadcrumb
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: breadcrumb
|
doc-subtab: breadcrumb
|
||||||
variables:
|
|
||||||
- name: $breadcrumb-item-color
|
|
||||||
value: $text-light
|
|
||||||
- name: $breadcrumb-item-hover-color
|
|
||||||
value: $link-hover
|
|
||||||
- name: $breadcrumb-item-active-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $breadcrumb-item-separator-color
|
|
||||||
value: $text
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-components.html %}
|
{% include subnav-components.html %}
|
||||||
@ -206,7 +198,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,22 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Card
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: card
|
doc-subtab: card
|
||||||
variables:
|
|
||||||
- name: $card-color
|
|
||||||
value: $text
|
|
||||||
- name: $card-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $card-shadow
|
|
||||||
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
|
||||||
- name: $card-header-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $card-header-shadow
|
|
||||||
value: 0 1px 2px rgba($black, 0.1)
|
|
||||||
- name: $card-header-weight
|
|
||||||
value: $weight-bold
|
|
||||||
- name: $card-footer-border-top
|
|
||||||
value: 1px solid $border
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture card_example %}
|
{% capture card_example %}
|
||||||
@ -198,7 +184,7 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,32 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Dropdown
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: dropdown
|
doc-subtab: dropdown
|
||||||
variables:
|
|
||||||
- name: $dropdown-content-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $dropdown-content-arrow
|
|
||||||
value: $link
|
|
||||||
- name: $dropdown-content-offset
|
|
||||||
value: 4px
|
|
||||||
- name: $dropdown-content-radius
|
|
||||||
value: $radius
|
|
||||||
- name: $dropdown-content-shadow
|
|
||||||
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
|
||||||
- name: $dropdown-content-z
|
|
||||||
value: 20
|
|
||||||
- name: $dropdown-item-color
|
|
||||||
value: $grey-dark
|
|
||||||
- name: $dropdown-item-hover-color
|
|
||||||
value: $black
|
|
||||||
- name: $dropdown-item-hover-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $dropdown-item-active-color
|
|
||||||
value: $primary-invert
|
|
||||||
- name: $dropdown-item-active-background-color
|
|
||||||
value: $primary
|
|
||||||
- name: $dropdown-divider-background-color
|
|
||||||
value: $border
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture dropdown_example %}
|
{% capture dropdown_example %}
|
||||||
@ -368,7 +344,7 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,24 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Menu
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: menu
|
doc-subtab: menu
|
||||||
variables:
|
|
||||||
- name: $menu-item-color
|
|
||||||
value: $text
|
|
||||||
- name: $menu-item-radius
|
|
||||||
value: $radius-small
|
|
||||||
- name: $menu-item-hover-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $menu-item-hover-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $menu-item-active-color
|
|
||||||
value: $link-invert
|
|
||||||
- name: $menu-item-active-background-color
|
|
||||||
value: $link
|
|
||||||
- name: $menu-list-border-left
|
|
||||||
value: 1px solid $border
|
|
||||||
- name: $menu-label-color
|
|
||||||
value: $text-light
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture menu_example %}
|
{% capture menu_example %}
|
||||||
@ -75,7 +59,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=menu_example size="one-third" %}
|
{% include snippet.html content=menu_example size="one-third" %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,32 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Message
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: message
|
doc-subtab: message
|
||||||
variables:
|
|
||||||
- name: $message-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $message-radius
|
|
||||||
value: $radius
|
|
||||||
- name: $message-header-background-color
|
|
||||||
value: $text
|
|
||||||
- name: $message-header-color
|
|
||||||
value: $text-invert
|
|
||||||
- name: $message-header-padding
|
|
||||||
value: 0.5em 0.75em
|
|
||||||
- name: $message-header-radius
|
|
||||||
value: $radius
|
|
||||||
- name: $message-body-border
|
|
||||||
value: 1px solid $border
|
|
||||||
- name: $message-body-color
|
|
||||||
value: $text
|
|
||||||
- name: $message-body-padding
|
|
||||||
value: 1em 1.25em
|
|
||||||
- name: $message-body-radius
|
|
||||||
value: $radius
|
|
||||||
- name: $message-body-pre-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $message-body-pre-code-background-color
|
|
||||||
value: transparent
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture message_example %}
|
{% capture message_example %}
|
||||||
@ -51,7 +27,7 @@ variables:
|
|||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{% for color in site.data.variables.justColors %}
|
{% for color in site.data.colors.justColors %}
|
||||||
<article class="message is-{{ color }}">
|
<article class="message is-{{ color }}">
|
||||||
<div class="message-header">
|
<div class="message-header">
|
||||||
<p>{{ color | capitalize }}</p>
|
<p>{{ color | capitalize }}</p>
|
||||||
@ -123,7 +99,7 @@ variables:
|
|||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
{% for color in site.data.variables.justColors %}
|
{% for color in site.data.colors.justColors %}
|
||||||
<article class="message is-{{ color }}">
|
<article class="message is-{{ color }}">
|
||||||
<div class="message-body">
|
<div class="message-body">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||||
@ -173,7 +149,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=message_large %}
|
{% include snippet.html content=message_large %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,50 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Modal
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: modal
|
doc-subtab: modal
|
||||||
variables:
|
|
||||||
- name: $modal-z
|
|
||||||
value: 20
|
|
||||||
- name: $modal-background-background-color
|
|
||||||
value: rgba($black, 0.86)
|
|
||||||
- name: $modal-content-width
|
|
||||||
value: 640px
|
|
||||||
- name: $modal-content-margin-mobile
|
|
||||||
value: 20px
|
|
||||||
- name: $modal-content-spacing-mobile
|
|
||||||
value: 160px
|
|
||||||
- name: $modal-content-spacing-tablet
|
|
||||||
value: 40px
|
|
||||||
- name: $modal-close-dimensions
|
|
||||||
value: 40px
|
|
||||||
- name: $modal-close-right
|
|
||||||
value: 20px
|
|
||||||
- name: $modal-close-top
|
|
||||||
value: 20px
|
|
||||||
- name: $modal-card-spacing
|
|
||||||
value: 40px
|
|
||||||
- name: $modal-card-head-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $modal-card-head-border-bottom
|
|
||||||
value: 1px solid $border
|
|
||||||
- name: $modal-card-head-padding
|
|
||||||
value: 20px
|
|
||||||
- name: $modal-card-head-radius
|
|
||||||
value: $radius-large
|
|
||||||
- name: $modal-card-title-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $modal-card-title-line-height
|
|
||||||
value: 1
|
|
||||||
- name: $modal-card-title-size
|
|
||||||
value: $size-4
|
|
||||||
- name: $modal-card-foot-radius
|
|
||||||
value: $radius-large
|
|
||||||
- name: $modal-card-foot-border-top
|
|
||||||
value: 1px solid $border
|
|
||||||
- name: $modal-card-body-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $modal-card-body-padding
|
|
||||||
value: 20px
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture modal %}
|
{% capture modal %}
|
||||||
@ -169,7 +127,7 @@ variables:
|
|||||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,64 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Navbar
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: navbar
|
doc-subtab: navbar
|
||||||
variables:
|
|
||||||
- name: $navbar-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $navbar-height
|
|
||||||
value: 3.25rem
|
|
||||||
- name: $navbar-item-color
|
|
||||||
value: $grey-dark
|
|
||||||
- name: $navbar-item-hover-color
|
|
||||||
value: $black
|
|
||||||
- name: $navbar-item-hover-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $navbar-item-active-color
|
|
||||||
value: $black
|
|
||||||
- name: $navbar-item-active-background-color
|
|
||||||
value: transparent
|
|
||||||
- name: $navbar-item-img-max-height
|
|
||||||
value: 1.75rem
|
|
||||||
- name: $navbar-tab-hover-background-color
|
|
||||||
value: transparent
|
|
||||||
- name: $navbar-tab-hover-border-bottom-color
|
|
||||||
value: $primary
|
|
||||||
- name: $navbar-tab-active-color
|
|
||||||
value: $primary
|
|
||||||
- name: $navbar-tab-active-background-color
|
|
||||||
value: transparent
|
|
||||||
- name: $navbar-tab-active-border-bottom-color
|
|
||||||
value: $primary
|
|
||||||
- name: $navbar-tab-active-border-bottom-style
|
|
||||||
value: solid
|
|
||||||
- name: $navbar-tab-active-border-bottom-width
|
|
||||||
value: 3px
|
|
||||||
- name: $navbar-dropdown-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $navbar-dropdown-border-top
|
|
||||||
value: 1px solid $border
|
|
||||||
- name: $navbar-dropdown-offset
|
|
||||||
value: -4px
|
|
||||||
- name: $navbar-dropdown-arrow
|
|
||||||
value: $link
|
|
||||||
- name: $navbar-dropdown-radius
|
|
||||||
value: $radius-large
|
|
||||||
- name: $navbar-dropdown-z
|
|
||||||
value: 20
|
|
||||||
- name: $navbar-dropdown-boxed-radius
|
|
||||||
value: $radius-large
|
|
||||||
- name: $navbar-dropdown-boxed-shadow
|
|
||||||
value: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
|
||||||
- name: $navbar-dropdown-item-hover-color
|
|
||||||
value: $black
|
|
||||||
- name: $navbar-dropdown-item-hover-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $navbar-dropdown-item-active-color
|
|
||||||
value: $primary
|
|
||||||
- name: $navbar-dropdown-item-active-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $navbar-divider-background-color
|
|
||||||
value: $border
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-components.html %}
|
{% include subnav-components.html %}
|
||||||
@ -1072,7 +1016,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
{% include examples/navbar-color.html color="white" light=true %}
|
{% include examples/navbar-color.html color="white" light=true %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,40 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Pagination
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: pagination
|
doc-subtab: pagination
|
||||||
variables:
|
|
||||||
- name: $pagination-color
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $pagination-border-color
|
|
||||||
value: $grey-lighter
|
|
||||||
- name: $pagination-margin
|
|
||||||
value: -0.25rem
|
|
||||||
- name: $pagination-hover-color
|
|
||||||
value: $link-hover
|
|
||||||
- name: $pagination-hover-border-color
|
|
||||||
value: $link-hover-border
|
|
||||||
- name: $pagination-focus-color
|
|
||||||
value: $link-focus
|
|
||||||
- name: $pagination-focus-border-color
|
|
||||||
value: $link-focus-border
|
|
||||||
- name: $pagination-active-color
|
|
||||||
value: $link-active
|
|
||||||
- name: $pagination-active-border-color
|
|
||||||
value: $link-active-border
|
|
||||||
- name: $pagination-disabled-color
|
|
||||||
value: $grey
|
|
||||||
- name: $pagination-disabled-background-color
|
|
||||||
value: $grey-lighter
|
|
||||||
- name: $pagination-disabled-border-color
|
|
||||||
value: $grey-lighter
|
|
||||||
- name: $pagination-current-color
|
|
||||||
value: $link-invert
|
|
||||||
- name: $pagination-current-background-color
|
|
||||||
value: $link
|
|
||||||
- name: $pagination-current-border-color
|
|
||||||
value: $link
|
|
||||||
- name: $pagination-ellipsis-color
|
|
||||||
value: $grey-light
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture pagination_example %}
|
{% capture pagination_example %}
|
||||||
@ -238,7 +206,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
|
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,46 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Panel
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: panel
|
doc-subtab: panel
|
||||||
variables:
|
|
||||||
- name: $panel-item-border
|
|
||||||
value: 1px solid $border
|
|
||||||
- name: $panel-heading-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $panel-heading-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $panel-heading-line-height
|
|
||||||
value: 1.25
|
|
||||||
- name: $panel-heading-padding
|
|
||||||
value: 0.5em 0.75em
|
|
||||||
- name: $panel-heading-radius
|
|
||||||
value: $radius
|
|
||||||
- name: $panel-heading-size
|
|
||||||
value: 1.25em
|
|
||||||
- name: $panel-heading-weight
|
|
||||||
value: $weight-light
|
|
||||||
- name: $panel-tab-border-bottom
|
|
||||||
value: 1px solid $border
|
|
||||||
- name: $panel-tab-active-border-bottom-color
|
|
||||||
value: $link-active-border
|
|
||||||
- name: $panel-tab-active-color
|
|
||||||
value: $link-active
|
|
||||||
- name: $panel-list-item-color
|
|
||||||
value: $text
|
|
||||||
- name: $panel-list-item-hover-color
|
|
||||||
value: $link
|
|
||||||
- name: $panel-block-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $panel-block-hover-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $panel-block-active-border-left-color
|
|
||||||
value: $link
|
|
||||||
- name: $panel-block-active-color
|
|
||||||
value: $link-active
|
|
||||||
- name: $panel-block-active-icon-color
|
|
||||||
value: $link
|
|
||||||
- name: $panel-icon-color
|
|
||||||
value: $text-light
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture panel_example %}
|
{% capture panel_example %}
|
||||||
@ -154,7 +116,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=panel_example size="one-third" %}
|
{% include snippet.html content=panel_example size="one-third" %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,56 +1,8 @@
|
|||||||
---
|
---
|
||||||
|
title: Tabs
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: tabs
|
doc-subtab: tabs
|
||||||
variables:
|
|
||||||
- name: $tabs-border-bottom-color
|
|
||||||
value: $border
|
|
||||||
- name: $tabs-border-bottom-style
|
|
||||||
value: solid
|
|
||||||
- name: $tabs-border-bottom-width
|
|
||||||
value: 1px
|
|
||||||
- name: $tabs-link-color
|
|
||||||
value: $text
|
|
||||||
- name: $tabs-link-hover-border-bottom-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $tabs-link-hover-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $tabs-link-active-border-bottom-color
|
|
||||||
value: $primary
|
|
||||||
- name: $tabs-link-active-color
|
|
||||||
value: $primary
|
|
||||||
- name: $tabs-link-padding
|
|
||||||
value: 0.5em 1em
|
|
||||||
- name: $tabs-boxed-link-radius
|
|
||||||
value: $radius
|
|
||||||
- name: $tabs-boxed-link-hover-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $tabs-boxed-link-hover-border-bottom-color
|
|
||||||
value: $border
|
|
||||||
- name: $tabs-boxed-link-active-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $tabs-boxed-link-active-border-color
|
|
||||||
value: $border
|
|
||||||
- name: $tabs-boxed-link-active-border-bottom-color
|
|
||||||
value: transparent
|
|
||||||
- name: $tabs-toggle-link-border-color
|
|
||||||
value: $border
|
|
||||||
- name: $tabs-toggle-link-border-style
|
|
||||||
value: solid
|
|
||||||
- name: $tabs-toggle-link-border-width
|
|
||||||
value: 1px
|
|
||||||
- name: $tabs-toggle-link-hover-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $tabs-toggle-link-hover-border-color
|
|
||||||
value: $border-hover
|
|
||||||
- name: $tabs-toggle-link-radius
|
|
||||||
value: $radius
|
|
||||||
- name: $tabs-toggle-link-active-background-color
|
|
||||||
value: $primary
|
|
||||||
- name: $tabs-toggle-link-active-border-color
|
|
||||||
value: $primary
|
|
||||||
- name: $tabs-toggle-link-active-color
|
|
||||||
value: $primary-invert
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture tabs_example %}
|
{% capture tabs_example %}
|
||||||
@ -453,7 +405,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='component' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,21 +3,6 @@ title: Box
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: box
|
doc-subtab: box
|
||||||
variables:
|
|
||||||
- name: $box-color
|
|
||||||
value: $text
|
|
||||||
- name: $box-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $box-radius
|
|
||||||
value: $radius-large
|
|
||||||
- name: $box-shadow
|
|
||||||
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
|
||||||
- name: $box-padding
|
|
||||||
value: 1.25rem
|
|
||||||
- name: $box-link-hover-shadow
|
|
||||||
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
|
|
||||||
- name: $box-link-active-shadow
|
|
||||||
value: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
@ -81,7 +66,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=box_example more=true %}
|
{% include snippet.html content=box_example more=true %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='element' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,49 +3,6 @@ title: Button
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: button
|
doc-subtab: button
|
||||||
variables:
|
|
||||||
- name: $button-color
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $button-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $button-border-color
|
|
||||||
value: $grey-lighter
|
|
||||||
- name: $button-hover-color
|
|
||||||
value: $link-hover
|
|
||||||
- name: $button-hover-border-color
|
|
||||||
value: $link-hover-border
|
|
||||||
- name: $button-focus-color
|
|
||||||
value: $link-focus
|
|
||||||
- name: $button-focus-border-color
|
|
||||||
value: $link-focus-border
|
|
||||||
- name: $button-focus-box-shadow-size
|
|
||||||
value: 0 0 0 0.125em
|
|
||||||
- name: $button-focus-box-shadow-color
|
|
||||||
value: rgba($link, 0.25)
|
|
||||||
- name: $button-active-color
|
|
||||||
value: $link-active
|
|
||||||
- name: $button-active-border-color
|
|
||||||
value: $link-active-border
|
|
||||||
- name: $button-link-color
|
|
||||||
value: $text
|
|
||||||
- name: $button-link-hover-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $button-link-hover-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $button-disabled-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $button-disabled-border-color
|
|
||||||
value: $grey-lighter
|
|
||||||
- name: $button-disabled-shadow
|
|
||||||
value: none
|
|
||||||
- name: $button-disabled-opacity
|
|
||||||
value: 0.5
|
|
||||||
- name: $button-static-color
|
|
||||||
value: $grey
|
|
||||||
- name: $button-static-background-color
|
|
||||||
value: $white-ter
|
|
||||||
- name: $button-static-border-color
|
|
||||||
value: $grey-lighter
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture button_example %}
|
{% capture button_example %}
|
||||||
@ -615,7 +572,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=button_group_addons_example %}
|
{% include snippet.html content=button_group_addons_example %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='element' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,39 +3,6 @@ title: Content
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: content
|
doc-subtab: content
|
||||||
variables:
|
|
||||||
- name: $content-heading-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $content-heading-weight
|
|
||||||
value: $weight-normal
|
|
||||||
- name: $content-heading-line-height
|
|
||||||
value: 1.125
|
|
||||||
- name: $content-blockquote-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $content-blockquote-border-left
|
|
||||||
value: 5px solid $border
|
|
||||||
- name: $content-blockquote-padding
|
|
||||||
value: 1.25em 1.5em
|
|
||||||
- name: $content-pre-padding
|
|
||||||
value: 1.25em 1.5em
|
|
||||||
- name: $content-table-cell-border
|
|
||||||
value: 1px solid $border
|
|
||||||
- name: $content-table-cell-border-width
|
|
||||||
value: 0 0 1px
|
|
||||||
- name: $content-table-cell-padding
|
|
||||||
value: 0.5em 0.75em
|
|
||||||
- name: $content-table-cell-heading-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $content-table-row-hover-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $content-table-head-cell-border-width
|
|
||||||
value: 0 0 2px
|
|
||||||
- name: $content-table-head-cell-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $content-table-foot-cell-border-width
|
|
||||||
value: 2px 0 0
|
|
||||||
- name: $content-table-foot-cell-color
|
|
||||||
value: $text-strong
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture content_pre %}
|
{% capture content_pre %}
|
||||||
@ -214,7 +181,7 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html element=true %}
|
{% include variables.html type='element' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -6,16 +6,6 @@ mdi: true
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: icon
|
doc-subtab: icon
|
||||||
variables:
|
|
||||||
- name: $icon-dimensions
|
|
||||||
value: 1.5rem
|
|
||||||
- name: $icon-dimensions-small
|
|
||||||
value: 1rem
|
|
||||||
- name: $icon-dimensions-medium
|
|
||||||
value: 2rem
|
|
||||||
- name: $icon-dimensions-large
|
|
||||||
value: 3rem
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture icon_example %}
|
{% capture icon_example %}
|
||||||
@ -954,7 +944,7 @@ variables:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='element' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -11,9 +11,6 @@ dimensions:
|
|||||||
- 64
|
- 64
|
||||||
- 96
|
- 96
|
||||||
- 128
|
- 128
|
||||||
variables:
|
|
||||||
- name: $dimensions
|
|
||||||
value: 16 24 32 48 64 96 128
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture image %}
|
{% capture image %}
|
||||||
@ -122,7 +119,7 @@ variables:
|
|||||||
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
|
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='element' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,13 +3,6 @@ title: Notification
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: notification
|
doc-subtab: notification
|
||||||
variables:
|
|
||||||
- name: $notification-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $notification-radius
|
|
||||||
value: $radius
|
|
||||||
- name: $notification-padding
|
|
||||||
value: 1.25rem 2.5rem 1.25rem 1.5rem
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture notification %}
|
{% capture notification %}
|
||||||
@ -22,7 +15,7 @@ variables:
|
|||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% capture notification_colors %}
|
{% capture notification_colors %}
|
||||||
{% for color in site.data.variables.justColors %}
|
{% for color in site.data.colors.justColors %}
|
||||||
<div class="notification is-{{ color }}">
|
<div class="notification is-{{ color }}">
|
||||||
<button class="delete"></button>
|
<button class="delete"></button>
|
||||||
Primar lorem ipsum dolor sit amet, consectetur
|
Primar lorem ipsum dolor sit amet, consectetur
|
||||||
@ -55,7 +48,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=notification_colors %}
|
{% include snippet.html content=notification_colors %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include variables.html type='element' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,11 +3,6 @@ title: Progress Bar
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: progress
|
doc-subtab: progress
|
||||||
variables:
|
|
||||||
- name: $progress-bar-background-color
|
|
||||||
value: $border
|
|
||||||
- name: $progress-value-background-color
|
|
||||||
value: $text
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture progress %}
|
{% capture progress %}
|
||||||
@ -57,7 +52,7 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=progress_sizes %}
|
{% include snippet.html content=progress_sizes %}
|
||||||
|
|
||||||
{% include variables.html element=true %}
|
{% include variables.html type='element' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,37 +3,6 @@ title: Table
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: table
|
doc-subtab: table
|
||||||
variables:
|
|
||||||
- name: $table-color
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $table-background-color
|
|
||||||
value: $white
|
|
||||||
- name: $table-cell-border
|
|
||||||
value: 1px solid $grey-lighter
|
|
||||||
- name: $table-cell-border-width
|
|
||||||
value: 0 0 1px
|
|
||||||
- name: $table-cell-padding
|
|
||||||
value: 0.5em 0.75em
|
|
||||||
- name: $table-cell-heading-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $table-head-cell-border-width
|
|
||||||
value: 0 0 2px
|
|
||||||
- name: $table-head-cell-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $table-foot-cell-border-width
|
|
||||||
value: 2px 0 0
|
|
||||||
- name: $table-foot-cell-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $table-row-hover-background-color
|
|
||||||
value: $white-bis
|
|
||||||
- name: $table-row-active-background-color
|
|
||||||
value: $primary
|
|
||||||
- name: $table-row-active-color
|
|
||||||
value: $primary-invert
|
|
||||||
- name: $table-striped-row-even-background-color
|
|
||||||
value: $white-bis
|
|
||||||
- name: $table-striped-row-even-hover-background-color
|
|
||||||
value: $white-ter
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture table_example %}
|
{% capture table_example %}
|
||||||
@ -623,7 +592,7 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html element=true %}
|
{% include variables.html type='element' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,15 +3,6 @@ title: Tags
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: tag
|
doc-subtab: tag
|
||||||
variables:
|
|
||||||
- name: $tag-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $tag-color
|
|
||||||
value: $text
|
|
||||||
- name: $tag-radius
|
|
||||||
value: $radius
|
|
||||||
- name: $tag-delete-margin
|
|
||||||
value: 1px
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture tag %}
|
{% capture tag %}
|
||||||
@ -456,6 +447,6 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html element=true %}
|
{% include variables.html type='element' %}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,27 +3,6 @@ title: Title and Subtitle
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: title
|
doc-subtab: title
|
||||||
variables:
|
|
||||||
- name: $title-color
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $title-size
|
|
||||||
value: $size-3
|
|
||||||
- name: $title-weight
|
|
||||||
value: $weight-semibold
|
|
||||||
- name: $title-strong-color
|
|
||||||
value: inherit
|
|
||||||
- name: $title-strong-weight
|
|
||||||
value: inherit
|
|
||||||
- name: $subtitle-color
|
|
||||||
value: $grey-dark
|
|
||||||
- name: $subtitle-size
|
|
||||||
value: $size-5
|
|
||||||
- name: $subtitle-weight
|
|
||||||
value: $weight-normal
|
|
||||||
- name: $subtitle-strong-color
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $subtitle-strong-weight
|
|
||||||
value: $weight-semibold
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture default %}
|
{% capture default %}
|
||||||
@ -203,7 +182,7 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html element=true %}
|
{% include variables.html type='element' %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -4,27 +4,17 @@ layout: documentation
|
|||||||
doc-tab: form
|
doc-tab: form
|
||||||
doc-subtab: file
|
doc-subtab: file
|
||||||
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||||
variables:
|
variables_keys:
|
||||||
- name: $file-border-color
|
- file-border-color
|
||||||
value: transparent
|
- file-radius
|
||||||
- name: $file-radius
|
- file-cta-background-color
|
||||||
value: $radius
|
- file-cta-color
|
||||||
- name: $file-cta-background-color
|
- file-cta-hover-color
|
||||||
value: $white-ter
|
- file-cta-active-color
|
||||||
- name: $file-cta-color
|
- file-name-border-color
|
||||||
value: $grey-dark
|
- file-name-border-style
|
||||||
- name: $file-cta-hover-color
|
- file-name-border-width
|
||||||
value: $grey-darker
|
- file-name-max-width
|
||||||
- name: $file-cta-active-color
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $file-name-border-color
|
|
||||||
value: $file-cta-background-color
|
|
||||||
- name: $file-name-border-style
|
|
||||||
value: solid
|
|
||||||
- name: $file-name-border-width
|
|
||||||
value: 1px 1px 1px 0
|
|
||||||
- name: $file-name-max-width
|
|
||||||
value: 16em
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture file %}
|
{% capture file %}
|
||||||
@ -749,7 +739,41 @@ variables:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html element=true %}
|
{% include anchor.html name="Variables" %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can use <a href="{{ site.github | append: '/blob/master/sass/elements/form.sass#L25,L36' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table is-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
{% for key in page.variables_keys %}
|
||||||
|
{% assign variable = site.data.variables.elements.form.vars[key] %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.name }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.value }}</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,21 +3,15 @@ title: Form controls
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: form
|
doc-tab: form
|
||||||
doc-subtab: general
|
doc-subtab: general
|
||||||
variables:
|
variables_controls_keys:
|
||||||
- name: $control-radius
|
- control-radius
|
||||||
value: $radius
|
- control-radius-small
|
||||||
- name: $control-radius-small
|
- control-padding-vertical
|
||||||
value: $radius-small
|
- control-padding-horizontal
|
||||||
- name: $control-padding-vertical
|
variables_form_keys:
|
||||||
value: calc(0.375em - 1px)
|
- label-color
|
||||||
- name: $control-padding-horizontal
|
- label-weight
|
||||||
value: calc(0.625em - 1px)
|
- help-size
|
||||||
- name: $label-color
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $label-weight
|
|
||||||
value: $weight-bold
|
|
||||||
- name: $help-size
|
|
||||||
value: $size-small
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture example %}
|
{% capture example %}
|
||||||
@ -1027,10 +1021,53 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=field_label_example horizontal=true more=true %}
|
{% include snippet.html content=field_label_example horizontal=true more=true %}
|
||||||
|
|
||||||
|
{% include anchor.html name="Variables" %}
|
||||||
|
|
||||||
{% capture custom_message %}Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
{% include variables.html custom_message = custom_message %}
|
<table class="table is-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
{% for key in page.variables_controls_keys %}
|
||||||
|
{% assign variable = site.data.variables.utilities.controls.vars[key] %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.name }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.value }}</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
{% for key in page.variables_form_keys %}
|
||||||
|
{% assign variable = site.data.variables.elements.form.vars[key] %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.name }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.value }}</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,37 +3,24 @@ title: Input
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: form
|
doc-tab: form
|
||||||
doc-subtab: input
|
doc-subtab: input
|
||||||
variables:
|
variables_keys:
|
||||||
- name: $input-color
|
- input-color
|
||||||
value: $grey-darker
|
- input-background-color
|
||||||
- name: $input-background-color
|
- input-border-color
|
||||||
value: $white
|
- input-shadow
|
||||||
- name: $input-border-color
|
- input-hover-color
|
||||||
value: $grey-lighter
|
- input-hover-border-color
|
||||||
- name: $input-shadow
|
- input-focus-color
|
||||||
value: inset 0 1px 2px rgba($black, 0.1)
|
- input-focus-border-color
|
||||||
- name: $input-hover-color
|
- input-focus-box-shadow-size
|
||||||
value: $grey-darker
|
- input-focus-box-shadow-color
|
||||||
- name: $input-hover-border-color
|
- input-disabled-color
|
||||||
value: $grey-light
|
- input-disabled-background-color
|
||||||
- name: $input-focus-color
|
- input-disabled-border-color
|
||||||
value: $grey-darker
|
- input-arrow
|
||||||
- name: $input-focus-border-color
|
- input-icon-color
|
||||||
value: $link
|
- input-icon-active-color
|
||||||
- name: $input-disabled-color
|
- input-radius
|
||||||
value: $text-light
|
|
||||||
- name: $input-disabled-background-color
|
|
||||||
value: $background
|
|
||||||
- name: $input-disabled-border-color
|
|
||||||
value: $background
|
|
||||||
- name: $input-arrow
|
|
||||||
value: $link
|
|
||||||
- name: $input-icon-color
|
|
||||||
value: $grey-lighter
|
|
||||||
- name: $input-icon-active-color
|
|
||||||
value: $grey
|
|
||||||
- name: $input-radius
|
|
||||||
value: $radius
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture input_example %}
|
{% capture input_example %}
|
||||||
@ -484,7 +471,41 @@ variables:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html element=true %}
|
{% include anchor.html name="Variables" %}
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can use <a href="{{ site.github | append: '/blob/master/sass/elements/form.sass#L1,L23' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table is-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
{% for key in page.variables_keys %}
|
||||||
|
{% assign variable = site.data.variables.elements.form.vars[key] %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.name }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.value }}</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,9 +3,6 @@ title: Footer
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: layout
|
doc-tab: layout
|
||||||
doc-subtab: footer
|
doc-subtab: footer
|
||||||
variables:
|
|
||||||
- name: $footer-background-color
|
|
||||||
value: $background
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-layout.html %}
|
{% include subnav-layout.html %}
|
||||||
@ -33,6 +30,6 @@ variables:
|
|||||||
|
|
||||||
{% include snippet.html content=footer_example horizontal=true more=true %}
|
{% include snippet.html content=footer_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include variables.html layout=true %}
|
{% include variables.html %}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
---
|
---
|
||||||
|
title: Level
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: layout
|
doc-tab: layout
|
||||||
doc-subtab: level
|
doc-subtab: level
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
---
|
---
|
||||||
|
title: Media Object
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: layout
|
doc-tab: layout
|
||||||
doc-subtab: media-object
|
doc-subtab: media-object
|
||||||
|
|||||||
@ -3,13 +3,6 @@ title: Section
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: layout
|
doc-tab: layout
|
||||||
doc-subtab: section
|
doc-subtab: section
|
||||||
variables:
|
|
||||||
- name: $section-padding
|
|
||||||
value: 3rem 1.5rem
|
|
||||||
- name: $section-padding-medium
|
|
||||||
value: 9rem 1.5rem
|
|
||||||
- name: $section-padding-large
|
|
||||||
value: 18rem 1.5rem
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-layout.html %}
|
{% include subnav-layout.html %}
|
||||||
@ -44,7 +37,7 @@ variables:
|
|||||||
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html layout=true %}
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -11,26 +11,19 @@ doc-subtab: responsive-helpers
|
|||||||
<th>
|
<th>
|
||||||
Class
|
Class
|
||||||
</th>
|
</th>
|
||||||
<th>
|
{% for breakpoint_hash in site.data.breakpoints %}
|
||||||
Mobile<br>
|
{% assign breakpoint = breakpoint_hash[1] %}
|
||||||
Up to <code>768px</code>
|
<th>
|
||||||
</th>
|
{{ breakpoint.name }}<br>
|
||||||
<th>
|
{% if breakpoint.id == 'mobile' %}
|
||||||
Tablet<br>
|
Up to <code>{{ breakpoint.to }}px</code>
|
||||||
Between <code>769px</code> and <code>1007px</code>
|
{% elsif breakpoint.id == 'fullhd' %}
|
||||||
</th>
|
<code>{{ breakpoint.from }}px</code> and above
|
||||||
<th>
|
{% else %}
|
||||||
Desktop<br>
|
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||||
Between <code>1008px</code> and <code>1199px</code>
|
{% endif %}
|
||||||
</th>
|
</th>
|
||||||
<th>
|
{% endfor %}
|
||||||
Widescreen<br>
|
|
||||||
Between <code>1200px</code> and <code>1391px</code>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
FullHD<br>
|
|
||||||
Above <code>1392px</code>
|
|
||||||
</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|||||||
@ -5,39 +5,35 @@ doc-tab: modifiers
|
|||||||
doc-subtab: typography-helpers
|
doc-subtab: typography-helpers
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
|
||||||
|
{% assign sizes = site.data.variables.utilities.derived-variables.vars.sizes.value | split: ' ' %}
|
||||||
|
|
||||||
{% capture thead %}
|
{% capture thead %}
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
Class
|
Class
|
||||||
</th>
|
</th>
|
||||||
<th>
|
{% for breakpoint_hash in site.data.breakpoints %}
|
||||||
Mobile<br>
|
{% assign breakpoint = breakpoint_hash[1] %}
|
||||||
Up to <code>768px</code>
|
<th>
|
||||||
</th>
|
{{ breakpoint.name }}<br>
|
||||||
<th>
|
{% if breakpoint.id == 'mobile' %}
|
||||||
Tablet<br>
|
Up to <code>{{ breakpoint.to }}px</code>
|
||||||
Between <code>769px</code> and <code>1007px</code>
|
{% elsif breakpoint.id == 'fullhd' %}
|
||||||
</th>
|
<code>{{ breakpoint.from }}px</code> and above
|
||||||
<th>
|
{% else %}
|
||||||
Desktop<br>
|
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||||
Between <code>1008px</code> and <code>1199px</code>
|
{% endif %}
|
||||||
</th>
|
</th>
|
||||||
<th>
|
{% endfor %}
|
||||||
Widescreen<br>
|
|
||||||
Between <code>1200px</code> and <code>1391px</code>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
FullHD<br>
|
|
||||||
Above <code>1392px</code>
|
|
||||||
</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% capture size1 %}
|
{% capture size1 %}
|
||||||
<td class="is-narrow">
|
<td class="is-narrow">
|
||||||
<p class="notification is-success"><code>3rem</code></p>
|
<p class="notification is-success"><code>{{ initial_vars.size-1.value }}</code></p>
|
||||||
</td>
|
</td>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
@ -66,7 +62,7 @@ doc-subtab: typography-helpers
|
|||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
There are <strong>7 sizes</strong> to choose from:
|
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -82,34 +78,13 @@ doc-subtab: typography-helpers
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
{% for size in sizes %}
|
||||||
<td><code>is-size-1</code></td>
|
<tr>
|
||||||
<td><code>3rem</code></td>
|
{% assign key = 'size-' | append: forloop.index %}
|
||||||
</tr>
|
<td><code>is-size-{{ forloop.index }}</code></td>
|
||||||
<tr>
|
<td><code>{{ initial_vars[key].value }}</code></td>
|
||||||
<td><code>is-size-2</code></td>
|
</tr>
|
||||||
<td><code>2.5rem</code></td>
|
{% endfor %}
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>is-size-3</code></td>
|
|
||||||
<td><code>2rem</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>is-size-4</code></td>
|
|
||||||
<td><code>1.5rem</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>is-size-5</code></td>
|
|
||||||
<td><code>1.25rem</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>is-size-6</code></td>
|
|
||||||
<td><code>1rem</code></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><code>is-size-7</code></td>
|
|
||||||
<td><code>0.75rem</code></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|||||||
@ -4,16 +4,16 @@ layout: documentation
|
|||||||
doc-tab: overview
|
doc-tab: overview
|
||||||
doc-subtab: colors
|
doc-subtab: colors
|
||||||
colors:
|
colors:
|
||||||
- id: "white"
|
- white
|
||||||
- id: "black"
|
- black
|
||||||
- id: "light"
|
- light
|
||||||
- id: "dark"
|
- dark
|
||||||
- id: "primary"
|
- primary
|
||||||
- id: "link"
|
- link
|
||||||
- id: "info"
|
- info
|
||||||
- id: "success"
|
- success
|
||||||
- id: "warning"
|
- warning
|
||||||
- id: "danger"
|
- danger
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-overview.html %}
|
{% include subnav-overview.html %}
|
||||||
@ -47,8 +47,8 @@ colors:
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for color in page.colors %}
|
{% for color in page.colors %}
|
||||||
{% assign derivedColor = site.data.variables.derived.colors | where: "id", color.id | first %}
|
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
|
||||||
{% assign initialColor = site.data.variables.initial.colors | where: "id", derivedColor.valueId | first %}
|
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<strong>{{ derivedColor.id | capitalize }}</strong>
|
<strong>{{ derivedColor.id | capitalize }}</strong>
|
||||||
@ -70,7 +70,7 @@ colors:
|
|||||||
{% include elements/color-square.html value=derivedColor.invertValue %}
|
{% include elements/color-square.html value=derivedColor.invertValue %}
|
||||||
</td>
|
</td>
|
||||||
{% elsif derivedColor.invertId %}
|
{% elsif derivedColor.invertId %}
|
||||||
{% assign invertColor = site.data.variables.initial.colors | where: "id", derivedColor.invertId | first %}
|
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
|
||||||
<td>
|
<td>
|
||||||
<code>${{ derivedColor.invertId }}</code>
|
<code>${{ derivedColor.invertId }}</code>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@ -16,7 +16,7 @@ doc-subtab: modular
|
|||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
Bulma consists of <strong>40</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
|
Bulma consists of <strong>39</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
For example, let's say you only want the Bulma <strong>columns.</strong>
|
For example, let's say you only want the Bulma <strong>columns.</strong>
|
||||||
|
|||||||
@ -3,17 +3,12 @@ title: Responsiveness
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: overview
|
doc-tab: overview
|
||||||
doc-subtab: responsiveness
|
doc-subtab: responsiveness
|
||||||
variables:
|
variables_keys:
|
||||||
- name: $gap
|
- gap
|
||||||
value: 32px
|
- tablet
|
||||||
- name: $tablet
|
- desktop
|
||||||
value: 769px
|
- widescreen
|
||||||
- name: $desktop
|
- fullhd
|
||||||
value: 960px + (2 * $gap)
|
|
||||||
- name: $widescreen
|
|
||||||
value: 1152px + (2 * $gap)
|
|
||||||
- name: $fullhd
|
|
||||||
value: 1344px + (2 * $gap)
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-overview.html %}
|
{% include subnav-overview.html %}
|
||||||
@ -47,7 +42,7 @@ variables:
|
|||||||
<ul>
|
<ul>
|
||||||
{% for breakpoint_hash in site.data.breakpoints %}
|
{% for breakpoint_hash in site.data.breakpoints %}
|
||||||
{% assign breakpoint = breakpoint_hash[1] %}
|
{% assign breakpoint = breakpoint_hash[1] %}
|
||||||
<li>{% if breakpoint.id == 'fullhd' %}<span class="tag is-success">New!</span> {% endif %}<code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'Mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
|
<li>{% if breakpoint.id == 'fullhd' %}<span class="tag is-success">New!</span> {% endif %}<code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
@ -190,9 +185,41 @@ variables:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% capture custom_message %}You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
|
{% include anchor.html name="Variables" %}
|
||||||
|
|
||||||
{% include variables.html custom_message = custom_message %}
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table is-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
{% for key in page.variables_keys %}
|
||||||
|
{% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.name }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.value }}</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -3,234 +3,6 @@ title: Variables
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: overview
|
doc-tab: overview
|
||||||
doc-subtab: variables
|
doc-subtab: variables
|
||||||
initial_colors:
|
|
||||||
- name: $black
|
|
||||||
value: hsl(0, 0%, 4%)
|
|
||||||
- name: $black-bis
|
|
||||||
value: hsl(0, 0%, 7%)
|
|
||||||
- name: $black-ter
|
|
||||||
value: hsl(0, 0%, 14%)
|
|
||||||
- name: $grey-darker
|
|
||||||
value: hsl(0, 0%, 21%)
|
|
||||||
- name: $grey-dark
|
|
||||||
value: hsl(0, 0%, 29%)
|
|
||||||
- name: $grey
|
|
||||||
value: hsl(0, 0%, 48%)
|
|
||||||
- name: $grey-light
|
|
||||||
value: hsl(0, 0%, 71%)
|
|
||||||
- name: $grey-lighter
|
|
||||||
value: hsl(0, 0%, 86%)
|
|
||||||
- name: $white-ter
|
|
||||||
value: hsl(0, 0%, 96%)
|
|
||||||
- name: $white-bis
|
|
||||||
value: hsl(0, 0%, 98%)
|
|
||||||
- name: $white
|
|
||||||
value: hsl(0, 0%, 100%)
|
|
||||||
- name: $orange
|
|
||||||
value: hsl(14, 100%, 53%)
|
|
||||||
- name: $yellow
|
|
||||||
value: hsl(48, 100%, 67%)
|
|
||||||
- name: $green
|
|
||||||
value: hsl(141, 71%, 48%)
|
|
||||||
- name: $turquoise
|
|
||||||
value: hsl(171, 100%, 41%)
|
|
||||||
- name: $cyan
|
|
||||||
value: hsl(204, 86%, 53%)
|
|
||||||
- name: $cyan
|
|
||||||
value: hsl(204, 86%, 53%)
|
|
||||||
- name: $blue
|
|
||||||
value: hsl(217, 71%, 53%)
|
|
||||||
- name: $purple
|
|
||||||
value: hsl(271, 100%, 71%)
|
|
||||||
- name: $red
|
|
||||||
value: hsl(348, 100%, 61%)
|
|
||||||
initial_variables:
|
|
||||||
- name: $family-sans-serif
|
|
||||||
value: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
|
|
||||||
- name: $family-monospace
|
|
||||||
value: monospace
|
|
||||||
- name: $render-mode
|
|
||||||
value: optimizeLegibility
|
|
||||||
- name: $size-1
|
|
||||||
value: 3rem
|
|
||||||
- name: $size-2
|
|
||||||
value: 2.5rem
|
|
||||||
- name: $size-3
|
|
||||||
value: 2rem
|
|
||||||
- name: $size-4
|
|
||||||
value: 1.5rem
|
|
||||||
- name: $size-5
|
|
||||||
value: 1.25rem
|
|
||||||
- name: $size-6
|
|
||||||
value: 1rem
|
|
||||||
- name: $size-7
|
|
||||||
value: 0.75rem
|
|
||||||
- name: $weight-light
|
|
||||||
value: 300
|
|
||||||
- name: $weight-normal
|
|
||||||
value: 400
|
|
||||||
- name: $weight-medium
|
|
||||||
value: 500
|
|
||||||
- name: $weight-semibold
|
|
||||||
value: 600
|
|
||||||
- name: $weight-bold
|
|
||||||
value: 700
|
|
||||||
- name: $gap
|
|
||||||
value: 32px
|
|
||||||
- name: $tablet
|
|
||||||
value: 769px
|
|
||||||
- name: $desktop
|
|
||||||
value: 960px + (2 * $gap)
|
|
||||||
- name: $widescreen
|
|
||||||
value: 1152px + (2 * $gap)
|
|
||||||
- name: $fullhd
|
|
||||||
value: 1344px + (2 * $gap)
|
|
||||||
- name: $easing
|
|
||||||
value: ease-out
|
|
||||||
- name: $radius-small
|
|
||||||
value: 2px
|
|
||||||
- name: $radius
|
|
||||||
value: 3px
|
|
||||||
- name: $radius-large
|
|
||||||
value: 5px
|
|
||||||
- name: $speed
|
|
||||||
value: 86ms
|
|
||||||
derived_variables:
|
|
||||||
- name: $primary
|
|
||||||
value: $turquoise
|
|
||||||
- name: $link
|
|
||||||
value: $blue
|
|
||||||
- name: $info
|
|
||||||
value: $cyan
|
|
||||||
- name: $success
|
|
||||||
value: $green
|
|
||||||
- name: $warning
|
|
||||||
value: $yellow
|
|
||||||
- name: $danger
|
|
||||||
value: $red
|
|
||||||
- name: $light
|
|
||||||
value: $white-ter
|
|
||||||
- name: $dark
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $orange-invert
|
|
||||||
value: findColorInvert($orange)
|
|
||||||
- name: $yellow-invert
|
|
||||||
value: findColorInvert($yellow)
|
|
||||||
- name: $green-invert
|
|
||||||
value: findColorInvert($green)
|
|
||||||
- name: $turquoise-invert
|
|
||||||
value: findColorInvert($turquoise)
|
|
||||||
- name: $blue-invert
|
|
||||||
value: findColorInvert($blue)
|
|
||||||
- name: $purple-invert
|
|
||||||
value: findColorInvert($purple)
|
|
||||||
- name: $red-invert
|
|
||||||
value: findColorInvert($red)
|
|
||||||
- name: $primary-invert
|
|
||||||
value: $turquoise-invert
|
|
||||||
- name: $info-invert
|
|
||||||
value: $blue-invert
|
|
||||||
- name: $success-invert
|
|
||||||
value: $green-invert
|
|
||||||
- name: $warning-invert
|
|
||||||
value: $yellow-invert
|
|
||||||
- name: $danger-invert
|
|
||||||
value: $red-invert
|
|
||||||
- name: $light-invert
|
|
||||||
value: $dark
|
|
||||||
- name: $dark-invert
|
|
||||||
value: $light
|
|
||||||
- name: $background
|
|
||||||
value: $white-ter
|
|
||||||
- name: $border
|
|
||||||
value: $grey-lighter
|
|
||||||
- name: $border-hover
|
|
||||||
value: $grey-light
|
|
||||||
- name: $text
|
|
||||||
value: $grey-dark
|
|
||||||
- name: $text-invert
|
|
||||||
value: findColorInvert($text)
|
|
||||||
- name: $text-light
|
|
||||||
value: $grey
|
|
||||||
- name: $text-strong
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $code
|
|
||||||
value: $red
|
|
||||||
- name: $code-background
|
|
||||||
value: $background
|
|
||||||
- name: $pre
|
|
||||||
value: $text
|
|
||||||
- name: $pre-background
|
|
||||||
value: $background
|
|
||||||
- name: $link
|
|
||||||
value: $blue
|
|
||||||
- name: $link-invert
|
|
||||||
value: $blue-invert
|
|
||||||
- name: $link-visited
|
|
||||||
value: $purple
|
|
||||||
- name: $link-hover
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $link-hover-border
|
|
||||||
value: $grey-light
|
|
||||||
- name: $link-focus
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $link-focus-border
|
|
||||||
value: $blue
|
|
||||||
- name: $link-active
|
|
||||||
value: $grey-darker
|
|
||||||
- name: $link-active-border
|
|
||||||
value: $grey-dark
|
|
||||||
- name: $family-primary
|
|
||||||
value: $family-sans-serif
|
|
||||||
- name: $family-code
|
|
||||||
value: $family-monospace
|
|
||||||
- name: $size-small
|
|
||||||
value: $size-7
|
|
||||||
- name: $size-normal
|
|
||||||
value: $size-6
|
|
||||||
- name: $size-medium
|
|
||||||
value: $size-5
|
|
||||||
- name: $size-large
|
|
||||||
value: $size-4
|
|
||||||
- name: $colors
|
|
||||||
value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))'
|
|
||||||
- name: $shades
|
|
||||||
value: '("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)'
|
|
||||||
- name: $sizes
|
|
||||||
value: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
|
|
||||||
generic_variables:
|
|
||||||
- name: $body-background-color
|
|
||||||
value: '#fff'
|
|
||||||
- name: $body-size
|
|
||||||
value: 16px
|
|
||||||
- name: $body-rendering
|
|
||||||
value: optimizeLegibility
|
|
||||||
- name: $body-family
|
|
||||||
value: $family-primary
|
|
||||||
- name: $body-color
|
|
||||||
value: $text
|
|
||||||
- name: $body-weight
|
|
||||||
value: $weight-normal
|
|
||||||
- name: $body-line-height
|
|
||||||
value: 1.5
|
|
||||||
- name: $code-family
|
|
||||||
value: $family-code
|
|
||||||
- name: $code-padding
|
|
||||||
value: 0.25em 0.5em 0.25em
|
|
||||||
- name: $code-weight
|
|
||||||
value: normal
|
|
||||||
- name: $code-size
|
|
||||||
value: 0.875em
|
|
||||||
- name: $hr-background-color
|
|
||||||
value: $border
|
|
||||||
- name: $hr-height
|
|
||||||
value: 1px
|
|
||||||
- name: $hr-margin
|
|
||||||
value: 1.5rem 0
|
|
||||||
- name: $strong-color
|
|
||||||
value: $text-strong
|
|
||||||
- name: $strong-weight
|
|
||||||
value: $weight-bold
|
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-overview.html %}
|
{% include subnav-overview.html %}
|
||||||
@ -241,6 +13,11 @@ generic_variables:
|
|||||||
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
|
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
|
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
|
||||||
|
{% assign initial_vars = initial_variables.vars %}
|
||||||
|
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
|
||||||
|
{% assign derived_vars = derived_variables.vars %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
|
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
|
||||||
@ -248,10 +25,10 @@ generic_variables:
|
|||||||
<li>
|
<li>
|
||||||
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
|
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>colors</strong>: <code>$blue: hsl(217, 71%, 53%)</code></li>
|
<li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}</code></li>
|
||||||
<li><strong>font sizes</strong>: <code>$size-1: 3rem</code></li>
|
<li><strong>font sizes</strong>: <code>{{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}</code></li>
|
||||||
<li><strong>dimensions</strong>: <code>$gap: 32px</code></li>
|
<li><strong>dimensions</strong>: <code>{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}</code></li>
|
||||||
<li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
|
<li><strong>other values</strong>: <code>{{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}</code> or <code>{{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
@ -260,25 +37,25 @@ generic_variables:
|
|||||||
<li>
|
<li>
|
||||||
<strong>Primary colors</strong> derived from the initial variables:
|
<strong>Primary colors</strong> derived from the initial variables:
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>$primary: $turquoise</code></li>
|
<li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}</code></li>
|
||||||
<li><code>$link: $blue</code></li>
|
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code></li>
|
||||||
<li><code>$info: $cyan</code></li>
|
<li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.value }}</code></li>
|
||||||
<li><code>$success: $green</code></li>
|
<li><code>{{ derived_vars.success.name }}: {{ derived_vars.success.value }}</code></li>
|
||||||
<li><code>$warning: $yellow</code></li>
|
<li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}</code></li>
|
||||||
<li><code>$danger: $red</code></li>
|
<li><code>{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}</code></li>
|
||||||
<li><code>$dark: $grey-darker</code></li>
|
<li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}</code></li>
|
||||||
<li><code>$text: $grey-dark</code></li>
|
<li><code>{{ derived_vars.text.name }}: {{ derived_vars.text.value }}</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><code>$background: $white-ter</code>: a general background color</li>
|
<li><code>{{ derived_vars.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</li>
|
||||||
<li><code>$link: $primary</code>: the links use the primary color</li>
|
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code>: the links use the primary color</li>
|
||||||
<li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
|
<li><code>{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}</code>: the primary font family is the sans-serif one</li>
|
||||||
<li>
|
<li>
|
||||||
<strong>Lists and maps</strong> which are collections so already defined variables:
|
<strong>Lists and maps</strong> which are collections so already defined variables:
|
||||||
<ul>
|
<ul>
|
||||||
<li><code>$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))</code></li>
|
<li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}</code></li>
|
||||||
<li><code>$shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)</code></li>
|
<li><code>{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}</code></li>
|
||||||
<li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
|
<li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -293,74 +70,52 @@ generic_variables:
|
|||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
These are variables with a <strong>literal</strong> value.
|
These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> with a <strong>literal</strong> value.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="table is-bordered is-striped">
|
<table class="table is-bordered is-striped">
|
||||||
{% for color in page.initial_colors %}
|
<tbody>
|
||||||
<tr>
|
{% for variable_hash in initial_vars %}
|
||||||
<td>
|
{% assign variable = variable_hash[1] %}
|
||||||
<code style="white-space: nowrap;">{{ color.name }}</code>
|
{% assign starts_with = variable.value | slice: 0, 3 %}
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<span class="bd-color" style="background: {{ color.value }};"></span>
|
|
||||||
<code>{{ color.value }}</code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
{% for variable in page.initial_variables %}
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code>{{ variable.value }}</code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{% include anchor.html name="Derived variables" %}
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<p>
|
|
||||||
These are variables with a value that <strong>references</strong> another variable.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table class="table is-bordered is-striped">
|
|
||||||
{% for variable in page.derived_variables %}
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<code>{{ variable.value }}</code>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{% include anchor.html name="Generic variables" %}
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<p>
|
|
||||||
The following generic variables are provided in <code>./sass/base/generic.sass</code>.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table class="table is-bordered is-striped">
|
|
||||||
{% for variable in page.generic_variables %}
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
{% if starts_with == 'hsl' %}
|
||||||
|
<span class="bd-color" style="background: {{ variable.value }};"></span>
|
||||||
|
{% endif %}
|
||||||
<code>{{ variable.value }}</code>
|
<code>{{ variable.value }}</code>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
<tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{% capture custom_message %}
|
||||||
|
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
|
||||||
|
{% endcapture %}
|
||||||
|
{%
|
||||||
|
include variables.html
|
||||||
|
anchor_name = 'Derived variables'
|
||||||
|
data = derived_variables
|
||||||
|
custom_message = custom_message
|
||||||
|
table_class = 'is-bordered is-striped'
|
||||||
|
%}
|
||||||
|
|
||||||
|
{% capture custom_message %}
|
||||||
|
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||||
|
{% endcapture %}
|
||||||
|
{%
|
||||||
|
include variables.html
|
||||||
|
anchor_name = 'Generic variables'
|
||||||
|
tab = 'base'
|
||||||
|
subtab = 'generic'
|
||||||
|
custom_message = custom_message
|
||||||
|
table_class = 'is-bordered is-striped'
|
||||||
|
%}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -84,7 +84,7 @@ images:
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for image in page.images %}
|
{% for image in page.images %}
|
||||||
{% assign imageUrl = "/images/made-with-bulma" | prepend: site.url }} | append: image.type | append: ".png" %}
|
{% assign imageUrl = "/images/made-with-bulma" | prepend: site.url | append: image.type | append: ".png" %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{ image.name }}</td>
|
<td>{{ image.name }}</td>
|
||||||
<td style="background: {{ image.bg }};"><img src="{{ imageUrl }}" alt="Made with Bulma" width="128" height="24"></td>
|
<td style="background: {{ image.bg }};"><img src="{{ imageUrl }}" alt="Made with Bulma" width="128" height="24"></td>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user