feat(sheet): m3 styles

framework7io · Sep 29, 2022 · fd17aed · fd17aed
1 parent ff86338
commit fd17aed
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/src/core/components/sheet/sheet-vars.less b/src/core/components/sheet/sheet-vars.less
@@ -1,16 +1,25 @@
 :root {
   --f7-sheet-height: 260px;
-  --f7-sheet-border-color: transparent;
-  --f7-sheet-transition-duration: 300ms;
-  --f7-sheet-push-border-radius: 10px;
   --f7-sheet-push-offset: var(--f7-safe-area-top);
+}
+.ios-vars({
+  --f7-sheet-border-radius: 0px;
+  --f7-sheet-border-color: var(--f7-bars-border-color);
+  --f7-sheet-transition-timing-function: initial;
+  --f7-sheet-push-border-radius: 10px;
+  --f7-sheet-transition-duration: 300ms;
   .light-vars({
     --f7-sheet-bg-color: #fff;
   });
   .dark-vars({
     --f7-sheet-bg-color: #202020;
   });
-}
-.ios-vars({
-  --f7-sheet-border-color: var(--f7-bars-border-color);
+});
+.md-vars({
+  --f7-sheet-border-radius: 16px;
+  --f7-sheet-push-border-radius: 16px;
+  --f7-sheet-border-color: transparent;
+  --f7-sheet-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+  --f7-sheet-bg-color: var(--f7-md-surface);
+  --f7-sheet-transition-duration: 400ms;
 });
diff --git a/src/core/components/sheet/sheet.less b/src/core/components/sheet/sheet.less
@@ -7,6 +7,7 @@
   }
 }
 .sheet-modal {
+  overflow: hidden;
   position: absolute;
   left: 0;
   bottom: 0;
@@ -59,7 +60,12 @@
     }
   }
 }
+.sheet-backdrop,
+.sheet-modal {
+  transition-timing-function: var(--f7-sheet-transition-timing-function);
+}
 .sheet-modal-top {
+  border-radius: 0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius);
   .hairline(bottom, var(--f7-sheet-border-color));
   &:after {
     z-index: 700;
@@ -70,6 +76,7 @@
 .sheet-modal-bottom,
 .sheet-modal:not(.sheet-modal-top) {
   --f7-safe-area-top: 0px;
+  border-radius: var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0;
   .hairline(top, var(--f7-sheet-border-color));
   &:before {
     z-index: 700;
@@ -112,6 +119,7 @@ html.with-modal-sheet-push-closing {
     > .views,
     > .view {
       transition-duration: var(--f7-sheet-transition-duration);
+      transition-timing-function: var(--f7-sheet-transition-timing-function);
     }
   }
   .if-dark-theme({
@@ -136,6 +144,7 @@ html.with-modal-sheet-push-closing {
         border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
         opacity: 1;
         animation: sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;
+        animation-timing-function: var(--f7-sheet-transition-timing-function);
       }
     }
   });
@@ -162,6 +171,7 @@ html.with-modal-sheet-push {
     .framework7-root > .view.dark {
       &:after {
         animation: sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;
+        animation-timing-function: var(--f7-sheet-transition-timing-function);
       }
     }
   }