@northdata/fomantic-ui 2.8.722 → 2.9.401

package/lib/semantic-ui/dist/components/segment.css

@@ -1,10 +1,10 @@
 /*!
- * # Fomantic-UI - Segment
- * http://github.com/fomantic/Fomantic-UI/
+ * # Fomantic-UI 2.9.4 - Segment
+ * https://github.com/fomantic/Fomantic-UI/
  *
  *
  * Released under the MIT license
- * http://opensource.org/licenses/MIT
+ * https://opensource.org/licenses/MIT
  *
  */
 
@@ -16,8 +16,7 @@
 .ui.segment {
   position: relative;
   background: #e6e5ea;
-  -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-          box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
   margin: 1rem 0;
   padding: 1em 1em;
   border-radius: 0;
@@ -37,19 +36,17 @@
   padding-right: 0;
   background: none transparent;
   border-radius: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   border: none;
-  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
+  border-top: 1px solid rgba(34, 36, 38, 0.15);
 }
-.ui.vertical.segment:last-child {
-  border-bottom: none;
+.ui.vertical.segment:first-child {
+  border-top: none;
 }
 
-/*-------------------
+/* -------------------
     Loose Coupling
---------------------*/
-
+-------------------- */
 
 /* Label */
 .ui[class*="bottom attached"].segment > [class*="top attached"].label {
@@ -85,8 +82,7 @@
 .ui.basic.table.segment {
   background: #e6e5ea;
   border: 1px solid #e6e5ea;
-  -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-          box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
 }
 .ui[class*="very basic"].table.segment {
   padding: 1em 1em;
@@ -103,34 +99,28 @@
 *******************************/
 
 
-/*-------------------
-       Placeholder
-  --------------------*/
-
+/* -------------------
+         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;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
   max-width: initial;
-  -webkit-animation: none;
-          animation: none;
+  animation: none;
   overflow: visible;
   padding: 1em 1em;
   min-height: 18rem;
-  background: #F9FAFB;
+  background: #f9fafb;
   border-color: rgba(34, 36, 38, 0.15);
-  -webkit-box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
-          box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+  box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset;
+}
+.ui.placeholder.segment.tab {
+  display: none;
+}
+.ui.placeholder.segment.tab.active {
+  display: flex;
 }
 .ui.placeholder.segment .button,
 .ui.placeholder.segment textarea {
@@ -153,8 +143,7 @@
   margin-right: auto;
 }
 .ui.placeholder.segment > .inline {
-  -ms-flex-item-align: center;
-      align-self: center;
+  align-self: center;
 }
 .ui.placeholder.segment > .inline > .button {
   display: inline-block;
@@ -165,82 +154,17 @@
   margin-right: 0;
 }
 
-/*-------------------
-          Piled
-  --------------------*/
-
-.ui.piled.segments,
-.ui.piled.segment {
-  margin: 3em 0;
-  -webkit-box-shadow: '';
-          box-shadow: '';
-  z-index: auto;
-}
-.ui.piled.segment:first-child {
-  margin-top: 0;
-}
-.ui.piled.segment:last-child {
-  margin-bottom: 0;
-}
-.ui.piled.segments:after,
-.ui.piled.segments:before,
-.ui.piled.segment:after,
-.ui.piled.segment:before {
-  background-color: #FFFFFF;
-  visibility: visible;
-  content: '';
-  display: block;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  width: 100%;
-  border: 1px solid #e6e5ea;
-  -webkit-box-shadow: '';
-          box-shadow: '';
-}
-.ui.piled.segments:before,
-.ui.piled.segment:before {
-  -webkit-transform: rotate(-1.2deg);
-          transform: rotate(-1.2deg);
-  top: 0;
-  z-index: -2;
-}
-.ui.piled.segments:after,
-.ui.piled.segment:after {
-  -webkit-transform: rotate(1.2deg);
-          transform: rotate(1.2deg);
-  top: 0;
-  z-index: -1;
-}
-
-/* Piled Attached */
-.ui[class*="top attached"].piled.segment {
-  margin-top: 3em;
-  margin-bottom: 0;
-}
-.ui.piled.segment[class*="top attached"]:first-child {
-  margin-top: 0;
-}
-.ui.piled.segment[class*="bottom attached"] {
-  margin-top: 0;
-  margin-bottom: 3em;
-}
-.ui.piled.segment[class*="bottom attached"]:last-child {
-  margin-bottom: 0;
-}
-
-/*-------------------
-         Stacked
-  --------------------*/
-
+/* -------------------
+           Stacked
+    -------------------- */
 .ui.stacked.segment {
   padding-bottom: 1.4em;
 }
-.ui.stacked.segments:before,
-.ui.stacked.segments:after,
-.ui.stacked.segment:before,
-.ui.stacked.segment:after {
-  content: '';
+.ui.stacked.segments::before,
+.ui.stacked.segments::after,
+.ui.stacked.segment::before,
+.ui.stacked.segment::after {
+  content: "";
   position: absolute;
   bottom: -3px;
   left: 0;
@@ -250,28 +174,24 @@
   height: 6px;
   visibility: visible;
 }
-.ui.stacked.segments:before,
-.ui.stacked.segment:before {
+.ui.stacked.segments::before,
+.ui.stacked.segment::before {
   display: none;
 }
 
 /* Add additional page */
-.ui.tall.stacked.segments:before,
-.ui.tall.stacked.segment:before {
+.ui.tall.stacked.segments::before,
+.ui.tall.stacked.segment::before {
   display: block;
   bottom: 0;
 }
 
-/*-------------------
-         Padded
-  --------------------*/
-
+/* -------------------
+           Padded
+    -------------------- */
 .ui.padded.segment {
   padding: 1.5em;
 }
-.ui[class*="very padded"].segment {
-  padding: 3em;
-}
 
 /* Padded vertical */
 .ui.padded.segment.vertical.segment,
@@ -280,32 +200,26 @@
   padding-right: 0;
 }
 
-/*-------------------
-         Compact
-  --------------------*/
-
+/* -------------------
+           Compact
+    -------------------- */
 .ui.compact.segment {
   display: table;
 }
 
 /* Compact Group */
 .ui.compact.segments {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
 }
 .ui.compact.segments .segment,
 .ui.segments .compact.segment {
   display: block;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 1 auto;
-          flex: 0 1 auto;
+  flex: 0 1 auto;
 }
 
-/*-------------------
-         Circular
-  --------------------*/
-
+/* -------------------
+           Circular
+    -------------------- */
 .ui.circular.segment {
   display: table-cell;
   padding: 2em;
@@ -314,33 +228,27 @@
   border-radius: 500em;
 }
 
-/*-------------------
-         Raised
-  --------------------*/
-
-.ui.raised.raised.segments,
-.ui.raised.raised.segment {
-  -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
-          box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+/* -------------------
+           Raised
+    -------------------- */
+.ui.ui.raised.segments,
+.ui.ui.raised.segment {
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
 }
 
 
 /*******************************
-              Groups
-  *******************************/
+                Groups
+    *******************************/
 
 
 /* Group */
 .ui.segments {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   position: relative;
   margin: 1rem 0;
   border: 1px solid #e6e5ea;
-  -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-          box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
   border-radius: 0;
 }
 .ui.segments:first-child {
@@ -357,8 +265,7 @@
   border-radius: 0;
   margin: 0;
   width: auto;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   border: none;
   border-top: 1px solid #e6e5ea;
 }
@@ -377,8 +284,7 @@
   bottom: 0;
   margin-top: 0;
   margin-bottom: 0;
-  -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
-          box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
+  box-shadow: 0 2px 1px -1px rgba(34, 36, 38, 0.15);
   border-radius: 0 0 0 0;
 }
 
@@ -390,7 +296,7 @@
 /* Nested Group */
 .ui.segments > .ui.segments {
   border-top: 1px solid #e6e5ea;
-  margin: 1rem 1rem;
+  margin: 1rem;
 }
 .ui.segments > .segments:first-child {
   border-top: none;
@@ -401,24 +307,18 @@
 
 /* Horizontal Group */
 .ui.horizontal.segments {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: row;
-          flex-direction: row;
+  flex-direction: row;
   background-color: transparent;
   padding: 0;
-  -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-          box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
   margin: 1rem 0;
   border-radius: 0;
   border: 1px solid #e6e5ea;
 }
+.ui.wrapping.horizontal.segments,
 .ui.stackable.horizontal.segments {
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 /* Nested Horizontal Group */
@@ -427,26 +327,20 @@
   background-color: transparent;
   border-radius: 0;
   border: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   border-top: 1px solid #e6e5ea;
 }
 
 /* Horizontal Segment */
 .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
-  -webkit-box-flex: 1;
-          flex: 1 1 auto;
-  -ms-flex: 1 1 0;
-  
-/* Solves #2550 MS Flex */
+  flex: 1 1 auto;
 }
 .ui.horizontal.segments > .segment {
   margin: 0;
   min-width: 0;
   border-radius: 0;
   border: none;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   border-left: 1px solid rgba(34, 36, 38, 0.15);
 }
 
@@ -454,7 +348,7 @@
 .ui.segments > .horizontal.segments:first-child {
   border-top: none;
 }
-.ui.horizontal.segments:not(.stackable) > .segment:first-child {
+.ui.horizontal.segments:not(.stackable):not(.wrapping) > .segment:first-child {
   border-left: none;
 }
 .ui.horizontal.segments > .segment:first-child {
@@ -464,27 +358,35 @@
   border-radius: 0 0 0 0;
 }
 
+/* Equal Width */
+.ui[class*="equal width"].horizontal.segments > .segment {
+  width: 100%;
+}
+
 
 /*******************************
             States
 *******************************/
 
 
-/*--------------
-      Loading
-  ---------------*/
-
+/* --------------
+        Loading
+    --------------- */
+.ui.loading.segments,
 .ui.loading.segment {
   position: relative;
   cursor: default;
   pointer-events: none;
-  text-shadow: none !important;
-  -webkit-transition: all 0s linear;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   transition: all 0s linear;
+  min-height: 4.5em;
 }
-.ui.loading.segment:before {
+.ui.loading.segments::before,
+.ui.loading.segment::before {
   position: absolute;
-  content: '';
+  content: "";
   top: 0;
   left: 0;
   background: rgba(255, 255, 255, 0.8);
@@ -493,20 +395,19 @@
   border-radius: 0;
   z-index: 100;
 }
-.ui.loading.segment:after {
+.ui.loading.segments::after,
+.ui.loading.segment::after {
   position: absolute;
-  content: '';
+  content: "";
   top: 50%;
   left: 50%;
   margin: -1.5em 0 0 -1.5em;
   width: 3em;
   height: 3em;
-  -webkit-animation: loader 0.6s infinite linear;
-          animation: loader 0.6s infinite linear;
+  animation: loader 0.6s infinite linear;
   border: 0.2em solid #9ab5c1;
   border-radius: 500rem;
-  -webkit-box-shadow: 0 0 0 1px transparent;
-          box-shadow: 0 0 0 1px transparent;
+  box-shadow: 0 0 0 1px transparent;
   visibility: visible;
   z-index: 101;
 }
@@ -517,78 +418,40 @@
 *******************************/
 
 
-/*-------------------
-         Basic
-  --------------------*/
-
+/* -------------------
+           Basic
+    -------------------- */
 .ui.basic.segment,
 .ui.segments .ui.basic.segment,
 .ui.basic.segments {
   background: none transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   border: none;
   border-radius: 0;
 }
 
-/*-------------------
-         Clearing
-  --------------------*/
-
-.ui.clearing.segment:after {
+/* -------------------
+           Clearing
+    -------------------- */
+.ui.clearing.segment::after {
   content: "";
   display: block;
   clear: both;
 }
 
-/*-------------------
+/* -------------------
        Colors
---------------------*/
-
-.ui.red.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #af4e4a;
-}
-.ui.orange.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #F2711C;
-}
-.ui.yellow.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #FBBD08;
-}
-.ui.olive.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #9baf66;
-}
-.ui.green.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #66af8b;
-}
-.ui.teal.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #66afac;
-}
-.ui.blue.segment.segment.segment.segment.segment:not(.inverted) {
+-------------------- */
+.ui.ui.ui.ui.ui.blue.segment {
   border-top: 2px solid #007388;
 }
-.ui.violet.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #a166af;
-}
-.ui.purple.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #af6690;
-}
-.ui.pink.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #E03997;
-}
-.ui.brown.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #af9666;
-}
-.ui.grey.segment.segment.segment.segment.segment:not(.inverted) {
+.ui.ui.ui.ui.ui.grey.segment {
   border-top: 2px solid #9ab5c1;
 }
-.ui.black.segment.segment.segment.segment.segment:not(.inverted) {
-  border-top: 2px solid #1B1C1D;
-}
-
-/*-------------------
-         Aligned
-  --------------------*/
 
+/* -------------------
+           Aligned
+    -------------------- */
 .ui[class*="left aligned"].segment {
   text-align: left;
 }
@@ -599,10 +462,9 @@
   text-align: center;
 }
 
-/*-------------------
-         Floated
-  --------------------*/
-
+/* -------------------
+           Floated
+    -------------------- */
 .ui.floated.segment,
 .ui[class*="left floated"].segment {
   float: left;
@@ -613,10 +475,9 @@
   margin-left: 1em;
 }
 
-/*-------------------
+/* -------------------
      Emphasis
---------------------*/
-
+-------------------- */
 
 /* Secondary */
 .ui.secondary.segment {
@@ -630,10 +491,9 @@
   color: rgba(0, 0, 0, 0.6);
 }
 
-/*-------------------
-        Attached
-  --------------------*/
-
+/* -------------------
+          Attached
+    -------------------- */
 
 /* Middle */
 .ui.attached.segment {
@@ -643,16 +503,17 @@
   margin: 0 -1px;
   width: calc(100% + 2px);
   max-width: calc(100% + 2px);
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  border: 1px solid #D4D4D5;
+  box-shadow: none;
+}
+.ui.attached.segment:not(.basic) {
+  border: 1px solid #d4d4d5;
 }
-.ui.attached:not(.message) + .ui.attached.segment:not(.top) {
+.ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top):not([class*="left attached"]):not([class*="right attached"]) {
   border-top: none;
 }
 
 /* Top */
-.ui[class*="top attached"].segment {
+.ui.segment[class*="top attached"] {
   bottom: 0;
   margin-bottom: 0;
   top: 0;
@@ -662,6 +523,9 @@
 .ui.segment[class*="top attached"]:first-child {
   margin-top: 0;
 }
+.ui.tab.segment[class*="top attached"]:first-child {
+  margin-top: 1rem;
+}
 
 /* Bottom */
 .ui.segment[class*="bottom attached"] {
@@ -669,31 +533,41 @@
   margin-top: 0;
   top: 0;
   margin-bottom: 1rem;
-  -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
-          box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
+  box-shadow: 0 2px 1px -1px rgba(34, 36, 38, 0.15);
   border-radius: 0 0 0 0;
 }
 .ui.segment[class*="bottom attached"]:last-child {
+  margin-bottom: 0;
+}
+.ui.tab.segment[class*="bottom attached"]:last-child {
   margin-bottom: 1rem;
 }
-
-/*--------------
-       Fitted
-  ---------------*/
-
-.ui.fitted.segment:not(.horizontally) {
-  padding-top: 0;
-  padding-bottom: 0;
+.ui[class*="left attached"].segment {
+  margin-right: 0;
 }
-.ui.fitted.segment:not(.vertically) {
-  padding-left: 0;
-  padding-right: 0;
+.ui[class*="right attached"].segment {
+  margin-left: 0;
+}
+.ui.seamless.attached.segment:not(.top):not(.bottom):not([class*="right attached"]):not([class*="left attached"]) {
+  border-top: none;
+  border-bottom: none;
+}
+.ui.seamless.attached.segment.top {
+  border-bottom: none;
+}
+.ui.seamless.attached.segment.bottom {
+  border-top: none;
+}
+.ui.seamless.attached.segment[class*="left attached"] {
+  border-right: none;
+}
+.ui.seamless.attached.segment[class*="right attached"] {
+  border-left: none;
 }
 
-/*-------------------
+/* -------------------
         Size
---------------------*/
-
+-------------------- */
 .ui.segments .segment,
 .ui.segment {
   font-size: 1rem;