Add documentation of all CSS variables available

docs/documentation/components/tabs.html

@@ -482,9 +482,8 @@ name="Combining" %}
 </div>
 
 {% include docs/elements/snippet.html content=tabs_centered_boxed_example
-horizontal=true more=true %} {% include docs/elements/snippet.html
-content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include
-docs/elements/snippet.html content=tabs_centered_boxed_medium_example
-horizontal=true more=true %} {% include docs/elements/snippet.html
-content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} {%
-include docs/components/variables.html type='component' %}
+horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_centered_boxed_medium_example
+horizontal=true more=true %}
+{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}

docs/documentation/elements/delete.html

@@ -78,3 +78,5 @@ meta:
 </div>
 
 {% include docs/elements/snippet.html content=cross_elements_example %}
+
+{% include docs/components/variables.html %}

docs/documentation/elements/image.html

@@ -21,6 +21,7 @@ meta:
   colors: false
   sizes: false
   variables: true
+  hide_css_vars: true
 ---
 {% capture image %}
 <figure class="image is-128x128">

docs/documentation/elements/table.html

@@ -862,7 +862,3 @@ meta:
 {{- scrollable_table -}}
 {%- endhighlight %}
 {{ simple_scrollable_table_example }}
-{%
-  include docs/components/variables.html
-  type='element'
-%}

docs/documentation/form/file.html

@@ -450,7 +450,3 @@ meta:
 </div>
 
 {% include docs/elements/snippet.html horizontal=true content=file_javascript %}
-{%
-  include docs/components/variables.html type='element'
-  variables_keys=page.variables_keys folder='elements' file='form'
-%}

docs/documentation/form/general.html

@@ -1108,14 +1108,3 @@ variables_keys:
   folder='utilities'
   file='controls'
 %}
-
-{%
-  include docs/components/variables.html
-  anchor_name='Form variables'
-  type='element'
-  variables_keys=page.variables_keys
-  folder='elements'
-  file='form'
-  hide_anchor=true
-  hide_content=true
-%}

docs/documentation/form/input.html

@@ -442,8 +442,3 @@ meta:
     {%- endhighlight %}
   </div>
 </div>
-
-{%
-  include docs/components/variables.html type='element'
-  variables_keys=page.variables_keys folder='elements' file='form'
-%}

docs/documentation/form/textarea.html

@@ -12,7 +12,7 @@ breadcrumb:
 meta:
   colors: true
   sizes: true
-  variables: false
+  variables: true
 ---
 {% capture textarea_example %}
 <textarea class="textarea" placeholder="e.g. Hello world"></textarea>

docs/documentation/layout/container.html

@@ -15,6 +15,7 @@ meta:
   colors: false
   sizes: true
   variables: true
+  hide_css_vars: true
 ---
 
 {% capture container_example %}
@@ -310,6 +311,4 @@ maximum widths" %}
 
 <div class="bd-example is-fullwidth">{{ container_fluid_example }}</div>
 
-{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %} {%
-include docs/components/variables.html type='element'
-data=site.data.variables.elements.container %}
+{% highlight html -%} {{- container_fluid_example -}} {%- endhighlight %}

docs/documentation/layout/footer.html

@@ -9,6 +9,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-footer
+meta:
+  variables: true
 ---
 {% capture footer_example %}
 <footer class="footer">

docs/documentation/layout/level.html

@@ -9,6 +9,9 @@ breadcrumb:
   - documentation
   - layout
   - layout-level
+meta:
+  variables: true
+  hide_css_vars: true
 ---
 {% capture nav_example %}
 <!-- Main container -->

docs/documentation/layout/media-object.html

@@ -9,6 +9,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-media
+meta:
+  variables: true
 ---
 {% capture media_example %}
 <article class="media">

docs/documentation/layout/section.html

@@ -10,6 +10,8 @@ breadcrumb:
   - documentation
   - layout
   - layout-section
+meta:
+  variables: true
 ---
 {% capture section_example %}
 <section class="section">