fix(list): horizontal lists wrap nicely on small screens

fomantic · Jan 3, 2019 · dbb489c · dbb489c
1 parent b84b814
commit dbb489c
Showing 1 changed file with 8 additions and 8 deletions.
diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less
@@ -291,12 +291,12 @@ ol.ui.list ol li,
 }
 .ui.horizontal.list > .item {
   display: inline-block;
-  margin-left: @horizontalSpacing;
+  margin-right: @horizontalSpacing;
   font-size: 1rem;
 }
-.ui.horizontal.list:not(.celled) > .item:first-child {
-  margin-left: 0 !important;
-  padding-left: 0 !important;
+.ui.horizontal.list:not(.celled) > .item:last-child {
+  margin-right: 0;
+  padding-right: 0;
 }
 .ui.horizontal.list .list:not(.icon) {
   padding-left: 0;
@@ -749,20 +749,20 @@ ol.ui.horizontal.list li:before,
 .ui.divided.horizontal.list {
   margin-left: 0;
 }
-.ui.divided.horizontal.list > .item:not(:first-child) {
+.ui.divided.horizontal.list > .item {
   padding-left: @horizontalDividedSpacing;
 }
 .ui.divided.horizontal.list > .item:not(:last-child) {
   padding-right: @horizontalDividedSpacing;
 }
 .ui.divided.horizontal.list > .item {
   border-top: none;
-  border-left: @dividedBorder;
+  border-right: @dividedBorder;
   margin: 0;
   line-height: @horizontalDividedLineHeight;
 }
-.ui.horizontal.divided.list > .item:first-child {
-  border-left: none;
+.ui.horizontal.divided.list > .item:last-child {
+  border-right: none;
 }
 /* Inverted */
 .ui.divided.inverted.list > .item,