From 1523ce8527283b8b59a0d3a3ad6a9933628114c3 Mon Sep 17 00:00:00 2001 From: bstashio Date: Tue, 17 Oct 2017 12:28:59 +0300 Subject: [PATCH] Docs/variables data (#1314) * Replace variables.json with colors.json and update related files accordingly * Add variables data files * Update variables include template and all related files to use new variables data * Fix mobile breakpoint id typo in responsivness docs page * Fix Liquid syntax error in made-with-bulma docs page * Update bulma sass files count in modular docs page * Use breakpoints data in responsiveness helpers docs page * Use breakpoints and variables data in typography helpers docs page * Add missing page titles in docs pages front matter --- docs/_data/colors.json | 152 ++++++++ docs/_data/variables.json | 156 -------- docs/_data/variables/base/generic.json | 90 +++++ .../variables/components/breadcrumb.json | 30 ++ docs/_data/variables/components/card.json | 45 +++ docs/_data/variables/components/dropdown.json | 70 ++++ docs/_data/variables/components/menu.json | 50 +++ docs/_data/variables/components/message.json | 70 ++++ docs/_data/variables/components/modal.json | 115 ++++++ docs/_data/variables/components/navbar.json | 150 ++++++++ .../variables/components/pagination.json | 90 +++++ docs/_data/variables/components/panel.json | 105 ++++++ docs/_data/variables/components/tabs.json | 130 +++++++ docs/_data/variables/elements/box.json | 45 +++ docs/_data/variables/elements/button.json | 115 ++++++ docs/_data/variables/elements/content.json | 90 +++++ docs/_data/variables/elements/form.json | 160 ++++++++ docs/_data/variables/elements/icon.json | 30 ++ docs/_data/variables/elements/image.json | 15 + .../variables/elements/notification.json | 25 ++ docs/_data/variables/elements/progress.json | 20 + docs/_data/variables/elements/table.json | 85 +++++ docs/_data/variables/elements/tag.json | 30 ++ docs/_data/variables/elements/title.json | 60 +++ docs/_data/variables/grid/columns.json | 15 + docs/_data/variables/layout/footer.json | 15 + docs/_data/variables/layout/section.json | 25 ++ docs/_data/variables/utilities/controls.json | 30 ++ .../utilities/derived-variables.json | 265 +++++++++++++ .../utilities/initial-variables.json | 230 +++++++++++ docs/_includes/variables.html | 49 ++- docs/documentation/components/breadcrumb.html | 12 +- docs/documentation/components/card.html | 18 +- docs/documentation/components/dropdown.html | 28 +- docs/documentation/components/menu.html | 20 +- docs/documentation/components/message.html | 32 +- docs/documentation/components/modal.html | 46 +-- docs/documentation/components/navbar.html | 60 +-- docs/documentation/components/pagination.html | 36 +- docs/documentation/components/panel.html | 42 +-- docs/documentation/components/tabs.html | 52 +-- docs/documentation/elements/box.html | 17 +- docs/documentation/elements/button.html | 45 +-- docs/documentation/elements/content.html | 35 +- docs/documentation/elements/icon.html | 12 +- docs/documentation/elements/image.html | 5 +- docs/documentation/elements/notification.html | 11 +- docs/documentation/elements/progress.html | 7 +- docs/documentation/elements/table.html | 33 +- docs/documentation/elements/tag.html | 11 +- docs/documentation/elements/title.html | 23 +- docs/documentation/form/file.html | 68 ++-- docs/documentation/form/general.html | 71 +++- docs/documentation/form/input.html | 85 +++-- docs/documentation/layout/footer.html | 5 +- docs/documentation/layout/level.html | 1 + docs/documentation/layout/media-object.html | 1 + docs/documentation/layout/section.html | 9 +- .../modifiers/responsive-helpers.html | 33 +- .../modifiers/typography-helpers.html | 75 ++-- docs/documentation/overview/colors.html | 26 +- docs/documentation/overview/modular.html | 2 +- .../overview/responsiveness.html | 57 ++- docs/documentation/overview/variables.html | 357 +++--------------- docs/made-with-bulma.html | 2 +- 65 files changed, 2736 insertions(+), 1158 deletions(-) create mode 100644 docs/_data/colors.json delete mode 100644 docs/_data/variables.json create mode 100644 docs/_data/variables/base/generic.json create mode 100644 docs/_data/variables/components/breadcrumb.json create mode 100644 docs/_data/variables/components/card.json create mode 100644 docs/_data/variables/components/dropdown.json create mode 100644 docs/_data/variables/components/menu.json create mode 100644 docs/_data/variables/components/message.json create mode 100644 docs/_data/variables/components/modal.json create mode 100644 docs/_data/variables/components/navbar.json create mode 100644 docs/_data/variables/components/pagination.json create mode 100644 docs/_data/variables/components/panel.json create mode 100644 docs/_data/variables/components/tabs.json create mode 100644 docs/_data/variables/elements/box.json create mode 100644 docs/_data/variables/elements/button.json create mode 100644 docs/_data/variables/elements/content.json create mode 100644 docs/_data/variables/elements/form.json create mode 100644 docs/_data/variables/elements/icon.json create mode 100644 docs/_data/variables/elements/image.json create mode 100644 docs/_data/variables/elements/notification.json create mode 100644 docs/_data/variables/elements/progress.json create mode 100644 docs/_data/variables/elements/table.json create mode 100644 docs/_data/variables/elements/tag.json create mode 100644 docs/_data/variables/elements/title.json create mode 100644 docs/_data/variables/grid/columns.json create mode 100644 docs/_data/variables/layout/footer.json create mode 100644 docs/_data/variables/layout/section.json create mode 100644 docs/_data/variables/utilities/controls.json create mode 100644 docs/_data/variables/utilities/derived-variables.json create mode 100644 docs/_data/variables/utilities/initial-variables.json 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 }}

- +
@@ -20,7 +56,8 @@ - {% for variable in page.variables %} + {% for variable_hash in variables %} + {% assign variable = variable_hash[1] %}
Name
{{ 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 %}

{{ color | capitalize }}

@@ -123,7 +99,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 %}
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. +

+
+ + + + + + + + + + + + + + + + {% for key in page.variables_keys %} + {% assign variable = site.data.variables.elements.form.vars[key] %} + + + + + {% endfor %} + +
NameDefault value
NameDefault value
+ {{ variable.name }} + + {{ variable.value }} +
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 %} + + + + + + + + + + + + + + + {% for key in page.variables_controls_keys %} + {% assign variable = site.data.variables.utilities.controls.vars[key] %} + + + + + {% endfor %} + {% for key in page.variables_form_keys %} + {% assign variable = site.data.variables.elements.form.vars[key] %} + + + + + {% endfor %} + +
NameDefault value
NameDefault value
+ {{ variable.name }} + + {{ variable.value }} +
+ {{ variable.name }} + + {{ variable.value }} +
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. +

+
+ + + + + + + + + + + + + + + + {% for key in page.variables_keys %} + {% assign variable = site.data.variables.elements.form.vars[key] %} + + + + + {% endfor %} + +
NameDefault value
NameDefault value
+ {{ variable.name }} + + {{ variable.value }} +
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:

@@ -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. +

+
+ + + + + + + + + + + + + + + + {% for key in page.variables_keys %} + {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %} + + + + + {% endfor %} + +
NameDefault value
NameDefault value
+ {{ variable.name }} + + {{ variable.value }} +
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 %} - - - - - {% endfor %} - {% for variable in page.initial_variables %} - - - - - {% endfor %} -
    - {{ color.name }} - - - {{ color.value }} -
    - {{ variable.name }} - - {{ variable.value }} -
    - - {% include anchor.html name="Derived variables" %} - -
    -

    - These are variables with a value that references another variable. -

    -
    - - - {% for variable in page.derived_variables %} - - - - - {% endfor %} -
    - {{ variable.name }} - - {{ variable.value }} -
    - - {% 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 %} {% endfor %} +
    {{ variable.name }} + {% if starts_with == 'hsl' %} + + {% endif %} {{ variable.value }}
    + + {% 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 }} Made with Bulma