ngx-strata 0.5.0 → 0.5.2

package/assets/styles/components/modal.scss

@@ -49,6 +49,16 @@ st-modal-header {
   }
 }
 
+st-modal-body {
+  --st-modal-body-padding: var(--st-size-sm);
+
+  display: block;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--st-modal-body-padding);
+}
+
 st-modal-footer {
   --st-modal-footer-bg: var(--st-modal-bg-color, var(--st-color-bg-default));
   --st-modal-footer-border-color: var(--st-border);
@@ -64,12 +74,6 @@ st-modal-footer {
   padding: var(--st-modal-footer-padding);
   border-top: 1px solid var(--st-modal-footer-border-color);
   background-color: var(--st-modal-footer-bg);
-  position: sticky;
-  bottom: 0;
-  z-index: 5;
-  margin-top: var(--st-size-sm);
-  margin-left: calc(-1 * var(--st-size-sm));
-  margin-right: calc(-1 * var(--st-size-sm));
   border-bottom-left-radius: var(--st-modal-border-radius);
   border-bottom-right-radius: var(--st-modal-border-radius);
 
@@ -127,19 +131,56 @@ st-modal {
   width: var(--st-modal-width);
   max-width: min(var(--st-modal-max-width), calc(100vw - (var(--st-modal-viewport-margin) * 2)));
   max-height: calc(100vh - (var(--st-modal-viewport-margin) * 2));
+  overflow: hidden;
 
   st-modal-header {
     flex-shrink: 0;
   }
 
   .modal-content {
-    padding: var(--st-size-sm);
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
     flex: 1;
     min-height: 0;
+    overflow: hidden;
+
+    > * {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    &:not(:has(st-modal-body)):not(:has(st-modal-footer)) {
+      padding: var(--st-size-sm);
+      overflow-y: auto;
+
+      > * {
+        display: block;
+        flex: initial;
+        min-height: initial;
+        overflow: visible;
+      }
+    }
+
+    &:has(st-modal-footer):not(:has(st-modal-body)) {
+      > * {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        padding: var(--st-size-sm) var(--st-size-sm) 0;
 
-    &:has(st-modal-footer) {
-      padding-bottom: 0;
+        st-modal-footer {
+          position: sticky;
+          bottom: 0;
+          margin-top: auto;
+          margin-left: calc(-1 * var(--st-size-sm));
+          margin-right: calc(-1 * var(--st-size-sm));
+        }
+      }
     }
   }
 
@@ -167,12 +208,122 @@ st-modal {
     --st-modal-bg-color: var(--st-color-bg-raised);
   }
 
+  &.st-modal-placement-center {
+    justify-self: center;
+    align-self: center;
+    animation: st-modal-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &.st-modal-placement-right {
+    @media (min-width: 768px) {
+      justify-self: end;
+      align-self: stretch;
+      height: 100% !important;
+      height: 100dvh !important;
+      max-height: 100% !important;
+      max-height: 100dvh !important;
+      border-radius: 0 !important;
+      border-top: none !important;
+      border-right: none !important;
+      border-bottom: none !important;
+      border-left: 1px solid var(--st-border-faded) !important;
+      box-shadow: var(--st-shadow-4);
+      animation: st-modal-slide-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+      &.st-modal-size-xs {
+        --st-modal-max-width: 320px;
+        --st-modal-width: 320px;
+      }
+
+      &.st-modal-size-sm {
+        --st-modal-max-width: 400px;
+        --st-modal-width: 400px;
+      }
+
+      &.st-modal-size-md {
+        --st-modal-max-width: 560px;
+        --st-modal-width: 560px;
+      }
+
+      &.st-modal-size-lg {
+        --st-modal-max-width: 800px;
+        --st-modal-width: 800px;
+      }
+
+      st-modal-header {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      st-modal-footer {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  &.st-modal-placement-left {
+    @media (min-width: 768px) {
+      justify-self: start;
+      align-self: stretch;
+      height: 100% !important;
+      height: 100dvh !important;
+      max-height: 100% !important;
+      max-height: 100dvh !important;
+      border-radius: 0 !important;
+      border-top: none !important;
+      border-left: none !important;
+      border-bottom: none !important;
+      border-right: 1px solid var(--st-border-faded) !important;
+      box-shadow: var(--st-shadow-4);
+      animation: st-modal-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+      &.st-modal-size-xs {
+        --st-modal-max-width: 320px;
+        --st-modal-width: 320px;
+      }
+
+      &.st-modal-size-sm {
+        --st-modal-max-width: 400px;
+        --st-modal-width: 400px;
+      }
+
+      &.st-modal-size-md {
+        --st-modal-max-width: 560px;
+        --st-modal-width: 560px;
+      }
+
+      &.st-modal-size-lg {
+        --st-modal-max-width: 800px;
+        --st-modal-width: 800px;
+      }
+
+      st-modal-header {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      st-modal-footer {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  &.st-modal-placement-bottom {
+    @media (min-width: 768px) {
+      justify-self: center;
+      align-self: center;
+      animation: st-modal-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+  }
+
   &.hidden-under-other-modal {
     filter: var(--st-modal-covered-modal-filter);
   }
 
   @media (max-width: 767.98px) {
-    &:not(.st-modal-size-xs):not(.st-modal-size-sm) {
+    &:not(.st-modal-size-xs):not(.st-modal-size-sm):not(.st-modal-placement-bottom) {
       --st-modal-viewport-margin: 0px;
       --st-modal-border-radius: 0px;
       --st-modal-max-width: 100%;
@@ -194,22 +345,20 @@ st-modal {
       box-shadow: none !important;
       margin: 0 !important;
 
+      &.st-modal-placement-right {
+        animation: st-modal-slide-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
+      &.st-modal-placement-left {
+        animation: st-modal-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
       .modal-content {
         display: flex;
         flex-direction: column;
         flex: 1;
         min-height: 0;
 
-        &:has(st-modal-footer) {
-          &,
-          :has(st-modal-footer) {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            min-height: 0;
-          }
-        }
-
         > * {
           display: flex;
           flex-direction: column;
@@ -218,12 +367,40 @@ st-modal {
         }
 
         st-modal-footer {
-          margin-top: auto !important;
+          margin-top: auto;
           border-bottom-left-radius: 0;
           border-bottom-right-radius: 0;
         }
       }
     }
+
+    &.st-modal-placement-bottom {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: auto;
+      width: 100% !important;
+      max-width: 100% !important;
+      max-height: calc(100dvh - var(--st-size-xl)) !important;
+      border-radius: var(--st-border-radius-xl) var(--st-border-radius-xl) 0 0 !important;
+      border-left: none !important;
+      border-right: none !important;
+      border-bottom: none !important;
+      border-top: 1px solid var(--st-border-faded) !important;
+      box-shadow: var(--st-shadow-4) !important;
+      animation: st-modal-slide-in-bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+      st-modal-header {
+        border-top-left-radius: var(--st-border-radius-xl);
+        border-top-right-radius: var(--st-border-radius-xl);
+      }
+
+      st-modal-footer {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
   }
 }
 
@@ -271,4 +448,42 @@ st-modal-container {
     grid-column: 1;
     grid-row: 1;
   }
+}
+
+@keyframes st-modal-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes st-modal-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes st-modal-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes st-modal-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }