fomantic-ui 2.8.8-beta.99 → 2.9.0-beta.100

package/src/definitions/elements/label.less

@@ -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

package/src/definitions/elements/list.less

@@ -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) {
@@ -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 {
@@ -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[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
+      padding-bottom: @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;
+
+    & 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;
+      }
     }
   }
 }

package/src/definitions/elements/loader.less

@@ -203,35 +203,36 @@
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-
-  .ui.@{color}.elastic.loader.loader:before,
-  .ui.@{color}.basic.elastic.loading.button:before,
-  .ui.@{color}.basic.elastic.loading.button:after,
-  .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.card):before,
-  .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
-  .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
-  .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
-  .ui.@{color}.loading.loading.loading.loading .input > i.icon:after,
-  .ui.@{color}.loading.loading.loading.loading > i.icon:after,
-  .ui.@{color}.loader.loader.loader:after {
-    color: @c;
-  }
-  .ui.inverted.@{color}.elastic.loader:before,
-  .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.card):before,
-  .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
-  .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
-  .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
-  .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after,
-  .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after,
-  .ui.inverted.@{color}.loader.loader.loader:after {
-    color: @l;
-  }
-})
+& when not (@variationLoaderColors = false) {
+  each(@variationLoaderColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    .ui.@{color}.elastic.loader.loader:before,
+    .ui.@{color}.basic.elastic.loading.button:before,
+    .ui.@{color}.basic.elastic.loading.button:after,
+    .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
+    .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before,
+    .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before,
+    .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after,
+    .ui.@{color}.loading.loading.loading.loading .input > i.icon:after,
+    .ui.@{color}.loading.loading.loading.loading > i.icon:after,
+    .ui.@{color}.loader.loader.loader:after {
+      color: @c;
+    }
+    .ui.inverted.@{color}.elastic.loader:before,
+    .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before,
+    .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before,
+    .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before,
+    .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after,
+    .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon:after,
+    .ui.inverted.@{color}.loading.loading.loading.loading > i.icon:after,
+    .ui.inverted.@{color}.loader.loader.loader:after {
+      color: @l;
+    }
+  })
+}
 
 .ui.elastic.loader.loader:before,
 .ui.elastic.loading.loading.loading:before,
@@ -296,12 +297,14 @@ each(@colors, {
   border-bottom-color: transparent;
 }
 .ui.loading.loading.loading.loading.loading.loading.card:after,
+.ui.loading.loading.loading.loading.loading.loading.segments:after,
 .ui.loading.loading.loading.loading.loading.loading.segment:after,
 .ui.loading.loading.loading.loading.loading.loading.form:after {
   border-left-color:@loaderFillColor;
   border-right-color:@loaderFillColor;
 }
 .ui.loading.loading.loading.loading.loading.loading.card:not(.double):after,
+.ui.loading.loading.loading.loading.loading.loading.segments:not(.double):after,
 .ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
 .ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
   border-bottom-color: @loaderFillColor;
@@ -318,14 +321,14 @@ each(@colors, {
   .ui.inverted.dimmer > .ui.elastic.loader {
     color: @loaderLineColor;
   }
-  .ui.elastic.loading.loading:not(.form):not(.segment):not(.card):after,
+  .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
   .ui.elastic.loading.loading .input > i.icon:after,
   .ui.elastic.loading.loading > i.icon:after,
   .ui.elastic.loader.loader:after {
     animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61);
     animation-delay: 0.3s;
   }
-  .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.card):before,
+  .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
   .ui.elastic.loading.loading.loading .input > i.icon:before,
   .ui.elastic.loading.loading.loading > i.icon:before,
   .ui.elastic.loader.loader:before {
@@ -339,27 +342,27 @@ each(@colors, {
     }
   }
   & when (@variationLoaderSpeeds) {
-    .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.card):after,
+    .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
     .ui.slow.elastic.loading.loading .input > i.icon:after,
     .ui.slow.elastic.loading.loading > i.icon:after,
     .ui.slow.elastic.loader.loader:after {
       animation-duration: 1.5s;
       animation-delay: 0.45s;
     }
-    .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.card):before,
+    .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
     .ui.slow.elastic.loading.loading.loading .input > i.icon:before,
     .ui.slow.elastic.loading.loading.loading > i.icon:before,
     .ui.slow.elastic.loader.loader:before {
       animation-duration: 1.5s;
     }
-    .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.card):after,
+    .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after,
     .ui.fast.elastic.loading.loading .input > i.icon:after,
     .ui.fast.elastic.loading.loading > i.icon:after,
     .ui.fast.elastic.loader.loader:after {
       animation-duration: 0.66s;
       animation-delay: 0.20s;
     }
-    .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.card):before,
+    .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before,
     .ui.fast.elastic.loading.loading.loading .input > i.icon:before,
     .ui.fast.elastic.loading.loading.loading > i.icon:before,
     .ui.fast.elastic.loader.loader:before {

package/src/definitions/elements/segment.less

@@ -49,10 +49,10 @@
     border-radius: 0;
     box-shadow: none;
     border: none;
-    border-bottom: @borderWidth solid @borderColor;
+    border-top: @borderWidth solid @borderColor;
   }
-  .ui.vertical.segment:last-child {
-    border-bottom: none;
+  .ui.vertical.segment:first-child {
+    border-top: none;
   }
 }
 
@@ -62,6 +62,8 @@
 --------------------*/
 & when (@variationSegmentInverted) {
   /* Header */
+  .ui.inverted.segments .segment > .ui.header .sub.header,
+  .ui.inverted.segments .segment > .ui.header,
   .ui.inverted.segment > .ui.header .sub.header,
   .ui.inverted.segment > .ui.header {
     color: @white;
@@ -137,6 +139,12 @@
     background: @placeholderBackground;
     border-color: @placeholderBorderColor;
     box-shadow: @placeholderBoxShadow;
+    &.tab {
+      display: none;
+      &.active {
+        display: flex;
+      }
+    }
   }
 
   .ui.placeholder.segment .button,
@@ -291,9 +299,10 @@
   .ui.padded.segment {
     padding: @paddedSegmentPadding;
   }
-
-  .ui[class*="very padded"].segment {
-    padding: @veryPaddedSegmentPadding;
+  & when (@variationSegmentVeryPadded) {
+    .ui[class*="very padded"].segment {
+      padding: @veryPaddedSegmentPadding;
+    }
   }
 
   & when (@variationSegmentVertical) {
@@ -475,6 +484,10 @@
     .ui.horizontal.segments > .segment:last-child {
       border-radius: 0 @borderRadius @borderRadius 0;
     }
+    /* Equal Width */
+    .ui[class*="equal width"].horizontal.segments > .segment {
+      width: 100%;
+    }
   }
 }
 
@@ -488,6 +501,7 @@
       Disabled
   ---------------*/
 
+  .ui.disabled.segments,
   .ui.disabled.segment {
     opacity: @disabledOpacity;
     color: @disabledTextColor;
@@ -501,6 +515,7 @@
       Loading
   ---------------*/
 
+  .ui.loading.segments,
   .ui.loading.segment {
     position: relative;
     cursor: default;
@@ -508,6 +523,7 @@
     user-select: none;
     transition: all 0s linear;
   }
+  .ui.loading.segments:before,
   .ui.loading.segment:before {
     position: absolute;
     content: '';
@@ -519,6 +535,7 @@
     border-radius: @borderRadius;
     z-index: @loaderDimmerZIndex;
   }
+  .ui.loading.segments:after,
   .ui.loading.segment:after {
     position: absolute;
     content: '';
@@ -575,22 +592,23 @@
 /*-------------------
        Colors
 --------------------*/
-
-each(@colors,{
-  @color: replace(@key,'@','');
-  @c: @colors[@@color][color];
-  & when not (@color=primary) and not (@color=secondary) {
-    .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) {
-      border-top: @coloredBorderSize solid @c;
-    }
-    & when (@variationSegmentInverted) {
-      .ui.inverted.@{color}.segment.segment.segment.segment.segment {
-        background-color: @c;
-        color: @white;
+& when not (@variationSegmentColors = false) {
+  each(@variationSegmentColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    & when not (@color=primary) and not (@color=secondary) {
+      .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) {
+        border-top: @coloredBorderSize solid @c;
+      }
+      & when (@variationSegmentInverted) {
+        .ui.inverted.@{color}.segment.segment.segment.segment.segment {
+          background-color: @c;
+          color: @white;
+        }
       }
     }
-  }
-})
+  })
+}
 
 & when (@variationSegmentAligned) {
   /*-------------------
@@ -628,11 +646,13 @@ each(@colors,{
   /*-------------------
         Inverted
   --------------------*/
-
+  .ui.inverted.segments,
+  .ui.inverted.segments .segment,
   .ui.inverted.segment {
     border: none;
     box-shadow: none;
   }
+  .ui.inverted.segments .segment,
   .ui.inverted.segment,
   .ui.primary.inverted.segment {
     background: @invertedBackground;
@@ -654,9 +674,11 @@ each(@colors,{
   }
   & when (@variationSegmentLoading) {
     /* Loading */
+    .ui.inverted.loading.segments,
     .ui.inverted.loading.segment {
       color: @invertedLoaderLineColor;
     }
+    .ui.inverted.loading.segments:before,
     .ui.inverted.loading.segment:before {
       background: @loaderInvertedDimmerColor;
     }
@@ -710,12 +732,12 @@ each(@colors,{
     box-shadow: @attachedBoxShadow;
     border: @attachedBorder;
   }
-  .ui.attached:not(.message) + .ui.attached.segment:not(.top) {
+  .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top) {
     border-top: none;
   }
 
   /* Top */
-  .ui[class*="top attached"].segment {
+  .ui.segment[class*="top attached"] {
     bottom: 0;
     margin-bottom: 0;
     top: @attachedTopOffset;
@@ -725,6 +747,9 @@ each(@colors,{
   .ui.segment[class*="top attached"]:first-child {
     margin-top: 0;
   }
+  .ui.tab.segment[class*="top attached"]:first-child {
+    margin-top: @verticalMargin;
+  }
 
   /* Bottom */
   .ui.segment[class*="bottom attached"] {
@@ -736,6 +761,9 @@ each(@colors,{
     border-radius: 0 0 @borderRadius @borderRadius;
   }
   .ui.segment[class*="bottom attached"]:last-child {
+    margin-bottom: 0;
+  }
+  .ui.tab.segment[class*="bottom attached"]:last-child {
     margin-bottom: @verticalMargin;
   }
 }