framework7 8.3.4 → 9.0.0

package/components/searchbar/searchbar-ios.less

@@ -3,14 +3,16 @@
     input[type='search'],
     input[type='text'] {
       z-index: 30;
+      .ios-glass-backdrop();
+      box-shadow: var(--f7-glass-shadow);
     }
     .input-clear-button {
       z-index: 40;
       .ltr({
-        right: 7px;
+        right: 16px;
       });
       .rtl({
-        left: 7px;
+        left: 16px;
       });
     }
   }
@@ -26,10 +28,10 @@
       line-height: 13px;
     }
     .ltr({
-      left: 8px;
+      left: 16px;
     });
     .rtl({
-      right: 8px;
+      right: 16px;
     });
   }
 
@@ -40,6 +42,16 @@
     transition-duration: 300ms;
     color: var(--f7-searchbar-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
     display: none;
+    height: var(--f7-searchbar-height);
+    padding: 0 12px;
+
+    align-items: center;
+    justify-content: center;
+    border-radius: 44px;
+    background-color: var(--f7-searchbar-input-bg-color);
+    box-shadow: var(--f7-glass-shadow);
+    .ios-glass-backdrop();
+    transform: scale(0);
     &.active-state {
       transition-duration: 0ms;
       opacity: 0.3 !important;
@@ -49,8 +61,9 @@
     .searchbar-disable-button {
       pointer-events: auto;
       opacity: 1;
-      .ltr({ margin-left: 8px; });
-      .rtl({ margin-right: 8px; });
+      transform: scale(1);
+      .ltr({ margin-left: 16px; });
+      .rtl({ margin-right: 16px; });
     }
   }
   .searchbar:not(.searchbar-enabled) {
@@ -58,24 +71,33 @@
       transition-duration: 300ms !important;
     }
   }
+  .searchbar-input-wrap {
+    border-radius: var(--f7-searchbar-input-border-radius);
+  }
   .searchbar-expandable {
     .ltr({ left: 0; });
     .rtl({ right: 0; });
     bottom: 0;
-    opacity: 1;
     width: 100%;
-    height: 0%;
+    height: var(--f7-searchbar-expandable-size);
     transform: translate3d(0, 0, 0);
-    overflow: hidden;
+    pointer-events: none;
     .searchbar-disable-button {
-      .ltr({ margin-left: 8px; });
-      .rtl({ margin-right: 8px; });
+      .ltr({ margin-left: 16px; });
+      .rtl({ margin-right: 16px; });
       opacity: 1;
-      display: block;
+      display: flex;
     }
     .searchbar-inner {
+      left: 16px;
+      right: 16px;
+      width: auto;
       height: var(--f7-searchbar-expandable-size);
     }
+    .searchbar-input-wrap {
+      transform: scale(0);
+      transition-duration: 300ms;
+    }
   }
   .navbar.with-searchbar-expandable-enabled,
   .navbar.with-searchbar-expandable-closing {
@@ -100,8 +122,10 @@
   }
 
   .searchbar-expandable.searchbar-enabled {
-    opacity: 1;
     height: var(--f7-searchbar-expandable-size);
     pointer-events: auto;
+    .searchbar-input-wrap {
+      transform: scale(1);
+    }
   }
 }

package/components/searchbar/searchbar-md.less

@@ -6,6 +6,11 @@
     top: 50%;
     transition-duration: 300ms;
   }
+  .searchbar-disable-button {
+    .icon-close {
+      display: none;
+    }
+  }
   .searchbar-icon {
     width: 48px;
     height: 48px;

package/components/searchbar/searchbar-rtl.css

@@ -1 +1 @@
-:root{--f7-searchbar-input-border-width:0px;--f7-searchbar-input-border-color:transparent}.ios{--f7-searchbar-height:44px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:17px;--f7-searchbar-input-border-radius:8px;--f7-searchbar-input-height:32px;--f7-searchbar-inline-input-height:32px;--f7-searchbar-input-padding-horizontal:28px;--f7-searchbar-backdrop-bg-color:rgba(0, 0, 0, 0.4);--f7-searchbar-in-page-content-margin:0px;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:0;--f7-searchbar-in-page-content-input-border-radius:0;--f7-searchbar-placeholder-color:rgba(0, 0, 0, 0.4);--f7-searchbar-input-text-color:#000;--f7-searchbar-search-icon-color:rgba(0, 0, 0, 0.4);--f7-searchbar-input-bg-color:#e4e4e4}.ios .dark,.ios.dark{--f7-searchbar-placeholder-color:rgba(255, 255, 255, 0.4);--f7-searchbar-input-text-color:#fff;--f7-searchbar-search-icon-color:rgba(255, 255, 255, 0.4);--f7-searchbar-input-bg-color:#2a2a2a}.md{--f7-searchbar-border-color:transparent;--f7-searchbar-height:48px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:16px;--f7-searchbar-input-border-radius:24px;--f7-searchbar-input-height:48px;--f7-searchbar-inline-input-height:48px;--f7-searchbar-inline-input-border-radius:24px;--f7-searchbar-input-padding-horizontal:16px;--f7-searchbar-inline-input-padding-horizontal:16px;--f7-searchbar-backdrop-bg-color:rgba(0, 0, 0, 0.25);--f7-searchbar-in-page-content-margin:16px 0;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:24px;--f7-searchbar-in-page-content-input-border-radius:24px;--f7-searchbar-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-searchbar-link-color:var(--f7-md-on-surface);--f7-searchbar-search-icon-color:var(--f7-md-on-surface);--f7-searchbar-input-clear-button-color:var(--f7-md-on-surface);--f7-searchbar-placeholder-color:var(--f7-md-on-surface-variant);--f7-searchbar-input-bg-color:var(--f7-md-secondary-container);--f7-searchbar-input-text-color:var(--f7-md-on-surface)}.searchbar{--f7-link-highlight-color:var(--f7-link-highlight-black);width:100%;position:relative;z-index:200;height:var(--f7-searchbar-height);background-color:var(--f7-searchbar-bg-color,var(--f7-bars-bg-color))}.dark .searchbar{--f7-link-highlight-color:var(--f7-link-highlight-white)}.searchbar input[type=search]::-webkit-search-decoration{display:none}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .searchbar{background-color:rgba(var(--f7-searchbar-bg-color-rgb,var(--f7-bars-bg-color-rgb)),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.ios .subnavbar .searchbar{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.ios .subnavbar .searchbar:after{display:none!important}.searchbar.no-outline:after{display:none!important}.searchbar:after{content:'';position:absolute;background-color:var(--f7-searchbar-border-color,var(--f7-bars-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)))}.page>.searchbar:not(.searchbar-inline){z-index:600}.searchbar input[type=search],.searchbar input[type=text]{box-sizing:border-box;width:100%;height:100%;display:block;border:var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);-webkit-appearance:none;appearance:none;font-family:inherit;font-weight:400;color:var(--f7-searchbar-input-text-color);font-size:var(--f7-searchbar-input-font-size);background-color:var(--f7-searchbar-input-bg-color);border-radius:var(--f7-searchbar-input-border-radius);position:relative;padding:0;padding-left:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right,0px));padding-right:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left,0px))}.searchbar input[type=search]::placeholder,.searchbar input[type=text]::placeholder{color:var(--f7-searchbar-placeholder-color);opacity:1}.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.searchbar .searchbar-input-wrap{flex-shrink:1;width:100%;height:var(--f7-searchbar-input-height);position:relative}.searchbar a{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.page>.searchbar:not(.searchbar-inline){position:absolute;left:0;top:0}.page-content .searchbar:not(.searchbar-inline){border-radius:var(--f7-searchbar-in-page-content-border-radius);margin:var(--f7-searchbar-in-page-content-margin);width:auto;box-shadow:var(--f7-searchbar-in-page-content-box-shadow)}.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,.page-content .searchbar:not(.searchbar-inline) input[type=search],.page-content .searchbar:not(.searchbar-inline) input[type=text]{border-radius:var(--f7-searchbar-in-page-content-input-border-radius,var(--f7-searchbar-input-border-radius))}.searchbar .input-clear-button{color:var(--f7-searchbar-input-clear-button-color,var(--f7-input-clear-button-color))}.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-searchbar-height);position:absolute;transition-duration:.3s;pointer-events:none}.navbar .searchbar-expandable{background:0 0}.navbar .searchbar-expandable:after{display:none!important}.navbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar .searchbar.searchbar-expandable .searchbar-inner{top:var(--f7-safe-area-top);height:calc(100% - var(--f7-safe-area-top))}.toolbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-toolbar-height)}.subnavbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-subnavbar-height)}.tabbar-icons .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-tabbar-icons-height)}.searchbar-inner{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.searchbar-disable-button{cursor:pointer;pointer-events:none;-webkit-appearance:none;appearance:none;background:0 0;border:none;outline:0;padding:0;margin:0;width:auto;opacity:0}.searchbar-icon{pointer-events:none;background-position:center;background-repeat:no-repeat}.searchbar-icon:after{color:var(--f7-searchbar-search-icon-color);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';text-align:center;display:block;width:100%;height:100%;font-size:20px}.searchbar-backdrop{position:absolute;left:0;top:0;width:100%;height:100%;z-index:100;opacity:0;pointer-events:none;transition-duration:.3s;transform:translate3d(0,0,0);background:var(--f7-searchbar-backdrop-bg-color)}.searchbar-backdrop.searchbar-backdrop-in{opacity:1;pointer-events:auto}.page-content>.searchbar-backdrop{position:fixed}.searchbar-not-found{display:none}.hidden-by-searchbar,.list .hidden-by-searchbar,.list li.hidden-by-searchbar,.list.li.hidden-by-searchbar{display:none!important}.navbar.with-searchbar-expandable-enabled-no-transition{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-enabled{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-enabled .navbar-bg,.navbar.with-searchbar-expandable-enabled .title-large,.navbar.with-searchbar-expandable-enabled .title-large-text{transition-duration:.3s}.navbar.with-searchbar-expandable-closing .navbar-bg,.navbar.with-searchbar-expandable-closing .title-large,.navbar.with-searchbar-expandable-closing .title-large-text{transition-duration:.3s}.page-content.with-searchbar-expandable-enabled{height:calc(100% + var(--f7-navbar-large-title-height));transform:translateY(calc(-1 * var(--f7-navbar-large-title-height)));transition-duration:.3s;transition-property:transform}.page-content.with-searchbar-expandable-closing{transition-duration:.3s}.navbars~.page:not(.no-navbar)>.searchbar,.navbar~.page:not(.no-navbar)>.searchbar,.page>.navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbars~.page-with-navbar-large:not(.no-navbar) .searchbar,.navbar~.page-with-navbar-large:not(.no-navbar) .searchbar,.page-with-navbar-large .navbar~* .searchbar,.page-with-navbar-large .navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));transform:translate3d(0,calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),0)}.navbars~.page-with-navbar-large:not(.no-navbar) .page-content .searchbar,.page-with-navbar-large .page-content .searchbar{top:0;transform:none}.searchbar~*{--f7-page-searchbar-offset:var(--f7-searchbar-height)}.ios .page>.toolbar-top-ios~.searchbar,.md .page>.toolbar-top-md~.searchbar,.page>.toolbar-top~.searchbar{top:var(--f7-toolbar-height)}.ios .page>.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.tabbar-icons.toolbar-top-md~.searchbar,.page>.tabbar-icons.toolbar-top~.searchbar{top:var(--f7-tabbar-icons-height)}.ios .page>.navbar~.toolbar-top-ios~.searchbar,.md .page>.navbar~.toolbar-top-md~.searchbar,.page>.navbar~.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))}.ios .page>.navbar~.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.navbar~.tabbar-icons.toolbar-top-md~.searchbar,.page>.navbar~.tabbar-icons.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))}.searchbar.searchbar-inline{width:auto;height:auto;background-color:transparent;background-image:none}.searchbar.searchbar-inline:after,.searchbar.searchbar-inline:before{display:none!important}.searchbar.searchbar-inline .searchbar-input-wrap{height:var(--f7-searchbar-inline-input-height,var(--f7-searchbar-input-height))}.searchbar.searchbar-inline .searchbar-inner{padding:0;position:static;width:auto;height:auto}.searchbar.searchbar-inline input[type=search],.searchbar.searchbar-inline input[type=text]{font-size:var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));border-radius:var(--f7-searchbar-inline-input-border-radius,var(--f7-searchbar-input-border-radius));padding-left:calc(var(--f7-searchbar-inline-input-padding-horizontal,var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right,0px));padding-right:calc(var(--f7-searchbar-inline-input-padding-horizontal,var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left,0px))}.ios .searchbar input[type=search],.ios .searchbar input[type=text]{z-index:30}.ios .searchbar .input-clear-button{z-index:40;left:7px}.ios .searchbar-icon{width:13px;height:13px;position:absolute;top:50%;margin-top:-6px;z-index:40;right:8px}.ios .searchbar-icon:after{content:'search_ios';line-height:13px}.ios .searchbar-disable-button{font-size:17px;flex-shrink:0;transform:translate3d(0,0,0);transition-duration:.3s;color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:none}.ios .searchbar-disable-button.active-state{transition-duration:0s;opacity:.3!important}.ios .searchbar-enabled .searchbar-disable-button{pointer-events:auto;opacity:1;margin-right:8px}.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button{transition-duration:.3s!important}.ios .searchbar-expandable{right:0;bottom:0;opacity:1;width:100%;height:0%;transform:translate3d(0,0,0);overflow:hidden}.ios .searchbar-expandable .searchbar-disable-button{margin-right:8px;opacity:1;display:block}.ios .searchbar-expandable .searchbar-inner{height:var(--f7-searchbar-expandable-size)}.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg{transition-property:transform,opacity}.ios .navbar.with-searchbar-expandable-closing .left,.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-closing .right,.ios .navbar.with-searchbar-expandable-closing .title,.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title{transition-duration:.3s}.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title,.ios .navbar.with-searchbar-expandable-enabled-no-transition .left,.ios .navbar.with-searchbar-expandable-enabled-no-transition .right,.ios .navbar.with-searchbar-expandable-enabled-no-transition .title{transform:translateY(calc(-1 * var(--f7-navbar-height)));opacity:0!important}.ios .searchbar-expandable.searchbar-enabled{opacity:1;height:var(--f7-searchbar-expandable-size);pointer-events:auto}.md .searchbar-disable-button,.md .searchbar-icon{position:absolute;top:50%;transition-duration:.3s}.md .searchbar-icon{width:48px;height:48px;left:0;top:0;display:flex;align-items:center;justify-content:center;right:var(--f7-safe-area-right)}.md .searchbar-icon:after{width:auto;height:auto;content:'search_md';line-height:1.2}.md .searchbar-disable-button{width:48px;height:48px;transform:rotate(-90deg) scale(.5);font-size:0!important;display:block;margin-top:-24px;color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));right:calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right))}.md .searchbar-disable-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';text-align:center;display:block;width:100%;height:100%;font-size:20px;line-height:48px;content:'arrow_right_md'}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button{transform:rotate(0deg) scale(1);pointer-events:auto;opacity:1}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon{opacity:0;transform:rotate(90deg) scale(.5)}.md .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .searchbar .input-clear-button{width:48px;height:48px;margin-top:-24px;left:0}.md .searchbar .input-clear-button:after{line-height:48px;content:'delete_round_md';opacity:1}.md .searchbar .input-clear-button:before{display:none}.md .searchbar-inline{--f7-searchbar-input-extra-padding-left:32px}.md .page>.searchbar,.md .searchbar-expandable,.md .subnavbar .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .page>.searchbar .searchbar-disable-button,.md .searchbar-expandable .searchbar-disable-button,.md .subnavbar .searchbar .searchbar-disable-button{right:calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right))}.md .page>.searchbar .searchbar-icon,.md .searchbar-expandable .searchbar-icon,.md .subnavbar .searchbar .searchbar-icon{right:var(--f7-safe-area-right)}.md .searchbar-expandable{--f7-searchbar-inner-padding-left:4px;--f7-searchbar-inner-padding-right:4px;height:var(--f7-searchbar-expandable-size);opacity:0;bottom:0;border-radius:calc(var(--f7-searchbar-expandable-size));width:calc(var(--f7-searchbar-expandable-size));margin-top:calc(var(--f7-searchbar-expandable-size) * -1 / 2);transform:translate3d(0px,0px,0px);background-color:var(--f7-searchbar-input-bg-color);right:100%;margin-right:calc(var(--f7-searchbar-expandable-size) * -1)}.md .searchbar-expandable.searchbar-enabled{width:100%;border-radius:0;opacity:1;pointer-events:auto;margin-top:0;right:0;margin-right:0}
+:root{--f7-searchbar-input-border-width:0px;--f7-searchbar-input-border-color:#0000}.ios{--f7-searchbar-bg-color:#0000;--f7-searchbar-height:44px;--f7-searchbar-inner-padding-left:0px;--f7-searchbar-inner-padding-right:0px;--f7-searchbar-link-color:var(--f7-bars-text-color);--f7-searchbar-input-font-size:17px;--f7-searchbar-input-border-radius:44px;--f7-searchbar-input-height:44px;--f7-searchbar-inline-input-height:44px;--f7-searchbar-input-padding-horizontal:44px;--f7-searchbar-backdrop-bg-color:#0006;--f7-searchbar-in-page-content-margin:16px;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:44px;--f7-searchbar-in-page-content-input-border-radius:44px;--f7-searchbar-input-bg-color:var(--f7-glass-bg-color);--f7-searchbar-placeholder-color:#0006;--f7-searchbar-input-text-color:#000;--f7-searchbar-search-icon-color:#0006}.ios .dark,.ios.dark{--f7-searchbar-placeholder-color:#fff6;--f7-searchbar-input-text-color:#fff;--f7-searchbar-search-icon-color:#fff6}.md{--f7-searchbar-border-color:#0000;--f7-searchbar-height:48px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:16px;--f7-searchbar-input-border-radius:24px;--f7-searchbar-input-height:48px;--f7-searchbar-inline-input-height:48px;--f7-searchbar-inline-input-border-radius:24px;--f7-searchbar-input-padding-horizontal:16px;--f7-searchbar-inline-input-padding-horizontal:16px;--f7-searchbar-backdrop-bg-color:#00000040;--f7-searchbar-in-page-content-margin:16px 0;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:24px;--f7-searchbar-in-page-content-input-border-radius:24px;--f7-searchbar-bg-color:#0000}.md,.md .dark,.md [class*=color-]{--f7-searchbar-link-color:var(--f7-md-on-surface);--f7-searchbar-search-icon-color:var(--f7-md-on-surface);--f7-searchbar-input-clear-button-color:var(--f7-md-on-surface);--f7-searchbar-placeholder-color:var(--f7-md-on-surface-variant);--f7-searchbar-input-bg-color:var(--f7-md-secondary-container);--f7-searchbar-input-text-color:var(--f7-md-on-surface)}.searchbar{--f7-link-highlight-color:var(--f7-link-highlight-black);background-color:var(--f7-searchbar-bg-color,var(--f7-bars-bg-color));height:var(--f7-searchbar-height);position:relative;width:100%;z-index:200}.dark .searchbar{--f7-link-highlight-color:var(--f7-link-highlight-white)}.searchbar input[type=search]::-webkit-search-decoration{display:none}.ios .subnavbar .searchbar{backdrop-filter:none;background-color:initial}.ios .subnavbar .searchbar:after,.searchbar.no-outline:after{display:none!important}.searchbar:after{background-color:var(--f7-searchbar-border-color,var(--f7-bars-border-color));bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:auto;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 100%;width:100%;z-index:15}.page>.searchbar:not(.searchbar-inline){z-index:600}.searchbar input[type=search],.searchbar input[type=text]{appearance:none;background-color:var(--f7-searchbar-input-bg-color);border:var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);border-radius:var(--f7-searchbar-input-border-radius);box-sizing:border-box;color:var(--f7-searchbar-input-text-color);display:block;font-family:inherit;font-size:var(--f7-searchbar-input-font-size);font-weight:400;height:100%;padding:0;padding-left:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));padding-right:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));position:relative;width:100%}.searchbar input[type=search]::placeholder,.searchbar input[type=text]::placeholder{color:var(--f7-searchbar-placeholder-color);opacity:1}.searchbar input::-webkit-search-cancel-button{appearance:none}.searchbar .searchbar-input-wrap{flex-shrink:1;height:var(--f7-searchbar-input-height);position:relative;width:100%}.searchbar a{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.page>.searchbar:not(.searchbar-inline){left:16px;position:absolute;right:16px;top:0;width:auto}.page-content .searchbar:not(.searchbar-inline){border-radius:var(--f7-searchbar-in-page-content-border-radius);box-shadow:var(--f7-searchbar-in-page-content-box-shadow);margin:var(--f7-searchbar-in-page-content-margin);width:auto}.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,.page-content .searchbar:not(.searchbar-inline) input[type=search],.page-content .searchbar:not(.searchbar-inline) input[type=text]{border-radius:var(--f7-searchbar-in-page-content-input-border-radius,var(--f7-searchbar-input-border-radius))}.searchbar .input-clear-button{color:var(--f7-searchbar-input-clear-button-color,var(--f7-input-clear-button-color))}.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-searchbar-height);pointer-events:none;position:absolute;transition-duration:.3s}.navbar .searchbar-expandable{background:#0000}.navbar .searchbar-expandable:after{display:none!important}.navbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar .searchbar.searchbar-expandable .searchbar-inner{height:calc(100% - var(--f7-safe-area-top));top:var(--f7-safe-area-top)}.toolbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-toolbar-height)}.subnavbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-subnavbar-height)}.tabbar-icons .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-tabbar-icons-height)}.searchbar-inner{align-items:center;box-sizing:border-box;display:flex;height:100%;left:0;padding:0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));position:absolute;top:0;width:100%}.searchbar-disable-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;opacity:0;outline:0;padding:0;pointer-events:none;width:auto}.searchbar-icon{background-position:50%;background-repeat:no-repeat;pointer-events:none}.searchbar-icon:after{color:var(--f7-searchbar-search-icon-color);font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;display:block;font-feature-settings:"liga";font-size:20px;height:100%;text-align:center;width:100%}.searchbar-backdrop{background:var(--f7-searchbar-backdrop-bg-color);height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform:translateZ(0);transition-duration:.3s;width:100%;z-index:100}.searchbar-backdrop.searchbar-backdrop-in{opacity:1;pointer-events:auto}.page-content>.searchbar-backdrop{position:fixed}.searchbar-not-found{display:none}.hidden-by-searchbar,.list .hidden-by-searchbar,.list li.hidden-by-searchbar,.list.li.hidden-by-searchbar{display:none!important}.navbar.with-searchbar-expandable-enabled,.navbar.with-searchbar-expandable-enabled-no-transition{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-closing .navbar-bg,.navbar.with-searchbar-expandable-closing .title-large,.navbar.with-searchbar-expandable-closing .title-large-text,.navbar.with-searchbar-expandable-enabled .navbar-bg,.navbar.with-searchbar-expandable-enabled .title-large,.navbar.with-searchbar-expandable-enabled .title-large-text{transition-duration:.3s}.page-content.with-searchbar-expandable-enabled{height:calc(100% + var(--f7-navbar-large-title-height));transform:translateY(calc(var(--f7-navbar-large-title-height)*-1));transition-duration:.3s;transition-property:transform}.page-content.with-searchbar-expandable-closing{transition-duration:.3s}.navbar~.page:not(.no-navbar)>.searchbar,.page>.navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar~.page-with-navbar-large:not(.no-navbar) .searchbar,.page-with-navbar-large .navbar~* .searchbar,.page-with-navbar-large .navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));transform:translate3d(0,calc(var(--f7-navbar-large-collapse-progress)*-1*var(--f7-navbar-large-title-height)),0)}.page-with-navbar-large .page-content .searchbar{top:0;transform:none}.searchbar~*{--f7-page-searchbar-offset:var(--f7-searchbar-height)}.ios .page>.toolbar-top-ios~.searchbar,.md .page>.toolbar-top-md~.searchbar,.page>.toolbar-top~.searchbar{top:var(--f7-toolbar-height)}.ios .page>.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.tabbar-icons.toolbar-top-md~.searchbar,.page>.tabbar-icons.toolbar-top~.searchbar{top:var(--f7-tabbar-icons-height)}.ios .page>.navbar~.toolbar-top-ios~.searchbar,.md .page>.navbar~.toolbar-top-md~.searchbar,.page>.navbar~.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))}.ios .page>.navbar~.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.navbar~.tabbar-icons.toolbar-top-md~.searchbar,.page>.navbar~.tabbar-icons.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))}.searchbar.searchbar-inline{background-color:initial;background-image:none;height:auto;width:auto}.searchbar.searchbar-inline:after,.searchbar.searchbar-inline:before{display:none!important}.searchbar.searchbar-inline .searchbar-input-wrap{height:var(--f7-searchbar-inline-input-height,var(--f7-searchbar-input-height))}.searchbar.searchbar-inline .searchbar-inner{height:auto;padding:0;position:static;width:auto}.searchbar.searchbar-inline input[type=search],.searchbar.searchbar-inline input[type=text]{border-radius:var(--f7-searchbar-inline-input-border-radius,var(--f7-searchbar-input-border-radius));font-size:var(--f7-searchbar-inline-input-font-size,var(--f7-searchbar-input-font-size));padding-left:calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px));padding-right:calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px))}.ios .searchbar input[type=search],.ios .searchbar input[type=text]{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow);z-index:30}.ios .searchbar .input-clear-button{left:16px;z-index:40}.ios .searchbar-icon{height:13px;margin-top:-6px;position:absolute;right:16px;top:50%;width:13px;z-index:40}.ios .searchbar-icon:after{content:"search_ios";line-height:13px}.ios .searchbar-disable-button{align-items:center;backdrop-filter:saturate(180%) blur(16px);background-color:var(--f7-searchbar-input-bg-color);border-radius:44px;box-shadow:var(--f7-glass-shadow);color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:none;flex-shrink:0;font-size:17px;height:var(--f7-searchbar-height);justify-content:center;padding:0 12px;transform:translateZ(0);transform:scale(0);transition-duration:.3s}.ios .searchbar-disable-button.active-state{opacity:.3!important;transition-duration:0s}.ios .searchbar-enabled .searchbar-disable-button{margin-right:16px;opacity:1;pointer-events:auto;transform:scale(1)}.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button{transition-duration:.3s!important}.ios .searchbar-input-wrap{border-radius:var(--f7-searchbar-input-border-radius)}.ios .searchbar-expandable{bottom:0;height:var(--f7-searchbar-expandable-size);pointer-events:none;right:0;transform:translateZ(0);width:100%}.ios .searchbar-expandable .searchbar-disable-button{display:flex;margin-right:16px;opacity:1}.ios .searchbar-expandable .searchbar-inner{height:var(--f7-searchbar-expandable-size);left:16px;right:16px;width:auto}.ios .searchbar-expandable .searchbar-input-wrap{transform:scale(0);transition-duration:.3s}.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg{transition-property:transform,opacity}.ios .navbar.with-searchbar-expandable-closing .left,.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-closing .right,.ios .navbar.with-searchbar-expandable-closing .title,.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title{transition-duration:.3s}.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title,.ios .navbar.with-searchbar-expandable-enabled-no-transition .left,.ios .navbar.with-searchbar-expandable-enabled-no-transition .right,.ios .navbar.with-searchbar-expandable-enabled-no-transition .title{opacity:0!important;transform:translateY(calc(var(--f7-navbar-height)*-1))}.ios .searchbar-expandable.searchbar-enabled{height:var(--f7-searchbar-expandable-size);pointer-events:auto}.ios .searchbar-expandable.searchbar-enabled .searchbar-input-wrap{transform:scale(1)}.md .searchbar-disable-button,.md .searchbar-icon{position:absolute;top:50%;transition-duration:.3s}.md .searchbar-disable-button .icon-close{display:none}.md .searchbar-icon{align-items:center;display:flex;height:48px;justify-content:center;left:0;right:var(--f7-safe-area-right);top:0;width:48px}.md .searchbar-icon:after{content:"search_md";height:auto;line-height:1.2;width:auto}.md .searchbar-disable-button{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:block;font-size:0!important;height:48px;margin-top:-24px;right:calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right));transform:rotate(-90deg) scale(.5);width:48px}.md .searchbar-disable-button:after{font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;content:"arrow_right_md";display:block;font-feature-settings:"liga";font-size:20px;height:100%;line-height:48px;text-align:center;width:100%}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button{opacity:1;pointer-events:auto;transform:rotate(0deg) scale(1)}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon{opacity:0;transform:rotate(90deg) scale(.5)}.md .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .searchbar .input-clear-button{height:48px;left:0;margin-top:-24px;width:48px}.md .searchbar .input-clear-button:after{content:"delete_round_md";line-height:48px;opacity:1}.md .searchbar .input-clear-button:before{display:none}.md .searchbar-inline{--f7-searchbar-input-extra-padding-left:32px}.md .page>.searchbar,.md .searchbar-expandable,.md .subnavbar .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .page>.searchbar .searchbar-disable-button,.md .searchbar-expandable .searchbar-disable-button,.md .subnavbar .searchbar .searchbar-disable-button{right:calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right))}.md .page>.searchbar .searchbar-icon,.md .searchbar-expandable .searchbar-icon,.md .subnavbar .searchbar .searchbar-icon{right:var(--f7-safe-area-right)}.md .searchbar-expandable{--f7-searchbar-inner-padding-left:4px;--f7-searchbar-inner-padding-right:4px;background-color:var(--f7-searchbar-input-bg-color);border-radius:calc(var(--f7-searchbar-expandable-size));bottom:0;height:var(--f7-searchbar-expandable-size);margin-right:calc(var(--f7-searchbar-expandable-size)*-1);margin-top:calc(var(--f7-searchbar-expandable-size)*-1/2);opacity:0;right:100%;transform:translateZ(0);width:calc(var(--f7-searchbar-expandable-size))}.md .searchbar-expandable.searchbar-enabled{border-radius:0;margin-right:0;margin-top:0;opacity:1;pointer-events:auto;right:0;width:100%}

package/components/searchbar/searchbar-vars.less

@@ -8,44 +8,41 @@
 }
 .ios-vars({
   /*
-  --f7-searchbar-bg-color: var(--f7-bars-bg-color);
-  --f7-searchbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
+
   --f7-searchbar-border-color: var(--f7-bars-border-color);
   */
+  --f7-searchbar-bg-color: transparent;
   --f7-searchbar-height: 44px;
-  --f7-searchbar-inner-padding-left: 8px;
-  --f7-searchbar-inner-padding-right: 8px;
-  /*
-  --f7-searchbar-link-color: var(--f7-bars-link-color, var(--f7-theme-color));
-  */
+  --f7-searchbar-inner-padding-left: 0px;
+  --f7-searchbar-inner-padding-right: 0px;
+  --f7-searchbar-link-color: var(--f7-bars-text-color);
   --f7-searchbar-input-font-size: 17px;
-  --f7-searchbar-input-border-radius: 8px;
-  --f7-searchbar-input-height: 32px;
-  --f7-searchbar-inline-input-height: 32px;
+  --f7-searchbar-input-border-radius: 44px;
+  --f7-searchbar-input-height: 44px;
+  --f7-searchbar-inline-input-height: 44px;
   /*
   --f7-searchbar-inline-input-border-radius: var(--f7-searchbar-input-border-radius);
   */
-  --f7-searchbar-input-padding-horizontal: 28px;
+  --f7-searchbar-input-padding-horizontal: 44px;
   /*
   --f7-searchbar-inline-input-padding-horizontal: var(--f7-searchbar-input-padding-horizontal);
   --f7-searchbar-input-clear-button-color: var(--f7-input-clear-button-color);
   */
   --f7-searchbar-backdrop-bg-color: rgba(0,0,0,0.4);
-  --f7-searchbar-in-page-content-margin: 0px;
+  --f7-searchbar-in-page-content-margin: 16px;
   --f7-searchbar-in-page-content-box-shadow: none;
-  --f7-searchbar-in-page-content-border-radius: 0;
-  --f7-searchbar-in-page-content-input-border-radius: 0;
+  --f7-searchbar-in-page-content-border-radius: 44px;
+  --f7-searchbar-in-page-content-input-border-radius: 44px;
+  --f7-searchbar-input-bg-color: var(--f7-glass-bg-color);
   .light-vars({
     --f7-searchbar-placeholder-color: rgba(0, 0, 0, 0.4);
     --f7-searchbar-input-text-color: #000;
     --f7-searchbar-search-icon-color: rgba(0, 0, 0, 0.4);
-    --f7-searchbar-input-bg-color: #e4e4e4;
   });
   .dark-vars({
     --f7-searchbar-placeholder-color: rgba(255, 255, 255, 0.4);
     --f7-searchbar-input-text-color: #fff;
     --f7-searchbar-search-icon-color: rgba(255, 255, 255, 0.4);
-    --f7-searchbar-input-bg-color: #2a2a2a;
   });
 });
 .md-vars({

package/components/searchbar/searchbar.css

@@ -1 +1 @@
-:root{--f7-searchbar-input-border-width:0px;--f7-searchbar-input-border-color:transparent}.ios{--f7-searchbar-height:44px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:17px;--f7-searchbar-input-border-radius:8px;--f7-searchbar-input-height:32px;--f7-searchbar-inline-input-height:32px;--f7-searchbar-input-padding-horizontal:28px;--f7-searchbar-backdrop-bg-color:rgba(0, 0, 0, 0.4);--f7-searchbar-in-page-content-margin:0px;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:0;--f7-searchbar-in-page-content-input-border-radius:0;--f7-searchbar-placeholder-color:rgba(0, 0, 0, 0.4);--f7-searchbar-input-text-color:#000;--f7-searchbar-search-icon-color:rgba(0, 0, 0, 0.4);--f7-searchbar-input-bg-color:#e4e4e4}.ios .dark,.ios.dark{--f7-searchbar-placeholder-color:rgba(255, 255, 255, 0.4);--f7-searchbar-input-text-color:#fff;--f7-searchbar-search-icon-color:rgba(255, 255, 255, 0.4);--f7-searchbar-input-bg-color:#2a2a2a}.md{--f7-searchbar-border-color:transparent;--f7-searchbar-height:48px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:16px;--f7-searchbar-input-border-radius:24px;--f7-searchbar-input-height:48px;--f7-searchbar-inline-input-height:48px;--f7-searchbar-inline-input-border-radius:24px;--f7-searchbar-input-padding-horizontal:16px;--f7-searchbar-inline-input-padding-horizontal:16px;--f7-searchbar-backdrop-bg-color:rgba(0, 0, 0, 0.25);--f7-searchbar-in-page-content-margin:16px 0;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:24px;--f7-searchbar-in-page-content-input-border-radius:24px;--f7-searchbar-bg-color:transparent}.md,.md .dark,.md [class*=color-]{--f7-searchbar-link-color:var(--f7-md-on-surface);--f7-searchbar-search-icon-color:var(--f7-md-on-surface);--f7-searchbar-input-clear-button-color:var(--f7-md-on-surface);--f7-searchbar-placeholder-color:var(--f7-md-on-surface-variant);--f7-searchbar-input-bg-color:var(--f7-md-secondary-container);--f7-searchbar-input-text-color:var(--f7-md-on-surface)}.searchbar{--f7-link-highlight-color:var(--f7-link-highlight-black);width:100%;position:relative;z-index:200;height:var(--f7-searchbar-height);background-color:var(--f7-searchbar-bg-color,var(--f7-bars-bg-color))}.dark .searchbar{--f7-link-highlight-color:var(--f7-link-highlight-white)}.searchbar input[type=search]::-webkit-search-decoration{display:none}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-bars .searchbar{background-color:rgba(var(--f7-searchbar-bg-color-rgb,var(--f7-bars-bg-color-rgb)),var(--f7-bars-translucent-opacity));-webkit-backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur));backdrop-filter:saturate(180%) blur(var(--f7-bars-translucent-blur))}}.ios .subnavbar .searchbar{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.ios .subnavbar .searchbar:after{display:none!important}.searchbar.no-outline:after{display:none!important}.searchbar:after{content:'';position:absolute;background-color:var(--f7-searchbar-border-color,var(--f7-bars-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)))}.page>.searchbar:not(.searchbar-inline){z-index:600}.searchbar input[type=search],.searchbar input[type=text]{box-sizing:border-box;width:100%;height:100%;display:block;border:var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);-webkit-appearance:none;appearance:none;font-family:inherit;font-weight:400;color:var(--f7-searchbar-input-text-color);font-size:var(--f7-searchbar-input-font-size);background-color:var(--f7-searchbar-input-bg-color);border-radius:var(--f7-searchbar-input-border-radius);position:relative;padding:0;padding-left:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left,0px));padding-right:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right,0px))}.searchbar input[type=search]::placeholder,.searchbar input[type=text]::placeholder{color:var(--f7-searchbar-placeholder-color);opacity:1}.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.searchbar .searchbar-input-wrap{flex-shrink:1;width:100%;height:var(--f7-searchbar-input-height);position:relative}.searchbar a{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.page>.searchbar:not(.searchbar-inline){position:absolute;left:0;top:0}.page-content .searchbar:not(.searchbar-inline){border-radius:var(--f7-searchbar-in-page-content-border-radius);margin:var(--f7-searchbar-in-page-content-margin);width:auto;box-shadow:var(--f7-searchbar-in-page-content-box-shadow)}.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,.page-content .searchbar:not(.searchbar-inline) input[type=search],.page-content .searchbar:not(.searchbar-inline) input[type=text]{border-radius:var(--f7-searchbar-in-page-content-input-border-radius,var(--f7-searchbar-input-border-radius))}.searchbar .input-clear-button{color:var(--f7-searchbar-input-clear-button-color,var(--f7-input-clear-button-color))}.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-searchbar-height);position:absolute;transition-duration:.3s;pointer-events:none}.navbar .searchbar-expandable{background:0 0}.navbar .searchbar-expandable:after{display:none!important}.navbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar .searchbar.searchbar-expandable .searchbar-inner{top:var(--f7-safe-area-top);height:calc(100% - var(--f7-safe-area-top))}.toolbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-toolbar-height)}.subnavbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-subnavbar-height)}.tabbar-icons .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-tabbar-icons-height)}.searchbar-inner{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;padding:0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.searchbar-disable-button{cursor:pointer;pointer-events:none;-webkit-appearance:none;appearance:none;background:0 0;border:none;outline:0;padding:0;margin:0;width:auto;opacity:0}.searchbar-icon{pointer-events:none;background-position:center;background-repeat:no-repeat}.searchbar-icon:after{color:var(--f7-searchbar-search-icon-color);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';text-align:center;display:block;width:100%;height:100%;font-size:20px}.searchbar-backdrop{position:absolute;left:0;top:0;width:100%;height:100%;z-index:100;opacity:0;pointer-events:none;transition-duration:.3s;transform:translate3d(0,0,0);background:var(--f7-searchbar-backdrop-bg-color)}.searchbar-backdrop.searchbar-backdrop-in{opacity:1;pointer-events:auto}.page-content>.searchbar-backdrop{position:fixed}.searchbar-not-found{display:none}.hidden-by-searchbar,.list .hidden-by-searchbar,.list li.hidden-by-searchbar,.list.li.hidden-by-searchbar{display:none!important}.navbar.with-searchbar-expandable-enabled-no-transition{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-enabled{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-enabled .navbar-bg,.navbar.with-searchbar-expandable-enabled .title-large,.navbar.with-searchbar-expandable-enabled .title-large-text{transition-duration:.3s}.navbar.with-searchbar-expandable-closing .navbar-bg,.navbar.with-searchbar-expandable-closing .title-large,.navbar.with-searchbar-expandable-closing .title-large-text{transition-duration:.3s}.page-content.with-searchbar-expandable-enabled{height:calc(100% + var(--f7-navbar-large-title-height));transform:translateY(calc(-1 * var(--f7-navbar-large-title-height)));transition-duration:.3s;transition-property:transform}.page-content.with-searchbar-expandable-closing{transition-duration:.3s}.navbars~.page:not(.no-navbar)>.searchbar,.navbar~.page:not(.no-navbar)>.searchbar,.page>.navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbars~.page-with-navbar-large:not(.no-navbar) .searchbar,.navbar~.page-with-navbar-large:not(.no-navbar) .searchbar,.page-with-navbar-large .navbar~* .searchbar,.page-with-navbar-large .navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));transform:translate3d(0,calc(-1 * var(--f7-navbar-large-collapse-progress) * var(--f7-navbar-large-title-height)),0)}.navbars~.page-with-navbar-large:not(.no-navbar) .page-content .searchbar,.page-with-navbar-large .page-content .searchbar{top:0;transform:none}.searchbar~*{--f7-page-searchbar-offset:var(--f7-searchbar-height)}.ios .page>.toolbar-top-ios~.searchbar,.md .page>.toolbar-top-md~.searchbar,.page>.toolbar-top~.searchbar{top:var(--f7-toolbar-height)}.ios .page>.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.tabbar-icons.toolbar-top-md~.searchbar,.page>.tabbar-icons.toolbar-top~.searchbar{top:var(--f7-tabbar-icons-height)}.ios .page>.navbar~.toolbar-top-ios~.searchbar,.md .page>.navbar~.toolbar-top-md~.searchbar,.page>.navbar~.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))}.ios .page>.navbar~.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.navbar~.tabbar-icons.toolbar-top-md~.searchbar,.page>.navbar~.tabbar-icons.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))}.searchbar.searchbar-inline{width:auto;height:auto;background-color:transparent;background-image:none}.searchbar.searchbar-inline:after,.searchbar.searchbar-inline:before{display:none!important}.searchbar.searchbar-inline .searchbar-input-wrap{height:var(--f7-searchbar-inline-input-height,var(--f7-searchbar-input-height))}.searchbar.searchbar-inline .searchbar-inner{padding:0;position:static;width:auto;height:auto}.searchbar.searchbar-inline input[type=search],.searchbar.searchbar-inline input[type=text]{font-size:var(--f7-searchbar-inline-input-font-size, var(--f7-searchbar-input-font-size));border-radius:var(--f7-searchbar-inline-input-border-radius,var(--f7-searchbar-input-border-radius));padding-left:calc(var(--f7-searchbar-inline-input-padding-horizontal,var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left,0px));padding-right:calc(var(--f7-searchbar-inline-input-padding-horizontal,var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right,0px))}.ios .searchbar input[type=search],.ios .searchbar input[type=text]{z-index:30}.ios .searchbar .input-clear-button{z-index:40;right:7px}.ios .searchbar-icon{width:13px;height:13px;position:absolute;top:50%;margin-top:-6px;z-index:40;left:8px}.ios .searchbar-icon:after{content:'search_ios';line-height:13px}.ios .searchbar-disable-button{font-size:17px;flex-shrink:0;transform:translate3d(0,0,0);transition-duration:.3s;color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:none}.ios .searchbar-disable-button.active-state{transition-duration:0s;opacity:.3!important}.ios .searchbar-enabled .searchbar-disable-button{pointer-events:auto;opacity:1;margin-left:8px}.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button{transition-duration:.3s!important}.ios .searchbar-expandable{left:0;bottom:0;opacity:1;width:100%;height:0%;transform:translate3d(0,0,0);overflow:hidden}.ios .searchbar-expandable .searchbar-disable-button{margin-left:8px;opacity:1;display:block}.ios .searchbar-expandable .searchbar-inner{height:var(--f7-searchbar-expandable-size)}.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg{transition-property:transform,opacity}.ios .navbar.with-searchbar-expandable-closing .left,.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-closing .right,.ios .navbar.with-searchbar-expandable-closing .title,.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title{transition-duration:.3s}.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title,.ios .navbar.with-searchbar-expandable-enabled-no-transition .left,.ios .navbar.with-searchbar-expandable-enabled-no-transition .right,.ios .navbar.with-searchbar-expandable-enabled-no-transition .title{transform:translateY(calc(-1 * var(--f7-navbar-height)));opacity:0!important}.ios .searchbar-expandable.searchbar-enabled{opacity:1;height:var(--f7-searchbar-expandable-size);pointer-events:auto}.md .searchbar-disable-button,.md .searchbar-icon{position:absolute;top:50%;transition-duration:.3s}.md .searchbar-icon{width:48px;height:48px;left:0;top:0;display:flex;align-items:center;justify-content:center;left:var(--f7-safe-area-left)}.md .searchbar-icon:after{width:auto;height:auto;content:'search_md';line-height:1.2}.md .searchbar-disable-button{width:48px;height:48px;transform:rotate(-90deg) scale(.5);font-size:0!important;display:block;margin-top:-24px;color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));left:calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.md .searchbar-disable-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';text-align:center;display:block;width:100%;height:100%;font-size:20px;line-height:48px;content:'arrow_left_md'}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button{transform:rotate(0deg) scale(1);pointer-events:auto;opacity:1}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon{opacity:0;transform:rotate(90deg) scale(.5)}.md .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .searchbar .input-clear-button{width:48px;height:48px;margin-top:-24px;right:0}.md .searchbar .input-clear-button:after{line-height:48px;content:'delete_round_md';opacity:1}.md .searchbar .input-clear-button:before{display:none}.md .searchbar-inline{--f7-searchbar-input-extra-padding-left:32px}.md .page>.searchbar,.md .searchbar-expandable,.md .subnavbar .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .page>.searchbar .searchbar-disable-button,.md .searchbar-expandable .searchbar-disable-button,.md .subnavbar .searchbar .searchbar-disable-button{left:calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.md .page>.searchbar .searchbar-icon,.md .searchbar-expandable .searchbar-icon,.md .subnavbar .searchbar .searchbar-icon{left:var(--f7-safe-area-left)}.md .searchbar-expandable{--f7-searchbar-inner-padding-left:4px;--f7-searchbar-inner-padding-right:4px;height:var(--f7-searchbar-expandable-size);opacity:0;bottom:0;border-radius:calc(var(--f7-searchbar-expandable-size));width:calc(var(--f7-searchbar-expandable-size));margin-top:calc(var(--f7-searchbar-expandable-size) * -1 / 2);transform:translate3d(0px,0px,0px);background-color:var(--f7-searchbar-input-bg-color);left:100%;margin-left:calc(var(--f7-searchbar-expandable-size) * -1)}.md .searchbar-expandable.searchbar-enabled{width:100%;border-radius:0;opacity:1;pointer-events:auto;margin-top:0;left:0;margin-left:0}
+:root{--f7-searchbar-input-border-width:0px;--f7-searchbar-input-border-color:#0000}.ios{--f7-searchbar-bg-color:#0000;--f7-searchbar-height:44px;--f7-searchbar-inner-padding-left:0px;--f7-searchbar-inner-padding-right:0px;--f7-searchbar-link-color:var(--f7-bars-text-color);--f7-searchbar-input-font-size:17px;--f7-searchbar-input-border-radius:44px;--f7-searchbar-input-height:44px;--f7-searchbar-inline-input-height:44px;--f7-searchbar-input-padding-horizontal:44px;--f7-searchbar-backdrop-bg-color:#0006;--f7-searchbar-in-page-content-margin:16px;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:44px;--f7-searchbar-in-page-content-input-border-radius:44px;--f7-searchbar-input-bg-color:var(--f7-glass-bg-color);--f7-searchbar-placeholder-color:#0006;--f7-searchbar-input-text-color:#000;--f7-searchbar-search-icon-color:#0006}.ios .dark,.ios.dark{--f7-searchbar-placeholder-color:#fff6;--f7-searchbar-input-text-color:#fff;--f7-searchbar-search-icon-color:#fff6}.md{--f7-searchbar-border-color:#0000;--f7-searchbar-height:48px;--f7-searchbar-inner-padding-left:8px;--f7-searchbar-inner-padding-right:8px;--f7-searchbar-input-font-size:16px;--f7-searchbar-input-border-radius:24px;--f7-searchbar-input-height:48px;--f7-searchbar-inline-input-height:48px;--f7-searchbar-inline-input-border-radius:24px;--f7-searchbar-input-padding-horizontal:16px;--f7-searchbar-inline-input-padding-horizontal:16px;--f7-searchbar-backdrop-bg-color:#00000040;--f7-searchbar-in-page-content-margin:16px 0;--f7-searchbar-in-page-content-box-shadow:none;--f7-searchbar-in-page-content-border-radius:24px;--f7-searchbar-in-page-content-input-border-radius:24px;--f7-searchbar-bg-color:#0000}.md,.md .dark,.md [class*=color-]{--f7-searchbar-link-color:var(--f7-md-on-surface);--f7-searchbar-search-icon-color:var(--f7-md-on-surface);--f7-searchbar-input-clear-button-color:var(--f7-md-on-surface);--f7-searchbar-placeholder-color:var(--f7-md-on-surface-variant);--f7-searchbar-input-bg-color:var(--f7-md-secondary-container);--f7-searchbar-input-text-color:var(--f7-md-on-surface)}.searchbar{--f7-link-highlight-color:var(--f7-link-highlight-black);background-color:var(--f7-searchbar-bg-color,var(--f7-bars-bg-color));height:var(--f7-searchbar-height);position:relative;width:100%;z-index:200}.dark .searchbar{--f7-link-highlight-color:var(--f7-link-highlight-white)}.searchbar input[type=search]::-webkit-search-decoration{display:none}.ios .subnavbar .searchbar{backdrop-filter:none;background-color:initial}.ios .subnavbar .searchbar:after,.searchbar.no-outline:after{display:none!important}.searchbar:after{background-color:var(--f7-searchbar-border-color,var(--f7-bars-border-color));bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:auto;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 100%;width:100%;z-index:15}.page>.searchbar:not(.searchbar-inline){z-index:600}.searchbar input[type=search],.searchbar input[type=text]{appearance:none;background-color:var(--f7-searchbar-input-bg-color);border:var(--f7-searchbar-input-border-width) solid var(--f7-searchbar-input-border-color);border-radius:var(--f7-searchbar-input-border-radius);box-sizing:border-box;color:var(--f7-searchbar-input-text-color);display:block;font-family:inherit;font-size:var(--f7-searchbar-input-font-size);font-weight:400;height:100%;padding:0;padding-left:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-left, 0px));padding-right:calc(var(--f7-searchbar-input-padding-horizontal) + var(--f7-searchbar-input-extra-padding-right, 0px));position:relative;width:100%}.searchbar input[type=search]::placeholder,.searchbar input[type=text]::placeholder{color:var(--f7-searchbar-placeholder-color);opacity:1}.searchbar input::-webkit-search-cancel-button{appearance:none}.searchbar .searchbar-input-wrap{flex-shrink:1;height:var(--f7-searchbar-input-height);position:relative;width:100%}.searchbar a{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)))}.page>.searchbar:not(.searchbar-inline){left:16px;position:absolute;right:16px;top:0;width:auto}.page-content .searchbar:not(.searchbar-inline){border-radius:var(--f7-searchbar-in-page-content-border-radius);box-shadow:var(--f7-searchbar-in-page-content-box-shadow);margin:var(--f7-searchbar-in-page-content-margin);width:auto}.page-content .searchbar:not(.searchbar-inline) .searchbar-inner,.page-content .searchbar:not(.searchbar-inline) input[type=search],.page-content .searchbar:not(.searchbar-inline) input[type=text]{border-radius:var(--f7-searchbar-in-page-content-input-border-radius,var(--f7-searchbar-input-border-radius))}.searchbar .input-clear-button{color:var(--f7-searchbar-input-clear-button-color,var(--f7-input-clear-button-color))}.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-searchbar-height);pointer-events:none;position:absolute;transition-duration:.3s}.navbar .searchbar-expandable{background:#0000}.navbar .searchbar-expandable:after{display:none!important}.navbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar .searchbar.searchbar-expandable .searchbar-inner{height:calc(100% - var(--f7-safe-area-top));top:var(--f7-safe-area-top)}.toolbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-toolbar-height)}.subnavbar .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-subnavbar-height)}.tabbar-icons .searchbar.searchbar-expandable{--f7-searchbar-expandable-size:var(--f7-tabbar-icons-height)}.searchbar-inner{align-items:center;box-sizing:border-box;display:flex;height:100%;left:0;padding:0 calc(var(--f7-searchbar-inner-padding-right) + var(--f7-safe-area-right)) 0 calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));position:absolute;top:0;width:100%}.searchbar-disable-button{appearance:none;background:none;border:none;cursor:pointer;margin:0;opacity:0;outline:0;padding:0;pointer-events:none;width:auto}.searchbar-icon{background-position:50%;background-repeat:no-repeat;pointer-events:none}.searchbar-icon:after{color:var(--f7-searchbar-search-icon-color);font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;display:block;font-feature-settings:"liga";font-size:20px;height:100%;text-align:center;width:100%}.searchbar-backdrop{background:var(--f7-searchbar-backdrop-bg-color);height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform:translateZ(0);transition-duration:.3s;width:100%;z-index:100}.searchbar-backdrop.searchbar-backdrop-in{opacity:1;pointer-events:auto}.page-content>.searchbar-backdrop{position:fixed}.searchbar-not-found{display:none}.hidden-by-searchbar,.list .hidden-by-searchbar,.list li.hidden-by-searchbar,.list.li.hidden-by-searchbar{display:none!important}.navbar.with-searchbar-expandable-enabled,.navbar.with-searchbar-expandable-enabled-no-transition{--f7-navbar-large-collapse-progress:1}.navbar.with-searchbar-expandable-closing .navbar-bg,.navbar.with-searchbar-expandable-closing .title-large,.navbar.with-searchbar-expandable-closing .title-large-text,.navbar.with-searchbar-expandable-enabled .navbar-bg,.navbar.with-searchbar-expandable-enabled .title-large,.navbar.with-searchbar-expandable-enabled .title-large-text{transition-duration:.3s}.page-content.with-searchbar-expandable-enabled{height:calc(100% + var(--f7-navbar-large-title-height));transform:translateY(calc(var(--f7-navbar-large-title-height)*-1));transition-duration:.3s;transition-property:transform}.page-content.with-searchbar-expandable-closing{transition-duration:.3s}.navbar~.page:not(.no-navbar)>.searchbar,.page>.navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-safe-area-top))}.navbar~.page-with-navbar-large:not(.no-navbar) .searchbar,.page-with-navbar-large .navbar~* .searchbar,.page-with-navbar-large .navbar~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-navbar-large-title-height) + var(--f7-safe-area-top));transform:translate3d(0,calc(var(--f7-navbar-large-collapse-progress)*-1*var(--f7-navbar-large-title-height)),0)}.page-with-navbar-large .page-content .searchbar{top:0;transform:none}.searchbar~*{--f7-page-searchbar-offset:var(--f7-searchbar-height)}.ios .page>.toolbar-top-ios~.searchbar,.md .page>.toolbar-top-md~.searchbar,.page>.toolbar-top~.searchbar{top:var(--f7-toolbar-height)}.ios .page>.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.tabbar-icons.toolbar-top-md~.searchbar,.page>.tabbar-icons.toolbar-top~.searchbar{top:var(--f7-tabbar-icons-height)}.ios .page>.navbar~.toolbar-top-ios~.searchbar,.md .page>.navbar~.toolbar-top-md~.searchbar,.page>.navbar~.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top))}.ios .page>.navbar~.tabbar-icons.toolbar-top-ios~.searchbar,.md .page>.navbar~.tabbar-icons.toolbar-top-md~.searchbar,.page>.navbar~.tabbar-icons.toolbar-top~.searchbar{top:calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top))}.searchbar.searchbar-inline{background-color:initial;background-image:none;height:auto;width:auto}.searchbar.searchbar-inline:after,.searchbar.searchbar-inline:before{display:none!important}.searchbar.searchbar-inline .searchbar-input-wrap{height:var(--f7-searchbar-inline-input-height,var(--f7-searchbar-input-height))}.searchbar.searchbar-inline .searchbar-inner{height:auto;padding:0;position:static;width:auto}.searchbar.searchbar-inline input[type=search],.searchbar.searchbar-inline input[type=text]{border-radius:var(--f7-searchbar-inline-input-border-radius,var(--f7-searchbar-input-border-radius));font-size:var(--f7-searchbar-inline-input-font-size,var(--f7-searchbar-input-font-size));padding-left:calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-left, 0px));padding-right:calc(var(--f7-searchbar-inline-input-padding-horizontal, var(--f7-searchbar-input-padding-horizontal)) + var(--f7-searchbar-input-extra-padding-right, 0px))}.ios .searchbar input[type=search],.ios .searchbar input[type=text]{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow);z-index:30}.ios .searchbar .input-clear-button{right:16px;z-index:40}.ios .searchbar-icon{height:13px;left:16px;margin-top:-6px;position:absolute;top:50%;width:13px;z-index:40}.ios .searchbar-icon:after{content:"search_ios";line-height:13px}.ios .searchbar-disable-button{align-items:center;backdrop-filter:saturate(180%) blur(16px);background-color:var(--f7-searchbar-input-bg-color);border-radius:44px;box-shadow:var(--f7-glass-shadow);color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:none;flex-shrink:0;font-size:17px;height:var(--f7-searchbar-height);justify-content:center;padding:0 12px;transform:translateZ(0);transform:scale(0);transition-duration:.3s}.ios .searchbar-disable-button.active-state{opacity:.3!important;transition-duration:0s}.ios .searchbar-enabled .searchbar-disable-button{margin-left:16px;opacity:1;pointer-events:auto;transform:scale(1)}.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button{transition-duration:.3s!important}.ios .searchbar-input-wrap{border-radius:var(--f7-searchbar-input-border-radius)}.ios .searchbar-expandable{bottom:0;height:var(--f7-searchbar-expandable-size);left:0;pointer-events:none;transform:translateZ(0);width:100%}.ios .searchbar-expandable .searchbar-disable-button{display:flex;margin-left:16px;opacity:1}.ios .searchbar-expandable .searchbar-inner{height:var(--f7-searchbar-expandable-size);left:16px;right:16px;width:auto}.ios .searchbar-expandable .searchbar-input-wrap{transform:scale(0);transition-duration:.3s}.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg{transition-property:transform,opacity}.ios .navbar.with-searchbar-expandable-closing .left,.ios .navbar.with-searchbar-expandable-closing .navbar-bg,.ios .navbar.with-searchbar-expandable-closing .right,.ios .navbar.with-searchbar-expandable-closing .title,.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .navbar-bg,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title{transition-duration:.3s}.ios .navbar.with-searchbar-expandable-enabled .left,.ios .navbar.with-searchbar-expandable-enabled .right,.ios .navbar.with-searchbar-expandable-enabled .title,.ios .navbar.with-searchbar-expandable-enabled-no-transition .left,.ios .navbar.with-searchbar-expandable-enabled-no-transition .right,.ios .navbar.with-searchbar-expandable-enabled-no-transition .title{opacity:0!important;transform:translateY(calc(var(--f7-navbar-height)*-1))}.ios .searchbar-expandable.searchbar-enabled{height:var(--f7-searchbar-expandable-size);pointer-events:auto}.ios .searchbar-expandable.searchbar-enabled .searchbar-input-wrap{transform:scale(1)}.md .searchbar-disable-button,.md .searchbar-icon{position:absolute;top:50%;transition-duration:.3s}.md .searchbar-disable-button .icon-close{display:none}.md .searchbar-icon{align-items:center;display:flex;height:48px;justify-content:center;left:0;left:var(--f7-safe-area-left);top:0;width:48px}.md .searchbar-icon:after{content:"search_md";height:auto;line-height:1.2;width:auto}.md .searchbar-disable-button{color:var(--f7-searchbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));display:block;font-size:0!important;height:48px;left:calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left));margin-top:-24px;transform:rotate(-90deg) scale(.5);width:48px}.md .searchbar-disable-button:after{font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;content:"arrow_left_md";display:block;font-feature-settings:"liga";font-size:20px;height:100%;line-height:48px;text-align:center;width:100%}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button{opacity:1;pointer-events:auto;transform:rotate(0deg) scale(1)}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon{opacity:0;transform:rotate(90deg) scale(.5)}.md .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .searchbar .input-clear-button{height:48px;margin-top:-24px;right:0;width:48px}.md .searchbar .input-clear-button:after{content:"delete_round_md";line-height:48px;opacity:1}.md .searchbar .input-clear-button:before{display:none}.md .searchbar-inline{--f7-searchbar-input-extra-padding-left:32px}.md .page>.searchbar,.md .searchbar-expandable,.md .subnavbar .searchbar{--f7-searchbar-input-extra-padding-left:34px}.md .page>.searchbar .searchbar-disable-button,.md .searchbar-expandable .searchbar-disable-button,.md .subnavbar .searchbar .searchbar-disable-button{left:calc(var(--f7-searchbar-inner-padding-left) + var(--f7-safe-area-left))}.md .page>.searchbar .searchbar-icon,.md .searchbar-expandable .searchbar-icon,.md .subnavbar .searchbar .searchbar-icon{left:var(--f7-safe-area-left)}.md .searchbar-expandable{--f7-searchbar-inner-padding-left:4px;--f7-searchbar-inner-padding-right:4px;background-color:var(--f7-searchbar-input-bg-color);border-radius:calc(var(--f7-searchbar-expandable-size));bottom:0;height:var(--f7-searchbar-expandable-size);left:100%;margin-left:calc(var(--f7-searchbar-expandable-size)*-1);margin-top:calc(var(--f7-searchbar-expandable-size)*-1/2);opacity:0;transform:translateZ(0);width:calc(var(--f7-searchbar-expandable-size))}.md .searchbar-expandable.searchbar-enabled{border-radius:0;left:0;margin-left:0;margin-top:0;opacity:1;pointer-events:auto;width:100%}

package/components/searchbar/searchbar.js

@@ -42,60 +42,32 @@ export default {
           el: searchbarEl
         }));
       });
-      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
-        page.$navbarEl.find('.searchbar-init').each(searchbarEl => {
-          const $searchbarEl = $(searchbarEl);
-          app.searchbar.create(extend($searchbarEl.dataset(), {
-            el: searchbarEl
-          }));
-        });
-      }
     },
     pageBeforeRemove(page) {
-      const app = this;
       page.$el.find('.searchbar-init').each(searchbarEl => {
         if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) {
           searchbarEl.f7Searchbar.destroy();
         }
       });
-      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
-        page.$navbarEl.find('.searchbar-init').each(searchbarEl => {
-          if (searchbarEl.f7Searchbar && searchbarEl.f7Searchbar.destroy) {
-            searchbarEl.f7Searchbar.destroy();
-          }
-        });
-      }
     }
   },
   clicks: {
-    '.searchbar-clear': function clear($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.searchbar-clear': function clear($clickedEl, data = {}) {
       const app = this;
       const sb = app.searchbar.get(data.searchbar);
       if (sb) sb.clear();
     },
-    '.searchbar-enable': function enable($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.searchbar-enable': function enable($clickedEl, data = {}) {
       const app = this;
       const sb = app.searchbar.get(data.searchbar);
       if (sb) sb.enable(true);
     },
-    '.searchbar-disable': function disable($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.searchbar-disable': function disable($clickedEl, data = {}) {
       const app = this;
       const sb = app.searchbar.get(data.searchbar);
       if (sb) sb.disable();
     },
-    '.searchbar-toggle': function toggle($clickedEl, data) {
-      if (data === void 0) {
-        data = {};
-      }
+    '.searchbar-toggle': function toggle($clickedEl, data = {}) {
       const app = this;
       const sb = app.searchbar.get(data.searchbar);
       if (sb) sb.toggle();

package/components/searchbar/searchbar.less

@@ -14,7 +14,7 @@
   input[type='search']::-webkit-search-decoration {
     display: none;
   }
-  .ios-translucent-bars(var(--f7-searchbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
+
   .ios .subnavbar & {
     background-color: transparent;
     backdrop-filter: none;
@@ -74,7 +74,9 @@
   }
   .page > &:not(.searchbar-inline) {
     position: absolute;
-    left: 0;
+    left: 16px;
+    right: 16px;
+    width: auto;
     top: 0;
   }
   .page-content &:not(.searchbar-inline) {
@@ -219,13 +221,11 @@
 
 // Relation with page
 .navbar ~ .page:not(.no-navbar) > .searchbar,
-.navbars ~ .page:not(.no-navbar) > .searchbar,
 .page > .navbar ~ .searchbar {
   top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
 }
 
 .navbar ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
-.navbars ~ .page-with-navbar-large:not(.no-navbar) .searchbar,
 .page-with-navbar-large .navbar ~ .searchbar,
 .page-with-navbar-large .navbar ~ * .searchbar {
   top: calc(
@@ -237,7 +237,6 @@
     0
   );
 }
-.navbars ~ .page-with-navbar-large:not(.no-navbar) .page-content .searchbar,
 .page-with-navbar-large .page-content .searchbar {
   top: 0;
   transform: none;

package/components/sheet/sheet-class.js

@@ -1,7 +1,6 @@
 import { getWindow, getDocument } from 'ssr-window';
 import $ from '../../shared/dom7.js';
 import { extend, now, getTranslate } from '../../shared/utils.js';
-import { getSupport } from '../../shared/get-support.js';
 import { getDevice } from '../../shared/get-device.js';
 import Modal from '../modal/modal-class.js';
 class Sheet extends Modal {
@@ -15,7 +14,6 @@ class Sheet extends Modal {
     const sheet = this;
     const window = getWindow();
     const document = getDocument();
-    const support = getSupport();
     const device = getDevice();
     sheet.params = extendedParams;
     if (typeof sheet.params.backdrop === 'undefined') {
@@ -419,7 +417,8 @@ class Sheet extends Modal {
       } = params;
       if (pushBreakpoint === null || typeof pushBreakpoint === 'undefined' || !sheet.push || !pushOffset) return;
       if (breakpoint >= pushBreakpoint) {
-        sheet.$htmlEl.addClass('with-modal-sheet-push').removeClass('with-modal-sheet-push-closing');
+        $el.addClass('sheet-modal-push-in');
+        $el.removeClass('sheet-modal-push-closing');
         $pushViewEl.transition('').forEach(el => {
           el.style.setProperty('transform', `translate3d(0,0,0) scale(${pushViewScale(pushOffset)})`, 'important');
         });
@@ -430,13 +429,13 @@ class Sheet extends Modal {
         if (breakpoint <= pushTransparentBreakpoint) {
           $pushViewEl.transition('').css('transform', '');
           $pushViewEl.css('border-radius', '');
-          sheet.$htmlEl.removeClass('with-modal-sheet-push');
+          $el.removeClass('sheet-modal-push-in');
           if (breakpoint === pushTransparentBreakpoint) {
-            sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+            $el.addClass('sheet-modal-push-closing');
           }
         } else {
           const progress = (breakpoint - pushTransparentBreakpoint) / (pushBreakpoint - pushTransparentBreakpoint);
-          sheet.$htmlEl.addClass('with-modal-sheet-push').removeClass('with-modal-sheet-push-closing');
+          $el.addClass('sheet-modal-push-in').removeClass('sheet-modal-push-closing');
           $pushViewEl.transition(0).forEach(el => {
             el.style.setProperty('transform', `translate3d(0,0,0) scale(${1 - (1 - pushViewScale(pushOffset)) * progress})`, 'important');
           });
@@ -532,10 +531,7 @@ class Sheet extends Modal {
         sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
       }
     };
-    sheet.setSwipeStep = function setSwipeStep(byResize) {
-      if (byResize === void 0) {
-        byResize = true;
-      }
+    sheet.setSwipeStep = function setSwipeStep(byResize = true) {
       const $swipeStepEl = $el.find('.sheet-modal-swipe-step').eq(0);
       if (!$swipeStepEl.length) return;
 
@@ -558,9 +554,9 @@ class Sheet extends Modal {
         sheet.setSwipeStep(true);
       }
     }
-    const passive = support.passiveListener ? {
+    const passive = {
       passive: true
-    } : false;
+    };
     if (sheet.params.swipeToClose || sheet.params.swipeToStep || useBreakpoints) {
       $el.on(app.touchEvents.start, handleTouchStart, passive);
       app.on('touchmove', handleTouchMove);
@@ -587,13 +583,16 @@ class Sheet extends Modal {
         sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-offset', `${pushOffset}px`);
         $el.addClass('sheet-modal-push');
         if (!useBreakpoints) {
-          sheet.$htmlEl.addClass('with-modal-sheet-push');
+          $el.addClass('sheet-modal-push-in');
+          sheet.emit('local::pushIn', sheet, true);
+        } else {
+          sheet.emit('local::pushIn', sheet, false);
         }
         if (!sheet.params.swipeToStep && !useBreakpoints) {
           sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
         } else {
           $pushViewEl = app.$el.children('.view, .views');
-          pushBorderRadius = app.theme === 'ios' ? 10 : 16;
+          pushBorderRadius = app.theme === 'ios' ? 32 : 16;
           $pushViewEl.css('border-radius', '0px');
         }
       }
@@ -627,17 +626,22 @@ class Sheet extends Modal {
       }
       $el.prevAll('.popup.modal-in').eq(0).removeClass('popup-behind');
       if (sheet.push && pushOffset) {
-        sheet.$htmlEl.removeClass('with-modal-sheet-push');
-        sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+        $el.removeClass('sheet-modal-push-in');
+        $el.addClass('sheet-modal-push-closing');
+        sheet.emit('local::pushIn', sheet, false);
+        sheet.emit('local::pushClosing', sheet, true);
         if ($pushViewEl) {
           $pushViewEl.transform('');
           $pushViewEl.css('border-radius', '');
         }
+      } else {
+        sheet.emit('local::pushIn', sheet, false);
+        sheet.emit('local::pushClosing', sheet, false);
       }
     });
     sheet.on('closed', () => {
       if (sheet.push && pushOffset) {
-        sheet.$htmlEl.removeClass('with-modal-sheet-push-closing');
+        $el.removeClass('sheet-modal-push-closing');
         sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-scale');
         sheet.$htmlEl[0].style.removeProperty('--f7-sheet-push-offset');
       }

package/components/sheet/sheet-ios.less

@@ -1,2 +1,12 @@
 .ios {
+  .sheet-modal {
+    box-shadow: var(--f7-glass-shadow);
+    .ios-glass-backdrop();
+    .toolbar {
+      position: absolute;
+    }
+  }
+  &:not(.device-ios) .sheet-modal .toolbar::before {
+    display: none;
+  }
 }

package/components/sheet/sheet-md.less

@@ -1,6 +1,20 @@
 .md {
   .sheet-modal {
     .toolbar {
+      --f7-safe-area-bottom: 0px;
+      position: relative;
+      width: 100%;
+      &:after,
+      &:before {
+        display: none;
+      }
+      + .sheet-modal-inner {
+        height: calc(100% - var(--f7-toolbar-height));
+        .page-content {
+          --f7-page-toolbar-top-offset: 0px;
+          --f7-page-toolbar-bottom-offset: 0px;
+        }
+      }
       a.link:not(.tab-link) {
         flex-shrink: 0;
       }

package/components/sheet/sheet-rtl.css

@@ -1 +1 @@
-:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:0px;--f7-sheet-border-color:var(--f7-bars-border-color);--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:10px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:#fff}.ios .dark,.ios.dark{--f7-sheet-bg-color:#202020}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:transparent;--f7-sheet-transition-timing-function:cubic-bezier(0, 0.8, 0.34, 1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique{z-index:12500}.sheet-modal{overflow:hidden;position:absolute;left:0;bottom:0;width:100%;height:var(--f7-sheet-height);display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100%,0);background:var(--f7-sheet-bg-color);z-index:12500;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translate3d(0,0,0)}.sheet-modal.modal-in-breakpoint,.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-breakpoint,var(--f7-sheet-swipe-step,0)),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;position:relative;overflow:hidden}.sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.sheet-modal .toolbar:after,.sheet-modal .toolbar:before{display:none}.sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{content:'';position:absolute;background-color:var(--f7-sheet-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)))}.sheet-modal-top:after{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{content:'';position:absolute;background-color:var(--f7-sheet-border-color);display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;transform-origin:50% 0%;transform:scaleY(calc(1 / var(--f7-device-pixel-ratio)))}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{z-index:700;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0;transform:translate3d(0,-100%,0)}.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html.with-modal-sheet-push .sheet-modal-push,html.with-modal-sheet-push-closing .sheet-modal-push{--f7-sheet-border-color:transparent;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html.with-modal-sheet-push .sheet-modal-push .page,html.with-modal-sheet-push .sheet-modal-push .view,html.with-modal-sheet-push-closing .sheet-modal-push .page,html.with-modal-sheet-push-closing .sheet-modal-push .view{--f7-safe-area-top:0px}html.with-modal-sheet-push .sheet-modal-push.sheet-modal-top,html.with-modal-sheet-push-closing .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html.with-modal-sheet-push .framework7-root,html.with-modal-sheet-push-closing .framework7-root{background:#000}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views,html.with-modal-sheet-push-closing .framework7-root>.view,html.with-modal-sheet-push-closing .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .dark .framework7-root>.view:after,html.with-modal-sheet-push .dark .framework7-root>.views:after,html.with-modal-sheet-push .dark.framework7-root>.view:after,html.with-modal-sheet-push .dark.framework7-root>.views:after,html.with-modal-sheet-push .framework7-root>.view.dark:after,html.with-modal-sheet-push .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after,html.with-modal-sheet-push.dark .framework7-root>.view:after,html.with-modal-sheet-push.dark .framework7-root>.views:after{content:'';position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,.1);z-index:13000;opacity:1;transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function);animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);animation-timing-function:var(--f7-sheet-transition-timing-function)}html.with-modal-sheet-push .framework7-root>.view,html.with-modal-sheet-push .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translate3d(0,0,0px) scale(var(--f7-sheet-push-scale,1))!important}html.with-modal-sheet-push-closing .dark .framework7-root>.view:after,html.with-modal-sheet-push-closing .dark .framework7-root>.views:after,html.with-modal-sheet-push-closing .dark.framework7-root>.view:after,html.with-modal-sheet-push-closing .dark.framework7-root>.views:after,html.with-modal-sheet-push-closing .framework7-root>.view.dark:after,html.with-modal-sheet-push-closing .framework7-root>.views.dark:after,html.with-modal-sheet-push-closing.dark .framework7-root>.view:after,html.with-modal-sheet-push-closing.dark .framework7-root>.views:after{opacity:0;animation:none}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}
+:root{--f7-sheet-height:260px;--f7-sheet-push-offset:var(--f7-safe-area-top)}.ios{--f7-sheet-border-radius:32px;--f7-sheet-border-color:#0000;--f7-sheet-transition-timing-function:initial;--f7-sheet-push-border-radius:32px;--f7-sheet-transition-duration:300ms;--f7-sheet-bg-color:var(--f7-glass-bg-color)}.md{--f7-sheet-border-radius:16px;--f7-sheet-push-border-radius:16px;--f7-sheet-border-color:#0000;--f7-sheet-transition-timing-function:cubic-bezier(0,0.8,0.34,1);--f7-sheet-transition-duration:400ms}.md,.md .dark,.md [class*=color-]{--f7-sheet-bg-color:var(--f7-md-surface)}.sheet-backdrop{z-index:11000}.sheet-backdrop-unique,.sheet-modal{z-index:12500}.sheet-modal{background:var(--f7-sheet-bg-color);bottom:0;box-sizing:border-box;display:none;height:var(--f7-sheet-height);left:0;overflow:hidden;position:absolute;transform:translate3d(0,100%,0);transition-property:transform;width:100%;will-change:transform,opacity}.sheet-modal.modal-in,.sheet-modal.modal-out{transition-duration:var(--f7-sheet-transition-duration)}.sheet-modal.not-animated{transition-duration:0s}.sheet-modal.modal-in{display:block;transform:translateZ(0)}.sheet-modal.modal-in-breakpoint,.sheet-modal.modal-in-swipe-step{display:block;transform:translate3d(0,var(--f7-sheet-breakpoint,var(--f7-sheet-swipe-step,0)),0)}.sheet-modal.modal-out{transform:translate3d(0,100%,0)}.sheet-modal .sheet-modal-inner{height:100%;overflow:hidden;position:relative}.sheet-modal .toolbar{--f7-safe-area-top:0px;--f7-safe-area-bottom:0px}.sheet-backdrop,.sheet-modal{transition-timing-function:var(--f7-sheet-transition-timing-function)}.sheet-modal-top{border-radius:0 0 var(--f7-sheet-border-radius) var(--f7-sheet-border-radius)}.sheet-modal-top:after{backface-visibility:hidden;background-color:var(--f7-sheet-border-color);bottom:0;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:auto;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 100%;transform-style:preserve-3d;width:100%;z-index:15;z-index:700}.sheet-modal-bottom,.sheet-modal:not(.sheet-modal-top){--f7-safe-area-top:0px;border-radius:var(--f7-sheet-border-radius) var(--f7-sheet-border-radius) 0 0}.sheet-modal-bottom:before,.sheet-modal:not(.sheet-modal-top):before{backface-visibility:hidden;background-color:var(--f7-sheet-border-color);bottom:auto;content:"";display:block;height:1px;left:0;position:absolute;right:auto;top:0;transform:scaleY(calc(1/var(--f7-device-pixel-ratio)));transform-origin:50% 0;transform-style:preserve-3d;width:100%;z-index:15;z-index:700}.sheet-modal-top{--f7-safe-area-bottom:0px;bottom:auto;top:0}.sheet-modal-top,.sheet-modal-top.modal-out{transform:translate3d(0,-100%,0)}.sheet-modal-top .toolbar-bottom{position:absolute}.sheet-modal-top .page-content{padding-top:var(--f7-safe-area-top)}html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .sheet-modal-push{--f7-sheet-border-color:#0000;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;overflow:hidden}html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .sheet-modal-push .page,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .sheet-modal-push .view{--f7-safe-area-top:0px}html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .sheet-modal-push.sheet-modal-top{border-radius:0 0 var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius)}html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root{background:#000}html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root>.view,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root>.views{transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function)}html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .dark .framework7-root>.view:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .dark .framework7-root>.views:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .dark.framework7-root>.view:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .dark.framework7-root>.views:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root>.view.dark:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing) .framework7-root>.views.dark:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing).dark .framework7-root>.view:after,html:has(.sheet-modal-push-in,.sheet-modal-push-closing).dark .framework7-root>.views:after{animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration);animation-timing-function:var(--f7-sheet-transition-timing-function);background:#ffffff1a;content:"";height:100%;left:0;opacity:1;pointer-events:none;position:absolute;top:0;transition-duration:var(--f7-sheet-transition-duration);transition-timing-function:var(--f7-sheet-transition-timing-function);width:100%;z-index:13000}html:has(.sheet-modal-push-in) .framework7-root>.view,html:has(.sheet-modal-push-in) .framework7-root>.views{border-radius:var(--f7-sheet-push-border-radius);transform:translateZ(0) scale(var(--f7-sheet-push-scale,1))!important}html:has(.sheet-modal-push-closing) .dark .framework7-root>.view:after,html:has(.sheet-modal-push-closing) .dark .framework7-root>.views:after,html:has(.sheet-modal-push-closing) .dark.framework7-root>.view:after,html:has(.sheet-modal-push-closing) .dark.framework7-root>.views:after,html:has(.sheet-modal-push-closing) .framework7-root>.view.dark:after,html:has(.sheet-modal-push-closing) .framework7-root>.views.dark:after,html:has(.sheet-modal-push-closing).dark .framework7-root>.view:after,html:has(.sheet-modal-push-closing).dark .framework7-root>.views:after{animation:none;opacity:0}@keyframes sheet-dark-push-overlay-fade-in{0%{opacity:0}to{opacity:1}}.ios .sheet-modal{backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.ios .sheet-modal .toolbar{position:absolute}.ios:not(.device-ios) .sheet-modal .toolbar:before{display:none}.md .sheet-modal .toolbar{--f7-safe-area-bottom:0px;position:relative;width:100%}.md .sheet-modal .toolbar:after,.md .sheet-modal .toolbar:before{display:none}.md .sheet-modal .toolbar+.sheet-modal-inner{height:calc(100% - var(--f7-toolbar-height))}.md .sheet-modal .toolbar+.sheet-modal-inner .page-content{--f7-page-toolbar-top-offset:0px;--f7-page-toolbar-bottom-offset:0px}.md .sheet-modal .toolbar a.link:not(.tab-link){flex-shrink:0}