framework7 7.1.5 → 8.0.0-beta.2

package/components/popover/popover.less

@@ -5,6 +5,7 @@
     z-index: 13500;
   }
 }
+
 .popover {
   width: var(--f7-popover-width);
   z-index: 13500;
@@ -17,7 +18,6 @@
   transition-duration: 300ms;
   background-color: var(--f7-popover-bg-color);
   border-radius: var(--f7-popover-border-radius);
-  box-shadow: var(--f7-popover-box-shadow);
   will-change: transform, opacity;
   --f7-safe-area-top: 0px;
   --f7-safe-area-left: 0px;
@@ -73,6 +73,10 @@
     transition-duration: 0ms;
   }
 }
+.popover,
+.popover-backdrop {
+  transition-timing-function: var(--f7-popover-transition-timing-function);
+}
 .popover-inner {
   .scrollable();
 }
@@ -83,9 +87,12 @@
     font-size: var(--f7-popover-actions-icon-size);
   }
 }
-.popover-from-actions-bold {
+.ios .popover-from-actions-strong {
   font-weight: 600;
 }
+.md .popover-from-actions-strong {
+  font-weight: 500;
+}
 .popover-from-actions-label {
   line-height: 1.3;
   position: relative;
@@ -99,6 +106,59 @@
   &:last-child {
     .hairline-remove(bottom);
   }
+  .md & {
+    justify-content: center;
+  }
+}
+.popover-angle {
+  width: 26px;
+  height: 26px;
+  position: absolute;
+  left: -26px;
+  top: 0;
+  z-index: 100;
+  overflow: hidden;
+  &:after {
+    content: '';
+    background: var(--f7-popover-bg-color);
+    width: 26px;
+    height: 26px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 3px;
+    transform: rotate(45deg);
+  }
+  &.on-left {
+    left: -26px;
+    &:after {
+      left: 19px;
+      top: 0;
+    }
+  }
+  &.on-right {
+    left: 100%;
+    &:after {
+      left: -19px;
+      top: 0;
+    }
+  }
+  &.on-top {
+    left: 0;
+    top: -26px;
+    &:after {
+      left: 0;
+      top: 19px;
+    }
+  }
+  &.on-bottom {
+    left: 0;
+    top: 100%;
+    &:after {
+      left: 0;
+      top: -19px;
+    }
+  }
 }
 .if-ios-theme({
   @import './popover-ios.less';
@@ -106,6 +166,3 @@
 .if-md-theme({
   @import './popover-md.less';
 });
-.if-aurora-theme({
-  @import './popover-aurora.less';
-});

package/components/popup/popup-class.js

@@ -4,39 +4,35 @@ import { extend, now, nextTick } from '../../shared/utils.js';
 import { getSupport } from '../../shared/get-support.js';
 import { getDevice } from '../../shared/get-device.js';
 import Modal from '../modal/modal-class.js';
-
 class Popup extends Modal {
   constructor(app, params) {
     const extendedParams = extend({
       on: {}
-    }, app.params.popup, params); // Extends with open/close Modal methods;
+    }, app.params.popup, params);
 
+    // Extends with open/close Modal methods;
     super(app, extendedParams);
     const popup = this;
     const window = getWindow();
     const document = getDocument();
     const support = getSupport();
     const device = getDevice();
-    popup.params = extendedParams; // Find Element
+    popup.params = extendedParams;
 
+    // Find Element
     let $el;
-
     if (!popup.params.el) {
       $el = $(popup.params.content).filter(node => node.nodeType === 1).eq(0);
     } else {
       $el = $(popup.params.el).eq(0);
     }
-
     if ($el && $el.length > 0 && $el[0].f7Modal) {
       return $el[0].f7Modal;
     }
-
     if ($el.length === 0) {
       return popup.destroy();
     }
-
     let $backdropEl;
-
     if (popup.params.backdrop && popup.params.backdropEl) {
       $backdropEl = $(popup.params.backdropEl);
     } else if (popup.params.backdrop) {
@@ -46,13 +42,11 @@ class Popup extends Modal {
       } else {
         $backdropEl = popup.$containerEl.children('.popup-backdrop');
       }
-
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="popup-backdrop"></div>');
         popup.$containerEl.append($backdropEl);
       }
     }
-
     extend(popup, {
       app,
       push: $el.hasClass('popup-push') || popup.params.push,
@@ -63,51 +57,41 @@ class Popup extends Modal {
       type: 'popup',
       $htmlEl: $('html')
     });
-
     if (popup.params.push) {
       $el.addClass('popup-push');
     }
-
     function handleClick(e) {
       const target = e.target;
       const $target = $(target);
       const keyboardOpened = !device.desktop && device.cordova && (window.Keyboard && window.Keyboard.isVisible || window.cordova.plugins && window.cordova.plugins.Keyboard && window.cordova.plugins.Keyboard.isVisible);
       if (keyboardOpened) return;
-
       if ($target.closest(popup.el).length === 0) {
         if (popup.params && popup.params.closeByBackdropClick && popup.params.backdrop && popup.backdropEl && popup.backdropEl === target) {
           let needToClose = true;
           popup.$el.nextAll('.popup.modal-in').each(popupEl => {
             const popupInstance = popupEl.f7Modal;
             if (!popupInstance) return;
-
             if (popupInstance.params.closeByBackdropClick && popupInstance.params.backdrop && popupInstance.backdropEl === popup.backdropEl) {
               needToClose = false;
             }
           });
-
           if (needToClose) {
             popup.close();
           }
         }
       }
     }
-
     function onKeyDown(e) {
       const keyCode = e.keyCode;
-
       if (keyCode === 27 && popup.params.closeOnEscape) {
         popup.close();
       }
     }
-
     let pushOffset;
     let isPush;
-
     function pushViewScale(offset) {
       return (app.height - offset * 2) / app.height;
     }
-
     let allowSwipeToClose = true;
     let isTouched = false;
     let startTouch;
@@ -122,14 +106,11 @@ class Popup extends Modal {
     let pageContentScrollHeight;
     let popupHeight;
     let $pushEl;
-
     function handleTouchStart(e) {
       if (isTouched || !allowSwipeToClose || !popup.params.swipeToClose) return;
-
       if (popup.params.swipeHandler && $(e.target).closest(popup.params.swipeHandler).length === 0) {
         return;
       }
-
       isTouched = true;
       isMoved = false;
       startTouch = {
@@ -138,59 +119,47 @@ class Popup extends Modal {
       };
       touchStartTime = now();
       isScrolling = undefined;
-
       if (!popup.params.swipeHandler && e.type === 'touchstart') {
         pageContentEl = $(e.target).closest('.page-content')[0];
       }
     }
-
     function handleTouchMove(e) {
       if (!isTouched) return;
       currentTouch = {
         x: e.type === 'touchmove' ? e.targetTouches[0].pageX : e.pageX,
         y: e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY
       };
-
       if (typeof isScrolling === 'undefined') {
         isScrolling = !!(isScrolling || Math.abs(currentTouch.x - startTouch.x) > Math.abs(currentTouch.y - startTouch.y));
       }
-
       if (isScrolling) {
         isTouched = false;
         isMoved = false;
         return;
       }
-
       touchesDiff = startTouch.y - currentTouch.y;
-
       if (isPush && pushOffset && touchesDiff > 0) {
         touchesDiff = 0;
       }
-
       const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
       $el.transition(0);
-
       if (typeof popup.params.swipeToClose === 'string' && direction !== popup.params.swipeToClose) {
         $el.transform('');
         $el.transition('');
         return;
       }
-
       if (!isMoved) {
         if (isPush && pushOffset) {
           popupHeight = $el[0].offsetHeight;
           $pushEl = $el.prevAll('.popup.modal-in').eq(0);
-
           if ($pushEl.length === 0) {
             $pushEl = app.$el.children('.view, .views');
           }
         }
-
         if (pageContentEl) {
           pageContentScrollTop = pageContentEl.scrollTop;
           pageContentScrollHeight = pageContentEl.scrollHeight;
           pageContentOffsetHeight = pageContentEl.offsetHeight;
-
           if (!(pageContentScrollHeight === pageContentOffsetHeight) && !(direction === 'to-bottom' && pageContentScrollTop === 0) && !(direction === 'to-top' && pageContentScrollTop === pageContentScrollHeight - pageContentOffsetHeight)) {
             $el.transform('');
             $el.transition('');
@@ -199,7 +168,6 @@ class Popup extends Modal {
             return;
           }
         }
-
         isMoved = true;
         popup.emit('local::swipeStart popupSwipeStart', popup);
         popup.$el.trigger('popup:swipestart');
@@ -207,13 +175,10 @@ class Popup extends Modal {
         popup.emit('local::swipeMove popupSwipeMove', popup);
         popup.$el.trigger('popup:swipemove');
       }
-
       e.preventDefault();
-
       if (isPush && pushOffset) {
         const pushProgress = 1 - Math.abs(touchesDiff / popupHeight);
         const scale = 1 - (1 - pushViewScale(pushOffset)) * pushProgress;
-
         if ($pushEl.hasClass('popup')) {
           if ($pushEl.hasClass('popup-push')) {
             $pushEl.transition(0).forEach(el => {
@@ -230,38 +195,29 @@ class Popup extends Modal {
           });
         }
       }
-
       $el.transition(0).transform(`translate3d(0,${-touchesDiff}px,0)`);
     }
-
     function handleTouchEnd() {
       isTouched = false;
-
       if (!isMoved) {
         return;
       }
-
       popup.emit('local::swipeEnd popupSwipeEnd', popup);
       popup.$el.trigger('popup:swipeend');
       isMoved = false;
       allowSwipeToClose = false;
       $el.transition('');
-
       if (isPush && pushOffset) {
         $pushEl.transition('').transform('');
       }
-
       const direction = touchesDiff <= 0 ? 'to-bottom' : 'to-top';
-
       if (typeof popup.params.swipeToClose === 'string' && direction !== popup.params.swipeToClose) {
         $el.transform('');
         allowSwipeToClose = true;
         return;
       }
-
       const diff = Math.abs(touchesDiff);
       const timeDiff = new Date().getTime() - touchStartTime;
-
       if (timeDiff < 300 && diff > 20 || timeDiff >= 300 && diff > 100) {
         nextTick(() => {
           if (direction === 'to-bottom') {
@@ -269,7 +225,6 @@ class Popup extends Modal {
           } else {
             $el.addClass('swipe-close-to-top');
           }
-
           $el.transform('');
           popup.emit('local::swipeclose popupSwipeClose', popup);
           popup.$el.trigger('popup:swipeclose');
@@ -278,15 +233,12 @@ class Popup extends Modal {
         });
         return;
       }
-
       allowSwipeToClose = true;
       $el.transform('');
     }
-
     const passive = support.passiveListener ? {
       passive: true
     } : false;
-
     if (popup.params.swipeToClose) {
       $el.on(app.touchEvents.start, handleTouchStart, passive);
       app.on('touchmove', handleTouchMove);
@@ -297,16 +249,12 @@ class Popup extends Modal {
         app.off('touchend:passive', handleTouchEnd);
       });
     }
-
     let hasPreviousPushPopup;
-
     const updatePushOffset = () => {
       const wasPush = isPush;
-
       if (popup.push) {
         isPush = popup.push && (app.width < 630 || app.height < 630 || $el.hasClass('popup-tablet-fullscreen'));
       }
-
       if (isPush && !wasPush) {
         // eslint-disable-next-line
         setPushOffset();
@@ -317,77 +265,63 @@ class Popup extends Modal {
         popup.$htmlEl[0].style.removeProperty('--f7-popup-push-scale');
       }
     };
-
     const setPushOffset = () => {
       app.off('resize', updatePushOffset);
-
       if (popup.push) {
         isPush = popup.push && (app.width < 630 || app.height < 630 || $el.hasClass('popup-tablet-fullscreen'));
       }
-
       if (isPush) {
         pushOffset = parseInt($el.css('--f7-popup-push-offset'), 10);
-        if (Number.isNaN(pushOffset)) pushOffset = 0;
-
-        if (pushOffset) {
-          $el.addClass('popup-push');
-          popup.$htmlEl.addClass('with-modal-popup-push');
-          popup.$htmlEl[0].style.setProperty('--f7-popup-push-scale', pushViewScale(pushOffset));
+        if (Number.isNaN(pushOffset)) {
+          pushOffset = 0;
         }
+        if (!pushOffset) pushOffset = app.theme === 'ios' ? 44 : 48;
+        popup.$htmlEl[0].style.setProperty('--f7-popup-push-offset', `${pushOffset}px`);
+        $el.addClass('popup-push');
+        popup.$htmlEl.addClass('with-modal-popup-push');
+        popup.$htmlEl[0].style.setProperty('--f7-popup-push-scale', pushViewScale(pushOffset));
       }
-
       app.on('resize', updatePushOffset);
     };
-
     popup.on('open', () => {
       hasPreviousPushPopup = false;
-
       if (popup.params.closeOnEscape) {
         $(document).on('keydown', onKeyDown);
       }
-
       $el.prevAll('.popup.modal-in').addClass('popup-behind');
       setPushOffset();
     });
     popup.on('opened', () => {
       $el.removeClass('swipe-close-to-bottom swipe-close-to-top');
-
       if (popup.params.closeByBackdropClick) {
         app.on('click', handleClick);
       }
     });
     popup.on('close', () => {
       hasPreviousPushPopup = popup.$el.prevAll('.popup-push.modal-in').length > 0;
-
       if (popup.params.closeOnEscape) {
         $(document).off('keydown', onKeyDown);
       }
-
       if (popup.params.closeByBackdropClick) {
         app.off('click', handleClick);
       }
-
       $el.prevAll('.popup.modal-in').eq(0).removeClass('popup-behind');
-
       if (isPush && pushOffset && !hasPreviousPushPopup) {
         popup.$htmlEl.removeClass('with-modal-popup-push');
         popup.$htmlEl.addClass('with-modal-popup-push-closing');
       }
-
       app.off('resize', updatePushOffset);
     });
     popup.on('closed', () => {
       $el.removeClass('popup-behind');
-
       if (isPush && pushOffset && !hasPreviousPushPopup) {
         popup.$htmlEl.removeClass('with-modal-popup-push-closing');
         popup.$htmlEl[0].style.removeProperty('--f7-popup-push-scale');
+        popup.$htmlEl[0].style.removeProperty('--f7-popup-push-offset');
       }
     });
     $el[0].f7Modal = popup;
     return popup;
   }
-
 }
-
 export default Popup;

package/components/popup/popup-rtl.css

@@ -1 +1 @@
-:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
+:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-transition-duration:400ms;--f7-popup-transition-timing-function:initial;--f7-popup-push-border-radius:10px}.md{--f7-popup-tablet-border-radius:28px;--f7-popup-transition-duration:600ms;--f7-popup-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-popup-push-border-radius:28px}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transition-timing-function:var(--f7-popup-transition-timing-function);transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;animation-timing-function:var(--f7-popup-transition-timing-function)}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}

package/components/popup/popup-vars.less

@@ -2,8 +2,6 @@
   --f7-popup-border-radius: 0px;
   --f7-popup-tablet-width: 630px;
   --f7-popup-tablet-height: 630px;
-  --f7-popup-transition-duration: 400ms;
-  --f7-popup-push-border-radius: 10px;
   --f7-popup-push-offset: var(--f7-safe-area-top);
   /*
   --f7-popup-tablet-border-radius: var(--f7-popup-border-radius);
@@ -11,13 +9,13 @@
 }
 .ios-vars({
   --f7-popup-tablet-border-radius: 5px;
-  --f7-popup-box-shadow: none;
+  --f7-popup-transition-duration: 400ms;
+  --f7-popup-transition-timing-function: initial;
+  --f7-popup-push-border-radius: 10px;
 });
 .md-vars({
-  --f7-popup-tablet-border-radius: 4px;
-  --f7-popup-box-shadow: 0px 20px 44px rgba(0,0,0,0.5);
-});
-.aurora-vars({
-  --f7-popup-tablet-border-radius: 8px;
-  --f7-popup-box-shadow: 0px 20px 44px rgba(0,0,0,0.5);
+  --f7-popup-tablet-border-radius: 28px;
+  --f7-popup-transition-duration: 600ms;
+  --f7-popup-transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
+  --f7-popup-push-border-radius: 28px;
 });

package/components/popup/popup.css

@@ -1 +1 @@
-:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-transition-duration:400ms;--f7-popup-push-border-radius:10px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-box-shadow:none}.md{--f7-popup-tablet-border-radius:4px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.aurora{--f7-popup-tablet-border-radius:8px;--f7-popup-box-shadow:0px 20px 44px rgba(0, 0, 0, 0.5)}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);box-shadow:var(--f7-popup-box-shadow);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}
+:root{--f7-popup-border-radius:0px;--f7-popup-tablet-width:630px;--f7-popup-tablet-height:630px;--f7-popup-push-offset:var(--f7-safe-area-top)}.ios{--f7-popup-tablet-border-radius:5px;--f7-popup-transition-duration:400ms;--f7-popup-transition-timing-function:initial;--f7-popup-push-border-radius:10px}.md{--f7-popup-tablet-border-radius:28px;--f7-popup-transition-duration:600ms;--f7-popup-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-popup-push-border-radius:28px}.popup-backdrop{z-index:10500}.popup-backdrop-unique{z-index:11000}.popup{position:absolute;left:0;top:0px;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transition-timing-function:var(--f7-popup-transition-timing-function);transform:translate3d(0,100vh,0);background:#fff;z-index:11000;overflow:hidden;border-radius:var(--f7-popup-border-radius)}.dark .popup,.popup.dark{background:#000}.popup.modal-in,.popup.modal-out{transition-duration:var(--f7-popup-transition-duration)}.popup.not-animated{transition-duration:0s}.popup.modal-in{display:block;transform:translate3d(0,0,0)}.popup.modal-out{transform:translate3d(0,100vh,0)}.popup.swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}@media (min-width:630px) and (min-height:630px){.popup:not(.popup-tablet-fullscreen){--f7-safe-area-top:0px;--f7-safe-area-bottom:0px;width:var(--f7-popup-tablet-width);height:var(--f7-popup-tablet-height);left:50%;top:50%;margin-left:calc(-1 * var(--f7-popup-tablet-width)/ 2);margin-top:calc(-1 * var(--f7-popup-tablet-height)/ 2);transform:translate3d(0,100vh,0);border-radius:var(--f7-popup-tablet-border-radius,var(--f7-popup-border-radius))}.popup:not(.popup-tablet-fullscreen).modal-in{transform:translate3d(0,0,0)}.popup:not(.popup-tablet-fullscreen).modal-out{transform:translate3d(0,100vh,0)}.popup:not(.popup-tablet-fullscreen).swipe-close-to-top.modal-out{transform:translate3d(0,-100vh,0)}.popup:not(.popup-tablet-fullscreen).popup-behind{transform:translate3d(0,0,0) scale(.9);pointer-events:none}.popup:not(.popup-tablet-fullscreen).popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(.9)}}html.with-modal-popup .framework7-root>.panel .page-content,html.with-modal-popup .framework7-root>.view .page-content,html.with-modal-popup .framework7-root>.views .page-content{overflow:hidden;-webkit-overflow-scrolling:auto}html.with-modal-popup-push .popup-push,html.with-modal-popup-push-closing .popup-push{top:calc(var(--f7-popup-push-offset) + 10px);height:calc(100% - var(--f7-popup-push-offset) - 10px);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;--f7-safe-area-top:0px}html.with-modal-popup-push .popup-push .page,html.with-modal-popup-push .popup-push .view,html.with-modal-popup-push-closing .popup-push .page,html.with-modal-popup-push-closing .popup-push .view{--f7-safe-area-top:0px}html.with-modal-popup-push .framework7-root,html.with-modal-popup-push-closing .framework7-root{background:#000}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views,html.with-modal-popup-push-closing .framework7-root>.view,html.with-modal-popup-push-closing .framework7-root>.views{transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function)}html.with-modal-popup-push .dark .framework7-root>.view:after,html.with-modal-popup-push .dark .framework7-root>.views:after,html.with-modal-popup-push .dark.framework7-root>.view:after,html.with-modal-popup-push .dark.framework7-root>.views:after,html.with-modal-popup-push .framework7-root>.view.dark:after,html.with-modal-popup-push .framework7-root>.views.dark:after,html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after,html.with-modal-popup-push.dark .framework7-root>.view:after,html.with-modal-popup-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:1;animation:popup-dark-push-overlay-fade-in var(--f7-popup-transition-duration) forwards}html.with-modal-popup-push .framework7-root>.view,html.with-modal-popup-push .framework7-root>.views{border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;transform:translate3d(0,0,0px) scale(var(--f7-popup-push-scale,1))!important}html.with-modal-popup-push .popup:after{content:'';pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:13000;transition-duration:var(--f7-popup-transition-duration);transition-timing-function:var(--f7-popup-transition-timing-function);border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;opacity:0}html.with-modal-popup-push .dark .popup:after,html.with-modal-popup-push .dark.popup:after,html.with-modal-popup-push.dark .popup:after{background:rgba(255,255,255,.05)}html.with-modal-popup-push .popup-behind{transform:translate3d(0,0px,0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.modal-out{transform:translate3d(0,100vh,0) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:not(.popup-push){border-radius:var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0}html.with-modal-popup-push .popup-behind.popup-push{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind.popup-push.modal-out{transform:translate3d(0,calc(0px - var(--f7-popup-push-offset) - 10px + 100vh),0px) scale(var(--f7-popup-push-scale,1))}html.with-modal-popup-push .popup-behind:after{opacity:1;pointer-events:auto}html.with-modal-popup-push-closing .dark .framework7-root>.view:after,html.with-modal-popup-push-closing .dark .framework7-root>.views:after,html.with-modal-popup-push-closing .dark.framework7-root>.view:after,html.with-modal-popup-push-closing .dark.framework7-root>.views:after,html.with-modal-popup-push-closing .framework7-root>.view.dark:after,html.with-modal-popup-push-closing .framework7-root>.views.dark:after,html.with-modal-popup-push-closing.dark .framework7-root>.view:after,html.with-modal-popup-push-closing.dark .framework7-root>.views:after{animation:popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;animation-timing-function:var(--f7-popup-transition-timing-function)}@keyframes popup-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes popup-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}

package/components/popup/popup.js

@@ -18,7 +18,6 @@ export default {
   static: {
     Popup
   },
-
   create() {
     const app = this;
     app.popup = ModalMethods({
@@ -28,13 +27,11 @@ export default {
       parentSelector: '.popup'
     });
   },
-
   clicks: {
     '.popup-open': function openPopup($clickedEl, data) {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.popup.open(data.popup, data.animate, $clickedEl);
     },
@@ -42,7 +39,6 @@ export default {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.popup.close(data.popup, data.animate, $clickedEl);
     }

package/components/popup/popup.less

@@ -16,6 +16,7 @@
   display: none;
   box-sizing: border-box;
   transition-property: transform;
+  transition-timing-function: var(--f7-popup-transition-timing-function);
   transform: translate3d(0, 100vh, 0);
   background: #fff;
   z-index: 11000;
@@ -56,7 +57,6 @@
     margin-left: calc(-1 * var(--f7-popup-tablet-width) / 2);
     margin-top: calc(-1 * var(--f7-popup-tablet-height) / 2);
     transform: translate3d(0, 100vh, 0);
-    box-shadow: var(--f7-popup-box-shadow);
     border-radius: var(--f7-popup-tablet-border-radius, var(--f7-popup-border-radius));
     &.modal-in {
       transform: translate3d(0, 0, 0);
@@ -105,6 +105,7 @@ html.with-modal-popup-push-closing {
     > .views,
     > .view {
       transition-duration: var(--f7-popup-transition-duration);
+      transition-timing-function: var(--f7-popup-transition-timing-function);
     }
   }
 
@@ -155,6 +156,7 @@ html.with-modal-popup-push {
     background: rgba(0, 0, 0, 0.4);
     z-index: 13000;
     transition-duration: var(--f7-popup-transition-duration);
+    transition-timing-function: var(--f7-popup-transition-timing-function);
     border-radius: var(--f7-popup-push-border-radius) var(--f7-popup-push-border-radius) 0 0;
     opacity: 0;
   }
@@ -201,6 +203,7 @@ html.with-modal-popup-push {
     .framework7-root > .view.dark {
       &:after {
         animation: popup-dark-push-overlay-fade-out var(--f7-popup-transition-duration) forwards;
+        animation-timing-function: var(--f7-popup-transition-timing-function);
       }
     }
   }
@@ -229,6 +232,3 @@ html.with-modal-popup-push {
 .if-md-theme({
   @import './popup-md.less';
 });
-.if-aurora-theme({
-  @import './popup-aurora.less';
-});

package/components/preloader/preloader-ios.less

@@ -1,4 +1,5 @@
 .ios {
+  color: var(--f7-preloader-color);
   .preloader-inner {
     animation: ios-preloader-spin 1s steps(8, end) infinite;
   }
@@ -7,12 +8,13 @@
     width: 11.6%;
     height: 33.33%;
     border-radius: 100px;
-    background: var(--f7-preloader-color);
+    background: currentColor;
     position: absolute;
     left: 50%;
     top: 50%;
     transform-origin: center 150%;
   }
+  .preloader-multi-color .preloader-inner-line,
   .preloader.color-multi .preloader-inner-line {
     animation: ios-preloader-multicolor 3s linear infinite;
   }