|
|
- <!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>
|
