feat(panel): m3 styles + remove panels shadows

framework7io · Sep 27, 2022 · a67c370 · a67c370
1 parent 32daed7
commit a67c370
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 46 deletions.
diff --git a/src/core/components/panel/panel-md.less b/src/core/components/panel/panel-md.less
@@ -1,2 +1,15 @@
 .md {
+  .panel,
+  .panel-backdrop {
+    transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+  }
+  .panel-cover {
+    overflow: hidden;
+    &.panel-left {
+      border-radius: 0 16px 16px 0;
+    }
+    &.panel-right {
+      border-radius: 16px 0 0 16px;
+    }
+  }
 }
diff --git a/src/core/components/panel/panel-vars.less b/src/core/components/panel/panel-vars.less
@@ -15,16 +15,9 @@
   --f7-panel-collapsed-width: 58px;
   --f7-panel-backdrop-bg-color: rgba(0,0,0,0);
   --f7-panel-transition-duration: 400ms;
-  --f7-panel-shadow: transparent;
 });
 .md-vars({
   --f7-panel-collapsed-width: 60px;
   --f7-panel-backdrop-bg-color: rgba(0,0,0,0.3);
-  --f7-panel-transition-duration: 300ms;
-  --f7-panel-shadow:
-    rgba(0, 0, 0, 0.2) 0%,
-    rgba(0, 0, 0, 0.07) 30%,
-    rgba(0, 0, 0, 0.03) 40%,
-    rgba(0, 0, 0, 0) 60%,
-    rgba(0, 0, 0, 0) 100%;
+  --f7-panel-transition-duration: 400ms;
 });
diff --git a/src/core/components/panel/panel.less b/src/core/components/panel/panel.less
@@ -82,24 +82,6 @@
   &.panel-cover,
   &.panel-push {
     transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
-    &:after {
-      left: 100%;
-      background: linear-gradient(to right, var(--f7-panel-shadow));
-      .with-panel-left-cover & {
-        opacity: 1;
-      }
-    }
-  }
-  &.panel-reveal {
-    &:after {
-      right: 0;
-      transform: translate3d(calc(-1 * var(--f7-panel-left-width, var(--f7-panel-width))), 0, 0);
-      background: linear-gradient(to left, var(--f7-panel-shadow));
-      .with-panel-left-reveal & {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-    }
   }
 }
 .panel-right {
@@ -108,24 +90,6 @@
   &.panel-cover,
   &.panel-push {
     transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
-    &:after {
-      right: 100%;
-      background: linear-gradient(to left, var(--f7-panel-shadow));
-      .with-panel-right-cover & {
-        opacity: 1;
-      }
-    }
-  }
-  &.panel-reveal {
-    &:after {
-      left: 0;
-      background: linear-gradient(to right, var(--f7-panel-shadow));
-      transform: translate3d(var(--f7-panel-right-width, var(--f7-panel-width)), 0, 0);
-      .with-panel-right-reveal & {
-        opacity: 1;
-        transform: translate3d(0, 0, 0);
-      }
-    }
   }
 }
 .panel-in-breakpoint {
@@ -148,6 +112,7 @@ html {
     .framework7-root > .view {
       transition-duration: var(--f7-panel-transition-duration);
       transition-property: transform;
+      transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
     }
   }
   &.with-panel {
@@ -193,6 +158,7 @@ html {
     > .tabs {
       transition-duration: var(--f7-panel-transition-duration);
       transition-property: transform;
+      transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
     }
   }
   &.with-panel-left-reveal,
@@ -210,15 +176,15 @@ html {
     }
   }
 }
-.with-panel-left-reveal,
-.with-panel-right-reveal,
 .with-panel-closing {
   .panel-backdrop-in {
     visibility: visible;
     pointer-events: auto;
     opacity: 0;
   }
 }
+.with-panel-left-reveal,
+.with-panel-right-reveal,
 .with-panel-left-cover,
 .with-panel-right-cover,
 .with-panel-left-push,
@@ -229,6 +195,7 @@ html {
     opacity: 1;
   }
 }
+
 .with-panel-left-reveal,
 .with-panel-left-push {
   .panel-backdrop-in {