@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/modal/modal.css

@@ -6,93 +6,76 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
- * SPDX-FileCopyrightText: 2023 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/* Dimensions */
-/* Font sizes */
-/* Line heights */
-/* Animation timings */
-:host {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
+::backdrop {
+  --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);
 }
-:host .modal {
-  display: flex;
+
+:focus-visible {
+  outline: none !important;
 }
-:host .modal.animation {
-  animation: modal-fade 300ms ease-in-out;
+
+:host dialog {
+  margin: 0;
+  left: 50%;
 }
-:host .modal.backdrop {
-  background-color: var(--theme-color-lightbox);
-  -webkit-backdrop-filter: blur(4px);
-          backdrop-filter: blur(4px);
-  transition: none;
+:host dialog::backdrop {
+  -webkit-backdrop-filter: blur(2.7182817459px);
+          backdrop-filter: blur(2.7182817459px);
 }
-:host .modal.backdrop.animation {
-  transition: -webkit-backdrop-filter 0ms ease-in-out;
-  transition: backdrop-filter 0ms ease-in-out;
-  transition: backdrop-filter 0ms ease-in-out, -webkit-backdrop-filter 0ms ease-in-out;
+:host .modal {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border: none;
+  border-radius: var(--theme-default-border-radius);
+  background: var(--theme-modal--background);
+  box-shadow: var(--theme-shadow-4);
+  color: var(--theme-color-std-text);
+  overflow: visible;
+  max-height: 80vh;
+  pointer-events: all;
 }
-:host .modal .modal-dialog {
-  flex-grow: 1;
+:host .modal-size-360 {
+  width: 22.5rem;
 }
-:host .modal.scrollable .modal-content {
-  max-height: 100%;
+:host .modal-size-480 {
+  width: 30rem;
 }
-:host .modal.scrollable .modal-content .modal-body {
-  overflow-y: auto;
+:host .modal-size-600 {
+  width: 37.5rem;
 }
-:host .modal .modal-content {
-  box-shadow: var(--theme-modal--box-shadow);
-  flex-direction: row;
-  background-color: var(--theme-modal--background);
-  border: var(--modal--border-thickness) solid var(--theme-modal--border-color);
-  padding: 1.5rem;
-  max-height: 100vh;
-  border-radius: var(--theme-default-border-radius);
+:host .modal-size-720 {
+  width: 45rem;
 }
-:host .modal .modal-content .state-icon-container {
-  -webkit-margin-end: 1rem;
-          margin-inline-end: 1rem;
+:host .modal-size-840 {
+  width: 52.5rem;
 }
-:host .modal .modal-content .slot-container {
-  flex-grow: 1;
+:host .modal-size-full-width {
+  width: 95%;
 }
-@media (min-width: 576px) {
-  :host .modal .modal-dialog:not(.modal-dialog-centered) {
-    margin: 2.5rem auto;
-  }
+:host .dialog-backdrop {
+  display: block;
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0px;
+  left: 0px;
+  pointer-events: none;
 }
-@media (max-width: 575.98px) {
-  :host .modal .modal-dialog {
-    height: 100%;
-    margin: 0;
-  }
-  :host .modal .modal-dialog .modal-content {
-    height: 100%;
-    border-radius: 0;
-  }
+
+:host(.align-center) dialog {
+  margin: 0;
+  left: 50%;
+  top: 50%;
 }
-@keyframes modal-fade {
-  from {
-    opacity: 0%;
-  }
-  to {
-    opacity: 100%;
-  }
+
+:host(.no-backdrop) dialog::backdrop {
+  background-color: transparent !important;
+  -webkit-backdrop-filter: none !important;
+          backdrop-filter: none !important;
 }
-@keyframes slide-down {
-  from {
-    top: -100%;
-  }
-  to {
-    top: 32px;
-  }
+
+:host(.with-icon) ::slotted(ix-modal-footer),
+:host(.with-icon) ::slotted(ix-modal-content) {
+  margin-left: 2.5rem;
 }