framework7 7.1.5 → 8.0.0-beta.2

package/components/popover/popover-class.js

@@ -3,43 +3,40 @@ import $ from '../../shared/dom7.js';
 import { extend } from '../../shared/utils.js';
 import { getDevice } from '../../shared/get-device.js';
 import Modal from '../modal/modal-class.js';
-
 class Popover extends Modal {
   constructor(app, params) {
     const extendedParams = extend({
       on: {}
-    }, app.params.popover, params); // Extends with open/close Modal methods;
+    }, app.params.popover, params);
 
+    // Extends with open/close Modal methods;
     super(app, extendedParams);
     const popover = this;
     const device = getDevice();
     const window = getWindow();
     const document = getDocument();
-    popover.params = extendedParams; // Find Element
+    popover.params = extendedParams;
 
+    // Find Element
     let $el;
-
     if (!popover.params.el) {
       $el = $(popover.params.content).filter(node => node.nodeType === 1).eq(0);
     } else {
       $el = $(popover.params.el).eq(0);
     }
-
     if ($el && $el.length > 0 && $el[0].f7Modal) {
       return $el[0].f7Modal;
-    } // Find Target
-
+    }
 
+    // Find Target
     const $targetEl = $(popover.params.targetEl).eq(0);
-
     if ($el.length === 0) {
       return popover.destroy();
-    } // Backdrop
-
+    }
 
+    // Backdrop
     let $backdropEl;
     const forceBackdropUnique = popover.params.backdrop && app.$el.find('.popover.modal-in').filter(anotherPopoverEl => anotherPopoverEl !== $el[0]).length > 0;
-
     if (popover.params.backdrop && popover.params.backdropEl) {
       $backdropEl = $(popover.params.backdropEl);
     } else if (popover.params.backdrop) {
@@ -50,24 +47,22 @@ class Popover extends Modal {
       } else {
         $backdropEl = popover.$containerEl.children('.popover-backdrop');
       }
-
       if ($backdropEl.length === 0) {
         $backdropEl = $('<div class="popover-backdrop"></div>');
         popover.$containerEl.append($backdropEl);
       }
-    } // Find Angle
-
+    }
 
+    // Find Angle
     let $angleEl;
-
-    if ($el.find('.popover-angle').length === 0) {
+    if ($el.find('.popover-angle').length === 0 && popover.params.angle) {
       $angleEl = $('<div class="popover-angle"></div>');
       $el.prepend($angleEl);
     } else {
       $angleEl = $el.find('.popover-angle');
-    } // Open
-
+    }
 
+    // Open
     const originalOpen = popover.open;
     extend(popover, {
       app,
@@ -81,29 +76,22 @@ class Popover extends Modal {
       backdropEl: $backdropEl && $backdropEl[0],
       type: 'popover',
       forceBackdropUnique,
-
       open() {
         for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
           args[_key] = arguments[_key];
         }
-
         let [targetEl, animate] = args;
         if (typeof args[0] === 'boolean') [animate, targetEl] = args;
-
         if (targetEl) {
           popover.$targetEl = $(targetEl);
           popover.targetEl = popover.$targetEl[0];
         }
-
         return originalOpen.call(popover, animate);
       }
-
     });
-
     function handleResize() {
       popover.resize();
     }
-
     popover.on('popoverOpen', () => {
       popover.resize();
       app.on('resize', handleResize);
@@ -114,39 +102,32 @@ class Popover extends Modal {
       });
     });
     let touchStartTarget = null;
-
     function handleTouchStart(e) {
       touchStartTarget = e.target;
     }
-
     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(popover.el).length === 0) {
         if (popover.params.closeByBackdropClick && popover.params.backdrop && popover.backdropEl && popover.backdropEl === target && touchStartTarget === target) {
           popover.close();
         } else if (popover.params.closeByOutsideClick && touchStartTarget === target) {
           const isAnotherPopoverBackdrop = $target.hasClass('popover-backdrop-unique') && target.f7PopoverRef !== popover || $target.hasClass('popover-backdrop') && target !== popover.backdropEl;
           const isAnotherPopoverTarget = target.closest('.popover') && target.closest('.popover') !== popover.$el[0];
-
           if (!isAnotherPopoverBackdrop && !isAnotherPopoverTarget) {
             popover.close();
           }
         }
       }
     }
-
     function onKeyDown(e) {
       const keyCode = e.keyCode;
-
       if (keyCode === 27 && popover.params.closeOnEscape) {
         popover.close();
       }
     }
-
     if (popover.params.closeOnEscape) {
       popover.on('popoverOpen', () => {
         $(document).on('keydown', onKeyDown);
@@ -155,7 +136,6 @@ class Popover extends Modal {
         $(document).off('keydown', onKeyDown);
       });
     }
-
     popover.on('popoverOpened', () => {
       if (popover.params.closeByOutsideClick || popover.params.closeByBackdropClick) {
         app.on('touchstart', handleTouchStart);
@@ -171,7 +151,6 @@ class Popover extends Modal {
     $el[0].f7Modal = popover;
     return popover;
   }
-
   resize() {
     const popover = this;
     const {
@@ -193,20 +172,19 @@ class Popover extends Modal {
     let angleSize = 0;
     let angleLeft;
     let angleTop;
-
-    if (app.theme === 'ios' || app.theme === 'aurora') {
+    const hasAngle = $angleEl.length > 0;
+    const angleMin = app.theme === 'ios' ? 13 : 24;
+    if (hasAngle) {
       $angleEl.removeClass('on-left on-right on-top on-bottom').css({
         left: '',
         top: ''
       });
       angleSize = $angleEl.width() / 2;
-    } else {
-      $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({
-        left: '',
-        top: ''
-      });
     }
-
+    $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({
+      left: '',
+      top: ''
+    });
     let targetWidth;
     let targetHeight;
     let targetOffsetLeft;
@@ -217,7 +195,6 @@ class Popover extends Modal {
     if (Number.isNaN(safeAreaTop)) safeAreaTop = 0;
     if (Number.isNaN(safeAreaLeft)) safeAreaLeft = 0;
     if (Number.isNaN(safeAreaRight)) safeAreaRight = 0;
-
     if ($targetEl && $targetEl.length > 0) {
       targetWidth = $targetEl.outerWidth();
       targetHeight = $targetEl.outerHeight();
@@ -225,7 +202,6 @@ class Popover extends Modal {
       targetOffsetLeft = targetOffset.left - app.left;
       targetOffsetTop = targetOffset.top - app.top;
       const targetParentPage = $targetEl.parents('.page');
-
       if (targetParentPage.length > 0) {
         targetOffsetTop -= targetParentPage[0].scrollTop;
       }
@@ -235,113 +211,83 @@ class Popover extends Modal {
       targetWidth = popover.params.targetWidth || 0;
       targetHeight = popover.params.targetHeight || 0;
     }
-
-    let [left, top, diff] = [0, 0, 0]; // Top Position
-
+    let [left, top, diff] = [0, 0, 0];
+    // Top Position
     const forcedPosition = verticalPosition === 'auto' ? false : verticalPosition;
-    let position = forcedPosition || (app.theme === 'md' ? 'bottom' : 'top');
+    let position = forcedPosition || 'top';
+    if (forcedPosition === 'top' || !forcedPosition && height + angleSize < targetOffsetTop - safeAreaTop) {
+      // On top
+      top = targetOffsetTop - height - angleSize;
+    } else if (forcedPosition === 'bottom' || !forcedPosition && height + angleSize < app.height - targetOffsetTop - targetHeight) {
+      // On bottom
+      position = 'bottom';
+      top = targetOffsetTop + targetHeight + angleSize;
+    } else {
+      // On middle
+      position = 'middle';
+      top = targetHeight / 2 + targetOffsetTop - height / 2;
+      diff = top;
+      top = Math.max(5, Math.min(top, app.height - height - 5));
+      diff -= top;
+    }
 
-    if (app.theme === 'md') {
-      if (forcedPosition === 'bottom' || !forcedPosition && height < app.height - targetOffsetTop - targetHeight) {
-        // On bottom
-        position = 'bottom';
-        top = targetOffsetTop + targetHeight;
-      } else if (forcedPosition === 'top' || !forcedPosition && height < targetOffsetTop - safeAreaTop) {
-        // On top
-        top = targetOffsetTop - height;
-        position = 'top';
-      } else {
-        // On middle
-        position = 'middle';
-        top = targetHeight / 2 + targetOffsetTop - height / 2;
+    // Horizontal Position
+    if (position === 'top' || position === 'bottom') {
+      left = targetWidth / 2 + targetOffsetLeft - width / 2;
+      diff = left;
+      left = Math.max(5, Math.min(left, app.width - width - 5));
+      if (safeAreaLeft) {
+        left = Math.max(left, safeAreaLeft);
       }
-
-      top = Math.max(8, Math.min(top, app.height - height - 8)); // Horizontal Position
-
-      let hPosition;
-
-      if (targetOffsetLeft < app.width / 2) {
-        hPosition = 'right';
-        left = position === 'middle' ? targetOffsetLeft + targetWidth : targetOffsetLeft;
-      } else {
-        hPosition = 'left';
-        left = position === 'middle' ? targetOffsetLeft - width : targetOffsetLeft + targetWidth - width;
+      if (safeAreaRight && left + width > app.width - 5 - safeAreaRight) {
+        left = app.width - 5 - safeAreaRight - width;
       }
-
-      left = Math.max(8, Math.min(left, app.width - width - 8 - safeAreaRight), safeAreaLeft);
-      $el.addClass(`popover-on-${position} popover-on-${hPosition}`);
-    } else {
-      // ios and aurora
-      if (forcedPosition === 'top' || !forcedPosition && height + angleSize < targetOffsetTop - safeAreaTop) {
-        // On top
-        top = targetOffsetTop - height - angleSize;
-      } else if (forcedPosition === 'bottom' || !forcedPosition && height + angleSize < app.height - targetOffsetTop - targetHeight) {
-        // On bottom
-        position = 'bottom';
-        top = targetOffsetTop + targetHeight + angleSize;
-      } else {
-        // On middle
-        position = 'middle';
-        top = targetHeight / 2 + targetOffsetTop - height / 2;
-        diff = top;
-        top = Math.max(5, Math.min(top, app.height - height - 5));
-        diff -= top;
-      } // Horizontal Position
-
-
-      if (position === 'top' || position === 'bottom') {
-        left = targetWidth / 2 + targetOffsetLeft - width / 2;
-        diff = left;
-        left = Math.max(5, Math.min(left, app.width - width - 5));
-
-        if (safeAreaLeft) {
-          left = Math.max(left, safeAreaLeft);
-        }
-
-        if (safeAreaRight && left + width > app.width - 5 - safeAreaRight) {
-          left = app.width - 5 - safeAreaRight - width;
-        }
-
+      diff -= left;
+      if (hasAngle) {
         if (position === 'top') {
           $angleEl.addClass('on-bottom');
         }
-
         if (position === 'bottom') {
           $angleEl.addClass('on-top');
         }
-
-        diff -= left;
         angleLeft = width / 2 - angleSize + diff;
-        angleLeft = Math.max(Math.min(angleLeft, width - angleSize * 2 - 13), 13);
+        angleLeft = Math.max(Math.min(angleLeft, width - angleSize * 2 - angleMin), angleMin);
         $angleEl.css({
           left: `${angleLeft}px`
         });
-      } else if (position === 'middle') {
-        left = targetOffsetLeft - width - angleSize;
-        $angleEl.addClass('on-right');
-
-        if (left < 5 || left + width + safeAreaRight > app.width || left < safeAreaLeft) {
-          if (left < 5) left = targetOffsetLeft + targetWidth + angleSize;
-          if (left + width + safeAreaRight > app.width) left = app.width - width - 5 - safeAreaRight;
-          if (left < safeAreaLeft) left = safeAreaLeft;
-          $angleEl.removeClass('on-right').addClass('on-left');
-        }
-
+      }
+    } else if (position === 'middle') {
+      left = targetOffsetLeft - width - angleSize;
+      if (hasAngle) $angleEl.addClass('on-right');
+      if (left < 5 || left + width + safeAreaRight > app.width || left < safeAreaLeft) {
+        if (left < 5) left = targetOffsetLeft + targetWidth + angleSize;
+        if (left + width + safeAreaRight > app.width) left = app.width - width - 5 - safeAreaRight;
+        if (left < safeAreaLeft) left = safeAreaLeft;
+        if (hasAngle) $angleEl.removeClass('on-right').addClass('on-left');
+      }
+      if (hasAngle) {
         angleTop = height / 2 - angleSize + diff;
-        angleTop = Math.max(Math.min(angleTop, height - angleSize * 2 - 13), 13);
+        angleTop = Math.max(Math.min(angleTop, height - angleSize * 2 - angleMin), angleMin);
         $angleEl.css({
           top: `${angleTop}px`
         });
       }
-    } // Apply Styles
+    }
 
+    // Horizontal Position
+    let hPosition;
+    if (targetOffsetLeft < app.width / 2) {
+      hPosition = 'right';
+    } else {
+      hPosition = 'left';
+    }
+    $el.addClass(`popover-on-${position} popover-on-${hPosition}`);
 
+    // Apply Styles
     $el.css({
       top: `${top}px`,
       left: `${left}px`
     });
   }
-
 }
-
 export default Popover;

package/components/popover/popover-ios.less

@@ -3,54 +3,4 @@
     transform: none;
     transition-property: opacity;
   }
-  .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;
-      }
-    }
-  }
 }

package/components/popover/popover-rtl.css

@@ -1 +1 @@
-:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;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;--f7-safe-area-right:0px;--f7-safe-area-bottom:0px}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-actions-icon-size:28px;--f7-popover-transition-timing-function:initial;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-popover-border-radius:28px;--f7-popover-actions-icon-size:24px}.md,.md .dark,.md [class*=color-]{--f7-popover-bg-color:var(--f7-md-surface-3);--f7-popover-actions-label-text-color:var(--f7-md-on-surface-variant)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);will-change:transform,opacity;--f7-safe-area-top:0px;--f7-safe-area-left:0px;--f7-safe-area-right:0px;--f7-safe-area-bottom:0px}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover,.popover-backdrop{transition-timing-function:var(--f7-popover-transition-timing-function)}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.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;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.md .popover-from-actions-label{justify-content:center}.popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.popover-angle.on-left{left:-26px}.popover-angle.on-left:after{left:19px;top:0}.popover-angle.on-right{left:100%}.popover-angle.on-right:after{left:-19px;top:0}.popover-angle.on-top{left:0;top:-26px}.popover-angle.on-top:after{left:0;top:19px}.popover-angle.on-bottom{left:0;top:100%}.popover-angle.on-bottom:after{left:0;top:-19px}.ios .popover{transform:none;transition-property:opacity}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}

package/components/popover/popover-vars.less

@@ -3,8 +3,8 @@
 }
 .ios-vars({
   --f7-popover-border-radius: 13px;
-  --f7-popover-box-shadow: none;
   --f7-popover-actions-icon-size: 28px;
+  --f7-popover-transition-timing-function: initial;
   .light-vars({
     --f7-popover-bg-color: rgba(255,255,255,0.95);
     --f7-popover-actions-label-text-color: rgba(0,0,0,0.45);
@@ -15,28 +15,11 @@
   });
 });
 .md-vars({
-  --f7-popover-border-radius: 4px;
-  --f7-popover-box-shadow: var(--f7-elevation-8);
+  --f7-popover-transition-timing-function: cubic-bezier(0, 0.8, 0.34, 1);
+  --f7-popover-border-radius: 28px;
   --f7-popover-actions-icon-size: 24px;
-  .light-vars({
-    --f7-popover-bg-color: #fff;
-    --f7-popover-actions-label-text-color: rgba(0,0,0,0.54);
-  });
-  .dark-vars({
-    --f7-popover-bg-color: #1c1c1d;
-    --f7-popover-actions-label-text-color: rgba(255,255,255,0.54);
-  });
 });
-.aurora-vars({
-  --f7-popover-border-radius: 8px;
-  --f7-popover-box-shadow: var(--f7-elevation-8);
-  --f7-popover-actions-icon-size: 24px;
-  .light-vars({
-    --f7-popover-bg-color: #fff;
-    --f7-popover-actions-label-text-color: rgba(0,0,0,0.6);
-  });
-  .dark-vars({
-    --f7-popover-bg-color: #1c1c1d;
-    --f7-popover-actions-label-text-color: rgba(255,255,255,0.6);
-  });
+.md-color-vars({
+  --f7-popover-bg-color: var(--f7-md-surface-3);
+  --f7-popover-actions-label-text-color: var(--f7-md-on-surface-variant);
 });

package/components/popover/popover.css

@@ -1 +1 @@
-:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-box-shadow:none;--f7-popover-actions-icon-size:28px;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-border-radius:4px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.54)}.aurora{--f7-popover-border-radius:8px;--f7-popover-box-shadow:var(--f7-elevation-8);--f7-popover-actions-icon-size:24px;--f7-popover-bg-color:#fff;--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.6)}.aurora .dark,.aurora.dark{--f7-popover-bg-color:#1c1c1d;--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.6)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;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;--f7-safe-area-right:0px;--f7-safe-area-bottom:0px}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.popover-from-actions-bold{font-weight:600}.popover-from-actions-label{line-height:1.3;position:relative;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.ios .popover{transform:none;transition-property:opacity}.ios .popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.ios .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.ios .popover-angle.on-left{left:-26px}.ios .popover-angle.on-left:after{left:19px;top:0}.ios .popover-angle.on-right{left:100%}.ios .popover-angle.on-right:after{left:-19px;top:0}.ios .popover-angle.on-top{left:0;top:-26px}.ios .popover-angle.on-top:after{left:0;top:19px}.ios .popover-angle.on-bottom{left:0;top:100%}.ios .popover-angle.on-bottom:after{left:0;top:-19px}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}.aurora .popover{transform:none;transition-property:opacity}.aurora .popover-angle{width:24px;height:24px;position:absolute;left:-24px;top:0;z-index:100;overflow:hidden}.aurora .popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:24px;height:24px;position:absolute;left:0;top:0;border-radius:4px;transform:rotate(45deg)}.aurora .popover-angle.on-left{left:-24px}.aurora .popover-angle.on-left:after{left:17px;top:0}.aurora .popover-angle.on-right{left:100%}.aurora .popover-angle.on-right:after{left:-17px;top:0}.aurora .popover-angle.on-top{left:0;top:-24px}.aurora .popover-angle.on-top:after{left:0;top:17px}.aurora .popover-angle.on-bottom{left:0;top:100%}.aurora .popover-angle.on-bottom:after{left:0;top:-17px}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:13px;--f7-popover-actions-icon-size:28px;--f7-popover-transition-timing-function:initial;--f7-popover-bg-color:rgba(255, 255, 255, 0.95);--f7-popover-actions-label-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-popover-bg-color:rgba(30, 30, 30, 0.95);--f7-popover-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-popover-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-popover-border-radius:28px;--f7-popover-actions-icon-size:24px}.md,.md .dark,.md [class*=color-]{--f7-popover-bg-color:var(--f7-md-surface-3);--f7-popover-actions-label-text-color:var(--f7-md-on-surface-variant)}.popover-backdrop-unique{z-index:13500}.popover{width:var(--f7-popover-width);z-index:13500;margin:0;top:0;opacity:0;left:0;position:absolute;display:none;transition-duration:.3s;background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);will-change:transform,opacity;--f7-safe-area-top:0px;--f7-safe-area-left:0px;--f7-safe-area-right:0px;--f7-safe-area-bottom:0px}.popover .list{margin:0}.popover .list ul{background:0 0}.popover .list:first-child ul:before{display:none!important}.popover .list:last-child ul:after{display:none!important}.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child ul{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.popover .list:first-child:last-child li:first-child:last-child,.popover .list:first-child:last-child li:first-child:last-child a,.popover .list:first-child:last-child li:first-child:last-child>label,.popover .list:first-child:last-child ul{border-radius:var(--f7-popover-border-radius)}.popover .list+.list{margin-top:var(--f7-list-margin-vertical)}.popover.modal-in{opacity:1}.popover.not-animated{transition-duration:0s}.popover,.popover-backdrop{transition-timing-function:var(--f7-popover-transition-timing-function)}.popover-inner{overflow:auto;-webkit-overflow-scrolling:touch}.popover-from-actions .item-link i.icon{width:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);font-size:var(--f7-popover-actions-icon-size)}.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;display:flex;align-items:center;padding:var(--f7-actions-label-padding);color:var(--f7-popover-actions-label-text-color);font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content)}.popover-from-actions-label:after{content:'';position:absolute;background-color:var(--f7-list-item-border-color);display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;transform-origin:50% 100%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.popover-from-actions-label:last-child:after{display:none!important}.md .popover-from-actions-label{justify-content:center}.popover-angle{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.popover-angle:after{content:'';background:var(--f7-popover-bg-color);width:26px;height:26px;position:absolute;left:0;top:0;border-radius:3px;transform:rotate(45deg)}.popover-angle.on-left{left:-26px}.popover-angle.on-left:after{left:19px;top:0}.popover-angle.on-right{left:100%}.popover-angle.on-right:after{left:-19px;top:0}.popover-angle.on-top{left:0;top:-26px}.popover-angle.on-top:after{left:0;top:19px}.popover-angle.on-bottom{left:0;top:100%}.popover-angle.on-bottom:after{left:0;top:-19px}.ios .popover{transform:none;transition-property:opacity}.md .popover{transform:scale(.85,.6);transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}.md .popover-on-top{transform-origin:center bottom}.md .popover-on-top.popover-on-right{transform-origin:left bottom}.md .popover-on-top.popover-on-left{transform-origin:right bottom}.md .popover-on-middle{transform-origin:center center}.md .popover-on-middle.popover-on-right{transform-origin:left center}.md .popover-on-middle.popover-on-left{transform-origin:right center}.md .popover-on-bottom{transform-origin:center top}.md .popover-on-bottom.popover-on-right{transform-origin:left top}.md .popover-on-bottom.popover-on-left{transform-origin:right top}

package/components/popover/popover.d.ts

@@ -23,6 +23,8 @@ export namespace Popover {
     el?: HTMLElement | CSSSelector;
     /** Full Popover HTML layout string. Can be useful if you want to create Popover element dynamically. */
     content?: string;
+    /** Enables Popover angle/corner. (default true) */
+    angle?: boolean;
     /** Enables Popover backdrop (dark semi transparent layer behind). (default true) */
     backdrop?: boolean;
     /** Backdrop element to share across instances */

package/components/popover/popover.js

@@ -7,6 +7,7 @@ export default {
   params: {
     popover: {
       verticalPosition: 'auto',
+      angle: true,
       backdrop: true,
       backdropEl: undefined,
       backdropUnique: false,
@@ -19,7 +20,6 @@ export default {
   static: {
     Popover
   },
-
   create() {
     const app = this;
     app.popover = extend(ModalMethods({
@@ -29,48 +29,38 @@ export default {
     }), {
       open(popoverEl, targetEl, animate) {
         let $popoverEl = $(popoverEl);
-
         if ($popoverEl.length > 1) {
           // check if same popover in other page
           const $targetPage = $(targetEl).parents('.page');
-
           if ($targetPage.length) {
             $popoverEl.each(el => {
               const $el = $(el);
-
               if ($el.parents($targetPage)[0] === $targetPage[0]) {
                 $popoverEl = $el;
               }
             });
           }
         }
-
         if ($popoverEl.length > 1) {
           $popoverEl = $popoverEl.eq($popoverEl.length - 1);
         }
-
         let popover = $popoverEl[0].f7Modal;
         const data = $popoverEl.dataset();
-
         if (!popover) {
           popover = new Popover(app, Object.assign({
             el: $popoverEl,
             targetEl
           }, data));
         }
-
         return popover.open(targetEl, animate);
       }
-
     });
   },
-
   clicks: {
     '.popover-open': function openPopover($clickedEl, data) {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.popover.open(data.popover, $clickedEl, data.animate);
     },
@@ -78,7 +68,6 @@ export default {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.popover.close(data.popover, data.animate, $clickedEl);
     }