framework7 8.3.3 → 9.0.0-beta.1

package/components/actions/actions-ios.less

@@ -1,11 +1,15 @@
 .ios {
+  .actions-modal {
+    overflow: visible;
+  }
   .actions-group {
     border-radius: var(--f7-actions-border-radius);
+    background: var(--f7-actions-bg-color);
+    box-shadow: var(--f7-glass-shadow);
+    .ios-glass-backdrop();
   }
   .actions-button,
   .actions-label {
-    background: var(--f7-actions-bg-color);
-    .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
     &:first-child {
       border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
     }
@@ -22,23 +26,26 @@
     }
   }
   .actions-grid {
-    .actions-group {
-      border-radius: 0;
+    &::before {
+      content: '';
+      position: absolute;
+      left: var(--f7-actions-group-margin);
+      right: var(--f7-actions-group-margin);
+      bottom: var(--f7-actions-group-margin);
       background: var(--f7-actions-bg-color);
-      .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
-      &:first-child {
-        border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
-      }
-      &:last-child {
-        border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
-      }
-      &:first-child:last-child {
-        border-radius: var(--f7-actions-border-radius);
-      }
+      top: 0;
+      border-radius: var(--f7-actions-border-radius);
+      box-shadow: var(--f7-glass-shadow);
+      .ios-glass-backdrop();
+    }
+    .actions-group {
+      background: transparent;
+      box-shadow: none;
+      backdrop-filter: none;
     }
     .actions-button,
     .actions-label {
-      border-radius: 0 !important;
+      border-radius: var(--f7-actions-border-radius);
     }
   }
   .actions-button-media {

package/components/actions/actions-rtl.css

@@ -1 +1 @@
-:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:13px;--f7-actions-grid-button-text-color:#757575;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-weight:400;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50;--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-actions-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-actions-border-radius:16px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-font-weight:500;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-button-pressed-bg-color:#e5e5e5}.md .dark,.md.dark{--f7-actions-button-pressed-bg-color:#2e2e2e}.md,.md .dark,.md [class*=color-]{--f7-actions-button-text-color:var(--f7-md-on-surface);--f7-actions-bg-color:var(--f7-md-surface-3);--f7-actions-group-border-color:var(--f7-md-outline);--f7-actions-label-text-color:var(--f7-theme-color);--f7-actions-grid-button-text-color:var(--f7-md-on-surface)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.ios .actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.md .actions-modal.modal-in{transform:translate3d(0,0,0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-backdrop,.actions-modal{transition-timing-function:var(--f7-actions-transition-timing-function)}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align)}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);font-weight:var(--f7-actions-label-font-weight);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:0}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}.ios .actions-group{border-radius:var(--f7-actions-border-radius)}.ios .actions-button,.ios .actions-label{background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .ios .actions-button,.ios-translucent-modals .ios .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button:first-child,.ios .actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-button:last-child,.ios .actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-button:last-child:after,.ios .actions-label:last-child:after{display:none!important}.ios .actions-button:first-child:last-child,.ios .actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-button b,.ios .actions-button.actions-button-strong,.ios .actions-label b,.ios .actions-label.actions-button-strong{font-weight:600}.ios .actions-grid .actions-group{border-radius:0;background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .ios .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-grid .actions-button,.ios .actions-grid .actions-label{border-radius:0!important}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-modal{background-color:var(--f7-actions-bg-color);border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;padding-bottom:var(--f7-safe-area-bottom)}.md .actions-button{transition-duration:.3s}.md .actions-button b,.md .actions-button.actions-button-strong,.md .actions-label b,.md .actions-label.actions-button-strong{font-weight:500}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}
+:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:32px;--f7-actions-grid-button-text-color:#757575;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:56px;--f7-actions-button-height-landscape:56px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-weight:400;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:var(--f7-glass-bg-color);--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50;--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-actions-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-actions-border-radius:16px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-font-weight:500;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-button-pressed-bg-color:#e5e5e5}.md .dark,.md.dark{--f7-actions-button-pressed-bg-color:#2e2e2e}.md,.md .dark,.md [class*=color-]{--f7-actions-button-text-color:var(--f7-md-on-surface);--f7-actions-bg-color:var(--f7-md-surface-3);--f7-actions-group-border-color:var(--f7-md-outline);--f7-actions-label-text-color:var(--f7-theme-color);--f7-actions-grid-button-text-color:var(--f7-md-on-surface)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.ios .actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.md .actions-modal.modal-in{transform:translate3d(0,0,0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-backdrop,.actions-modal{transition-timing-function:var(--f7-actions-transition-timing-function)}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align)}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);font-weight:var(--f7-actions-label-font-weight);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:0}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}.ios .actions-modal{overflow:visible}.ios .actions-group{border-radius:var(--f7-actions-border-radius);background:var(--f7-actions-bg-color);box-shadow:var(--f7-glass-shadow);backdrop-filter:saturate(180%) blur(16px)}.ios .actions-button:first-child,.ios .actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-button:last-child,.ios .actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-button:last-child:after,.ios .actions-label:last-child:after{display:none!important}.ios .actions-button:first-child:last-child,.ios .actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-button b,.ios .actions-button.actions-button-strong,.ios .actions-label b,.ios .actions-label.actions-button-strong{font-weight:600}.ios .actions-grid::before{content:'';position:absolute;left:var(--f7-actions-group-margin);right:var(--f7-actions-group-margin);bottom:var(--f7-actions-group-margin);background:var(--f7-actions-bg-color);top:0;border-radius:var(--f7-actions-border-radius);box-shadow:var(--f7-glass-shadow);backdrop-filter:saturate(180%) blur(16px)}.ios .actions-grid .actions-group{background:0 0;box-shadow:none;backdrop-filter:none}.ios .actions-grid .actions-button,.ios .actions-grid .actions-label{border-radius:var(--f7-actions-border-radius)}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-modal{background-color:var(--f7-actions-bg-color);border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;padding-bottom:var(--f7-safe-area-bottom)}.md .actions-button{transition-duration:.3s}.md .actions-button b,.md .actions-button.actions-button-strong,.md .actions-label b,.md .actions-label.actions-button-strong{font-weight:500}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}

package/components/actions/actions-vars.less

@@ -4,15 +4,15 @@
 }
 .ios-vars({
   --f7-actions-transition-timing-function: initial;
-  --f7-actions-border-radius: 13px;
+  --f7-actions-border-radius: 32px;
   /*
   --f7-actions-button-text-color: var(--f7-theme-color);
   */
   --f7-actions-grid-button-text-color: #757575;
   --f7-actions-button-padding: 0px;
   --f7-actions-button-text-align: center;
-  --f7-actions-button-height: 57px;
-  --f7-actions-button-height-landscape: 44px;
+  --f7-actions-button-height: 56px;
+  --f7-actions-button-height-landscape: 56px;
   --f7-actions-button-font-size: 20px;
   --f7-actions-button-icon-size: 28px;
   --f7-actions-button-justify-content: center;
@@ -22,17 +22,14 @@
   --f7-actions-label-justify-content: center;
   --f7-actions-group-border-color: transparent;
   --f7-actions-group-margin: 8px;
+  --f7-actions-bg-color: var(--f7-glass-bg-color);
   .light-vars({
-    --f7-actions-bg-color: rgba(255,255,255,0.95);
-    --f7-actions-bg-color-rgb: 255, 255, 255;
     --f7-actions-button-border-color: rgba(0,0,0,0.2);
     --f7-actions-button-pressed-bg-color: rgba(230,230,230,0.9);
     --f7-actions-button-pressed-bg-color-rgb: 230, 230, 230;
     --f7-actions-label-text-color: #8a8a8a;
   });
   .dark-vars({
-    --f7-actions-bg-color: rgba(45,45,45,0.95);
-    --f7-actions-bg-color-rgb: 45, 45, 45;
     --f7-actions-button-border-color: rgba(255, 255, 255, 0.15);
     --f7-actions-button-pressed-bg-color: rgba(50,50,50,0.9);
     --f7-actions-button-pressed-bg-color-rgb: 50, 50, 50;

package/components/actions/actions.css

@@ -1 +1 @@
-:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:13px;--f7-actions-grid-button-text-color:#757575;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:57px;--f7-actions-button-height-landscape:44px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-weight:400;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:rgba(255, 255, 255, 0.95);--f7-actions-bg-color-rgb:255,255,255;--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-bg-color:rgba(45, 45, 45, 0.95);--f7-actions-bg-color-rgb:45,45,45;--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50;--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-actions-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-actions-border-radius:16px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-font-weight:500;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-button-pressed-bg-color:#e5e5e5}.md .dark,.md.dark{--f7-actions-button-pressed-bg-color:#2e2e2e}.md,.md .dark,.md [class*=color-]{--f7-actions-button-text-color:var(--f7-md-on-surface);--f7-actions-bg-color:var(--f7-md-surface-3);--f7-actions-group-border-color:var(--f7-md-outline);--f7-actions-label-text-color:var(--f7-theme-color);--f7-actions-grid-button-text-color:var(--f7-md-on-surface)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.ios .actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.md .actions-modal.modal-in{transform:translate3d(0,0,0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-backdrop,.actions-modal{transition-timing-function:var(--f7-actions-transition-timing-function)}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align)}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .actions-button.active-state{background-color:rgba(var(--f7-actions-button-pressed-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);font-weight:var(--f7-actions-label-font-weight);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:0}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}.ios .actions-group{border-radius:var(--f7-actions-border-radius)}.ios .actions-button,.ios .actions-label{background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .ios .actions-button,.ios-translucent-modals .ios .actions-label{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-button:first-child,.ios .actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-button:last-child,.ios .actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-button:last-child:after,.ios .actions-label:last-child:after{display:none!important}.ios .actions-button:first-child:last-child,.ios .actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-button b,.ios .actions-button.actions-button-strong,.ios .actions-label b,.ios .actions-label.actions-button-strong{font-weight:600}.ios .actions-grid .actions-group{border-radius:0;background:var(--f7-actions-bg-color)}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .ios .actions-grid .actions-group{background-color:rgba(var(--f7-actions-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.ios .actions-grid .actions-group:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-grid .actions-group:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-grid .actions-group:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-grid .actions-button,.ios .actions-grid .actions-label{border-radius:0!important}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-modal{background-color:var(--f7-actions-bg-color);border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;padding-bottom:var(--f7-safe-area-bottom)}.md .actions-button{transition-duration:.3s}.md .actions-button b,.md .actions-button.actions-button-strong,.md .actions-label b,.md .actions-label.actions-button-strong{font-weight:500}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}
+:root{--f7-actions-grid-button-font-size:12px;--f7-actions-grid-button-icon-size:48px}.ios{--f7-actions-transition-timing-function:initial;--f7-actions-border-radius:32px;--f7-actions-grid-button-text-color:#757575;--f7-actions-button-padding:0px;--f7-actions-button-text-align:center;--f7-actions-button-height:56px;--f7-actions-button-height-landscape:56px;--f7-actions-button-font-size:20px;--f7-actions-button-icon-size:28px;--f7-actions-button-justify-content:center;--f7-actions-label-padding:8px 10px;--f7-actions-label-font-weight:400;--f7-actions-label-font-size:13px;--f7-actions-label-justify-content:center;--f7-actions-group-border-color:transparent;--f7-actions-group-margin:8px;--f7-actions-bg-color:var(--f7-glass-bg-color);--f7-actions-button-border-color:rgba(0, 0, 0, 0.2);--f7-actions-button-pressed-bg-color:rgba(230, 230, 230, 0.9);--f7-actions-button-pressed-bg-color-rgb:230,230,230;--f7-actions-label-text-color:#8a8a8a}.ios .dark,.ios.dark{--f7-actions-button-border-color:rgba(255, 255, 255, 0.15);--f7-actions-button-pressed-bg-color:rgba(50, 50, 50, 0.9);--f7-actions-button-pressed-bg-color-rgb:50,50,50;--f7-actions-label-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-actions-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-actions-border-radius:16px;--f7-actions-button-border-color:transparent;--f7-actions-button-padding:0 16px;--f7-actions-button-text-align:left;--f7-actions-button-height:48px;--f7-actions-button-height-landscape:48px;--f7-actions-button-font-size:16px;--f7-actions-button-icon-size:24px;--f7-actions-button-justify-content:space-between;--f7-actions-label-padding:12px 16px;--f7-actions-label-font-size:14px;--f7-actions-label-font-weight:500;--f7-actions-label-justify-content:flex-start;--f7-actions-group-margin:0px;--f7-actions-button-pressed-bg-color:#e5e5e5}.md .dark,.md.dark{--f7-actions-button-pressed-bg-color:#2e2e2e}.md,.md .dark,.md [class*=color-]{--f7-actions-button-text-color:var(--f7-md-on-surface);--f7-actions-bg-color:var(--f7-md-surface-3);--f7-actions-group-border-color:var(--f7-md-outline);--f7-actions-label-text-color:var(--f7-theme-color);--f7-actions-grid-button-text-color:var(--f7-md-on-surface)}.actions-backdrop-unique{z-index:13500}.actions-modal{position:absolute;left:0;bottom:0;z-index:13500;width:100%;transform:translate3d(0,100%,0);display:none;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;transition-property:transform;will-change:transform}.actions-modal.modal-in,.actions-modal.modal-out{transition-duration:.3s}.actions-modal.not-animated{transition-duration:0s}.ios .actions-modal.modal-in{transform:translate3d(0,calc(-1 * var(--f7-safe-area-bottom)),0)}.md .actions-modal.modal-in{transform:translate3d(0,0,0)}.actions-modal.modal-out{z-index:13499;transform:translate3d(0,100%,0)}@media (min-width:496px){.actions-modal{width:480px;left:50%;margin-left:-240px}}@media (orientation:landscape){.actions-modal{--f7-actions-button-height:var(--f7-actions-button-height-landscape)}}.actions-backdrop,.actions-modal{transition-timing-function:var(--f7-actions-transition-timing-function)}.actions-group{overflow:hidden;position:relative;margin:var(--f7-actions-group-margin);transform:translate3d(0,0,0)}.actions-group:after{content:'';position:absolute;background-color:var(--f7-actions-group-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)))}.actions-group:last-child:after{display:none!important}.actions-button,.actions-label{width:100%;font-weight:400;margin:0;box-sizing:border-box;display:block;position:relative;overflow:hidden;text-align:var(--f7-actions-button-text-align)}.actions-button:after,.actions-label:after{content:'';position:absolute;background-color:var(--f7-actions-button-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)))}.actions-button a,.actions-label a{text-decoration:none;color:inherit;display:block}.actions-button{cursor:pointer;display:flex;color:var(--f7-actions-button-text-color,var(--f7-theme-color));font-size:var(--f7-actions-button-font-size);height:var(--f7-actions-button-height);line-height:var(--f7-actions-button-height);padding:var(--f7-actions-button-padding);justify-content:var(--f7-actions-button-justify-content);z-index:10}.actions-button.active-state{background-color:var(--f7-actions-button-pressed-bg-color)!important}.actions-button[class*=color-]{color:var(--f7-theme-color)}.actions-button-media{flex-shrink:0;display:flex;align-items:center}.actions-button-media i.icon{width:var(--f7-actions-button-icon-size);height:var(--f7-actions-button-icon-size);font-size:var(--f7-actions-button-icon-size)}.actions-button a,.actions-button-text{position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.actions-button-text{width:100%;flex-shrink:1;text-align:var(--f7-actions-button-text-align)}.actions-label{line-height:1.3;display:flex;align-items:center;font-size:var(--f7-actions-label-font-size);font-weight:var(--f7-actions-label-font-weight);color:var(--f7-actions-label-text-color);padding:var(--f7-actions-label-padding);justify-content:var(--f7-actions-label-justify-content);min-height:var(--f7-actions-label-min-height,var(--f7-actions-button-height))}.actions-label[class*=' color-']{--f7-actions-label-text-color:var(--f7-theme-color)}.actions-grid .actions-group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin-top:0}.actions-grid .actions-group:not(:last-child){margin-bottom:0}.actions-grid .actions-button,.actions-grid .actions-label{background:0 0}.actions-grid .actions-button{width:33.33333333%;display:block;color:var(--f7-actions-grid-button-text-color);height:auto;line-height:1;padding:16px}.actions-grid .actions-button:after{display:none!important}.actions-grid .actions-button-media{margin-left:auto!important;margin-right:auto!important;width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-media i.icon{width:var(--f7-actions-grid-button-icon-size);height:var(--f7-actions-grid-button-icon-size);font-size:var(--f7-actions-grid-button-icon-size)}.actions-grid .actions-button-text{margin-left:0!important;text-align:center!important;margin-top:8px;line-height:1.33em;height:1.33em;font-size:var(--f7-actions-grid-button-font-size)}.ios .actions-modal{overflow:visible}.ios .actions-group{border-radius:var(--f7-actions-border-radius);background:var(--f7-actions-bg-color);box-shadow:var(--f7-glass-shadow);backdrop-filter:saturate(180%) blur(16px)}.ios .actions-button:first-child,.ios .actions-label:first-child{border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0}.ios .actions-button:last-child,.ios .actions-label:last-child{border-radius:0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius)}.ios .actions-button:last-child:after,.ios .actions-label:last-child:after{display:none!important}.ios .actions-button:first-child:last-child,.ios .actions-label:first-child:last-child{border-radius:var(--f7-actions-border-radius)}.ios .actions-button b,.ios .actions-button.actions-button-strong,.ios .actions-label b,.ios .actions-label.actions-button-strong{font-weight:600}.ios .actions-grid::before{content:'';position:absolute;left:var(--f7-actions-group-margin);right:var(--f7-actions-group-margin);bottom:var(--f7-actions-group-margin);background:var(--f7-actions-bg-color);top:0;border-radius:var(--f7-actions-border-radius);box-shadow:var(--f7-glass-shadow);backdrop-filter:saturate(180%) blur(16px)}.ios .actions-grid .actions-group{background:0 0;box-shadow:none;backdrop-filter:none}.ios .actions-grid .actions-button,.ios .actions-grid .actions-label{border-radius:var(--f7-actions-border-radius)}.ios .actions-button-media{margin-left:16px}.ios .actions-button-media+.actions-button-text{text-align:left;margin-left:16px}.md .actions-modal{background-color:var(--f7-actions-bg-color);border-radius:var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;padding-bottom:var(--f7-safe-area-bottom)}.md .actions-button{transition-duration:.3s}.md .actions-button b,.md .actions-button.actions-button-strong,.md .actions-label b,.md .actions-label.actions-button-strong{font-weight:500}.md .actions-button-media{min-width:40px}.md .actions-button-media+.actions-button-text{margin-left:16px}

package/components/actions/actions.js

@@ -29,17 +29,11 @@ export default {
     });
   },
   clicks: {
-    '.actions-open': function openActions($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.actions-open': function openActions($clickedEl, data = {}) {
       const app = this;
       app.actions.open(data.actions, data.animate, $clickedEl);
     },
-    '.actions-close': function closeActions($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.actions-close': function closeActions($clickedEl, data = {}) {
       const app = this;
       app.actions.close(data.actions, data.animate, $clickedEl);
     }

package/components/actions/actions.less

@@ -91,9 +91,6 @@
     color: var(--f7-theme-color);
   }
 }
-.actions-button.active-state {
-  .ios-translucent-modals(var(--f7-actions-button-pressed-bg-color-rgb));
-}
 
 .actions-button-media {
   flex-shrink: 0;

package/components/app/app-class.d.ts

@@ -63,6 +63,8 @@ export interface Framework7Parameters {
   iosTranslucentModals?: boolean;
   /** Object with app colors where `primary` color (key) defines main app color theme */
   colors?: object;
+  /** Material color scheme. Can be `default`, `vibrant`, `monochrome` or `monochrome-vibrant` */
+  mdColorScheme?: string;
   /** userAgent string. Required for browser/device detection when rendered on server-side */
   userAgent?: string;
   /** Required for current route detection when rendered on server-side */

package/components/app/app-class.js

@@ -12,10 +12,7 @@ import $ from '../../shared/dom7.js';
 import loadModule from './load-module.js';
 import $jsx from '../../shared/$jsx.js';
 class Framework7 extends Framework7Class {
-  constructor(params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(params = {}) {
     super(params);
     // eslint-disable-next-line
     if (Framework7.instance && typeof window !== 'undefined') {
@@ -51,6 +48,7 @@ class Framework7 extends Framework7Class {
       componentUrl: undefined,
       userAgent: null,
       url: null,
+      mdColorScheme: 'default',
       colors: {
         primary: '#007aff',
         red: '#ff3b30',
@@ -92,6 +90,7 @@ class Framework7 extends Framework7Class {
       passedParams,
       online: w.navigator.onLine,
       colors: app.params.colors,
+      mdColorScheme: app.params.mdColorScheme || 'default',
       darkMode: app.params.darkMode
     });
     if (params.store) app.params.store = params.store;
@@ -121,10 +120,16 @@ class Framework7 extends Framework7Class {
     // Return app instance
     return app;
   }
-  setColorTheme(color) {
+  setColorTheme(color, mdColorScheme) {
     if (!color) return;
     const app = this;
     app.colors.primary = color;
+    app.mdColorScheme = mdColorScheme || app.mdColorScheme;
+    app.setColors();
+  }
+  setMdColorScheme(mdColorScheme) {
+    const app = this;
+    app.mdColorScheme = mdColorScheme || app.mdColorScheme;
     app.setColors();
   }
   setColors() {
@@ -134,7 +139,7 @@ class Framework7 extends Framework7Class {
       app.colorsStyleEl = document.createElement('style');
       document.head.prepend(app.colorsStyleEl);
     }
-    app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors);
+    app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors, app.mdColorScheme);
   }
   mount(rootEl) {
     const app = this;
@@ -156,11 +161,10 @@ class Framework7 extends Framework7Class {
       app.mq.dark = window.matchMedia(DARK);
       app.mq.light = window.matchMedia(LIGHT);
     }
-    app.colorSchemeListener = function colorSchemeListener(_ref) {
-      let {
-        matches,
-        media
-      } = _ref;
+    app.colorSchemeListener = function colorSchemeListener({
+      matches,
+      media
+    }) {
       if (!matches) {
         return;
       }
@@ -302,13 +306,13 @@ class Framework7 extends Framework7Class {
   }
 
   // eslint-disable-next-line
-  loadModule() {
-    return Framework7.loadModule(...arguments);
+  loadModule(...args) {
+    return Framework7.loadModule(...args);
   }
 
   // eslint-disable-next-line
-  loadModules() {
-    return Framework7.loadModules(...arguments);
+  loadModules(...args) {
+    return Framework7.loadModules(...args);
   }
   getVnodeHooks(hook, id) {
     const app = this;

package/components/app/app-vars.less

@@ -69,22 +69,57 @@
 .ios-vars({
   --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
   --f7-line-height: 1.4;
+  --f7-bars-border-color: transparent;
   /*
   --f7-bars-link-color: var(--f7-theme-color);
   */
+
   .light-vars({
+    --f7-glass-bg-color: rgba(255, 255, 255, 0.75);
+    --f7-glass-shadow:
+      inset -1px -1px 0px -0.5px rgba(255, 255, 255, 1),
+      inset 1px 1px 0px -0.5px rgba(255, 255, 255, 1),
+      inset 3px 3px 10px -3px #ddd,
+      inset -3px -3px 10px -3px #ddd,
+      inset 0 0 5px 1px #fff,
+      inset 0 0 0 0.5px rgba(0, 0, 0, 0.25),
+      inset 0 0 24px 0 rgba(0, 0, 0, 0.1),
+      0 0 25px 0 rgba(0, 0, 0, 0.2);
+    --f7-glass-shadow-thumb:
+      inset -3px -3px 0px -3.5px rgba(255, 255, 255, 1),
+      inset 3px 3px 0px -3.5px rgba(255, 255, 255, 1),
+      inset 0px 0px 0px 0.5px rgba(255, 255, 255, 0.5),
+      inset 3px 3px 10px -2px #eee,
+      inset -3px -3px 10px -2px #eee,
+      inset 0 0 5px 1px #fff;
     --f7-bars-text-color: #000;
     --f7-text-color: #000;
-    --f7-bars-bg-color: #f7f7f8;
-    --f7-bars-bg-color-rgb: 247, 247, 248;
-    --f7-bars-border-color: rgba(0,0,0,0.25);
+    --f7-bars-bg-color: #efeff4;
+
   });
   .dark-vars({
+    --f7-glass-bg-color: rgba(50, 50, 50, 0.5);
+    --f7-glass-shadow:
+      inset -2px -2px 0.5px -2.5px rgba(255, 255, 255, 0.4),
+      inset 3px 3px 0.5px -3.5px rgba(255, 255, 255, 0.4),
+      inset 2px 2px 0.5px -2px #262626,
+      inset -2px -2px 0.5px -2px #262626,
+      inset 0 0 5px 1px #141414,
+      inset 0 0 0 1px rgba(255, 255, 255, 0.15),
+      inset 0 0 10px 0 rgba(255, 255, 255, 0.075),
+      inset 0 0 24px 0 rgba(255, 255, 255, 0.05),
+      0 0 25px 0 rgba(0, 0, 0, 0.15);
+    --f7-glass-shadow-thumb:
+      inset 3px 3px 0px -3.5px rgba(255, 255, 255, 1),
+      inset -3px -3px 0px -3.5px rgba(255, 255, 255, 1),
+      inset -0.5px -0.5px 0px rgba(255, 255, 255, 0.5),
+      inset 0.5px 0.5px 0px rgba(255, 255, 255, 0.1),
+      inset -3px 3px 0px -3.5px rgba(255, 255, 255, 0.25),
+      inset 0px -5px 0px -3.5px rgba(255, 255, 255, 0.25),
+      inset 0px -5px 5px rgba(255, 255, 255, 0.25);
     --f7-bars-text-color: #fff;
     --f7-text-color: #fff;
-    --f7-bars-bg-color: #121212;
-    --f7-bars-bg-color-rgb: 22, 22, 22;
-    --f7-bars-border-color: rgba(255,255,255,0.16);
+    --f7-bars-bg-color: rgba(0,0,0,0.5);
   });
 });
 .md-vars({

package/components/app/app.less

@@ -1,7 +1,7 @@
 @import './app-vars.less';
 // Core Icons
 @font-face {
-  @fontBase64: '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';
+  @fontBase64: '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';
   font-family: 'framework7-core-icons';
   src: url('data:application/font-woff;charset=utf-8;base64, @{fontBase64}') format('woff');
   font-weight: 400;

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

@@ -4,10 +4,7 @@ import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
 import $jsx from '../../shared/$jsx.js';
 class AreaChart extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const self = this;
     const defaults = extend({}, app.params.areaChart);
@@ -60,10 +57,9 @@ class AreaChart extends Framework7Class {
       hiddenDatasets
     } = this;
     const summValues = [];
-    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref => {
-      let {
-        values
-      } = _ref;
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      values
+    }) => {
       values.forEach((value, valueIndex) => {
         if (!summValues[valueIndex]) summValues[valueIndex] = 0;
         summValues[valueIndex] += value;
@@ -88,22 +84,20 @@ class AreaChart extends Framework7Class {
     const lastValues = datasets[0].values.map(() => 0);
     let maxValue = 0;
     if (lineChart) {
-      datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref2 => {
-        let {
-          values
-        } = _ref2;
+      datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+        values
+      }) => {
         const datasetMaxValue = Math.max(...values);
         if (datasetMaxValue > maxValue) maxValue = datasetMaxValue;
       });
     } else {
       maxValue = Math.max(...this.getSummValues());
     }
-    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(_ref3 => {
-      let {
-        label,
-        values,
-        color
-      } = _ref3;
+    datasets.filter((dataset, index) => !hiddenDatasets.includes(index)).forEach(({
+      label,
+      values,
+      color
+    }) => {
       const points = values.map((originalValue, valueIndex) => {
         lastValues[valueIndex] += originalValue;
         const value = lineChart ? originalValue : lastValues[valueIndex];
@@ -220,12 +214,11 @@ class AreaChart extends Framework7Class {
     // prettier-ignore
     const datasetsText = currentValues.length > 0 ? `
       <ul class="area-chart-tooltip-list">
-        ${currentValues.map(_ref4 => {
-      let {
-        label,
-        color,
-        value
-      } = _ref4;
+        ${currentValues.map(({
+      label,
+      color,
+      value
+    }) => {
       const valueText = formatTooltipDataset ? formatTooltipDataset.call(self, label, value, color) : `${label ? `${label}: ` : ''}${value}`;
       return `
               <li><span style="background-color: ${color};"></span>${valueText}</li>
@@ -386,13 +379,7 @@ class AreaChart extends Framework7Class {
       style: `background-color: ${dataset.color}`
     }), self.formatLegendLabel(dataset.label)))));
   }
-  update(newParams, onlySvg) {
-    if (newParams === void 0) {
-      newParams = {};
-    }
-    if (onlySvg === void 0) {
-      onlySvg = false;
-    }
+  update(newParams = {}, onlySvg = false) {
     const self = this;
     const {
       params

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

@@ -1 +1 @@
-:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.ios{--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75)}.md{--f7-area-chart-tooltip-total-label-text-color:inherit}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}
+:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.ios{--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75)}.md{--f7-area-chart-tooltip-total-label-text-color:inherit}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}

package/components/area-chart/area-chart.css

@@ -1 +1 @@
-:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.ios{--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75)}.md{--f7-area-chart-tooltip-total-label-text-color:inherit}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{-webkit-appearance:none!important;appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}
+:root{--f7-area-chart-current-line-stroke-width:2px;--f7-area-chart-current-line-stroke:rgba(0, 0, 0, 0.15);--f7-area-chart-axis-text-color:inherit;--f7-area-chart-axis-height:1px;--f7-area-chart-axis-font-size:10px;--f7-area-chart-axis-font-weight:500;--f7-area-chart-tooltip-font-size:12px;--f7-area-chart-tooltip-total-font-size:16px;--f7-area-chart-tooltip-total-font-weight:bold;--f7-area-chart-tooltip-color-size:10px;--f7-area-chart-legend-font-size:14px;--f7-area-chart-legend-font-weight:500;--f7-area-chart-legend-text-color:inherit;--f7-area-chart-legend-padding:4px 8px;--f7-area-chart-legend-border-radius:4px;--f7-area-chart-legend-color-size:14px;--f7-area-chart-line-stroke-width:2px;--f7-area-chart-axis-bg-color:rgba(0, 0, 0, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-area-chart-axis-bg-color:rgba(255, 255, 255, 0.15);--f7-area-chart-legend-disabled-text-color:rgba(255, 255, 255, 0.22)}.ios{--f7-area-chart-tooltip-total-label-text-color:rgba(255, 255, 255, 0.75)}.md{--f7-area-chart-tooltip-total-label-text-color:inherit}.area-chart{position:relative}.area-chart svg{display:block;width:100%;font-size:0;height:auto;margin:0 auto}.area-chart path{fill:none;stroke-width:var(--f7-area-chart-line-stroke-width)}.area-chart-current-line{stroke:var(--f7-area-chart-current-line-stroke);stroke-width:var(--f7-area-chart-current-line-stroke-width)}.area-chart-axis{height:var(--f7-area-chart-axis-height);background:var(--f7-area-chart-axis-bg-color);color:var(--f7-area-chart-axis-text-color);display:flex;font-size:var(--f7-area-chart-axis-font-size);font-weight:var(--f7-area-chart-axis-font-weight);justify-content:space-between;line-height:1;margin-bottom:2em}.area-chart-axis>span{padding-top:10px;width:0;display:flex;align-items:flex-start;justify-content:center;white-space:nowrap}.area-chart-axis>span:first-child{justify-content:flex-start}.area-chart-axis>span:last-child{justify-content:flex-end}.area-chart-tooltip{pointer-events:none;text-align:left;font-size:var(--f7-area-chart-tooltip-font-size);line-height:1.4}.area-chart-tooltip-label{color:var(--f7-area-chart-tooltip-total-label-text-color)}.area-chart-tooltip-total{font-size:var(--f7-area-chart-tooltip-total-font-size);font-weight:var(--f7-area-chart-tooltip-total-font-weight)}.area-chart-tooltip-list{list-style:none;margin:0;padding:0}.area-chart-tooltip-list li{white-space:nowrap}.area-chart-tooltip-list span{display:inline-block;width:var(--f7-area-chart-tooltip-color-size);height:var(--f7-area-chart-tooltip-color-size);border-radius:50%;margin-right:4px}.area-chart-axis~.area-chart-legend{margin-top:2em}.area-chart-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;font-size:var(--f7-area-chart-legend-font-size);width:100%;margin-top:1em}.area-chart-legend-button{appearance:none!important;background-color:transparent;border-radius:0;border:none;outline:0!important;cursor:pointer;font-family:inherit;font-size:inherit;box-shadow:none!important}.area-chart-legend-item{position:relative;color:var(--f7-area-chart-legend-text-color);width:auto;display:flex;align-items:center;font-weight:var(--f7-area-chart-legend-font-weight);transition-duration:.2s;padding:var(--f7-area-chart-legend-padding);border-radius:var(--f7-area-chart-legend-border-radius);overflow:hidden}.area-chart-legend-item span{width:var(--f7-area-chart-legend-color-size);height:var(--f7-area-chart-legend-color-size);margin-right:4px;border-radius:50%;transition-duration:.2s}.area-chart-legend-item-hidden{color:var(--f7-area-chart-legend-disabled-text-color)}.area-chart-legend-item-hidden span{background-color:var(--f7-area-chart-legend-disabled-text-color)!important}

package/components/autocomplete/autocomplete-class.js

@@ -6,10 +6,7 @@ import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
 import $jsx from '../../shared/$jsx.js';
 class Autocomplete extends Framework7Class {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const ac = this;
     ac.app = app;
@@ -459,7 +456,9 @@ class Autocomplete extends Framework7Class {
       class: "input-clear-button"
     })), ac.params.searchbarDisableButton && $jsx("span", {
       class: "searchbar-disable-button"
-    }, ac.params.searchbarDisableText)));
+    }, $jsx("i", {
+      class: "icon icon-close"
+    }), ac.params.searchbarDisableText && $jsx("span", null, ac.params.searchbarDisableText))));
   }
   renderItem(item, index) {
     const ac = this;
@@ -515,23 +514,23 @@ class Autocomplete extends Framework7Class {
 
     // eslint-disable-next-line
     const navbarLeft = inPopup ? ac.params.preloader && $jsx("div", {
-      class: "left"
+      class: "left autocomplete-preloader-wrap"
     }, ac.renderPreloader()) : $jsx("div", {
-      class: "left sliding"
+      class: "left"
     }, $jsx("a", {
       class: "link back"
     }, $jsx("i", {
       class: "icon icon-back"
-    }), $jsx("span", {
-      class: "if-not-md"
-    }, ac.params.pageBackLinkText)));
+    }), ac.params.pageBackLinkText ? $jsx("span", null, ac.params.pageBackLinkText) : ''));
     const navbarRight = inPopup ? $jsx("div", {
       class: "right"
     }, $jsx("a", {
       class: "link popup-close",
       "data-popup": ".autocomplete-popup"
-    }, ac.params.popupCloseLinkText)) : ac.params.preloader && $jsx("div", {
-      class: "right"
+    }, $jsx("i", {
+      class: "icon icon-close"
+    }), ac.params.popupCloseLinkText ? $jsx("span", null, ac.params.popupCloseLinkText) : '')) : ac.params.preloader && $jsx("div", {
+      class: "right autocomplete-preloader-wrap"
     }, ac.renderPreloader());
     return $jsx("div", {
       class: `navbar ${ac.params.navbarColorTheme ? `color-${ac.params.navbarColorTheme}` : ''}`
@@ -540,9 +539,9 @@ class Autocomplete extends Framework7Class {
     }), $jsx("div", {
       class: `navbar-inner ${ac.params.navbarColorTheme ? `color-${ac.params.navbarColorTheme}` : ''}`
     }, navbarLeft, pageTitle && $jsx("div", {
-      class: "title sliding"
+      class: "title"
     }, pageTitle), navbarRight, $jsx("div", {
-      class: "subnavbar sliding"
+      class: "subnavbar"
     }, ac.renderSearchbar())));
   }
   renderDropdown() {

package/components/autocomplete/autocomplete-ios.less

@@ -6,4 +6,20 @@
       margin-bottom: 12px;
     }
   }
+  .searchbar-input-wrap .autocomplete-dropdown {
+    .ios-glass();
+    margin-top: 16px;
+    border-radius: 22px;
+    .autocomplete-dropdown-inner {
+      padding-top: 0;
+    }
+    li:first-child {
+      position: relative;
+      overflow: hidden;
+      border-radius: 22px 22px 0 0;
+    }
+    li:last-child {
+      border-radius: 0 0 22px 22px;
+    }
+  }
 }