ares-ide
Version:
A browser-based code editor and UI designer for Enyo 2 projects
244 lines (243 loc) • 5.9 kB
HTML
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<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 ;
}
.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>