:star:

1 files changed, 774 insertions, 0 deletions

diff --git a/semantic/src/definitions/elements/segment.less b/semantic/src/definitions/elements/segment.less
new file mode 100644
index 0000000..ec5e19b
--- /dev/null
+++ b/semantic/src/definitions/elements/segment.less
@@ -0,0 +1,774 @@
+/*!
+ * # Fomantic-UI - Segment
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'segment';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Segment
+*******************************/
+
+.ui.segment {
+  position: relative;
+  background: @background;
+  box-shadow: @boxShadow;
+  margin: @margin;
+  padding: @padding;
+  border-radius: @borderRadius;
+  border: @border;
+}
+
+.ui.segment:first-child {
+  margin-top: 0;
+}
+.ui.segment:last-child {
+  margin-bottom: 0;
+}
+
+& when (@variationSegmentVertical) {
+  /* Vertical */
+  .ui.vertical.segment {
+    margin: 0;
+    padding-left: 0;
+    padding-right: 0;
+
+    background: none transparent;
+    border-radius: 0;
+    box-shadow: none;
+    border: none;
+    border-bottom: @borderWidth solid @borderColor;
+  }
+  .ui.vertical.segment:last-child {
+    border-bottom: none;
+  }
+}
+
+
+/*-------------------
+    Loose Coupling
+--------------------*/
+& when (@variationSegmentInverted) {
+  /* 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;
+  }
+}
+
+/* Grid */
+.ui.page.grid.segment,
+.ui.grid > .row > .ui.segment.column,
+.ui.grid > .ui.segment.column {
+  padding-top: @pageGridMargin;
+  padding-bottom: @pageGridMargin;
+}
+.ui.grid.segment {
+  margin: @margin;
+  border-radius: @borderRadius;
+}
+
+/* Table */
+.ui.basic.table.segment {
+  background: @background;
+  border: @border;
+  box-shadow: @boxShadow;
+}
+.ui[class*="very basic"].table.segment {
+  padding: @padding;
+}
+
+/* Tab */
+.ui.segment.tab:last-child {
+  margin-bottom: @verticalMargin;
+}
+
+/*******************************
+             Types
+*******************************/
+
+& 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;
+  }
+
+  .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;
+    }
+  }
+}
+
+& 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;
+    }
+  }
+}
+
+& when (@variationSegmentPadded) {
+  /*-------------------
+         Padded
+  --------------------*/
+
+  .ui.padded.segment {
+    padding: @paddedSegmentPadding;
+  }
+
+  .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 (@variationSegmentCompact) {
+  /*-------------------
+         Compact
+  --------------------*/
+
+  .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;
+  }
+}
+
+& when (@variationSegmentCircular) {
+  /*-------------------
+         Circular
+  --------------------*/
+
+  .ui.circular.segment {
+    display: table-cell;
+    padding: @circularPadding;
+    text-align: center;
+    vertical-align: middle;
+    border-radius: 500em;
+  }
+}
+
+& when (@variationSegmentRaised) {
+  /*-------------------
+         Raised
+  --------------------*/
+
+  .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;
+  }
+
+  & when (@variationSegmentHorizontal) {
+    /* Horizontal Group */
+    .ui.horizontal.segments {
+      display: flex;
+      flex-direction: row;
+      background-color: transparent;
+      padding: 0;
+      box-shadow: @boxShadow;
+      margin: @margin;
+      border-radius: @borderRadius;
+      border: @border;
+    }
+    .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;
+    }
+
+    /* Horizontal Segment */
+    .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
+      flex: 1 1 auto;
+      -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;
+    }
+  }
+}
+
+
+/*******************************
+            States
+*******************************/
+
+& when (@variationSegmentDisabled) {
+  /*--------------
+      Disabled
+  ---------------*/
+
+  .ui.disabled.segment {
+    opacity: @disabledOpacity;
+    color: @disabledTextColor;
+  }
+}
+
+& when (@variationSegmentLoading) {
+  /*--------------
+      Loading
+  ---------------*/
+
+  .ui.loading.segment {
+    position: relative;
+    cursor: default;
+    pointer-events: none;
+    text-shadow: none !important;
+    transition: all 0s linear;
+  }
+  .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.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
+  --------------------*/
+
+  .ui.basic.segment,
+  .ui.segments .ui.basic.segment,
+  .ui.basic.segments {
+    background: @basicBackground;
+    box-shadow: @basicBoxShadow;
+    border: @basicBorder;
+    border-radius: @basicBorderRadius;
+  }
+}
+
+& when (@variationSegmentClearing) {
+  /*-------------------
+         Clearing
+  --------------------*/
+
+  .ui.clearing.segment:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}
+
+/*-------------------
+       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 (@variationSegmentAligned) {
+  /*-------------------
+         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;
+  }
+}
+
+& when (@variationSegmentFloating) {
+  /*-------------------
+         Floated
+  --------------------*/
+
+  .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.segment {
+    border: none;
+    box-shadow: none;
+  }
+  .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.inverted.attached.segment {
+      border-color: @solidWhiteBorderColor;
+    }
+  }
+  & when (@variationSegmentLoading) {
+    /* Loading */
+    .ui.inverted.loading.segment {
+      color: @invertedLoaderLineColor;
+    }
+    .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;
+    }
+  }
+}
+
+& when (@variationSegmentTertiary) {
+  /* 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;
+    border: @attachedBorder;
+  }
+  .ui.attached:not(.message) + .ui.attached.segment:not(.top) {
+    border-top: none;
+  }
+
+  /* Top */
+  .ui[class*="top attached"].segment {
+    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;
+  }
+
+  /* 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: @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;
+  }
+}
+
+/*-------------------
+        Size
+--------------------*/
+
+.ui.segments .segment,
+.ui.segment {
+  font-size: @medium;
+}
+& when not (@variationSegmentSizes = false) {
+  each(@variationSegmentSizes, {
+    @s: @@value;
+    .ui.@{value}.segments .segment,
+    .ui.@{value}.segment {
+      font-size: @s;
+    }
+  })
+}
+
+.loadUIOverrides();