Segments now use border not box-shadow, add new plural variations #2411

RELEASE-NOTES.md

@@ -53,7 +53,7 @@
 - **Input** - All `input` types use `flexbox` for layout
 - **Sidebar** - iOS will now correctly report `scrollTop` values for `document` or `body` when using a sidebar. Chrome on iOS no longer has issues with fixed content not sticking immediately when using a sidebar.
 - **Shapes** - Shapes now correctly adjusts for margin on `sides`
-- **Steps** - Steps now use `flexbox`, the default horizontal theme has the active element point downward now instead of to the right.
+- **Steps** - Steps now use `flexbox`, fluid steps now center content inside each step
 - **Steps** - Steps no longer need `item count` and will automatically divide evenly
 - **Transition** - Transition code has been optimized to increase performance. 100% improvement on first animation, and 40% improvement on subsequent animations.
 - **Visibility** - Using `.visibility({ type: 'fixed'})` will now automatically add a placeholder element which will swap places with an element when it is attached to the viewport. This should make fixed content drastically simpler.
@@ -239,6 +239,7 @@
 - **Sidebar** - Top/Bottom sidebar will now show scroll bars correctly when taller than 100% page height
 - **Sidebar** - Fixed bug where having a `style[title]` in page causing page not to be pushed correctly
 - **Sidebar** - Last menu item now has a border when sidebar and menu are used together
+- **Segment** - Segment groups can now be `raised` or `piled` or `stacked`
 - **Search** - Fixed `category search` not applying active styles correctly to category names
 - **Search** - Fixed `onSelect` not returning the correct value when using `type: category`
 - **Search** - Fixed `onSelect` returning the first term that matches the beginining of the selected value not the exact value.
@@ -298,6 +299,7 @@
 - **Segment** - **Clearfix** has been removed from `ui segment`
 - **Sidebar** - Sidebar now defaults to `useLegacy: false` to avoid the overhead of feature detection for most users
 - **Search** - Slightly adjusted search result theme for clarity
+- **Segment** - Segment now uses `border` for border instead of a second `box-shadow`, this may adjust position by 1pixel
 - **Statistic** - Statistic label styles have been updated
 - **Site** - Additional font variables have been added to site to help clarify variable purpose.
 - **Site** - Increase contrast on default hovered/down colors for colored variations

src/definitions/elements/segment.less

@@ -124,6 +124,7 @@
         Piled
 --------------------*/
 
+.ui.piled.segments,
 .ui.piled.segment {
   margin: @piledMargin 0em;
   box-shadow: @piledBoxShadow;
@@ -135,6 +136,8 @@
 .ui.piled.segment:last-child {
   margin-bottom: 0em;
 }
+.ui.piled.segments:after,
+.ui.piled.segments:before,
 .ui.piled.segment:after,
 .ui.piled.segment:before {
   background-color: @white;
@@ -145,18 +148,21 @@
   left: 0px;
   position: absolute;
   width: 100%;
+  border: @piledBorder;
   box-shadow: @piledBoxShadow;
 }
-.ui.piled.segment:after {
-  transform: rotate(@piledDegrees);
-  top: 0;
-  z-index: -1;
-}
+.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;
+}
 
 /* Piled Attached */
 .ui[class*="top attached"].piled.segment {
@@ -181,8 +187,10 @@
 .ui.stacked.segment {
   padding-bottom: @stackedPadding;
 }
-.ui.stacked.segment:after,
-.ui.stacked.segment:before {
+.ui.stacked.segments:before,
+.ui.stacked.segments:after,
+.ui.stacked.segment:before,
+.ui.stacked.segment:after {
   content: '';
   position: absolute;
   bottom: -(@stackedHeight / 2);
@@ -195,19 +203,23 @@
   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: 0px;
 }
 
 /* Inverted */
-.ui.stacked.inverted.segment:after,
-.ui.stacked.inverted.segment:before {
+.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;
 }
@@ -248,6 +260,7 @@
        Raised
 --------------------*/
 
+.ui.raised.segments,
 .ui.raised.segment {
   box-shadow: @raisedBoxShadow;
 }
@@ -600,7 +613,9 @@
 --------------------*/
 
 .ui.segments {
+  position: relative;
   margin: @margin 0em;
+  box-shadow: @boxShadow;
 }
 .ui.segments:first-child {
   margin-top: 0em;

src/themes/default/elements/segment.variables

@@ -8,13 +8,9 @@
 
 @background: @white;
 @borderWidth: 1px;
-@border: none;
+@border: 1px solid @borderColor;
 
-@borderShadow: 0px 0px 0px @borderWidth @borderColor;
-@boxShadow:
-  @borderShadow,
-  @subtleShadow
-;
+@boxShadow: @subtleShadow;
 @verticalPadding: 1em;
 @horizontalPadding: 1em;
 
@@ -50,8 +46,9 @@
 /* Piled */
 @piledZIndex: auto;
 @piledMargin: 3em;
-@piledBoxShadow: 0px 0px 1px 1px @borderColor;
+@piledBoxShadow: '';
 @piledDegrees: 1.2deg;
+@piledBorder: @border;
 
 /* Circular */
 @circularPadding: 2em;
@@ -64,7 +61,6 @@
 
 /* Raised */
 @raisedBoxShadow:
-  @borderShadow,
   @floatingShadow
 ;