Add initial nested list pattern

Author: anselmbradford

cfgov/regulations3k/jinja2/regulations3k/regulations-listing.html

@@ -27,15 +27,18 @@ <h4>{{ value.heading or 'Table of contents' }}</h4>
                 {{ regulation.title }}
             </a>
             {% if regulation.regulation.future_versions %}
-            <ul class="m-list m-list--links">
-            {% for version in regulation.regulation.future_versions %}
-                <li class="m-list__item new-version">New amendments effective
-                    <a class="a-link a-link--jump" href="{{ regulation.url }}{{ version.effective_date|string }}/">
-                    {{ ap_date(version.effective_date) }}
-                    </a>
-                </li>
-            {% endfor %}
-            </ul>
+            <div class="new-version">
+                <h5>New amendments effective</h5>
+                <ul class="m-list m-list--links">
+                {% for version in regulation.regulation.future_versions %}
+                    <li class="m-list__item">
+                        <a class="a-link a-link--jump" href="{{ regulation.url }}{{ version.effective_date|string }}/">
+                        {{ ap_date(version.effective_date) }}
+                        </a>
+                    </li>
+                {% endfor %}
+                </ul>
+            </div>
             {% endif %}
 
         </li>

cfgov/unprocessed/apps/regulations3k/css/reg-listing.scss

@@ -7,11 +7,27 @@
    ========================================================================== */
 
 #regulations-listing {
-  > ul {
-    .new-version {
+  // TODO - Standardize a nested list link pattern.
+  .new-version {
+    h5 {
+      margin-top: math.div(10px, $base-font-size-px) + rem;
+      margin-bottom: math.div(10px, $base-font-size-px) + rem;
+    }
+
+    a {
+      margin-left: math.div(-30px, $base-font-size-px) + rem;
+      padding-left: math.div(30px, $base-font-size-px) + rem;
+
+      &:hover:before {
+        border: none;
+      }
+    }
+
+    li {
       font-size: math.div($size-v, $base-font-size-px) + em;
       font-weight: normal;
       list-style-type: square;
+      margin-left: math.div(30px, $base-font-size-px) + rem;
     }
   }
 }