fomantic-ui 2.9.0-beta.28 → 2.9.0-beta.282

package/src/definitions/elements/label.less

@@ -250,8 +250,8 @@ a.ui.label {
     border-radius: 0 @borderRadius @borderRadius 0;
     transition: @tagTransition;
   }
-  .ui.tag.labels .label:before,
-  .ui.tag.label:before {
+  .ui.tag.labels .label::before,
+  .ui.tag.label::before {
       position: absolute;
       transform: translateY(-50%) translateX(50%) rotate(-45deg);
 
@@ -268,8 +268,8 @@ a.ui.label {
   }
 
 
-  .ui.tag.labels .label:after,
-  .ui.tag.label:after {
+  .ui.tag.labels .label::after,
+  .ui.tag.label::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -284,15 +284,15 @@ a.ui.label {
     border-radius: @circularRadius;
   }
   & when (@variationLabelBasic) {
-    .ui.basic.tag.labels .label:before,
-    .ui.basic.tag.label:before {
+    .ui.basic.tag.labels .label::before,
+    .ui.basic.tag.label::before {
       border-color: inherit;
       border-width: @basicBorderWidth 0 0 @basicBorderWidth;
       border-style: inherit;
       right: @basicBorderFullWidthOffset;
     }
-    .ui.basic.tag.labels .label:after,
-    .ui.basic.tag.label:after {
+    .ui.basic.tag.labels .label::after,
+    .ui.basic.tag.label::after {
       box-shadow: @basicTagCircleBoxShadow;
     }
   }
@@ -323,7 +323,7 @@ a.ui.label {
   .ui.corner.label{
     background-color: transparent !important;
   }
-  .ui.corner.label:after {
+  .ui.corner.label::after {
     position: absolute;
     content: "";
     right: 0;
@@ -355,11 +355,11 @@ a.ui.label {
 
   /* Left Corner */
   .ui.left.corner.label,
-  .ui.left.corner.label:after {
+  .ui.left.corner.label::after {
     right: auto;
     left: 0;
   }
-  .ui.left.corner.label:after {
+  .ui.left.corner.label::after {
     border-top: @cornerTriangleSize solid transparent;
     border-right: @cornerTriangleSize solid transparent;
     border-bottom: 0 solid transparent;
@@ -396,7 +396,7 @@ a.ui.label {
     border-color: @ribbonShadowColor;
   }
 
-  .ui.ribbon.label:after {
+  .ui.ribbon.label::after {
     position: absolute;
     content: '';
 
@@ -453,7 +453,7 @@ a.ui.label {
     transform: translateX(-100%);
     border-radius: @borderRadius 0 0 @borderRadius;
   }
-  .ui[class*="right ribbon"].label:after {
+  .ui[class*="right ribbon"].label::after {
     left: auto;
     right: 0;
 
@@ -564,8 +564,8 @@ a.ui.label:hover {
   background-image: @labelHoverBackgroundImage;
   color: @labelHoverTextColor;
 }
-.ui.labels a.label:hover:before,
-a.ui.label:hover:before {
+.ui.labels a.label:hover::before,
+a.ui.label:hover::before {
   color: @labelHoverTextColor;
 }
 
@@ -580,7 +580,7 @@ a.ui.label:hover:before {
   background-image: @labelActiveBackgroundImage;
   color: @labelActiveTextColor;
 }
-.ui.active.label:before {
+.ui.active.label::before {
   background-color: @labelActiveBackgroundColor;
   background-image: @labelActiveBackgroundImage;
   color: @labelActiveTextColor;
@@ -598,8 +598,8 @@ a.ui.active.label:hover {
   background-image: @labelActiveHoverBackgroundImage;
   color: @labelActiveHoverTextColor;
 }
-.ui.labels a.active.label:hover:before,
-a.ui.active.label:hover:before {
+.ui.labels a.active.label:hover::before,
+a.ui.active.label:hover::before {
   background-color: @labelActiveHoverBackgroundColor;
   background-image: @labelActiveHoverBackgroundImage;
   color: @labelActiveHoverTextColor;
@@ -665,7 +665,7 @@ a.ui.active.label:hover:before {
   }
   & when (@variationLabelPointing) {
       /* Pointing */
-    .ui.basic.pointing.label:before {
+    .ui.basic.pointing.label::before {
       border-color: inherit;
     }
   }
@@ -714,118 +714,119 @@ a.ui.active.label:hover:before {
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors,{
-  @color                      : replace(@key,'@','');
-  @isDark                     : @colors[@@color][isDark];
-  @_labelColor                : @colors[@@color][color];
-  @_labelInvertedColor        : @colors[@@color][light];
-  @_labelTextColor            : @colors[@@color][text];
-  @_labelHover                : @colors[@@color][hover];
-  @_labelInvertedHover        : @colors[@@color][lightHover];
-  @_labelHoverTextColor       : @colors[@@color][hoverText];
-  @_labelRibbonShadow         : @colors[@@color][ribbon];
-  @_labelInvertedRibbonShadow : @colors[@@color][invertedRibbon];
-
-  .ui.@{color}.labels .label,
-  .ui.ui.ui.@{color}.label {
-    background-color: @_labelColor;
-    border-color: @_labelColor;
-    color: @_labelTextColor;
-  }
-  /* Link */
-  .ui.@{color}.labels a.label:hover,
-  a.ui.ui.ui.@{color}.label:hover{
-    background-color: @_labelHover;
-    border-color: @_labelHover;
-    color: @_labelHoverTextColor;
-  }
-  & when (@variationLabelRibbon) {
-    /* Ribbon */
-    .ui.ui.ui.@{color}.ribbon.label {
-      border-color: @_labelRibbonShadow;
-    }
-  }
-  & when (@variationLabelBasic) {
-    /* Basic */
-    .ui.basic.labels .@{color}.label,
-    .ui.ui.ui.basic.@{color}.label {
-      background: @basicBackground;
+& when not (@variationLabelColors = false) {
+  each(@variationLabelColors, {
+    @color: @value;
+    @isDark: @colors[@@color][isDark];
+    @_labelColor: @colors[@@color][color];
+    @_labelInvertedColor: @colors[@@color][light];
+    @_labelTextColor: @colors[@@color][text];
+    @_labelHover: @colors[@@color][hover];
+    @_labelInvertedHover: @colors[@@color][lightHover];
+    @_labelHoverTextColor: @colors[@@color][hoverText];
+    @_labelRibbonShadow: @colors[@@color][ribbon];
+    @_labelInvertedRibbonShadow: @colors[@@color][invertedRibbon];
+
+    .ui.@{color}.labels .label,
+    .ui.ui.ui.@{color}.label {
+      background-color: @_labelColor;
       border-color: @_labelColor;
-      color: @_labelColor;
+      color: @_labelTextColor;
     }
-    .ui.basic.labels a.@{color}.label:hover,
-    a.ui.ui.ui.basic.@{color}.label:hover {
-      background: @basicBackground;
+    /* Link */
+    .ui.@{color}.labels a.label:hover,
+    a.ui.ui.ui.@{color}.label:hover {
+      background-color: @_labelHover;
       border-color: @_labelHover;
-      color: @_labelHover;
-    }
-  }
-  & when (@variationLabelInverted) {
-    /* Inverted */
-    .ui.inverted.labels .@{color}.label,
-    .ui.ui.ui.inverted.@{color}.label {
-      background-color: @_labelInvertedColor;
-      border-color: @_labelInvertedColor;
-      color: @black;
-    }
-    /* Inverted Link */
-    .ui.inverted.labels a.@{color}.label:hover,
-    a.ui.ui.ui.inverted.@{color}.label:hover{
-      background-color: @_labelInvertedHover;
-      border-color: @_labelInvertedHover;
-      & when not (@isDark) {
-        color: @black;
-      }
-      & when (@isDark) {
-        color: @_labelTextColor;
-      }
+      color: @_labelHoverTextColor;
     }
     & when (@variationLabelRibbon) {
-      /* Inverted Ribbon */
-      .ui.ui.ui.inverted.@{color}.ribbon.label {
-        border-color: @_labelInvertedRibbonShadow;
+      /* Ribbon */
+      .ui.ui.ui.@{color}.ribbon.label {
+        border-color: @_labelRibbonShadow;
       }
     }
     & when (@variationLabelBasic) {
-      /* Inverted Basic */
-      .ui.inverted.basic.labels .@{color}.label,
-      .ui.ui.ui.inverted.basic.@{color}.label {
-        background-color: @invertedBackground;
+      /* Basic */
+      .ui.basic.labels .@{color}.label,
+      .ui.ui.ui.basic.@{color}.label {
+        background: @basicBackground;
+        border-color: @_labelColor;
+        color: @_labelColor;
+      }
+      .ui.basic.labels a.@{color}.label:hover,
+      a.ui.ui.ui.basic.@{color}.label:hover {
+        background: @basicBackground;
+        border-color: @_labelHover;
+        color: @_labelHover;
+      }
+    }
+    & when (@variationLabelInverted) {
+      /* Inverted */
+      .ui.inverted.labels .@{color}.label,
+      .ui.ui.ui.inverted.@{color}.label {
+        background-color: @_labelInvertedColor;
         border-color: @_labelInvertedColor;
+        color: @black;
+      }
+      /* Inverted Link */
+      .ui.inverted.labels a.@{color}.label:hover,
+      a.ui.ui.ui.inverted.@{color}.label:hover {
+        background-color: @_labelInvertedHover;
+        border-color: @_labelInvertedHover;
         & when not (@isDark) {
-          color: @_labelInvertedColor;
+          color: @black;
         }
         & when (@isDark) {
-          color: @invertedTextColor;
+          color: @_labelTextColor;
         }
       }
-      .ui.inverted.basic.labels a.@{color}.label:hover,
-      a.ui.ui.ui.inverted.basic.@{color}.label:hover {
-        border-color: @_labelInvertedHover;
-        background-color: @invertedBackground;
-        & when not (@isDark) {
-          color: @_labelInvertedHover;
+      & when (@variationLabelRibbon) {
+        /* Inverted Ribbon */
+        .ui.ui.ui.inverted.@{color}.ribbon.label {
+          border-color: @_labelInvertedRibbonShadow;
         }
       }
-      & when (@variationLabelTag) {
-        /* Inverted Basic Tags */
-        .ui.inverted.basic.tag.labels .@{color}.label,
-        .ui.ui.ui.inverted.@{color}.basic.tag.label {
-          border: @invertedBorderSize solid @_labelInvertedColor;
+      & when (@variationLabelBasic) {
+        /* Inverted Basic */
+        .ui.inverted.basic.labels .@{color}.label,
+        .ui.ui.ui.inverted.basic.@{color}.label {
+          background-color: @invertedBackground;
+          border-color: @_labelInvertedColor;
+          & when not (@isDark) {
+            color: @_labelInvertedColor;
+          }
+          & when (@isDark) {
+            color: @invertedTextColor;
+          }
         }
-        .ui.inverted.basic.tag.labels .@{color}.label:before,
-        .ui.ui.ui.inverted.@{color}.basic.tag.label:before {
-          border-color: inherit;
-          border-width: @invertedBorderSize 0 0 @invertedBorderSize;
-          border-style: inherit;
+        .ui.inverted.basic.labels a.@{color}.label:hover,
+        a.ui.ui.ui.inverted.basic.@{color}.label:hover {
+          border-color: @_labelInvertedHover;
           background-color: @invertedBackground;
-          right: e(%("calc(100%% + %d)", @invertedBorderSize));
+          & when not (@isDark) {
+            color: @_labelInvertedHover;
+          }
+        }
+        & when (@variationLabelTag) {
+          /* Inverted Basic Tags */
+          .ui.inverted.basic.tag.labels .@{color}.label,
+          .ui.ui.ui.inverted.@{color}.basic.tag.label {
+            border: @invertedBorderSize solid @_labelInvertedColor;
+          }
+          .ui.inverted.basic.tag.labels .@{color}.label::before,
+          .ui.ui.ui.inverted.@{color}.basic.tag.label::before {
+            border-color: inherit;
+            border-width: @invertedBorderSize 0 0 @invertedBorderSize;
+            border-style: inherit;
+            background-color: @invertedBackground;
+            right: e(%("calc(100%% + %d)", @invertedBorderSize));
+          }
         }
       }
     }
-  }
-})
+  })
+}
 
 /*-------------------
      Horizontal
@@ -880,7 +881,7 @@ each(@colors,{
     position: absolute;
   }
 
-  .ui.pointing.label:before {
+  .ui.pointing.label::before {
     background-color: inherit;
     background-image: inherit;
     border-width: 0;
@@ -888,7 +889,7 @@ each(@colors,{
     border-color: @pointingBorderColor;
   }
   /* Arrow */
-  .ui.pointing.label:before {
+  .ui.pointing.label::before {
     position: absolute;
     content: '';
     transform: rotate(45deg);
@@ -905,8 +906,8 @@ each(@colors,{
   .ui[class*="pointing above"].label {
     margin-top: @pointingVerticalDistance;
   }
-  .ui.pointing.label:before,
-  .ui[class*="pointing above"].label:before {
+  .ui.pointing.label::before,
+  .ui[class*="pointing above"].label::before {
     border-width: @borderWidth 0 0 @borderWidth;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     top: 0;
@@ -918,8 +919,8 @@ each(@colors,{
     margin-top: 0;
     margin-bottom: @pointingVerticalDistance;
   }
-  .ui[class*="bottom pointing"].label:before,
-  .ui[class*="pointing below"].label:before {
+  .ui[class*="bottom pointing"].label::before,
+  .ui[class*="pointing below"].label::before {
     border-width: 0 @borderWidth @borderWidth 0;
     top: auto;
     right: auto;
@@ -932,7 +933,7 @@ each(@colors,{
     margin-top: 0;
     margin-left: @pointingHorizontalDistance;
   }
-  .ui[class*="left pointing"].label:before {
+  .ui[class*="left pointing"].label::before {
     border-width: 0 0 @borderWidth @borderWidth;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     bottom: auto;
@@ -945,7 +946,7 @@ each(@colors,{
     margin-top: 0;
     margin-right: @pointingHorizontalDistance;
   }
-  .ui[class*="right pointing"].label:before {
+  .ui[class*="right pointing"].label::before {
     border-width: @borderWidth @borderWidth 0 0;
     transform: translateX(50%) translateY(-50%) rotate(45deg);
     top: 50%;
@@ -957,24 +958,24 @@ each(@colors,{
     /* Basic Pointing */
 
     /*--- Above ---*/
-    .ui.basic.pointing.label:before,
-    .ui.basic[class*="pointing above"].label:before {
+    .ui.basic.pointing.label::before,
+    .ui.basic[class*="pointing above"].label::before {
       margin-top: @basicPointingTriangleOffset;
     }
     /*--- Below ---*/
-    .ui.basic[class*="bottom pointing"].label:before,
-    .ui.basic[class*="pointing below"].label:before {
+    .ui.basic[class*="bottom pointing"].label::before,
+    .ui.basic[class*="pointing below"].label::before {
       bottom: auto;
       top: 100%;
       margin-top: -@basicPointingTriangleOffset;
     }
     /*--- Left ---*/
-    .ui.basic[class*="left pointing"].label:before {
+    .ui.basic[class*="left pointing"].label::before {
       top: 50%;
       left: @basicPointingTriangleOffset;
     }
     /*--- Right ---*/
-    .ui.basic[class*="right pointing"].label:before {
+    .ui.basic[class*="right pointing"].label::before {
       top: 50%;
       right: @basicPointingTriangleOffset;
     }

package/src/definitions/elements/list.less

@@ -61,10 +61,10 @@ ol.ui.list li,
   line-height: @itemLineHeight;
 }
 
-ul.ui.list > li:first-child:after,
-ol.ui.list > li:first-child:after,
-.ui.list > .list > .item:after,
-.ui.list > .item:after {
+ul.ui.list > li:first-child::after,
+ol.ui.list > li:first-child::after,
+.ui.list > .list > .item::after,
+.ui.list > .item::after {
   content: '';
   display: block;
   height: 0;
@@ -185,22 +185,25 @@ ol.ui.list ol li,
   margin-left: 0;
   padding-left: 0;
 }
-
-/* Header */
-.ui.list .list > .item .header,
-.ui.list > .item .header {
-  display: block;
-  margin: 0;
-  font-family: @itemHeaderFontFamily;
-  font-weight: @itemHeaderFontWeight;
-  color: @itemHeaderColor;
+& when (@variationListHeader) {
+  /* Header */
+  .ui.list .list > .item .header,
+  .ui.list > .item .header {
+    display: block;
+    margin: 0;
+    font-family: @itemHeaderFontFamily;
+    font-weight: @itemHeaderFontWeight;
+    color: @itemHeaderColor;
+  }
 }
 
-/* Description */
-.ui.list .list > .item .description,
-.ui.list > .item .description {
-  display: block;
-  color: @itemDescriptionColor;
+& when (@variationListDescription) {
+  /* Description */
+  .ui.list .list > .item .description,
+  .ui.list > .item .description {
+    display: block;
+    color: @itemDescriptionColor;
+  }
 }
 
 /* Child Link */
@@ -230,15 +233,17 @@ ol.ui.list ol li,
   }
 }
 
-/* Header Link */
-.ui.list .list > .item a.header,
-.ui.list > .item a.header {
-  cursor: pointer;
-  color: @itemHeaderLinkColor !important;
-}
-.ui.list .list > .item > a.header:hover,
-.ui.list > .item > a.header:hover {
-  color: @itemHeaderLinkHoverColor !important;
+& when (@variationListHeader) {
+  /* Header Link */
+  .ui.list .list > .item a.header,
+  .ui.list > .item a.header {
+    cursor: pointer;
+    color: @itemHeaderLinkColor !important;
+  }
+  .ui.list .list > .item > a.header:hover,
+  .ui.list > .item > a.header:hover {
+    color: @itemHeaderLinkHoverColor !important;
+  }
 }
 
 & when (@variationListFloated) {
@@ -278,8 +283,8 @@ ol.ui.list ol li,
   padding: @itemVerticalPadding @itemHorizontalPadding;
   line-height: @itemLineHeight;
 }
-.ui.menu .ui.list .list > .item:before,
-.ui.menu .ui.list > .item:before {
+.ui.menu .ui.list .list > .item::before,
+.ui.menu .ui.list > .item::before {
   border: none;
   background: none;
 }
@@ -406,13 +411,17 @@ ol.ui.list ol li,
       color: @invertedIconLinkColor;
     }
   }
-  .ui.inverted.list .list > .item .header,
-  .ui.inverted.list > .item .header {
-    color: @invertedHeaderColor;
+  & when (@variationListHeader) {
+    .ui.inverted.list .list > .item .header,
+    .ui.inverted.list > .item .header {
+      color: @invertedHeaderColor;
+    }
   }
-  .ui.inverted.list .list > .item .description,
-  .ui.inverted.list > .item .description {
-    color: @invertedDescriptionColor;
+  & when (@variationListDescription) {
+    .ui.inverted.list .list > .item .description,
+    .ui.inverted.list > .item .description {
+      color: @invertedDescriptionColor;
+    }
   }
   .ui.inverted.list .list > .item > .content,
   .ui.inverted.list > .item > .content {
@@ -615,9 +624,9 @@ ol.ui.list ol li,
   .ui.bulleted.list > .item {
     position: relative;
   }
-  ul.ui.list li:before,
-  .ui.bulleted.list .list > .item:before,
-  .ui.bulleted.list > .item:before {
+  ul.ui.list li::before,
+  .ui.bulleted.list .list > .item::before,
+  .ui.bulleted.list > .item::before {
     user-select: none;
     pointer-events: none;
     position: absolute;
@@ -631,9 +640,9 @@ ol.ui.list ol li,
     vertical-align: @bulletVerticalAlign;
   }
 
-  ul.ui.list li:before,
-  .ui.bulleted.list .list > a.item:before,
-  .ui.bulleted.list > a.item:before {
+  ul.ui.list li::before,
+  .ui.bulleted.list .list > a.item::before,
+  .ui.bulleted.list > a.item::before {
     color: @bulletLinkColor;
   }
 
@@ -686,9 +695,9 @@ ol.ui.list ol li,
     list-style-type: none;
     position: relative;
   }
-  ol.ui.list li:before,
-  .ui.ordered.list .list > .item:before,
-  .ui.ordered.list > .item:before {
+  ol.ui.list li::before,
+  .ui.ordered.list .list > .item::before,
+  .ui.ordered.list > .item::before {
     position: absolute;
     top: auto;
     left: auto;
@@ -704,19 +713,19 @@ ol.ui.list ol li,
   }
 
   & when (@variationListInverted) {
-    ol.ui.inverted.list li:before,
-    .ui.ordered.inverted.list .list > .item:before,
-    .ui.ordered.inverted.list > .item:before {
+    ol.ui.inverted.list li::before,
+    .ui.ordered.inverted.list .list > .item::before,
+    .ui.ordered.inverted.list > .item::before {
       color: @orderedInvertedCountColor;
     }
   }
 
   /* Value */
-  .ui.ordered.list .list > .item[data-value]:before,
-  .ui.ordered.list > .item[data-value]:before {
+  .ui.ordered.list .list > .item[data-value]::before,
+  .ui.ordered.list > .item[data-value]::before {
     content: attr(data-value);
   }
-  ol.ui.list li[value]:before {
+  ol.ui.list li[value]::before {
     content: attr(value);
   }
 
@@ -725,8 +734,8 @@ ol.ui.list ol li,
   .ui.ordered.list .list:not(.icon) {
     margin-left: @orderedChildCountDistance;
   }
-  ol.ui.list ol li:before,
-  .ui.ordered.list .list > .item:before {
+  ol.ui.list ol li::before,
+  .ui.ordered.list .list > .item::before {
     margin-left: @orderedChildCountOffset;
   }
 
@@ -736,9 +745,9 @@ ol.ui.list ol li,
     .ui.ordered.horizontal.list {
       margin-left: 0;
     }
-    ol.ui.horizontal.list li:before,
-    .ui.ordered.horizontal.list .list > .item:before,
-    .ui.ordered.horizontal.list > .item:before {
+    ol.ui.horizontal.list li::before,
+    .ui.ordered.horizontal.list .list > .item::before,
+    .ui.ordered.horizontal.list > .item::before {
       position: static;
       margin: 0 @horizontalOrderedCountDistance 0 0;
     }
@@ -747,9 +756,9 @@ ol.ui.list ol li,
 
 & when (@variationListSuffixed) {
   /* Suffixed Ordered */
-  ol.ui.suffixed.list li:before,
-  .ui.suffixed.ordered.list .list > .item:before,
-  .ui.suffixed.ordered.list > .item:before {
+  ol.ui.suffixed.list li::before,
+  .ui.suffixed.ordered.list .list > .item::before,
+  .ui.suffixed.ordered.list > .item::before {
     content: @orderedCountContentSuffixed;
   }
 }
@@ -974,23 +983,24 @@ ol.ui.list ol li,
       padding-right: @relaxedHorizontalPadding;
     }
   }
-
-  /* Very Relaxed */
-  .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
-    padding-top: @veryRelaxedItemVerticalPadding;
-  }
-  .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
-    padding-bottom: @veryRelaxedItemVerticalPadding;
-  }
-
-  & when (@variationListHorizontal) {
-    .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
-    .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
-      padding-left: @veryRelaxedHorizontalPadding;
+  & when (@variationListVeryRelaxed) {
+    /* Very Relaxed */
+    .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
+      padding-top: @veryRelaxedItemVerticalPadding;
     }
-    .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
-    .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
-      padding-right: @veryRelaxedHorizontalPadding;
+    .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
+      padding-bottom: @veryRelaxedItemVerticalPadding;
+    }
+
+    & when (@variationListHorizontal) {
+      .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
+      .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
+        padding-left: @veryRelaxedHorizontalPadding;
+      }
+      .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
+      .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
+        padding-right: @veryRelaxedHorizontalPadding;
+      }
     }
   }
 }
@@ -1018,4 +1028,3 @@ ol.ui.list ol li,
 }
 
 .loadUIOverrides();
-