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 | |
Initial version
Diffstat (limited to 'html/lib/onyx/design')
| -rw-r--r-- | html/lib/onyx/design/inline-controlled.html | 230 | ||||
| -rw-r--r-- | html/lib/onyx/design/inline.html | 102 | ||||
| -rw-r--r-- | html/lib/onyx/design/menu-icon-bookmark.png | bin | 0 -> 1883 bytes | |||
| -rw-r--r-- | html/lib/onyx/design/toolbar-extended.html | 243 | ||||
| -rw-r--r-- | html/lib/onyx/design/toolbar.html | 110 |
5 files changed, 685 insertions, 0 deletions
diff --git a/html/lib/onyx/design/inline-controlled.html b/html/lib/onyx/design/inline-controlled.html new file mode 100644 index 0000000..b233d19 --- /dev/null +++ b/html/lib/onyx/design/inline-controlled.html @@ -0,0 +1,230 @@ +<!doctype html> +<html> +<head> + <title>controlled 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; + } + .icon { + width: 32px; + height: 32px; + background-image: url(menu-icon-bookmark.png); + } + .bord { + border: 1px solid lightblue; + } + .big { + font-size: 48px; + } + .pad { + padding: 8px; + } + .bg { + background: orange; + } + /* + We can 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. + */ + .lhc { + line-height: 0; + } + /* + Defeat line-height control above for children + */ + .lhc > * { + line-height: normal; + } + /* + Enforce line-height 0 for an inline child of an inline (FIXME: fiddly) + */ + .lhc .lhc { + line-height: 0px; + } + /**/ + .h { + height: 64px; + } + /* + 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 { + /* + the point of the stent is to force the box height to some minimum, similar + to line-height, but with proper vertical centering + */ + height: 72px; + /* the width is 0, but it adds some size to the inline because of ? */ + width: 0px; + visibility: hidden; + } + .stent-fix { + /* stent imparts mystery width to it's parent */ + /* setting font-size doesn't affect the mystery width */ + /*font-size: 0px;*/ + /* floating the stent prevents it from stenting */ + /*float: left;*/ + /* on non-mozilla, mystery size can be removed this way, but the actual pixels needed depends on font size */ + /*margin-right: -6px;*/ + /* on non-mozilla, this gets us within a few pixels for tested fonts */ + margin-right: -0.25em; + } + /* */ + .stenty > * { + min-height: 56px; + } + </style> +</head> +<body> + <label>"inline" tests</label> + <br /><br /> + + <div> + <label>combo content: when the text is larger than non-text objects, vertical centering goes wonky</label> + <div class="inline bord big"> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <br /> + + <label>... it's possible to control line-height in such a way to repair centering</label> + <div class="inline bord big lhc"> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <br /> + + <hr /> + + <label>but now setting height or min-height on toolbar breaks centering</label> + <div class="inline bord lhc bg big h"> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <br /> + + <div class="inline bord big lhc"> + <div class="inline bord lhc bg h"> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <div class="inline bord lhc bg h"> + <input /> + <div class="icon"></div> + </div> + </div> + <br /> + + <hr /> + + <label>control height on children instead of toolbar</label> + <div class="inline bord big lhc"> + <div class="inline bord lhc bg"> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <div class="inline bord lhc bg"> + <input /> + <div class="icon"></div> + </div> + </div> + <br /> + <div class="inline bord big lhc"> + <div class="inline bord lhc bg stenty"> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <div class="inline bord lhc bg stenty"> + <input /> + <div class="icon"></div> + </div> + </div> + <br /> + + <hr /> + + <label>it's possible to use a stent to effect min-height, but for unknown reasons, even a 0-width stent affects parent width</label> + <div class="inline bord big lhc"> + <div class="inline bord lhc bg"> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <div class="inline bord lhc bg"> + <input /> + <div class="icon"></div> + </div> + </div> + <br /> + <div class="inline bord big lhc"> + <div class="inline bord lhc bg"> + <div class="stent"></div> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <div class="inline bord lhc bg"> + <div class="stent"></div> + <input /> + <div class="icon"></div> + </div> + </div> + <br /> + + <label>using img as stent node makes no difference</label> + <div class="inline bord big lhc"> + <div class="inline bord lhc bg"> + <img class="stent" /> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <div class="inline bord lhc bg"> + <img class="stent" /> + <input /> + <div class="icon"></div> + </div> + </div> + <br /> + + <label>using negative margin on stent can approximate 0 width</label> + <div class="inline bord big lhc"> + <div class="inline bord lhc bg"> + <div class="stent stent-fix"></div> + <div>Text in Div</div> + <input /> + <div class="icon"></div> + </div> + <div class="inline bord lhc bg"> + <div class="stent stent-fix"></div> + <input /> + <div class="icon"></div> + </div> + </div> + <br /> + </div> +</body> +</html> diff --git a/html/lib/onyx/design/inline.html b/html/lib/onyx/design/inline.html new file mode 100644 index 0000000..41466e8 --- /dev/null +++ b/html/lib/onyx/design/inline.html @@ -0,0 +1,102 @@ +<!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; + } + .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>"inline" tests</label> + <br /><br /> + <div> + <label>no content</label> + <div class="inline bord"></div> + <br /> + + <label>text only content</label> + <div class="inline bord">Text</div> + <br /> + + <label>div content</label> + <div class="inline bord"> + <div>Text in Div</div> + </div> + <br /> + + <label>input content</label> + <div class="inline bord"> + <input class="" /> + </div> + <br /> + + <label>icon content</label> + <div class="inline bord"> + <div class="icon"></div> + </div> + <br /> + + <label>combo content</label> + <div class="inline bord"> + <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 bord big"> + <div>Text in Div</div> + <input class="" /> + <div class="icon"></div> + </div> + <br /> + + <label>controlling height</label> + <div class="inline bord big mh"> + <div>Text in Div</div> + <input class="" /> + <div class="icon"></div> + </div> + <br /> + + <label>controlling line-height</label> + <div class="inline bord big lh pad"> + <div>Text in Div</div> + <input class="" /> + <div class="icon"></div> + </div> + <br /> + </div> +</body> +</html> diff --git a/html/lib/onyx/design/menu-icon-bookmark.png b/html/lib/onyx/design/menu-icon-bookmark.png Binary files differnew file mode 100644 index 0000000..81d2344 --- /dev/null +++ b/html/lib/onyx/design/menu-icon-bookmark.png 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> 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> |
