@xenknight/framework7 0.0.5 → 0.0.7

package/components/navbar-new/navbar.less

@@ -0,0 +1,268 @@
+/* === Navbar New === */
+@import './navbar-vars.less';
+
+.navbars-new,
+.navbar-new {
+  z-index: 500;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+.navbars-new {
+  position: absolute;
+  .navbar-new {
+    z-index: auto;
+  }
+  .navbar-new-transitioning {
+    z-index: 500;
+  }
+}
+.navbar-new {
+  --f7-navbar-new-large-collapse-progress: 0;
+  position: relative;
+  backface-visibility: hidden;
+  box-sizing: border-box;
+  margin: 0;
+  height: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+  color: var(--f7-navbar-new-text-color, var(--f7-bars-text-color));
+  font-size: var(--f7-navbar-new-font-size);
+
+  b {
+    font-weight: 500;
+  }
+  a {
+    color: var(--f7-navbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  }
+  a.link {
+    display: flex;
+    justify-content: flex-start;
+    line-height: var(--f7-navbar-new-link-line-height, var(--f7-navbar-new-height));
+    height: var(--f7-navbar-new-link-height, var(--f7-navbar-new-height));
+  }
+  .title,
+  .left,
+  .right {
+    position: relative;
+    z-index: 10;
+  }
+  .title {
+    position: relative;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 10;
+    font-weight: var(--f7-navbar-new-title-font-weight);
+    display: inline-block;
+    line-height: var(--f7-navbar-new-title-line-height);
+    text-align: var(--f7-navbar-new-title-text-align);
+    font-size: var(--f7-navbar-new-title-font-size);
+    .ltr({
+      margin-left: var(--f7-navbar-new-title-margin-left);
+      margin-right: var(--f7-navbar-new-title-margin-left);
+    });
+    .rtl({
+      margin-right: var(--f7-navbar-new-title-margin-left);
+      margin-left: var(--f7-navbar-new-title-margin-left);
+    });
+  }
+  .subtitle {
+    display: block;
+    color: var(--f7-navbar-new-subtitle-text-color);
+    font-weight: normal;
+    font-size: var(--f7-navbar-new-subtitle-font-size);
+    line-height: var(--f7-navbar-new-subtitle-line-height);
+    text-align: var(--f7-navbar-new-subtitle-text-align);
+  }
+  .left,
+  .right {
+    flex-shrink: 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    // transform: translate3d(0,0,0);
+  }
+  .right:first-child {
+    position: absolute;
+    height: 100%;
+  }
+
+  &.no-outline,
+  .no-outline {
+    .navbar-new-bg:after {
+      display: none !important;
+    }
+    .title-large:after {
+      display: none !important;
+    }
+  }
+
+  &.navbar-new-hidden,
+  .navbar-new-hidden & {
+    .navbar-new-bg:before {
+      opacity: 0 !important;
+    }
+  }
+}
+.navbar-new-bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+
+  transition-property: transform;
+}
+// Transitions
+.navbar-new-transitioning {
+  &,
+  & .left,
+  & .title,
+  & .right,
+  & .title-large-text,
+  & .navbar-new-bg,
+  & .subnavbar,
+  & .navbar-new-bg:before {
+    transition-duration: var(--f7-navbar-new-hide-show-transition-duration);
+  }
+}
+.navbar-new-page-transitioning {
+  transition-duration: var(--f7-page-swipeback-transition-duration) !important;
+  .title-large-text,
+  .navbar-new-bg {
+    transition-duration: var(--f7-page-swipeback-transition-duration) !important;
+  }
+}
+
+// Hidden
+.navbar-new-hidden {
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-new-height)), 0);
+  .navbar-new-inner {
+    pointer-events: none;
+    > .left,
+    > .title,
+    > .right {
+      opacity: 0 !important;
+    }
+  }
+  .subnavbar {
+    pointer-events: auto;
+  }
+}
+.navbar-new-hidden-statusbar {
+  transform: translate3d(0, calc(-1 * var(--f7-navbar-new-height) - var(--f7-safe-area-top)), 0);
+}
+.navbar-new-large-hidden .navbar-new-large {
+  --f7-navbar-new-large-collapse-progress: 1;
+}
+.navbar-new-inner {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: var(--f7-safe-area-top)
+    calc(var(--f7-navbar-new-inner-padding-right) + var(--f7-safe-area-right)) 0
+    calc(var(--f7-navbar-new-inner-padding-left) + var(--f7-safe-area-left));
+  transform: translate3d(0, 0, 0);
+  z-index: 10;
+}
+.views,
+.view,
+.page {
+  > .navbar-new {
+    position: absolute;
+  }
+}
+
+.ios .navbar-new:not(.navbar-new-large) .navbar-new-bg {
+  --f7-navbar-new-large-collapse-progress: 1;
+}
+.navbar-new-large .title {
+  opacity: var(--f7-navbar-new-large-collapse-progress);
+}
+.navbar-new-large-collapsed {
+  --f7-navbar-new-large-collapse-progress: 1;
+  .title-large {
+    pointer-events: none;
+  }
+  .title-large-text {
+    opacity: 0;
+  }
+}
+.navbar-new .title-large {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  display: flex;
+  white-space: nowrap;
+  overflow: hidden;
+  height: var(--f7-navbar-new-large-title-height);
+  z-index: 5;
+}
+.navbar-new .title-large-text {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--f7-navbar-new-large-title-text-color);
+  letter-spacing: var(--f7-navbar-new-large-title-letter-spacing);
+  font-size: var(--f7-navbar-new-large-title-font-size);
+  font-weight: var(--f7-navbar-new-large-title-font-weight);
+  line-height: var(--f7-navbar-new-large-title-line-height);
+  padding-left: calc(var(--f7-navbar-new-large-title-padding-left) + var(--f7-safe-area-left));
+  padding-right: calc(var(--f7-navbar-new-large-title-padding-right) + var(--f7-safe-area-right));
+  padding-top: var(--f7-navbar-new-large-title-padding-vertical);
+  padding-bottom: var(--f7-navbar-new-large-title-padding-vertical);
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 100%;
+  transform: translate3d(
+    0px,
+    calc(
+      -1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)
+    ),
+    0
+  );
+  .ltr({
+    transform-origin: calc(var(--f7-navbar-new-large-title-padding-left) + var(--f7-safe-area-left)) center;
+  });
+  .rtl({
+    transform-origin: calc(100% - var(--f7-navbar-new-large-title-padding-left) - var(--f7-safe-area-left)) center;
+  });
+}
+.navbar-no-title-large-transition {
+  .title-large-text {
+    transition-duration: 0ms;
+  }
+}
+
+// Relation with page
+.navbar-new ~ *,
+.navbars-new ~ * {
+  --f7-page-navbar-offset: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+}
+.navbar-new ~ * .page-with-navbar-new-large,
+.navbar-new ~ .page-with-navbar-new-large,
+.navbars-new ~ * .page-with-navbar-new-large,
+.navbars-new ~ .page-with-navbar-new-large,
+.page-with-navbar-new-large .navbar-new ~ * {
+  --f7-page-navbar-offset: calc(
+    var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top)
+  );
+}
+.page.no-navbar,
+.page.no-navbar .navbar-new ~ * {
+  --f7-page-navbar-offset: var(--f7-safe-area-top);
+}
+
+.if-ios-theme({
+  @import './navbar-ios.less';
+});
+.if-md-theme({
+  @import './navbar-md.less';
+});

package/components/notification/notification-class.js

@@ -190,19 +190,19 @@ class Notification extends Modal {
     } = notification.params;
     return $jsx("div", {
       class: `notification ${icon ? 'notification-with-icon' : ''} ${cssClass || ''}`
-    }, $jsx("div", {
-      class: "notification-header"
     }, icon && $jsx("div", {
       class: "notification-icon"
-    }, icon), title && $jsx("div", {
+    }, icon), $jsx("div", {
+      class: "notification-content"
+    }, (title || titleRightText || closeButton) && $jsx("div", {
+      class: "notification-header"
+    }, title && $jsx("div", {
       class: "notification-title"
     }, title), titleRightText && $jsx("div", {
       class: "notification-title-right-text"
     }, titleRightText), closeButton && $jsx("span", {
       class: "notification-close-button"
-    })), $jsx("div", {
-      class: "notification-content"
-    }, subtitle && $jsx("div", {
+    })), subtitle && $jsx("div", {
       class: "notification-subtitle"
     }, subtitle), text && $jsx("div", {
       class: "notification-text"

package/components/notification/notification-ios.less

@@ -2,6 +2,8 @@
   .notification {
     transition-duration: 450ms;
     transform: translate3d(0%, -200%, 0);
+    align-items: center;
+
     &.modal-in {
       transform: translate3d(0%, 0%, 0);
       opacity: 1;
@@ -11,17 +13,10 @@
     }
   }
 
-  .notification-icon {
-    margin-right: 8px;
-  }
-  .notification-header + .notification-content {
-    margin-top: 10px;
-  }
   .notification-title-right-text {
-    margin-right: 6px;
     margin-left: auto;
     + .notification-close-button {
-      margin-left: 10px;
+      margin-left: 12px;
     }
   }
   .notification-close-button {

package/components/notification/notification-md.less

@@ -16,27 +16,8 @@
       transform: translate3d(0, -150%, 0);
     }
   }
-  .notification-with-icon {
-    .notification-icon {
-      position: absolute;
-      left: var(--f7-notification-padding-horizontal);
-      top: var(--f7-notification-padding-vertical);
-    }
-    .notification-content,
-    .notification-header {
-      margin-left: calc(var(--f7-notification-icon-size) + 16px);
-    }
-  }
 
-  .notification-icon {
-    margin-right: 8px;
-  }
-  .notification-subtitle {
-    + .notification-text {
-      margin-top: 4px;
-    }
-  }
-  .notification-header + .notification-content {
+  .notification-header + :is(.notification-subtitle, .notification-text) {
     margin-top: 8px;
   }
   .notification-title-right-text {

package/components/notification/notification-rtl.css

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

package/components/notification/notification-vars.less

@@ -7,36 +7,33 @@
 }
 .ios-vars({
   --f7-notification-margin: 8px;
-  --f7-notification-padding-horizontal: 10px;
-  --f7-notification-padding-vertical: 10px;
-  --f7-notification-border-radius: 12px;
-  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
-  --f7-notification-icon-size: 20px;
+  --f7-notification-padding-horizontal: 16px;
+  --f7-notification-padding-vertical: 16px;
+  --f7-notification-border-radius: 24px;
+  --f7-notification-box-shadow: var(--f7-glass-shadow);
+  --f7-notification-icon-size: 28px;
 
-  --f7-notification-title-font-size: 13px;
-  --f7-notification-title-text-transform: uppercase;
+  --f7-notification-title-font-size: 14px;
+  --f7-notification-title-text-transform: none;
   --f7-notification-title-line-height: 1.4;
-  --f7-notification-title-font-weight: 400;
+  --f7-notification-title-font-weight: bold;
   --f7-notification-title-letter-spacing: 0.02em;
 
-  --f7-notification-title-right-font-size: 13px;
+  --f7-notification-title-right-font-size: 14px;
 
-  --f7-notification-subtitle-font-size: 15px;
+  --f7-notification-subtitle-font-size: 14px;
   --f7-notification-subtitle-font-weight: 600;
 
-  --f7-notification-text-font-size: 15px;
-  --f7-notification-text-line-height: 1.2;
+  --f7-notification-text-font-size: 14px;
+  --f7-notification-text-line-height: 1.4;
+  --f7-notification-bg-color: var(--f7-glass-bg-color);
   .light-vars({
-    --f7-notification-bg-color: rgba(250,250,250,0.95);
-    --f7-notification-bg-color-rgb: 255, 255, 255;
     --f7-notification-title-color: #000;
     --f7-notification-title-right-color: rgba(0,0,0,0.45);
     --f7-notification-subtitle-color: #000;
     --f7-notification-text-color: #000;
   });
   .dark-vars({
-    --f7-notification-bg-color: rgba(30,30,30,0.95);
-    --f7-notification-bg-color-rgb: 30, 30, 30;
     --f7-notification-title-color: #fff;
     --f7-notification-text-color: #fff;
     --f7-notification-subtitle-color: #fff;

package/components/notification/notification.css

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

package/components/notification/notification.less

@@ -20,7 +20,18 @@
   box-shadow: var(--f7-notification-box-shadow);
   background: var(--f7-notification-bg-color);
   margin-top: var(--f7-safe-area-top);
-  .ios-translucent-modals(var(--f7-notification-bg-color-rgb));
+  display: flex;
+  gap: 16px;
+  .ios-glass-backdrop();
+  @media (min-width: 568px) {
+    left: 50%;
+    width: var(--f7-notification-max-width);
+    margin-left: calc(-1 * var(--f7-notification-max-width) / 2);
+  }
+}
+.notification-content {
+  width: 100%;
+  flex-shrink: 10;
 }
 .notification-title {
   color: var(--f7-notification-title-color, var(--f7-theme-color));
@@ -51,6 +62,7 @@
 .notification-icon {
   font-size: 0;
   line-height: var(--f7-notification-icon-size);
+  flex-shrink: 0;
   i,
   & {
     width: var(--f7-notification-icon-size) !important;

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,8 +61,6 @@ class Popover extends Modal {
       el: $el[0],
       $targetEl,
       targetEl: $targetEl[0],
-      $arrowEl,
-      arrowEl: $arrowEl[0],
       $backdropEl,
       backdropEl: $backdropEl && $backdropEl[0],
       type: 'popover',
@@ -93,7 +82,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 +153,7 @@ class Popover extends Modal {
     const {
       app,
       $el,
-      $targetEl,
-      $arrowEl
+      $targetEl
     } = popover;
     const {
       targetX,
@@ -169,18 +165,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 +195,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 +223,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 +246,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;