diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index 5b6d644d7..d5ff57ae1 100755 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -1,10 +1,15 @@ ## RELEASE NOTES -### Version 2.4.0 - Sep xx, 2018 +### Version 2.4.0 - Sep 17, 2018 + +**Install Notes** +`2.4.0` includes a new component `placeholder`. To use this component in your existing SUI site, be sure to add `@placeholder: 'default';` to your `theme.config`. You can see an example in `theme.config.example` **New Components** +- **Loader** - Added `ui placeholder` that can be used to mimic content while its loading + +**New UI Type** - **Segment** - Added new `ui placeholder segment` used to reserve space for UI when no content is available. -- **Loader** - Added `ui content loader` that can be used to mimic content while its loading **Major Enhancements** - **Dropdown** - Added `clearable` dropdowns. When `clearable: true` is specified, you can @@ -16,16 +21,17 @@ For example when `attachable: false` is used with a modal, or if IE11/Edge is us - **Modal** - Fixed issue where `scrolling modal` would not allow for scrolling with touch devices. #6449 **Bugs** +- **Dimmer** - Dimmer now sets `variation` at runtime, to support run-time swapping between `top aligned` and `middle aligned` using `.dimmer('setting', 'variation', 'top aligned')` +- **Dropdown** - `inline dropdown` `close icon` default right margin default spacing slightly modified. - **Dropdown** - Fixed issue where `onChange` when used with `action: hide` would be missing the third param `$item` #6555 +- **Flag** - Add `uk` alias for `united kingdom` **Thanks @PhilipGarnero** #6531 +- **Icon** - Fixes missing `disk outline icon` alias #6556 +- **Label** - Fixed issue where `basic label` were appearing incorrectly **Thanks @lasley / @ColinFrick** #6582 #6440 +- **List** - Fixed issue where `content` would not take up 100% width when used alongside `img` or `icon` - **Menu/Dropdown** - Fixed `left menu` inside `ui menu` would display horizontally as `flex` #6359 -- **Dimmer** - Dimmer now sets `variation` at runtime, to support run-time swapping between `top aligned` and `middle aligned` using `.dimmer('setting', 'variation', 'top aligned')` -- **Modal** - Modal now will remove `blurring` after undimming, to prevent issues with `position: fixed` #6520 - **Menu/Dropdown** - Fixes dropdown item margin not obeyed inside `labeled icon menu` #6557 - **Modal** - Fixes `@mobileTopAlignedMargin` theming variable was not implemented -- **List** - Fixed issue where `content` would not take up 100% width when used alongside `img` or `icon` -- **Dropdown** - `inline dropdown` `close icon` default right margin default spacing slightly modified. -- **Icon** - Fixes missing `disk outline icon` alias #6556 -- **Flag** - Add `uk` alias for `united kingdom` **Thanks @PhilipGarnero** #6531 +- **Modal** - Modal now will remove `blurring` after undimming, to prevent issues with `position: fixed` #6520 ### Version 2.3.3 - July 8th, 2018 diff --git a/src/definitions/elements/placeholder.less b/src/definitions/elements/placeholder.less index 750279823..b36a07cf2 100644 --- a/src/definitions/elements/placeholder.less +++ b/src/definitions/elements/placeholder.less @@ -22,13 +22,7 @@ .ui.placeholder { position: static; - left: 0px; - top: 0px; - transform: none; - margin: 0em; - will-change: background-position, transform; overflow: hidden; - backface-visibility: hidden; animation: placeholderShimmer @placeholderLoadingAnimationDuration linear; animation-iteration-count: infinite; background-color: @white; @@ -46,6 +40,22 @@ } } +.ui.placeholder + .ui.placeholder { + margin-top: @consecutivePlaceholderSpacing; +} +.ui.placeholder + .ui.placeholder { + animation-delay: 0.1s; +} +.ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: 0.2s; +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: 0.3s; +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: 0.4s; +} + .ui.placeholder, .ui.placeholder > :before, .ui.placeholder .image.header:after, @@ -211,3 +221,12 @@ .ui.placeholder .very.short.line.line.line:after { width: @placeholderVeryShortLineOutdent; } + + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.placehlder { + max-width: none; +} diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index fcd8029ef..34d5a424f 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -115,46 +115,51 @@ Placeholder --------------------*/ -.ui.empty.segment { +.ui.placeholder.segment { display: flex; flex-direction: column; justify-content: center; align-items: stretch; - padding: @emptyPadding; - min-height: @emptyMinHeight; - background: @emptyBackground; - border-color: @emptyBorderColor; - box-shadow: @emptyBoxShadow; -} - -.ui.empty.segment .button, -.ui.empty.segment textarea { + 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.empty.segment .button, -.ui.empty.segment .field, -.ui.empty.segment textarea, -.ui.empty.segment > .ui.input { - max-width: 300px; +.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.empty.segment .column .button, -.ui.empty.segment .column .field, -.ui.empty.segment .column textarea, -.ui.empty.segment .column > .ui.input { - max-width: 250px; +.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.empty.segment > .inline { +.ui.placeholder.segment > .inline { align-self: center; } -.ui.empty.segment > .inline > .button { +.ui.placeholder.segment > .inline > .button { display: inline-block; width: auto; - margin: 0px @5px 0px 0px; + margin: @placeholderContentInlineButtonMargin; } -.ui.empty.segment > .inline > .button:last-child { +.ui.placeholder.segment > .inline > .button:last-child { margin-right: 0px; } diff --git a/src/themes/default/elements/placeholder.variables b/src/themes/default/elements/placeholder.variables index 9e8649608..32fd2b5f3 100644 --- a/src/themes/default/elements/placeholder.variables +++ b/src/themes/default/elements/placeholder.variables @@ -1,4 +1,4 @@ -@placeholderMaxWidth: 50rem; +@placeholderMaxWidth: 30rem; /* Key Content Sizing */ @placeholderLineMargin: @relative12px; @@ -8,6 +8,9 @@ @placeholderSpacing: @relative20px; +/* Repeated Placeholder */ +@consecutivePlaceholderSpacing: 2rem; + /* Image */ @placeholderImageHeight: 100px; @@ -16,13 +19,13 @@ @placeholderImageTextIndent: @10px; /* Paragraph */ -@placeholderHeaderLineOneOutdent: 40%; -@placeholderHeaderLineTwoOutdent: 20%; +@placeholderHeaderLineOneOutdent: 20%; +@placeholderHeaderLineTwoOutdent: 60%; -@placeholderLineOneOutdent: @placeholderLongLineOutdent; -@placeholderLineTwoOutdent: @placeholderShortLineOutdent; -@placeholderLineThreeOutdent: @placeholderMediumLineOutdent; -@placeholderLineFourOutdent: @placeholderVeryShortLineOutdent; +@placeholderLineOneOutdent: @placeholderFullLineOutdent; +@placeholderLineTwoOutdent: @placeholderMediumLineOutdent; +@placeholderLineThreeOutdent: @placeholderVeryLongLineOutdent; +@placeholderLineFourOutdent: @placeholderLongLineOutdent; @placeholderLineFiveOutdent: @placeholderShortLineOutdent; @@ -30,14 +33,14 @@ @placeholderLoadingAnimationDuration: 2s; @placeholderLoadingGradientWidth: 1200px; @placeholderLoadingGradient: linear-gradient(to right, - #EEEEEE 0%, - #DDDDDD 15%, - #EEEEEE 30% + rgba(0, 0, 0, 0.08) 0%, + rgba(0, 0, 0, 0.15) 15%, + rgba(0, 0, 0, 0.08) 30% ); @placeholderInvertedLoadingGradient: linear-gradient(to right, - #222222 0%, - #333333 15%, - #222222 30% + rgba(255, 255, 255, 0.08) 0%, + rgba(255, 255, 255, 0.14) 15%, + rgba(255, 255, 255, 0.08) 30% ); /* Variations */ diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables index 3c82b989b..6ae2a2a45 100644 --- a/src/themes/default/elements/segment.variables +++ b/src/themes/default/elements/segment.variables @@ -49,11 +49,13 @@ *******************************/ /* Placeholder */ -@emptyBackground: @offWhite; -@emptyPadding: @padding; -@emptyBorderColor: @borderColor; -@emptyBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset; -@emptyMinHeight: 18rem; +@placeholderBackground: @offWhite; +@placeholderPadding: @padding; +@placeholderBorderColor: @borderColor; +@placeholderBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset; +@placeholderMinHeight: 18rem; +@placeholderContentMaxWidth: 15rem; +@placeholderContentInlineButtonMargin: 0px @5px 0px 0px; /* Piled */