diff options
| author | Lionel LASKE <llaske@c2s.fr> | 2012-09-18 19:16:20 (GMT) |
|---|---|---|
| committer | Lionel LASKE <llaske@c2s.fr> | 2012-09-18 19:16:20 (GMT) |
| commit | 816de0918c28461cc2d1e3457348fd5b6e11950f (patch) | |
| tree | 667959b6e32d998a5bf4ae927ea59d88b71bfd44 /html/lib/onyx/design/toolbar-extended.html | |
Initial version
Diffstat (limited to 'html/lib/onyx/design/toolbar-extended.html')
| -rw-r--r-- | html/lib/onyx/design/toolbar-extended.html | 243 |
1 files changed, 243 insertions, 0 deletions
diff --git a/html/lib/onyx/design/toolbar-extended.html b/html/lib/onyx/design/toolbar-extended.html new file mode 100644 index 0000000..edbfda1 --- /dev/null +++ b/html/lib/onyx/design/toolbar-extended.html @@ -0,0 +1,243 @@ + +<!doctype html> +<html> +<head> + <title>onyx toolbar design</title> + <link href="../source/css/onyx.css" rel="stylesheet" type="text/css" /> + <style> + /* + the 'inline' class attempts to setup a left-to-right container, with vertically centered children + */ + .toolbar > *, .inline > * { + display: inline-block; + vertical-align: middle; + } + .toolbar, .inline { + white-space: nowrap; + /* + We want to control line-height so that vertical-align: middle + becomes true center. Otherwise, when line-height is in effect + (i.e. if the actual height is less than line height), + user agents pad the line unevenly. + */ + line-height: 0; + } + .toolbar > *, .inline > * { + /* + Defeat line-height control above for children + */ + line-height: normal; + } + .toolbar .inline, .inline .inline { + /* + Enforce line-height 0 for an inline child of an inline (FIXME: fiddly) + */ + line-height: 0px; + } + /* + toolbar is just an inline context with specific styling + */ + .toolbar { + padding: 8px; + /**/ + box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + } + /* + It's useful to be able to abut toolbars in an inline context + and not worry about varying heights. + Generally icons are the largest elements in a toolbar, and will + drive the height to this size. + We can't set a min-size directly on the toolbar because it + breaks centering (due to interation with line-height). + For some scenarios a developer may want to override the height value. + */ + .stent { + visibility: none; + width: 0px; + height: 34px; + } + /* */ + .onyx .toolbar { + padding: 8px; + /**/ + border: 1px solid #3A3A3A; + background: #4C4C4C url(../images/gradient.png) repeat-x 0 bottom; + color: white; + } + /* */ + button { + /* only needed for IE */ + line-height: normal !important; + } + .icon { + width: 32px; + height: 32px; + background-image: url(menu-icon-bookmark.png); + } + /* */ + /* + for display/debug only, not part of the design + */ + .big { + font-size: 42px; + } + .bord { + border: 1px solid lightblue; + } + .bg { + background-color: Red; + } + .bg .toolbar { + background-color: white; + } + .lh0 { + line-height: 0px; + } + .lhn { + line-height: normal; + } + </style> +</head> +<body> + <div class="onyx"> + <label>no content</label> + <div class="toolbar"></div> + <br /> + <label>text only content (padding is ignored due to line height control)</label> + <div class="toolbar">Text</div> + <br /> + <label>div content</label> + <div class="toolbar"> + <div>Text in Div</div> + </div> + <br /> + <label>input content</label> + <div class="toolbar"> + <input class="" /> + </div> + <br /> + <label>input content</label> + <div class="toolbar"> + <div class="icon"></div> + </div> + <br /> + <label>input content</label> + <div class="toolbar"> + <img src="menu-icon-bookmark.png" height="32"/> + </div> + <br /> + <label>div content with min-height on toolbar (centering improper on tested user agents)</label> + <div class="toolbar" style="min-height: 50px;"> + <div>Text in Div</div> + </div> + <br /> + <label>div content with stent</label> + <div class="toolbar"> + <div class="stent"></div> + <div>Text in Div</div> + </div> + <br /> + <label>stented toolbars abutting in inline context, as long as the stent is the largest item the bars align. There should be no red color visible above or below each toolbar.</label> + <div class="inline" style="background-color: Red;"> + <div class="toolbar"> + <div class="stent"></div> + <div>Text in Div</div> + </div> + <div class="toolbar"> + <div class="stent"></div> + <input class="" /> + </div> + <div class="toolbar"> + <div class="stent"></div> + <div class="icon"></div> + </div> + <div class="toolbar"> + <div class="stent"></div> + <img src="menu-icon-bookmark.png" height="32"/> + </div> + </div> + </div> + <hr /> + <div class="bord toolbar"> + <div class="bord">div</div> + <input class="bord" /> + <div class="bord icon"></div> + </div> + <br /> + <div class="bord toolbar big"> + <div class="bord">div</div> + <input class="bord" /> + <div class="bord icon"></div> + </div> + <br /> + <div class="bord toolbar big lh0"> + <div class="bord lhn">div</div> + <input class="bord" /> + <div class="bord icon"></div> + </div> + <br /> + <div class="bord toolbar big lh0"> + <div class="bord lhn">div</div> + <input class="bord" /> + </div> + <br /> + <br /> + <div class="toolbar bord"> + <div class="bord">div</div> + <input class="bord" /> + <div class="bord inline"> + <div class="bord">div</div> + <input class="bord" /> + <div class="bord icon"></div> + </div> + <button>Button</button> + <div class="bord icon"></div> + <img class="bord" src="menu-icon-bookmark.png" height="32"/> + </div> + <br /> + <div class="toolbar bord big"> + <div class="bord">div</div> + <div class="bord inline"> + <div class="bord">div</div> + <input class="bord" /> + <div class="bord icon"></div> + </div> + <button>Button</button> + <div class="bord icon"></div> + <img class="bord"src="menu-icon-bookmark.png" height="32"/> + </div> + <br /> + <div class="toolbar big bord"> + <div class="bord">div</div> + </div> + <br /> + <div class="inline bord big bg"> + <div class="toolbar bord"> + <div class="bord">div</div> + </div> + <div class="toolbar bord"> + <div class="icon"></div> + </div> + <div class="toolbar bord"> + <div class="inline"> + <div class="icon"></div> + </div> + </div> + <div class="toolbar bord"> + <div class="bord">div</div> + <input class="bord" /> + <div class="inline"> + <div class="bord">div</div> + <input class="bord" /> + <div class="icon"></div> + </div> + <button>Button</button> + <div class="icon"></div> + <img src="menu-icon-bookmark.png" height="32"/> + </div> + </div> +</body> +</html> |