fomantic-ui 2.9.0-beta.29 → 2.9.0-beta.292

package/src/definitions/elements/placeholder.less

@@ -57,10 +57,10 @@
 }
 
 .ui.placeholder,
-.ui.placeholder > :before,
-.ui.placeholder .image.header:after,
+.ui.placeholder > ::before,
+.ui.placeholder .image.header::after,
 .ui.placeholder .line,
-.ui.placeholder .line:after {
+.ui.placeholder .line::after {
   background-color: @white;
 }
 
@@ -93,17 +93,17 @@
     position: relative;
     height: @placeholderLineMargin;
   }
-  .ui.placeholder .line:before,
-  .ui.placeholder .line:after {
+  .ui.placeholder .line::before,
+  .ui.placeholder .line::after {
     top: 100%;
     position: absolute;
     content: '';
     background-color: inherit;
   }
-  .ui.placeholder .line:before {
+  .ui.placeholder .line::before {
     left: 0;
   }
-  .ui.placeholder .line:after {
+  .ui.placeholder .line::after {
     right: 0;
   }
 
@@ -111,8 +111,8 @@
   .ui.placeholder .line {
     margin-bottom: @placeholderLineHeight;
   }
-  .ui.placeholder .line:before,
-  .ui.placeholder .line:after {
+  .ui.placeholder .line::before,
+  .ui.placeholder .line::after {
     height: @placeholderLineHeight;
   }
   .ui.placeholder .line:not(:first-child) {
@@ -120,19 +120,19 @@
   }
 
   /* Line Outdent */
-  .ui.placeholder .line:nth-child(1):after {
+  .ui.placeholder .line:nth-child(1)::after {
     width: @placeholderLineOneOutdent;
   }
-  .ui.placeholder .line:nth-child(2):after {
+  .ui.placeholder .line:nth-child(2)::after {
     width: @placeholderLineTwoOutdent;
   }
-  .ui.placeholder .line:nth-child(3):after {
+  .ui.placeholder .line:nth-child(3)::after {
     width: @placeholderLineThreeOutdent;
   }
-  .ui.placeholder .line:nth-child(4):after {
+  .ui.placeholder .line:nth-child(4)::after {
     width: @placeholderLineFourOutdent;
   }
-  .ui.placeholder .line:nth-child(5):after {
+  .ui.placeholder .line:nth-child(5)::after {
     width: @placeholderLineFiveOutdent;
   }
 }
@@ -147,17 +147,17 @@
   .ui.placeholder .header .line {
     margin-bottom: @placeholderHeaderLineHeight;
   }
-  .ui.placeholder .header .line:before,
-  .ui.placeholder .header .line:after {
+  .ui.placeholder .header .line::before,
+  .ui.placeholder .header .line::after {
     height: @placeholderHeaderLineHeight;
   }
   .ui.placeholder .header .line:not(:first-child) {
     margin-top: @placeholderHeaderLineHeight;
   }
-  .ui.placeholder .header .line:after {
+  .ui.placeholder .header .line::after {
     width: @placeholderHeaderLineOneOutdent;
   }
-  .ui.placeholder .header .line:nth-child(2):after {
+  .ui.placeholder .header .line:nth-child(2)::after {
     width: @placeholderHeaderLineTwoOutdent;
   }
 
@@ -166,10 +166,10 @@
     .ui.placeholder .image.header .line {
       margin-left: @placeholderImageWidth;
     }
-    .ui.placeholder .image.header .line:before {
+    .ui.placeholder .image.header .line::before {
       width: @placeholderImageTextIndent;
     }
-    .ui.placeholder .image.header:after {
+    .ui.placeholder .image.header::after {
       display: block;
       height: @placeholderLineMargin;
       content: '';
@@ -184,9 +184,9 @@
 .ui.placeholder .header .line:first-child {
   height: 0.01px;
 }
-.ui.placeholder .image:not(:first-child):before,
-.ui.placeholder .paragraph:not(:first-child):before,
-.ui.placeholder .header:not(:first-child):before {
+.ui.placeholder .image:not(:first-child)::before,
+.ui.placeholder .paragraph:not(:first-child)::before,
+.ui.placeholder .header:not(:first-child)::before {
   height: @placeholderSpacing;
   content: '';
   display: block;
@@ -198,10 +198,10 @@
     background-image: @placeholderInvertedLoadingGradient;
   }
   .ui.inverted.placeholder,
-  .ui.inverted.placeholder > :before,
-  .ui.inverted.placeholder .image.header:after,
+  .ui.inverted.placeholder > ::before,
+  .ui.inverted.placeholder .image.header::after,
   .ui.inverted.placeholder .line,
-  .ui.inverted.placeholder .line:after {
+  .ui.inverted.placeholder .line::after {
     background-color: @black;
   }
 }
@@ -215,22 +215,22 @@
         Sizes
 --------------------*/
 & when (@variationPlaceholderLengths) {
-  .ui.placeholder .full.line.line.line:after {
+  .ui.placeholder .full.line.line.line::after {
     width: @placeholderFullLineOutdent;
   }
-  .ui.placeholder .very.long.line.line.line:after {
+  .ui.placeholder .very.long.line.line.line::after {
     width: @placeholderVeryLongLineOutdent;
   }
-  .ui.placeholder .long.line.line.line:after {
+  .ui.placeholder .long.line.line.line::after {
     width: @placeholderLongLineOutdent;
   }
-  .ui.placeholder .medium.line.line.line:after {
+  .ui.placeholder .medium.line.line.line::after {
     width: @placeholderMediumLineOutdent;
   }
-  .ui.placeholder .short.line.line.line:after {
+  .ui.placeholder .short.line.line.line::after {
     width: @placeholderShortLineOutdent;
   }
-  .ui.placeholder .very.short.line.line.line:after {
+  .ui.placeholder .very.short.line.line.line::after {
     width: @placeholderVeryShortLineOutdent;
   }
 }

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;
   }
 }
 
@@ -198,10 +198,10 @@
   .ui.piled.segment:last-child {
     margin-bottom: 0;
   }
-  .ui.piled.segments:after,
-  .ui.piled.segments:before,
-  .ui.piled.segment:after,
-  .ui.piled.segment:before {
+  .ui.piled.segments::after,
+  .ui.piled.segments::before,
+  .ui.piled.segment::after,
+  .ui.piled.segment::before {
     background-color: @white;
     visibility: visible;
     content: '';
@@ -213,14 +213,14 @@
     border: @piledBorder;
     box-shadow: @piledBoxShadow;
   }
-  .ui.piled.segments:before,
-  .ui.piled.segment:before {
+  .ui.piled.segments::before,
+  .ui.piled.segment::before {
     transform: rotate(-@piledDegrees);
     top: 0;
     z-index: -2;
   }
-  .ui.piled.segments:after,
-  .ui.piled.segment:after {
+  .ui.piled.segments::after,
+  .ui.piled.segment::after {
     transform: rotate(@piledDegrees);
     top: 0;
     z-index: -1;
@@ -252,10 +252,10 @@
   .ui.stacked.segment {
     padding-bottom: @stackedPadding;
   }
-  .ui.stacked.segments:before,
-  .ui.stacked.segments:after,
-  .ui.stacked.segment:before,
-  .ui.stacked.segment:after {
+  .ui.stacked.segments::before,
+  .ui.stacked.segments::after,
+  .ui.stacked.segment::before,
+  .ui.stacked.segment::after {
     content: '';
     position: absolute;
     bottom: -(@stackedHeight / 2);
@@ -268,23 +268,23 @@
     height: @stackedHeight;
     visibility: visible;
   }
-  .ui.stacked.segments:before,
-  .ui.stacked.segment:before {
+  .ui.stacked.segments::before,
+  .ui.stacked.segment::before {
     display: none;
   }
 
   /* Add additional page */
-  .ui.tall.stacked.segments:before,
-  .ui.tall.stacked.segment:before {
+  .ui.tall.stacked.segments::before,
+  .ui.tall.stacked.segment::before {
     display: block;
     bottom: 0;
   }
   & when (@variationSegmentInverted) {
     /* Inverted */
-    .ui.stacked.inverted.segments:before,
-    .ui.stacked.inverted.segments:after,
-    .ui.stacked.inverted.segment:before,
-    .ui.stacked.inverted.segment:after {
+    .ui.stacked.inverted.segments::before,
+    .ui.stacked.inverted.segments::after,
+    .ui.stacked.inverted.segment::before,
+    .ui.stacked.inverted.segment::after {
       background-color: @subtleTransparentBlack;
       border-top: 1px solid @selectedBorderColor;
     }
@@ -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;
@@ -459,7 +460,9 @@
     /* Horizontal Segment */
     .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
       flex: 1 1 auto;
-      -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+      & when (@supportIE) {
+        -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+      }
     }
     .ui.horizontal.segments > .segment {
       margin: 0;
@@ -522,8 +525,8 @@
     user-select: none;
     transition: all 0s linear;
   }
-  .ui.loading.segments:before,
-  .ui.loading.segment:before {
+  .ui.loading.segments::before,
+  .ui.loading.segment::before {
     position: absolute;
     content: '';
     top: 0;
@@ -534,8 +537,8 @@
     border-radius: @borderRadius;
     z-index: @loaderDimmerZIndex;
   }
-  .ui.loading.segments:after,
-  .ui.loading.segment:after {
+  .ui.loading.segments::after,
+  .ui.loading.segment::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -581,7 +584,7 @@
          Clearing
   --------------------*/
 
-  .ui.clearing.segment:after {
+  .ui.clearing.segment::after {
     content: "";
     display: block;
     clear: both;
@@ -591,22 +594,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 +670,7 @@ each(@colors,{
   }
   & when (@variationSegmentAttached) {
     /* Attached */
-    .ui.inverted.attached.segment {
+    .ui.ui.inverted.attached.segment {
       border-color: @solidWhiteBorderColor;
     }
   }
@@ -676,8 +680,8 @@ each(@colors,{
     .ui.inverted.loading.segment {
       color: @invertedLoaderLineColor;
     }
-    .ui.inverted.loading.segments:before,
-    .ui.inverted.loading.segment:before {
+    .ui.inverted.loading.segments::before,
+    .ui.inverted.loading.segment::before {
       background: @loaderInvertedDimmerColor;
     }
   }
@@ -728,14 +732,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 +751,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 +765,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 +787,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
 --------------------*/