From 57a9ffe6abf5e2b902a2c7914144f1b99e08bf9f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 30 Jan 2017 13:15:35 -0800 Subject: [PATCH] [Docs] WIP Style Guide Fixes #1233 --- .../styleguide/res/templates/controls.html | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/example/styleguide/res/templates/controls.html b/example/styleguide/res/templates/controls.html index a92d86e6ab..8f11dba4f1 100644 --- a/example/styleguide/res/templates/controls.html +++ b/example/styleguide/res/templates/controls.html @@ -31,7 +31,7 @@

Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.

-

Use an icon whenever possible to aid the user's recognition and recall. If text is to be included, it must be within a span with class title-label.

+

Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a span with class .title-label.

Markup

@@ -51,11 +51,30 @@
+
+

"Major" Buttons

+
+
+

Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add .major to any element that uses .s-button.

+
+
+

Markup

+ 
+<a class="s-button major">Ok</a>
+<a class="s-button">Cancel</a>
+

Example

+ Ok + Cancel +
+
+
+

Button Sets

-

Notes about button sets

+

Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.

+

To use, simply wrap two or more .s-button elements within .l-btn-set.

Markup