framework7 7.1.5 → 8.0.0-beta.2

package/components/page/page-transitions/circle.less

@@ -20,12 +20,15 @@
     border-radius: 50%;
     animation: f7-circle-circle-in 400ms forwards;
   }
-  .page-next {
-    opacity: 0 !important;
-    transform: scale(0.9) !important;
-    animation: f7-circle-next-to-current 300ms forwards;
-    animation-delay: 300ms;
-    z-index: 150;
+  .ios &,
+  .md & {
+    .page-next {
+      opacity: 0;
+      transform: scale(0.9);
+      animation: f7-circle-next-to-current 300ms forwards;
+      animation-delay: 300ms;
+      z-index: 150;
+    }
   }
 }
 .router-transition-f7-circle-backward {
@@ -33,9 +36,12 @@
     animation: f7-circle-circle-out 300ms forwards;
     animation-delay: 350ms;
   }
-  .page-current {
-    animation: f7-circle-current-to-next 700ms forwards;
-    z-index: 150;
+  .ios &,
+  .md & {
+    .page-current {
+      animation: f7-circle-current-to-next 700ms forwards;
+      z-index: 150;
+    }
   }
 }
 @keyframes f7-circle-circle-in {

package/components/page/page-transitions/fade.less

@@ -4,20 +4,26 @@
   background: var(--f7-page-bg-color);
 }
 .router-transition-f7-fade-forward {
-  .page-next {
-    opacity: 0 !important;
-    animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
-  }
-  .page-current {
-    animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
+  .ios &,
+  .md & {
+    .page-next {
+      opacity: 0;
+      animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
+    }
+    .page-current {
+      animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
+    }
   }
 }
 .router-transition-f7-fade-backward {
-  .page-current {
-    animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
-  }
-  .page-previous {
-    animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
+  .ios &,
+  .md & {
+    .page-current {
+      animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
+    }
+    .page-previous {
+      animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
+    }
   }
 }
 @keyframes f7-fade-in {

package/components/page/page-transitions/flip.less

@@ -5,27 +5,32 @@
   perspective: 1200px;
   .page {
     backface-visibility: hidden;
+    overflow: hidden;
   }
 }
 .router-transition-f7-flip-forward {
   .page-next {
+    transform-style: preserve-3d;
     animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
   }
   .page-current {
+    transform-style: preserve-3d;
     animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
   }
 }
 .router-transition-f7-flip-backward {
   .page-current {
+    transform-style: preserve-3d;
     animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
   }
   .page-previous {
+    transform-style: preserve-3d;
     animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
   }
 }
 @keyframes f7-flip-next-to-current {
   from {
-    border-radius: 30px;
+    border-radius: 32px;
     .ltr({
       transform: translateZ(-100vmax) rotateY(180deg);
     });
@@ -44,7 +49,7 @@
     transform: translateZ(0px) rotateY(0deg);
   }
   to {
-    border-radius: 30px;
+    border-radius: 32px;
     .ltr({
       transform: translateZ(-100vmax) rotateY(180deg);
     });
@@ -59,7 +64,7 @@
     transform: translateZ(0px) rotateY(0deg);
   }
   to {
-    border-radius: 30px;
+    border-radius: 32px;
     .ltr({
       transform: translateZ(-100vmax) rotateY(-180deg);
     });
@@ -70,7 +75,7 @@
 }
 @keyframes f7-flip-prev-to-current {
   from {
-    border-radius: 30px;
+    border-radius: 32px;
     .ltr({
       transform: translateZ(-100vmax) rotateY(-180deg);
     });

package/components/page/page-vars.less

@@ -33,30 +33,14 @@
 
 });
 .md-vars({
-  --f7-page-transition-duration: 250ms;
+  --f7-page-transition-duration: 400ms;
   --f7-page-title-font-size: 34px;
   --f7-page-title-font-weight: 500;
   --f7-page-title-letter-spacing: 0;
   --f7-page-title-padding-vertical: 8px;
-  .light-vars({
-    --f7-page-bg-color: #fff;
-  });
-  .dark-vars({
-    --f7-page-bg-color: #121212;
-  });
 });
-.aurora-vars({
-  --f7-page-transition-duration: 250ms;
-  --f7-page-title-font-size: 28px;
-  --f7-page-title-font-weight: bold;
-  --f7-page-title-letter-spacing: 0;
-  --f7-page-title-padding-vertical: 7px;
-  .light-vars({
-    --f7-page-bg-color: #f3f4f6;
-  });
-  .dark-vars({
-    --f7-page-bg-color: #121212;
-  });
+.md-color-vars({
+  --f7-page-bg-color: var(--f7-md-surface);
 });
 .dark {
   --f7-page-master-border-color: rgba(255, 255, 255, 0.2);

package/components/page/page.less

@@ -16,9 +16,6 @@
   transform: none;
   background-color: var(--f7-page-bg-color);
   z-index: 1;
-  &.stacked {
-    display: none;
-  }
 }
 .page-with-navbar-large-collapsed {
   --f7-navbar-large-collapse-progress: 1;
@@ -59,8 +56,7 @@
 .router-transition-forward,
 .router-transition-backward {
   .page-next,
-  .page-current,
-  .page-previous:not(.stacked) {
+  .page-current {
     pointer-events: none;
   }
 }
@@ -105,9 +101,6 @@
 .if-md-theme({
   @import './page-md.less';
 });
-.if-aurora-theme({
-  @import './page-aurora.less';
-});
 
 .view:not(.view-master-detail) {
   .page-master-stacked {
@@ -171,8 +164,7 @@
   }
 }
 .md .router-transition-custom,
-.ios .router-transition-custom,
-.aurora .router-transition-custom {
+.ios .router-transition-custom {
   .page-previous,
   .page-next {
     opacity: 1;