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>