Fix #565, Fix #389

CHANGELOG.md

@@ -10,6 +10,8 @@
 # Feature #586 select color modifiers
 # Fix #537 -ms-expand
 # Fix #578 better `+center` mixin
+* Fix #565 `dl` styles
+* Fix #389 `pre` `margin-bottom`
 
 ## 0.4.0
 

docs/css/bulma-docs.css

@@ -1692,9 +1692,11 @@ input[type="submit"].button {
 }
 
 .content p:not(:last-child),
+.content dl:not(:last-child),
 .content ol:not(:last-child),
 .content ul:not(:last-child),
 .content blockquote:not(:last-child),
+.content pre:not(:last-child),
 .content table:not(:last-child) {
   margin-bottom: 1em;
 }
@@ -1781,6 +1783,18 @@ input[type="submit"].button {
   list-style-type: square;
 }
 
+.content dd {
+  margin-left: 2em;
+}
+
+.content pre {
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  padding: 1.25em 1.5em;
+  white-space: pre;
+  word-wrap: normal;
+}
+
 .content table {
   width: 100%;
 }

docs/documentation/elements/content.html

@@ -54,9 +54,26 @@ doc-subtab: content
   <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
   <p>Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.</p>
   <p>Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.</p>
+  <dl>
+    <dt>Web</dt>
+    <dd>The part of the Internet that contains websites and web pages</dd>
+    <dt>HTML</dt>
+    <dd>A markup language for creating web pages</dd>
+    <dt>CSS</dt>
+    <dd>A technology to make HTML look better</dd>
+  </dl>
   <p>Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.</p>
   <h4>Fourth level</h4>
   <p>Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.</p>
+  <pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Hello World&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.&lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
   <p>Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.</p>
   <table>
     <thead>

sass/elements/content.sass

@@ -6,9 +6,11 @@
     margin-top: 0.25em
   // Block
   p,
+  dl,
   ol,
   ul,
   blockquote,
+  pre,
   table
     &:not(:last-child)
       margin-bottom: 1em
@@ -64,6 +66,14 @@
       margin-top: 0.5em
       ul
         list-style-type: square
+  dd
+    margin-left: 2em
+  pre
+    +overflow-touch
+    overflow-x: auto
+    padding: 1.25em 1.5em
+    white-space: pre
+    word-wrap: normal
   table
     width: 100%
     td,