framework7 8.3.4 → 9.0.0

package/components/picker/picker.css

@@ -1 +1 @@
-:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px}.ios{--f7-picker-column-font-size:20px;--f7-picker-item-selected-text-color:#000;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-item-selected-text-color:#fff;--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px}.md,.md .dark,.md [class*=color-]{--f7-picker-item-selected-text-color:var(--f7-md-on-surface);--f7-picker-item-text-color:var(--f7-md-on-surface-variant);--f7-picker-divider-text-color:var(--f7-md-on-surface);--f7-picker-item-selected-border-color:var(--f7-md-outline)}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;font-size:var(--f7-picker-column-font-size);--f7-picker-mask-bg-color:transparent}.popover .picker-columns{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.picker-columns::after,.picker-columns::before{content:'';position:absolute;left:0;width:100%;height:20%;z-index:100;pointer-events:none}.page .picker-columns{--f7-picker-mask-bg-color:var(--f7-page-bg-color)}.block-strong .picker-columns{--f7-picker-mask-bg-color:var(--f7-block-strong-bg-color)}.picker-sheet .picker-columns{--f7-picker-mask-bg-color:var(--f7-picker-sheet-bg-color, var(--f7-sheet-bg-color))}.picker-popover .picker-columns{--f7-picker-mask-bg-color:var(--f7-popover-bg-color)}.picker-columns::before{top:0;background-image:linear-gradient(to bottom,var(--f7-picker-mask-bg-color),transparent)}.picker-columns::after{bottom:0;background-image:linear-gradient(to top,var(--f7-picker-mask-bg-color),transparent)}.picker-column{position:relative;max-height:100%;z-index:10}.picker-column.picker-column-first.picker-column-last{width:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px;scrollbar-width:none;scrollbar-color:transparent}.picker-items::-webkit-scrollbar{-webkit-appearance:none;appearance:none;width:0px;display:none;opacity:0;background:0 0}.picker-items::-webkit-scrollbar-track{box-shadow:none;background:0 0}.picker-items::-webkit-scrollbar-thumb{background-color:transparent;outline:0;border-radius:9999px;position:relative}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}.ios .picker-center-highlight{left:16px;right:16px;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .ios .picker-center-highlight{left:8px;right:8px}.md .picker-center-highlight{left:0;right:0;border-top:1px solid var(--f7-md-outline);border-bottom:1px solid var(--f7-md-outline)}
+:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px}.ios{--f7-picker-column-font-size:20px;--f7-picker-item-selected-text-color:#000;--f7-picker-item-selected-bg-color:#00000012;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:#00000073}.ios .dark,.ios.dark{--f7-picker-item-selected-text-color:#fff;--f7-picker-item-selected-bg-color:#ffffff1a;--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:#ffffff8c}.md{--f7-picker-column-font-size:20px}.md,.md .dark,.md [class*=color-]{--f7-picker-item-selected-text-color:var(--f7-md-on-surface);--f7-picker-item-text-color:var(--f7-md-on-surface-variant);--f7-picker-divider-text-color:var(--f7-md-on-surface);--f7-picker-item-selected-border-color:var(--f7-md-outline)}.picker{height:var(--f7-picker-height);width:100%}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:none;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-columns{display:flex;font-size:var(--f7-picker-column-font-size);height:100%;justify-content:center;overflow:hidden;padding:0;position:relative;text-align:right;--f7-picker-mask-bg-color:#0000}.popover .picker-columns{border-radius:0 0 var(--f7-popover-border-radius) var(--f7-popover-border-radius)}.picker-columns:after,.picker-columns:before{content:"";height:20%;left:0;pointer-events:none;position:absolute;width:100%;z-index:100}.page .picker-columns{--f7-picker-mask-bg-color:var(--f7-page-bg-color)}.block-strong .picker-columns{--f7-picker-mask-bg-color:var(--f7-block-strong-bg-color)}.picker-sheet .picker-columns{--f7-picker-mask-bg-color:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover .picker-columns{--f7-picker-mask-bg-color:var(--f7-popover-bg-color)}.picker-columns:before{background-image:linear-gradient(to bottom,var(--f7-picker-mask-bg-color),#0000);top:0}.picker-columns:after{background-image:linear-gradient(to top,var(--f7-picker-mask-bg-color),#0000);bottom:0}.picker-column{max-height:100%;position:relative;z-index:10}.picker-column.picker-column-first.picker-column-last{width:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{align-items:center;color:var(--f7-picker-divider-text-color);display:flex}.picker-items{box-sizing:border-box;height:100%;overflow:auto;padding:var(--f7-picker-scroll-padding,0) 0;scroll-snap-type:y mandatory;scrollbar-color:#0000;scrollbar-width:none}.picker-items::-webkit-scrollbar{appearance:none;background:#0000;display:none;opacity:0;width:0}.picker-items::-webkit-scrollbar-track{background:#0000;box-shadow:none}.picker-items::-webkit-scrollbar-thumb{background-color:initial;border-radius:9999px;outline:none;position:relative}.picker-item{box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;height:var(--f7-picker-item-height);left:0;line-height:var(--f7-picker-item-height);overflow:hidden;position:relative;scroll-snap-align:center;text-overflow:ellipsis;top:0;white-space:nowrap;width:100%}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translateZ(0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{box-sizing:border-box;height:var(--f7-picker-item-height);margin-top:calc(var(--f7-picker-item-height)*-1/2);pointer-events:none;position:absolute;top:50%}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{overflow:visible;perspective:1200px}.picker-3d .picker-item>span{backface-visibility:hidden;box-sizing:border-box;display:block;max-width:100%;overflow:hidden;position:relative;text-overflow:ellipsis;transform-origin:center center -100px;transform-style:preserve-3d}.ios .picker-center-highlight{background-color:var(--f7-picker-item-selected-bg-color);border-radius:16px;left:16px;right:16px}.popover .ios .picker-center-highlight{left:8px;right:8px}.ios .picker-popover .toolbar{position:absolute}.md .picker-popover .toolbar:before{display:none!important}.md .picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.md .picker-center-highlight{border-bottom:1px solid var(--f7-md-outline);border-top:1px solid var(--f7-md-outline);left:0;right:0}

package/components/picker/picker.d.ts

@@ -128,7 +128,7 @@ export namespace Picker {
     closeByOutsideClick?: boolean;
     /** Enables picker toolbar. (default true) */
     toolbar?: boolean;
-    /** Text for Done/Close toolbar button. (default Done) */
+    /** Text for Done/Close toolbar button. (default '') */
     toolbarCloseText?: string;
     /** Will add opened picker to router history which gives ability to close picker by going back in router history and set current route to the picker modal. (default false) */
     routableModals?: boolean;

package/components/picker/picker.js

@@ -14,10 +14,7 @@ export default {
       app,
       domProp: 'f7Picker'
     });
-    app.picker.close = function close(el) {
-      if (el === void 0) {
-        el = '.picker';
-      }
+    app.picker.close = function close(el = '.picker') {
       const $el = $(el);
       if ($el.length === 0) return;
       const picker = $el[0].f7Picker;
@@ -46,7 +43,7 @@ export default {
       scrollToInput: true,
       scrollToEl: undefined,
       toolbar: true,
-      toolbarCloseText: 'Done',
+      toolbarCloseText: '',
       cssClass: null,
       routableModals: false,
       view: null,

package/components/picker/picker.less

@@ -22,13 +22,9 @@
 .picker-popover {
   width: var(--f7-picker-popover-width);
   .toolbar {
-    .hairline-remove(top);
     background: none;
     border-radius: var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0;
   }
-  .toolbar + .picker-columns {
-    height: calc(100% - var(--f7-toolbar-height));
-  }
 }
 .picker-columns {
   display: flex;

package/components/pie-chart/pie-chart-class.js

@@ -4,10 +4,7 @@ import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
 import $jsx from '../../shared/$jsx.js';
 class PieChart extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const self = this;
     const defaults = extend({}, app.params.pieChart);
@@ -60,12 +57,11 @@ class PieChart extends Framework7Class {
       const y = Math.sin(2 * Math.PI * percentage) * (size / 3);
       return [x, y];
     }
-    datasets.forEach(_ref => {
-      let {
-        value,
-        label,
-        color
-      } = _ref;
+    datasets.forEach(({
+      value,
+      label,
+      color
+    }) => {
       const percentage = value / this.getSummValue();
       const [startX, startY] = getCoordinatesForPercentage(cumulativePercentage);
       cumulativePercentage += percentage;
@@ -167,10 +163,7 @@ class PieChart extends Framework7Class {
       "data-index": index
     })));
   }
-  update(newParams) {
-    if (newParams === void 0) {
-      newParams = {};
-    }
+  update(newParams = {}) {
     const self = this;
     const {
       params

package/components/pie-chart/pie-chart-rtl.css

@@ -1 +1 @@
-.pie-chart{position:relative}.pie-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.pie-chart path{transition-duration:150ms}.pie-chart-hidden{opacity:.4}.pie-chart-tooltip{pointer-events:none;text-align:left;font-size:12px;line-height:1.4;white-space:nowrap;width:auto;max-width:none}.pie-chart-tooltip-label{display:flex;align-items:center}.pie-chart-tooltip-color{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
+.pie-chart{position:relative}.pie-chart svg{display:block;font-size:0;height:auto;margin:0 auto;width:100%}.pie-chart path{transition-duration:.15s}.pie-chart-hidden{opacity:.4}.pie-chart-tooltip{font-size:12px;line-height:1.4;max-width:none;pointer-events:none;text-align:left;white-space:nowrap;width:auto}.pie-chart-tooltip-label{align-items:center;display:flex}.pie-chart-tooltip-color{border-radius:50%;display:inline-block;height:10px;margin-right:4px;width:10px}

package/components/pie-chart/pie-chart.css

@@ -1 +1 @@
-.pie-chart{position:relative}.pie-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.pie-chart path{transition-duration:150ms}.pie-chart-hidden{opacity:.4}.pie-chart-tooltip{pointer-events:none;text-align:left;font-size:12px;line-height:1.4;white-space:nowrap;width:auto;max-width:none}.pie-chart-tooltip-label{display:flex;align-items:center}.pie-chart-tooltip-color{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
+.pie-chart{position:relative}.pie-chart svg{display:block;font-size:0;height:auto;margin:0 auto;width:100%}.pie-chart path{transition-duration:.15s}.pie-chart-hidden{opacity:.4}.pie-chart-tooltip{font-size:12px;line-height:1.4;max-width:none;pointer-events:none;text-align:left;white-space:nowrap;width:auto}.pie-chart-tooltip-label{align-items:center;display:flex}.pie-chart-tooltip-color{border-radius:50%;display:inline-block;height:10px;margin-right:4px;width:10px}

package/components/popover/popover-class.js

@@ -53,15 +53,6 @@ class Popover extends Modal {
       }
     }
 
-    // Find Arrow
-    let $arrowEl;
-    if ($el.find('.popover-arrow').length === 0 && popover.params.arrow) {
-      $arrowEl = $('<div class="popover-arrow"></div>');
-      $el.prepend($arrowEl);
-    } else {
-      $arrowEl = $el.find('.popover-arrow');
-    }
-
     // Open
     const originalOpen = popover.open;
     extend(popover, {
@@ -70,16 +61,11 @@ class Popover extends Modal {
       el: $el[0],
       $targetEl,
       targetEl: $targetEl[0],
-      $arrowEl,
-      arrowEl: $arrowEl[0],
       $backdropEl,
       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];
-        }
+      open(...args) {
         let [targetEl, animate] = args;
         if (typeof args[0] === 'boolean') [animate, targetEl] = args;
         if (targetEl) {
@@ -93,7 +79,15 @@ class Popover extends Modal {
       popover.resize();
     }
     popover.on('popoverOpen', () => {
+      if (popover.app.theme === 'ios') {
+        $el.removeClass('modal-in');
+      }
       popover.resize();
+      if (popover.app.theme === 'ios') {
+        requestAnimationFrame(() => {
+          $el.addClass('modal-in');
+        });
+      }
       app.on('resize', handleResize);
       $(window).on('keyboardDidShow keyboardDidHide', handleResize);
       popover.on('popoverClose popoverBeforeDestroy', () => {
@@ -156,8 +150,7 @@ class Popover extends Modal {
     const {
       app,
       $el,
-      $targetEl,
-      $arrowEl
+      $targetEl
     } = popover;
     const {
       targetX,
@@ -169,18 +162,6 @@ class Popover extends Modal {
       top: ''
     });
     const [width, height] = [$el.width(), $el.height()];
-    let arrowSize = 0;
-    let arrowLeft;
-    let arrowTop;
-    const hasArrow = $arrowEl.length > 0;
-    const arrowMin = app.theme === 'ios' ? 13 : 24;
-    if (hasArrow) {
-      $arrowEl.removeClass('on-left on-right on-top on-bottom').css({
-        left: '',
-        top: ''
-      });
-      arrowSize = $arrowEl.width() / 2;
-    }
     $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({
       left: '',
       top: ''
@@ -211,30 +192,27 @@ class Popover extends Modal {
       targetWidth = popover.params.targetWidth || 0;
       targetHeight = popover.params.targetHeight || 0;
     }
-    let [left, top, diff] = [0, 0, 0];
+    let [left, top] = [0, 0];
     // Top Position
     const forcedPosition = verticalPosition === 'auto' ? false : verticalPosition;
     let position = forcedPosition || 'top';
-    if (forcedPosition === 'top' || !forcedPosition && height + arrowSize < targetOffsetTop - safeAreaTop) {
+    if (forcedPosition === 'top' || !forcedPosition && height < targetOffsetTop - safeAreaTop) {
       // On top
-      top = targetOffsetTop - height - arrowSize;
-    } else if (forcedPosition === 'bottom' || !forcedPosition && height + arrowSize < app.height - targetOffsetTop - targetHeight) {
+      top = targetOffsetTop - height;
+    } else if (forcedPosition === 'bottom' || !forcedPosition && height < app.height - targetOffsetTop - targetHeight) {
       // On bottom
       position = 'bottom';
-      top = targetOffsetTop + targetHeight + arrowSize;
+      top = targetOffsetTop + targetHeight;
     } 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);
@@ -242,35 +220,12 @@ class Popover extends Modal {
       if (safeAreaRight && left + width > app.width - 5 - safeAreaRight) {
         left = app.width - 5 - safeAreaRight - width;
       }
-      diff -= left;
-      if (hasArrow) {
-        if (position === 'top') {
-          $arrowEl.addClass('on-bottom');
-        }
-        if (position === 'bottom') {
-          $arrowEl.addClass('on-top');
-        }
-        arrowLeft = width / 2 - arrowSize + diff;
-        arrowLeft = Math.max(Math.min(arrowLeft, width - arrowSize * 2 - arrowMin), arrowMin);
-        $arrowEl.css({
-          left: `${arrowLeft}px`
-        });
-      }
     } else if (position === 'middle') {
-      left = targetOffsetLeft - width - arrowSize;
-      if (hasArrow) $arrowEl.addClass('on-right');
+      left = targetOffsetLeft - width;
       if (left < 5 || left + width + safeAreaRight > app.width || left < safeAreaLeft) {
-        if (left < 5) left = targetOffsetLeft + targetWidth + arrowSize;
+        if (left < 5) left = targetOffsetLeft + targetWidth;
         if (left + width + safeAreaRight > app.width) left = app.width - width - 5 - safeAreaRight;
         if (left < safeAreaLeft) left = safeAreaLeft;
-        if (hasArrow) $arrowEl.removeClass('on-right').addClass('on-left');
-      }
-      if (hasArrow) {
-        arrowTop = height / 2 - arrowSize + diff;
-        arrowTop = Math.max(Math.min(arrowTop, height - arrowSize * 2 - arrowMin), arrowMin);
-        $arrowEl.css({
-          top: `${arrowTop}px`
-        });
       }
     }
 
@@ -288,6 +243,11 @@ class Popover extends Modal {
       top: `${top}px`,
       left: `${left}px`
     });
+    if (app.theme === 'ios') {
+      $el.css({
+        transformOrigin: `${targetOffsetLeft + targetWidth / 2 - left}px ${targetOffsetTop + targetHeight / 2 - top}px`
+      });
+    }
   }
 }
 export default Popover;

package/components/popover/popover-ios.less

@@ -1,6 +1,70 @@
 .ios {
+  .popover-on-top {
+    transform-origin: center bottom;
+    --f7-popover-inner-offset: translate3d(0%, 80px, 0);
+  }
+  .popover-on-top.popover-on-right {
+    transform-origin: left bottom;
+    --f7-popover-inner-offset: translate3d(50%, 80px, 0);
+  }
+  .popover-on-top.popover-on-left {
+    transform-origin: right bottom;
+    --f7-popover-inner-offset: translate3d(-50%, 80px, 0);
+  }
+  .popover-on-middle {
+    transform-origin: center center;
+  }
+  .popover-on-middle.popover-on-right {
+    transform-origin: left center;
+    --f7-popover-inner-offset: translate3d(50%, 0px, 0);
+  }
+  .popover-on-middle.popover-on-left {
+    transform-origin: right center;
+    --f7-popover-inner-offset: translate3d(-50%, 0px, 0);
+  }
+  .popover-on-bottom {
+    transform-origin: center top;
+    --f7-popover-inner-offset: translate3d(0%, -80px, 0);
+  }
+  .popover-on-bottom.popover-on-right {
+    transform-origin: left top;
+    --f7-popover-inner-offset: translate3d(50%, -80px, 0);
+  }
+  .popover-on-bottom.popover-on-left {
+    transform-origin: right top;
+    --f7-popover-inner-offset: translate3d(-50%, -80px, 0);
+  }
   .popover {
-    transform: none;
-    transition-property: opacity;
+    transform: translate3d(0, 0, 0) scale(0);
+    transition-property: opacity, transform;
+    opacity: 1;
+    will-change: auto;
+
+    &.modal-in {
+      transform: translate3d(0, 0, 0) scale(1);
+      transition-timing-function: cubic-bezier(0, 1, 0.2, 1.05);
+      transition-duration: 400ms;
+      .popover-inner {
+        transition-duration: 600ms;
+
+        transition-timing-function: cubic-bezier(0, 1, 0.2, 1.05);
+        transform: translate3d(0, 0, 0) scale(1);
+      }
+    }
+    &.modal-out {
+      opacity: 0;
+      transform: translate3d(0, 0, 0) scale(0);
+      transition-duration: 300ms;
+      .popover-inner {
+        transition-duration: 500ms;
+      }
+    }
+  }
+  .popover-inner {
+    background: var(--f7-glass-bg-color);
+    box-shadow: var(--f7-glass-shadow);
+    border-radius: var(--f7-popover-border-radius);
+    transform: var(--f7-popover-inner-offset);
+    .ios-glass-backdrop();
   }
 }

package/components/popover/popover-md.less

@@ -2,6 +2,8 @@
   .popover {
     transform: scale(0.85, 0.6);
     transition-property: opacity, transform;
+    transition-duration: 300ms;
+
     &.modal-in {
       opacity: 1;
       transform: scale(1);
@@ -11,31 +13,4 @@
       transform: scale(1);
     }
   }
-  .popover-on-top {
-    transform-origin: center bottom;
-  }
-  .popover-on-top.popover-on-right {
-    transform-origin: left bottom;
-  }
-  .popover-on-top.popover-on-left {
-    transform-origin: right bottom;
-  }
-  .popover-on-middle {
-    transform-origin: center center;
-  }
-  .popover-on-middle.popover-on-right {
-    transform-origin: left center;
-  }
-  .popover-on-middle.popover-on-left {
-    transform-origin: right center;
-  }
-  .popover-on-bottom {
-    transform-origin: center top;
-  }
-  .popover-on-bottom.popover-on-right {
-    transform-origin: left top;
-  }
-  .popover-on-bottom.popover-on-left {
-    transform-origin: right top;
-  }
 }

package/components/popover/popover-rtl.css

@@ -1 +1 @@
-: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-arrow{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.popover-arrow: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-arrow.on-left{left:-26px}.popover-arrow.on-left:after{left:19px;top:0}.popover-arrow.on-right{left:100%}.popover-arrow.on-right:after{left:-19px;top:0}.popover-arrow.on-top{left:0;top:-26px}.popover-arrow.on-top:after{left:0;top:19px}.popover-arrow.on-bottom{left:0;top:100%}.popover-arrow.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}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:32px;--f7-popover-actions-icon-size:28px;--f7-popover-transition-timing-function:initial;--f7-popover-bg-color:#0000;--f7-popover-actions-label-text-color:#00000073}.ios .dark,.ios.dark{--f7-popover-actions-label-text-color:#ffffff8c}.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,.popover-backdrop-unique{z-index:13500}.popover{background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);display:none;left:0;margin:0;opacity:0;position:absolute;top:0;width:var(--f7-popover-width);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:none}.popover .list:first-child ul:before,.popover .list:last-child ul:after{display:none!important}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label,.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label,.popover .list:last-child ul{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{font-size:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);width: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{align-items:center;color:var(--f7-popover-actions-label-text-color);display:flex;font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content);line-height:1.3;padding:var(--f7-actions-label-padding);position:relative}.popover-from-actions-label:after{background-color:var(--f7-list-item-border-color);bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:auto;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 100%;width:100%;z-index:15}.popover-from-actions-label:last-child:after{display:none!important}.md .popover-from-actions-label{justify-content:center}.popover-on-top{transform-origin:center bottom}.popover-on-top.popover-on-right{transform-origin:left bottom}.popover-on-top.popover-on-left{transform-origin:right bottom}.popover-on-middle{transform-origin:center center}.popover-on-middle.popover-on-right{transform-origin:left center}.popover-on-middle.popover-on-left{transform-origin:right center}.popover-on-bottom{transform-origin:center top}.popover-on-bottom.popover-on-right{transform-origin:left top}.popover-on-bottom.popover-on-left{transform-origin:right top}.ios .popover-on-top{transform-origin:center bottom;--f7-popover-inner-offset:translate3d(0%,80px,0)}.ios .popover-on-top.popover-on-right{transform-origin:left bottom;--f7-popover-inner-offset:translate3d(50%,80px,0)}.ios .popover-on-top.popover-on-left{transform-origin:right bottom;--f7-popover-inner-offset:translate3d(-50%,80px,0)}.ios .popover-on-middle{transform-origin:center center}.ios .popover-on-middle.popover-on-right{transform-origin:left center;--f7-popover-inner-offset:translate3d(50%,0px,0)}.ios .popover-on-middle.popover-on-left{transform-origin:right center;--f7-popover-inner-offset:translate3d(-50%,0px,0)}.ios .popover-on-bottom{transform-origin:center top;--f7-popover-inner-offset:translate3d(0%,-80px,0)}.ios .popover-on-bottom.popover-on-right{transform-origin:left top;--f7-popover-inner-offset:translate3d(50%,-80px,0)}.ios .popover-on-bottom.popover-on-left{transform-origin:right top;--f7-popover-inner-offset:translate3d(-50%,-80px,0)}.ios .popover{opacity:1;transform:translateZ(0) scale(0);transition-property:opacity,transform;will-change:auto}.ios .popover.modal-in{transform:translateZ(0) scale(1);transition-duration:.4s;transition-timing-function:cubic-bezier(0,1,.2,1.05)}.ios .popover.modal-in .popover-inner{transform:translateZ(0) scale(1);transition-duration:.6s;transition-timing-function:cubic-bezier(0,1,.2,1.05)}.ios .popover.modal-out{opacity:0;transform:translateZ(0) scale(0);transition-duration:.3s}.ios .popover.modal-out .popover-inner{transition-duration:.5s}.ios .popover-inner{backdrop-filter:saturate(180%) blur(16px);background:var(--f7-glass-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-glass-shadow);transform:var(--f7-popover-inner-offset)}.md .popover{transform:scale(.85,.6);transition-duration:.3s;transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}

package/components/popover/popover-vars.less

@@ -2,15 +2,14 @@
   --f7-popover-width: 260px;
 }
 .ios-vars({
-  --f7-popover-border-radius: 13px;
+  --f7-popover-border-radius: 32px;
   --f7-popover-actions-icon-size: 28px;
   --f7-popover-transition-timing-function: initial;
+  --f7-popover-bg-color: transparent;
   .light-vars({
-    --f7-popover-bg-color: rgba(255,255,255,0.95);
     --f7-popover-actions-label-text-color: rgba(0,0,0,0.45);
   });
   .dark-vars({
-    --f7-popover-bg-color: rgba(30,30,30,0.95);
     --f7-popover-actions-label-text-color: rgba(255,255,255,0.55);
   });
 });

package/components/popover/popover.css

@@ -1 +1 @@
-: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-arrow{width:26px;height:26px;position:absolute;left:-26px;top:0;z-index:100;overflow:hidden}.popover-arrow: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-arrow.on-left{left:-26px}.popover-arrow.on-left:after{left:19px;top:0}.popover-arrow.on-right{left:100%}.popover-arrow.on-right:after{left:-19px;top:0}.popover-arrow.on-top{left:0;top:-26px}.popover-arrow.on-top:after{left:0;top:19px}.popover-arrow.on-bottom{left:0;top:100%}.popover-arrow.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}
+:root{--f7-popover-width:260px}.ios{--f7-popover-border-radius:32px;--f7-popover-actions-icon-size:28px;--f7-popover-transition-timing-function:initial;--f7-popover-bg-color:#0000;--f7-popover-actions-label-text-color:#00000073}.ios .dark,.ios.dark{--f7-popover-actions-label-text-color:#ffffff8c}.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,.popover-backdrop-unique{z-index:13500}.popover{background-color:var(--f7-popover-bg-color);border-radius:var(--f7-popover-border-radius);display:none;left:0;margin:0;opacity:0;position:absolute;top:0;width:var(--f7-popover-width);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:none}.popover .list:first-child ul:before,.popover .list:last-child ul:after{display:none!important}.popover .list:first-child li:first-child,.popover .list:first-child li:first-child a,.popover .list:first-child li:first-child>label,.popover .list:first-child ul{border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.popover .list:last-child li:last-child,.popover .list:last-child li:last-child a,.popover .list:last-child li:last-child>label,.popover .list:last-child ul{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{font-size:var(--f7-popover-actions-icon-size);height:var(--f7-popover-actions-icon-size);width: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{align-items:center;color:var(--f7-popover-actions-label-text-color);display:flex;font-size:var(--f7-actions-label-font-size);justify-content:var(--f7-actions-label-justify-content);line-height:1.3;padding:var(--f7-actions-label-padding);position:relative}.popover-from-actions-label:after{background-color:var(--f7-list-item-border-color);bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:auto;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 100%;width:100%;z-index:15}.popover-from-actions-label:last-child:after{display:none!important}.md .popover-from-actions-label{justify-content:center}.popover-on-top{transform-origin:center bottom}.popover-on-top.popover-on-right{transform-origin:left bottom}.popover-on-top.popover-on-left{transform-origin:right bottom}.popover-on-middle{transform-origin:center center}.popover-on-middle.popover-on-right{transform-origin:left center}.popover-on-middle.popover-on-left{transform-origin:right center}.popover-on-bottom{transform-origin:center top}.popover-on-bottom.popover-on-right{transform-origin:left top}.popover-on-bottom.popover-on-left{transform-origin:right top}.ios .popover-on-top{transform-origin:center bottom;--f7-popover-inner-offset:translate3d(0%,80px,0)}.ios .popover-on-top.popover-on-right{transform-origin:left bottom;--f7-popover-inner-offset:translate3d(50%,80px,0)}.ios .popover-on-top.popover-on-left{transform-origin:right bottom;--f7-popover-inner-offset:translate3d(-50%,80px,0)}.ios .popover-on-middle{transform-origin:center center}.ios .popover-on-middle.popover-on-right{transform-origin:left center;--f7-popover-inner-offset:translate3d(50%,0px,0)}.ios .popover-on-middle.popover-on-left{transform-origin:right center;--f7-popover-inner-offset:translate3d(-50%,0px,0)}.ios .popover-on-bottom{transform-origin:center top;--f7-popover-inner-offset:translate3d(0%,-80px,0)}.ios .popover-on-bottom.popover-on-right{transform-origin:left top;--f7-popover-inner-offset:translate3d(50%,-80px,0)}.ios .popover-on-bottom.popover-on-left{transform-origin:right top;--f7-popover-inner-offset:translate3d(-50%,-80px,0)}.ios .popover{opacity:1;transform:translateZ(0) scale(0);transition-property:opacity,transform;will-change:auto}.ios .popover.modal-in{transform:translateZ(0) scale(1);transition-duration:.4s;transition-timing-function:cubic-bezier(0,1,.2,1.05)}.ios .popover.modal-in .popover-inner{transform:translateZ(0) scale(1);transition-duration:.6s;transition-timing-function:cubic-bezier(0,1,.2,1.05)}.ios .popover.modal-out{opacity:0;transform:translateZ(0) scale(0);transition-duration:.3s}.ios .popover.modal-out .popover-inner{transition-duration:.5s}.ios .popover-inner{backdrop-filter:saturate(180%) blur(16px);background:var(--f7-glass-bg-color);border-radius:var(--f7-popover-border-radius);box-shadow:var(--f7-glass-shadow);transform:var(--f7-popover-inner-offset)}.md .popover{transform:scale(.85,.6);transition-duration:.3s;transition-property:opacity,transform}.md .popover.modal-in{opacity:1;transform:scale(1)}.md .popover.modal-out{opacity:0;transform:scale(1)}

package/components/popover/popover.d.ts

@@ -23,8 +23,6 @@ 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 arrow/corner. (default true) */
-    arrow?: 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,7 +7,6 @@ export default {
   params: {
     popover: {
       verticalPosition: 'auto',
-      arrow: true,
       backdrop: true,
       backdropEl: undefined,
       backdropUnique: false,
@@ -57,17 +56,11 @@ export default {
     });
   },
   clicks: {
-    '.popover-open': function openPopover($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.popover-open': function openPopover($clickedEl, data = {}) {
       const app = this;
       app.popover.open(data.popover, $clickedEl, data.animate);
     },
-    '.popover-close': function closePopover($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.popover-close': function closePopover($clickedEl, data = {}) {
       const app = this;
       app.popover.close(data.popover, data.animate, $clickedEl);
     }

package/components/popover/popover.less

@@ -15,7 +15,6 @@
   left: 0;
   position: absolute;
   display: none;
-  transition-duration: 300ms;
   background-color: var(--f7-popover-bg-color);
   border-radius: var(--f7-popover-border-radius);
   will-change: transform, opacity;
@@ -110,56 +109,35 @@
     justify-content: center;
   }
 }
-.popover-arrow {
-  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;
-    }
-  }
+
+.popover-on-top {
+  transform-origin: center bottom;
+}
+.popover-on-top.popover-on-right {
+  transform-origin: left bottom;
+}
+.popover-on-top.popover-on-left {
+  transform-origin: right bottom;
+}
+.popover-on-middle {
+  transform-origin: center center;
+}
+.popover-on-middle.popover-on-right {
+  transform-origin: left center;
 }
+.popover-on-middle.popover-on-left {
+  transform-origin: right center;
+}
+.popover-on-bottom {
+  transform-origin: center top;
+}
+.popover-on-bottom.popover-on-right {
+  transform-origin: left top;
+}
+.popover-on-bottom.popover-on-left {
+  transform-origin: right top;
+}
+
 .if-ios-theme({
   @import './popover-ios.less';
 });