Update references to variables in docs (#1238)

* Update navbar variables in component docs page

* Update pagination variables in component docs page

* Update tabs variables in component docs page

* Update button variables in element docs page

* Update table variables in element docs page

* Update title variables in element docs page

* Update variables template to support layout

* Add section variables in relevant docs page

* Add footer variables in relevant docs page

* Update variables template to support custom messages

* Add form generic variables in relevant docs page

* Update derived variables in relevant docs page

* Add generic variables to variables docs page

* Update sass files count in docs Modular page

diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html
index 0d8257df8214f8c7b007f9766aaced61aa250553..4a734039bdf894e6499bfb4431a2025709f8a719 100644 (file)
--- a/docs/_includes/variables.html
+++ b/docs/_includes/variables.html
@@ -2,7 +2,7 @@
 
 <div class="content">
   <p>
-    You can use these variables to <strong>customize</strong> this {%if include.element %}element{% else %}component{% endif %}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+    {% if include.custom_message %}{{ include.custom_message }}{% else %}You can use these variables to <strong>customize</strong> this {%if include.element %}element{% elsif include.layout %}layout{% else %}component{% endif %}. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endif %}
   </p>
 </div>
 

diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index 9c39288b7386ac10763195e4d114a36a4d047f71..8bcee3acbf9b333631d7114ff7ee6542c1464bb3 100644 (file)
--- 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 787266e197350fbf9f69b15c0a918066a9df7b69..fd0fdf863a7ac50a753924b2f2471f3e1dd10783 100644 (file)
--- 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 9587ba4254b7c113eb57d1eb8c1306b9822a4563..b9e5453dbd53a27dbab4743589e0d92d32032961 100644 (file)
--- 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 0343affb6ea1ca44ad2c1a4bf15b4ef04c8ca75e..871d08c69a57b25ff062f21d773062a2ca95f3d0 100644 (file)
--- 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 942a7d8db56f3050ad0c41c618065f5ab51f3c65..11ec6052b3f2cbc1a744fcafd1ea3aee8c79e667 100644 (file)
--- 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 3fb09cf6fdb445c8312b751dd45b5ef993bc3c7a..7310dc987ed50291f37dc1960ed921806bc9591a 100644 (file)
--- 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 43e71de9af6228e67788db6ff03191c2ba02c3b9..8b067e1016933b566111a78227e224504c51d975 100644 (file)
--- 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
     </div>
 
     {% include snippet.html content=field_label_example horizontal=true clipped=true %}
+               
+               {% capture custom_message %}Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
+                       
+    {% include variables.html custom_message = custom_message %}
 
   </div>
 </section>

diff --git a/docs/documentation/layout/footer.html b/docs/documentation/layout/footer.html
index 67dff13bf33831790905b9a0ad9eda3b29676c13..bbefa7c43f4bbba48038bd022781450945f167ef 100644 (file)
--- 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
   </div>
 </footer>
 {% endhighlight %}
+
+    {% include variables.html layout=true %}
   </div>
 </section>

diff --git a/docs/documentation/layout/section.html b/docs/documentation/layout/section.html
index b0b5c27eb5773c320c79efca57e1cdadc972e19f..61707c8c8d284be9df398c9530dbbf8275d1e4c4 100644 (file)
--- 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
       <p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
     </div>
 
+    {% include variables.html layout=true %}
+
   </div>
 </section>

diff --git a/docs/documentation/overview/modular.html b/docs/documentation/overview/modular.html
index a37608b0338ee28d9e82dd5f3c943184c75d8b26..e28ce1dfcd1e7f24a7c70172415b0ed0a476cca6 100644 (file)
--- a/docs/documentation/overview/modular.html
+++ b/docs/documentation/overview/modular.html
@@ -16,7 +16,7 @@ doc-subtab: modular
 
     <div class="content">
       <p>
-        Bulma consists of <strong>29</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
+        Bulma consists of <strong>40</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
       </p>
       <p>
         For example, let's say you only want the Bulma <strong>columns.</strong>

diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
index c30e8e18a4dc9264e6c2212e66a8e9a35dfb49bf..49bec6f6b573aa9a87297e9e05bfd0b7ceb6d43a 100644 (file)
--- 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:
         </tr>
       {% endfor %}
     </table>
+
+    {% include anchor.html name="Generic variables" %}
+
+    <div class="content">
+      <p>
+        The following generic variables are provided in <code>./sass/base/generic.sass</code>.
+      </p>
+    </div>
+
+    <table class="table is-bordered is-striped">
+      {% for variable in page.generic_variables %}
+        <tr>
+          <td>
+            <code style="white-space: nowrap;">{{ variable.name }}</code>
+          </td>
+          <td>
+            <code>{{ variable.value }}</code>
+          </td>
+        </tr>
+      {% endfor %}
+    </table>
   </div>
 </section>