diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index d60ec27b4..9baa691cb 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index f325a839d..2ff2c673f 100755 --- a/src/definitions/elements/segment.less +++ b/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; diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables index 3c5a5248c..dd1be2b53 100644 --- a/src/themes/default/elements/segment.variables +++ b/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 ;