diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html index 0d8257df..4a734039 100644 --- a/docs/_includes/variables.html +++ b/docs/_includes/variables.html @@ -2,7 +2,7 @@

- You can use these variables to customize this {%if include.element %}element{% else %}component{% endif %}. Simply set one or multiple of these variables before importing Bulma. Learn how. + {% 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 %}

diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html index 9c39288b..8bcee3ac 100644 --- a/docs/documentation/components/navbar.html +++ b/docs/documentation/components/navbar.html @@ -17,6 +17,8 @@ variables: 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 diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html index 787266e1..fd0fdf86 100644 --- a/docs/documentation/components/pagination.html +++ b/docs/documentation/components/pagination.html @@ -5,8 +5,6 @@ doc-subtab: pagination variables: - name: $pagination-color value: $grey-darker -- name: $pagination-background - value: $white - name: $pagination-border-color value: $grey-lighter - name: $pagination-margin @@ -37,8 +35,6 @@ variables: value: $link - name: $pagination-ellipsis-color value: $grey-light -- name: $pagination-shadow-inset - value: inset 0 1px 2px rgba($black, 0 --- {% capture pagination_example %} diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html index 9587ba42..b9e5453d 100644 --- a/docs/documentation/components/tabs.html +++ b/docs/documentation/components/tabs.html @@ -32,7 +32,7 @@ variables: - name: $tabs-boxed-link-active-border-color value: $border - name: $tabs-boxed-link-active-border-bottom-color - value: transparent !important + value: transparent - name: $tabs-toggle-link-border-color value: $border - name: $tabs-toggle-link-border-style diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index 0343affb..871d08c6 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -46,8 +46,6 @@ variables: value: $white-ter - name: $button-static-border-color value: $grey-lighter -- name: $button-shadow-inset - value: inset 0 1px 2px rgba($black, 0.2) --- {% capture button_example %} diff --git a/docs/documentation/elements/table.html b/docs/documentation/elements/table.html index 942a7d8d..11ec6052 100644 --- a/docs/documentation/elements/table.html +++ b/docs/documentation/elements/table.html @@ -16,8 +16,6 @@ variables: value: 0.5em 0.75em - name: $table-cell-heading-color value: $text-strong -- name: $table-head-color - value: $grey - name: $table-head-cell-border-width value: 0 0 2px - name: $table-head-cell-color diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html index 3fb09cf6..7310dc98 100644 --- a/docs/documentation/elements/title.html +++ b/docs/documentation/elements/title.html @@ -10,10 +10,10 @@ variables: value: $size-3 - name: $title-weight value: $weight-semibold -- name: $title-strong-weight - value: inherit - name: $title-strong-color value: inherit +- name: $title-strong-weight + value: inherit - name: $subtitle-color value: $grey-dark - name: $subtitle-size diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html index 43e71de9..8b067e10 100644 --- a/docs/documentation/form/general.html +++ b/docs/documentation/form/general.html @@ -3,6 +3,21 @@ 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 --- {% capture example %} @@ -1027,6 +1042,10 @@ doc-subtab: general {% include snippet.html content=field_label_example horizontal=true clipped=true %} + + {% 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 %} + + {% include variables.html custom_message = custom_message %} diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html index 67dff13b..bbefa7c4 100644 --- a/docs/documentation/layout/footer.html +++ b/docs/documentation/layout/footer.html @@ -3,6 +3,9 @@ title: Footer layout: documentation doc-tab: layout doc-subtab: footer +variables: +- name: $footer-background-color + value: $background --- {% include subnav-layout.html %} @@ -51,5 +54,7 @@ doc-subtab: footer {% endhighlight %} + + {% include variables.html layout=true %} diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html index b0b5c27e..61707c8c 100644 --- a/docs/documentation/layout/section.html +++ b/docs/documentation/layout/section.html @@ -3,6 +3,13 @@ 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 %} @@ -37,5 +44,7 @@ doc-subtab: section

You can use the modifiers is-medium and is-large to change the spacing.

+ {% include variables.html layout=true %} + diff --git a/docs/documentation/overview/modular.html b/docs/documentation/overview/modular.html index a37608b0..e28ce1df 100644 --- a/docs/documentation/overview/modular.html +++ b/docs/documentation/overview/modular.html @@ -16,7 +16,7 @@ doc-subtab: modular

- Bulma consists of 29 .sass files that you can import individually. + Bulma consists of 40 .sass files that you can import individually.

For example, let's say you only want the Bulma columns. diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html index c30e8e18..49bec6f6 100644 --- a/docs/documentation/overview/variables.html +++ b/docs/documentation/overview/variables.html @@ -72,7 +72,7 @@ initial_variables: - name: $weight-bold value: 700 - name: $gap - value: 24px + value: 32px - name: $tablet value: 769px - name: $desktop @@ -192,6 +192,39 @@ derived_variables: 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 %} @@ -301,5 +334,26 @@ derived_variables: {% endfor %} + + {% include anchor.html name="Generic variables" %} + +

+

+ The following generic variables are provided in ./sass/base/generic.sass. +

+
+ + + {% for variable in page.generic_variables %} + + + + + {% endfor %} +
+ {{ variable.name }} + + {{ variable.value }} +