@xenknight/framework7 0.0.2

package/components/notification/notification-vars.less

@@ -0,0 +1,75 @@
+:root {
+  --f7-notification-max-width: 568px;
+  --f7-notification-subtitle-text-transform: none;
+  --f7-notification-subtitle-line-height: 1.35;
+  --f7-notification-text-text-transform: none;
+  --f7-notification-text-font-weight: 400;
+}
+.ios-vars({
+  --f7-notification-margin: 8px;
+  --f7-notification-padding-horizontal: 10px;
+  --f7-notification-padding-vertical: 10px;
+  --f7-notification-border-radius: 12px;
+  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
+  --f7-notification-icon-size: 20px;
+
+  --f7-notification-title-font-size: 13px;
+  --f7-notification-title-text-transform: uppercase;
+  --f7-notification-title-line-height: 1.4;
+  --f7-notification-title-font-weight: 400;
+  --f7-notification-title-letter-spacing: 0.02em;
+
+  --f7-notification-title-right-font-size: 13px;
+
+  --f7-notification-subtitle-font-size: 15px;
+  --f7-notification-subtitle-font-weight: 600;
+
+  --f7-notification-text-font-size: 15px;
+  --f7-notification-text-line-height: 1.2;
+  .light-vars({
+    --f7-notification-bg-color: rgba(250,250,250,0.95);
+    --f7-notification-bg-color-rgb: 255, 255, 255;
+    --f7-notification-title-color: #000;
+    --f7-notification-title-right-color: rgba(0,0,0,0.45);
+    --f7-notification-subtitle-color: #000;
+    --f7-notification-text-color: #000;
+  });
+  .dark-vars({
+    --f7-notification-bg-color: rgba(30,30,30,0.95);
+    --f7-notification-bg-color-rgb: 30, 30, 30;
+    --f7-notification-title-color: #fff;
+    --f7-notification-text-color: #fff;
+    --f7-notification-subtitle-color: #fff;
+    --f7-notification-title-right-color: rgba(255,255,255,0.55);
+  });
+});
+.md-vars({
+  --f7-notification-margin: 16px;
+  --f7-notification-padding-vertical: 20px;
+  --f7-notification-padding-horizontal: 16px;
+  --f7-notification-border-radius: 16px;
+  --f7-notification-box-shadow: none;
+  --f7-notification-icon-size: 24px;
+
+  --f7-notification-title-font-size: 16px;
+  --f7-notification-title-text-transform: none;
+  --f7-notification-title-line-height: 1.35;
+  --f7-notification-title-font-weight: 500;
+
+  --f7-notification-title-right-font-size: 12px;
+
+  --f7-notification-subtitle-font-size: 14px;
+  --f7-notification-subtitle-font-weight: 400;
+
+  --f7-notification-text-font-size: 14px;
+  --f7-notification-text-line-height: 1.35;
+
+});
+
+.md-color-vars({
+  --f7-notification-title-color: var(--f7-md-on-surface);
+  --f7-notification-bg-color: var(--f7-md-surface-5);
+  --f7-notification-text-color: var(--f7-md-on-surface-variant);
+  --f7-notification-title-right-color: var(--f7-md-on-surface-variant);
+  --f7-notification-subtitle-color: var(--f7-md-on-surface);
+});

package/components/notification/notification.css

@@ -0,0 +1 @@
+:root{--f7-notification-max-width:568px;--f7-notification-subtitle-text-transform:none;--f7-notification-subtitle-line-height:1.35;--f7-notification-text-text-transform:none;--f7-notification-text-font-weight:400}.ios{--f7-notification-margin:8px;--f7-notification-padding-horizontal:10px;--f7-notification-padding-vertical:10px;--f7-notification-border-radius:12px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:20px;--f7-notification-title-font-size:13px;--f7-notification-title-text-transform:uppercase;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:400;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:13px;--f7-notification-subtitle-font-size:15px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:15px;--f7-notification-text-line-height:1.2;--f7-notification-bg-color:rgba(250, 250, 250, 0.95);--f7-notification-bg-color-rgb:255,255,255;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.45);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.ios .dark,.ios.dark{--f7-notification-bg-color:rgba(30, 30, 30, 0.95);--f7-notification-bg-color-rgb:30,30,30;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-subtitle-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.55)}.md{--f7-notification-margin:16px;--f7-notification-padding-vertical:20px;--f7-notification-padding-horizontal:16px;--f7-notification-border-radius:16px;--f7-notification-box-shadow:none;--f7-notification-icon-size:24px;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.35;--f7-notification-title-font-weight:500;--f7-notification-title-right-font-size:12px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:400;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35}.md,.md .dark,.md [class*=color-]{--f7-notification-title-color:var(--f7-md-on-surface);--f7-notification-bg-color:var(--f7-md-surface-5);--f7-notification-text-color:var(--f7-md-on-surface-variant);--f7-notification-title-right-color:var(--f7-md-on-surface-variant);--f7-notification-subtitle-color:var(--f7-md-on-surface)}.notification{position:absolute;left:var(--f7-notification-margin);top:var(--f7-notification-margin);width:calc(100% - var(--f7-notification-margin) * 2);z-index:20000;font-size:14px;margin:0;border:none;display:none;box-sizing:border-box;transition-property:transform;direction:ltr;max-width:var(--f7-notification-max-width);padding:var(--f7-notification-padding-vertical) var(--f7-notification-padding-horizontal);border-radius:var(--f7-notification-border-radius);box-shadow:var(--f7-notification-box-shadow);background:var(--f7-notification-bg-color);margin-top:var(--f7-safe-area-top)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .notification{background-color:rgba(var(--f7-notification-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}@media (min-width:568px){.notification{left:50%;width:var(--f7-notification-max-width);margin-left:calc(-1 * var(--f7-notification-max-width)/ 2)}}.notification-title{color:var(--f7-notification-title-color,var(--f7-theme-color));font-size:var(--f7-notification-title-font-size);text-transform:var(--f7-notification-title-text-transform);line-height:var(--f7-notification-title-line-height);font-weight:var(--f7-notification-title-font-weight);letter-spacing:var(--f7-notification-title-letter-spacing)}.notification-subtitle{color:var(--f7-notification-subtitle-color);font-size:var(--f7-notification-subtitle-font-size);text-transform:var(--f7-notification-subtitle-text-transform);line-height:var(--f7-notification-subtitle-line-height);font-weight:var(--f7-notification-subtitle-font-weight)}.notification-text{color:var(--f7-notification-text-color);font-size:var(--f7-notification-text-font-size);text-transform:var(--f7-notification-text-text-transform);line-height:var(--f7-notification-text-line-height);font-weight:var(--f7-notification-text-font-weight)}.notification-title-right-text{color:var(--f7-notification-title-right-color);font-size:var(--f7-notification-title-right-font-size)}.notification-icon{font-size:0;line-height:var(--f7-notification-icon-size)}.notification-icon,.notification-icon i{width:var(--f7-notification-icon-size)!important;height:var(--f7-notification-icon-size)!important}.notification-icon i{font-size:var(--f7-notification-icon-size)}.notification-icon img{height:var(--f7-notification-icon-size)}.notification-header{display:flex;justify-content:flex-start;align-items:center}.notification-close-button{margin-left:auto;cursor:pointer;position:relative}.notification-close-button:after{font-family:framework7-core-icons;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga';display:block;width:100%;height:100%;font-size:20px;position:absolute;left:50%;top:50%;text-align:center}.ios .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.ios .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.ios .notification.modal-out{transform:translate3d(0%,-200%,0)}.ios .notification-icon{margin-right:8px}.ios .notification-header+.notification-content{margin-top:10px}.ios .notification-title-right-text{margin-right:6px;margin-left:auto}.ios .notification-title-right-text+.notification-close-button{margin-left:10px}.ios .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.3;transition-duration:.3s}.ios .notification-close-button.active-state{transition-duration:0s;opacity:.1}.ios .notification-close-button:after{color:#000;content:'notification_close_ios';font-size:.65em;line-height:44px;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.ios .dark .notification-close-button:after,.ios.dark .notification-close-button:after{color:#fff}.md .notification{transform:translate3d(0,-150%,0)}.md .notification.modal-in{transition-duration:.5s;transform:translate3d(0,0%,0);transition-timing-function:cubic-bezier(0,0.8,0.34,1)}.md .notification.modal-in.notification-transitioning{transition-duration:.2s}.md .notification.modal-out{animation:none;transition-duration:.2s;transition-timing-function:ease-in;transform:translate3d(0,-150%,0)}.md .notification-with-icon .notification-icon{position:absolute;left:var(--f7-notification-padding-horizontal);top:var(--f7-notification-padding-vertical)}.md .notification-with-icon .notification-content,.md .notification-with-icon .notification-header{margin-left:calc(var(--f7-notification-icon-size) + 16px)}.md .notification-icon{margin-right:8px}.md .notification-subtitle+.notification-text{margin-top:4px}.md .notification-header+.notification-content{margin-top:8px}.md .notification-title-right-text{margin-left:4px}.md .notification-title-right-text:before{content:'';width:3px;height:3px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:4px;background:var(--f7-notification-title-right-color)}.md .notification-close-button{width:16px;height:16px;transition-duration:.3s}.md .notification-close-button:after,.md .notification-close-button:before{width:48px;height:48px;left:50%;top:50%;margin-left:-24px;margin-top:-24px}.md .notification-close-button:after{color:var(--f7-md-on-surface-variant);content:'delete_round_md';line-height:48px;font-size:24px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}100%{transform:translate3d(0,0%,0)}}

package/components/notification/notification.d.ts

@@ -0,0 +1,122 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Notification {
+  interface Notification extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Notification HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with notification HTML element */
+    $el: Dom7Array;
+    /** Notification parameters */
+    params: Parameters;
+
+    /** Open notification */
+    open(animate?: boolean): Notification;
+    /** Close notification */
+    close(animate?: boolean): Notification;
+  }
+
+  interface Parameters {
+    /** Notification element. Can be useful if you already have Notification element in your HTML and want to create new instance using this element. */
+    el?: HTMLElement | CSSSelector;
+    /** Notification icon HTML layout, e.g. <i class="f7-icons">house</i> or image <img src="path/to/icon.png">. */
+    icon?: string;
+    /** Notification title. */
+    title?: string;
+    /** Additional text on the right side of title. */
+    titleRightText?: string;
+    /** Notification subtitle. */
+    subtitle?: string;
+    /** Notification inner text. */
+    text?: string;
+    /** Adds notification close button. (default false) */
+    closeButton?: boolean;
+    /** Timeout delay (in ms) to close notification automatically. */
+    closeTimeout?: number;
+    /** If enabled, notification will be closed on notification click. (default false) */
+    closeOnClick?: boolean;
+    /** If enabled, notification can be closed by swipe gesture. (default true) */
+    swipeToClose?: boolean;
+    /** Additional css class to add. */
+    cssClass?: string;
+    /** Element to mount notifications to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
+    /** Custom function to render Notification. Must return notification html. */
+    render?: (notification: Notification) => string;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+
+  interface Events {
+    /** Event will be triggered when user clicks on Notification element. As an argument event handler receives notification instance */
+    click: (notification: Notification) => void;
+    /** Event will be triggered when Notification starts its opening animation. As an argument event handler receives notification instance */
+    open: (notification: Notification) => void;
+    /** Event will be triggered after Notification completes its opening animation. As an argument event handler receives notification instance */
+    opened: (notification: Notification) => void;
+    /** Event will be triggered when Notification starts its closing animation. As an argument event handler receives notification instance */
+    close: (notification: Notification) => void;
+    /** Event will be triggered after Notification completes its closing animation. As an argument event handler receives notification instance */
+    closed: (notification: Notification) => void;
+    /** Event will be triggered right before Notification instance will be destroyed. As an argument event handler receives notification instance */
+    beforeDestroy: (notification: Notification) => void;
+  }
+
+  interface DomEvents {
+    /** Event will be triggered when Notification starts its opening animation */
+    'notification:open': () => void;
+    /** Event will be triggered after Notification completes its opening animation */
+    'notification:opened': () => void;
+    /** Event will be triggered when Notification starts its closing animation */
+    'notification:close': () => void;
+    /** Event will be triggered after Notification completes its closing animation */
+    'notification:closed': () => void;
+  }
+  interface AppMethods {
+    notification: {
+      /** create Notification instance */
+      create(parameters: Parameters): Notification;
+
+      /** destroy Notification instance */
+      destroy(el: HTMLElement | CSSSelector | Notification): void;
+
+      /** get Notification instance by HTML element */
+      get(el: HTMLElement | CSSSelector): Notification;
+
+      /** open Notification */
+      open(el: HTMLElement | CSSSelector, animate?: boolean): Notification;
+
+      /** closes Notification */
+      close(el: HTMLElement | CSSSelector, animate?: boolean): Notification;
+    };
+  }
+  interface AppParams {
+    notification?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when user clicks on Notification element. As an argument event handler receives notification instance */
+    notificationClick: (notification: Notification) => void;
+    /** Event will be triggered when Notification starts its opening animation. As an argument event handler receives notification instance */
+    notificationOpen: (notification: Notification) => void;
+    /** Event will be triggered after Notification completes its opening animation. As an argument event handler receives notification instance */
+    notificationOpened: (notification: Notification) => void;
+    /** Event will be triggered when Notification starts its closing animation. As an argument event handler receives notification instance */
+    notificationClose: (notification: Notification) => void;
+    /** Event will be triggered after Notification completes its closing animation. As an argument event handler receives notification instance */
+    notificationClosed: (notification: Notification) => void;
+    /** Event will be triggered right before Notification instance will be destroyed. As an argument event handler receives notification instance */
+    notificationBeforeDestroy: (notification: Notification) => void;
+  }
+}
+
+declare const NotificationComponent: Framework7Plugin;
+
+export default NotificationComponent;

package/components/notification/notification.js

@@ -0,0 +1,33 @@
+import { extend } from '../../shared/utils.js';
+import Notification from './notification-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'notification',
+  static: {
+    Notification
+  },
+  create() {
+    const app = this;
+    app.notification = extend({}, ModalMethods({
+      app,
+      constructor: Notification,
+      defaultSelector: '.notification.modal-in'
+    }));
+  },
+  params: {
+    notification: {
+      icon: null,
+      title: null,
+      titleRightText: null,
+      subtitle: null,
+      text: null,
+      closeButton: false,
+      closeTimeout: null,
+      closeOnClick: false,
+      swipeToClose: true,
+      cssClass: null,
+      render: null,
+      containerEl: null
+    }
+  }
+};

package/components/notification/notification.less

@@ -0,0 +1,94 @@
+/* === Notifications === */
+@import './notification-vars.less';
+
+.notification {
+  position: absolute;
+  left: var(--f7-notification-margin);
+  top: var(--f7-notification-margin);
+  width: calc(100% - var(--f7-notification-margin) * 2);
+  z-index: 20000;
+  font-size: 14px;
+  margin: 0;
+  border: none;
+  display: none;
+  box-sizing: border-box;
+  transition-property: transform;
+  direction: ltr;
+  max-width: var(--f7-notification-max-width);
+  padding: var(--f7-notification-padding-vertical) var(--f7-notification-padding-horizontal);
+  border-radius: var(--f7-notification-border-radius);
+  box-shadow: var(--f7-notification-box-shadow);
+  background: var(--f7-notification-bg-color);
+  margin-top: var(--f7-safe-area-top);
+  .ios-translucent-modals(var(--f7-notification-bg-color-rgb));
+  @media (min-width: 568px) {
+    left: 50%;
+    width: var(--f7-notification-max-width);
+    margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
+  }
+}
+.notification-title {
+  color: var(--f7-notification-title-color, var(--f7-theme-color));
+  font-size: var(--f7-notification-title-font-size);
+  text-transform: var(--f7-notification-title-text-transform);
+  line-height: var(--f7-notification-title-line-height);
+  font-weight: var(--f7-notification-title-font-weight);
+  letter-spacing: var(--f7-notification-title-letter-spacing);
+}
+.notification-subtitle {
+  color: var(--f7-notification-subtitle-color);
+  font-size: var(--f7-notification-subtitle-font-size);
+  text-transform: var(--f7-notification-subtitle-text-transform);
+  line-height: var(--f7-notification-subtitle-line-height);
+  font-weight: var(--f7-notification-subtitle-font-weight);
+}
+.notification-text {
+  color: var(--f7-notification-text-color);
+  font-size: var(--f7-notification-text-font-size);
+  text-transform: var(--f7-notification-text-text-transform);
+  line-height: var(--f7-notification-text-line-height);
+  font-weight: var(--f7-notification-text-font-weight);
+}
+.notification-title-right-text {
+  color: var(--f7-notification-title-right-color);
+  font-size: var(--f7-notification-title-right-font-size);
+}
+.notification-icon {
+  font-size: 0;
+  line-height: var(--f7-notification-icon-size);
+  i,
+  & {
+    width: var(--f7-notification-icon-size) !important;
+    height: var(--f7-notification-icon-size) !important;
+  }
+  i {
+    font-size: var(--f7-notification-icon-size);
+  }
+  img {
+    height: var(--f7-notification-icon-size);
+  }
+}
+.notification-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.notification-close-button {
+  margin-left: auto;
+  cursor: pointer;
+  position: relative;
+  &:after {
+    .core-icons-font();
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    text-align: center;
+  }
+}
+
+.if-ios-theme({
+  @import './notification-ios.less';
+});
+.if-md-theme({
+  @import './notification-md.less';
+});

package/components/page/page-ios.less

@@ -0,0 +1,154 @@
+.ios {
+  .rtl({
+    .page-previous {
+      transform: translate3d(20%, 0, 0);
+    }
+    .page-next {
+      transform: translate3d(-100%, 0, 0);
+    }
+  });
+  .ltr({
+    .page-previous {
+      transform: translate3d(-20%, 0, 0);
+    }
+    .page-next {
+      transform: translate3d(100%, 0, 0);
+    }
+  });
+  .page-previous {
+    .page-opacity-effect {
+      opacity: 1;
+    }
+    &:after {
+      opacity: 1;
+    }
+  }
+  .page-current {
+    .page-shadow-effect {
+      opacity: 1;
+    }
+  }
+
+  .router-transition-forward {
+    .page-next {
+      animation: ios-page-next-to-current var(--f7-page-transition-duration) forwards;
+      &:before {
+        // Fake opacity
+        .page-fake-shadow();
+        animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
+      }
+    }
+    .page-current {
+      // From current to previous
+      animation: ios-page-current-to-previous var(--f7-page-transition-duration) forwards;
+      &:after {
+        // Fake opacity
+        .page-fake-opacity();
+        animation: ios-page-element-fade-in var(--f7-page-transition-duration) forwards;
+      }
+    }
+  }
+  .router-transition-backward {
+    .page-previous {
+      // From previous to current
+      animation: ios-page-previous-to-current var(--f7-page-transition-duration) forwards;
+      &:after {
+        // Fake opacity
+        .page-fake-opacity();
+        animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
+      }
+    }
+    .page-current {
+      // From current to next
+      animation: ios-page-current-to-next var(--f7-page-transition-duration) forwards;
+      &:before {
+        .page-fake-shadow();
+        animation: ios-page-element-fade-out var(--f7-page-transition-duration) forwards;
+      }
+    }
+  }
+}
+.ltr({
+  @keyframes ios-page-next-to-current {
+    from {
+      transform: translate3d(100%,0,0);
+    }
+    to {
+      transform: translate3d(0%,0,0);
+    }
+  }
+  @keyframes ios-page-previous-to-current {
+    from {
+      transform: translate3d(-20%,0,0);
+    }
+    to {
+      transform: translate3d(0%,0,0);
+    }
+  }
+  @keyframes ios-page-current-to-previous {
+    from {
+      transform: translate3d(0,0,0);
+    }
+    to {
+      transform: translate3d(-20%,0,0);
+    }
+  }
+  @keyframes ios-page-current-to-next {
+    from {
+      transform: translate3d(0,0,0);
+    }
+    to {
+      transform: translate3d(100%,0,0);
+    }
+  }
+});
+.rtl({
+  @keyframes ios-page-next-to-current {
+    from {
+      transform: translate3d(-100%,0,0);
+    }
+    to {
+      transform: translate3d(0%,0,0);
+    }
+  }
+  @keyframes ios-page-previous-to-current {
+    from {
+      transform: translate3d(20%,0,0);
+    }
+    to {
+      transform: translate3d(0%,0,0);
+    }
+  }
+  @keyframes ios-page-current-to-previous {
+    from {
+      transform: translate3d(0,0,0);
+    }
+    to {
+      transform: translate3d(20%,0,0);
+    }
+  }
+  @keyframes ios-page-current-to-next {
+    from {
+      transform: translate3d(0,0,0);
+    }
+    to {
+      transform: translate3d(-100%,0,0);
+    }
+  }
+});
+@keyframes ios-page-element-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes ios-page-element-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

package/components/page/page-md.less

@@ -0,0 +1,83 @@
+.md {
+  .page-previous {
+    transform: translate3d(0, -20px, 0);
+  }
+  .page-next {
+    pointer-events: none;
+    transform: translate3d(0, 128px, 0);
+    opacity: 0;
+    &.page-next-on-right {
+      .ltr({
+        transform: translate3d(100%, 0, 0);
+        opacity: 1;
+      });
+      .rtl({
+        transform: translate3d(-100%, 0, 0);
+        opacity: 1;
+      });
+    }
+  }
+  // Animations
+  .router-transition-forward {
+    .page-next {
+      opacity: 1;
+      animation: md-page-next-to-current var(--f7-page-transition-duration) forwards
+        cubic-bezier(0, 0.8, 0.3, 1);
+    }
+    .page-current {
+      animation: md-page-current-to-previous var(--f7-page-transition-duration) forwards
+        cubic-bezier(0, 0.8, 0.3, 1);
+    }
+  }
+  .router-transition-backward {
+    .page-current {
+      animation:
+        md-page-current-to-next calc(var(--f7-page-transition-duration) / 4) forwards
+          cubic-bezier(0.8, 0, 1, 0.3),
+        md-page-current-to-next-opacity 0ms calc(var(--f7-page-transition-duration) / 4) forwards;
+    }
+    .page-previous {
+      animation: md-page-previous-to-current var(--f7-page-transition-duration) forwards;
+    }
+  }
+}
+@keyframes md-page-next-to-current {
+  from {
+    transform: translate3d(0, 128px, 0);
+  }
+  to {
+    transform: translate3d(0, 0px, 0);
+  }
+}
+@keyframes md-page-current-to-next {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, 128px, 0);
+  }
+}
+@keyframes md-page-current-to-next-opacity {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes md-page-current-to-previous {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, -20px, 0);
+  }
+}
+@keyframes md-page-previous-to-current {
+  from {
+    transform: translate3d(0, -20px, 0);
+  }
+  to {
+    transform: translate3d(0, 0px, 0);
+  }
+}

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

@@ -0,0 +1,107 @@
+// f7-circle
+.router-transition-f7-circle-forward,
+.router-transition-f7-circle-backward {
+  &:after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 100vmax;
+    height: 100vmax;
+    margin-left: -50vmax;
+    margin-top: -50vmax;
+    background: var(--f7-page-bg-color);
+    z-index: 100;
+  }
+  .page {
+    pointer-events: none;
+  }
+}
+.router-transition-f7-circle-forward {
+  &:after {
+    transform: scale(0);
+    border-radius: 50%;
+    animation: f7-circle-circle-in 400ms forwards;
+  }
+  .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 {
+  &:after {
+    animation: f7-circle-circle-out 300ms forwards;
+    animation-delay: 350ms;
+  }
+  .ios &,
+  .md & {
+    .page-current {
+      animation: f7-circle-current-to-next 700ms forwards;
+      z-index: 150;
+    }
+  }
+}
+@keyframes f7-circle-circle-in {
+  from {
+    transform: scale(0);
+    border-radius: 50%;
+  }
+  50% {
+    border-radius: 50%;
+  }
+  to {
+    transform: scale(1);
+    border-radius: 0%;
+  }
+}
+@keyframes f7-circle-circle-out {
+  from {
+    transform: scale(1);
+    border-radius: 0%;
+  }
+  50% {
+    border-radius: 50%;
+  }
+  to {
+    transform: scale(0);
+    border-radius: 50%;
+  }
+}
+@keyframes f7-circle-next-to-current {
+  from {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  40% {
+    transform: scale(1.035);
+    opacity: 1;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes f7-circle-current-to-next {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  34% {
+    transform: scale(1.035);
+    opacity: 1;
+  }
+  57% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+  to {
+    transform: scale(0.9);
+    opacity: 0;
+  }
+}