feat(sheet): m3 styles

nolimits4web · nolimits4web · commit fd17aed5331f · 2022-09-29T15:12:00.000+03:00
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);
       }
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`}`
`8`	`8`	`}`
`9`	`9`	`.sheet-modal {`
	`10`	`+ overflow: hidden;`
`10`	`11`	`position: absolute;`
`11`	`12`	`left: 0;`
`12`	`13`	`bottom: 0;`
`@@ -59,7 +60,12 @@`
`59`	`60`	`}`
`60`	`61`	`}`
`61`	`62`	`}`
	`63`	`+.sheet-backdrop,`
	`64`	`+.sheet-modal {`
	`65`	`+ transition-timing-function: var(--f7-sheet-transition-timing-function);`
	`66`	`+}`
`62`	`67`	`.sheet-modal-top {`
	`68`	`+ border-radius: 0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius);`
`63`	`69`	`.hairline(bottom, var(--f7-sheet-border-color));`
`64`	`70`	`&:after {`
`65`	`71`	`z-index: 700;`
`@@ -70,6 +76,7 @@`
`70`	`76`	`.sheet-modal-bottom,`
`71`	`77`	`.sheet-modal:not(.sheet-modal-top) {`
`72`	`78`	`--f7-safe-area-top: 0px;`
	`79`	`+ border-radius: var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0;`
`73`	`80`	`.hairline(top, var(--f7-sheet-border-color));`
`74`	`81`	`&:before {`
`75`	`82`	`z-index: 700;`
`@@ -112,6 +119,7 @@ html.with-modal-sheet-push-closing {`
`112`	`119`	`> .views,`
`113`	`120`	`> .view {`
`114`	`121`	`transition-duration: var(--f7-sheet-transition-duration);`
	`122`	`+ transition-timing-function: var(--f7-sheet-transition-timing-function);`
`115`	`123`	`}`
`116`	`124`	`}`
`117`	`125`	`.if-dark-theme({`
`@@ -136,6 +144,7 @@ html.with-modal-sheet-push-closing {`
`136`	`144`	`border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;`
`137`	`145`	`opacity: 1;`
`138`	`146`	`animation: sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;`
	`147`	`+ animation-timing-function: var(--f7-sheet-transition-timing-function);`
`139`	`148`	`}`
`140`	`149`	`}`
`141`	`150`	`});`
`@@ -162,6 +171,7 @@ html.with-modal-sheet-push {`
`162`	`171`	`.framework7-root > .view.dark {`
`163`	`172`	`&:after {`
`164`	`173`	`animation: sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;`
	`174`	`+ animation-timing-function: var(--f7-sheet-transition-timing-function);`
`165`	`175`	`}`
`166`	`176`	`}`
`167`	`177`	`}`