diff options
ADD: Action button style
2 files changed, 22 insertions, 7 deletions
| -rw-r--r-- | docs/components.html | 4 | ||||
| -rw-r--r-- | docs/elements.html | 25 |
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"><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-lg"</span>>large button<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-sm"</span>>small button<<span class="tag">/button</span>> -<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-block"</span>>block button<<span class="tag">/button</span>></code> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-block"</span>>block button<<span class="tag">/button</span>> + +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>> +<<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-action circle"</span>><<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-markunread"</span>><<span class="tag">/i</span>><<span class="tag">/button</span>></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> |