From 63d4fb79b60d1a3ca6bee44332eec97a90afe881 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 29 Jul 2017 15:54:51 +0100
Subject: [PATCH] Add meta to form

---
 docs/documentation/form/checkbox.html |  6 ++++
 docs/documentation/form/input.html    | 47 ++++++++++++++++++++++++---
 docs/documentation/form/radio.html    |  6 ++++
 docs/documentation/form/select.html   | 14 +++++---
 docs/documentation/form/textarea.html | 14 +++++---
 5 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/docs/documentation/form/checkbox.html b/docs/documentation/form/checkbox.html
index 4674d7f9..6c3032cd 100644
--- 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 9827249d..01328e0e 100644
--- 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 c0533d59..d8897dad 100644
--- 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 621e0902..f508dfc5 100644
--- 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 ab7b5575..b570df05 100644
--- 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}}