fomantic-ui 2.9.1-beta.2 → 2.9.1-beta.20

package/src/definitions/elements/segment.less

@@ -12,7 +12,7 @@
             Theme
 *******************************/
 
-@type    : 'element';
+@type : 'element';
 @element : 'segment';
 
 @import (multiple) '../../theme.config';
@@ -22,99 +22,98 @@
 *******************************/
 
 .ui.segment {
-  position: relative;
-  background: @background;
-  box-shadow: @boxShadow;
-  margin: @margin;
-  padding: @padding;
-  border-radius: @borderRadius;
-  border: @border;
+    position: relative;
+    background: @background;
+    box-shadow: @boxShadow;
+    margin: @margin;
+    padding: @padding;
+    border-radius: @borderRadius;
+    border: @border;
 }
 
 .ui.segment:first-child {
-  margin-top: 0;
+    margin-top: 0;
 }
 .ui.segment:last-child {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 & when (@variationSegmentVertical) {
-  /* Vertical */
-  .ui.vertical.segment {
-    margin: 0;
-    padding-left: 0;
-    padding-right: 0;
+    /* Vertical */
+    .ui.vertical.segment {
+        margin: 0;
+        padding-left: 0;
+        padding-right: 0;
 
-    background: none transparent;
-    border-radius: 0;
-    box-shadow: none;
-    border: none;
-    border-top: @borderWidth solid @borderColor;
-  }
-  .ui.vertical.segment:first-child {
-    border-top: none;
-  }
+        background: none transparent;
+        border-radius: 0;
+        box-shadow: none;
+        border: none;
+        border-top: @borderWidth solid @borderColor;
+    }
+    .ui.vertical.segment:first-child {
+        border-top: none;
+    }
 }
 
-
-/*-------------------
+/* -------------------
     Loose Coupling
---------------------*/
+-------------------- */
 & 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;
-  }
+    /* 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;
+    }
 }
 
 & when (@variationSegmentAttached) {
-  /* Label */
-  .ui[class*="bottom attached"].segment > [class*="top attached"].label {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-  .ui[class*="top attached"].segment > [class*="bottom attached"].label {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-  .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+    /* Label */
+    .ui[class*="bottom attached"].segment > [class*="top attached"].label {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    .ui[class*="top attached"].segment > [class*="bottom attached"].label {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+    .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 }
 
 /* Grid */
 .ui.page.grid.segment,
 .ui.grid > .row > .ui.segment.column,
 .ui.grid > .ui.segment.column {
-  padding-top: @pageGridMargin;
-  padding-bottom: @pageGridMargin;
+    padding-top: @pageGridMargin;
+    padding-bottom: @pageGridMargin;
 }
 .ui.grid.segment {
-  margin: @margin;
-  border-radius: @borderRadius;
+    margin: @margin;
+    border-radius: @borderRadius;
 }
 
 /* Table */
 .ui.basic.table.segment {
-  background: @background;
-  border: @border;
-  box-shadow: @boxShadow;
+    background: @background;
+    border: @border;
+    box-shadow: @boxShadow;
 }
 .ui[class*="very basic"].table.segment {
-  padding: @padding;
+    padding: @padding;
 }
 
 /* Tab */
 .ui.segment.tab:last-child {
-  margin-bottom: @verticalMargin;
+    margin-bottom: @verticalMargin;
 }
 
 /*******************************
@@ -122,796 +121,794 @@
 *******************************/
 
 & when (@variationSegmentPlaceholder) {
-  /*-------------------
-       Placeholder
-  --------------------*/
-
-  .ui.placeholder.segment {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-    max-width: initial;
-    animation: none;
-    overflow: visible;
-    padding: @placeholderPadding;
-    min-height: @placeholderMinHeight;
-    background: @placeholderBackground;
-    border-color: @placeholderBorderColor;
-    box-shadow: @placeholderBoxShadow;
-    &.tab {
-      display: none;
-      &.active {
+    /* -------------------
+         Placeholder
+    -------------------- */
+
+    .ui.placeholder.segment {
         display: flex;
-      }
-    }
-  }
-
-  .ui.placeholder.segment .button,
-  .ui.placeholder.segment textarea {
-    display: block;
-  }
-  .ui.placeholder.segment .field,
-  .ui.placeholder.segment textarea,
-  .ui.placeholder.segment > .ui.input,
-  .ui.placeholder.segment .button {
-    max-width: @placeholderContentMaxWidth;
-    margin-left: auto;
-    margin-right: auto;
-  }
-  .ui.placeholder.segment .column .button,
-  .ui.placeholder.segment .column .field,
-  .ui.placeholder.segment .column textarea,
-  .ui.placeholder.segment .column > .ui.input {
-    max-width: @placeholderContentMaxWidth;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .ui.placeholder.segment > .inline  {
-    align-self: center;
-  }
-  .ui.placeholder.segment > .inline > .button {
-    display: inline-block;
-    width: auto;
-    margin: @placeholderContentInlineButtonMargin;
-  }
-  .ui.placeholder.segment > .inline > .button:last-child {
-    margin-right: 0;
-  }
+        flex-direction: column;
+        justify-content: center;
+        align-items: stretch;
+        max-width: initial;
+        animation: none;
+        overflow: visible;
+        padding: @placeholderPadding;
+        min-height: @placeholderMinHeight;
+        background: @placeholderBackground;
+        border-color: @placeholderBorderColor;
+        box-shadow: @placeholderBoxShadow;
+        &.tab {
+            display: none;
+            &.active {
+                display: flex;
+            }
+        }
+    }
+
+    .ui.placeholder.segment .button,
+    .ui.placeholder.segment textarea {
+        display: block;
+    }
+    .ui.placeholder.segment .field,
+    .ui.placeholder.segment textarea,
+    .ui.placeholder.segment > .ui.input,
+    .ui.placeholder.segment .button {
+        max-width: @placeholderContentMaxWidth;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .ui.placeholder.segment .column .button,
+    .ui.placeholder.segment .column .field,
+    .ui.placeholder.segment .column textarea,
+    .ui.placeholder.segment .column > .ui.input {
+        max-width: @placeholderContentMaxWidth;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .ui.placeholder.segment > .inline {
+        align-self: center;
+    }
+    .ui.placeholder.segment > .inline > .button {
+        display: inline-block;
+        width: auto;
+        margin: @placeholderContentInlineButtonMargin;
+    }
+    .ui.placeholder.segment > .inline > .button:last-child {
+        margin-right: 0;
+    }
 }
 
 & when (@variationSegmentPiled) {
-  /*-------------------
-          Piled
-  --------------------*/
-
-  .ui.piled.segments,
-  .ui.piled.segment {
-    margin: @piledMargin 0;
-    box-shadow: @piledBoxShadow;
-    z-index: @piledZIndex;
-  }
-  .ui.piled.segment:first-child {
-    margin-top: 0;
-  }
-  .ui.piled.segment:last-child {
-    margin-bottom: 0;
-  }
-  .ui.piled.segments::after,
-  .ui.piled.segments::before,
-  .ui.piled.segment::after,
-  .ui.piled.segment::before {
-    background-color: @white;
-    visibility: visible;
-    content: '';
-    display: block;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    width: 100%;
-    border: @piledBorder;
-    box-shadow: @piledBoxShadow;
-  }
-  .ui.piled.segments::before,
-  .ui.piled.segment::before {
-    transform: rotate(-@piledDegrees);
-    top: 0;
-    z-index: -2;
-  }
-  .ui.piled.segments::after,
-  .ui.piled.segment::after {
-    transform: rotate(@piledDegrees);
-    top: 0;
-    z-index: -1;
-  }
-  & when (@variationSegmentAttached) {
-    /* Piled Attached */
-    .ui[class*="top attached"].piled.segment {
-      margin-top: @piledMargin;
-      margin-bottom: 0;
-    }
-    .ui.piled.segment[class*="top attached"]:first-child {
-      margin-top: 0;
-    }
-    .ui.piled.segment[class*="bottom attached"] {
-      margin-top: 0;
-      margin-bottom: @piledMargin;
-    }
-    .ui.piled.segment[class*="bottom attached"]:last-child {
-      margin-bottom: 0;
-    }
-  }
+    /* -------------------
+            Piled
+    -------------------- */
+
+    .ui.piled.segments,
+    .ui.piled.segment {
+        margin: @piledMargin 0;
+        box-shadow: @piledBoxShadow;
+        z-index: @piledZIndex;
+    }
+    .ui.piled.segment:first-child {
+        margin-top: 0;
+    }
+    .ui.piled.segment:last-child {
+        margin-bottom: 0;
+    }
+    .ui.piled.segments::after,
+    .ui.piled.segments::before,
+    .ui.piled.segment::after,
+    .ui.piled.segment::before {
+        background-color: @white;
+        visibility: visible;
+        content: '';
+        display: block;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        width: 100%;
+        border: @piledBorder;
+        box-shadow: @piledBoxShadow;
+    }
+    .ui.piled.segments::before,
+    .ui.piled.segment::before {
+        transform: rotate(-@piledDegrees);
+        top: 0;
+        z-index: -2;
+    }
+    .ui.piled.segments::after,
+    .ui.piled.segment::after {
+        transform: rotate(@piledDegrees);
+        top: 0;
+        z-index: -1;
+    }
+    & when (@variationSegmentAttached) {
+        /* Piled Attached */
+        .ui[class*="top attached"].piled.segment {
+            margin-top: @piledMargin;
+            margin-bottom: 0;
+        }
+        .ui.piled.segment[class*="top attached"]:first-child {
+            margin-top: 0;
+        }
+        .ui.piled.segment[class*="bottom attached"] {
+            margin-top: 0;
+            margin-bottom: @piledMargin;
+        }
+        .ui.piled.segment[class*="bottom attached"]:last-child {
+            margin-bottom: 0;
+        }
+    }
 }
 
 & when (@variationSegmentStacked) {
-  /*-------------------
-         Stacked
-  --------------------*/
-
-  .ui.stacked.segment {
-    padding-bottom: @stackedPadding;
-  }
-  .ui.stacked.segments::before,
-  .ui.stacked.segments::after,
-  .ui.stacked.segment::before,
-  .ui.stacked.segment::after {
-    content: '';
-    position: absolute;
-    bottom: -(@stackedHeight / 2);
-    left: 0;
-
-    border-top: 1px solid @borderColor;
-    background: @stackedPageBackground;
-
-    width: 100%;
-    height: @stackedHeight;
-    visibility: visible;
-  }
-  .ui.stacked.segments::before,
-  .ui.stacked.segment::before {
-    display: none;
-  }
-
-  /* Add additional page */
-  .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 {
-      background-color: @subtleTransparentBlack;
-      border-top: 1px solid @selectedBorderColor;
-    }
-  }
+    /* -------------------
+           Stacked
+    -------------------- */
+
+    .ui.stacked.segment {
+        padding-bottom: @stackedPadding;
+    }
+    .ui.stacked.segments::before,
+    .ui.stacked.segments::after,
+    .ui.stacked.segment::before,
+    .ui.stacked.segment::after {
+        content: '';
+        position: absolute;
+        bottom: -(@stackedHeight / 2);
+        left: 0;
+
+        border-top: 1px solid @borderColor;
+        background: @stackedPageBackground;
+
+        width: 100%;
+        height: @stackedHeight;
+        visibility: visible;
+    }
+    .ui.stacked.segments::before,
+    .ui.stacked.segment::before {
+        display: none;
+    }
+
+    /* Add additional page */
+    .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 {
+            background-color: @subtleTransparentBlack;
+            border-top: 1px solid @selectedBorderColor;
+        }
+    }
 }
 
 & when (@variationSegmentPadded) {
-  /*-------------------
-         Padded
-  --------------------*/
+    /* -------------------
+           Padded
+    -------------------- */
 
-  .ui.padded.segment {
-    padding: @paddedSegmentPadding;
-  }
-  & when (@variationSegmentVeryPadded) {
-    .ui[class*="very padded"].segment {
-      padding: @veryPaddedSegmentPadding;
+    .ui.padded.segment {
+        padding: @paddedSegmentPadding;
+    }
+    & when (@variationSegmentVeryPadded) {
+        .ui[class*="very padded"].segment {
+            padding: @veryPaddedSegmentPadding;
+        }
     }
-  }
 
-  & when (@variationSegmentVertical) {
-    /* Padded vertical */
-    .ui.padded.segment.vertical.segment,
-    .ui[class*="very padded"].vertical.segment {
-      padding-left: 0;
-      padding-right: 0;
+    & when (@variationSegmentVertical) {
+        /* Padded vertical */
+        .ui.padded.segment.vertical.segment,
+        .ui[class*="very padded"].vertical.segment {
+            padding-left: 0;
+            padding-right: 0;
+        }
     }
-  }
 }
 
 & when (@variationSegmentCompact) {
-  /*-------------------
-         Compact
-  --------------------*/
+    /* -------------------
+           Compact
+    -------------------- */
 
-  .ui.compact.segment {
-    display: table;
-  }
+    .ui.compact.segment {
+        display: table;
+    }
 
-  /* Compact Group */
-  .ui.compact.segments {
-    display: inline-flex;
-  }
-  .ui.compact.segments .segment,
-  .ui.segments .compact.segment {
-    display: block;
-    flex: 0 1 auto;
-  }
+    /* Compact Group */
+    .ui.compact.segments {
+        display: inline-flex;
+    }
+    .ui.compact.segments .segment,
+    .ui.segments .compact.segment {
+        display: block;
+        flex: 0 1 auto;
+    }
 }
 
 & when (@variationSegmentCircular) {
-  /*-------------------
-         Circular
-  --------------------*/
+    /* -------------------
+           Circular
+    -------------------- */
 
-  .ui.circular.segment {
-    display: table-cell;
-    padding: @circularPadding;
-    text-align: center;
-    vertical-align: middle;
-    border-radius: 500em;
-  }
+    .ui.circular.segment {
+        display: table-cell;
+        padding: @circularPadding;
+        text-align: center;
+        vertical-align: middle;
+        border-radius: 500em;
+    }
 }
 
 & when (@variationSegmentRaised) {
-  /*-------------------
-         Raised
-  --------------------*/
+    /* -------------------
+           Raised
+    -------------------- */
 
-  .ui.raised.raised.segments,
-  .ui.raised.raised.segment {
-    box-shadow: @raisedBoxShadow;
-  }
+    .ui.raised.raised.segments,
+    .ui.raised.raised.segment {
+        box-shadow: @raisedBoxShadow;
+    }
 }
 
 & when (@variationSegmentGroups) {
-  /*******************************
-              Groups
-  *******************************/
-
-  /* Group */
-  .ui.segments {
-    flex-direction: column;
-    position: relative;
-    margin: @groupedMargin;
-    border: @groupedBorder;
-    box-shadow: @groupedBoxShadow;
-    border-radius: @groupedBorderRadius;
-  }
-  .ui.segments:first-child {
-    margin-top: 0;
-  }
-  .ui.segments:last-child {
-    margin-bottom: 0;
-  }
-
-
-  /* Nested Segment */
-  .ui.segments > .segment {
-    top: 0;
-    bottom: 0;
-    border-radius: 0;
-    margin: @groupedSegmentMargin;
-    width: @groupedSegmentWidth;
-    box-shadow: @groupedSegmentBoxShadow;
-    border: @groupedSegmentBorder;
-    border-top: @groupedSegmentDivider;
-  }
-
-  .ui.segments:not(.horizontal) > .segment:first-child {
-    top: @attachedTopOffset;
-    bottom: 0;
-    border-top: none;
-    margin-top: 0;
-    margin-bottom: 0;
-    border-radius: @borderRadius @borderRadius 0 0;
-  }
-
-  /* Bottom */
-  .ui.segments:not(.horizontal) > .segment:last-child {
-    top: @attachedBottomOffset;
-    bottom: 0;
-    margin-top: 0;
-    margin-bottom: 0;
-    box-shadow: @attachedBottomBoxShadow;
-    border-radius: 0 0 @borderRadius @borderRadius;
-  }
-
-  /* Only */
-  .ui.segments:not(.horizontal) > .segment:only-child {
-    border-radius: @borderRadius;
-  }
-
-
-  /* Nested Group */
-  .ui.segments > .ui.segments {
-    border-top: @groupedSegmentDivider;
-    margin: @nestedGroupMargin;
-  }
-  .ui.segments > .segments:first-child {
-    border-top: none;
-  }
-  .ui.segments > .segment + .segments:not(.horizontal) {
-    margin-top: 0;
-  }
+    /*******************************
+                Groups
+    *******************************/
+
+    /* Group */
+    .ui.segments {
+        flex-direction: column;
+        position: relative;
+        margin: @groupedMargin;
+        border: @groupedBorder;
+        box-shadow: @groupedBoxShadow;
+        border-radius: @groupedBorderRadius;
+    }
+    .ui.segments:first-child {
+        margin-top: 0;
+    }
+    .ui.segments:last-child {
+        margin-bottom: 0;
+    }
+
+    /* Nested Segment */
+    .ui.segments > .segment {
+        top: 0;
+        bottom: 0;
+        border-radius: 0;
+        margin: @groupedSegmentMargin;
+        width: @groupedSegmentWidth;
+        box-shadow: @groupedSegmentBoxShadow;
+        border: @groupedSegmentBorder;
+        border-top: @groupedSegmentDivider;
+    }
+
+    .ui.segments:not(.horizontal) > .segment:first-child {
+        top: @attachedTopOffset;
+        bottom: 0;
+        border-top: none;
+        margin-top: 0;
+        margin-bottom: 0;
+        border-radius: @borderRadius @borderRadius 0 0;
+    }
+
+    /* Bottom */
+    .ui.segments:not(.horizontal) > .segment:last-child {
+        top: @attachedBottomOffset;
+        bottom: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+        box-shadow: @attachedBottomBoxShadow;
+        border-radius: 0 0 @borderRadius @borderRadius;
+    }
+
+    /* Only */
+    .ui.segments:not(.horizontal) > .segment:only-child {
+        border-radius: @borderRadius;
+    }
+
+    /* Nested Group */
+    .ui.segments > .ui.segments {
+        border-top: @groupedSegmentDivider;
+        margin: @nestedGroupMargin;
+    }
+    .ui.segments > .segments:first-child {
+        border-top: none;
+    }
+    .ui.segments > .segment + .segments:not(.horizontal) {
+        margin-top: 0;
+    }
+
+    & when (@variationSegmentHorizontal) {
+        /* Horizontal Group */
+        .ui.horizontal.segments {
+            display: flex;
+            flex-direction: row;
+            background-color: transparent;
+            padding: 0;
+            box-shadow: @groupedBoxShadow;
+            margin: @groupedMargin;
+            border-radius: @groupedBorderRadius;
+            border: @groupedBorder;
+        }
+        .ui.stackable.horizontal.segments {
+            flex-wrap: wrap;
+        }
 
-  & when (@variationSegmentHorizontal) {
-    /* Horizontal Group */
-    .ui.horizontal.segments {
-      display: flex;
-      flex-direction: row;
-      background-color: transparent;
-      padding: 0;
-      box-shadow: @groupedBoxShadow;
-      margin: @groupedMargin;
-      border-radius: @groupedBorderRadius;
-      border: @groupedBorder;
-    }
-    .ui.stackable.horizontal.segments {
-      flex-wrap: wrap;
-    }
+        /* Nested Horizontal Group */
+        .ui.segments > .horizontal.segments {
+            margin: 0;
+            background-color: transparent;
+            border-radius: 0;
+            border: none;
+            box-shadow: none;
+            border-top: @groupedSegmentDivider;
+        }
 
-    /* Nested Horizontal Group */
-    .ui.segments > .horizontal.segments {
-      margin: 0;
-      background-color: transparent;
-      border-radius: 0;
-      border: none;
-      box-shadow: none;
-      border-top: @groupedSegmentDivider;
-    }
+        /* Horizontal Segment */
+        .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
+            flex: 1 1 auto;
+            & when (@supportIE) {
+                -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+            }
+        }
+        .ui.horizontal.segments > .segment {
+            margin: 0;
+            min-width: 0;
+            border-radius: 0;
+            border: none;
+            box-shadow: none;
+            border-left: @borderWidth solid @borderColor;
+        }
 
-    /* Horizontal Segment */
-    .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
-      flex: 1 1 auto;
-      & when (@supportIE) {
-        -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
-      }
-    }
-    .ui.horizontal.segments > .segment {
-      margin: 0;
-      min-width: 0;
-      border-radius: 0;
-      border: none;
-      box-shadow: none;
-      border-left: @borderWidth solid @borderColor;
-    }
+        /* Border Fixes */
+        .ui.segments > .horizontal.segments:first-child {
+            border-top: none;
+        }
+        .ui.horizontal.segments:not(.stackable) > .segment:first-child {
+            border-left: none;
+        }
+        .ui.horizontal.segments > .segment:first-child {
+            border-radius: @borderRadius 0 0 @borderRadius;
+        }
+        .ui.horizontal.segments > .segment:last-child {
+            border-radius: 0 @borderRadius @borderRadius 0;
+        }
 
-    /* Border Fixes */
-    .ui.segments > .horizontal.segments:first-child {
-      border-top: none;
-    }
-    .ui.horizontal.segments:not(.stackable) > .segment:first-child {
-      border-left: none;
-    }
-    .ui.horizontal.segments > .segment:first-child {
-      border-radius: @borderRadius 0 0 @borderRadius;
-    }
-    .ui.horizontal.segments > .segment:last-child {
-      border-radius: 0 @borderRadius @borderRadius 0;
-    }
-    /* Equal Width */
-    .ui[class*="equal width"].horizontal.segments > .segment {
-      width: 100%;
+        /* Equal Width */
+        .ui[class*="equal width"].horizontal.segments > .segment {
+            width: 100%;
+        }
     }
-  }
 }
 
-
 /*******************************
             States
 *******************************/
 
 & when (@variationSegmentDisabled) {
-  /*--------------
-      Disabled
-  ---------------*/
+    /* --------------
+        Disabled
+    --------------- */
 
-  .ui.disabled.segments,
-  .ui.disabled.segment {
-    opacity: @disabledOpacity;
-    color: @disabledTextColor;
-    pointer-events: none;
-    user-select: none;
-  }
+    .ui.disabled.segments,
+    .ui.disabled.segment {
+        opacity: @disabledOpacity;
+        color: @disabledTextColor;
+        pointer-events: none;
+        user-select: none;
+    }
 }
 
 & when (@variationSegmentLoading) {
-  /*--------------
-      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: '';
-    top: 0;
-    left: 0;
-    background: @loaderDimmerColor;
-    width: 100%;
-    height: 100%;
-    border-radius: @borderRadius;
-    z-index: @loaderDimmerZIndex;
-  }
-  .ui.loading.segments::after,
-  .ui.loading.segment::after {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
-
-    margin: @loaderMargin;
-    width: @loaderSize;
-    height: @loaderSize;
-
-    animation: loader @loaderSpeed infinite linear;
-    border: @loaderLineWidth solid @loaderLineColor;
-    border-radius: @circularRadius;
-
-    box-shadow: 0 0 0 1px transparent;
-    visibility: visible;
-    z-index: @loaderLineZIndex;
-  }
+    /* --------------
+        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: '';
+        top: 0;
+        left: 0;
+        background: @loaderDimmerColor;
+        width: 100%;
+        height: 100%;
+        border-radius: @borderRadius;
+        z-index: @loaderDimmerZIndex;
+    }
+    .ui.loading.segments::after,
+    .ui.loading.segment::after {
+        position: absolute;
+        content: '';
+        top: 50%;
+        left: 50%;
+
+        margin: @loaderMargin;
+        width: @loaderSize;
+        height: @loaderSize;
+
+        animation: loader @loaderSpeed infinite linear;
+        border: @loaderLineWidth solid @loaderLineColor;
+        border-radius: @circularRadius;
+
+        box-shadow: 0 0 0 1px transparent;
+        visibility: visible;
+        z-index: @loaderLineZIndex;
+    }
 }
 
-
-
 /*******************************
            Variations
 *******************************/
 
 & when (@variationSegmentBasic) {
-  /*-------------------
-         Basic
-  --------------------*/
+    /* -------------------
+           Basic
+    -------------------- */
 
-  .ui.basic.segment,
-  .ui.segments .ui.basic.segment,
-  .ui.basic.segments {
-    background: @basicBackground;
-    box-shadow: @basicBoxShadow;
-    border: @basicBorder;
-    border-radius: @basicBorderRadius;
-  }
+    .ui.basic.segment,
+    .ui.segments .ui.basic.segment,
+    .ui.basic.segments {
+        background: @basicBackground;
+        box-shadow: @basicBoxShadow;
+        border: @basicBorder;
+        border-radius: @basicBorderRadius;
+    }
 }
 
 & when (@variationSegmentClearing) {
-  /*-------------------
-         Clearing
-  --------------------*/
+    /* -------------------
+           Clearing
+    -------------------- */
 
-  .ui.clearing.segment::after {
-    content: "";
-    display: block;
-    clear: both;
-  }
+    .ui.clearing.segment::after {
+        content: "";
+        display: block;
+        clear: both;
+    }
 }
 
-/*-------------------
+/* -------------------
        Colors
---------------------*/
+-------------------- */
 & 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;
+    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) {
-  /*-------------------
-         Aligned
-  --------------------*/
+    /* -------------------
+           Aligned
+    -------------------- */
 
-  .ui[class*="left aligned"].segment {
-    text-align: left;
-  }
-  .ui[class*="right aligned"].segment {
-    text-align: right;
-  }
-  .ui[class*="center aligned"].segment {
-    text-align: center;
-  }
+    .ui[class*="left aligned"].segment {
+        text-align: left;
+    }
+    .ui[class*="right aligned"].segment {
+        text-align: right;
+    }
+    .ui[class*="center aligned"].segment {
+        text-align: center;
+    }
 }
 
 & when (@variationSegmentFloating) {
-  /*-------------------
-         Floated
-  --------------------*/
+    /* -------------------
+           Floated
+    -------------------- */
 
-  .ui.floated.segment,
-  .ui[class*="left floated"].segment {
-    float: left;
-    margin-right: @floatedDistance;
-  }
-  .ui[class*="right floated"].segment {
-    float: right;
-    margin-left: @floatedDistance;
-  }
+    .ui.floated.segment,
+    .ui[class*="left floated"].segment {
+        float: left;
+        margin-right: @floatedDistance;
+    }
+    .ui[class*="right floated"].segment {
+        float: right;
+        margin-left: @floatedDistance;
+    }
 }
 
 & when (@variationSegmentInverted) {
-  /*-------------------
-        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;
-    color: @invertedTextColor;
-  }
-
-  /* Nested */
-  .ui.inverted.segment .segment {
-    color: @textColor;
-  }
-  .ui.inverted.segment .inverted.segment {
-    color: @invertedTextColor;
-  }
-  & when (@variationSegmentAttached) {
-    /* Attached */
-    .ui.ui.inverted.attached.segment {
-      border-color: @solidWhiteBorderColor;
-    }
-  }
-  & 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;
-    }
-  }
-}
-
-/*-------------------
+    /* -------------------
+          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;
+        color: @invertedTextColor;
+    }
+
+    /* Nested */
+    .ui.inverted.segment .segment {
+        color: @textColor;
+    }
+    .ui.inverted.segment .inverted.segment {
+        color: @invertedTextColor;
+    }
+    & when (@variationSegmentAttached) {
+        /* Attached */
+        .ui.ui.inverted.attached.segment {
+            border-color: @solidWhiteBorderColor;
+        }
+    }
+    & 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;
+        }
+    }
+}
+
+/* -------------------
      Emphasis
---------------------*/
+-------------------- */
 & when (@variationSegmentSecondary) {
-  /* Secondary */
-  .ui.secondary.segment {
-    background: @secondaryBackground;
-    color: @secondaryColor;
-  }
-  & when (@variationSegmentInverted) {
-    .ui.secondary.inverted.segment {
-      background: @secondaryInvertedBackground;
-      color: @secondaryInvertedColor;
+    /* Secondary */
+    .ui.secondary.segment {
+        background: @secondaryBackground;
+        color: @secondaryColor;
+    }
+    & when (@variationSegmentInverted) {
+        .ui.secondary.inverted.segment {
+            background: @secondaryInvertedBackground;
+            color: @secondaryInvertedColor;
+        }
     }
-  }
 }
 
 & when (@variationSegmentTertiary) {
-  /* Tertiary */
-  .ui.tertiary.segment {
-    background: @tertiaryBackground;
-    color: @tertiaryColor;
-  }
-  & when (@variationSegmentInverted) {
-    .ui.tertiary.inverted.segment {
-      background: @tertiaryInvertedBackground;
-      color: @tertiaryInvertedColor;
+    /* Tertiary */
+    .ui.tertiary.segment {
+        background: @tertiaryBackground;
+        color: @tertiaryColor;
+    }
+    & when (@variationSegmentInverted) {
+        .ui.tertiary.inverted.segment {
+            background: @tertiaryInvertedBackground;
+            color: @tertiaryInvertedColor;
+        }
     }
-  }
 }
 
 & when (@variationSegmentAttached) {
-  /*-------------------
-        Attached
-  --------------------*/
-
-  /* Middle */
-  .ui.attached.segment {
-    top: 0;
-    bottom: 0;
-    border-radius: 0;
-    margin: 0 @attachedHorizontalOffset;
-    width: @attachedWidth;
-    max-width: @attachedWidth;
-    box-shadow: @attachedBoxShadow;
-    &:not(.basic) {
-      border: @attachedBorder;
-    }
-  }
-  .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top) {
-    border-top: none;
-  }
-
-  /* Top */
-  .ui.segment[class*="top attached"] {
-    bottom: 0;
-    margin-bottom: 0;
-    top: @attachedTopOffset;
-    margin-top: @verticalMargin;
-    border-radius: @borderRadius @borderRadius 0 0;
-  }
-  .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"] {
-    bottom: 0;
-    margin-top: 0;
-    top: @attachedBottomOffset;
-    margin-bottom: @verticalMargin;
-    box-shadow: @attachedBottomBoxShadow;
-    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;
-  }
-}
-
-& when (@variationSegmentFitted) {
-  /*--------------
-       Fitted
-  ---------------*/
-
-  .ui.fitted.segment:not(.horizontally) {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-  .ui.fitted.segment:not(.vertically) {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
-& 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;
-      }
+    /* -------------------
+          Attached
+    -------------------- */
+
+    /* Middle */
+    .ui.attached.segment {
+        top: 0;
+        bottom: 0;
+        border-radius: 0;
+        margin: 0 @attachedHorizontalOffset;
+        width: @attachedWidth;
+        max-width: @attachedWidth;
+        box-shadow: @attachedBoxShadow;
+        &:not(.basic) {
+            border: @attachedBorder;
+        }
     }
-    .ui.scrolling.segment {
-      max-height: @scrollingMobileMaxHeight;
+    .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top) {
+        border-top: none;
+    }
+
+    /* Top */
+    .ui.segment[class*="top attached"] {
+        bottom: 0;
+        margin-bottom: 0;
+        top: @attachedTopOffset;
+        margin-top: @verticalMargin;
+        border-radius: @borderRadius @borderRadius 0 0;
     }
-    & when (@variationSegmentScrollingLong) {
-      .ui.scrolling.segment.long {
-        max-height: @scrollingMobileMaxHeight * 2;
-      }
+    .ui.segment[class*="top attached"]:first-child {
+        margin-top: 0;
     }
-    & when (@variationSegmentScrollingVeryLong) {
-      .ui.scrolling.segment[class*="very long"] {
-        max-height: @scrollingMobileMaxHeight * 3;
-      }
+    .ui.tab.segment[class*="top attached"]:first-child {
+        margin-top: @verticalMargin;
     }
-  }
 
-  @media only screen and (min-width: @tabletBreakpoint) {
-    & when (@variationSegmentScrollingShort) {
-      .ui.scrolling.segment.short {
-        max-height: @scrollingTabletMaxHeight * 0.75;
-      }
+    /* Bottom */
+    .ui.segment[class*="bottom attached"] {
+        bottom: 0;
+        margin-top: 0;
+        top: @attachedBottomOffset;
+        margin-bottom: @verticalMargin;
+        box-shadow: @attachedBottomBoxShadow;
+        border-radius: 0 0 @borderRadius @borderRadius;
     }
-    & when (@variationSegmentScrollingVeryShort) {
-      .ui.scrolling.segment[class*="very short"] {
-        max-height: @scrollingTabletMaxHeight * 0.5;
-      }
+    .ui.segment[class*="bottom attached"]:last-child {
+        margin-bottom: 0;
     }
-    .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.tab.segment[class*="bottom attached"]:last-child {
+        margin-bottom: @verticalMargin;
     }
-    .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;
-      }
+}
+
+& when (@variationSegmentFitted) {
+    /* --------------
+         Fitted
+    --------------- */
+
+    .ui.fitted.segment:not(.horizontally) {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+    .ui.fitted.segment:not(.vertically) {
+        padding-left: 0;
+        padding-right: 0;
     }
+}
+
+& when (@variationSegmentScrolling) {
+    /* --------------
+      Scrolling
+    --------------- */
     .ui.scrolling.segment {
-      max-height: @scrollingWidescreenMaxHeight;
+        overflow: auto;
+        overscroll-behavior: @overscrollBehavior;
+    }
+    @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;
+            }
+        }
     }
-    & when (@variationSegmentScrollingLong) {
-      .ui.scrolling.segment.long {
-        max-height: @scrollingWidescreenMaxHeight * 2;
-      }
+    @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;
+            }
+        }
     }
-    & when (@variationSegmentScrollingVeryLong) {
-      .ui.scrolling.segment[class*="very long"] {
-        max-height: @scrollingWidescreenMaxHeight * 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
---------------------*/
+-------------------- */
 
 .ui.segments .segment,
 .ui.segment {
-  font-size: @medium;
+    font-size: @medium;
 }
 & when not (@variationSegmentSizes = false) {
-  each(@variationSegmentSizes, {
-    @s: @@value;
-    .ui.@{value}.segments .segment,
-    .ui.@{value}.segment {
-      font-size: @s;
-    }
-  })
+    each(@variationSegmentSizes, {
+        @s: @@value;
+        .ui.@{value}.segments .segment,
+        .ui.@{value}.segment {
+            font-size: @s;
+        }
+    })
 }
 
 .loadUIOverrides();