diff --git a/docs/_data/colors.json b/docs/_data/colors.json
new file mode 100644
index 00000000..659b1856
--- /dev/null
+++ b/docs/_data/colors.json
@@ -0,0 +1,152 @@
+{
+ "initial": [
+ {
+ "id":"black",
+ "name":"Black",
+ "value": "hsl(0, 0%, 4%)"
+ },
+ {
+ "id":"black-bis",
+ "name":"Black bis",
+ "value": "hsl(0, 0%, 7%)"
+ },
+ {
+ "id":"black-ter",
+ "name":"Black ter",
+ "value": "hsl(0, 0%, 14%)"
+ },
+ {
+ "id":"grey-darker",
+ "name":"Grey darker",
+ "value": "hsl(0, 0%, 21%)"
+ },
+ {
+ "id":"grey-dark",
+ "name":"Grey dark",
+ "value": "hsl(0, 0%, 29%)"
+ },
+ {
+ "id":"grey",
+ "name":"Grey",
+ "value": "hsl(0, 0%, 48%)"
+ },
+ {
+ "id":"grey-light",
+ "name":"Grey light",
+ "value": "hsl(0, 0%, 71%)"
+ },
+ {
+ "id":"grey-lighter",
+ "name":"Grey lighter",
+ "value": "hsl(0, 0%, 86%)"
+ },
+ {
+ "id":"white-ter",
+ "name":"White ter",
+ "value": "hsl(0, 0%, 96%)"
+ },
+ {
+ "id":"white-bis",
+ "name":"White bis",
+ "value": "hsl(0, 0%, 98%)"
+ },
+ {
+ "id":"white",
+ "name":"White",
+ "value": "hsl(0, 0%, 100%)"
+ },
+ {
+ "id":"orange",
+ "name":"Orange",
+ "value": "hsl(14, 100%, 53%)"
+ },
+ {
+ "id":"yellow",
+ "name":"Yellow",
+ "value": "hsl(48, 100%, 67%)"
+ },
+ {
+ "id":"green",
+ "name":"Green",
+ "value": "hsl(141, 71%, 48%)"
+ },
+ {
+ "id":"turquoise",
+ "name":"Turquoise",
+ "value": "hsl(171, 100%, 41%)"
+ },
+ {
+ "id":"cyan",
+ "name":"Cyan",
+ "value": "hsl(204, 86%, 53%)"
+ },
+ {
+ "id":"blue",
+ "name":"Blue",
+ "value": "hsl(217, 71%, 53%)"
+ },
+ {
+ "id":"purple",
+ "name":"Purple",
+ "value": "hsl(271, 100%, 71%)"
+ },
+ {
+ "id":"red",
+ "name":"red",
+ "value": "hsl(348, 100%, 61%)"
+ }
+ ],
+ "derived": [
+ {
+ "id": "white",
+ "valueId": "white",
+ "invertId": "black"
+ },
+ {
+ "id": "black",
+ "valueId": "black",
+ "invertId": "white"
+ },
+ {
+ "id": "light",
+ "valueId": "white-ter",
+ "invertId": "grey-darker"
+ },
+ {
+ "id": "dark",
+ "valueId": "grey-darker",
+ "invertId": "white-ter"
+ },
+ {
+ "id": "primary",
+ "valueId": "turquoise",
+ "invertValue": "#fff"
+ },
+ {
+ "id": "link",
+ "valueId": "blue",
+ "invertValue": "#fff"
+ },
+ {
+ "id": "info",
+ "valueId": "cyan",
+ "invertValue": "#fff"
+ },
+ {
+ "id": "success",
+ "valueId": "green",
+ "invertValue": "#fff"
+ },
+ {
+ "id": "warning",
+ "valueId": "yellow",
+ "invertValue": "rgba(0, 0, 0, 0.7)"
+ },
+ {
+ "id": "danger",
+ "valueId": "red",
+ "invertValue": "#fff"
+ }
+ ],
+ "justColors": ["primary", "link", "info", "success", "warning", "danger"]
+}
\ No newline at end of file
diff --git a/docs/_data/variables.json b/docs/_data/variables.json
deleted file mode 100644
index 7f463a81..00000000
--- a/docs/_data/variables.json
+++ /dev/null
@@ -1,156 +0,0 @@
-{
- "initial": {
- "colors": [
- {
- "id":"black",
- "name":"Black",
- "value": "hsl(0, 0%, 4%)"
- },
- {
- "id":"black-bis",
- "name":"Black bis",
- "value": "hsl(0, 0%, 7%)"
- },
- {
- "id":"black-ter",
- "name":"Black ter",
- "value": "hsl(0, 0%, 14%)"
- },
- {
- "id":"grey-darker",
- "name":"Grey darker",
- "value": "hsl(0, 0%, 21%)"
- },
- {
- "id":"grey-dark",
- "name":"Grey dark",
- "value": "hsl(0, 0%, 29%)"
- },
- {
- "id":"grey",
- "name":"Grey",
- "value": "hsl(0, 0%, 48%)"
- },
- {
- "id":"grey-light",
- "name":"Grey light",
- "value": "hsl(0, 0%, 71%)"
- },
- {
- "id":"grey-lighter",
- "name":"Grey lighter",
- "value": "hsl(0, 0%, 86%)"
- },
- {
- "id":"white-ter",
- "name":"White ter",
- "value": "hsl(0, 0%, 96%)"
- },
- {
- "id":"white-bis",
- "name":"White bis",
- "value": "hsl(0, 0%, 98%)"
- },
- {
- "id":"white",
- "name":"White",
- "value": "hsl(0, 0%, 100%)"
- },
- {
- "id":"orange",
- "name":"Orange",
- "value": "hsl(14, 100%, 53%)"
- },
- {
- "id":"yellow",
- "name":"Yellow",
- "value": "hsl(48, 100%, 67%)"
- },
- {
- "id":"green",
- "name":"Green",
- "value": "hsl(141, 71%, 48%)"
- },
- {
- "id":"turquoise",
- "name":"Turquoise",
- "value": "hsl(171, 100%, 41%)"
- },
- {
- "id":"cyan",
- "name":"Cyan",
- "value": "hsl(204, 86%, 53%)"
- },
- {
- "id":"blue",
- "name":"Blue",
- "value": "hsl(217, 71%, 53%)"
- },
- {
- "id":"purple",
- "name":"Purple",
- "value": "hsl(271, 100%, 71%)"
- },
- {
- "id":"red",
- "name":"red",
- "value": "hsl(348, 100%, 61%)"
- }
- ],
- },
- "derived": {
- "colors": [
- {
- "id": "white",
- "valueId": "white",
- "invertId": "black"
- },
- {
- "id": "black",
- "valueId": "black",
- "invertId": "white"
- },
- {
- "id": "light",
- "valueId": "white-ter",
- "invertId": "grey-darker"
- },
- {
- "id": "dark",
- "valueId": "grey-darker",
- "invertId": "white-ter"
- },
- {
- "id": "primary",
- "valueId": "turquoise",
- "invertValue": "#fff"
- },
- {
- "id": "link",
- "valueId": "blue",
- "invertValue": "#fff"
- },
- {
- "id": "info",
- "valueId": "cyan",
- "invertValue": "#fff"
- },
- {
- "id": "success",
- "valueId": "green",
- "invertValue": "#fff"
- },
- {
- "id": "warning",
- "valueId": "yellow",
- "invertValue": "rgba(0, 0, 0, 0.7)"
- },
- {
- "id": "danger",
- "valueId": "red",
- "invertValue": "#fff"
- }
- ]
- },
- "justColors": ["primary", "link", "info", "success", "warning", "danger"]
-}
\ No newline at end of file
diff --git a/docs/_data/variables/base/generic.json b/docs/_data/variables/base/generic.json
new file mode 100644
index 00000000..408037cf
--- /dev/null
+++ b/docs/_data/variables/base/generic.json
@@ -0,0 +1,90 @@
+{
+ "dir_name": "base",
+ "file_name": "generic",
+ "file_relative_path": "base/generic.sass",
+ "file_line_from": 1,
+ "file_line_to": 19,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass#L1,L19",
+ "vars": {
+ "body-background-color": {
+ "id": "body-background-color",
+ "name": "$body-background-color",
+ "value": "#fff"
+ },
+ "body-size": {
+ "id": "body-size",
+ "name": "$body-size",
+ "value": "16px"
+ },
+ "body-rendering": {
+ "id": "body-rendering",
+ "name": "$body-rendering",
+ "value": "optimizeLegibility"
+ },
+ "body-family": {
+ "id": "body-family",
+ "name": "$body-family",
+ "value": "$family-primary"
+ },
+ "body-color": {
+ "id": "body-color",
+ "name": "$body-color",
+ "value": "$text"
+ },
+ "body-weight": {
+ "id": "body-weight",
+ "name": "$body-weight",
+ "value": "$weight-normal"
+ },
+ "body-line-height": {
+ "id": "body-line-height",
+ "name": "$body-line-height",
+ "value": "1.5"
+ },
+ "code-family": {
+ "id": "code-family",
+ "name": "$code-family",
+ "value": "$family-code"
+ },
+ "code-padding": {
+ "id": "code-padding",
+ "name": "$code-padding",
+ "value": "0.25em 0.5em 0.25em"
+ },
+ "code-weight": {
+ "id": "code-weight",
+ "name": "$code-weight",
+ "value": "normal"
+ },
+ "code-size": {
+ "id": "code-size",
+ "name": "$code-size",
+ "value": "0.875em"
+ },
+ "hr-background-color": {
+ "id": "hr-background-color",
+ "name": "$hr-background-color",
+ "value": "$border"
+ },
+ "hr-height": {
+ "id": "hr-height",
+ "name": "$hr-height",
+ "value": "1px"
+ },
+ "hr-margin": {
+ "id": "hr-margin",
+ "name": "$hr-margin",
+ "value": "1.5rem 0"
+ },
+ "strong-color": {
+ "id": "strong-color",
+ "name": "$strong-color",
+ "value": "$text-strong"
+ },
+ "strong-weight": {
+ "id": "strong-weight",
+ "name": "$strong-weight",
+ "value": "$weight-bold"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/breadcrumb.json b/docs/_data/variables/components/breadcrumb.json
new file mode 100644
index 00000000..363004bd
--- /dev/null
+++ b/docs/_data/variables/components/breadcrumb.json
@@ -0,0 +1,30 @@
+{
+ "dir_name": "components",
+ "file_name": "breadcrumb",
+ "file_relative_path": "components/breadcrumb.sass",
+ "file_line_from": 1,
+ "file_line_to": 5,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/breadcrumb.sass#L1,L5",
+ "vars": {
+ "breadcrumb-item-color": {
+ "id": "breadcrumb-item-color",
+ "name": "$breadcrumb-item-color",
+ "value": "$link"
+ },
+ "breadcrumb-item-hover-color": {
+ "id": "breadcrumb-item-hover-color",
+ "name": "$breadcrumb-item-hover-color",
+ "value": "$link-hover"
+ },
+ "breadcrumb-item-active-color": {
+ "id": "breadcrumb-item-active-color",
+ "name": "$breadcrumb-item-active-color",
+ "value": "$text-strong"
+ },
+ "breadcrumb-item-separator-color": {
+ "id": "breadcrumb-item-separator-color",
+ "name": "$breadcrumb-item-separator-color",
+ "value": "$text"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/card.json b/docs/_data/variables/components/card.json
new file mode 100644
index 00000000..f22d53b9
--- /dev/null
+++ b/docs/_data/variables/components/card.json
@@ -0,0 +1,45 @@
+{
+ "dir_name": "components",
+ "file_name": "card",
+ "file_relative_path": "components/card.sass",
+ "file_line_from": 1,
+ "file_line_to": 9,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/card.sass#L1,L9",
+ "vars": {
+ "card-color": {
+ "id": "card-color",
+ "name": "$card-color",
+ "value": "$text"
+ },
+ "card-background-color": {
+ "id": "card-background-color",
+ "name": "$card-background-color",
+ "value": "$white"
+ },
+ "card-shadow": {
+ "id": "card-shadow",
+ "name": "$card-shadow",
+ "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+ },
+ "card-header-color": {
+ "id": "card-header-color",
+ "name": "$card-header-color",
+ "value": "$text-strong"
+ },
+ "card-header-shadow": {
+ "id": "card-header-shadow",
+ "name": "$card-header-shadow",
+ "value": "0 1px 2px rgba($black, 0.1)"
+ },
+ "card-header-weight": {
+ "id": "card-header-weight",
+ "name": "$card-header-weight",
+ "value": "$weight-bold"
+ },
+ "card-footer-border-top": {
+ "id": "card-footer-border-top",
+ "name": "$card-footer-border-top",
+ "value": "1px solid $border"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/dropdown.json b/docs/_data/variables/components/dropdown.json
new file mode 100644
index 00000000..7bfa9667
--- /dev/null
+++ b/docs/_data/variables/components/dropdown.json
@@ -0,0 +1,70 @@
+{
+ "dir_name": "components",
+ "file_name": "dropdown",
+ "file_relative_path": "components/dropdown.sass",
+ "file_line_from": 1,
+ "file_line_to": 14,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/dropdown.sass#L1,L14",
+ "vars": {
+ "dropdown-content-background-color": {
+ "id": "dropdown-content-background-color",
+ "name": "$dropdown-content-background-color",
+ "value": "$white"
+ },
+ "dropdown-content-arrow": {
+ "id": "dropdown-content-arrow",
+ "name": "$dropdown-content-arrow",
+ "value": "$link"
+ },
+ "dropdown-content-offset": {
+ "id": "dropdown-content-offset",
+ "name": "$dropdown-content-offset",
+ "value": "4px"
+ },
+ "dropdown-content-radius": {
+ "id": "dropdown-content-radius",
+ "name": "$dropdown-content-radius",
+ "value": "$radius"
+ },
+ "dropdown-content-shadow": {
+ "id": "dropdown-content-shadow",
+ "name": "$dropdown-content-shadow",
+ "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+ },
+ "dropdown-content-z": {
+ "id": "dropdown-content-z",
+ "name": "$dropdown-content-z",
+ "value": "20"
+ },
+ "dropdown-item-color": {
+ "id": "dropdown-item-color",
+ "name": "$dropdown-item-color",
+ "value": "$grey-dark"
+ },
+ "dropdown-item-hover-color": {
+ "id": "dropdown-item-hover-color",
+ "name": "$dropdown-item-hover-color",
+ "value": "$black"
+ },
+ "dropdown-item-hover-background-color": {
+ "id": "dropdown-item-hover-background-color",
+ "name": "$dropdown-item-hover-background-color",
+ "value": "$background"
+ },
+ "dropdown-item-active-color": {
+ "id": "dropdown-item-active-color",
+ "name": "$dropdown-item-active-color",
+ "value": "$link-invert"
+ },
+ "dropdown-item-active-background-color": {
+ "id": "dropdown-item-active-background-color",
+ "name": "$dropdown-item-active-background-color",
+ "value": "$link"
+ },
+ "dropdown-divider-background-color": {
+ "id": "dropdown-divider-background-color",
+ "name": "$dropdown-divider-background-color",
+ "value": "$border"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/menu.json b/docs/_data/variables/components/menu.json
new file mode 100644
index 00000000..604a2850
--- /dev/null
+++ b/docs/_data/variables/components/menu.json
@@ -0,0 +1,50 @@
+{
+ "dir_name": "components",
+ "file_name": "menu",
+ "file_relative_path": "components/menu.sass",
+ "file_line_from": 1,
+ "file_line_to": 10,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/menu.sass#L1,L10",
+ "vars": {
+ "menu-item-color": {
+ "id": "menu-item-color",
+ "name": "$menu-item-color",
+ "value": "$text"
+ },
+ "menu-item-radius": {
+ "id": "menu-item-radius",
+ "name": "$menu-item-radius",
+ "value": "$radius-small"
+ },
+ "menu-item-hover-color": {
+ "id": "menu-item-hover-color",
+ "name": "$menu-item-hover-color",
+ "value": "$text-strong"
+ },
+ "menu-item-hover-background-color": {
+ "id": "menu-item-hover-background-color",
+ "name": "$menu-item-hover-background-color",
+ "value": "$background"
+ },
+ "menu-item-active-color": {
+ "id": "menu-item-active-color",
+ "name": "$menu-item-active-color",
+ "value": "$link-invert"
+ },
+ "menu-item-active-background-color": {
+ "id": "menu-item-active-background-color",
+ "name": "$menu-item-active-background-color",
+ "value": "$link"
+ },
+ "menu-list-border-left": {
+ "id": "menu-list-border-left",
+ "name": "$menu-list-border-left",
+ "value": "1px solid $border"
+ },
+ "menu-label-color": {
+ "id": "menu-label-color",
+ "name": "$menu-label-color",
+ "value": "$text-light"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/message.json b/docs/_data/variables/components/message.json
new file mode 100644
index 00000000..3c2c8053
--- /dev/null
+++ b/docs/_data/variables/components/message.json
@@ -0,0 +1,70 @@
+{
+ "dir_name": "components",
+ "file_name": "message",
+ "file_relative_path": "components/message.sass",
+ "file_line_from": 1,
+ "file_line_to": 15,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/message.sass#L1,L15",
+ "vars": {
+ "message-background-color": {
+ "id": "message-background-color",
+ "name": "$message-background-color",
+ "value": "$background"
+ },
+ "message-radius": {
+ "id": "message-radius",
+ "name": "$message-radius",
+ "value": "$radius"
+ },
+ "message-header-background-color": {
+ "id": "message-header-background-color",
+ "name": "$message-header-background-color",
+ "value": "$text"
+ },
+ "message-header-color": {
+ "id": "message-header-color",
+ "name": "$message-header-color",
+ "value": "$text-invert"
+ },
+ "message-header-padding": {
+ "id": "message-header-padding",
+ "name": "$message-header-padding",
+ "value": "0.5em 0.75em"
+ },
+ "message-header-radius": {
+ "id": "message-header-radius",
+ "name": "$message-header-radius",
+ "value": "$radius"
+ },
+ "message-body-border": {
+ "id": "message-body-border",
+ "name": "$message-body-border",
+ "value": "1px solid $border"
+ },
+ "message-body-color": {
+ "id": "message-body-color",
+ "name": "$message-body-color",
+ "value": "$text"
+ },
+ "message-body-padding": {
+ "id": "message-body-padding",
+ "name": "$message-body-padding",
+ "value": "1em 1.25em"
+ },
+ "message-body-radius": {
+ "id": "message-body-radius",
+ "name": "$message-body-radius",
+ "value": "$radius"
+ },
+ "message-body-pre-background-color": {
+ "id": "message-body-pre-background-color",
+ "name": "$message-body-pre-background-color",
+ "value": "$white"
+ },
+ "message-body-pre-code-background-color": {
+ "id": "message-body-pre-code-background-color",
+ "name": "$message-body-pre-code-background-color",
+ "value": "transparent"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/modal.json b/docs/_data/variables/components/modal.json
new file mode 100644
index 00000000..a9546c26
--- /dev/null
+++ b/docs/_data/variables/components/modal.json
@@ -0,0 +1,115 @@
+{
+ "dir_name": "components",
+ "file_name": "modal",
+ "file_relative_path": "components/modal.sass",
+ "file_line_from": 1,
+ "file_line_to": 29,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/modal.sass#L1,L29",
+ "vars": {
+ "modal-z": {
+ "id": "modal-z",
+ "name": "$modal-z",
+ "value": "20"
+ },
+ "modal-background-background-color": {
+ "id": "modal-background-background-color",
+ "name": "$modal-background-background-color",
+ "value": "rgba($black, 0.86)"
+ },
+ "modal-content-width": {
+ "id": "modal-content-width",
+ "name": "$modal-content-width",
+ "value": "640px"
+ },
+ "modal-content-margin-mobile": {
+ "id": "modal-content-margin-mobile",
+ "name": "$modal-content-margin-mobile",
+ "value": "20px"
+ },
+ "modal-content-spacing-mobile": {
+ "id": "modal-content-spacing-mobile",
+ "name": "$modal-content-spacing-mobile",
+ "value": "160px"
+ },
+ "modal-content-spacing-tablet": {
+ "id": "modal-content-spacing-tablet",
+ "name": "$modal-content-spacing-tablet",
+ "value": "40px"
+ },
+ "modal-close-dimensions": {
+ "id": "modal-close-dimensions",
+ "name": "$modal-close-dimensions",
+ "value": "40px"
+ },
+ "modal-close-right": {
+ "id": "modal-close-right",
+ "name": "$modal-close-right",
+ "value": "20px"
+ },
+ "modal-close-top": {
+ "id": "modal-close-top",
+ "name": "$modal-close-top",
+ "value": "20px"
+ },
+ "modal-card-spacing": {
+ "id": "modal-card-spacing",
+ "name": "$modal-card-spacing",
+ "value": "40px"
+ },
+ "modal-card-head-background-color": {
+ "id": "modal-card-head-background-color",
+ "name": "$modal-card-head-background-color",
+ "value": "$background"
+ },
+ "modal-card-head-border-bottom": {
+ "id": "modal-card-head-border-bottom",
+ "name": "$modal-card-head-border-bottom",
+ "value": "1px solid $border"
+ },
+ "modal-card-head-padding": {
+ "id": "modal-card-head-padding",
+ "name": "$modal-card-head-padding",
+ "value": "20px"
+ },
+ "modal-card-head-radius": {
+ "id": "modal-card-head-radius",
+ "name": "$modal-card-head-radius",
+ "value": "$radius-large"
+ },
+ "modal-card-title-color": {
+ "id": "modal-card-title-color",
+ "name": "$modal-card-title-color",
+ "value": "$text-strong"
+ },
+ "modal-card-title-line-height": {
+ "id": "modal-card-title-line-height",
+ "name": "$modal-card-title-line-height",
+ "value": "1"
+ },
+ "modal-card-title-size": {
+ "id": "modal-card-title-size",
+ "name": "$modal-card-title-size",
+ "value": "$size-4"
+ },
+ "modal-card-foot-radius": {
+ "id": "modal-card-foot-radius",
+ "name": "$modal-card-foot-radius",
+ "value": "$radius-large"
+ },
+ "modal-card-foot-border-top": {
+ "id": "modal-card-foot-border-top",
+ "name": "$modal-card-foot-border-top",
+ "value": "1px solid $border"
+ },
+ "modal-card-body-background-color": {
+ "id": "modal-card-body-background-color",
+ "name": "$modal-card-body-background-color",
+ "value": "$white"
+ },
+ "modal-card-body-padding": {
+ "id": "modal-card-body-padding",
+ "name": "$modal-card-body-padding",
+ "value": "20px"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/navbar.json b/docs/_data/variables/components/navbar.json
new file mode 100644
index 00000000..dce76507
--- /dev/null
+++ b/docs/_data/variables/components/navbar.json
@@ -0,0 +1,150 @@
+{
+ "dir_name": "components",
+ "file_name": "navbar",
+ "file_relative_path": "components/navbar.sass",
+ "file_line_from": 1,
+ "file_line_to": 34,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/navbar.sass#L1,L34",
+ "vars": {
+ "navbar-background-color": {
+ "id": "navbar-background-color",
+ "name": "$navbar-background-color",
+ "value": "$white"
+ },
+ "navbar-height": {
+ "id": "navbar-height",
+ "name": "$navbar-height",
+ "value": "3.25rem"
+ },
+ "navbar-item-color": {
+ "id": "navbar-item-color",
+ "name": "$navbar-item-color",
+ "value": "$grey-dark"
+ },
+ "navbar-item-hover-color": {
+ "id": "navbar-item-hover-color",
+ "name": "$navbar-item-hover-color",
+ "value": "$black"
+ },
+ "navbar-item-hover-background-color": {
+ "id": "navbar-item-hover-background-color",
+ "name": "$navbar-item-hover-background-color",
+ "value": "$background"
+ },
+ "navbar-item-active-color": {
+ "id": "navbar-item-active-color",
+ "name": "$navbar-item-active-color",
+ "value": "$black"
+ },
+ "navbar-item-active-background-color": {
+ "id": "navbar-item-active-background-color",
+ "name": "$navbar-item-active-background-color",
+ "value": "transparent"
+ },
+ "navbar-item-img-max-height": {
+ "id": "navbar-item-img-max-height",
+ "name": "$navbar-item-img-max-height",
+ "value": "1.75rem"
+ },
+ "navbar-tab-hover-background-color": {
+ "id": "navbar-tab-hover-background-color",
+ "name": "$navbar-tab-hover-background-color",
+ "value": "transparent"
+ },
+ "navbar-tab-hover-border-bottom-color": {
+ "id": "navbar-tab-hover-border-bottom-color",
+ "name": "$navbar-tab-hover-border-bottom-color",
+ "value": "$link"
+ },
+ "navbar-tab-active-color": {
+ "id": "navbar-tab-active-color",
+ "name": "$navbar-tab-active-color",
+ "value": "$link"
+ },
+ "navbar-tab-active-background-color": {
+ "id": "navbar-tab-active-background-color",
+ "name": "$navbar-tab-active-background-color",
+ "value": "transparent"
+ },
+ "navbar-tab-active-border-bottom-color": {
+ "id": "navbar-tab-active-border-bottom-color",
+ "name": "$navbar-tab-active-border-bottom-color",
+ "value": "$link"
+ },
+ "navbar-tab-active-border-bottom-style": {
+ "id": "navbar-tab-active-border-bottom-style",
+ "name": "$navbar-tab-active-border-bottom-style",
+ "value": "solid"
+ },
+ "navbar-tab-active-border-bottom-width": {
+ "id": "navbar-tab-active-border-bottom-width",
+ "name": "$navbar-tab-active-border-bottom-width",
+ "value": "3px"
+ },
+ "navbar-dropdown-background-color": {
+ "id": "navbar-dropdown-background-color",
+ "name": "$navbar-dropdown-background-color",
+ "value": "$white"
+ },
+ "navbar-dropdown-border-top": {
+ "id": "navbar-dropdown-border-top",
+ "name": "$navbar-dropdown-border-top",
+ "value": "1px solid $border"
+ },
+ "navbar-dropdown-offset": {
+ "id": "navbar-dropdown-offset",
+ "name": "$navbar-dropdown-offset",
+ "value": "-4px"
+ },
+ "navbar-dropdown-arrow": {
+ "id": "navbar-dropdown-arrow",
+ "name": "$navbar-dropdown-arrow",
+ "value": "$link"
+ },
+ "navbar-dropdown-radius": {
+ "id": "navbar-dropdown-radius",
+ "name": "$navbar-dropdown-radius",
+ "value": "$radius-large"
+ },
+ "navbar-dropdown-z": {
+ "id": "navbar-dropdown-z",
+ "name": "$navbar-dropdown-z",
+ "value": "20"
+ },
+ "navbar-dropdown-boxed-radius": {
+ "id": "navbar-dropdown-boxed-radius",
+ "name": "$navbar-dropdown-boxed-radius",
+ "value": "$radius-large"
+ },
+ "navbar-dropdown-boxed-shadow": {
+ "id": "navbar-dropdown-boxed-shadow",
+ "name": "$navbar-dropdown-boxed-shadow",
+ "value": "0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+ },
+ "navbar-dropdown-item-hover-color": {
+ "id": "navbar-dropdown-item-hover-color",
+ "name": "$navbar-dropdown-item-hover-color",
+ "value": "$black"
+ },
+ "navbar-dropdown-item-hover-background-color": {
+ "id": "navbar-dropdown-item-hover-background-color",
+ "name": "$navbar-dropdown-item-hover-background-color",
+ "value": "$background"
+ },
+ "navbar-dropdown-item-active-color": {
+ "id": "navbar-dropdown-item-active-color",
+ "name": "$navbar-dropdown-item-active-color",
+ "value": "$link"
+ },
+ "navbar-dropdown-item-active-background-color": {
+ "id": "navbar-dropdown-item-active-background-color",
+ "name": "$navbar-dropdown-item-active-background-color",
+ "value": "$background"
+ },
+ "navbar-divider-background-color": {
+ "id": "navbar-divider-background-color",
+ "name": "$navbar-divider-background-color",
+ "value": "$border"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/pagination.json b/docs/_data/variables/components/pagination.json
new file mode 100644
index 00000000..8e9e7d5d
--- /dev/null
+++ b/docs/_data/variables/components/pagination.json
@@ -0,0 +1,90 @@
+{
+ "dir_name": "components",
+ "file_name": "pagination",
+ "file_relative_path": "components/pagination.sass",
+ "file_line_from": 1,
+ "file_line_to": 22,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/pagination.sass#L1,L22",
+ "vars": {
+ "pagination-color": {
+ "id": "pagination-color",
+ "name": "$pagination-color",
+ "value": "$grey-darker"
+ },
+ "pagination-border-color": {
+ "id": "pagination-border-color",
+ "name": "$pagination-border-color",
+ "value": "$grey-lighter"
+ },
+ "pagination-margin": {
+ "id": "pagination-margin",
+ "name": "$pagination-margin",
+ "value": "-0.25rem"
+ },
+ "pagination-hover-color": {
+ "id": "pagination-hover-color",
+ "name": "$pagination-hover-color",
+ "value": "$link-hover"
+ },
+ "pagination-hover-border-color": {
+ "id": "pagination-hover-border-color",
+ "name": "$pagination-hover-border-color",
+ "value": "$link-hover-border"
+ },
+ "pagination-focus-color": {
+ "id": "pagination-focus-color",
+ "name": "$pagination-focus-color",
+ "value": "$link-focus"
+ },
+ "pagination-focus-border-color": {
+ "id": "pagination-focus-border-color",
+ "name": "$pagination-focus-border-color",
+ "value": "$link-focus-border"
+ },
+ "pagination-active-color": {
+ "id": "pagination-active-color",
+ "name": "$pagination-active-color",
+ "value": "$link-active"
+ },
+ "pagination-active-border-color": {
+ "id": "pagination-active-border-color",
+ "name": "$pagination-active-border-color",
+ "value": "$link-active-border"
+ },
+ "pagination-disabled-color": {
+ "id": "pagination-disabled-color",
+ "name": "$pagination-disabled-color",
+ "value": "$grey"
+ },
+ "pagination-disabled-background-color": {
+ "id": "pagination-disabled-background-color",
+ "name": "$pagination-disabled-background-color",
+ "value": "$grey-lighter"
+ },
+ "pagination-disabled-border-color": {
+ "id": "pagination-disabled-border-color",
+ "name": "$pagination-disabled-border-color",
+ "value": "$grey-lighter"
+ },
+ "pagination-current-color": {
+ "id": "pagination-current-color",
+ "name": "$pagination-current-color",
+ "value": "$link-invert"
+ },
+ "pagination-current-background-color": {
+ "id": "pagination-current-background-color",
+ "name": "$pagination-current-background-color",
+ "value": "$link"
+ },
+ "pagination-current-border-color": {
+ "id": "pagination-current-border-color",
+ "name": "$pagination-current-border-color",
+ "value": "$link"
+ },
+ "pagination-ellipsis-color": {
+ "id": "pagination-ellipsis-color",
+ "name": "$pagination-ellipsis-color",
+ "value": "$grey-light"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/panel.json b/docs/_data/variables/components/panel.json
new file mode 100644
index 00000000..45b8323d
--- /dev/null
+++ b/docs/_data/variables/components/panel.json
@@ -0,0 +1,105 @@
+{
+ "dir_name": "components",
+ "file_name": "panel",
+ "file_relative_path": "components/panel.sass",
+ "file_line_from": 1,
+ "file_line_to": 24,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/panel.sass#L1,L24",
+ "vars": {
+ "panel-item-border": {
+ "id": "panel-item-border",
+ "name": "$panel-item-border",
+ "value": "1px solid $border"
+ },
+ "panel-heading-background-color": {
+ "id": "panel-heading-background-color",
+ "name": "$panel-heading-background-color",
+ "value": "$background"
+ },
+ "panel-heading-color": {
+ "id": "panel-heading-color",
+ "name": "$panel-heading-color",
+ "value": "$text-strong"
+ },
+ "panel-heading-line-height": {
+ "id": "panel-heading-line-height",
+ "name": "$panel-heading-line-height",
+ "value": "1.25"
+ },
+ "panel-heading-padding": {
+ "id": "panel-heading-padding",
+ "name": "$panel-heading-padding",
+ "value": "0.5em 0.75em"
+ },
+ "panel-heading-radius": {
+ "id": "panel-heading-radius",
+ "name": "$panel-heading-radius",
+ "value": "$radius"
+ },
+ "panel-heading-size": {
+ "id": "panel-heading-size",
+ "name": "$panel-heading-size",
+ "value": "1.25em"
+ },
+ "panel-heading-weight": {
+ "id": "panel-heading-weight",
+ "name": "$panel-heading-weight",
+ "value": "$weight-light"
+ },
+ "panel-tab-border-bottom": {
+ "id": "panel-tab-border-bottom",
+ "name": "$panel-tab-border-bottom",
+ "value": "1px solid $border"
+ },
+ "panel-tab-active-border-bottom-color": {
+ "id": "panel-tab-active-border-bottom-color",
+ "name": "$panel-tab-active-border-bottom-color",
+ "value": "$link-active-border"
+ },
+ "panel-tab-active-color": {
+ "id": "panel-tab-active-color",
+ "name": "$panel-tab-active-color",
+ "value": "$link-active"
+ },
+ "panel-list-item-color": {
+ "id": "panel-list-item-color",
+ "name": "$panel-list-item-color",
+ "value": "$text"
+ },
+ "panel-list-item-hover-color": {
+ "id": "panel-list-item-hover-color",
+ "name": "$panel-list-item-hover-color",
+ "value": "$link"
+ },
+ "panel-block-color": {
+ "id": "panel-block-color",
+ "name": "$panel-block-color",
+ "value": "$text-strong"
+ },
+ "panel-block-hover-background-color": {
+ "id": "panel-block-hover-background-color",
+ "name": "$panel-block-hover-background-color",
+ "value": "$background"
+ },
+ "panel-block-active-border-left-color": {
+ "id": "panel-block-active-border-left-color",
+ "name": "$panel-block-active-border-left-color",
+ "value": "$link"
+ },
+ "panel-block-active-color": {
+ "id": "panel-block-active-color",
+ "name": "$panel-block-active-color",
+ "value": "$link-active"
+ },
+ "panel-block-active-icon-color": {
+ "id": "panel-block-active-icon-color",
+ "name": "$panel-block-active-icon-color",
+ "value": "$link"
+ },
+ "panel-icon-color": {
+ "id": "panel-icon-color",
+ "name": "$panel-icon-color",
+ "value": "$text-light"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/components/tabs.json b/docs/_data/variables/components/tabs.json
new file mode 100644
index 00000000..51fbbbad
--- /dev/null
+++ b/docs/_data/variables/components/tabs.json
@@ -0,0 +1,130 @@
+{
+ "dir_name": "components",
+ "file_name": "tabs",
+ "file_relative_path": "components/tabs.sass",
+ "file_line_from": 1,
+ "file_line_to": 27,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/components/tabs.sass#L1,L27",
+ "vars": {
+ "tabs-border-bottom-color": {
+ "id": "tabs-border-bottom-color",
+ "name": "$tabs-border-bottom-color",
+ "value": "$border"
+ },
+ "tabs-border-bottom-style": {
+ "id": "tabs-border-bottom-style",
+ "name": "$tabs-border-bottom-style",
+ "value": "solid"
+ },
+ "tabs-border-bottom-width": {
+ "id": "tabs-border-bottom-width",
+ "name": "$tabs-border-bottom-width",
+ "value": "1px"
+ },
+ "tabs-link-color": {
+ "id": "tabs-link-color",
+ "name": "$tabs-link-color",
+ "value": "$text"
+ },
+ "tabs-link-hover-border-bottom-color": {
+ "id": "tabs-link-hover-border-bottom-color",
+ "name": "$tabs-link-hover-border-bottom-color",
+ "value": "$text-strong"
+ },
+ "tabs-link-hover-color": {
+ "id": "tabs-link-hover-color",
+ "name": "$tabs-link-hover-color",
+ "value": "$text-strong"
+ },
+ "tabs-link-active-border-bottom-color": {
+ "id": "tabs-link-active-border-bottom-color",
+ "name": "$tabs-link-active-border-bottom-color",
+ "value": "$link"
+ },
+ "tabs-link-active-color": {
+ "id": "tabs-link-active-color",
+ "name": "$tabs-link-active-color",
+ "value": "$link"
+ },
+ "tabs-link-padding": {
+ "id": "tabs-link-padding",
+ "name": "$tabs-link-padding",
+ "value": "0.5em 1em"
+ },
+ "tabs-boxed-link-radius": {
+ "id": "tabs-boxed-link-radius",
+ "name": "$tabs-boxed-link-radius",
+ "value": "$radius"
+ },
+ "tabs-boxed-link-hover-background-color": {
+ "id": "tabs-boxed-link-hover-background-color",
+ "name": "$tabs-boxed-link-hover-background-color",
+ "value": "$background"
+ },
+ "tabs-boxed-link-hover-border-bottom-color": {
+ "id": "tabs-boxed-link-hover-border-bottom-color",
+ "name": "$tabs-boxed-link-hover-border-bottom-color",
+ "value": "$border"
+ },
+ "tabs-boxed-link-active-background-color": {
+ "id": "tabs-boxed-link-active-background-color",
+ "name": "$tabs-boxed-link-active-background-color",
+ "value": "$white"
+ },
+ "tabs-boxed-link-active-border-color": {
+ "id": "tabs-boxed-link-active-border-color",
+ "name": "$tabs-boxed-link-active-border-color",
+ "value": "$border"
+ },
+ "tabs-boxed-link-active-border-bottom-color": {
+ "id": "tabs-boxed-link-active-border-bottom-color",
+ "name": "$tabs-boxed-link-active-border-bottom-color",
+ "value": "transparent"
+ },
+ "tabs-toggle-link-border-color": {
+ "id": "tabs-toggle-link-border-color",
+ "name": "$tabs-toggle-link-border-color",
+ "value": "$border"
+ },
+ "tabs-toggle-link-border-style": {
+ "id": "tabs-toggle-link-border-style",
+ "name": "$tabs-toggle-link-border-style",
+ "value": "solid"
+ },
+ "tabs-toggle-link-border-width": {
+ "id": "tabs-toggle-link-border-width",
+ "name": "$tabs-toggle-link-border-width",
+ "value": "1px"
+ },
+ "tabs-toggle-link-hover-background-color": {
+ "id": "tabs-toggle-link-hover-background-color",
+ "name": "$tabs-toggle-link-hover-background-color",
+ "value": "$background"
+ },
+ "tabs-toggle-link-hover-border-color": {
+ "id": "tabs-toggle-link-hover-border-color",
+ "name": "$tabs-toggle-link-hover-border-color",
+ "value": "$border-hover"
+ },
+ "tabs-toggle-link-radius": {
+ "id": "tabs-toggle-link-radius",
+ "name": "$tabs-toggle-link-radius",
+ "value": "$radius"
+ },
+ "tabs-toggle-link-active-background-color": {
+ "id": "tabs-toggle-link-active-background-color",
+ "name": "$tabs-toggle-link-active-background-color",
+ "value": "$link"
+ },
+ "tabs-toggle-link-active-border-color": {
+ "id": "tabs-toggle-link-active-border-color",
+ "name": "$tabs-toggle-link-active-border-color",
+ "value": "$link"
+ },
+ "tabs-toggle-link-active-color": {
+ "id": "tabs-toggle-link-active-color",
+ "name": "$tabs-toggle-link-active-color",
+ "value": "$link-invert"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/box.json b/docs/_data/variables/elements/box.json
new file mode 100644
index 00000000..efe24cad
--- /dev/null
+++ b/docs/_data/variables/elements/box.json
@@ -0,0 +1,45 @@
+{
+ "dir_name": "elements",
+ "file_name": "box",
+ "file_relative_path": "elements/box.sass",
+ "file_line_from": 1,
+ "file_line_to": 8,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/box.sass#L1,L8",
+ "vars": {
+ "box-color": {
+ "id": "box-color",
+ "name": "$box-color",
+ "value": "$text"
+ },
+ "box-background-color": {
+ "id": "box-background-color",
+ "name": "$box-background-color",
+ "value": "$white"
+ },
+ "box-radius": {
+ "id": "box-radius",
+ "name": "$box-radius",
+ "value": "$radius-large"
+ },
+ "box-shadow": {
+ "id": "box-shadow",
+ "name": "$box-shadow",
+ "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)"
+ },
+ "box-padding": {
+ "id": "box-padding",
+ "name": "$box-padding",
+ "value": "1.25rem"
+ },
+ "box-link-hover-shadow": {
+ "id": "box-link-hover-shadow",
+ "name": "$box-link-hover-shadow",
+ "value": "0 2px 3px rgba($black, 0.1), 0 0 0 1px $link"
+ },
+ "box-link-active-shadow": {
+ "id": "box-link-active-shadow",
+ "name": "$box-link-active-shadow",
+ "value": "inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/button.json b/docs/_data/variables/elements/button.json
new file mode 100644
index 00000000..2b3fb4b0
--- /dev/null
+++ b/docs/_data/variables/elements/button.json
@@ -0,0 +1,115 @@
+{
+ "dir_name": "elements",
+ "file_name": "button",
+ "file_relative_path": "elements/button.sass",
+ "file_line_from": 1,
+ "file_line_to": 27,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/button.sass#L1,L27",
+ "vars": {
+ "button-color": {
+ "id": "button-color",
+ "name": "$button-color",
+ "value": "$grey-darker"
+ },
+ "button-background-color": {
+ "id": "button-background-color",
+ "name": "$button-background-color",
+ "value": "$white"
+ },
+ "button-border-color": {
+ "id": "button-border-color",
+ "name": "$button-border-color",
+ "value": "$grey-lighter"
+ },
+ "button-hover-color": {
+ "id": "button-hover-color",
+ "name": "$button-hover-color",
+ "value": "$link-hover"
+ },
+ "button-hover-border-color": {
+ "id": "button-hover-border-color",
+ "name": "$button-hover-border-color",
+ "value": "$link-hover-border"
+ },
+ "button-focus-color": {
+ "id": "button-focus-color",
+ "name": "$button-focus-color",
+ "value": "$link-focus"
+ },
+ "button-focus-border-color": {
+ "id": "button-focus-border-color",
+ "name": "$button-focus-border-color",
+ "value": "$link-focus-border"
+ },
+ "button-focus-box-shadow-size": {
+ "id": "button-focus-box-shadow-size",
+ "name": "$button-focus-box-shadow-size",
+ "value": "0 0 0 0.125em"
+ },
+ "button-focus-box-shadow-color": {
+ "id": "button-focus-box-shadow-color",
+ "name": "$button-focus-box-shadow-color",
+ "value": "rgba($link, 0.25)"
+ },
+ "button-active-color": {
+ "id": "button-active-color",
+ "name": "$button-active-color",
+ "value": "$link-active"
+ },
+ "button-active-border-color": {
+ "id": "button-active-border-color",
+ "name": "$button-active-border-color",
+ "value": "$link-active-border"
+ },
+ "button-text-color": {
+ "id": "button-text-color",
+ "name": "$button-text-color",
+ "value": "$text"
+ },
+ "button-text-hover-background-color": {
+ "id": "button-text-hover-background-color",
+ "name": "$button-text-hover-background-color",
+ "value": "$background"
+ },
+ "button-text-hover-color": {
+ "id": "button-text-hover-color",
+ "name": "$button-text-hover-color",
+ "value": "$text-strong"
+ },
+ "button-disabled-background-color": {
+ "id": "button-disabled-background-color",
+ "name": "$button-disabled-background-color",
+ "value": "$white"
+ },
+ "button-disabled-border-color": {
+ "id": "button-disabled-border-color",
+ "name": "$button-disabled-border-color",
+ "value": "$grey-lighter"
+ },
+ "button-disabled-shadow": {
+ "id": "button-disabled-shadow",
+ "name": "$button-disabled-shadow",
+ "value": "none"
+ },
+ "button-disabled-opacity": {
+ "id": "button-disabled-opacity",
+ "name": "$button-disabled-opacity",
+ "value": "0.5"
+ },
+ "button-static-color": {
+ "id": "button-static-color",
+ "name": "$button-static-color",
+ "value": "$grey"
+ },
+ "button-static-background-color": {
+ "id": "button-static-background-color",
+ "name": "$button-static-background-color",
+ "value": "$white-ter"
+ },
+ "button-static-border-color": {
+ "id": "button-static-border-color",
+ "name": "$button-static-border-color",
+ "value": "$grey-lighter"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/content.json b/docs/_data/variables/elements/content.json
new file mode 100644
index 00000000..8006a6d3
--- /dev/null
+++ b/docs/_data/variables/elements/content.json
@@ -0,0 +1,90 @@
+{
+ "dir_name": "elements",
+ "file_name": "content",
+ "file_relative_path": "elements/content.sass",
+ "file_line_from": 1,
+ "file_line_to": 19,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/content.sass#L1,L19",
+ "vars": {
+ "content-heading-color": {
+ "id": "content-heading-color",
+ "name": "$content-heading-color",
+ "value": "$text-strong"
+ },
+ "content-heading-weight": {
+ "id": "content-heading-weight",
+ "name": "$content-heading-weight",
+ "value": "$weight-normal"
+ },
+ "content-heading-line-height": {
+ "id": "content-heading-line-height",
+ "name": "$content-heading-line-height",
+ "value": "1.125"
+ },
+ "content-blockquote-background-color": {
+ "id": "content-blockquote-background-color",
+ "name": "$content-blockquote-background-color",
+ "value": "$background"
+ },
+ "content-blockquote-border-left": {
+ "id": "content-blockquote-border-left",
+ "name": "$content-blockquote-border-left",
+ "value": "5px solid $border"
+ },
+ "content-blockquote-padding": {
+ "id": "content-blockquote-padding",
+ "name": "$content-blockquote-padding",
+ "value": "1.25em 1.5em"
+ },
+ "content-pre-padding": {
+ "id": "content-pre-padding",
+ "name": "$content-pre-padding",
+ "value": "1.25em 1.5em"
+ },
+ "content-table-cell-border": {
+ "id": "content-table-cell-border",
+ "name": "$content-table-cell-border",
+ "value": "1px solid $border"
+ },
+ "content-table-cell-border-width": {
+ "id": "content-table-cell-border-width",
+ "name": "$content-table-cell-border-width",
+ "value": "0 0 1px"
+ },
+ "content-table-cell-padding": {
+ "id": "content-table-cell-padding",
+ "name": "$content-table-cell-padding",
+ "value": "0.5em 0.75em"
+ },
+ "content-table-cell-heading-color": {
+ "id": "content-table-cell-heading-color",
+ "name": "$content-table-cell-heading-color",
+ "value": "$text-strong"
+ },
+ "content-table-row-hover-background-color": {
+ "id": "content-table-row-hover-background-color",
+ "name": "$content-table-row-hover-background-color",
+ "value": "$background"
+ },
+ "content-table-head-cell-border-width": {
+ "id": "content-table-head-cell-border-width",
+ "name": "$content-table-head-cell-border-width",
+ "value": "0 0 2px"
+ },
+ "content-table-head-cell-color": {
+ "id": "content-table-head-cell-color",
+ "name": "$content-table-head-cell-color",
+ "value": "$text-strong"
+ },
+ "content-table-foot-cell-border-width": {
+ "id": "content-table-foot-cell-border-width",
+ "name": "$content-table-foot-cell-border-width",
+ "value": "2px 0 0"
+ },
+ "content-table-foot-cell-color": {
+ "id": "content-table-foot-cell-color",
+ "name": "$content-table-foot-cell-color",
+ "value": "$text-strong"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/form.json b/docs/_data/variables/elements/form.json
new file mode 100644
index 00000000..d49dac36
--- /dev/null
+++ b/docs/_data/variables/elements/form.json
@@ -0,0 +1,160 @@
+{
+ "dir_name": "elements",
+ "file_name": "form",
+ "file_relative_path": "elements/form.sass",
+ "file_line_from": 1,
+ "file_line_to": 41,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/form.sass#L1,L41",
+ "vars": {
+ "input-color": {
+ "id": "input-color",
+ "name": "$input-color",
+ "value": "$grey-darker"
+ },
+ "input-background-color": {
+ "id": "input-background-color",
+ "name": "$input-background-color",
+ "value": "$white"
+ },
+ "input-border-color": {
+ "id": "input-border-color",
+ "name": "$input-border-color",
+ "value": "$grey-lighter"
+ },
+ "input-shadow": {
+ "id": "input-shadow",
+ "name": "$input-shadow",
+ "value": "inset 0 1px 2px rgba($black, 0.1)"
+ },
+ "input-hover-color": {
+ "id": "input-hover-color",
+ "name": "$input-hover-color",
+ "value": "$grey-darker"
+ },
+ "input-hover-border-color": {
+ "id": "input-hover-border-color",
+ "name": "$input-hover-border-color",
+ "value": "$grey-light"
+ },
+ "input-focus-color": {
+ "id": "input-focus-color",
+ "name": "$input-focus-color",
+ "value": "$grey-darker"
+ },
+ "input-focus-border-color": {
+ "id": "input-focus-border-color",
+ "name": "$input-focus-border-color",
+ "value": "$link"
+ },
+ "input-focus-box-shadow-size": {
+ "id": "input-focus-box-shadow-size",
+ "name": "$input-focus-box-shadow-size",
+ "value": "0 0 0 0.125em"
+ },
+ "input-focus-box-shadow-color": {
+ "id": "input-focus-box-shadow-color",
+ "name": "$input-focus-box-shadow-color",
+ "value": "rgba($link, 0.25)"
+ },
+ "input-disabled-color": {
+ "id": "input-disabled-color",
+ "name": "$input-disabled-color",
+ "value": "$text-light"
+ },
+ "input-disabled-background-color": {
+ "id": "input-disabled-background-color",
+ "name": "$input-disabled-background-color",
+ "value": "$background"
+ },
+ "input-disabled-border-color": {
+ "id": "input-disabled-border-color",
+ "name": "$input-disabled-border-color",
+ "value": "$background"
+ },
+ "input-arrow": {
+ "id": "input-arrow",
+ "name": "$input-arrow",
+ "value": "$link"
+ },
+ "input-icon-color": {
+ "id": "input-icon-color",
+ "name": "$input-icon-color",
+ "value": "$grey-lighter"
+ },
+ "input-icon-active-color": {
+ "id": "input-icon-active-color",
+ "name": "$input-icon-active-color",
+ "value": "$grey"
+ },
+ "input-radius": {
+ "id": "input-radius",
+ "name": "$input-radius",
+ "value": "$radius"
+ },
+ "file-border-color": {
+ "id": "file-border-color",
+ "name": "$file-border-color",
+ "value": "$border"
+ },
+ "file-radius": {
+ "id": "file-radius",
+ "name": "$file-radius",
+ "value": "$radius"
+ },
+ "file-cta-background-color": {
+ "id": "file-cta-background-color",
+ "name": "$file-cta-background-color",
+ "value": "$white-ter"
+ },
+ "file-cta-color": {
+ "id": "file-cta-color",
+ "name": "$file-cta-color",
+ "value": "$grey-dark"
+ },
+ "file-cta-hover-color": {
+ "id": "file-cta-hover-color",
+ "name": "$file-cta-hover-color",
+ "value": "$grey-darker"
+ },
+ "file-cta-active-color": {
+ "id": "file-cta-active-color",
+ "name": "$file-cta-active-color",
+ "value": "$grey-darker"
+ },
+ "file-name-border-color": {
+ "id": "file-name-border-color",
+ "name": "$file-name-border-color",
+ "value": "$border"
+ },
+ "file-name-border-style": {
+ "id": "file-name-border-style",
+ "name": "$file-name-border-style",
+ "value": "solid"
+ },
+ "file-name-border-width": {
+ "id": "file-name-border-width",
+ "name": "$file-name-border-width",
+ "value": "1px 1px 1px 0"
+ },
+ "file-name-max-width": {
+ "id": "file-name-max-width",
+ "name": "$file-name-max-width",
+ "value": "16em"
+ },
+ "label-color": {
+ "id": "label-color",
+ "name": "$label-color",
+ "value": "$grey-darker"
+ },
+ "label-weight": {
+ "id": "label-weight",
+ "name": "$label-weight",
+ "value": "$weight-bold"
+ },
+ "help-size": {
+ "id": "help-size",
+ "name": "$help-size",
+ "value": "$size-small"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/icon.json b/docs/_data/variables/elements/icon.json
new file mode 100644
index 00000000..c9f2a14f
--- /dev/null
+++ b/docs/_data/variables/elements/icon.json
@@ -0,0 +1,30 @@
+{
+ "dir_name": "elements",
+ "file_name": "icon",
+ "file_relative_path": "elements/icon.sass",
+ "file_line_from": 1,
+ "file_line_to": 4,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/icon.sass#L1,L4",
+ "vars": {
+ "icon-dimensions": {
+ "id": "icon-dimensions",
+ "name": "$icon-dimensions",
+ "value": "1.5rem"
+ },
+ "icon-dimensions-small": {
+ "id": "icon-dimensions-small",
+ "name": "$icon-dimensions-small",
+ "value": "1rem"
+ },
+ "icon-dimensions-medium": {
+ "id": "icon-dimensions-medium",
+ "name": "$icon-dimensions-medium",
+ "value": "2rem"
+ },
+ "icon-dimensions-large": {
+ "id": "icon-dimensions-large",
+ "name": "$icon-dimensions-large",
+ "value": "3rem"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/image.json b/docs/_data/variables/elements/image.json
new file mode 100644
index 00000000..c07a913f
--- /dev/null
+++ b/docs/_data/variables/elements/image.json
@@ -0,0 +1,15 @@
+{
+ "dir_name": "elements",
+ "file_name": "image",
+ "file_relative_path": "elements/image.sass",
+ "file_line_from": 1,
+ "file_line_to": 1,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/image.sass#L1,L1",
+ "vars": {
+ "dimensions": {
+ "id": "dimensions",
+ "name": "$dimensions",
+ "value": "16 24 32 48 64 96 128"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/notification.json b/docs/_data/variables/elements/notification.json
new file mode 100644
index 00000000..f772a3cd
--- /dev/null
+++ b/docs/_data/variables/elements/notification.json
@@ -0,0 +1,25 @@
+{
+ "dir_name": "elements",
+ "file_name": "notification",
+ "file_relative_path": "elements/notification.sass",
+ "file_line_from": 1,
+ "file_line_to": 3,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/notification.sass#L1,L3",
+ "vars": {
+ "notification-background-color": {
+ "id": "notification-background-color",
+ "name": "$notification-background-color",
+ "value": "$background"
+ },
+ "notification-radius": {
+ "id": "notification-radius",
+ "name": "$notification-radius",
+ "value": "$radius"
+ },
+ "notification-padding": {
+ "id": "notification-padding",
+ "name": "$notification-padding",
+ "value": "1.25rem 2.5rem 1.25rem 1.5rem"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/progress.json b/docs/_data/variables/elements/progress.json
new file mode 100644
index 00000000..5a8df9aa
--- /dev/null
+++ b/docs/_data/variables/elements/progress.json
@@ -0,0 +1,20 @@
+{
+ "dir_name": "elements",
+ "file_name": "progress",
+ "file_relative_path": "elements/progress.sass",
+ "file_line_from": 1,
+ "file_line_to": 2,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/progress.sass#L1,L2",
+ "vars": {
+ "progress-bar-background-color": {
+ "id": "progress-bar-background-color",
+ "name": "$progress-bar-background-color",
+ "value": "$border"
+ },
+ "progress-value-background-color": {
+ "id": "progress-value-background-color",
+ "name": "$progress-value-background-color",
+ "value": "$text"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/table.json b/docs/_data/variables/elements/table.json
new file mode 100644
index 00000000..0c0b4044
--- /dev/null
+++ b/docs/_data/variables/elements/table.json
@@ -0,0 +1,85 @@
+{
+ "dir_name": "elements",
+ "file_name": "table",
+ "file_relative_path": "elements/table.sass",
+ "file_line_from": 1,
+ "file_line_to": 20,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/table.sass#L1,L20",
+ "vars": {
+ "table-color": {
+ "id": "table-color",
+ "name": "$table-color",
+ "value": "$grey-darker"
+ },
+ "table-background-color": {
+ "id": "table-background-color",
+ "name": "$table-background-color",
+ "value": "$white"
+ },
+ "table-cell-border": {
+ "id": "table-cell-border",
+ "name": "$table-cell-border",
+ "value": "1px solid $grey-lighter"
+ },
+ "table-cell-border-width": {
+ "id": "table-cell-border-width",
+ "name": "$table-cell-border-width",
+ "value": "0 0 1px"
+ },
+ "table-cell-padding": {
+ "id": "table-cell-padding",
+ "name": "$table-cell-padding",
+ "value": "0.5em 0.75em"
+ },
+ "table-cell-heading-color": {
+ "id": "table-cell-heading-color",
+ "name": "$table-cell-heading-color",
+ "value": "$text-strong"
+ },
+ "table-head-cell-border-width": {
+ "id": "table-head-cell-border-width",
+ "name": "$table-head-cell-border-width",
+ "value": "0 0 2px"
+ },
+ "table-head-cell-color": {
+ "id": "table-head-cell-color",
+ "name": "$table-head-cell-color",
+ "value": "$text-strong"
+ },
+ "table-foot-cell-border-width": {
+ "id": "table-foot-cell-border-width",
+ "name": "$table-foot-cell-border-width",
+ "value": "2px 0 0"
+ },
+ "table-foot-cell-color": {
+ "id": "table-foot-cell-color",
+ "name": "$table-foot-cell-color",
+ "value": "$text-strong"
+ },
+ "table-row-hover-background-color": {
+ "id": "table-row-hover-background-color",
+ "name": "$table-row-hover-background-color",
+ "value": "$white-bis"
+ },
+ "table-row-active-background-color": {
+ "id": "table-row-active-background-color",
+ "name": "$table-row-active-background-color",
+ "value": "$primary"
+ },
+ "table-row-active-color": {
+ "id": "table-row-active-color",
+ "name": "$table-row-active-color",
+ "value": "$primary-invert"
+ },
+ "table-striped-row-even-background-color": {
+ "id": "table-striped-row-even-background-color",
+ "name": "$table-striped-row-even-background-color",
+ "value": "$white-bis"
+ },
+ "table-striped-row-even-hover-background-color": {
+ "id": "table-striped-row-even-hover-background-color",
+ "name": "$table-striped-row-even-hover-background-color",
+ "value": "$white-ter"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/tag.json b/docs/_data/variables/elements/tag.json
new file mode 100644
index 00000000..51a593fd
--- /dev/null
+++ b/docs/_data/variables/elements/tag.json
@@ -0,0 +1,30 @@
+{
+ "dir_name": "elements",
+ "file_name": "tag",
+ "file_relative_path": "elements/tag.sass",
+ "file_line_from": 1,
+ "file_line_to": 4,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/tag.sass#L1,L4",
+ "vars": {
+ "tag-background-color": {
+ "id": "tag-background-color",
+ "name": "$tag-background-color",
+ "value": "$background"
+ },
+ "tag-color": {
+ "id": "tag-color",
+ "name": "$tag-color",
+ "value": "$text"
+ },
+ "tag-radius": {
+ "id": "tag-radius",
+ "name": "$tag-radius",
+ "value": "$radius"
+ },
+ "tag-delete-margin": {
+ "id": "tag-delete-margin",
+ "name": "$tag-delete-margin",
+ "value": "1px"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/elements/title.json b/docs/_data/variables/elements/title.json
new file mode 100644
index 00000000..5896a6c7
--- /dev/null
+++ b/docs/_data/variables/elements/title.json
@@ -0,0 +1,60 @@
+{
+ "dir_name": "elements",
+ "file_name": "title",
+ "file_relative_path": "elements/title.sass",
+ "file_line_from": 1,
+ "file_line_to": 11,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/elements/title.sass#L1,L11",
+ "vars": {
+ "title-color": {
+ "id": "title-color",
+ "name": "$title-color",
+ "value": "$grey-darker"
+ },
+ "title-size": {
+ "id": "title-size",
+ "name": "$title-size",
+ "value": "$size-3"
+ },
+ "title-weight": {
+ "id": "title-weight",
+ "name": "$title-weight",
+ "value": "$weight-semibold"
+ },
+ "title-strong-color": {
+ "id": "title-strong-color",
+ "name": "$title-strong-color",
+ "value": "inherit"
+ },
+ "title-strong-weight": {
+ "id": "title-strong-weight",
+ "name": "$title-strong-weight",
+ "value": "inherit"
+ },
+ "subtitle-color": {
+ "id": "subtitle-color",
+ "name": "$subtitle-color",
+ "value": "$grey-dark"
+ },
+ "subtitle-size": {
+ "id": "subtitle-size",
+ "name": "$subtitle-size",
+ "value": "$size-5"
+ },
+ "subtitle-weight": {
+ "id": "subtitle-weight",
+ "name": "$subtitle-weight",
+ "value": "$weight-normal"
+ },
+ "subtitle-strong-color": {
+ "id": "subtitle-strong-color",
+ "name": "$subtitle-strong-color",
+ "value": "$grey-darker"
+ },
+ "subtitle-strong-weight": {
+ "id": "subtitle-strong-weight",
+ "name": "$subtitle-strong-weight",
+ "value": "$weight-semibold"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/grid/columns.json b/docs/_data/variables/grid/columns.json
new file mode 100644
index 00000000..82dd7bf0
--- /dev/null
+++ b/docs/_data/variables/grid/columns.json
@@ -0,0 +1,15 @@
+{
+ "dir_name": "grid",
+ "file_name": "columns",
+ "file_relative_path": "grid/columns.sass",
+ "file_line_from": 1,
+ "file_line_to": 1,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/grid/columns.sass#L1,L1",
+ "vars": {
+ "column-gap": {
+ "id": "column-gap",
+ "name": "$column-gap",
+ "value": "0.75rem"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/layout/footer.json b/docs/_data/variables/layout/footer.json
new file mode 100644
index 00000000..214cb27c
--- /dev/null
+++ b/docs/_data/variables/layout/footer.json
@@ -0,0 +1,15 @@
+{
+ "dir_name": "layout",
+ "file_name": "footer",
+ "file_relative_path": "layout/footer.sass",
+ "file_line_from": 1,
+ "file_line_to": 1,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/layout/footer.sass#L1,L1",
+ "vars": {
+ "footer-background-color": {
+ "id": "footer-background-color",
+ "name": "$footer-background-color",
+ "value": "$background"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/layout/section.json b/docs/_data/variables/layout/section.json
new file mode 100644
index 00000000..b98fd3c0
--- /dev/null
+++ b/docs/_data/variables/layout/section.json
@@ -0,0 +1,25 @@
+{
+ "dir_name": "layout",
+ "file_name": "section",
+ "file_relative_path": "layout/section.sass",
+ "file_line_from": 1,
+ "file_line_to": 3,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/layout/section.sass#L1,L3",
+ "vars": {
+ "section-padding": {
+ "id": "section-padding",
+ "name": "$section-padding",
+ "value": "3rem 1.5rem"
+ },
+ "section-padding-medium": {
+ "id": "section-padding-medium",
+ "name": "$section-padding-medium",
+ "value": "9rem 1.5rem"
+ },
+ "section-padding-large": {
+ "id": "section-padding-large",
+ "name": "$section-padding-large",
+ "value": "18rem 1.5rem"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/utilities/controls.json b/docs/_data/variables/utilities/controls.json
new file mode 100644
index 00000000..d97a0cc8
--- /dev/null
+++ b/docs/_data/variables/utilities/controls.json
@@ -0,0 +1,30 @@
+{
+ "dir_name": "utilities",
+ "file_name": "controls",
+ "file_relative_path": "utilities/controls.sass",
+ "file_line_from": 1,
+ "file_line_to": 5,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/controls.sass#L1,L5",
+ "vars": {
+ "control-radius": {
+ "id": "control-radius",
+ "name": "$control-radius",
+ "value": "$radius"
+ },
+ "control-radius-small": {
+ "id": "control-radius-small",
+ "name": "$control-radius-small",
+ "value": "$radius-small"
+ },
+ "control-padding-vertical": {
+ "id": "control-padding-vertical",
+ "name": "$control-padding-vertical",
+ "value": "calc(0.375em - 1px)"
+ },
+ "control-padding-horizontal": {
+ "id": "control-padding-horizontal",
+ "name": "$control-padding-horizontal",
+ "value": "calc(0.625em - 1px)"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/utilities/derived-variables.json b/docs/_data/variables/utilities/derived-variables.json
new file mode 100644
index 00000000..8e1a0757
--- /dev/null
+++ b/docs/_data/variables/utilities/derived-variables.json
@@ -0,0 +1,265 @@
+{
+ "dir_name": "utilities",
+ "file_name": "derived-variables",
+ "file_relative_path": "utilities/derived-variables.sass",
+ "file_line_from": 1,
+ "file_line_to": 82,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/derived-variables.sass#L1,L82",
+ "vars": {
+ "primary": {
+ "id": "primary",
+ "name": "$primary",
+ "value": "$turquoise"
+ },
+ "info": {
+ "id": "info",
+ "name": "$info",
+ "value": "$cyan"
+ },
+ "success": {
+ "id": "success",
+ "name": "$success",
+ "value": "$green"
+ },
+ "warning": {
+ "id": "warning",
+ "name": "$warning",
+ "value": "$yellow"
+ },
+ "danger": {
+ "id": "danger",
+ "name": "$danger",
+ "value": "$red"
+ },
+ "light": {
+ "id": "light",
+ "name": "$light",
+ "value": "$white-ter"
+ },
+ "dark": {
+ "id": "dark",
+ "name": "$dark",
+ "value": "$grey-darker"
+ },
+ "orange-invert": {
+ "id": "orange-invert",
+ "name": "$orange-invert",
+ "value": "findColorInvert($orange)"
+ },
+ "yellow-invert": {
+ "id": "yellow-invert",
+ "name": "$yellow-invert",
+ "value": "findColorInvert($yellow)"
+ },
+ "green-invert": {
+ "id": "green-invert",
+ "name": "$green-invert",
+ "value": "findColorInvert($green)"
+ },
+ "turquoise-invert": {
+ "id": "turquoise-invert",
+ "name": "$turquoise-invert",
+ "value": "findColorInvert($turquoise)"
+ },
+ "cyan-invert": {
+ "id": "cyan-invert",
+ "name": "$cyan-invert",
+ "value": "findColorInvert($cyan)"
+ },
+ "blue-invert": {
+ "id": "blue-invert",
+ "name": "$blue-invert",
+ "value": "findColorInvert($blue)"
+ },
+ "purple-invert": {
+ "id": "purple-invert",
+ "name": "$purple-invert",
+ "value": "findColorInvert($purple)"
+ },
+ "red-invert": {
+ "id": "red-invert",
+ "name": "$red-invert",
+ "value": "findColorInvert($red)"
+ },
+ "primary-invert": {
+ "id": "primary-invert",
+ "name": "$primary-invert",
+ "value": "$turquoise-invert"
+ },
+ "info-invert": {
+ "id": "info-invert",
+ "name": "$info-invert",
+ "value": "$cyan-invert"
+ },
+ "success-invert": {
+ "id": "success-invert",
+ "name": "$success-invert",
+ "value": "$green-invert"
+ },
+ "warning-invert": {
+ "id": "warning-invert",
+ "name": "$warning-invert",
+ "value": "$yellow-invert"
+ },
+ "danger-invert": {
+ "id": "danger-invert",
+ "name": "$danger-invert",
+ "value": "$red-invert"
+ },
+ "light-invert": {
+ "id": "light-invert",
+ "name": "$light-invert",
+ "value": "$dark"
+ },
+ "dark-invert": {
+ "id": "dark-invert",
+ "name": "$dark-invert",
+ "value": "$light"
+ },
+ "background": {
+ "id": "background",
+ "name": "$background",
+ "value": "$white-ter"
+ },
+ "border": {
+ "id": "border",
+ "name": "$border",
+ "value": "$grey-lighter"
+ },
+ "border-hover": {
+ "id": "border-hover",
+ "name": "$border-hover",
+ "value": "$grey-light"
+ },
+ "text": {
+ "id": "text",
+ "name": "$text",
+ "value": "$grey-dark"
+ },
+ "text-invert": {
+ "id": "text-invert",
+ "name": "$text-invert",
+ "value": "findColorInvert($text)"
+ },
+ "text-light": {
+ "id": "text-light",
+ "name": "$text-light",
+ "value": "$grey"
+ },
+ "text-strong": {
+ "id": "text-strong",
+ "name": "$text-strong",
+ "value": "$grey-darker"
+ },
+ "code": {
+ "id": "code",
+ "name": "$code",
+ "value": "$red"
+ },
+ "code-background": {
+ "id": "code-background",
+ "name": "$code-background",
+ "value": "$background"
+ },
+ "pre": {
+ "id": "pre",
+ "name": "$pre",
+ "value": "$text"
+ },
+ "pre-background": {
+ "id": "pre-background",
+ "name": "$pre-background",
+ "value": "$background"
+ },
+ "link": {
+ "id": "link",
+ "name": "$link",
+ "value": "$blue"
+ },
+ "link-invert": {
+ "id": "link-invert",
+ "name": "$link-invert",
+ "value": "$blue-invert"
+ },
+ "link-visited": {
+ "id": "link-visited",
+ "name": "$link-visited",
+ "value": "$purple"
+ },
+ "link-hover": {
+ "id": "link-hover",
+ "name": "$link-hover",
+ "value": "$grey-darker"
+ },
+ "link-hover-border": {
+ "id": "link-hover-border",
+ "name": "$link-hover-border",
+ "value": "$grey-light"
+ },
+ "link-focus": {
+ "id": "link-focus",
+ "name": "$link-focus",
+ "value": "$grey-darker"
+ },
+ "link-focus-border": {
+ "id": "link-focus-border",
+ "name": "$link-focus-border",
+ "value": "$blue"
+ },
+ "link-active": {
+ "id": "link-active",
+ "name": "$link-active",
+ "value": "$grey-darker"
+ },
+ "link-active-border": {
+ "id": "link-active-border",
+ "name": "$link-active-border",
+ "value": "$grey-dark"
+ },
+ "family-primary": {
+ "id": "family-primary",
+ "name": "$family-primary",
+ "value": "$family-sans-serif"
+ },
+ "family-code": {
+ "id": "family-code",
+ "name": "$family-code",
+ "value": "$family-monospace"
+ },
+ "size-small": {
+ "id": "size-small",
+ "name": "$size-small",
+ "value": "$size-7"
+ },
+ "size-normal": {
+ "id": "size-normal",
+ "name": "$size-normal",
+ "value": "$size-6"
+ },
+ "size-medium": {
+ "id": "size-medium",
+ "name": "$size-medium",
+ "value": "$size-5"
+ },
+ "size-large": {
+ "id": "size-large",
+ "name": "$size-large",
+ "value": "$size-4"
+ },
+ "colors": {
+ "id": "colors",
+ "name": "$colors",
+ "value": "(\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert), \"link\": ($link, $link-invert), \"info\": ($info, $info-invert), \"success\": ($success, $success-invert), \"warning\": ($warning, $warning-invert), \"danger\": ($danger, $danger-invert))"
+ },
+ "shades": {
+ "id": "shades",
+ "name": "$shades",
+ "value": "(\"black-bis\": $black-bis, \"black-ter\": $black-ter, \"grey-darker\": $grey-darker, \"grey-dark\": $grey-dark, \"grey\": $grey, \"grey-light\": $grey-light, \"grey-lighter\": $grey-lighter, \"white-ter\": $white-ter, \"white-bis\": $white-bis)"
+ },
+ "sizes": {
+ "id": "sizes",
+ "name": "$sizes",
+ "value": "$size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_data/variables/utilities/initial-variables.json b/docs/_data/variables/utilities/initial-variables.json
new file mode 100644
index 00000000..56999e15
--- /dev/null
+++ b/docs/_data/variables/utilities/initial-variables.json
@@ -0,0 +1,230 @@
+{
+ "dir_name": "utilities",
+ "file_name": "initial-variables",
+ "file_relative_path": "utilities/initial-variables.sass",
+ "file_line_from": 3,
+ "file_line_to": 65,
+ "file_url": "https://github.com/jgthms/bulma/blob/master/sass/utilities/initial-variables.sass#L3,L65",
+ "vars": {
+ "black": {
+ "id": "black",
+ "name": "$black",
+ "value": "hsl(0, 0%, 4%)"
+ },
+ "black-bis": {
+ "id": "black-bis",
+ "name": "$black-bis",
+ "value": "hsl(0, 0%, 7%)"
+ },
+ "black-ter": {
+ "id": "black-ter",
+ "name": "$black-ter",
+ "value": "hsl(0, 0%, 14%)"
+ },
+ "grey-darker": {
+ "id": "grey-darker",
+ "name": "$grey-darker",
+ "value": "hsl(0, 0%, 21%)"
+ },
+ "grey-dark": {
+ "id": "grey-dark",
+ "name": "$grey-dark",
+ "value": "hsl(0, 0%, 29%)"
+ },
+ "grey": {
+ "id": "grey",
+ "name": "$grey",
+ "value": "hsl(0, 0%, 48%)"
+ },
+ "grey-light": {
+ "id": "grey-light",
+ "name": "$grey-light",
+ "value": "hsl(0, 0%, 71%)"
+ },
+ "grey-lighter": {
+ "id": "grey-lighter",
+ "name": "$grey-lighter",
+ "value": "hsl(0, 0%, 86%)"
+ },
+ "white-ter": {
+ "id": "white-ter",
+ "name": "$white-ter",
+ "value": "hsl(0, 0%, 96%)"
+ },
+ "white-bis": {
+ "id": "white-bis",
+ "name": "$white-bis",
+ "value": "hsl(0, 0%, 98%)"
+ },
+ "white": {
+ "id": "white",
+ "name": "$white",
+ "value": "hsl(0, 0%, 100%)"
+ },
+ "orange": {
+ "id": "orange",
+ "name": "$orange",
+ "value": "hsl(14, 100%, 53%)"
+ },
+ "yellow": {
+ "id": "yellow",
+ "name": "$yellow",
+ "value": "hsl(48, 100%, 67%)"
+ },
+ "green": {
+ "id": "green",
+ "name": "$green",
+ "value": "hsl(141, 71%, 48%)"
+ },
+ "turquoise": {
+ "id": "turquoise",
+ "name": "$turquoise",
+ "value": "hsl(171, 100%, 41%)"
+ },
+ "cyan": {
+ "id": "cyan",
+ "name": "$cyan",
+ "value": "hsl(204, 86%, 53%)"
+ },
+ "blue": {
+ "id": "blue",
+ "name": "$blue",
+ "value": "hsl(217, 71%, 53%)"
+ },
+ "purple": {
+ "id": "purple",
+ "name": "$purple",
+ "value": "hsl(271, 100%, 71%)"
+ },
+ "red": {
+ "id": "red",
+ "name": "$red",
+ "value": "hsl(348, 100%, 61%)"
+ },
+ "family-sans-serif": {
+ "id": "family-sans-serif",
+ "name": "$family-sans-serif",
+ "value": "BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", \"Helvetica\", \"Arial\", sans-serif"
+ },
+ "family-monospace": {
+ "id": "family-monospace",
+ "name": "$family-monospace",
+ "value": "monospace"
+ },
+ "render-mode": {
+ "id": "render-mode",
+ "name": "$render-mode",
+ "value": "optimizeLegibility"
+ },
+ "size-1": {
+ "id": "size-1",
+ "name": "$size-1",
+ "value": "3rem"
+ },
+ "size-2": {
+ "id": "size-2",
+ "name": "$size-2",
+ "value": "2.5rem"
+ },
+ "size-3": {
+ "id": "size-3",
+ "name": "$size-3",
+ "value": "2rem"
+ },
+ "size-4": {
+ "id": "size-4",
+ "name": "$size-4",
+ "value": "1.5rem"
+ },
+ "size-5": {
+ "id": "size-5",
+ "name": "$size-5",
+ "value": "1.25rem"
+ },
+ "size-6": {
+ "id": "size-6",
+ "name": "$size-6",
+ "value": "1rem"
+ },
+ "size-7": {
+ "id": "size-7",
+ "name": "$size-7",
+ "value": "0.75rem"
+ },
+ "weight-light": {
+ "id": "weight-light",
+ "name": "$weight-light",
+ "value": "300"
+ },
+ "weight-normal": {
+ "id": "weight-normal",
+ "name": "$weight-normal",
+ "value": "400"
+ },
+ "weight-medium": {
+ "id": "weight-medium",
+ "name": "$weight-medium",
+ "value": "500"
+ },
+ "weight-semibold": {
+ "id": "weight-semibold",
+ "name": "$weight-semibold",
+ "value": "600"
+ },
+ "weight-bold": {
+ "id": "weight-bold",
+ "name": "$weight-bold",
+ "value": "700"
+ },
+ "gap": {
+ "id": "gap",
+ "name": "$gap",
+ "value": "32px"
+ },
+ "tablet": {
+ "id": "tablet",
+ "name": "$tablet",
+ "value": "769px"
+ },
+ "desktop": {
+ "id": "desktop",
+ "name": "$desktop",
+ "value": "960px + (2 * $gap)"
+ },
+ "widescreen": {
+ "id": "widescreen",
+ "name": "$widescreen",
+ "value": "1152px + (2 * $gap)"
+ },
+ "fullhd": {
+ "id": "fullhd",
+ "name": "$fullhd",
+ "value": "1344px + (2 * $gap)"
+ },
+ "easing": {
+ "id": "easing",
+ "name": "$easing",
+ "value": "ease-out"
+ },
+ "radius-small": {
+ "id": "radius-small",
+ "name": "$radius-small",
+ "value": "2px"
+ },
+ "radius": {
+ "id": "radius",
+ "name": "$radius",
+ "value": "3px"
+ },
+ "radius-large": {
+ "id": "radius-large",
+ "name": "$radius-large",
+ "value": "5px"
+ },
+ "speed": {
+ "id": "speed",
+ "name": "$speed",
+ "value": "86ms"
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html
index 4a734039..60612ef5 100644
--- a/docs/_includes/variables.html
+++ b/docs/_includes/variables.html
@@ -1,12 +1,48 @@
-{% include anchor.html name="Variables" %}
+{% capture content %}
+
+ {% assign anchor_name = include.anchor_name | default: 'Variables' %}
+ {% assign tab = include.tab | default: page.doc-tab %}
+ {% assign subtab = include.subtab | default: page.doc-subtab %}
+ {% assign type = include.type | default: tab %}
+ {% assign data = include.data | default: site.data.variables[tab][subtab] %}
+ {% assign variables = include.variables | default: data.vars %}
+ {% assign table_class = include.table_class | default: 'is-bordered' %}
+
+ {% if include.custom_message %}
+
+ {{ include.custom_message }}
+
+ {% else %}
+
+ {% assign variables_link_text = "these variables" %}
+
+ {% capture variables_link %}
+
+ {% if data.file_url %}
+
+ {{ variables_link_text }}
+
+ {% else %}
+
+ {{ variables_link_text }}
+
+ {% endif %}
+
+ {% endcapture %}
+
+ You can use {{ variables_link | strip }} to customize this {{ type }}. Simply set one or multiple of these variables before importing Bulma. Learn how .
+
+ {% endif %}
+
+{% endcapture %}
+
+{% include anchor.html name=anchor_name %}
-
- {% if include.custom_message %}{{ include.custom_message }}{% else %}You can use these variables to customize this {%if include.element %}element{% elsif include.layout %}layout{% else %}component{% endif %}. Simply set one or multiple of these variables before importing Bulma. Learn how .{% endif %}
-
+
{{ content | strip }}
-
+
Name
@@ -20,7 +56,8 @@
- {% for variable in page.variables %}
+ {% for variable_hash in variables %}
+ {% assign variable = variable_hash[1] %}
{{ variable.name }}
diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html
index 335dba33..22055cac 100644
--- a/docs/documentation/components/breadcrumb.html
+++ b/docs/documentation/components/breadcrumb.html
@@ -1,16 +1,8 @@
---
+title: Breadcrumb
layout: documentation
doc-tab: components
doc-subtab: breadcrumb
-variables:
-- name: $breadcrumb-item-color
- value: $text-light
-- name: $breadcrumb-item-hover-color
- value: $link-hover
-- name: $breadcrumb-item-active-color
- value: $text-strong
-- name: $breadcrumb-item-separator-color
- value: $text
---
{% include subnav-components.html %}
@@ -206,7 +198,7 @@ variables:
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/components/card.html b/docs/documentation/components/card.html
index d44a32d7..ea4bd52c 100644
--- a/docs/documentation/components/card.html
+++ b/docs/documentation/components/card.html
@@ -1,22 +1,8 @@
---
+title: Card
layout: documentation
doc-tab: components
doc-subtab: card
-variables:
-- name: $card-color
- value: $text
-- name: $card-background-color
- value: $white
-- name: $card-shadow
- value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-- name: $card-header-color
- value: $text-strong
-- name: $card-header-shadow
- value: 0 1px 2px rgba($black, 0.1)
-- name: $card-header-weight
- value: $weight-bold
-- name: $card-footer-border-top
- value: 1px solid $border
---
{% capture card_example %}
@@ -198,7 +184,7 @@ variables:
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/components/dropdown.html b/docs/documentation/components/dropdown.html
index cd78bd4c..154d7d2e 100644
--- a/docs/documentation/components/dropdown.html
+++ b/docs/documentation/components/dropdown.html
@@ -1,32 +1,8 @@
---
+title: Dropdown
layout: documentation
doc-tab: components
doc-subtab: dropdown
-variables:
-- name: $dropdown-content-background-color
- value: $white
-- name: $dropdown-content-arrow
- value: $link
-- name: $dropdown-content-offset
- value: 4px
-- name: $dropdown-content-radius
- value: $radius
-- name: $dropdown-content-shadow
- value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-- name: $dropdown-content-z
- value: 20
-- name: $dropdown-item-color
- value: $grey-dark
-- name: $dropdown-item-hover-color
- value: $black
-- name: $dropdown-item-hover-background-color
- value: $background
-- name: $dropdown-item-active-color
- value: $primary-invert
-- name: $dropdown-item-active-background-color
- value: $primary
-- name: $dropdown-divider-background-color
- value: $border
---
{% capture dropdown_example %}
@@ -368,7 +344,7 @@ variables:
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/components/menu.html b/docs/documentation/components/menu.html
index bc9cf408..7a64bd8d 100644
--- a/docs/documentation/components/menu.html
+++ b/docs/documentation/components/menu.html
@@ -1,24 +1,8 @@
---
+title: Menu
layout: documentation
doc-tab: components
doc-subtab: menu
-variables:
-- name: $menu-item-color
- value: $text
-- name: $menu-item-radius
- value: $radius-small
-- name: $menu-item-hover-color
- value: $text-strong
-- name: $menu-item-hover-background-color
- value: $background
-- name: $menu-item-active-color
- value: $link-invert
-- name: $menu-item-active-background-color
- value: $link
-- name: $menu-list-border-left
- value: 1px solid $border
-- name: $menu-label-color
- value: $text-light
---
{% capture menu_example %}
@@ -75,7 +59,7 @@ variables:
{% include snippet.html content=menu_example size="one-third" %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html
index 215c0136..c9e7a575 100644
--- a/docs/documentation/components/message.html
+++ b/docs/documentation/components/message.html
@@ -1,32 +1,8 @@
---
+title: Message
layout: documentation
doc-tab: components
doc-subtab: message
-variables:
-- name: $message-background-color
- value: $background
-- name: $message-radius
- value: $radius
-- name: $message-header-background-color
- value: $text
-- name: $message-header-color
- value: $text-invert
-- name: $message-header-padding
- value: 0.5em 0.75em
-- name: $message-header-radius
- value: $radius
-- name: $message-body-border
- value: 1px solid $border
-- name: $message-body-color
- value: $text
-- name: $message-body-padding
- value: 1em 1.25em
-- name: $message-body-radius
- value: $radius
-- name: $message-body-pre-background-color
- value: $white
-- name: $message-body-pre-code-background-color
- value: transparent
---
{% capture message_example %}
@@ -51,7 +27,7 @@ variables:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi , tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus , 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.
-{% for color in site.data.variables.justColors %}
+{% for color in site.data.colors.justColors %}
-{% for color in site.data.variables.justColors %}
+{% for color in site.data.colors.justColors %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi , tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum
felis venenatis efficitur. Aenean ac
eleifend lacus , in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
@@ -173,7 +149,7 @@ variables:
{% include snippet.html content=message_large %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/components/modal.html b/docs/documentation/components/modal.html
index b9f61d60..2e4f7b85 100644
--- a/docs/documentation/components/modal.html
+++ b/docs/documentation/components/modal.html
@@ -1,50 +1,8 @@
---
+title: Modal
layout: documentation
doc-tab: components
doc-subtab: modal
-variables:
-- name: $modal-z
- value: 20
-- name: $modal-background-background-color
- value: rgba($black, 0.86)
-- name: $modal-content-width
- value: 640px
-- name: $modal-content-margin-mobile
- value: 20px
-- name: $modal-content-spacing-mobile
- value: 160px
-- name: $modal-content-spacing-tablet
- value: 40px
-- name: $modal-close-dimensions
- value: 40px
-- name: $modal-close-right
- value: 20px
-- name: $modal-close-top
- value: 20px
-- name: $modal-card-spacing
- value: 40px
-- name: $modal-card-head-background-color
- value: $background
-- name: $modal-card-head-border-bottom
- value: 1px solid $border
-- name: $modal-card-head-padding
- value: 20px
-- name: $modal-card-head-radius
- value: $radius-large
-- name: $modal-card-title-color
- value: $text-strong
-- name: $modal-card-title-line-height
- value: 1
-- name: $modal-card-title-size
- value: $size-4
-- name: $modal-card-foot-radius
- value: $radius-large
-- name: $modal-card-foot-border-top
- value: 1px solid $border
-- name: $modal-card-body-background-color
- value: $white
-- name: $modal-card-body-padding
- value: 20px
---
{% capture modal %}
@@ -169,7 +127,7 @@ variables:
{% highlight html %}{{ modal_card }}{% endhighlight %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index 6804c8c3..4a9576a4 100644
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -1,64 +1,8 @@
---
+title: Navbar
layout: documentation
doc-tab: components
doc-subtab: navbar
-variables:
-- name: $navbar-background-color
- value: $white
-- name: $navbar-height
- value: 3.25rem
-- name: $navbar-item-color
- value: $grey-dark
-- name: $navbar-item-hover-color
- value: $black
-- name: $navbar-item-hover-background-color
- value: $background
-- name: $navbar-item-active-color
- value: $black
-- name: $navbar-item-active-background-color
- value: transparent
-- name: $navbar-item-img-max-height
- value: 1.75rem
-- name: $navbar-tab-hover-background-color
- value: transparent
-- name: $navbar-tab-hover-border-bottom-color
- value: $primary
-- name: $navbar-tab-active-color
- value: $primary
-- name: $navbar-tab-active-background-color
- value: transparent
-- name: $navbar-tab-active-border-bottom-color
- value: $primary
-- name: $navbar-tab-active-border-bottom-style
- value: solid
-- name: $navbar-tab-active-border-bottom-width
- value: 3px
-- name: $navbar-dropdown-background-color
- value: $white
-- name: $navbar-dropdown-border-top
- value: 1px solid $border
-- name: $navbar-dropdown-offset
- value: -4px
-- name: $navbar-dropdown-arrow
- value: $link
-- name: $navbar-dropdown-radius
- value: $radius-large
-- name: $navbar-dropdown-z
- value: 20
-- name: $navbar-dropdown-boxed-radius
- value: $radius-large
-- name: $navbar-dropdown-boxed-shadow
- value: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-- name: $navbar-dropdown-item-hover-color
- value: $black
-- name: $navbar-dropdown-item-hover-background-color
- value: $background
-- name: $navbar-dropdown-item-active-color
- value: $primary
-- name: $navbar-dropdown-item-active-background-color
- value: $background
-- name: $navbar-divider-background-color
- value: $border
---
{% include subnav-components.html %}
@@ -1072,7 +1016,7 @@ document.addEventListener('DOMContentLoaded', function () {
{% include examples/navbar-color.html color="white" light=true %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html
index 680c60a7..80e08249 100644
--- a/docs/documentation/components/pagination.html
+++ b/docs/documentation/components/pagination.html
@@ -1,40 +1,8 @@
---
+title: Pagination
layout: documentation
doc-tab: components
doc-subtab: pagination
-variables:
-- name: $pagination-color
- value: $grey-darker
-- name: $pagination-border-color
- value: $grey-lighter
-- name: $pagination-margin
- value: -0.25rem
-- name: $pagination-hover-color
- value: $link-hover
-- name: $pagination-hover-border-color
- value: $link-hover-border
-- name: $pagination-focus-color
- value: $link-focus
-- name: $pagination-focus-border-color
- value: $link-focus-border
-- name: $pagination-active-color
- value: $link-active
-- name: $pagination-active-border-color
- value: $link-active-border
-- name: $pagination-disabled-color
- value: $grey
-- name: $pagination-disabled-background-color
- value: $grey-lighter
-- name: $pagination-disabled-border-color
- value: $grey-lighter
-- name: $pagination-current-color
- value: $link-invert
-- name: $pagination-current-background-color
- value: $link
-- name: $pagination-current-border-color
- value: $link
-- name: $pagination-ellipsis-color
- value: $grey-light
---
{% capture pagination_example %}
@@ -238,7 +206,7 @@ variables:
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/components/panel.html b/docs/documentation/components/panel.html
index 14967a29..baecb078 100644
--- a/docs/documentation/components/panel.html
+++ b/docs/documentation/components/panel.html
@@ -1,46 +1,8 @@
---
+title: Panel
layout: documentation
doc-tab: components
doc-subtab: panel
-variables:
-- name: $panel-item-border
- value: 1px solid $border
-- name: $panel-heading-background-color
- value: $background
-- name: $panel-heading-color
- value: $text-strong
-- name: $panel-heading-line-height
- value: 1.25
-- name: $panel-heading-padding
- value: 0.5em 0.75em
-- name: $panel-heading-radius
- value: $radius
-- name: $panel-heading-size
- value: 1.25em
-- name: $panel-heading-weight
- value: $weight-light
-- name: $panel-tab-border-bottom
- value: 1px solid $border
-- name: $panel-tab-active-border-bottom-color
- value: $link-active-border
-- name: $panel-tab-active-color
- value: $link-active
-- name: $panel-list-item-color
- value: $text
-- name: $panel-list-item-hover-color
- value: $link
-- name: $panel-block-color
- value: $text-strong
-- name: $panel-block-hover-background-color
- value: $background
-- name: $panel-block-active-border-left-color
- value: $link
-- name: $panel-block-active-color
- value: $link-active
-- name: $panel-block-active-icon-color
- value: $link
-- name: $panel-icon-color
- value: $text-light
---
{% capture panel_example %}
@@ -154,7 +116,7 @@ variables:
{% include snippet.html content=panel_example size="one-third" %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
index 8d62ff2e..daa28c6e 100644
--- a/docs/documentation/components/tabs.html
+++ b/docs/documentation/components/tabs.html
@@ -1,56 +1,8 @@
---
+title: Tabs
layout: documentation
doc-tab: components
doc-subtab: tabs
-variables:
-- name: $tabs-border-bottom-color
- value: $border
-- name: $tabs-border-bottom-style
- value: solid
-- name: $tabs-border-bottom-width
- value: 1px
-- name: $tabs-link-color
- value: $text
-- name: $tabs-link-hover-border-bottom-color
- value: $text-strong
-- name: $tabs-link-hover-color
- value: $text-strong
-- name: $tabs-link-active-border-bottom-color
- value: $primary
-- name: $tabs-link-active-color
- value: $primary
-- name: $tabs-link-padding
- value: 0.5em 1em
-- name: $tabs-boxed-link-radius
- value: $radius
-- name: $tabs-boxed-link-hover-background-color
- value: $background
-- name: $tabs-boxed-link-hover-border-bottom-color
- value: $border
-- name: $tabs-boxed-link-active-background-color
- value: $white
-- name: $tabs-boxed-link-active-border-color
- value: $border
-- name: $tabs-boxed-link-active-border-bottom-color
- value: transparent
-- name: $tabs-toggle-link-border-color
- value: $border
-- name: $tabs-toggle-link-border-style
- value: solid
-- name: $tabs-toggle-link-border-width
- value: 1px
-- name: $tabs-toggle-link-hover-background-color
- value: $background
-- name: $tabs-toggle-link-hover-border-color
- value: $border-hover
-- name: $tabs-toggle-link-radius
- value: $radius
-- name: $tabs-toggle-link-active-background-color
- value: $primary
-- name: $tabs-toggle-link-active-border-color
- value: $primary
-- name: $tabs-toggle-link-active-color
- value: $primary-invert
---
{% capture tabs_example %}
@@ -453,7 +405,7 @@ variables:
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
- {% include variables.html %}
+ {% include variables.html type='component' %}
diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html
index bae7280c..08cf34f1 100644
--- a/docs/documentation/elements/box.html
+++ b/docs/documentation/elements/box.html
@@ -3,21 +3,6 @@ title: Box
layout: documentation
doc-tab: elements
doc-subtab: box
-variables:
-- name: $box-color
- value: $text
-- name: $box-background-color
- value: $white
-- name: $box-radius
- value: $radius-large
-- name: $box-shadow
- value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
-- name: $box-padding
- value: 1.25rem
-- name: $box-link-hover-shadow
- value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
-- name: $box-link-active-shadow
- value: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
---
{% include subnav-elements.html %}
@@ -81,7 +66,7 @@ variables:
{% include snippet.html content=box_example more=true %}
- {% include variables.html %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index b4688482..439d4ddd 100644
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -3,49 +3,6 @@ title: Button
layout: documentation
doc-tab: elements
doc-subtab: button
-variables:
-- name: $button-color
- value: $grey-darker
-- name: $button-background-color
- value: $white
-- name: $button-border-color
- value: $grey-lighter
-- name: $button-hover-color
- value: $link-hover
-- name: $button-hover-border-color
- value: $link-hover-border
-- name: $button-focus-color
- value: $link-focus
-- name: $button-focus-border-color
- value: $link-focus-border
-- name: $button-focus-box-shadow-size
- value: 0 0 0 0.125em
-- name: $button-focus-box-shadow-color
- value: rgba($link, 0.25)
-- name: $button-active-color
- value: $link-active
-- name: $button-active-border-color
- value: $link-active-border
-- name: $button-link-color
- value: $text
-- name: $button-link-hover-background-color
- value: $background
-- name: $button-link-hover-color
- value: $text-strong
-- name: $button-disabled-background-color
- value: $white
-- name: $button-disabled-border-color
- value: $grey-lighter
-- name: $button-disabled-shadow
- value: none
-- name: $button-disabled-opacity
- value: 0.5
-- name: $button-static-color
- value: $grey
-- name: $button-static-background-color
- value: $white-ter
-- name: $button-static-border-color
- value: $grey-lighter
---
{% capture button_example %}
@@ -615,7 +572,7 @@ variables:
{% include snippet.html content=button_group_addons_example %}
- {% include variables.html %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html
index cbefba25..2a739ffe 100644
--- a/docs/documentation/elements/content.html
+++ b/docs/documentation/elements/content.html
@@ -3,39 +3,6 @@ title: Content
layout: documentation
doc-tab: elements
doc-subtab: content
-variables:
-- name: $content-heading-color
- value: $text-strong
-- name: $content-heading-weight
- value: $weight-normal
-- name: $content-heading-line-height
- value: 1.125
-- name: $content-blockquote-background-color
- value: $background
-- name: $content-blockquote-border-left
- value: 5px solid $border
-- name: $content-blockquote-padding
- value: 1.25em 1.5em
-- name: $content-pre-padding
- value: 1.25em 1.5em
-- name: $content-table-cell-border
- value: 1px solid $border
-- name: $content-table-cell-border-width
- value: 0 0 1px
-- name: $content-table-cell-padding
- value: 0.5em 0.75em
-- name: $content-table-cell-heading-color
- value: $text-strong
-- name: $content-table-row-hover-background-color
- value: $background
-- name: $content-table-head-cell-border-width
- value: 0 0 2px
-- name: $content-table-head-cell-color
- value: $text-strong
-- name: $content-table-foot-cell-border-width
- value: 2px 0 0
-- name: $content-table-foot-cell-color
- value: $text-strong
---
{% capture content_pre %}
@@ -214,7 +181,7 @@ variables:
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
index f9b6fec5..31e2d215 100644
--- a/docs/documentation/elements/icon.html
+++ b/docs/documentation/elements/icon.html
@@ -6,16 +6,6 @@ mdi: true
layout: documentation
doc-tab: elements
doc-subtab: icon
-variables:
-- name: $icon-dimensions
- value: 1.5rem
-- name: $icon-dimensions-small
- value: 1rem
-- name: $icon-dimensions-medium
- value: 2rem
-- name: $icon-dimensions-large
- value: 3rem
-
---
{% capture icon_example %}
@@ -954,7 +944,7 @@ variables:
- {% include variables.html %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html
index 2177cee2..5f4d38d5 100644
--- a/docs/documentation/elements/image.html
+++ b/docs/documentation/elements/image.html
@@ -11,9 +11,6 @@ dimensions:
- 64
- 96
- 128
-variables:
-- name: $dimensions
- value: 16 24 32 48 64 96 128
---
{% capture image %}
@@ -122,7 +119,7 @@ variables:
The .image
container will take up the whole width while maintaining the perfect ratio.
- {% include variables.html %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index e64321ec..477ff0a9 100644
--- a/docs/documentation/elements/notification.html
+++ b/docs/documentation/elements/notification.html
@@ -3,13 +3,6 @@ title: Notification
layout: documentation
doc-tab: elements
doc-subtab: notification
-variables:
-- name: $notification-background-color
- value: $background
-- name: $notification-radius
- value: $radius
-- name: $notification-padding
- value: 1.25rem 2.5rem 1.25rem 1.5rem
---
{% capture notification %}
@@ -22,7 +15,7 @@ variables:
{% endcapture %}
{% capture notification_colors %}
-{% for color in site.data.variables.justColors %}
+{% for color in site.data.colors.justColors %}
Primar lorem ipsum dolor sit amet, consectetur
@@ -55,7 +48,7 @@ variables:
{% include snippet.html content=notification_colors %}
- {% include variables.html %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
index 368d82ee..869bd482 100644
--- a/docs/documentation/elements/progress.html
+++ b/docs/documentation/elements/progress.html
@@ -3,11 +3,6 @@ title: Progress Bar
layout: documentation
doc-tab: elements
doc-subtab: progress
-variables:
-- name: $progress-bar-background-color
- value: $border
-- name: $progress-value-background-color
- value: $text
---
{% capture progress %}
@@ -57,7 +52,7 @@ variables:
{% include snippet.html content=progress_sizes %}
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html
index 869709ab..2d9bbd63 100644
--- a/docs/documentation/elements/table.html
+++ b/docs/documentation/elements/table.html
@@ -3,37 +3,6 @@ title: Table
layout: documentation
doc-tab: elements
doc-subtab: table
-variables:
-- name: $table-color
- value: $grey-darker
-- name: $table-background-color
- value: $white
-- name: $table-cell-border
- value: 1px solid $grey-lighter
-- name: $table-cell-border-width
- value: 0 0 1px
-- name: $table-cell-padding
- value: 0.5em 0.75em
-- name: $table-cell-heading-color
- value: $text-strong
-- name: $table-head-cell-border-width
- value: 0 0 2px
-- name: $table-head-cell-color
- value: $text-strong
-- name: $table-foot-cell-border-width
- value: 2px 0 0
-- name: $table-foot-cell-color
- value: $text-strong
-- name: $table-row-hover-background-color
- value: $white-bis
-- name: $table-row-active-background-color
- value: $primary
-- name: $table-row-active-color
- value: $primary-invert
-- name: $table-striped-row-even-background-color
- value: $white-bis
-- name: $table-striped-row-even-hover-background-color
- value: $white-ter
---
{% capture table_example %}
@@ -623,7 +592,7 @@ variables:
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html
index 0559c559..d5374f3b 100644
--- a/docs/documentation/elements/tag.html
+++ b/docs/documentation/elements/tag.html
@@ -3,15 +3,6 @@ title: Tags
layout: documentation
doc-tab: elements
doc-subtab: tag
-variables:
-- name: $tag-background-color
- value: $background
-- name: $tag-color
- value: $text
-- name: $tag-radius
- value: $radius
-- name: $tag-delete-margin
- value: 1px
---
{% capture tag %}
@@ -456,6 +447,6 @@ variables:
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html
index 7310dc98..ccc00905 100644
--- a/docs/documentation/elements/title.html
+++ b/docs/documentation/elements/title.html
@@ -3,27 +3,6 @@ title: Title and Subtitle
layout: documentation
doc-tab: elements
doc-subtab: title
-variables:
-- name: $title-color
- value: $grey-darker
-- name: $title-size
- value: $size-3
-- name: $title-weight
- value: $weight-semibold
-- name: $title-strong-color
- value: inherit
-- name: $title-strong-weight
- value: inherit
-- name: $subtitle-color
- value: $grey-dark
-- name: $subtitle-size
- value: $size-5
-- name: $subtitle-weight
- value: $weight-normal
-- name: $subtitle-strong-color
- value: $grey-darker
-- name: $subtitle-strong-weight
- value: $weight-semibold
---
{% capture default %}
@@ -203,7 +182,7 @@ variables:
- {% include variables.html element=true %}
+ {% include variables.html type='element' %}
diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html
index f6ca47fc..27cd5232 100644
--- a/docs/documentation/form/file.html
+++ b/docs/documentation/form/file.html
@@ -4,27 +4,17 @@ layout: documentation
doc-tab: form
doc-subtab: file
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
-variables:
-- name: $file-border-color
- value: transparent
-- name: $file-radius
- value: $radius
-- name: $file-cta-background-color
- value: $white-ter
-- name: $file-cta-color
- value: $grey-dark
-- name: $file-cta-hover-color
- value: $grey-darker
-- name: $file-cta-active-color
- value: $grey-darker
-- name: $file-name-border-color
- value: $file-cta-background-color
-- name: $file-name-border-style
- value: solid
-- name: $file-name-border-width
- value: 1px 1px 1px 0
-- name: $file-name-max-width
- value: 16em
+variables_keys:
+- file-border-color
+- file-radius
+- file-cta-background-color
+- file-cta-color
+- file-cta-hover-color
+- file-cta-active-color
+- file-name-border-color
+- file-name-border-style
+- file-name-border-width
+- file-name-max-width
---
{% capture file %}
@@ -749,7 +739,41 @@ variables:
- {% include variables.html element=true %}
+ {% include anchor.html name="Variables" %}
+
+
+
+ You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how .
+
+
+
+
+
+
+ Name
+ Default value
+
+
+
+
+ Name
+ Default value
+
+
+
+ {% for key in page.variables_keys %}
+ {% assign variable = site.data.variables.elements.form.vars[key] %}
+
+
+ {{ variable.name }}
+
+
+ {{ variable.value }}
+
+
+ {% endfor %}
+
+
diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index 10e87ddc..2fc9035f 100644
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -3,21 +3,15 @@ title: Form controls
layout: documentation
doc-tab: form
doc-subtab: general
-variables:
-- name: $control-radius
- value: $radius
-- name: $control-radius-small
- value: $radius-small
-- name: $control-padding-vertical
- value: calc(0.375em - 1px)
-- name: $control-padding-horizontal
- value: calc(0.625em - 1px)
-- name: $label-color
- value: $grey-darker
-- name: $label-weight
- value: $weight-bold
-- name: $help-size
- value: $size-small
+variables_controls_keys:
+- control-radius
+- control-radius-small
+- control-padding-vertical
+- control-padding-horizontal
+variables_form_keys:
+- label-color
+- label-weight
+- help-size
---
{% capture example %}
@@ -1027,10 +1021,53 @@ variables:
{% include snippet.html content=field_label_example horizontal=true more=true %}
+
+ {% include anchor.html name="Variables" %}
- {% capture custom_message %}Form elements can be customized using the following generic variables. Simply set one or multiple of these variables before importing Bulma. Learn how .{% endcapture %}
+
+
+ Form elements can be customized using the following generic variables. Simply set one or multiple of these variables before importing Bulma. Learn how .
+
+
- {% include variables.html custom_message = custom_message %}
+
+
+
+ Name
+ Default value
+
+
+
+
+ Name
+ Default value
+
+
+
+ {% for key in page.variables_controls_keys %}
+ {% assign variable = site.data.variables.utilities.controls.vars[key] %}
+
+
+ {{ variable.name }}
+
+
+ {{ variable.value }}
+
+
+ {% endfor %}
+ {% for key in page.variables_form_keys %}
+ {% assign variable = site.data.variables.elements.form.vars[key] %}
+
+
+ {{ variable.name }}
+
+
+ {{ variable.value }}
+
+
+ {% endfor %}
+
+
diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html
index 7fa3451e..231512fd 100644
--- a/docs/documentation/form/input.html
+++ b/docs/documentation/form/input.html
@@ -3,37 +3,24 @@ title: Input
layout: documentation
doc-tab: form
doc-subtab: input
-variables:
-- name: $input-color
- value: $grey-darker
-- name: $input-background-color
- value: $white
-- name: $input-border-color
- value: $grey-lighter
-- name: $input-shadow
- value: inset 0 1px 2px rgba($black, 0.1)
-- name: $input-hover-color
- value: $grey-darker
-- name: $input-hover-border-color
- value: $grey-light
-- name: $input-focus-color
- value: $grey-darker
-- name: $input-focus-border-color
- value: $link
-- name: $input-disabled-color
- value: $text-light
-- name: $input-disabled-background-color
- value: $background
-- name: $input-disabled-border-color
- value: $background
-- name: $input-arrow
- value: $link
-- name: $input-icon-color
- value: $grey-lighter
-- name: $input-icon-active-color
- value: $grey
-- name: $input-radius
- value: $radius
+variables_keys:
+- input-color
+- input-background-color
+- input-border-color
+- input-shadow
+- input-hover-color
+- input-hover-border-color
+- input-focus-color
+- input-focus-border-color
+- input-focus-box-shadow-size
+- input-focus-box-shadow-color
+- input-disabled-color
+- input-disabled-background-color
+- input-disabled-border-color
+- input-arrow
+- input-icon-color
+- input-icon-active-color
+- input-radius
---
{% capture input_example %}
@@ -484,7 +471,41 @@ variables:
- {% include variables.html element=true %}
+ {% include anchor.html name="Variables" %}
+
+
+
+ You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how .
+
+
+
+
+
+
+ Name
+ Default value
+
+
+
+
+ Name
+ Default value
+
+
+
+ {% for key in page.variables_keys %}
+ {% assign variable = site.data.variables.elements.form.vars[key] %}
+
+
+ {{ variable.name }}
+
+
+ {{ variable.value }}
+
+
+ {% endfor %}
+
+
diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html
index 986e6321..0a26033d 100644
--- a/docs/documentation/layout/footer.html
+++ b/docs/documentation/layout/footer.html
@@ -3,9 +3,6 @@ title: Footer
layout: documentation
doc-tab: layout
doc-subtab: footer
-variables:
-- name: $footer-background-color
- value: $background
---
{% include subnav-layout.html %}
@@ -33,6 +30,6 @@ variables:
{% include snippet.html content=footer_example horizontal=true more=true %}
- {% include variables.html layout=true %}
+ {% include variables.html %}
diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html
index beb9b54f..f4a45521 100644
--- a/docs/documentation/layout/level.html
+++ b/docs/documentation/layout/level.html
@@ -1,4 +1,5 @@
---
+title: Level
layout: documentation
doc-tab: layout
doc-subtab: level
diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html
index 6bfcdcd2..1098a18f 100644
--- a/docs/documentation/layout/media-object.html
+++ b/docs/documentation/layout/media-object.html
@@ -1,4 +1,5 @@
---
+title: Media Object
layout: documentation
doc-tab: layout
doc-subtab: media-object
diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html
index 61707c8c..a2c35b6c 100644
--- a/docs/documentation/layout/section.html
+++ b/docs/documentation/layout/section.html
@@ -3,13 +3,6 @@ title: Section
layout: documentation
doc-tab: layout
doc-subtab: section
-variables:
-- name: $section-padding
- value: 3rem 1.5rem
-- name: $section-padding-medium
- value: 9rem 1.5rem
-- name: $section-padding-large
- value: 18rem 1.5rem
---
{% include subnav-layout.html %}
@@ -44,7 +37,7 @@ variables:
You can use the modifiers is-medium
and is-large
to change the spacing .
- {% include variables.html layout=true %}
+ {% include variables.html %}
diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html
index d3244605..1832439a 100644
--- a/docs/documentation/modifiers/responsive-helpers.html
+++ b/docs/documentation/modifiers/responsive-helpers.html
@@ -11,26 +11,19 @@ doc-subtab: responsive-helpers
Class
-
- Mobile
- Up to 768px
-
-
- Tablet
- Between 769px
and 1007px
-
-
- Desktop
- Between 1008px
and 1199px
-
-
- Widescreen
- Between 1200px
and 1391px
-
-
- FullHD
- Above 1392px
-
+ {% for breakpoint_hash in site.data.breakpoints %}
+ {% assign breakpoint = breakpoint_hash[1] %}
+
+ {{ breakpoint.name }}
+ {% if breakpoint.id == 'mobile' %}
+ Up to {{ breakpoint.to }}px
+ {% elsif breakpoint.id == 'fullhd' %}
+ {{ breakpoint.from }}px
and above
+ {% else %}
+ Between {{ breakpoint.from }}px
and {{ breakpoint.to }}px
+ {% endif %}
+
+ {% endfor %}
{% endcapture %}
diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html
index eec9854a..fb6ef606 100644
--- a/docs/documentation/modifiers/typography-helpers.html
+++ b/docs/documentation/modifiers/typography-helpers.html
@@ -5,39 +5,35 @@ doc-tab: modifiers
doc-subtab: typography-helpers
---
+{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
+{% assign sizes = site.data.variables.utilities.derived-variables.vars.sizes.value | split: ' ' %}
+
{% capture thead %}
Class
-
- Mobile
- Up to 768px
-
-
- Tablet
- Between 769px
and 1007px
-
-
- Desktop
- Between 1008px
and 1199px
-
-
- Widescreen
- Between 1200px
and 1391px
-
-
- FullHD
- Above 1392px
-
+ {% for breakpoint_hash in site.data.breakpoints %}
+ {% assign breakpoint = breakpoint_hash[1] %}
+
+ {{ breakpoint.name }}
+ {% if breakpoint.id == 'mobile' %}
+ Up to {{ breakpoint.to }}px
+ {% elsif breakpoint.id == 'fullhd' %}
+ {{ breakpoint.from }}px
and above
+ {% else %}
+ Between {{ breakpoint.from }}px
and {{ breakpoint.to }}px
+ {% endif %}
+
+ {% endfor %}
{% endcapture %}
{% capture size1 %}
- 3rem
+ {{ initial_vars.size-1.value }}
{% endcapture %}
@@ -66,7 +62,7 @@ doc-subtab: typography-helpers
- There are 7 sizes to choose from:
+ There are {{ sizes | size }} sizes to choose from:
@@ -82,34 +78,13 @@ doc-subtab: typography-helpers
-
- is-size-1
- 3rem
-
-
- is-size-2
- 2.5rem
-
-
- is-size-3
- 2rem
-
-
- is-size-4
- 1.5rem
-
-
- is-size-5
- 1.25rem
-
-
- is-size-6
- 1rem
-
-
- is-size-7
- 0.75rem
-
+ {% for size in sizes %}
+
+ {% assign key = 'size-' | append: forloop.index %}
+ is-size-{{ forloop.index }}
+ {{ initial_vars[key].value }}
+
+ {% endfor %}
diff --git a/docs/documentation/overview/colors.html b/docs/documentation/overview/colors.html
index 9a33c61a..a6e70f6f 100644
--- a/docs/documentation/overview/colors.html
+++ b/docs/documentation/overview/colors.html
@@ -4,16 +4,16 @@ layout: documentation
doc-tab: overview
doc-subtab: colors
colors:
-- id: "white"
-- id: "black"
-- id: "light"
-- id: "dark"
-- id: "primary"
-- id: "link"
-- id: "info"
-- id: "success"
-- id: "warning"
-- id: "danger"
+- white
+- black
+- light
+- dark
+- primary
+- link
+- info
+- success
+- warning
+- danger
---
{% include subnav-overview.html %}
@@ -47,8 +47,8 @@ colors:
{% 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 %}
{{ derivedColor.id | capitalize }}
@@ -70,7 +70,7 @@ colors:
{% include elements/color-square.html value=derivedColor.invertValue %}
{% 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 %}
${{ derivedColor.invertId }}
diff --git a/docs/documentation/overview/modular.html b/docs/documentation/overview/modular.html
index e28ce1df..99261ba8 100644
--- a/docs/documentation/overview/modular.html
+++ b/docs/documentation/overview/modular.html
@@ -16,7 +16,7 @@ doc-subtab: modular
- Bulma consists of 40 .sass
files that you can import individually.
+ Bulma consists of 39 .sass
files that you can import individually.
For example, let's say you only want the Bulma columns.
diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html
index 9ee22572..a0cbc58e 100644
--- a/docs/documentation/overview/responsiveness.html
+++ b/docs/documentation/overview/responsiveness.html
@@ -3,17 +3,12 @@ title: Responsiveness
layout: documentation
doc-tab: overview
doc-subtab: responsiveness
-variables:
-- name: $gap
- value: 32px
-- name: $tablet
- value: 769px
-- name: $desktop
- value: 960px + (2 * $gap)
-- name: $widescreen
- value: 1152px + (2 * $gap)
-- name: $fullhd
- value: 1344px + (2 * $gap)
+variables_keys:
+- gap
+- tablet
+- desktop
+- widescreen
+- fullhd
---
{% include subnav-overview.html %}
@@ -47,7 +42,7 @@ variables:
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
- {% if breakpoint.id == 'fullhd' %}New! {% endif %}{{ breakpoint.id }}
: {% if breakpoint.id == 'Mobile' %}up to {{ breakpoint.to }}px
{% else %}from {{ breakpoint.from }}px
{% endif %}
+ {% if breakpoint.id == 'fullhd' %}New! {% endif %}{{ breakpoint.id }}
: {% if breakpoint.id == 'mobile' %}up to {{ breakpoint.to }}px
{% else %}from {{ breakpoint.from }}px
{% endif %}
{% endfor %}
@@ -190,9 +185,41 @@ variables:
- {% capture custom_message %}You can use these variables to customize the responsive breakpoints. Simply set one or multiple of these variables before importing Bulma. Learn how .{% endcapture %}
-
- {% include variables.html custom_message = custom_message %}
+ {% include anchor.html name="Variables" %}
+
+
+
+ You can use these variables to customize the responsive breakpoints. Simply set one or multiple of these variables before importing Bulma. Learn how .
+
+
+
+
+
+
+ Name
+ Default value
+
+
+
+
+ Name
+ Default value
+
+
+
+ {% for key in page.variables_keys %}
+ {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
+
+
+ {{ variable.name }}
+
+
+ {{ variable.value }}
+
+
+ {% endfor %}
+
+
diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
index 929b361b..5f9051ef 100644
--- a/docs/documentation/overview/variables.html
+++ b/docs/documentation/overview/variables.html
@@ -3,234 +3,6 @@ title: Variables
layout: documentation
doc-tab: overview
doc-subtab: variables
-initial_colors:
-- name: $black
- value: hsl(0, 0%, 4%)
-- name: $black-bis
- value: hsl(0, 0%, 7%)
-- name: $black-ter
- value: hsl(0, 0%, 14%)
-- name: $grey-darker
- value: hsl(0, 0%, 21%)
-- name: $grey-dark
- value: hsl(0, 0%, 29%)
-- name: $grey
- value: hsl(0, 0%, 48%)
-- name: $grey-light
- value: hsl(0, 0%, 71%)
-- name: $grey-lighter
- value: hsl(0, 0%, 86%)
-- name: $white-ter
- value: hsl(0, 0%, 96%)
-- name: $white-bis
- value: hsl(0, 0%, 98%)
-- name: $white
- value: hsl(0, 0%, 100%)
-- name: $orange
- value: hsl(14, 100%, 53%)
-- name: $yellow
- value: hsl(48, 100%, 67%)
-- name: $green
- value: hsl(141, 71%, 48%)
-- name: $turquoise
- value: hsl(171, 100%, 41%)
-- name: $cyan
- value: hsl(204, 86%, 53%)
-- name: $cyan
- value: hsl(204, 86%, 53%)
-- name: $blue
- value: hsl(217, 71%, 53%)
-- name: $purple
- value: hsl(271, 100%, 71%)
-- name: $red
- value: hsl(348, 100%, 61%)
-initial_variables:
-- name: $family-sans-serif
- value: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
-- name: $family-monospace
- value: monospace
-- name: $render-mode
- value: optimizeLegibility
-- name: $size-1
- value: 3rem
-- name: $size-2
- value: 2.5rem
-- name: $size-3
- value: 2rem
-- name: $size-4
- value: 1.5rem
-- name: $size-5
- value: 1.25rem
-- name: $size-6
- value: 1rem
-- name: $size-7
- value: 0.75rem
-- name: $weight-light
- value: 300
-- name: $weight-normal
- value: 400
-- name: $weight-medium
- value: 500
-- name: $weight-semibold
- value: 600
-- name: $weight-bold
- value: 700
-- name: $gap
- value: 32px
-- name: $tablet
- value: 769px
-- name: $desktop
- value: 960px + (2 * $gap)
-- name: $widescreen
- value: 1152px + (2 * $gap)
-- name: $fullhd
- value: 1344px + (2 * $gap)
-- name: $easing
- value: ease-out
-- name: $radius-small
- value: 2px
-- name: $radius
- value: 3px
-- name: $radius-large
- value: 5px
-- name: $speed
- value: 86ms
-derived_variables:
-- name: $primary
- value: $turquoise
-- name: $link
- value: $blue
-- name: $info
- value: $cyan
-- name: $success
- value: $green
-- name: $warning
- value: $yellow
-- name: $danger
- value: $red
-- name: $light
- value: $white-ter
-- name: $dark
- value: $grey-darker
-- name: $orange-invert
- value: findColorInvert($orange)
-- name: $yellow-invert
- value: findColorInvert($yellow)
-- name: $green-invert
- value: findColorInvert($green)
-- name: $turquoise-invert
- value: findColorInvert($turquoise)
-- name: $blue-invert
- value: findColorInvert($blue)
-- name: $purple-invert
- value: findColorInvert($purple)
-- name: $red-invert
- value: findColorInvert($red)
-- name: $primary-invert
- value: $turquoise-invert
-- name: $info-invert
- value: $blue-invert
-- name: $success-invert
- value: $green-invert
-- name: $warning-invert
- value: $yellow-invert
-- name: $danger-invert
- value: $red-invert
-- name: $light-invert
- value: $dark
-- name: $dark-invert
- value: $light
-- name: $background
- value: $white-ter
-- name: $border
- value: $grey-lighter
-- name: $border-hover
- value: $grey-light
-- name: $text
- value: $grey-dark
-- name: $text-invert
- value: findColorInvert($text)
-- name: $text-light
- value: $grey
-- name: $text-strong
- value: $grey-darker
-- name: $code
- value: $red
-- name: $code-background
- value: $background
-- name: $pre
- value: $text
-- name: $pre-background
- value: $background
-- name: $link
- value: $blue
-- name: $link-invert
- value: $blue-invert
-- name: $link-visited
- value: $purple
-- name: $link-hover
- value: $grey-darker
-- name: $link-hover-border
- value: $grey-light
-- name: $link-focus
- value: $grey-darker
-- name: $link-focus-border
- value: $blue
-- name: $link-active
- value: $grey-darker
-- name: $link-active-border
- value: $grey-dark
-- name: $family-primary
- value: $family-sans-serif
-- name: $family-code
- value: $family-monospace
-- name: $size-small
- value: $size-7
-- name: $size-normal
- value: $size-6
-- name: $size-medium
- value: $size-5
-- name: $size-large
- value: $size-4
-- name: $colors
- value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))'
-- name: $shades
- value: '("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)'
-- name: $sizes
- value: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
-generic_variables:
-- name: $body-background-color
- value: '#fff'
-- name: $body-size
- value: 16px
-- name: $body-rendering
- value: optimizeLegibility
-- name: $body-family
- value: $family-primary
-- name: $body-color
- value: $text
-- name: $body-weight
- value: $weight-normal
-- name: $body-line-height
- value: 1.5
-- name: $code-family
- value: $family-code
-- name: $code-padding
- value: 0.25em 0.5em 0.25em
-- name: $code-weight
- value: normal
-- name: $code-size
- value: 0.875em
-- name: $hr-background-color
- value: $border
-- name: $hr-height
- value: 1px
-- name: $hr-margin
- value: 1.5rem 0
-- name: $strong-color
- value: $text-strong
-- name: $strong-weight
- value: $weight-bold
---
{% include subnav-overview.html %}
@@ -241,6 +13,11 @@ generic_variables:
Easily customize Bulma to match your design
+
+ {% 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 %}
Bulma has two variable files divided into 4 sections:
@@ -248,10 +25,10 @@ generic_variables:
Initial variables : where you define variables by literal value , like:
- colors : $blue: hsl(217, 71%, 53%)
- font sizes : $size-1: 3rem
- dimensions : $gap: 32px
- other values : $easing: ease-out
or $radius-large: 5px
+ colors : {{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}
+ font sizes : {{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}
+ dimensions : {{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}
+ other values : {{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}
or {{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}
@@ -260,25 +37,25 @@ generic_variables:
Primary colors derived from the initial variables:
- $primary: $turquoise
- $link: $blue
- $info: $cyan
- $success: $green
- $warning: $yellow
- $danger: $red
- $dark: $grey-darker
- $text: $grey-dark
+ {{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}
+ {{ derived_vars.link.name }}: {{ derived_vars.link.value }}
+ {{ derived_vars.info.name }}: {{ derived_vars.info.value }}
+ {{ derived_vars.success.name }}: {{ derived_vars.success.value }}
+ {{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}
+ {{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}
+ {{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}
+ {{ derived_vars.text.name }}: {{ derived_vars.text.value }}
-
$background: $white-ter
: a general background color
-
$link: $primary
: the links use the primary color
-
$family-primary: $family-sans-serif
: the primary font family is the sans-serif one
+
{{ derived_vars.background.name }}: {{ derived_vars.background.value }}
: a general background color
+
{{ derived_vars.link.name }}: {{ derived_vars.link.value }}
: the links use the primary color
+
{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}
: the primary font family is the sans-serif one
Lists and maps which are collections so already defined variables:
- $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))
- $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)
- $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
+ {{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}
+ {{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}
+ {{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}
@@ -293,74 +70,52 @@ generic_variables:
- These are variables with a literal value.
+ These are variables with a literal value.
- {% for color in page.initial_colors %}
-
-
- {{ color.name }}
-
-
-
- {{ color.value }}
-
-
- {% endfor %}
- {% for variable in page.initial_variables %}
-
-
- {{ variable.name }}
-
-
- {{ variable.value }}
-
-
- {% endfor %}
-
-
- {% include anchor.html name="Derived variables" %}
-
-
-
- These are variables with a value that references another variable.
-
-
-
-
- {% for variable in page.derived_variables %}
-
-
- {{ variable.name }}
-
-
- {{ variable.value }}
-
-
- {% endfor %}
-
-
- {% include anchor.html name="Generic variables" %}
-
-
-
- The following generic variables are provided in ./sass/base/generic.sass
.
-
-
-
-
- {% for variable in page.generic_variables %}
+
+ {% for variable_hash in initial_vars %}
+ {% assign variable = variable_hash[1] %}
+ {% assign starts_with = variable.value | slice: 0, 3 %}
{{ variable.name }}
+ {% if starts_with == 'hsl' %}
+
+ {% endif %}
{{ variable.value }}
{% endfor %}
+
+
+ {% capture custom_message %}
+ These are
variables with a value that
references 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
generic variables for general
customization . Simply set one or multiple of these variables
before importing Bulma.
Learn how .
+ {% endcapture %}
+ {%
+ include variables.html
+ anchor_name = 'Generic variables'
+ tab = 'base'
+ subtab = 'generic'
+ custom_message = custom_message
+ table_class = 'is-bordered is-striped'
+ %}
+
diff --git a/docs/made-with-bulma.html b/docs/made-with-bulma.html
index b649b218..5c10158f 100644
--- a/docs/made-with-bulma.html
+++ b/docs/made-with-bulma.html
@@ -84,7 +84,7 @@ images:
{% for image in page.images %}
- {% assign imageUrl = "/images/made-with-bulma" | prepend: site.url }} | append: image.type | append: ".png" %}
+ {% assign imageUrl = "/images/made-with-bulma" | prepend: site.url | append: image.type | append: ".png" %}
{{ image.name }}