framework7 8.1.0 → 8.3.0

package/components/sheet/sheet-class.js

@@ -120,6 +120,7 @@ class Sheet extends Modal {
     function pushViewScale(offset) {
       return (app.height - offset * 2) / app.height;
     }
+    const useBreakpoints = sheet.params.breakpoints && sheet.params.breakpoints.length > 0;
     let isTouched = false;
     let startTouch;
     let currentTouch;
@@ -140,11 +141,15 @@ class Sheet extends Modal {
     let sheetPageContentScrollTop;
     let sheetPageContentScrollHeight;
     let sheetPageContentOffsetHeight;
+    let breakpointsTranslate = [];
+    let currentBreakpointIndex;
+    let backdropBreakpointSet = true;
     function handleTouchStart(e) {
       if (isTouched || !(sheet.params.swipeToClose || sheet.params.swipeToStep) || !e.isTrusted) return;
       if (sheet.params.swipeHandler && $(e.target).closest(sheet.params.swipeHandler).length === 0) {
         return;
       }
+      if ($(e.target).closest('.sortable-handler').length > 0) return;
       isTouched = true;
       isMoved = false;
       startTouch = {
@@ -196,14 +201,23 @@ class Sheet extends Modal {
           maxTranslate = 0;
         } else {
           minTranslate = 0;
-          maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : swipeStepTranslate;
+          maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : useBreakpoints ? breakpointsTranslate[0] : swipeStepTranslate;
         }
         isMoved = true;
       }
       currentTranslate = startTranslate - touchesDiff;
       currentTranslate = Math.min(Math.max(currentTranslate, minTranslate), maxTranslate);
       e.preventDefault();
-      if (sheet.push && pushOffset) {
+      if (useBreakpoints) {
+        let progress = isTopSheetModal ? 1 + currentTranslate / sheetElOffsetHeight : 1 - currentTranslate / sheetElOffsetHeight;
+        progress = Math.abs(progress);
+        progress = Math.min(Math.max(progress, 0), 1);
+        // eslint-disable-next-line
+        setBackdropBreakpoint(progress);
+        // eslint-disable-next-line
+        setPushBreakpoint(progress);
+      }
+      if (sheet.push && pushOffset && !useBreakpoints) {
         let progress = (currentTranslate - startTranslate) / sheetElOffsetHeight;
         if (sheet.params.swipeToStep) {
           if (isTopSheetModal) {
@@ -244,14 +258,17 @@ class Sheet extends Modal {
       isMoved = false;
       $el.transform('').transition('');
       if (sheet.push && pushOffset) {
-        $pushViewEl.transition('').transform('');
-        $pushViewEl.css('border-radius', '');
+        $pushViewEl.transition('');
+        if (!useBreakpoints) {
+          $pushViewEl.transform('');
+          $pushViewEl.css('border-radius', '');
+        }
       }
       const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
       const diff = Math.abs(touchesDiff);
       if (diff === 0 || currentTranslate === startTranslate) return;
       const timeDiff = new Date().getTime() - touchStartTime;
-      if (!sheet.params.swipeToStep) {
+      if (!sheet.params.swipeToStep && !useBreakpoints) {
         if (direction !== (isTopSheetModal ? 'to-top' : 'to-bottom')) {
           return;
         }
@@ -264,7 +281,34 @@ class Sheet extends Modal {
       const closeDirection = isTopSheetModal ? 'to-top' : 'to-bottom';
       const absCurrentTranslate = Math.abs(currentTranslate);
       const absSwipeStepTranslate = Math.abs(swipeStepTranslate);
-      if (timeDiff < 300 && diff > 10) {
+      if (timeDiff < 300 && diff > 10 && useBreakpoints) {
+        // SHORT SWIPES BREAKPOINTS
+        if (direction === openDirection && typeof currentBreakpointIndex !== 'undefined') {
+          if (currentBreakpointIndex === params.breakpoints.length - 1) {
+            // open
+            sheet.setBreakpoint(1);
+          } else {
+            // move to next breakpoint
+            currentBreakpointIndex = Math.min(breakpointsTranslate.length - 1, currentBreakpointIndex + 1);
+            sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+          }
+        }
+        if (direction === closeDirection) {
+          if (currentBreakpointIndex === 0) {
+            // close
+            sheet.close();
+          } else {
+            // move to prev breakpoint
+            if (typeof currentBreakpointIndex === 'undefined') {
+              currentBreakpointIndex = params.breakpoints.length - 1;
+            } else {
+              currentBreakpointIndex = Math.max(0, currentBreakpointIndex - 1);
+            }
+            sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+          }
+        }
+      } else if (timeDiff < 300 && diff > 10) {
+        // SHORT SWIPES SWIPE STEP
         if (direction === openDirection && absCurrentTranslate < absSwipeStepTranslate) {
           // open step
           $el.removeClass('modal-in-swipe-step');
@@ -311,7 +355,26 @@ class Sheet extends Modal {
         }
         return;
       }
-      if (timeDiff >= 300) {
+      if (timeDiff >= 300 && useBreakpoints) {
+        // LONG SWIPES BREAKPOINTS
+        const allBreakpoints = [sheetElOffsetHeight, ...breakpointsTranslate, 0];
+        const closestTranslate = allBreakpoints.reduce((prev, curr) => {
+          return Math.abs(curr - currentTranslate) < Math.abs(prev - currentTranslate) ? curr : prev;
+        });
+        const closestIndex = allBreakpoints.indexOf(closestTranslate);
+        if (closestTranslate === 0) {
+          // open
+          sheet.setBreakpoint(1);
+        } else if (closestIndex === 0) {
+          // close
+          sheet.close();
+        } else {
+          // set bp
+          currentBreakpointIndex = closestIndex - 1;
+          sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+        }
+      } else if (timeDiff >= 300) {
+        // LONG SWIPES SWIPE STEP
         const stepOpened = !$el.hasClass('modal-in-swipe-step');
         if (!stepOpened) {
           if (absCurrentTranslate < absSwipeStepTranslate / 2) {
@@ -350,12 +413,133 @@ class Sheet extends Modal {
         }
       }
     }
+    const setPushBreakpoint = breakpoint => {
+      const {
+        pushBreakpoint
+      } = 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');
+        $pushViewEl.transition('').forEach(el => {
+          el.style.setProperty('transform', `translate3d(0,0,0) scale(${pushViewScale(pushOffset)})`, 'important');
+        });
+        $pushViewEl.css('border-radius', `${pushBorderRadius * 1}px`);
+      } else {
+        const pushBreakpoints = [0, ...params.breakpoints, 1];
+        const pushTransparentBreakpoint = pushBreakpoints[pushBreakpoints.indexOf(pushBreakpoint) - 1];
+        if (breakpoint <= pushTransparentBreakpoint) {
+          $pushViewEl.transition('').css('transform', '');
+          $pushViewEl.css('border-radius', '');
+          sheet.$htmlEl.removeClass('with-modal-sheet-push');
+          if (breakpoint === pushTransparentBreakpoint) {
+            sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+          }
+        } else {
+          const progress = (breakpoint - pushTransparentBreakpoint) / (pushBreakpoint - pushTransparentBreakpoint);
+          sheet.$htmlEl.addClass('with-modal-sheet-push').removeClass('with-modal-sheet-push-closing');
+          $pushViewEl.transition(0).forEach(el => {
+            el.style.setProperty('transform', `translate3d(0,0,0) scale(${1 - (1 - pushViewScale(pushOffset)) * progress})`, 'important');
+          });
+          $pushViewEl.css('border-radius', `${pushBorderRadius * progress}px`);
+        }
+      }
+    };
+    const setBackdropBreakpoint = breakpoint => {
+      const {
+        backdrop,
+        backdropBreakpoint
+      } = params;
+      if (!backdropBreakpoint || !backdrop || !$backdropEl.length) return;
+      if (breakpoint >= backdropBreakpoint) {
+        if (!backdropBreakpointSet) {
+          $backdropEl.transition('').css({
+            opacity: '',
+            pointerEvents: ''
+          });
+        }
+        backdropBreakpointSet = true;
+      } else {
+        const backdropBreakpoints = [0, ...params.breakpoints, 1];
+        const backdropTransparentBreakpoint = backdropBreakpoints[backdropBreakpoints.indexOf(backdropBreakpoint) - 1];
+        if (breakpoint <= backdropTransparentBreakpoint) {
+          if (backdropBreakpointSet) {
+            $backdropEl.transition('').css({
+              opacity: 0,
+              pointerEvents: 'none'
+            });
+          }
+          backdropBreakpointSet = false;
+        } else {
+          const progress = (breakpoint - backdropTransparentBreakpoint) / (backdropBreakpoint - backdropTransparentBreakpoint);
+          $backdropEl.transition(0).css({
+            opacity: progress,
+            pointerEvents: 'auto'
+          });
+        }
+      }
+    };
+    sheet.calcBreakpoints = () => {
+      if (!useBreakpoints) {
+        return;
+      }
+      const fullSize = $el[0].offsetHeight;
+      // eslint-disable-next-line
+      const isTopSheetModal = $el.hasClass('sheet-modal-top');
+      breakpointsTranslate = [];
+      sheet.params.breakpoints.forEach(ratio => {
+        breakpointsTranslate.push((fullSize - fullSize * ratio) * (isTopSheetModal ? -1 : 1));
+      });
+    };
+    sheet.setBreakpoint = value => {
+      if (!useBreakpoints) {
+        return sheet;
+      }
+      if (value === 1) {
+        // open
+        if (!sheet.opened) {
+          sheet.open();
+        }
+        $el.removeClass('modal-in-breakpoint');
+        currentBreakpointIndex = undefined;
+        setBackdropBreakpoint(value);
+        setPushBreakpoint(value);
+        $el.trigger('sheet:breakpoint', value);
+        sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+      } else if (value === 0) {
+        // close
+        $el.trigger('sheet:breakpoint', value);
+        sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+        sheet.close();
+      } else {
+        const index = params.breakpoints.indexOf(value);
+        if (index < 0) return sheet;
+        if (!sheet.opened) {
+          sheet.open();
+        }
+        setBackdropBreakpoint(value);
+        setPushBreakpoint(value);
+        $el.trigger('sheet:breakpoint', value);
+        sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+        currentBreakpointIndex = index;
+        $el[0].style.setProperty('--f7-sheet-breakpoint', `${breakpointsTranslate[index]}px`);
+        $el.addClass('modal-in-breakpoint');
+      }
+      return sheet;
+    };
+    const setBreakpointsOnResize = () => {
+      sheet.calcBreakpoints();
+      if (typeof currentBreakpointIndex !== 'undefined') {
+        sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+      }
+    };
     sheet.setSwipeStep = function setSwipeStep(byResize) {
       if (byResize === void 0) {
         byResize = true;
       }
       const $swipeStepEl = $el.find('.sheet-modal-swipe-step').eq(0);
       if (!$swipeStepEl.length) return;
+
+      // eslint-disable-next-line
       if ($el.hasClass('sheet-modal-top')) {
         swipeStepTranslate = -($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
       } else {
@@ -368,12 +552,16 @@ class Sheet extends Modal {
       }
     };
     function onResize() {
-      sheet.setSwipeStep(true);
+      if (useBreakpoints) {
+        setBreakpointsOnResize();
+      } else {
+        sheet.setSwipeStep(true);
+      }
     }
     const passive = support.passiveListener ? {
       passive: true
     } : false;
-    if (sheet.params.swipeToClose || sheet.params.swipeToStep) {
+    if (sheet.params.swipeToClose || sheet.params.swipeToStep || useBreakpoints) {
       $el.on(app.touchEvents.start, handleTouchStart, passive);
       app.on('touchmove', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
@@ -388,10 +576,7 @@ class Sheet extends Modal {
         $(document).on('keydown', onKeyDown);
       }
       $el.prevAll('.popup.modal-in').addClass('popup-behind');
-      if (sheet.params.swipeToStep) {
-        sheet.setSwipeStep(false);
-        app.on('resize', onResize);
-      }
+      app.on('resize', onResize);
       if (sheet.params.scrollToEl) {
         scrollToElementOnOpen();
       }
@@ -401,15 +586,23 @@ class Sheet extends Modal {
         if (!pushOffset) pushOffset = app.theme === 'ios' ? 44 : 48;
         sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-offset', `${pushOffset}px`);
         $el.addClass('sheet-modal-push');
-        sheet.$htmlEl.addClass('with-modal-sheet-push');
-        if (!sheet.params.swipeToStep) {
+        if (!useBreakpoints) {
+          sheet.$htmlEl.addClass('with-modal-sheet-push');
+        }
+        if (!sheet.params.swipeToStep && !useBreakpoints) {
           sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
         } else {
           $pushViewEl = app.$el.children('.view, .views');
-          pushBorderRadius = parseFloat($el.css(`border-${isTopSheetModal ? 'bottom' : 'top'}-left-radius`));
+          pushBorderRadius = app.theme === 'ios' ? 10 : 16;
           $pushViewEl.css('border-radius', '0px');
         }
       }
+      if (useBreakpoints) {
+        sheet.calcBreakpoints();
+        sheet.setBreakpoint(params.breakpoints[0]);
+      } else if (sheet.params.swipeToStep) {
+        sheet.setSwipeStep(false);
+      }
     });
     sheet.on('opened', () => {
       if (sheet.params.closeByOutsideClick || sheet.params.closeByBackdropClick) {
@@ -417,8 +610,9 @@ class Sheet extends Modal {
       }
     });
     sheet.on('close', () => {
-      if (sheet.params.swipeToStep) {
-        $el.removeClass('modal-in-swipe-step');
+      currentBreakpointIndex = undefined;
+      if (sheet.params.swipeToStep || useBreakpoints) {
+        $el.removeClass('modal-in-swipe-step modal-in-breakpoint');
         sheet.emit('local::_swipeStep', false);
         app.off('resize', onResize);
       }
@@ -435,6 +629,10 @@ class Sheet extends Modal {
       if (sheet.push && pushOffset) {
         sheet.$htmlEl.removeClass('with-modal-sheet-push');
         sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+        if ($pushViewEl) {
+          $pushViewEl.transform('');
+          $pushViewEl.css('border-radius', '');
+        }
       }
     });
     sheet.on('closed', () => {

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-swipe-step{display:block;transform:translate3d(0,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;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;opacity:1;animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;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{animation:sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;animation-timing-function:var(--f7-sheet-transition-timing-function)}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes sheet-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}.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: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}

package/components/sheet/sheet.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-swipe-step{display:block;transform:translate3d(0,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;border-radius:var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;opacity:1;animation:sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;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{animation:sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;animation-timing-function:var(--f7-sheet-transition-timing-function)}@keyframes sheet-dark-push-overlay-fade-in{from{opacity:0}to{opacity:1}}@keyframes sheet-dark-push-overlay-fade-out{from{opacity:1}to{opacity:0}}.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: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}

package/components/sheet/sheet.d.ts

@@ -13,6 +13,8 @@ export namespace Sheet {
     stepClose: (sheet: Sheet) => void;
     /** Event will be triggered on Sheet swipe step between step opened and closed state. As `progress` it receives step open progress number (from 0 to 1) */
     stepProgress: (sheet: Sheet, progress: number) => void;
+    /** Event will be triggered on Sheet breakpoint change */
+    breakpoint: (sheet: Sheet, breakpoint: number) => void;
     /** Event will be triggered when Sheet Modal starts its opening animation. As an argument event handler receives sheet instance */
     open: (sheet: Sheet) => void;
     /** Event will be triggered when Sheet Modal completes its opening animation. As an argument event handler receives sheet instance */
@@ -49,8 +51,15 @@ export namespace Sheet {
     swipeToClose?: boolean;
     /** When enabled it will be possible to split opened sheet into two states: partially opened and fully opened that can be controlled with swipe (default false) */
     swipeToStep?: boolean;
+    /** Use instead of swipeToStep to enable swipe breakpoints. Must be an array of numbers > 0 and < 1, where 0 is fully closed and 1 is fully opened, e.g. [0.33, 0.66], [0.5], etc. */
+    breakpoints?: number[];
+    /** Defines breakpoint when backdrop becomes visible. Number from `0` (ideally from the lowest (first) value of `breakpoints` array) to `1`  (default 0) */
+    backdropBreakpoint?: number;
+    /** Defines breakpoint when to push back the view behind (`push` must be enabled). Number from `0` (ideally from the lowest (first) value of `breakpoints` array) to `1` (default 0)  */
+    pushBreakpoint?: number;
     /** When enabled it will be possible to close sheet with swipe only on specified handler element (default null) */
     swipeHandler?: HTMLElement | CSSSelector;
+
     /** When enabled it will push view behind on open. Works only when top safe area is in place. It can also be enabled by adding `sheet-modal-push` class to Sheet element. (default false) */
     push?: boolean;
     /** Element to mount modal to. (default app.el) */
@@ -87,8 +96,10 @@ export namespace Sheet {
     stepClose(): void;
     /** Toggle (open or close) sheet swipe step */
     stepToggle(): void;
-    /** Update step position. Required to call after content of sheet modal has been modified manually when it is opened */
+    /** Update (recalculate) breakpoints positions. Required to call after content of sheet modal has been modified manually when it is opened */
     setSwipeStep(): void;
+    /** Set/open sheet modal on specific breakpoint (from `breakpoints` array parameter). Also passing `0` will close sheet modal, passing `1` will fully open it */
+    setBreakpoint(breakpoint: number): Sheet;
     /** Destroy sheet */
     destroy(): void;
   }
@@ -127,6 +138,8 @@ export namespace Sheet {
       stepClose(el?: HTMLElement | CSSSelector): Sheet;
       /** toggle (open or close) Sheet swipe step */
       stepToggle(el?: HTMLElement | CSSSelector): Sheet;
+      /** Set/open sheet modal on specific breakpoint (from `breakpoints` array parameter). Also passing `0` will close sheet modal, passing `1` will fully open it */
+      setBreakpoint(el?: HTMLElement | CSSSelector, breakpoint: number): Sheet;
     };
   }
   interface AppParams {
@@ -139,6 +152,8 @@ export namespace Sheet {
     sheetStepClose: (sheet: Sheet) => void;
     /** Event will be triggered on Sheet swipe step between step opened and closed state. As `progress` it receives step open progress number (from 0 to 1) */
     sheetStepProgress: (sheet: Sheet, progress: number) => void;
+    /** Event will be triggered on Sheet breakpoint change */
+    sheetBreakpoint: (sheet: Sheet, breakpoint: number) => void;
     /** Event will be triggered when Sheet Modal starts its opening animation. As an argument event handler receives sheet instance */
     sheetOpen: (sheet: Sheet) => void;
     /** Event will be triggered when Sheet Modal completes its opening animation. As an argument event handler receives sheet instance */

package/components/sheet/sheet.js

@@ -15,6 +15,9 @@ export default {
       closeOnEscape: false,
       swipeToClose: false,
       swipeToStep: false,
+      breakpoints: [],
+      backdropBreakpoint: 0,
+      pushBreakpoint: 0,
       swipeHandler: null,
       containerEl: null
     }
@@ -43,6 +46,11 @@ export default {
         const sheetInstance = app.sheet.get(sheet);
         if (sheetInstance && sheetInstance.stepToggle) return sheetInstance.stepToggle();
         return undefined;
+      },
+      setBreakpoint(sheet, breakpoint) {
+        const sheetInstance = app.sheet.get(sheet);
+        if (sheetInstance && sheetInstance.setBreakpoint) return sheetInstance.setBreakpoint(breakpoint);
+        return undefined;
       }
     });
   },

package/components/sheet/sheet.less

@@ -31,9 +31,10 @@
     display: block;
     transform: translate3d(0, 0, 0);
   }
-  &.modal-in-swipe-step {
+  &.modal-in-swipe-step,
+  &.modal-in-breakpoint {
     display: block;
-    transform: translate3d(0, var(--f7-sheet-swipe-step, 0), 0);
+    transform: translate3d(0, var(--f7-sheet-breakpoint, var(--f7-sheet-swipe-step, 0)), 0);
   }
   &.modal-out {
     transform: translate3d(0, 100%, 0);
@@ -141,9 +142,10 @@ html.with-modal-sheet-push-closing {
         height: 100%;
         background: rgba(255,255,255,0.1);
         z-index: 13000;
-        border-radius: var(--f7-sheet-push-border-radius) var(--f7-sheet-push-border-radius) 0 0;
         opacity: 1;
-        animation: sheet-dark-push-overlay-fade-in var(--f7-sheet-transition-duration) forwards;
+        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);
       }
     }
@@ -170,8 +172,8 @@ html.with-modal-sheet-push {
     .framework7-root > .views.dark,
     .framework7-root > .view.dark {
       &:after {
-        animation: sheet-dark-push-overlay-fade-out var(--f7-sheet-transition-duration) forwards;
-        animation-timing-function: var(--f7-sheet-transition-timing-function);
+        opacity: 0;
+        animation: none;
       }
     }
   }
@@ -184,14 +186,6 @@ html.with-modal-sheet-push {
       opacity: 1;
     }
   }
-  @keyframes sheet-dark-push-overlay-fade-out {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
 });
 
 .if-ios-theme({

package/components/swiper/swiper-rtl.css

@@ -1 +1 @@
-@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper,swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide,swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification,swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
+@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;overflow:clip;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}