rewrite list-inline to use margin and simpler styles

diff --git a/docs/content/typography.md b/docs/content/typography.md
index d8cd4b010b5aaedc471c53e62528d8fbea945324..846852a95a965d103f3836e58818a0f234f889a9 100644 (file)
--- a/docs/content/typography.md
+++ b/docs/content/typography.md
@@ -205,7 +205,7 @@ Remove the default `list-style` and left margin on list items (immediate childre
 
 ### Inline
 
-Place all list items on a single line with `display: inline-block;` and some light padding.
+Place all list items on a single line with `display: inline-block;` and some basic margin between.
 
 {% example html %}
 <ul class="list-inline">

diff --git a/scss/_type.scss b/scss/_type.scss
index ea682812ea82d158bb53c7f23f9e95bfe26f0824..35780d39e953818bc75b7187193f1404bb9f1a78 100644 (file)
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -92,13 +92,13 @@ mark,
 // Inline turns list items into inline-block
 .list-inline {
   @include list-unstyled;
-  margin-left: -$list-inline-padding;
 }
-
 .list-inline-item {
   display: inline-block;
-  padding-right: $list-inline-padding;
-  padding-left: $list-inline-padding;
+
+  &:not(:last-child) {
+    margin-right: $list-inline-padding;
+  }
 }
 
 // Horizontal description lists w/ grid classes