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 2017-10-17 12:28:59 +03:00 committed by Jeremy Thomas
parent e4fd1b7579
commit 1523ce8527
65 changed files with 2736 additions and 1158 deletions

152
docs/_data/colors.json Normal file
View 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"]
}

View File

@ -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"]
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View 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)"
}
}
}

View 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"
}
}
}

View 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"
}
}
}

View File

@ -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">
<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>
<p>{{ content | strip }}</p>
</div>
<table class="table is-bordered">
<table class="table {{ table_class }}">
<thead>
<tr>
<th>Name</th>
@ -20,7 +56,8 @@
</tr>
</tfoot>
<tbody>
{% for variable in page.variables %}
{% for variable_hash in variables %}
{% assign variable = variable_hash[1] %}
<tr>
<td>
<code>{{ variable.name }}</code>

View File

@ -1,16 +1,8 @@
---
title: Breadcrumb
layout: documentation
doc-tab: components
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 %}
@ -206,7 +198,7 @@ variables:
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -1,22 +1,8 @@
---
title: Card
layout: documentation
doc-tab: components
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 %}
@ -198,7 +184,7 @@ variables:
</div>
</div>
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -1,32 +1,8 @@
---
title: Dropdown
layout: documentation
doc-tab: components
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 %}
@ -368,7 +344,7 @@ variables:
</div>
</div>
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -1,24 +1,8 @@
---
title: Menu
layout: documentation
doc-tab: components
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 %}
@ -75,7 +59,7 @@ variables:
{% include snippet.html content=menu_example size="one-third" %}
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -1,32 +1,8 @@
---
title: Message
layout: documentation
doc-tab: components
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 %}
@ -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.
</div>
</article>
{% for color in site.data.variables.justColors %}
{% for color in site.data.colors.justColors %}
<article class="message is-{{ color }}">
<div class="message-header">
<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.
</div>
</article>
{% for color in site.data.variables.justColors %}
{% for color in site.data.colors.justColors %}
<article class="message is-{{ color }}">
<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.
@ -173,7 +149,7 @@ variables:
{% include snippet.html content=message_large %}
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -1,50 +1,8 @@
---
title: Modal
layout: documentation
doc-tab: components
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 %}
@ -169,7 +127,7 @@ variables:
{% highlight html %}{{ modal_card }}{% endhighlight %}
</div>
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -1,64 +1,8 @@
---
title: Navbar
layout: documentation
doc-tab: components
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 %}
@ -1072,7 +1016,7 @@ document.addEventListener('DOMContentLoaded', function () {
{% include examples/navbar-color.html color="white" light=true %}
</div>
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -1,40 +1,8 @@
---
title: Pagination
layout: documentation
doc-tab: components
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 %}
@ -238,7 +206,7 @@ variables:
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -1,46 +1,8 @@
---
title: Panel
layout: documentation
doc-tab: components
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 %}
@ -154,7 +116,7 @@ variables:
{% include snippet.html content=panel_example size="one-third" %}
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -1,56 +1,8 @@
---
title: Tabs
layout: documentation
doc-tab: components
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 %}
@ -453,7 +405,7 @@ variables:
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
{% include variables.html %}
{% include variables.html type='component' %}
</div>
</section>

View File

@ -3,21 +3,6 @@ title: Box
layout: documentation
doc-tab: elements
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 %}
@ -81,7 +66,7 @@ variables:
{% include snippet.html content=box_example more=true %}
{% include variables.html %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -3,49 +3,6 @@ title: Button
layout: documentation
doc-tab: elements
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 %}
@ -615,7 +572,7 @@ variables:
{% include snippet.html content=button_group_addons_example %}
{% include variables.html %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -3,39 +3,6 @@ title: Content
layout: documentation
doc-tab: elements
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 %}
@ -214,7 +181,7 @@ variables:
</div>
</div>
{% include variables.html element=true %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -6,16 +6,6 @@ mdi: true
layout: documentation
doc-tab: elements
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 %}
@ -954,7 +944,7 @@ variables:
</tbody>
</table>
{% include variables.html %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -11,9 +11,6 @@ dimensions:
- 64
- 96
- 128
variables:
- name: $dimensions
value: 16 24 32 48 64 96 128
---
{% 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>
</div>
{% include variables.html %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -3,13 +3,6 @@ title: Notification
layout: documentation
doc-tab: elements
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 %}
@ -22,7 +15,7 @@ variables:
{% endcapture %}
{% capture notification_colors %}
{% for color in site.data.variables.justColors %}
{% for color in site.data.colors.justColors %}
<div class="notification is-{{ color }}">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
@ -55,7 +48,7 @@ variables:
{% include snippet.html content=notification_colors %}
{% include variables.html %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -3,11 +3,6 @@ title: Progress Bar
layout: documentation
doc-tab: elements
doc-subtab: progress
variables:
- name: $progress-bar-background-color
value: $border
- name: $progress-value-background-color
value: $text
---
{% capture progress %}
@ -57,7 +52,7 @@ variables:
{% include snippet.html content=progress_sizes %}
{% include variables.html element=true %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -3,37 +3,6 @@ title: Table
layout: documentation
doc-tab: elements
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 %}
@ -623,7 +592,7 @@ variables:
</div>
</div>
{% include variables.html element=true %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -3,15 +3,6 @@ title: Tags
layout: documentation
doc-tab: elements
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 %}
@ -456,6 +447,6 @@ variables:
</div>
</div>
{% include variables.html element=true %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -3,27 +3,6 @@ title: Title and Subtitle
layout: documentation
doc-tab: elements
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 %}
@ -203,7 +182,7 @@ variables:
</div>
</div>
{% include variables.html element=true %}
{% include variables.html type='element' %}
</div>
</section>

View File

@ -4,27 +4,17 @@ layout: documentation
doc-tab: form
doc-subtab: file
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
variables:
- name: $file-border-color
value: transparent
- name: $file-radius
value: $radius
- name: $file-cta-background-color
value: $white-ter
- name: $file-cta-color
value: $grey-dark
- name: $file-cta-hover-color
value: $grey-darker
- 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
variables_keys:
- file-border-color
- file-radius
- file-cta-background-color
- file-cta-color
- file-cta-hover-color
- file-cta-active-color
- file-name-border-color
- file-name-border-style
- file-name-border-width
- file-name-max-width
---
{% capture file %}
@ -749,7 +739,41 @@ variables:
</p>
</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>
</section>

View File

@ -3,21 +3,15 @@ title: Form controls
layout: documentation
doc-tab: form
doc-subtab: general
variables:
- name: $control-radius
value: $radius
- name: $control-radius-small
value: $radius-small
- name: $control-padding-vertical
value: calc(0.375em - 1px)
- name: $control-padding-horizontal
value: calc(0.625em - 1px)
- name: $label-color
value: $grey-darker
- name: $label-weight
value: $weight-bold
- name: $help-size
value: $size-small
variables_controls_keys:
- control-radius
- control-radius-small
- control-padding-vertical
- control-padding-horizontal
variables_form_keys:
- label-color
- label-weight
- help-size
---
{% capture example %}
@ -1028,9 +1022,52 @@ variables:
{% include snippet.html content=field_label_example horizontal=true more=true %}
{% 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 %}
{% include anchor.html name="Variables" %}
{% include variables.html custom_message = custom_message %}
<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>
<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>
</section>

View File

@ -3,37 +3,24 @@ title: Input
layout: documentation
doc-tab: form
doc-subtab: input
variables:
- name: $input-color
value: $grey-darker
- name: $input-background-color
value: $white
- name: $input-border-color
value: $grey-lighter
- name: $input-shadow
value: inset 0 1px 2px rgba($black, 0.1)
- name: $input-hover-color
value: $grey-darker
- name: $input-hover-border-color
value: $grey-light
- name: $input-focus-color
value: $grey-darker
- name: $input-focus-border-color
value: $link
- name: $input-disabled-color
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
variables_keys:
- input-color
- input-background-color
- input-border-color
- input-shadow
- input-hover-color
- input-hover-border-color
- input-focus-color
- input-focus-border-color
- input-focus-box-shadow-size
- input-focus-box-shadow-color
- input-disabled-color
- input-disabled-background-color
- input-disabled-border-color
- input-arrow
- input-icon-color
- input-icon-active-color
- input-radius
---
{% capture input_example %}
@ -484,7 +471,41 @@ variables:
</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>
</section>

View File

@ -3,9 +3,6 @@ title: Footer
layout: documentation
doc-tab: layout
doc-subtab: footer
variables:
- name: $footer-background-color
value: $background
---
{% include subnav-layout.html %}
@ -33,6 +30,6 @@ variables:
{% include snippet.html content=footer_example horizontal=true more=true %}
{% include variables.html layout=true %}
{% include variables.html %}
</div>
</section>

View File

@ -1,4 +1,5 @@
---
title: Level
layout: documentation
doc-tab: layout
doc-subtab: level

View File

@ -1,4 +1,5 @@
---
title: Media Object
layout: documentation
doc-tab: layout
doc-subtab: media-object

View File

@ -3,13 +3,6 @@ title: Section
layout: documentation
doc-tab: layout
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 %}
@ -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>
</div>
{% include variables.html layout=true %}
{% include variables.html %}
</div>
</section>

View File

@ -11,26 +11,19 @@ doc-subtab: responsive-helpers
<th>
Class
</th>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th>
Mobile<br>
Up to <code>768px</code>
</th>
<th>
Tablet<br>
Between <code>769px</code> and <code>1007px</code>
</th>
<th>
Desktop<br>
Between <code>1008px</code> and <code>1199px</code>
</th>
<th>
Widescreen<br>
Between <code>1200px</code> and <code>1391px</code>
</th>
<th>
FullHD<br>
Above <code>1392px</code>
{{ breakpoint.name }}<br>
{% if breakpoint.id == 'mobile' %}
Up to <code>{{ breakpoint.to }}px</code>
{% elsif breakpoint.id == 'fullhd' %}
<code>{{ breakpoint.from }}px</code> and above
{% else %}
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endcapture %}

View File

@ -5,39 +5,35 @@ doc-tab: modifiers
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 %}
<thead>
<tr>
<th>
Class
</th>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th>
Mobile<br>
Up to <code>768px</code>
</th>
<th>
Tablet<br>
Between <code>769px</code> and <code>1007px</code>
</th>
<th>
Desktop<br>
Between <code>1008px</code> and <code>1199px</code>
</th>
<th>
Widescreen<br>
Between <code>1200px</code> and <code>1391px</code>
</th>
<th>
FullHD<br>
Above <code>1392px</code>
{{ breakpoint.name }}<br>
{% if breakpoint.id == 'mobile' %}
Up to <code>{{ breakpoint.to }}px</code>
{% elsif breakpoint.id == 'fullhd' %}
<code>{{ breakpoint.from }}px</code> and above
{% else %}
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
{% endif %}
</th>
{% endfor %}
</tr>
</thead>
{% endcapture %}
{% capture size1 %}
<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>
{% endcapture %}
@ -66,7 +62,7 @@ doc-subtab: typography-helpers
<div class="content">
<p>
There are <strong>7 sizes</strong> to choose from:
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
</p>
</div>
@ -82,34 +78,13 @@ doc-subtab: typography-helpers
</tr>
</thead>
<tbody>
{% for size in sizes %}
<tr>
<td><code>is-size-1</code></td>
<td><code>3rem</code></td>
</tr>
<tr>
<td><code>is-size-2</code></td>
<td><code>2.5rem</code></td>
</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>
{% assign key = 'size-' | append: forloop.index %}
<td><code>is-size-{{ forloop.index }}</code></td>
<td><code>{{ initial_vars[key].value }}</code></td>
</tr>
{% endfor %}
</tbody>
</table>

View File

@ -4,16 +4,16 @@ layout: documentation
doc-tab: overview
doc-subtab: colors
colors:
- id: "white"
- id: "black"
- id: "light"
- id: "dark"
- id: "primary"
- id: "link"
- id: "info"
- id: "success"
- id: "warning"
- id: "danger"
- white
- black
- light
- dark
- primary
- link
- info
- success
- warning
- danger
---
{% include subnav-overview.html %}
@ -47,8 +47,8 @@ colors:
</thead>
<tbody>
{% for color in page.colors %}
{% assign derivedColor = site.data.variables.derived.colors | where: "id", color.id | first %}
{% assign initialColor = site.data.variables.initial.colors | where: "id", derivedColor.valueId | first %}
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
<tr>
<td>
<strong>{{ derivedColor.id | capitalize }}</strong>
@ -70,7 +70,7 @@ colors:
{% include elements/color-square.html value=derivedColor.invertValue %}
</td>
{% 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>
<code>${{ derivedColor.invertId }}</code>
</td>

View File

@ -16,7 +16,7 @@ doc-subtab: modular
<div class="content">
<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>
For example, let's say you only want the Bulma <strong>columns.</strong>

View File

@ -3,17 +3,12 @@ title: Responsiveness
layout: documentation
doc-tab: overview
doc-subtab: responsiveness
variables:
- 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)
variables_keys:
- gap
- tablet
- desktop
- widescreen
- fullhd
---
{% include subnav-overview.html %}
@ -47,7 +42,7 @@ variables:
<ul>
{% for breakpoint_hash in site.data.breakpoints %}
{% 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 %}
</ul>
@ -190,9 +185,41 @@ variables:
</tbody>
</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>
</section>

View File

@ -3,234 +3,6 @@ title: Variables
layout: documentation
doc-tab: overview
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 %}
@ -242,16 +14,21 @@ generic_variables:
<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">
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
<ol>
<li>
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
<ul>
<li><strong>colors</strong>: <code>$blue: hsl(217, 71%, 53%)</code></li>
<li><strong>font sizes</strong>: <code>$size-1: 3rem</code></li>
<li><strong>dimensions</strong>: <code>$gap: 32px</code></li>
<li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
<li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}</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>{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}</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>
</li>
<li>
@ -260,25 +37,25 @@ generic_variables:
<li>
<strong>Primary colors</strong> derived from the initial variables:
<ul>
<li><code>$primary: $turquoise</code></li>
<li><code>$link: $blue</code></li>
<li><code>$info: $cyan</code></li>
<li><code>$success: $green</code></li>
<li><code>$warning: $yellow</code></li>
<li><code>$danger: $red</code></li>
<li><code>$dark: $grey-darker</code></li>
<li><code>$text: $grey-dark</code></li>
<li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}</code></li>
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code></li>
<li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.value }}</code></li>
<li><code>{{ derived_vars.success.name }}: {{ derived_vars.success.value }}</code></li>
<li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}</code></li>
<li><code>{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}</code></li>
<li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}</code></li>
<li><code>{{ derived_vars.text.name }}: {{ derived_vars.text.value }}</code></li>
</ul>
</li>
<li><code>$background: $white-ter</code>: a general background color</li>
<li><code>$link: $primary</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.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</li>
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code>: the links use the primary color</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>
<strong>Lists and maps</strong> which are collections so already defined variables:
<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>$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>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
<li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}</code></li>
<li><code>{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}</code></li>
<li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li>
</ul>
</li>
</ul>
@ -293,74 +70,52 @@ generic_variables:
<div class="content">
<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>
</div>
<table class="table is-bordered is-striped">
{% for color in page.initial_colors %}
<tr>
<td>
<code style="white-space: nowrap;">{{ color.name }}</code>
</td>
<td>
<span class="bd-color" style="background: {{ color.value }};"></span>
<code>{{ color.value }}</code>
</td>
</tr>
{% endfor %}
{% for variable in page.initial_variables %}
<tbody>
{% for variable_hash in initial_vars %}
{% assign variable = variable_hash[1] %}
{% assign starts_with = variable.value | slice: 0, 3 %}
<tr>
<td>
<code style="white-space: nowrap;">{{ variable.name }}</code>
</td>
<td>
{% if starts_with == 'hsl' %}
<span class="bd-color" style="background: {{ variable.value }};"></span>
{% endif %}
<code>{{ variable.value }}</code>
</td>
</tr>
{% endfor %}
<tbody>
</table>
{% include anchor.html name="Derived variables" %}
{% 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'
%}
<div class="content">
<p>
These are variables with a value that <strong>references</strong> another variable.
</p>
</div>
{% 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'
%}
<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>
<td>
<code style="white-space: nowrap;">{{ variable.name }}</code>
</td>
<td>
<code>{{ variable.value }}</code>
</td>
</tr>
{% endfor %}
</table>
</div>
</section>

View File

@ -84,7 +84,7 @@ images:
</thead>
<tbody>
{% 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>
<td>{{ image.name }}</td>
<td style="background: {{ image.bg }};"><img src="{{ imageUrl }}" alt="Made with Bulma" width="128" height="24"></td>