Merge pull request #2267 from dominicbarnes/dl_horizontal

Horizontal mode for description lists

docs/base-css.html

@@ -287,7 +287,7 @@
   <!-- Lists -->
   <h2>Lists</h2>
   <div class="row">
-    <div class="span3">
+    <div class="span4">
       <h4>Unordered</h4>
       <p><code>&lt;ul&gt;</code></p>
       <ul>
@@ -308,7 +308,7 @@
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-    <div class="span3">
+    <div class="span4">
       <h4>Unstyled</h4>
       <p><code>&lt;ul class="unstyled"&gt;</code></p>
       <ul class="unstyled">
@@ -329,7 +329,7 @@
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-    <div class="span3">
+    <div class="span4">
       <h4>Ordered</h4>
       <p><code>&lt;ol&gt;</code></p>
       <ol>
@@ -343,7 +343,9 @@
         <li>Eget porttitor lorem</li>
       </ol>
     </div>
-    <div class="span3">
+  </div><!-- /row -->
+  <div class="row">
+    <div class="span4">
       <h4>Description</h4>
       <p><code>&lt;dl&gt;</code></p>
       <dl>
@@ -356,6 +358,19 @@
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
       </dl>
     </div>
+    <div class="span8">
+      <h4>Horizontal</h4>
+      <p><code>&lt;dl class="horizontal"&gt;</code></p>
+      <dl class="horizontal">
+        <dt>Description lists</dt>
+        <dd>A description list is perfect for defining terms.</dd>
+        <dt>Euismod</dt>
+        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+        <dt>Malesuada porta</dt>
+        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+      </dl>
+    </div>
   </div><!-- /row -->
 </section>
 

docs/templates/pages/base-css.mustache

@@ -211,7 +211,7 @@
   <!-- Lists -->
   <h2>{{_i}}Lists{{/i}}</h2>
   <div class="row">
-    <div class="span3">
+    <div class="span4">
       <h4>{{_i}}Unordered{{/i}}</h4>
       <p><code>&lt;ul&gt;</code></p>
       <ul>
@@ -232,7 +232,7 @@
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-    <div class="span3">
+    <div class="span4">
       <h4>{{_i}}Unstyled{{/i}}</h4>
       <p><code>&lt;ul class="unstyled"&gt;</code></p>
       <ul class="unstyled">
@@ -253,7 +253,7 @@
         <li>Eget porttitor lorem</li>
       </ul>
     </div>
-    <div class="span3">
+    <div class="span4">
       <h4>{{_i}}Ordered{{/i}}</h4>
       <p><code>&lt;ol&gt;</code></p>
       <ol>
@@ -267,7 +267,9 @@
         <li>Eget porttitor lorem</li>
       </ol>
     </div>
-    <div class="span3">
+  </div><!-- /row -->
+  <div class="row">
+    <div class="span4">
       <h4>{{_i}}Description{{/i}}</h4>
       <p><code>&lt;dl&gt;</code></p>
       <dl>
@@ -280,7 +282,25 @@
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
       </dl>
     </div>
-  </div><!-- /row -->
+    <div class="span4">
+      <h4>{{_i}}Horizontal{{/i}}</h4>
+      <p><code>&lt;dl class="horizontal"&gt;</code></p>
+      <dl class="horizontal">
+        <dt>{{_i}}Description lists{{/i}}</dt>
+        <dd>{{_i}}A description list is perfect for defining terms.{{/i}}</dd>
+        <dt>Euismod</dt>
+        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+        <dt>Malesuada porta</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>
 </section>
 
 

less/type.less

@@ -130,6 +130,29 @@ dt {
 dd {
   margin-left: @baseLineHeight / 2;
 }
+// Horizontal layout (like forms)
+dl.horizontal {
+  dt {
+    float: left;
+    clear: left;
+    width: 120px;
+    text-align: right;
+  }
+  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
 // ----