feat(segment): disabled, inverted and loading groups

This PR adds support to use loading, disabled or inverted to the group variants instead of each single segment inside a group

Author: lubber-de

src/definitions/elements/loader.less

@@ -212,7 +212,7 @@ each(@colors, {
   .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: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,
@@ -222,7 +222,7 @@ each(@colors, {
     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: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,
@@ -296,12 +296,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 +320,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 +341,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 {

src/definitions/elements/segment.less

@@ -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;
@@ -488,6 +490,7 @@
       Disabled
   ---------------*/
 
+  .ui.disabled.segments,
   .ui.disabled.segment {
     opacity: @disabledOpacity;
     color: @disabledTextColor;
@@ -501,13 +504,15 @@
       Loading
   ---------------*/
 
+  .ui.loading.segments,
   .ui.loading.segment {
     position: relative;
     cursor: default;
     pointer-events: none;
     user-select: none;
     transition: all 0s linear;
   }
+  .ui.loading.segments:before,
   .ui.loading.segment:before {
     position: absolute;
     content: '';
@@ -519,6 +524,7 @@
     border-radius: @borderRadius;
     z-index: @loaderDimmerZIndex;
   }
+  .ui.loading.segments:after,
   .ui.loading.segment:after {
     position: absolute;
     content: '';
@@ -628,11 +634,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 +662,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;
     }