framework7 8.3.3 → 9.0.0-beta.1

package/components/range/range-ios.less

@@ -1,9 +1,69 @@
 .ios {
+  .range-bar-active {
+    border-radius: inherit;
+  }
+  .range-knob {
+    border-radius: var(--f7-range-knob-height);
+    transition-duration: 300ms;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 44px;
+      height: 44px;
+    }
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+    }
+    &::before {
+      width: 1px;
+      height: 1px;
+      opacity: 0;
+      transition-duration: 300ms;
+      box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
+      left: 50%;
+      top: 50%;
+      margin-left: -0.5px;
+      margin-top: -0.5px;
+    }
+    &::after {
+      inset: 0;
+      border-radius: inherit;
+      box-shadow: var(--f7-glass-shadow-thumb);
+      transition-duration: 300ms;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+    }
+  }
   .range-knob-label {
     margin-bottom: 6px;
     transform: translateX(-50%) translateY(100%) scale(0);
+    z-index: 2;
   }
   .range-knob-active-state .range-knob-label {
     transform: translateX(-50%) translateY(0%) scale(1);
   }
+  .range-knob-active-state {
+    .range-knob {
+      background: transparent;
+      transform: scale(1.4);
+      &::before {
+        opacity: 1;
+      }
+      &::after {
+        opacity: 1;
+      }
+    }
+  }
 }

package/components/range/range-md.less

@@ -1,10 +1,29 @@
 .md {
+  .range-knob-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
   .range-knob {
     transition-duration: 200ms;
     transition-property: transform, background-color;
+    width: 4px;
+    height: var(--f7-range-knob-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
   }
+
   .range-knob-active-state .range-knob {
-    transform: scale(1.5);
+    transform: scaleX(0.5);
+  }
+  .range-slider-vertical .range-knob {
+    width: var(--f7-range-knob-height);
+    height: 4px;
+  }
+  .range-slider-vertical .range-knob-active-state .range-knob {
+    transform: scaleY(0.5);
   }
   .range-slider-min:not(.range-slider-dual) {
     .range-knob {
@@ -33,9 +52,53 @@
   .range-knob-active-state .range-knob-label {
     transform: translateY(0%) scale(1);
   }
-  .range-slider-label {
-    .range-knob-active-state .range-knob {
-      transform: scale(0);
+  .range-bar-active,
+  .range-bar-inactive {
+    border-radius: 4px;
+  }
+  .range-slider {
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background: var(--f7-range-knob-color);
+      top: calc(50% - 2px);
+      z-index: 1;
+      pointer-events: none;
+      transition-duration: 200ms;
+    }
+    &::before {
+      left: calc(var(--f7-range-knob-width) / 2 - 2px);
+    }
+    &::after {
+      right: calc(var(--f7-range-knob-width) / 2 - 2px);
+    }
+    &:not(.range-slider-dual)::before {
+      content: none;
+      display: none;
+    }
+    &:has(.range-knob-active-state) {
+      &::before,
+      &::after {
+        transform: scale(0.5);
+      }
+    }
+    &.range-slider-vertical {
+      &::before,
+      &::after {
+        top: auto;
+        left: calc(50% - 2px);
+        right: auto;
+      }
+      &::before {
+        bottom: calc(var(--f7-range-knob-width) / 2 - 2px);
+      }
+      &::after {
+        top: calc(var(--f7-range-knob-width) / 2 - 2px);
+      }
     }
   }
 }

package/components/range/range-rtl.css

@@ -1 +1 @@
-:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}:root .dark,:root.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.ios{--f7-range-size:28px;--f7-range-bar-size:4px;--f7-range-bar-border-radius:2px;--f7-range-knob-size:28px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 2px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md{--f7-range-size:20px;--f7-range-bar-size:2px;--f7-range-bar-border-radius:0px;--f7-range-knob-size:12px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{right:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-size);width:var(--f7-range-knob-size)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2);margin-right:calc(-1 * var(--f7-range-knob-size)/ 2);right:0}.range-slider-vertical .range-knob-wrap{left:50%;margin-left:calc(-1 * var(--f7-range-knob-size)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-knob{box-sizing:border-box;border-radius:50%;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-right:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-right:0}.range-slider-horizontal .range-scale-step:last-child{margin-right:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0)}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color}.md .range-knob-active-state .range-knob{transform:scale(1.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-slider-label .range-knob-active-state .range-knob{transform:scale(0)}
+:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px}.ios{--f7-range-size:28px;--f7-range-bar-size:6px;--f7-range-bar-border-radius:6px;--f7-range-knob-width:38px;--f7-range-knob-height:24px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 4px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.md{--f7-range-size:20px;--f7-range-bar-size:16px;--f7-range-bar-border-radius:16px;--f7-range-knob-width:16px;--f7-range-knob-height:44px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-bar-bg-color:var(--f7-md-secondary-container);--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{right:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-height);width:var(--f7-range-knob-width)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-height)/ 2);margin-right:calc(-1 * var(--f7-range-knob-width)/ 2);right:0}.range-slider-vertical .range-knob-wrap{left:50%;height:var(--f7-range-knob-width);width:var(--f7-range-knob-height);margin-left:calc(-1 * var(--f7-range-knob-height)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-knob{box-sizing:border-box;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-right:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-right:0}.range-slider-horizontal .range-scale-step:last-child{margin-right:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-bar-active{border-radius:inherit}.ios .range-knob{border-radius:var(--f7-range-knob-height);transition-duration:.3s;position:absolute;left:0;top:0;width:100%;height:100%}.ios .range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px}.ios .range-knob::after,.ios .range-knob::before{content:'';position:absolute}.ios .range-knob::before{width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75);left:50%;top:50%;margin-left:-.5px;margin-top:-.5px}.ios .range-knob::after{inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0;width:100%;height:100%;margin:0}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0);z-index:2}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.ios .range-knob-active-state .range-knob{background:0 0;transform:scale(1.4)}.ios .range-knob-active-state .range-knob::before{opacity:1}.ios .range-knob-active-state .range-knob::after{opacity:1}.md .range-knob-wrap{display:flex;align-items:center;justify-content:center}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color;width:4px;height:var(--f7-range-knob-height);display:flex;align-items:center;justify-content:center;border-radius:4px}.md .range-knob-active-state .range-knob{transform:scaleX(.5)}.md .range-slider-vertical .range-knob{width:var(--f7-range-knob-height);height:4px}.md .range-slider-vertical .range-knob-active-state .range-knob{transform:scaleY(.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-bar-active,.md .range-bar-inactive{border-radius:4px}.md .range-slider::after,.md .range-slider::before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:var(--f7-range-knob-color);top:calc(50% - 2px);z-index:1;pointer-events:none;transition-duration:.2s}.md .range-slider::before{left:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider::after{right:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider:not(.range-slider-dual)::before{content:none;display:none}.md .range-slider:has(.range-knob-active-state)::after,.md .range-slider:has(.range-knob-active-state)::before{transform:scale(.5)}.md .range-slider.range-slider-vertical::after,.md .range-slider.range-slider-vertical::before{top:auto;left:calc(50% - 2px);right:auto}.md .range-slider.range-slider-vertical::before{bottom:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider.range-slider-vertical::after{top:calc(var(--f7-range-knob-width)/ 2 - 2px)}

package/components/range/range-vars.less

@@ -7,18 +7,13 @@
   --f7-range-scale-step-height: 5px;
   --f7-range-scale-substep-width: 1px;
   --f7-range-scale-substep-height: 4px;
-  .light-vars({
-    --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
-  });
-  .dark-vars({
-    --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
-  });
 }
 .ios-vars({
   --f7-range-size: 28px;
-  --f7-range-bar-size: 4px;
-  --f7-range-bar-border-radius: 2px;
-  --f7-range-knob-size: 28px;
+  --f7-range-bar-size: 6px;
+  --f7-range-bar-border-radius: 6px;
+  --f7-range-knob-width: 38px;
+  --f7-range-knob-height: 24px;
   --f7-range-knob-color: #fff;
   --f7-range-knob-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
   --f7-range-label-size: 24px;
@@ -27,7 +22,7 @@
   --f7-range-label-font-size: 12px;
   --f7-range-label-font-weight: 500;
   --f7-range-label-border-radius: 5px;
-  --f7-range-label-padding: 0px 2px;
+  --f7-range-label-padding: 0px 4px;
 
 
   --f7-range-scale-text-color: #666;
@@ -35,12 +30,21 @@
   --f7-range-scale-font-size: 12px;
   --f7-range-scale-font-weight: 400;
   --f7-range-scale-label-offset: 4px;
+
+  .light-vars({
+    --f7-range-bar-bg-color: rgba(0, 0, 0, 0.2);
+  });
+  .dark-vars({
+    --f7-range-bar-bg-color: rgba(255, 255, 255, 0.2);
+  });
 });
 .md-vars({
   --f7-range-size: 20px;
-  --f7-range-bar-size: 2px;
-  --f7-range-bar-border-radius: 0px;
-  --f7-range-knob-size: 12px;
+
+  --f7-range-bar-size: 16px;
+  --f7-range-bar-border-radius: 16px;
+  --f7-range-knob-width: 16px;
+  --f7-range-knob-height: 44px;
   --f7-range-knob-box-shadow: none;
   --f7-range-label-size: 26px;
   --f7-range-label-font-weight: normal;
@@ -54,6 +58,7 @@
   --f7-range-scale-label-offset: 4px;
 });
 .md-color-vars({
+  --f7-range-bar-bg-color: var(--f7-md-secondary-container);
   --f7-range-knob-color: var(--f7-theme-color);
   --f7-range-label-text-color: var(--f7-md-on-primary);
   --f7-range-label-bg-color: var(--f7-theme-color);

package/components/range/range.css

@@ -1 +1 @@
-:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}:root .dark,:root.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.ios{--f7-range-size:28px;--f7-range-bar-size:4px;--f7-range-bar-border-radius:2px;--f7-range-knob-size:28px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 2px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md{--f7-range-size:20px;--f7-range-bar-size:2px;--f7-range-bar-border-radius:0px;--f7-range-knob-size:12px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{left:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-size);width:var(--f7-range-knob-size)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2);margin-left:calc(-1 * var(--f7-range-knob-size)/ 2);left:0}.range-slider-vertical .range-knob-wrap{left:50%;margin-left:calc(-1 * var(--f7-range-knob-size)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-knob{box-sizing:border-box;border-radius:50%;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-left:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-left:0}.range-slider-horizontal .range-scale-step:last-child{margin-left:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0)}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color}.md .range-knob-active-state .range-knob{transform:scale(1.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-slider-label .range-knob-active-state .range-knob{transform:scale(0)}
+:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px}.ios{--f7-range-size:28px;--f7-range-bar-size:6px;--f7-range-bar-border-radius:6px;--f7-range-knob-width:38px;--f7-range-knob-height:24px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 4px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}.ios .dark,.ios.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.md{--f7-range-size:20px;--f7-range-bar-size:16px;--f7-range-bar-border-radius:16px;--f7-range-knob-width:16px;--f7-range-knob-height:44px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-bar-bg-color:var(--f7-md-secondary-container);--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{left:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-height);width:var(--f7-range-knob-width)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-height)/ 2);margin-left:calc(-1 * var(--f7-range-knob-width)/ 2);left:0}.range-slider-vertical .range-knob-wrap{left:50%;height:var(--f7-range-knob-width);width:var(--f7-range-knob-height);margin-left:calc(-1 * var(--f7-range-knob-height)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-width)/ 2)}.range-knob{box-sizing:border-box;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-left:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-left:0}.range-slider-horizontal .range-scale-step:last-child{margin-left:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-bar-active{border-radius:inherit}.ios .range-knob{border-radius:var(--f7-range-knob-height);transition-duration:.3s;position:absolute;left:0;top:0;width:100%;height:100%}.ios .range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px}.ios .range-knob::after,.ios .range-knob::before{content:'';position:absolute}.ios .range-knob::before{width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75);left:50%;top:50%;margin-left:-.5px;margin-top:-.5px}.ios .range-knob::after{inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0;width:100%;height:100%;margin:0}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0);z-index:2}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.ios .range-knob-active-state .range-knob{background:0 0;transform:scale(1.4)}.ios .range-knob-active-state .range-knob::before{opacity:1}.ios .range-knob-active-state .range-knob::after{opacity:1}.md .range-knob-wrap{display:flex;align-items:center;justify-content:center}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color;width:4px;height:var(--f7-range-knob-height);display:flex;align-items:center;justify-content:center;border-radius:4px}.md .range-knob-active-state .range-knob{transform:scaleX(.5)}.md .range-slider-vertical .range-knob{width:var(--f7-range-knob-height);height:4px}.md .range-slider-vertical .range-knob-active-state .range-knob{transform:scaleY(.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-bar-active,.md .range-bar-inactive{border-radius:4px}.md .range-slider::after,.md .range-slider::before{content:'';position:absolute;width:4px;height:4px;border-radius:50%;background:var(--f7-range-knob-color);top:calc(50% - 2px);z-index:1;pointer-events:none;transition-duration:.2s}.md .range-slider::before{left:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider::after{right:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider:not(.range-slider-dual)::before{content:none;display:none}.md .range-slider:has(.range-knob-active-state)::after,.md .range-slider:has(.range-knob-active-state)::before{transform:scale(.5)}.md .range-slider.range-slider-vertical::after,.md .range-slider.range-slider-vertical::before{top:auto;left:calc(50% - 2px);right:auto}.md .range-slider.range-slider-vertical::before{bottom:calc(var(--f7-range-knob-width)/ 2 - 2px)}.md .range-slider.range-slider-vertical::after{top:calc(var(--f7-range-knob-width)/ 2 - 2px)}

package/components/range/range.d.ts

@@ -39,8 +39,10 @@ export namespace Range {
     scaleSubSteps?: number;
     /** Method must return formatted scale value. As an argument it receives currect scale step value. This method will be called as for each scale step. */
     formatScaleLabel?: (value: number) => string;
-    /** Limit knob position to the size of range bar. By default enabled from iOS theme */
+    /** Limit knob position to the size of range bar. By default enabled */
     limitKnobPosition?: boolean;
+    /** Limit bar position to the size of range knob. By default enabled for MD theme */
+    limitBarPosition?: boolean;
     /** Object with events handlers.. */
     on?: {
       [event in keyof Events]?: Events[event];

package/components/range/range.js

@@ -12,18 +12,12 @@ export default {
       app,
       domProp: 'f7Range'
     }), {
-      getValue(el) {
-        if (el === void 0) {
-          el = '.range-slider';
-        }
+      getValue(el = '.range-slider') {
         const range = app.range.get(el);
         if (range) return range.getValue();
         return undefined;
       },
-      setValue(el, value) {
-        if (el === void 0) {
-          el = '.range-slider';
-        }
+      setValue(el = '.range-slider', value) {
         const range = app.range.get(el);
         if (range) return range.setValue(value);
         return undefined;

package/components/range/range.less

@@ -64,55 +64,42 @@
 .range-knob-wrap {
   z-index: 20;
   position: absolute;
-  height: var(--f7-range-knob-size);
-  width: var(--f7-range-knob-size);
+  height: var(--f7-range-knob-height);
+  width: var(--f7-range-knob-width);
 
   .range-slider-horizontal & {
     top: 50%;
-    margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
+    margin-top: calc(-1 * var(--f7-range-knob-height) / 2);
     .ltr({
-      margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
+      margin-left: calc(-1 * var(--f7-range-knob-width) / 2);
       left: 0;
     });
     .rtl({
-      margin-right: calc(-1 * var(--f7-range-knob-size) / 2);
+      margin-right: calc(-1 * var(--f7-range-knob-width) / 2);
       right: 0;
     });
   }
   .range-slider-vertical & {
     left: 50%;
-    margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
+    height: var(--f7-range-knob-width);
+    width: var(--f7-range-knob-height);
+    margin-left: calc(-1 * var(--f7-range-knob-height) / 2);
     bottom: 0;
-    margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
+    margin-bottom: calc(-1 * var(--f7-range-knob-width) / 2);
   }
   .range-slider-vertical-reversed & {
     bottom: auto;
     top: 0;
     margin-bottom: 0;
-    margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
+    margin-top: calc(-1 * var(--f7-range-knob-width) / 2);
   }
 }
 .range-knob {
   box-sizing: border-box;
-  border-radius: 50%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
+
   z-index: 1;
   background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
   box-shadow: var(--f7-range-knob-box-shadow);
-  &:after {
-    content: '';
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 44px;
-    height: 44px;
-    margin-left: -22px;
-    margin-top: -22px;
-  }
 }
 .range-knob-label {
   position: absolute;

package/components/searchbar/searchbar-class.js

@@ -5,10 +5,7 @@ import FrameworkClass from '../../shared/class.js';
 import { getDevice } from '../../shared/get-device.js';
 import removeDiacritics from './remove-diacritics.js';
 class Searchbar extends FrameworkClass {
-  constructor(app, params) {
-    if (params === void 0) {
-      params = {};
-    }
+  constructor(app, params = {}) {
     super(params, [app]);
     const sb = this;
     const defaults = {
@@ -265,7 +262,8 @@ class Searchbar extends FrameworkClass {
     const sb = this;
     if (sb.expandable) return;
     const app = sb.app;
-    sb.$disableButtonEl.transition(0).show();
+    sb.$disableButtonEl.transition(0);
+    sb.$disableButtonEl.css('display', 'flex');
     sb.$disableButtonEl.css(`margin-${app.rtl ? 'left' : 'right'}`, `${-sb.disableButtonEl.offsetWidth}px`);
     /* eslint no-underscore-dangle: ["error", { "allow": ["_clientLeft"] }] */
     sb._clientLeft = sb.$disableButtonEl[0].clientLeft;
@@ -359,9 +357,10 @@ class Searchbar extends FrameworkClass {
     if (sb.expandable) {
       const $navbarEl = sb.$el.parents('.navbar');
       const $pageContentEl = sb.$pageEl && sb.$pageEl.find('.page-content');
+      const $transitionTargetEl = app.them === 'md' ? sb.$el : sb.$el.find('.searchbar-input-wrap');
       if ($navbarEl.hasClass('navbar-large') && $pageContentEl.length) {
         const $titleLargeEl = $navbarEl.find('.title-large');
-        sb.$el.transitionEnd(() => {
+        $transitionTargetEl.transitionEnd(() => {
           $pageContentEl.removeClass('with-searchbar-expandable-closing');
         });
         if ($navbarEl.hasClass('navbar-large') && $navbarEl.hasClass('navbar-large-collapsed') && $titleLargeEl.length) {
@@ -379,12 +378,12 @@ class Searchbar extends FrameworkClass {
       }
       if (app.theme === 'md' && $navbarEl.length) {
         $navbarEl.removeClass('with-searchbar-expandable-enabled with-searchbar-expandable-enabled-no-transition').addClass('with-searchbar-expandable-closing');
-        sb.$el.transitionEnd(() => {
+        $transitionTargetEl.transitionEnd(() => {
           $navbarEl.removeClass('with-searchbar-expandable-closing');
         });
       } else {
         $navbarEl.removeClass('with-searchbar-expandable-enabled with-searchbar-expandable-enabled-no-transition').addClass('with-searchbar-expandable-closing');
-        sb.$el.transitionEnd(() => {
+        $transitionTargetEl.transitionEnd(() => {
           $navbarEl.removeClass('with-searchbar-expandable-closing');
         });
         if (sb.$pageEl) {

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:transparent}.ios{--f7-searchbar-bg-color:transparent;--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:rgba(0, 0, 0, 0.4);--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:rgba(0, 0, 0, 0.4);--f7-searchbar-input-text-color:#000;--f7-searchbar-search-icon-color:rgba(0, 0, 0, 0.4)}.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)}.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}.ios .subnavbar .searchbar{background-color:transparent;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);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{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:16px;right:16px;width:auto;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;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}.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(-1 * var(--f7-navbar-large-collapse-progress) * 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{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;backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.ios .searchbar .input-clear-button{z-index:40;left:16px}.ios .searchbar-icon{width:13px;height:13px;position:absolute;top:50%;margin-top:-6px;z-index:40;right:16px}.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;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);backdrop-filter:saturate(180%) blur(16px);transform:scale(0)}.ios .searchbar-disable-button.active-state{transition-duration:0s;opacity:.3!important}.ios .searchbar-enabled .searchbar-disable-button{pointer-events:auto;opacity:1;transform:scale(1);margin-right:16px}.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{right:0;bottom:0;width:100%;height:var(--f7-searchbar-expandable-size);transform:translate3d(0,0,0);pointer-events:none}.ios .searchbar-expandable .searchbar-disable-button{margin-right:16px;opacity:1;display:flex}.ios .searchbar-expandable .searchbar-inner{left:16px;right:16px;width:auto;height:var(--f7-searchbar-expandable-size)}.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{transform:translateY(calc(-1 * var(--f7-navbar-height)));opacity:0!important}.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{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}