diff options
Diffstat (limited to 'html/lib/onyx/design/toolbar.html')
-rw-r--r-- | html/lib/onyx/design/toolbar.html | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/html/lib/onyx/design/toolbar.html b/html/lib/onyx/design/toolbar.html new file mode 100644 index 0000000..495524d --- /dev/null +++ b/html/lib/onyx/design/toolbar.html @@ -0,0 +1,110 @@ +<!doctype html> +<html> +<head> + <title>inline: onyx toolbar design</title> + <link href="../source/css/onyx.css" rel="stylesheet" type="text/css" /> + <style> + /* + the 'inline' class sets up a left-to-right container, with vertically centered children + */ + .inline { + white-space: nowrap; + } + .inline > * { + display: inline-block; + vertical-align: middle; + } + /**/ + .toolbar { + padding: 8px; + border: 1px solid #3A3A3A; + background: #4C4C4C url(../images/gradient.png) repeat-x 0 bottom; + color: white; + } + /**/ + .icon { + width: 32px; + height: 32px; + background-image: url(menu-icon-bookmark.png); + } + .bord { + border: 1px solid lightblue; + } + .big { + font-size: 48px; + } + .pad { + padding: 8px; + } + .mh { + min-height: 124px; + } + .lh { + line-height: 86px; + } + </style> +</head> +<body> + <label>"toolbar" tests</label> + <br /><br /> + <div> + <label>no content</label> + <div class="inline toolbar"></div> + <br /> + + <label>text only content</label> + <div class="inline toolbar">Text</div> + <br /> + + <label>div content</label> + <div class="inline toolbar"> + <div>Text in Div</div> + </div> + <br /> + + <label>input content</label> + <div class="inline toolbar"> + <input class="" /> + </div> + <br /> + + <label>icon content</label> + <div class="inline toolbar"> + <div class="icon"></div> + </div> + <br /> + + <label>combo content</label> + <div class="inline toolbar"> + <div>Text in Div</div> + <input class="" /> + <div class="icon"></div> + </div> + <br /> + + <label>combo content: when the text is larger than non-text objects, vertical centering goes wonky</label> + <div class="inline toolbar big"> + <div>Text in Div</div> + <input class="" /> + <div class="icon"></div> + </div> + <br /> + + <label>controlling height</label> + <div class="inline toolbar big mh"> + <div>Text in Div</div> + <input class="" /> + <div class="icon"></div> + </div> + <br /> + + <label>controlling line-height</label> + <div class="inline toolbar big lh pad"> + <div>Text in Div</div> + <input class="" /> + <div class="icon"></div> + </div> + <br /> + </div> +</body> +</html> |