List tweaks: max width, last-child margins.

List items should have a maximum width, similar to their <p> counterparts for readability. Additionally, when a list is the last child of a container, it should not contain a margin-bottom.
uswds · Feb 7, 2019 · 1d3e4c5 · 1d3e4c5
1 parent ca8ffc3
commit 1d3e4c5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/stylesheets/core/mixins/_unstyled-list.scss b/src/stylesheets/core/mixins/_unstyled-list.scss
@@ -6,5 +6,6 @@
 
   > li {
     margin-bottom: 0;
+    max-width: unset;
   }
 }
diff --git a/src/stylesheets/elements/_list.scss b/src/stylesheets/elements/_list.scss
@@ -1,11 +1,16 @@
 %usa-list {
   @include u-margin-y(1em);
   padding-left: 3ch;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 %usa-list-item {
   line-height: line-height($theme-body-font-family, $theme-body-line-height);
   margin-bottom: 0.25em;
+  max-width: measure($theme-text-measure);
 
   &:last-child {
     margin-bottom: 0;