<h2>Lists</h2>
<div class="row">
<div class="span4">
- <h4>Unordered</h4>
+ <h3>Unordered</h3>
<p><code><ul></code></p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class="span4">
- <h4>Unstyled</h4>
+ <h3>Unstyled</h3>
<p><code><ul class="unstyled"></code></p>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class="span4">
- <h4>Ordered</h4>
+ <h3>Ordered</h3>
<p><code><ol></code></p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
</ol>
</div>
</div><!-- /row -->
+ <br>
<div class="row">
<div class="span4">
- <h4>Description</h4>
+ <h3>Description</h3>
<p><code><dl></code></p>
<dl>
<dt>Description lists</dt>
</dl>
</div>
<div class="span8">
- <h4>Horizontal</h4>
- <p><code><dl class="horizontal"></code></p>
- <dl class="horizontal">
+ <h3>Horizontal description</h3>
+ <p><code><dl class="dl-horizontal"></code></p>
+ <dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<h2>{{_i}}Lists{{/i}}</h2>
<div class="row">
<div class="span4">
- <h4>{{_i}}Unordered{{/i}}</h4>
+ <h3>{{_i}}Unordered{{/i}}</h3>
<p><code><ul></code></p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class="span4">
- <h4>{{_i}}Unstyled{{/i}}</h4>
+ <h3>{{_i}}Unstyled{{/i}}</h3>
<p><code><ul class="unstyled"></code></p>
<ul class="unstyled">
<li>Lorem ipsum dolor sit amet</li>
</ul>
</div>
<div class="span4">
- <h4>{{_i}}Ordered{{/i}}</h4>
+ <h3>{{_i}}Ordered{{/i}}</h3>
<p><code><ol></code></p>
<ol>
<li>Lorem ipsum dolor sit amet</li>
</ol>
</div>
</div><!-- /row -->
+ <br>
<div class="row">
<div class="span4">
- <h4>{{_i}}Description{{/i}}</h4>
+ <h3>{{_i}}Description{{/i}}</h3>
<p><code><dl></code></p>
<dl>
<dt>{{_i}}Description lists{{/i}}</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
- <div class="span4">
- <h4>{{_i}}Horizontal{{/i}}</h4>
- <p><code><dl class="horizontal"></code></p>
- <dl class="horizontal">
+ <div class="span8">
+ <h3>{{_i}}Horizontal description{{/i}}</h3>
+ <p><code><dl class="dl-horizontal"></code></p>
+ <dl class="dl-horizontal">
<dt>{{_i}}Description lists{{/i}}</dt>
<dd>{{_i}}A description list is perfect for defining terms.{{/i}}</dd>
<dt>Euismod</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
- <div class="span4">
- <div class="well">
- <p>{{_i}}Horizontal description lists have two additional sizes: <code>.horizontal-small</code> and <code>.horizontal-large</code>.{{/i}}</p>
- </div>
- </div>
- </div>
+ </div><!-- /row -->
</section>
}
dt {
font-weight: bold;
+ line-height: @baseLineHeight - 1; // fix jank Helvetica Neue font bug
}
dd {
margin-left: @baseLineHeight / 2;
}
// Horizontal layout (like forms)
-dl.horizontal {
+.dl-horizontal {
dt {
float: left;
clear: left;
dd {
margin-left: 130px;
}
- &.horizontal-small {
- dt { width: 50px; }
- dd { margin-left: 60px; }
- }
- &.horizontal-normal {
- // no additional styles needed
- }
- &.horizontal-large {
- dt { width: 190px; }
- dd { margin-left: 200px; }
- }
}
// MISC