framework7 7.1.5 → 8.0.0-beta.2

package/components/navbar/navbar.less

@@ -27,9 +27,7 @@
   height: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
   color: var(--f7-navbar-text-color, var(--f7-bars-text-color));
   font-size: var(--f7-navbar-font-size);
-  &.stacked {
-    display: none;
-  }
+
   b {
     font-weight: 500;
   }
@@ -89,10 +87,8 @@
     height: 100%;
   }
 
-  &.no-hairline,
-  &.no-border,
-  .no-hairline,
-  .no-border {
+  &.no-outline,
+  .no-outline {
     .navbar-bg:after {
       display: none !important;
     }
@@ -100,12 +96,7 @@
       display: none !important;
     }
   }
-  &.no-shadow,
-  .no-shadow {
-    .navbar-bg:before {
-      display: none !important;
-    }
-  }
+
   &.navbar-hidden,
   .navbar-hidden & {
     .navbar-bg:before {
@@ -122,7 +113,6 @@
   pointer-events: none;
   z-index: 0;
   background: var(--f7-navbar-bg-color);
-  background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
   background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
   transition-property: transform;
   .ios-translucent-bars(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
@@ -131,16 +121,10 @@
     backface-visibility: hidden;
   }
   .hairline(bottom, var(--f7-navbar-border-color, var(--f7-bars-border-color)));
-  .bar-shadow-bottom(var(--f7-navbar-shadow-image));
   &:after {
     z-index: 1;
   }
 }
-:root {
-  @media (min-width: 768px) and (min-height: 600px) {
-    --f7-navbar-height: var(--f7-navbar-tablet-height);
-  }
-}
 // Transitions
 .navbar-transitioning {
   &,
@@ -227,8 +211,6 @@
 .navbar-large-transparent .navbar-bg,
 .navbar-large.navbar-transparent .navbar-bg {
   opacity: var(--f7-navbar-large-collapse-progress);
-  height: 100%;
-  transform: none;
 }
 .ios .router-navbar-transition-to-large .navbar-bg,
 .ios .router-navbar-transition-from-large .navbar-bg,
@@ -262,7 +244,6 @@
   right: 0;
   top: 100%;
   display: flex;
-  align-items: flex-end;
   white-space: nowrap;
   overflow: hidden;
   height: var(--f7-navbar-large-title-height);
@@ -326,6 +307,3 @@
 .if-md-theme({
   @import './navbar-md.less';
 });
-.if-aurora-theme({
-  @import './navbar-aurora.less';
-});

package/components/notification/notification-class.js

@@ -2,15 +2,14 @@ import $ from '../../shared/dom7.js';
 import { extend, now, nextTick } from '../../shared/utils.js';
 import Modal from '../modal/modal-class.js';
 /** @jsx $jsx */
-
 import $jsx from '../../shared/$jsx.js';
-
 class Notification extends Modal {
   constructor(app, params) {
     const extendedParams = extend({
       on: {}
-    }, app.params.notification, params); // Extends with open/close Modal methods;
+    }, app.params.notification, params);
 
+    // Extends with open/close Modal methods;
     super(app, extendedParams);
     const notification = this;
     notification.app = app;
@@ -27,7 +26,6 @@ class Notification extends Modal {
       closeOnClick
     } = notification.params;
     let $el;
-
     if (!notification.params.el) {
       // Find Element
       const notificationHtml = notification.render({
@@ -43,41 +41,35 @@ class Notification extends Modal {
     } else {
       $el = $(notification.params.el);
     }
-
     if ($el && $el.length > 0 && $el[0].f7Modal) {
       return $el[0].f7Modal;
     }
-
     if ($el.length === 0) {
       return notification.destroy();
     }
-
     extend(notification, {
       $el,
       el: $el[0],
       type: 'notification'
     });
     $el[0].f7Modal = notification;
-
     if (closeButton) {
       $el.find('.notification-close-button').on('click', () => {
         notification.close();
       });
     }
-
     $el.on('click', e => {
       if (closeButton && $(e.target).closest('.notification-close-button').length) {
         return;
       }
-
       notification.emit('local::click notificationClick', notification);
       if (closeOnClick) notification.close();
     });
     notification.on('beforeDestroy', () => {
       $el.off('click');
     });
-    /* Touch Events */
 
+    /* Touch Events */
     let isTouched;
     let isMoved;
     let isScrolling;
@@ -85,7 +77,6 @@ class Notification extends Modal {
     let touchStartTime;
     let notificationHeight;
     const touchesStart = {};
-
     function handleTouchStart(e) {
       if (isTouched) return;
       isTouched = true;
@@ -95,64 +86,50 @@ class Notification extends Modal {
       touchesStart.x = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
       touchesStart.y = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
     }
-
     function handleTouchMove(e) {
       if (!isTouched) return;
       const pageX = e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX;
       const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
-
       if (typeof isScrolling === 'undefined') {
         isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) < Math.abs(pageX - touchesStart.x));
       }
-
       if (isScrolling) {
         isTouched = false;
         return;
       }
-
       e.preventDefault();
-
       if (!isMoved) {
         notification.$el.removeClass('notification-transitioning');
         notification.$el.transition(0);
         notificationHeight = notification.$el[0].offsetHeight / 2;
       }
-
       isMoved = true;
       touchesDiff = pageY - touchesStart.y;
       let newTranslate = touchesDiff;
-
       if (touchesDiff > 0) {
         newTranslate = touchesDiff ** 0.8;
       }
-
       notification.$el.transform(`translate3d(0, ${newTranslate}px, 0)`);
     }
-
     function handleTouchEnd() {
       if (!isTouched || !isMoved) {
         isTouched = false;
         isMoved = false;
         return;
       }
-
       isTouched = false;
       isMoved = false;
-
       if (touchesDiff === 0) {
         return;
       }
-
       const timeDiff = now() - touchStartTime;
       notification.$el.transition('');
       notification.$el.addClass('notification-transitioning');
       notification.$el.transform('');
-
       if (touchesDiff < -10 && timeDiff < 300 || -touchesDiff >= notificationHeight / 1) {
         notification.close();
       }
     }
-
     function attachTouchEvents() {
       notification.$el.on(app.touchEvents.start, handleTouchStart, {
         passive: true
@@ -160,7 +137,6 @@ class Notification extends Modal {
       app.on('touchmove:active', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
     }
-
     function detachTouchEvents() {
       notification.$el.off(app.touchEvents.start, handleTouchStart, {
         passive: true
@@ -168,33 +144,26 @@ class Notification extends Modal {
       app.off('touchmove:active', handleTouchMove);
       app.off('touchend:passive', handleTouchEnd);
     }
-
     let timeoutId;
-
     function closeOnTimeout() {
       timeoutId = nextTick(() => {
         if (isTouched && isMoved) {
           closeOnTimeout();
           return;
         }
-
         notification.close();
       }, closeTimeout);
     }
-
     notification.on('open', () => {
       if (notification.params.swipeToClose) {
         attachTouchEvents();
       }
-
       $('.notification.modal-in').each(openedEl => {
         const notificationInstance = app.notification.get(openedEl);
-
         if (openedEl !== notification.el && notificationInstance) {
           notificationInstance.close();
         }
       });
-
       if (closeTimeout) {
         closeOnTimeout();
       }
@@ -203,12 +172,10 @@ class Notification extends Modal {
       if (notification.params.swipeToClose) {
         detachTouchEvents();
       }
-
       clearTimeout(timeoutId);
     });
     return notification;
   }
-
   render() {
     const notification = this;
     if (notification.params.render) return notification.params.render.call(notification, notification);
@@ -222,7 +189,7 @@ class Notification extends Modal {
       cssClass
     } = notification.params;
     return $jsx("div", {
-      class: `notification ${cssClass || ''}`
+      class: `notification ${icon ? 'notification-with-icon' : ''} ${cssClass || ''}`
     }, $jsx("div", {
       class: "notification-header"
     }, icon && $jsx("div", {
@@ -241,7 +208,5 @@ class Notification extends Modal {
       class: "notification-text"
     }, text)));
   }
-
 }
-
 export default Notification;

package/components/notification/notification-md.less

@@ -2,9 +2,9 @@
   .notification {
     transform: translate3d(0, -150%, 0);
     &.modal-in {
-      transition-duration: 0ms;
-      animation: notification-md-in 400ms ease-out;
+      transition-duration: 200ms;
       transform: translate3d(0, 0%, 0);
+      transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
       &.notification-transitioning {
         transition-duration: 200ms;
       }
@@ -16,17 +16,28 @@
       transform: translate3d(0, -150%, 0);
     }
   }
+  .notification-with-icon {
+    .notification-icon {
+      position: absolute;
+      left: var(--f7-notification-padding);
+      top: var(--f7-notification-padding);
+    }
+    .notification-content,
+    .notification-header {
+      margin-left: calc(var(--f7-notification-icon-size) + 16px);
+    }
+  }
 
   .notification-icon {
     margin-right: 8px;
   }
   .notification-subtitle {
     + .notification-text {
-      margin-top: 2px;
+      margin-top: 4px;
     }
   }
   .notification-header + .notification-content {
-    margin-top: 6px;
+    margin-top: 4px;
   }
   .notification-title-right-text {
     margin-left: 4px;
@@ -45,7 +56,6 @@
     width: 16px;
     height: 16px;
     transition-duration: 300ms;
-    .link-highlight();
 
     &:before,
     &:after {
@@ -57,10 +67,10 @@
       margin-top: -24px;
     }
     &:after {
-      color: #737373;
-      content: 'delete_md';
+      color: var(--f7-md-on-surface-variant);
+      content: 'delete_round_md';
       line-height: 48px;
-      font-size: 14px;
+      font-size: 24px;
     }
   }
 }

package/components/notification/notification-rtl.css

@@ -1 +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}:root .dark,:root.dark{--f7-notification-subtitle-color:#fff}.ios{--f7-notification-margin:8px;--f7-notification-padding: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-title-right-color:rgba(255, 255, 255, 0.55)}.md{--f7-notification-margin:0px;--f7-notification-padding:16px;--f7-notification-border-radius:0px;--f7-notification-box-shadow:0 2px 4px rgba(0, 0, 0, 0.22),0 1px 2px rgba(0, 0, 0, 0.24);--f7-notification-icon-size:16px;--f7-notification-title-color:var(--f7-theme-color);--f7-notification-title-font-size:12px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1;--f7-notification-title-font-weight:400;--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;--f7-notification-bg-color:#fff;--f7-notification-title-right-color:rgba(0, 0, 0, 0.54);--f7-notification-subtitle-color:#212121;--f7-notification-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-notification-bg-color:#242424;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54);--f7-notification-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-notification-margin:16px;--f7-notification-padding:16px;--f7-notification-border-radius:8px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:24px;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:600;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:14px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.6);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.aurora .dark,.aurora.dark{--f7-notification-bg-color:#242424;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54)}.notification{--f7-link-highlight-color:var(--f7-link-highlight-black);--f7-touch-ripple-color:var(--f7-touch-ripple-black);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);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:0s;animation:notification-md-in .4s ease-out;transform:translate3d(0,0%,0)}.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-icon{margin-right:8px}.md .notification-subtitle+.notification-text{margin-top:2px}.md .notification-header+.notification-content{margin-top:6px}.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:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md .notification-close-button.icon-only:before,.md .notification-close-button.input-clear-button:before,.md .notification-close-button.notification-close-button:before,.md .notification-close-button.ripple-inset:before,.md .notification-close-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md .notification-close-button.active-state:before{opacity:1;transition-duration:150ms}.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:#737373;content:'delete_md';line-height:48px;font-size:14px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}100%{transform:translate3d(0,0%,0)}}.aurora .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.aurora .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.aurora .notification.modal-out{transform:translate3d(0%,-200%,0)}.aurora .notification-icon{margin-right:8px}.aurora .notification-header+.notification-content{margin-top:8px}.aurora .notification-title-right-text{margin-right:0px;margin-left:auto}.aurora .notification-title-right-text+.notification-close-button{margin-left:8px}.aurora .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.4;transition-duration:.3s}.aurora .notification-close-button:hover{transition-duration:0s;opacity:.5}.aurora .notification-close-button.active-state{transition-duration:0s;opacity:.6}.aurora .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}.aurora .dark .notification-close-button:after,.aurora.dark .notification-close-button:after{color:#fff}
+: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: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: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{--f7-link-highlight-color:var(--f7-link-highlight-black);--f7-touch-ripple-color:var(--f7-touch-ripple-black);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);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:.2s;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);top:var(--f7-notification-padding)}.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:4px}.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-vars.less

@@ -4,9 +4,6 @@
   --f7-notification-subtitle-line-height: 1.35;
   --f7-notification-text-text-transform: none;
   --f7-notification-text-font-weight: 400;
-  .dark-vars({
-    --f7-notification-subtitle-color: #fff;
-  });
 }
 .ios-vars({
   --f7-notification-margin: 8px;
@@ -41,21 +38,21 @@
     --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: 0px;
+  --f7-notification-margin: 16px;
   --f7-notification-padding: 16px;
-  --f7-notification-border-radius: 0px;
-  --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
-  --f7-notification-icon-size: 16px;
+  --f7-notification-border-radius: 16px;
+  --f7-notification-box-shadow: none;
+  --f7-notification-icon-size: 24px;
 
-  --f7-notification-title-color: var(--f7-theme-color);
-  --f7-notification-title-font-size: 12px;
+  --f7-notification-title-font-size: 16px;
   --f7-notification-title-text-transform: none;
-  --f7-notification-title-line-height: 1;
-  --f7-notification-title-font-weight: 400;
+  --f7-notification-title-line-height: 1.35;
+  --f7-notification-title-font-weight: 500;
 
   --f7-notification-title-right-font-size: 12px;
 
@@ -64,49 +61,13 @@
 
   --f7-notification-text-font-size: 14px;
   --f7-notification-text-line-height: 1.35;
-  .light-vars({
-    --f7-notification-bg-color: #fff;
-    --f7-notification-title-right-color: rgba(0,0,0,0.54);
-    --f7-notification-subtitle-color: #212121;
-    --f7-notification-text-color: rgba(0,0,0,0.54);
-  });
-  .dark-vars({
-    --f7-notification-bg-color: #242424;
-    --f7-notification-title-right-color: rgba(255,255,255,0.54);
-    --f7-notification-text-color: rgba(255,255,255,0.54);
-  });
-});
-.aurora-vars({
-  --f7-notification-margin: 16px;
-  --f7-notification-padding: 16px;
-  --f7-notification-border-radius: 8px;
-  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
-  --f7-notification-icon-size: 24px;
 
-  --f7-notification-title-font-size: 16px;
-  --f7-notification-title-text-transform: none;
-  --f7-notification-title-line-height: 1.4;
-  --f7-notification-title-font-weight: 600;
-  --f7-notification-title-letter-spacing: 0.02em;
-
-  --f7-notification-title-right-font-size: 14px;
-
-  --f7-notification-subtitle-font-size: 14px;
-  --f7-notification-subtitle-font-weight: 600;
+});
 
-  --f7-notification-text-font-size: 14px;
-  --f7-notification-text-line-height: 1.35;
-  .light-vars({
-    --f7-notification-bg-color: #fff;
-    --f7-notification-title-color: #000;
-    --f7-notification-title-right-color: rgba(0,0,0,0.6);
-    --f7-notification-subtitle-color: #000;
-    --f7-notification-text-color: #000;
-  });
-  .dark-vars({
-    --f7-notification-bg-color: #242424;
-    --f7-notification-title-color: #fff;
-    --f7-notification-text-color: #fff;
-    --f7-notification-title-right-color: rgba(255,255,255,0.54);
-  });
+.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

@@ -1 +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}:root .dark,:root.dark{--f7-notification-subtitle-color:#fff}.ios{--f7-notification-margin:8px;--f7-notification-padding: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-title-right-color:rgba(255, 255, 255, 0.55)}.md{--f7-notification-margin:0px;--f7-notification-padding:16px;--f7-notification-border-radius:0px;--f7-notification-box-shadow:0 2px 4px rgba(0, 0, 0, 0.22),0 1px 2px rgba(0, 0, 0, 0.24);--f7-notification-icon-size:16px;--f7-notification-title-color:var(--f7-theme-color);--f7-notification-title-font-size:12px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1;--f7-notification-title-font-weight:400;--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;--f7-notification-bg-color:#fff;--f7-notification-title-right-color:rgba(0, 0, 0, 0.54);--f7-notification-subtitle-color:#212121;--f7-notification-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-notification-bg-color:#242424;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54);--f7-notification-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-notification-margin:16px;--f7-notification-padding:16px;--f7-notification-border-radius:8px;--f7-notification-box-shadow:0px 5px 25px -10px rgba(0, 0, 0, 0.7);--f7-notification-icon-size:24px;--f7-notification-title-font-size:16px;--f7-notification-title-text-transform:none;--f7-notification-title-line-height:1.4;--f7-notification-title-font-weight:600;--f7-notification-title-letter-spacing:0.02em;--f7-notification-title-right-font-size:14px;--f7-notification-subtitle-font-size:14px;--f7-notification-subtitle-font-weight:600;--f7-notification-text-font-size:14px;--f7-notification-text-line-height:1.35;--f7-notification-bg-color:#fff;--f7-notification-title-color:#000;--f7-notification-title-right-color:rgba(0, 0, 0, 0.6);--f7-notification-subtitle-color:#000;--f7-notification-text-color:#000}.aurora .dark,.aurora.dark{--f7-notification-bg-color:#242424;--f7-notification-title-color:#fff;--f7-notification-text-color:#fff;--f7-notification-title-right-color:rgba(255, 255, 255, 0.54)}.notification{--f7-link-highlight-color:var(--f7-link-highlight-black);--f7-touch-ripple-color:var(--f7-touch-ripple-black);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);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:0s;animation:notification-md-in .4s ease-out;transform:translate3d(0,0%,0)}.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-icon{margin-right:8px}.md .notification-subtitle+.notification-text{margin-top:2px}.md .notification-header+.notification-content{margin-top:6px}.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:before{content:'';width:152%;height:152%;left:-26%;top:-26%;position:absolute;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 66%,rgba(255,255,255,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;transition-duration:.3s;transition-property:opacity}.md .notification-close-button.icon-only:before,.md .notification-close-button.input-clear-button:before,.md .notification-close-button.notification-close-button:before,.md .notification-close-button.ripple-inset:before,.md .notification-close-button.searchbar-disable-button:before{width:100%;height:100%;left:0;top:0;background-image:radial-gradient(circle at center,var(--f7-link-highlight-color) 71%,rgba(255,255,255,0) 71%)}.md .notification-close-button.active-state:before{opacity:1;transition-duration:150ms}.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:#737373;content:'delete_md';line-height:48px;font-size:14px}@keyframes notification-md-in{0%{transform:translate3d(0,-150%,0)}50%{transform:translate3d(0,10%,0)}100%{transform:translate3d(0,0%,0)}}.aurora .notification{transition-duration:450ms;transform:translate3d(0%,-200%,0)}.aurora .notification.modal-in{transform:translate3d(0%,0%,0);opacity:1}.aurora .notification.modal-out{transform:translate3d(0%,-200%,0)}.aurora .notification-icon{margin-right:8px}.aurora .notification-header+.notification-content{margin-top:8px}.aurora .notification-title-right-text{margin-right:0px;margin-left:auto}.aurora .notification-title-right-text+.notification-close-button{margin-left:8px}.aurora .notification-close-button{font-size:14px;width:20px;height:20px;opacity:.4;transition-duration:.3s}.aurora .notification-close-button:hover{transition-duration:0s;opacity:.5}.aurora .notification-close-button.active-state{transition-duration:0s;opacity:.6}.aurora .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}.aurora .dark .notification-close-button:after,.aurora.dark .notification-close-button:after{color:#fff}
+: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: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: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{--f7-link-highlight-color:var(--f7-link-highlight-black);--f7-touch-ripple-color:var(--f7-touch-ripple-black);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);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:.2s;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);top:var(--f7-notification-padding)}.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:4px}.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.js

@@ -6,7 +6,6 @@ export default {
   static: {
     Notification
   },
-
   create() {
     const app = this;
     app.notification = extend({}, ModalMethods({
@@ -15,7 +14,6 @@ export default {
       defaultSelector: '.notification.modal-in'
     }));
   },
-
   params: {
     notification: {
       icon: null,

package/components/notification/notification.less

@@ -94,6 +94,3 @@
 .if-md-theme({
   @import './notification-md.less';
 });
-.if-aurora-theme({
-  @import './notification-aurora.less';
-});

package/components/page/page-md.less

@@ -1,52 +1,82 @@
 .md {
+  .page-previous {
+    transform: translate3d(0, -20px, 0);
+  }
   .page-next {
-    opacity: 0;
     pointer-events: none;
-    transform: translate3d(0, 56px, 0);
+    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 {
-      animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
+      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: none;
+      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 var(--f7-page-transition-duration) forwards;
+      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: none;
+      animation: md-page-previous-to-current var(--f7-page-transition-duration) forwards;
     }
   }
 }
 @keyframes md-page-next-to-current {
   from {
-    transform: translate3d(0, 56px, 0);
-    opacity: 0;
+    transform: translate3d(0, 128px, 0);
   }
   to {
     transform: translate3d(0, 0px, 0);
-    opacity: 1;
   }
 }
 @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 {
-    transform: translate3d(0, 56px, 0);
     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);
+  }
+}