@northdata/fomantic-ui 2.9.419 → 2.9.420

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

@@ -0,0 +1,288 @@
+/*!
+ * # Fomantic-UI 2.9.4 - Toast
+ * https://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * https://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+        Toast container
+*******************************/
+
+.ui.toast-container {
+  position: fixed;
+  z-index: 9999;
+}
+.ui.toast-container.absolute {
+  position: absolute;
+}
+.ui.toast-container.top.right {
+  top: 0.85714286em;
+  right: 0.85714286em;
+  margin-left: 0.85714286em;
+}
+.ui.toast-container.top.left {
+  top: 0.85714286em;
+  left: 0.85714286em;
+  margin-right: 0.85714286em;
+}
+.ui.toast-container.top.center {
+  left: 50%;
+  transform: translate(-50%, 0);
+  top: 0.85714286em;
+}
+.ui.toast-container.bottom.right {
+  bottom: 0.85714286em;
+  right: 0.85714286em;
+  margin-left: 0.85714286em;
+}
+.ui.toast-container.bottom.left {
+  bottom: 0.85714286em;
+  left: 0.85714286em;
+  margin-right: 0.85714286em;
+}
+.ui.toast-container.bottom.center {
+  left: 50%;
+  transform: translate(-50%, 0);
+  bottom: 0.85714286em;
+}
+.ui.toast-container .visible.toast-box,
+.ui.toast-container .animating.toast-box,
+.ui.toast-container .toast-box {
+  display: table !important;
+}
+.ui.toast-container .toast-box {
+  margin-bottom: 0.5em;
+  border-radius: 0;
+  cursor: default;
+  will-change: transform, opacity;
+}
+.ui.toast-container .toast-box:hover {
+  opacity: 1;
+}
+.ui.toast-container .toast-box:hover {
+  cursor: pointer;
+}
+.ui.toast-container .toast-box.floating,
+.ui.toast-container .toast-box.hoverfloating:hover {
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+  border: none;
+}
+.ui.toast-container .toast-box.compact,
+.ui.toast-container .toast-box > .compact {
+  width: 416px;
+}
+.ui.toast-container .toast-box > .ui.toast,
+.ui.toast-container .toast-box > .ui.message {
+  margin: 0;
+  position: relative;
+}
+.ui.toast-container .toast-box > .ui.message > .close.icon {
+  top: 1rem;
+  right: 1rem;
+}
+.ui.toast-container .toast-box > .ui.message.icon {
+  align-items: inherit;
+}
+.ui.toast-container .toast-box > .ui.message.icon > :not(.icon) {
+  padding-left: 0;
+}
+.ui.toast-container .toast-box > .ui.message.icon > i.icon:not(.close) {
+  display: inline-block;
+  position: absolute;
+  width: 4rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ui.toast-container .toast-box > .ui.message.icon:not(.vertical).icon.icon.icon {
+  display: block;
+}
+.ui.toast-container .toast-box .ui.toast > .close.icon {
+  cursor: pointer;
+  margin: 0;
+  opacity: 0.7;
+  transition: opacity 0.1s ease;
+}
+.ui.toast-container .toast-box .ui.toast > .close.icon:hover {
+  opacity: 1;
+}
+.ui.toast-container .toast-box .ui.toast.vertical > .close.icon {
+  margin-top: -1rem;
+  margin-right: -1rem;
+}
+.ui.toast-container .toast-box .ui.toast:not(.vertical) > .close.icon {
+  position: absolute;
+  top: 1rem;
+}
+.ui.toast-container .toast-box .ui.toast:not(.vertical) > .close.icon:not(.left) {
+  right: 1rem;
+}
+.ui.toast-container .toast-box .ui.toast:not(.vertical) > .close.icon.left {
+  margin-left: -1rem;
+}
+.ui.toast-container .toast-box .progressing {
+  animation-iteration-count: 1;
+  animation-timing-function: linear;
+}
+.ui.toast-container .toast-box .progressing.wait {
+  animation-name: progressWait;
+}
+.ui.toast-container .toast-box:hover .pausable.progressing {
+  animation-play-state: paused;
+}
+.ui.toast-container .toast-box .ui.toast:not(.vertical) {
+  display: block;
+}
+.ui.toast-container .toast-box .vertical.actions > .button,
+.ui.toast-container .toast-box > .vertical > .vertical.vertical,
+.ui.toast-container .toast-box > .vertical.vertical.vertical {
+  display: flex;
+}
+
+
+/*******************************
+            Toast
+*******************************/
+
+.ui.toast {
+  display: none;
+  border-radius: 0;
+  padding: 0.78571429em 1em;
+  margin: 0;
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #fff;
+}
+.ui.toast > .content > .header {
+  font-weight: bold;
+  color: inherit;
+  margin: 0;
+}
+.ui.toast.info {
+  background-color: #31ccec;
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.toast.warning {
+  background-color: #f2c037;
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.toast.success {
+  background-color: #81b08c;
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.toast.error {
+  background-color: #af4e4a;
+  color: rgba(255, 255, 255, 0.9);
+}
+.ui.toast.neutral {
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+}
+.ui.toast > i.icon:not(.close) {
+  font-size: 1.5em;
+}
+.ui.toast:not(.vertical):not(.center) > i.icon:not(.close) {
+  position: absolute;
+}
+.ui.toast:not(.vertical) > i.icon:not(.close) + .content {
+  padding-left: 3em;
+}
+.ui.toast:not(.vertical) > .close.icon + .content {
+  padding-left: 1.5em;
+}
+.ui.toast:not(.vertical):not(.center) > .centered.image,
+.ui.toast:not(.vertical):not(.center) > .centered.icon {
+  transform: translateY(-50%);
+  top: 50%;
+}
+.ui.toast.vertical > .content {
+  flex-grow: 1;
+}
+.ui.toast.vertical > .close.icon + .content {
+  padding-left: 1em;
+}
+.ui.toast.vertical > .ui.image + .content,
+.ui.toast.vertical > i.icon:not(.close) + .content {
+  padding-left: 1em;
+}
+.ui.toast.vertical > .centered.image,
+.ui.toast.vertical > .centered.icon {
+  align-self: center;
+}
+.ui.hoverfloating.message:hover {
+  box-shadow: 0 0 0 1px inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+}
+.ui.center.toast-container .toast-box,
+.ui.right.toast-container .toast-box {
+  margin-left: auto;
+}
+.ui.center.toast-container .toast-box {
+  margin-right: auto;
+}
+
+/* --------------
+     Colors
+-------------- */
+@media only screen and (max-width: 420px) {
+  .ui.toast-container .toast-box.toast-box,
+  .ui.toast-container .toast-box > .compact,
+  .ui.toast-container .toast-box > .vertical > *,
+  .ui.toast-container .toast-box > * {
+    width: auto;
+    max-width: 100%;
+  }
+  .ui.toast-container .toast-box > *:not(.vertical) {
+    min-width: 280px;
+  }
+}
+
+/* ---------------
+   Progress Bar
+ ---------------- */
+@keyframes progressWait {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+        User Overrides
+*******************************/
+
+.ui.toast-container .toast-box > .ui.message > .close.icon,
+.ui.toast-container .toast-box > .ui.toast > .close.icon {
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 1.075em;
+}
+.ui.toast-container .toast-box > .ui.message {
+  padding: 0.85714286rem 3.42857143rem 0.85714286rem 1rem;
+}
+.ui.toast-container .toast-box > .ui.message .header {
+  font-size: 1.14285714rem;
+  font-weight: 500;
+}
+.ui.toast-container .toast-box > .ui.message .header + .message {
+  margin-top: 0.28571429em;
+}
+.ui.toast-container .toast-box > .ui.icon.message > i.icon:not(.close) {
+  width: auto;
+  top: 1rem;
+  transform: none;
+  font-size: 1.075em;
+}
+.ui.toast-container .toast-box > .ui.icon.message > .content {
+  padding-left: 1.57142857em;
+}