Add meta to components

docs/documentation/components/panel.html

@@ -2,62 +2,66 @@
 layout: documentation
 doc-tab: components
 doc-subtab: panel
+variables:
+- name: $panel-item-border
+  value: 1px solid $border
+- name: $panel-heading-background-color
+  value: $background
+- name: $panel-heading-color
+  value: $text-strong
+- name: $panel-heading-line-height
+  value: 1.25
+- name: $panel-heading-padding
+  value: 0.5em 0.75em
+- name: $panel-heading-radius
+  value: $radius
+- name: $panel-heading-size
+  value: 1.25em
+- name: $panel-heading-weight
+  value: $weight-light
+- name: $panel-tab-border-bottom
+  value: 1px solid $border
+- name: $panel-tab-active-border-bottom-color
+  value: $link-active-border
+- name: $panel-tab-active-color
+  value: $link-active
+- name: $panel-list-item-color
+  value: $text
+- name: $panel-list-item-hover-color
+  value: $link
+- name: $panel-block-color
+  value: $text-strong
+- name: $panel-block-hover-background-color
+  value: $background
+- name: $panel-block-active-border-left-color
+  value: $link
+- name: $panel-block-active-color
+  value: $link-active
+- name: $panel-block-active-icon-color
+  value: $link
+- name: $panel-icon-color
+  value: $text-light
 ---
 
-{% include subnav-components.html %}
-
-<section class="section">
-  <div class="container">
-    <h1 class="title">Panel</h1>
-    <h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
-
-    <hr>
-
-    <div class="content">
-      <p>
-        The <code>panel</code> is container for several types:
-      </p>
-      <ul>
-        <li>
-          <code>panel-heading</code> as the first child
-        </li>
-        <li>
-          <code>panel-tabs</code> for navigation
-        </li>
-        <li>
-          <code>panel-block</code> which can contain other elements, like:
-          <ul>
-            <li><code>control</code></li>
-            <li><code>input</code></li>
-            <li><code>button</code></li>
-            <li><code>panel-icon</code></li>
-          </ul>
-        </li>
-      </ul>
-      <p>
-        The <code>panel-block</code> can be an anchor tag <code>&lt;a&gt;</code> or a label <code>&lt;label&gt;</code> with a checkbox inside.
-      </p>
-    </div>
-
 {% capture panel_example %}
 <nav class="panel">
   <p class="panel-heading">
-    Repositories
+    repositories
   </p>
   <div class="panel-block">
     <p class="control has-icons-left">
-      <input class="input is-small" type="text" placeholder="Search">
+      <input class="input is-small" type="text" placeholder="search">
       <span class="icon is-small is-left">
         <i class="fa fa-search"></i>
       </span>
     </p>
   </div>
   <p class="panel-tabs">
-    <a class="is-active">All</a>
-    <a>Public</a>
-    <a>Private</a>
-    <a>Sources</a>
-    <a>Forks</a>
+    <a class="is-active">all</a>
+    <a>public</a>
+    <a>private</a>
+    <a>sources</a>
+    <a>forks</a>
   </p>
   <a class="panel-block is-active">
     <span class="panel-icon">
@@ -87,7 +91,7 @@ doc-subtab: panel
     <span class="panel-icon">
       <i class="fa fa-code-fork"></i>
     </span>
-    daniellowtw/infBoard
+    daniellowtw/infboard
   </a>
   <a class="panel-block">
     <span class="panel-icon">
@@ -97,25 +101,67 @@ doc-subtab: panel
   </a>
   <label class="panel-block">
     <input type="checkbox">
-    Remember me
+    remember me
   </label>
   <div class="panel-block">
     <button class="button is-primary is-outlined is-fullwidth">
-      Reset all filters
+      reset all filters
     </button>
   </div>
 </nav>
 {% endcapture %}
+
+{% include subnav-components.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Panel</h1>
+    <h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
+    {%
+      include meta.html
+      colors=false
+      sizes=false
+      variables=true
+    %}
+
+    <hr>
+
+    <div class="content">
+      <p>
+        The <code>panel</code> is container for several types:
+      </p>
+      <ul>
+        <li>
+          <code>panel-heading</code> as the first child
+        </li>
+        <li>
+          <code>panel-tabs</code> for navigation
+        </li>
+        <li>
+          <code>panel-block</code> which can contain other elements, like:
+          <ul>
+            <li><code>control</code></li>
+            <li><code>input</code></li>
+            <li><code>button</code></li>
+            <li><code>panel-icon</code></li>
+          </ul>
+        </li>
+      </ul>
+      <p>
+        The <code>panel-block</code> can be an anchor tag <code>&lt;a&gt;</code> or a label <code>&lt;label&gt;</code> with a checkbox inside.
+      </p>
+    </div>
+
     <div class="columns">
       <div class="column is-4">
-{{panel_example}}
+        {{panel_example}}
       </div>
       <div class="column">
-{% highlight html %}
-{{panel_example}}
-{% endhighlight %}
+        {% highlight html %}{{panel_example}}{% endhighlight %}
       </div>
     </div>
 
+    {% include variables.html %}
+
   </div>
 </section>