Add meta to form

diff --git a/docs/documentation/form/checkbox.html b/docs/documentation/form/checkbox.html
index 4674d7f9e8871cd5ad87d8393655eafeb7cd56af..6c3032cda5315d48fcca6fa1d189c8fda27ee37a 100644 (file)
--- a/docs/documentation/form/checkbox.html
+++ b/docs/documentation/form/checkbox.html
@@ -34,6 +34,12 @@ doc-subtab: checkbox
     <h2 class="subtitle">
       The 2-state <strong>checkbox</strong> in its native format
     </h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=false
+      variables=false
+    %}
 
     <hr>
 

diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html
index 9827249d681751810e91a3692bb1b20a9651efd0..01328e0e417ffe7c24166f7fc66cffd9f1c4d4bc 100644 (file)
--- a/docs/documentation/form/input.html
+++ b/docs/documentation/form/input.html
@@ -3,6 +3,37 @@ 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
 ---
 
 {% capture input_example %}
@@ -191,6 +222,12 @@ doc-subtab: input
     <h2 class="subtitle">
       The <strong>text input</strong> and its variations
     </h2>
+    {%
+      include meta.html
+      colors=true
+      sizes=true
+      variables=true
+    %}
 
     <hr>
 
@@ -219,9 +256,7 @@ doc-subtab: input
       </div>
     </div>
 
-    <hr>
-
-    <h3 id="input-color" class="title">Colors</h3>
+    {% include heading.html name="Colors" %}
 
     <div class="columns">
       <div class="column is-half">
@@ -232,8 +267,8 @@ doc-subtab: input
       </div>
     </div>
 
-    <hr>
-    <h3 id="input-size" class="title">Sizes</h3>
+    {% include heading.html name="Sizes" %}
+
     <div class="columns">
       <div class="column is-half">
         {{sizes_example}}
@@ -391,5 +426,7 @@ doc-subtab: input
       </div>
     </div>
 
+    {% include variables.html element=true %}
+
   </div>
 </section>

diff --git a/docs/documentation/form/radio.html b/docs/documentation/form/radio.html
index c0533d59ab1832a0c16ce513d4bcf09a39d802c8..d8897dadd328505c543e07ce445407a6bf8fca23 100644 (file)
--- a/docs/documentation/form/radio.html
+++ b/docs/documentation/form/radio.html
@@ -56,6 +56,12 @@ doc-subtab: radio
     <h2 class="subtitle">
       The mutually exclusive <strong>radio buttons</strong> in their native format
     </h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=false
+      variables=false
+    %}
 
     <hr>
 

diff --git a/docs/documentation/form/select.html b/docs/documentation/form/select.html
index 621e0902ada6771cfc15fb1e70e7799b6317fbba..f508dfc53296a215747627202bc1ac1db3c6e3df 100644 (file)
--- a/docs/documentation/form/select.html
+++ b/docs/documentation/form/select.html
@@ -269,6 +269,12 @@ doc-subtab: select
     <h2 class="subtitle">
       The browser built-in <strong>select dropdown</strong>, styled accordingly
     </h2>
+    {%
+      include meta.html
+      colors=true
+      sizes=true
+      variables=false
+    %}
 
     <hr>
 
@@ -314,9 +320,7 @@ doc-subtab: select
       </div>
     {% endif %}
 
-    <hr>
-
-    <h3 id="select-color" class="title">Colors</h3>
+    {% include heading.html name="Colors" %}
 
     <div class="columns">
       <div class="column is-half">
@@ -327,8 +331,8 @@ doc-subtab: select
       </div>
     </div>
 
-    <hr>
-    <h3 id="select-size" class="title">Sizes</h3>
+    {% include heading.html name="Sizes" %}
+
     <div class="columns">
       <div class="column is-half">
         {{sizes_example}}

diff --git a/docs/documentation/form/textarea.html b/docs/documentation/form/textarea.html
index ab7b55756342f4a23e9bd853a79975df728987c3..b570df058a0c31072808f49125a6f021c5d28afc 100644 (file)
--- a/docs/documentation/form/textarea.html
+++ b/docs/documentation/form/textarea.html
@@ -125,6 +125,12 @@ doc-subtab: textarea
     <h2 class="subtitle">
       The multiline <strong>textarea</strong> and its variations
     </h2>
+    {%
+      include meta.html
+      colors=true
+      sizes=true
+      variables=false
+    %}
 
     <hr>
 
@@ -165,9 +171,7 @@ doc-subtab: textarea
       </div>
     </div>
 
-    <hr>
-
-    <h3 id="input-color" class="title">Colors</h3>
+    {% include heading.html name="Colors" %}
 
     <div class="columns">
       <div class="column is-half">
@@ -178,8 +182,8 @@ doc-subtab: textarea
       </div>
     </div>
 
-    <hr>
-    <h3 id="input-size" class="title">Sizes</h3>
+    {% include heading.html name="Sizes" %}
+
     <div class="columns">
       <div class="column is-half">
         {{sizes_example}}