Add content ol types

CHANGELOG.md

@@ -13,6 +13,7 @@
 * #2109 Add and use `$navbar-breakpoint` variable
 * New variables `$control-height`, `$control-line-height`, `$pagination-min-width`, `$input-height`
 * #1720 Add list element feature
+* #2123 Add `.content ol` types: `.is-lower-roman`, `.is-upper-roman`, `.is-lower-alpha`, `.is-upper-alpha`, and support for the `type=` HTML attribute
 
 ### Improvements
 

docs/documentation/elements/content.html

@@ -110,6 +110,61 @@ meta:
 </div>
 {% endcapture %}
 
+{% capture content_ol_html_example %}
+<div class="content">
+  <ol type="1">
+    <li>Coffee</li>
+    <li>Tea</li>
+    <li>Milk</li>
+  </ol>
+  <ol type="A">
+    <li>Coffee</li>
+    <li>Tea</li>
+    <li>Milk</li>
+  </ol>
+  <ol type="a">
+    <li>Coffee</li>
+    <li>Tea</li>
+    <li>Milk</li>
+  </ol>
+  <ol type="I">
+    <li>Coffee</li>
+    <li>Tea</li>
+    <li>Milk</li>
+  </ol>
+  <ol type="i">
+    <li>Coffee</li>
+    <li>Tea</li>
+    <li>Milk</li>
+  </ol>
+</div>
+{% endcapture %}
+
+{% capture content_ol_css_example %}
+<div class="content">
+  <ol class="is-lower-alpha">
+    <li>Coffee</li>
+    <li>Tea</li>
+    <li>Milk</li>
+  </ol>
+  <ol class="is-lower-roman">
+    <li>Coffee</li>
+    <li>Tea</li>
+    <li>Milk</li>
+  </ol>
+  <ol class="is-upper-alpha">
+    <li>Coffee</li>
+    <li>Tea</li>
+    <li>Milk</li>
+  </ol>
+  <ol class="is-upper-alpha">
+    <li>Coffee</li>
+    <li>Tea</li>
+    <li>Milk</li>
+  </ol>
+</div>
+{% endcapture %}
+
 <div class="content">
   <p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
   <ul>
@@ -123,7 +178,25 @@ meta:
   <p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
 </div>
 
-{% include elements/snippet.html content=content_example %}
+{% include elements/new-tag.html version="0.7.2" %}
+
+<div class="content">
+  <p>
+    <strong>Ordered lists</strong> <code>&lt;ol&gt;</code> support different <strong>types</strong> of items markers. To modify them, use either:
+  </p>
+  <ul>
+    <li>
+      the corresponding HTML attribute value
+    </li>
+    <li>
+      one of the following CSS modifier classes: <code>is-lower-alpha</code>, <code>is-lower-roman</code>, <code>is-upper-alpha</code> or <code>is-upper-roman</code>
+    </li>
+  </ul>
+</div>
+
+{% include elements/snippet.html content=content_ol_html_example %}
+
+{% include elements/snippet.html content=content_ol_css_example %}
 
 {% include elements/anchor.html name="Sizes" %}
 

sass/elements/content.sass

@@ -70,18 +70,19 @@ $content-table-foot-cell-color: $text-strong !default
     border-left: $content-blockquote-border-left
     padding: $content-blockquote-padding
   ol
-    list-style: decimal outside
+    list-style-position: outside
     margin-left: 2em
     margin-top: 1em
-    // list style modifiers emulating ol[type] attribute values different then decimal
-    &.is-lower-roman
-      list-style-type: lower-roman
-    &.is-upper-roman
-      list-style-type: upper-roman
-    &.is-lower-alpha
-      list-style-type: lower-alpha
-    &.is-upper-alpha
-      list-style-type: upper-alpha
+    &:not([type])
+      list-style-type: decimal
+      &.is-lower-alpha
+        list-style-type: lower-alpha
+      &.is-lower-roman
+        list-style-type: lower-roman
+      &.is-upper-alpha
+        list-style-type: upper-alpha
+      &.is-upper-roman
+        list-style-type: upper-roman
   ul
     list-style: disc outside
     margin-left: 2em