diff options
Diffstat (limited to 'docs/html/design/building-blocks/buttons.jd')
| -rw-r--r-- | docs/html/design/building-blocks/buttons.jd | 28 |
1 files changed, 14 insertions, 14 deletions
diff --git a/docs/html/design/building-blocks/buttons.jd b/docs/html/design/building-blocks/buttons.jd index e698f38..713574a 100644 --- a/docs/html/design/building-blocks/buttons.jd +++ b/docs/html/design/building-blocks/buttons.jd @@ -21,27 +21,27 @@ page.tags=button,input will occur when the user touches it. A button can have an image, text, or both. </p> -<div class="layout-content-row" style="margin-top:22px"> - <div class="layout-content-col span-3"> +<div class="cols" style="margin-top:22px"> + <div class="col-3"> <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;"> </div> - <div class="layout-content-col span-3"> + <div class="col-3"> <img src="{@docRoot}design/media/buttons_text.png" style="height:94px;"> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <img src="{@docRoot}design/media/buttons_image_and_text.png" style="height:94px;"> </div> </div> -<div class="layout-content-row" style="margin-top:0;"> - <div class="layout-content-col span-3"> +<div class="cols" style="margin-top:0;"> + <div class="col-3"> <p>An image alone works best when the action can be represented by a symbol that's well understood.</p> </div> - <div class="layout-content-col span-3"> + <div class="col-3"> <p>Text alone is most appropriate for actions that would be difficult to represent visually, or are critical to convey in words to avoid any ambiguity.</p> </div> - <div class="layout-content-col span-7"> + <div class="col-7"> <p> Both an icon and text is most appropriate when they complement each other: each carrying its own bit of information, but together making a larger whole. @@ -57,24 +57,24 @@ page.tags=button,input <h3>What about button backgrounds?</h3> -<div class="layout-content-row"> - <div class="layout-content-col span-6"> +<div class="cols"> + <div class="col-6"> <p>For <strong>image-only</strong> buttons, a background isn't necessary because users are accustomed to interacting with objects.</p> - <div class="layout-content-row" style="margin-left:72px"> - <div class="layout-content-col span-2"> + <div class="cols" style="margin-left:72px"> + <div class="col-2"> <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div> <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;"> </div> - <div class="layout-content-col span-2" style="width:29px;margin-left:10px;"> + <div class="col-2" style="width:29px;margin-left:10px;"> <div class="do-dont-label good"><strong>Do</strong></div> <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;"> </div> </div> </div> -<div class="layout-content-col span-7"> +<div class="col-7"> <p> For buttons <strong>with text</strong>, a background is also usually unnecessary. To invite users to touch, phrase it as a clear action (e.g. |