--- /dev/null
+{
+ "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"]
+}
\ No newline at end of file
+++ /dev/null
-{
- "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"]
-}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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)"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+{
+ "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"
+ }
+ }
+}
\ No newline at end of file
-{% 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>
</tr>
</tfoot>
<tbody>
- {% for variable in page.variables %}
+ {% for variable_hash in variables %}
+ {% assign variable = variable_hash[1] %}
<tr>
<td>
<code>{{ variable.name }}</code>
---
+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 %}
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
---
+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 %}
</div>
</div>
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
---
+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 %}
</div>
</div>
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
---
+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 %}
{% include snippet.html content=menu_example size="one-third" %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
---
+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 %}
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>
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.
{% include snippet.html content=message_large %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
---
+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 %}
{% highlight html %}{{ modal_card }}{% endhighlight %}
</div>
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
---
+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 %}
{% include examples/navbar-color.html color="white" light=true %}
</div>
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
---
+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 %}
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
---
+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 %}
{% include snippet.html content=panel_example size="one-third" %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
---
+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 %}
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
</div>
</section>
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 %}
{% include snippet.html content=box_example more=true %}
- {% include variables.html %}
+ {% include variables.html type='element' %}
</div>
</section>
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 %}
{% include snippet.html content=button_group_addons_example %}
- {% include variables.html %}
+ {% include variables.html type='element' %}
</div>
</section>
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 %}
</div>
</div>
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
</div>
</section>
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 %}
</tbody>
</table>
- {% include variables.html %}
+ {% include variables.html type='element' %}
</div>
</section>
- 64
- 96
- 128
-variables:
-- name: $dimensions
- value: 16 24 32 48 64 96 128
---
{% capture image %}
<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>
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 %}
{% 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
{% include snippet.html content=notification_colors %}
- {% include variables.html %}
+ {% include variables.html type='element' %}
</div>
</section>
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 %}
{% include snippet.html content=progress_sizes %}
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
</div>
</section>
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 %}
</div>
</div>
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
</div>
</section>
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 %}
</div>
</div>
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
</div>
</section>
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 %}
</div>
</div>
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
</div>
</section>
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 %}
</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>
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 %}
</div>
{% include snippet.html content=field_label_example horizontal=true more=true %}
+
+ {% include anchor.html name="Variables" %}
- {% capture custom_message %}Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
+ <div class="content">
+ <p>
+ Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+ </p>
+ </div>
- {% include variables.html custom_message = custom_message %}
+ <table class="table is-bordered">
+ <thead>
+ <tr>
+ <th>Name</th>
+ <th>Default value</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Name</th>
+ <th>Default value</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ {% for key in page.variables_controls_keys %}
+ {% assign variable = site.data.variables.utilities.controls.vars[key] %}
+ <tr>
+ <td>
+ <code>{{ variable.name }}</code>
+ </td>
+ <td>
+ <code>{{ variable.value }}</code>
+ </td>
+ </tr>
+ {% endfor %}
+ {% for key in page.variables_form_keys %}
+ {% assign variable = site.data.variables.elements.form.vars[key] %}
+ <tr>
+ <td>
+ <code>{{ variable.name }}</code>
+ </td>
+ <td>
+ <code>{{ variable.value }}</code>
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
</div>
</section>
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 %}
</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>
layout: documentation
doc-tab: layout
doc-subtab: footer
-variables:
-- name: $footer-background-color
- value: $background
---
{% include subnav-layout.html %}
{% include snippet.html content=footer_example horizontal=true more=true %}
- {% include variables.html layout=true %}
+ {% include variables.html %}
</div>
</section>
---
+title: Level
layout: documentation
doc-tab: layout
doc-subtab: level
---
+title: Media Object
layout: documentation
doc-tab: layout
doc-subtab: media-object
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 %}
<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>
<th>
Class
</th>
- <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>
- </th>
+ {% for breakpoint_hash in site.data.breakpoints %}
+ {% assign breakpoint = breakpoint_hash[1] %}
+ <th>
+ {{ 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 %}
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>
- <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>
- </th>
+ {% for breakpoint_hash in site.data.breakpoints %}
+ {% assign breakpoint = breakpoint_hash[1] %}
+ <th>
+ {{ 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 %}
<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>
</tr>
</thead>
<tbody>
- <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>
- </tr>
+ {% for size in sizes %}
+ <tr>
+ {% 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>
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 %}
</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>
{% 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>
<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>
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 %}
<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>
</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 variables.html custom_message = custom_message %}
+ {% include anchor.html name="Variables" %}
+
+ <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>
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 %}
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
<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>
<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>
<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>
<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 %}
- <tr>
- <td>
- <code style="white-space: nowrap;">{{ variable.name }}</code>
- </td>
- <td>
- <code>{{ variable.value }}</code>
- </td>
- </tr>
- {% endfor %}
- </table>
-
- {% include anchor.html name="Derived variables" %}
-
- <div class="content">
- <p>
- These are variables with a value that <strong>references</strong> another variable.
- </p>
- </div>
-
- <table class="table is-bordered is-striped">
- {% for variable in page.derived_variables %}
- <tr>
- <td>
- <code style="white-space: nowrap;">{{ variable.name }}</code>
- </td>
- <td>
- <code>{{ variable.value }}</code>
- </td>
- </tr>
- {% endfor %}
- </table>
-
- {% include anchor.html name="Generic variables" %}
-
- <div class="content">
- <p>
- The following generic variables are provided in <code>./sass/base/generic.sass</code>.
- </p>
- </div>
-
- <table class="table is-bordered is-striped">
- {% for variable in page.generic_variables %}
+ <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>
+
+ {% capture custom_message %}
+ These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
+ {% endcapture %}
+ {%
+ include variables.html
+ anchor_name = 'Derived variables'
+ data = derived_variables
+ custom_message = custom_message
+ table_class = 'is-bordered is-striped'
+ %}
+
+ {% capture custom_message %}
+ You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+ {% endcapture %}
+ {%
+ include variables.html
+ anchor_name = 'Generic variables'
+ tab = 'base'
+ subtab = 'generic'
+ custom_message = custom_message
+ table_class = 'is-bordered is-striped'
+ %}
+
</div>
</section>
</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>
projects / thirdparty / bulma.git / commitdiff
