@fluid-topics/ft-modal 1.3.46 → 1.3.48

package/build/ft-modal.styles.js

@@ -23,6 +23,27 @@ export const FtModalCssVariables = {
 };
 // language=CSS
 export const ftmodalStyles = css `
+
+    @keyframes slide-in-from-right {
+        0% {
+            transform: translateX(100%);
+        }
+
+        100% {
+            transform: translateX(0%);
+        }
+    }
+
+    @keyframes fade-in {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: ${FtModalCssVariables.overlayOpacity};
+        }
+    }
+
     [part=container] {
         display: contents;
     }
@@ -37,6 +58,10 @@ export const ftmodalStyles = css `
     }
 
     [part=overlay] {
+        animation-duration: 0.1s;
+        animation-name: fade-in;
+        animation-timing-function: ease-in-out;
+
         position: absolute;
         inset: 0;
         background-color: ${FtModalCssVariables.overlayBackgroundColor};
@@ -64,7 +89,6 @@ export const ftmodalStyles = css `
         }
     }
 
-
     [part=header] {
         padding: ${FtModalCssVariables.headerPadding};
         display: flex;
@@ -76,6 +100,7 @@ export const ftmodalStyles = css `
         color: ${FtModalCssVariables.headerColor};
         background-color: ${FtModalCssVariables.headerBackgroundColor};
         border-radius: ${FtModalCssVariables.borderRadius} ${FtModalCssVariables.borderRadius} 0px 0px;
+        flex-shrink: 0;
     }
 
     [part=heading] {
@@ -101,10 +126,12 @@ export const ftmodalStyles = css `
         color: ${FtModalCssVariables.contentColor};
         background-color: ${FtModalCssVariables.contentBackgroundColor};
         border-radius: 0px 0px ${FtModalCssVariables.borderRadius} ${FtModalCssVariables.borderRadius};
+        overflow: auto;
     }
 
     [part=content] {
         flex-grow: 1;
+        overflow: auto;
     }
 
     [part=actions] {
@@ -116,4 +143,37 @@ export const ftmodalStyles = css `
     [part=closing-button] {
         color: ${FtModalCssVariables.closingButtonColor};
     }
+
+    @media (max-width: 768px) {
+        [part=header],
+        [part=body] {
+            border-radius: 0;
+        }
+    }
+
+    [part=inner-container].drawer {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        margin-right: 0;
+        max-height: 100%;
+
+        animation-duration: 0.2s;
+        animation-name: slide-in-from-right;
+        animation-timing-function: cubic-bezier(.46,0,.31,.95);
+
+        @media (min-width: 768px) {
+            transform: none;
+            height: 100%;
+        }
+    }
+
+    .drawer [part=header],
+    .drawer [part=body] {
+        border-radius: 0;
+    }
+
+    .drawer [part=header] {
+        flex-direction: row-reverse;
+    }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ft-modal",
-    "version": "1.3.46",
+    "version": "1.3.48",
     "description": "Modal for Design System V2",
     "keywords": [
         "Lit"
@@ -19,11 +19,11 @@
         "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
     },
     "dependencies": {
-        "@fluid-topics/ft-wc-utils": "1.3.46",
+        "@fluid-topics/ft-wc-utils": "1.3.48",
         "lit": "3.1.0"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "1.3.46"
+        "@fluid-topics/ft-wc-test-utils": "1.3.48"
     },
-    "gitHead": "d6cf25d6ed0dead8c7aff4f94a493c35d12f1392"
+    "gitHead": "39b6d455dce42316360287db7fb6a16e0d3eeb93"
 }