fomantic-ui 2.9.0-beta.26 → 2.9.0-beta.260

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(.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;
-  }
-})
+& 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,

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;
   }
 }
 
@@ -299,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) {
@@ -437,10 +438,10 @@
       flex-direction: row;
       background-color: transparent;
       padding: 0;
-      box-shadow: @boxShadow;
-      margin: @margin;
-      border-radius: @borderRadius;
-      border: @border;
+      box-shadow: @groupedBoxShadow;
+      margin: @groupedMargin;
+      border-radius: @groupedBorderRadius;
+      border: @groupedBorder;
     }
     .ui.stackable.horizontal.segments {
       flex-wrap: wrap;
@@ -591,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) {
   /*-------------------
@@ -666,7 +668,7 @@ each(@colors,{
   }
   & when (@variationSegmentAttached) {
     /* Attached */
-    .ui.inverted.attached.segment {
+    .ui.ui.inverted.attached.segment {
       border-color: @solidWhiteBorderColor;
     }
   }
@@ -728,14 +730,16 @@ each(@colors,{
     width: @attachedWidth;
     max-width: @attachedWidth;
     box-shadow: @attachedBoxShadow;
-    border: @attachedBorder;
+    &:not(.basic) {
+      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;
@@ -745,6 +749,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"] {
@@ -756,6 +763,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;
   }
 }
@@ -775,6 +785,115 @@ each(@colors,{
   }
 }
 
+& when (@variationSegmentScrolling) {
+  /*--------------
+    Scrolling
+  ---------------*/
+  .ui.scrolling.segment {
+    overflow: auto;
+  }
+  @media only screen and (max-width : @largestMobileScreen) {
+    & when (@variationSegmentScrollingShort) {
+      .ui.scrolling.segment.short {
+        max-height: @scrollingMobileMaxHeight * 0.75;
+      }
+    }
+    & when (@variationSegmentScrollingVeryShort) {
+      .ui.scrolling.segment[class*="very short"] {
+        max-height: @scrollingMobileMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.segment {
+      max-height: @scrollingMobileMaxHeight;
+    }
+    & when (@variationSegmentScrollingLong) {
+      .ui.scrolling.segment.long {
+        max-height: @scrollingMobileMaxHeight * 2;
+      }
+    }
+    & when (@variationSegmentScrollingVeryLong) {
+      .ui.scrolling.segment[class*="very long"] {
+        max-height: @scrollingMobileMaxHeight * 3;
+      }
+    }
+  }
+
+  @media only screen and (min-width: @tabletBreakpoint) {
+    & when (@variationSegmentScrollingShort) {
+      .ui.scrolling.segment.short {
+        max-height: @scrollingTabletMaxHeight * 0.75;
+      }
+    }
+    & when (@variationSegmentScrollingVeryShort) {
+      .ui.scrolling.segment[class*="very short"] {
+        max-height: @scrollingTabletMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.segment {
+      max-height: @scrollingTabletMaxHeight;
+    }
+    & when (@variationSegmentScrollingLong) {
+      .ui.scrolling.segment.long {
+        max-height: @scrollingTabletMaxHeight * 2;
+      }
+    }
+    & when (@variationSegmentScrollingVeryLong) {
+      .ui.scrolling.segment[class*="very long"] {
+        max-height: @scrollingTabletMaxHeight * 3;
+      }
+    }
+  }
+  @media only screen and (min-width: @computerBreakpoint) {
+    & when (@variationSegmentScrollingShort) {
+      .ui.scrolling.segment.short {
+        max-height: @scrollingComputerMaxHeight * 0.75;
+      }
+    }
+    & when (@variationSegmentScrollingVeryShort) {
+      .ui.scrolling.segment[class*="very short"] {
+        max-height: @scrollingComputerMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.segment {
+      max-height: @scrollingComputerMaxHeight;
+    }
+    & when (@variationSegmentScrollingLong) {
+      .ui.scrolling.segment.long {
+        max-height: @scrollingComputerMaxHeight * 2;
+      }
+    }
+    & when (@variationSegmentScrollingVeryLong) {
+      .ui.scrolling.segment[class*="very long"]{
+        max-height: @scrollingComputerMaxHeight * 3;
+      }
+    }
+  }
+  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
+    & when (@variationSegmentScrollingShort) {
+      .ui.scrolling.segment.short {
+        max-height: @scrollingWidescreenMaxHeight * 0.75;
+      }
+    }
+    & when (@variationSegmentScrollingVeryShort) {
+      .ui.scrolling.segment[class*="very short"] {
+        max-height: @scrollingWidescreenMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.segment {
+      max-height: @scrollingWidescreenMaxHeight;
+    }
+    & when (@variationSegmentScrollingLong) {
+      .ui.scrolling.segment.long {
+        max-height: @scrollingWidescreenMaxHeight * 2;
+      }
+    }
+    & when (@variationSegmentScrollingVeryLong) {
+      .ui.scrolling.segment[class*="very long"] {
+        max-height: @scrollingWidescreenMaxHeight * 3;
+      }
+    }
+  }
+}
 /*-------------------
         Size
 --------------------*/

package/src/definitions/elements/step.less

@@ -290,8 +290,10 @@
     right: 50%;
     transform: translateY(-50%) translateX(50%) rotate(45deg);
   }
-  .ui.vertical.steps .active.step:last-child:after {
-    display: none;
+  & when (@variationStepVertical) {
+    .ui.vertical.steps .active.step:last-child:after {
+      display: none;
+    }
   }
   /* Content */
   .ui.steps:not(.unstackable) .step .content {
@@ -493,53 +495,55 @@
   }
 }
 
-/*-------------------
-    Evenly Divided
---------------------*/
+& when (@variationStepEqualWidth) {
+  /*-------------------
+      Evenly Divided
+  --------------------*/
 
-.ui.one.steps,
-.ui.two.steps,
-.ui.three.steps,
-.ui.four.steps,
-.ui.five.steps,
-.ui.six.steps,
-.ui.seven.steps,
-.ui.eight.steps {
-  width: 100%;
-}
-.ui.one.steps > .step,
-.ui.two.steps > .step,
-.ui.three.steps > .step,
-.ui.four.steps > .step,
-.ui.five.steps > .step,
-.ui.six.steps > .step,
-.ui.seven.steps > .step,
-.ui.eight.steps > .step {
-  flex-wrap: nowrap;
-}
-.ui.one.steps > .step {
-  width: 100%;
-}
-.ui.two.steps > .step {
-  width: 50%;
-}
-.ui.three.steps > .step {
-  width: 33.333%;
-}
-.ui.four.steps > .step {
-  width: 25%;
-}
-.ui.five.steps > .step {
-  width: 20%;
-}
-.ui.six.steps > .step {
-  width: 16.666%;
-}
-.ui.seven.steps > .step {
-  width: 14.285%;
-}
-.ui.eight.steps > .step {
-  width: 12.500%;
+  .ui.one.steps,
+  .ui.two.steps,
+  .ui.three.steps,
+  .ui.four.steps,
+  .ui.five.steps,
+  .ui.six.steps,
+  .ui.seven.steps,
+  .ui.eight.steps {
+    width: 100%;
+  }
+  .ui.one.steps > .step,
+  .ui.two.steps > .step,
+  .ui.three.steps > .step,
+  .ui.four.steps > .step,
+  .ui.five.steps > .step,
+  .ui.six.steps > .step,
+  .ui.seven.steps > .step,
+  .ui.eight.steps > .step {
+    flex-wrap: nowrap;
+  }
+  .ui.one.steps > .step {
+    width: 100%;
+  }
+  .ui.two.steps > .step {
+    width: 50%;
+  }
+  .ui.three.steps > .step {
+    width: 33.333%;
+  }
+  .ui.four.steps > .step {
+    width: 25%;
+  }
+  .ui.five.steps > .step {
+    width: 20%;
+  }
+  .ui.six.steps > .step {
+    width: 16.666%;
+  }
+  .ui.seven.steps > .step {
+    width: 14.285%;
+  }
+  .ui.eight.steps > .step {
+    width: 12.500%;
+  }
 }
 
 /*-------------------

package/src/definitions/elements/text.less

@@ -26,24 +26,26 @@ span.ui.text {
   line-height: @lineHeight;
 }
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
+& when not (@variationTextColors = false) {
+  each(@variationTextColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
 
-  span.ui.@{color}.text {
-    color: @c;
-  }
-  & when (@variationTextInverted) {
-    span.ui.inverted.@{color}.text {
-      color: @l;
+    span.ui.@{color}.text {
+      color: @c;
     }
-  }
-})
+    & when (@variationTextInverted) {
+      span.ui.inverted.@{color}.text {
+        color: @l;
+      }
+    }
+  })
+}
 
-& when (@variationTextStates) {
-  each(@textStates, {
-    @state: replace(@key, '@', '');
+& when not (@variationTextStates = false) {
+  each(@variationTextStates, {
+    @state: @value;
     @c: @textStates[@@state][color];
 
     span.ui.@{state}.text {

package/src/definitions/globals/site.less

@@ -128,7 +128,7 @@ a:hover {
          Scrollbars
 *******************************/
 
-.addScrollbars() when (@useCustomScrollbars) {
+& when (@useCustomScrollbars) {
 
   /* Force Simple Scrollbars */
   body ::-webkit-scrollbar {
@@ -152,6 +152,17 @@ a:hover {
   body ::-webkit-scrollbar-thumb:hover {
     background: @thumbHoverBackground;
   }
+  body .ui {
+    /* IE11 */
+    scrollbar-face-color: @thumbBackgroundHex;
+    scrollbar-shadow-color: @thumbBackgroundHex;
+    scrollbar-track-color: @trackBackgroundHex;
+    scrollbar-arrow-color: @trackBackgroundHex;
+
+    /* firefox : first color thumb, second track*/
+    scrollbar-color:  @thumbBackground @trackBackground;
+    scrollbar-width: thin;
+  }
 
   /* Inverted UI */
   body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track {
@@ -166,6 +177,17 @@ a:hover {
   body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
     background: @thumbInvertedHoverBackground;
   }
+
+  body .ui.inverted:not(.dimmer) {
+    /* IE11 */
+    scrollbar-face-color: @thumbInvertedBackgroundHex;
+    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+    scrollbar-track-color: @trackInvertedBackgroundHex;
+    scrollbar-arrow-color: @trackInvertedBackgroundHex;
+
+    /* firefox : first color thumb, second track */
+    scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
+  }
 }
 
 /*******************************
@@ -203,5 +225,4 @@ input::selection {
   color: @inputHighlightColor;
 }
 
-.addScrollbars();
 .loadUIOverrides();