From 00f87b240e52065f6a07641999315aafb89be781 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Mon, 28 Aug 2017 13:29:09 +0800
Subject: Add Button variant mixins

---
 docs/getting-started.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

(limited to 'docs/getting-started.html')

diff --git a/docs/getting-started.html b/docs/getting-started.html
index 982080e..e57c652 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -337,6 +337,7 @@
           </div>
 
           <h4 id="compiling-gulptasks" class="s-subtitle">Folder Structure</h4>
+
 <!-- folder structure -->
 <pre class="code"><code>spectre/
 ├── dist/                               <span class="com">// Build folder (Git ignored)</span>
@@ -456,6 +457,27 @@
               </div>
             </div>
           </div>
+
+          <h5 id="variables-buttons" class="s-subtitle">Buttons</h5>
+          <div class="docs-note">
+            <p>There are 2 button variant mixins in <code>mixins.less</code> to generate different color variants. </p>
+            <ul>
+              <li>.button-variant(<code>@color</code>: @primary-color);</li>
+              <li>.button-outline-variant(<code>@color</code>: @primary-color);</li>
+            </ul>
+
+<!-- button variables example -->
+<pre class="code" data-lang="LESS"><code><span class="com">&lt;!-- filled button with the success color --&gt;</span>
+<span class="tag">.btn-success</span> {
+  .button-variant(<span class="atv">@success-color</span>);
+}
+
+<span class="com">&lt;!-- outlined button with the success color --&gt;</span>
+<span class="tag">.btn-outline-success</span> {
+  .button-outline-variant(<span class="atv">@success-color</span>);
+}
+</code></pre>
+          </div>
           
           <h5 id="variables-sizes" class="s-subtitle">Sizes</h5>
           <div class="docs-note">
-- 
cgit v1.3.1-23-gd82d