Updated component to version 2.4.0

RELEASE-NOTES.md

@@ -1,3 +1,7 @@
+### Version 2.4.0 - Sep 17, 2018
+
+- **Segment** - Added new `ui placeholder segment` used to reserve space for UI when content is missing or empty.
+
 ### Version 2.2.11 - July 11, 2017
 
 - **Segment** - Fixed issue where using colored segment e.g. `red segment` inside `segments` would not work when `:first-child` [#4013](https://github.com/Semantic-Org/Semantic-UI/issues/4013)

composer.json

@@ -15,5 +15,5 @@
  "framework"
  ],
  "license": "MIT",
- "version": "2.3.3"
+ "version": "2.4.0"
 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "semantic-ui-segment",
- "version": "2.3.3",
+ "version": "2.4.0",
  "title": "Semantic UI - Segment",
  "description": "Single component release of segment",
  "homepage": "http://www.semantic-ui.com",

segment.css

@@ -1,5 +1,5 @@
 /*!
- * # Semantic UI 2.3.3 - Segment
+ * # Semantic UI 2.4.0 - Segment
  * http://github.com/semantic-org/semantic-ui/
  *
  *
@@ -103,6 +103,68 @@
 *******************************/
 
 
+/*-------------------
+ Placeholder
+--------------------*/
+
+.ui.placeholder.segment {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: stretch;
+ -ms-flex-align: stretch;
+ align-items: stretch;
+ max-width: initial;
+ -webkit-animation: none;
+ animation: none;
+ overflow: visible;
+ padding: 1em 1em;
+ min-height: 18rem;
+ background: #F9FAFB;
+ border-color: rgba(34, 36, 38, 0.15);
+ -webkit-box-shadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+ box-shadow: 0px 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+}
+.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: 15rem;
+ 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: 15rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+.ui.placeholder.segment > .inline {
+ -ms-flex-item-align: center;
+ align-self: center;
+}
+.ui.placeholder.segment > .inline > .button {
+ display: inline-block;
+ width: auto;
+ margin: 0px 0.35714286rem 0px 0px;
+}
+.ui.placeholder.segment > .inline > .button:last-child {
+ margin-right: 0px;
+}
+
 /*-------------------
  Piled
 --------------------*/