fix: inline list container width

boltdesignsystem · Jan 22, 2019 · 84fa95a · 84fa95a
1 parent 8d3b17c
commit 84fa95a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2,298 deletions.
diff --git a/packages/components/lists/bolt-list/src/list.scss b/packages/components/lists/bolt-list/src/list.scss
@@ -22,7 +22,6 @@
 .c-bolt-list--display-inline {
   display: inline-flex;
   flex-flow: row wrap;
-  width: 100%; // The inline here is talking about the items inside, the List component itself is still a block level element that would fill up the space of any container.
 }
 
 .c-bolt-list--display-flex {
@@ -52,6 +51,10 @@
   .c-bolt-list--spacing-#{$spacing-value-name} {
     margin-bottom: bolt-v-spacing(#{$spacing-value-name}) * -1;
     margin-left: bolt-spacing(#{$spacing-value-name}) * -1;
+
+    &.c-bolt-list--display-inline {
+      width: calc(100% + #{bolt-spacing($spacing-value-name)}); // The inline here is talking about the items inside, the List component itself is still a block level element that would fill up the space of any container.
+    }
   }
 
   .c-bolt-list--spacing-#{$spacing-value-name}.c-bolt-list--inset {