Add rlsnotes and placeholder segment

RELEASE-NOTES.md

@@ -2,12 +2,16 @@
 
 ### Version 2.3.4 - Aug xx, 2018
 
-**Enhancements**
-
+**Major Enhancements**
 - **Modal/Dimmer** - Modals and dimmers now include a new setting `useFlex` which defaults to `auto`. Modals and dimmers will automatically revert to using non-flex layouts when there may be layout issues with using flexbox.
 
 For example when `attachable: false` is used with a modal, or if IE11/Edge is used (Absolutely positioned elements inside flex containers in IE behave differently)
 
+**New UI**
+
+- **Segment** - Segment now include a `placeholder` type, which can be used to save place for content when content is empty.
+
+- **Loader** - Loader now includes `content loader` which let you specify arbitrary mocked up content to appear before content loads.
 
 
 

src/definitions/elements/segment.less

@@ -110,6 +110,55 @@
              Types
 *******************************/
 
+
+/*-------------------
+     Placeholder
+--------------------*/
+
+.ui.placeholder.segment {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  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 .button,
+.ui.placeholder.segment .field,
+.ui.placeholder.segment textarea,
+.ui.placeholder.segment > .ui.input {
+  max-width: 300px;
+  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: 250px;
+}
+
+.ui.placeholder.segment > .inline  {
+  align-self: center;
+}
+.ui.placeholder.segment > .inline > .button {
+  display: inline-block;
+  width: auto;
+  margin: 0px @5px 0px 0px;
+}
+.ui.placeholder.segment > .inline > .button:last-child {
+  margin-right: 0px;
+}
+
+
 /*-------------------
         Piled
 --------------------*/

src/themes/default/elements/segment.variables

@@ -45,22 +45,17 @@
 @pageGridMargin: (2 * @verticalPadding);
 
 /*******************************
-            States
+            Types
 *******************************/
 
-/* Loading Dimmer */
-@loaderDimmerColor: rgba(255, 255, 255, 0.8);
-@loaderDimmerZIndex: 100;
-
-/* Loading Spinner */
-@loaderSize: 3em;
-@loaderLineZIndex: 101;
+/* Placeholder */
+@placeholderBackground: @offWhite;
+@placeholderPadding: @padding;
+@placeholderBorderColor: @borderColor;
+@placeholderBoxShadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+@placeholderMinHeight: 18rem;
 
 
-/*******************************
-            Variations
-*******************************/
-
 /* Piled */
 @piledZIndex: auto;
 @piledMargin: 3em;
@@ -77,6 +72,24 @@
 @stackedPadding: @verticalPadding + (0.4em);
 @tallStackedPadding: @verticalPadding + (0.8em);
 
+/*******************************
+            States
+*******************************/
+
+/* Loading Dimmer */
+@loaderDimmerColor: rgba(255, 255, 255, 0.8);
+@loaderDimmerZIndex: 100;
+
+/* Loading Spinner */
+@loaderSize: 3em;
+@loaderLineZIndex: 101;
+
+
+/*******************************
+            Variations
+*******************************/
+
+
 /* Raised */
 @raisedBoxShadow: @floatingShadow;