From e6fb30506f6228cbe609f284357538d76e46c989 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Thu, 23 Feb 2017 13:59:32 +0800
Subject: ADD: Action button style

---
 docs/components.html |  4 ++--
 docs/elements.html   | 25 ++++++++++++++++++++-----
 2 files changed, 22 insertions(+), 7 deletions(-)

(limited to 'docs')

diff --git a/docs/components.html b/docs/components.html
index a4f52e9..8accdec 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -169,7 +169,7 @@
             </div>
           </div>
           <section class="notes">
-            <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the class <code>is-focus</code> to <code>form-autocomplete-input</code> to make it appear as focus state.</p>
+            <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the class <code>is-focused</code> to <code>form-autocomplete-input</code> to make it appear as focus state.</p>
             <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p>
           </section>
 
@@ -1366,7 +1366,7 @@
                   <div class="tile-meta text-ellipsis">14MB · Public · 1 Jan, 2017</div>
                 </div>
                 <div class="tile-action">
-                  <button class="btn btn-link"><i class="icon icon-more_vert"></i></button>
+                  <button class="btn btn-link btn-action"><i class="icon icon-more_vert"></i></button>
                 </div>
               </div>
             </div>
diff --git a/docs/elements.html b/docs/elements.html
index 47cb266..9b3de15 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -408,14 +408,25 @@
           <header class="text-center"><h4>Button sizes</h4></header>
 
           <div class="columns">
-            <div class="column col-xs-12">
-              <button class="btn btn-lg">large button</button>
-              <button class="btn">normal button</button>
-              <button class="btn btn-sm">small button</button>
+            <div class="column col-6 col-xs-12">
+              <button class="btn btn-primary btn-lg">large</button>
+              <button class="btn btn-primary">normal</button>
+              <button class="btn btn-primary btn-sm">small</button>
+            </div>
+            <div class="column col-3 col-xs-12">
+              <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-markunread"></i></button>
+              <button class="btn btn-action btn-primary"><i class="icon icon-markunread"></i></button>
+              <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-markunread"></i></button>
+            </div>
+            <div class="column col-3 col-xs-12">
+              <button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-markunread"></i></button>
+              <button class="btn btn-action btn-primary circle"><i class="icon icon-markunread"></i></button>
+              <button class="btn btn-action btn-primary btn-sm circle"><i class="icon icon-markunread"></i></button>
             </div>
           </div>
           <section class="notes">
             <p>Add the class <code>btn-sm</code> or <code>btn-lg</code> for small or large button size. Also, you can add the class <code>btn-block</code> for a full-width button. </p>
+            <p>Please note that you could use the class <code>btn-action</code> for a square button, or add another class <code>circle</code> for a round button, which is often used as a Float Action Button (FAB).</p>
           </section>
 
 <!-- buttons example -->
@@ -423,7 +434,10 @@
 <code class="code lang-html" data-lang="HTML">&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-lg&quot;</span>&gt;large button&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-sm&quot;</span>&gt;small button&lt;<span class="tag">/button</span>&gt;
 
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-block&quot;</span>&gt;block button&lt;<span class="tag">/button</span>&gt;</code>
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-block&quot;</span>&gt;block button&lt;<span class="tag">/button</span>&gt;
+
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;
+&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-action circle&quot;</span>&gt;&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-markunread&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;&lt;<span class="tag">/button</span>&gt;</code>
 </pre>
 
           <div class="columns">
@@ -432,6 +446,7 @@
               <button class="btn btn-primary"><i class="icon icon-markunread"></i> normal</button>
               <button class="btn btn-primary btn-sm"><i class="icon icon-markunread"></i> small</button>
             </div>
+
           </div>
           <section class="notes">
             <p>Icons with the class <code>icon</code> can be correctly rendered in each button size. </p>
-- 
cgit v1.3.1-23-gd82d