@xenknight/framework7 0.0.3 → 0.0.6

package/components/swipeout/swipeout.js

@@ -1,7 +1,6 @@
 import { getDocument } from 'ssr-window';
 import $ from '../../shared/dom7.js';
 import { nextFrame, bindMethods } from '../../shared/utils.js';
-import { getSupport } from '../../shared/get-support.js';
 const Swipeout = {
   init() {
     const app = this;
@@ -28,6 +27,7 @@ const Swipeout = {
     let $overswipeRightButton;
     let overswipeLeft;
     let overswipeRight;
+    const isIOS = app.theme === 'ios';
     function handleTouchStart(e) {
       if (!app.swipeout.allow) return;
       isMoved = false;
@@ -46,12 +46,16 @@ const Swipeout = {
         isScrolling = !!(isScrolling || Math.abs(pageY - touchesStart.y) > Math.abs(pageX - touchesStart.x));
       }
       if (isScrolling) {
+        $swipeoutEl.removeClass('swipeout-active');
         isTouched = false;
         return;
       }
       if (!isMoved) {
         if ($('.list.sortable-opened').length > 0) return;
         $swipeoutContent = $swipeoutEl.find('.swipeout-content');
+        if (!app.params.swipeout.noFollow) {
+          $swipeoutEl.addClass('swipeout-active');
+        }
         $actionsRight = $swipeoutEl.find('.swipeout-actions-right');
         $actionsLeft = $swipeoutEl.find('.swipeout-actions-left');
         actionsLeftWidth = null;
@@ -91,6 +95,7 @@ const Swipeout = {
       }
       if (translate > 0 && $actionsLeft.length === 0 || translate < 0 && $actionsRight.length === 0) {
         if (!opened) {
+          $swipeoutEl.removeClass('swipeout-active');
           isTouched = false;
           isMoved = false;
           $swipeoutContent.transform('');
@@ -151,11 +156,24 @@ const Swipeout = {
           if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
             $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
           }
+          if (typeof buttonEl.f7SwipeoutButtonWidth === 'undefined') {
+            $buttonEl[0].f7SwipeoutButtonWidth = buttonEl.offsetWidth;
+          }
           buttonOffset = buttonEl.f7SwipeoutButtonOffset;
+          const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
           if ($overswipeRightButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-left') {
-            $buttonEl.css({
-              left: `${overswipeRight ? -buttonOffset : 0}px`
-            });
+            if (isIOS) {
+              const newWidth = overswipeRight ? buttonWidth + buttonOffset - 8 : buttonWidth;
+              const diff = newWidth - buttonWidth;
+              $buttonEl.css({
+                width: `${newWidth}px`,
+                marginLeft: overswipeRight ? `${-diff}px` : '0px'
+              });
+            } else {
+              $buttonEl.css({
+                left: `${overswipeRight ? -buttonOffset : 0}px`
+              });
+            }
             if (overswipeRight) {
               if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
                 $swipeoutEl.trigger('swipeout:overswipeenter');
@@ -170,7 +188,15 @@ const Swipeout = {
               $buttonEl.removeClass('swipeout-overswipe-active');
             }
           }
-          $buttonEl.transform(`translate3d(${buttonTranslate - buttonOffset * (1 + Math.max(progress, -1))}px,0,0)`);
+          if (isIOS) {
+            const buttonEndPos = actionsRightWidth - buttonOffset;
+            const buttonStartPos = actionsRightWidth - buttonOffset - buttonWidth;
+            let buttonProgress = (-buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
+            buttonProgress = Math.max(Math.min(buttonProgress, 1), 0);
+            $buttonEl.transform(`scale(${buttonProgress})`);
+          } else {
+            $buttonEl.transform(`translate3d(${buttonTranslate - buttonOffset * (1 + Math.max(progress, -1))}px,0,0)`);
+          }
         });
       }
       if ($actionsLeft.length > 0) {
@@ -191,14 +217,27 @@ const Swipeout = {
         }
         $leftButtons.each((buttonEl, index) => {
           const $buttonEl = $(buttonEl);
+          if (typeof buttonEl.f7SwipeoutButtonWidth === 'undefined') {
+            $buttonEl[0].f7SwipeoutButtonWidth = buttonEl.offsetWidth;
+          }
           if (typeof buttonEl.f7SwipeoutButtonOffset === 'undefined') {
-            $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
+            $buttonEl[0].f7SwipeoutButtonOffset = isIOS ? buttonEl.offsetLeft : actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
           }
+          const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
           buttonOffset = buttonEl.f7SwipeoutButtonOffset;
           if ($overswipeLeftButton.length > 0 && $buttonEl.hasClass('swipeout-overswipe') && direction === 'to-right') {
-            $buttonEl.css({
-              left: `${overswipeLeft ? buttonOffset : 0}px`
-            });
+            if (isIOS) {
+              const newWidth = overswipeLeft ? actionsLeftWidth - 16 : buttonWidth;
+              const diff = newWidth - buttonWidth;
+              $buttonEl.css({
+                width: `${newWidth}px`,
+                marginRight: overswipeLeft ? `${-diff}px` : '0px'
+              });
+            } else {
+              $buttonEl.css({
+                left: `${overswipeLeft ? buttonOffset : 0}px`
+              });
+            }
             if (overswipeLeft) {
               if (!$buttonEl.hasClass('swipeout-overswipe-active')) {
                 $swipeoutEl.trigger('swipeout:overswipeenter');
@@ -216,7 +255,15 @@ const Swipeout = {
           if ($leftButtons.length > 1) {
             $buttonEl.css('z-index', $leftButtons.length - index);
           }
-          $buttonEl.transform(`translate3d(${buttonTranslate + buttonOffset * (1 - Math.min(progress, 1))}px,0,0)`);
+          if (isIOS) {
+            const buttonStartPos = buttonOffset;
+            const buttonEndPos = buttonStartPos + buttonWidth;
+            let buttonProgress = (buttonTranslate - buttonStartPos) / (buttonEndPos - buttonStartPos);
+            buttonProgress = Math.max(Math.min(buttonProgress, 1), 0);
+            $buttonEl.transform(`scale(${buttonProgress})`);
+          } else {
+            $buttonEl.transform(`translate3d(${buttonTranslate + buttonOffset * (1 - Math.min(progress, 1))}px,0,0)`);
+          }
         });
       }
       $swipeoutEl.trigger('swipeout', progress);
@@ -229,6 +276,7 @@ const Swipeout = {
         isMoved = false;
         return;
       }
+      $swipeoutEl.removeClass('swipeout-active');
       isTouched = false;
       isMoved = false;
       const timeDiff = new Date().getTime() - touchStartTime;
@@ -257,7 +305,11 @@ const Swipeout = {
         $buttons = direction === 'to-left' ? $rightButtons : $leftButtons;
         if ($buttons) {
           for (i = 0; i < $buttons.length; i += 1) {
-            $($buttons[i]).transform(`translate3d(${newTranslate}px,0,0)`);
+            if (isIOS) {
+              $($buttons[i]).transform(`scale(1)`);
+            } else {
+              $($buttons[i]).transform(`translate3d(${newTranslate}px,0,0)`);
+            }
           }
         }
         if (overswipeRight) {
@@ -282,7 +334,11 @@ const Swipeout = {
           if (typeof buttonOffset === 'undefined') {
             $buttonEl[0].f7SwipeoutButtonOffset = actionsLeftWidth - buttonEl.offsetLeft - buttonEl.offsetWidth;
           }
-          $buttonEl.transform(`translate3d(${buttonOffset}px,0,0)`);
+          if (isIOS) {
+            $buttonEl.transform(`scale(0)`);
+          } else {
+            $buttonEl.transform(`translate3d(${buttonOffset}px,0,0)`);
+          }
         });
       }
       if ($rightButtons && $rightButtons.length > 0 && $rightButtons !== $buttons) {
@@ -292,7 +348,11 @@ const Swipeout = {
           if (typeof buttonOffset === 'undefined') {
             $buttonEl[0].f7SwipeoutButtonOffset = buttonEl.offsetLeft;
           }
-          $buttonEl.transform(`translate3d(${-buttonOffset}px,0,0)`);
+          if (isIOS) {
+            $buttonEl.transform(`scale(0)`);
+          } else {
+            $buttonEl.transform(`translate3d(${-buttonOffset}px,0,0)`);
+          }
         });
       }
       $swipeoutContent.transitionEnd(() => {
@@ -310,9 +370,9 @@ const Swipeout = {
         }
       });
     }
-    const passiveListener = getSupport().passiveListener ? {
+    const passiveListener = {
       passive: true
-    } : false;
+    };
     app.on('touchstart', e => {
       if (Swipeout.el) {
         const $targetEl = $(e.target);
@@ -354,10 +414,14 @@ const Swipeout = {
     if ($buttons.length > 1) {
       $buttons.each((buttonEl, buttonIndex) => {
         const $buttonEl = $(buttonEl);
-        if (side === 'right') {
-          $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+        if (app.theme === 'ios') {
+          $buttonEl.transform(`scale(1)`);
         } else {
-          $buttonEl.css('z-index', $buttons.length - buttonIndex).transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+          if (side === 'right') {
+            $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+          } else {
+            $buttonEl.css('z-index', $buttons.length - buttonIndex).transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+          }
         }
       });
     }
@@ -368,7 +432,11 @@ const Swipeout = {
       if (callback) callback.call($el[0]);
     });
     nextFrame(() => {
-      $buttons.transform(`translate3d(${translate}px,0,0)`);
+      if (app.theme === 'ios') {
+        $buttons.transform(`scale(1)`);
+      } else {
+        $buttons.transform(`translate3d(${translate}px,0,0)`);
+      }
       $swipeoutContent.transform(`translate3d(${translate}px,0,0)`);
     });
     Swipeout.el = $el[0];
@@ -401,14 +469,22 @@ const Swipeout = {
     closeTimeout = setTimeout(onSwipeoutClose, 500);
     $buttons.each(buttonEl => {
       const $buttonEl = $(buttonEl);
-      if (side === 'right') {
-        $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+      if (app.theme === 'ios') {
+        $buttonEl.transform(`scale(0)`);
       } else {
-        $buttonEl.transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+        if (side === 'right') {
+          $buttonEl.transform(`translate3d(${-buttonEl.offsetLeft}px,0,0)`);
+        } else {
+          $buttonEl.transform(`translate3d(${swipeoutActionsWidth - buttonEl.offsetWidth - buttonEl.offsetLeft}px,0,0)`);
+        }
       }
+      const buttonWidth = $buttonEl[0].f7SwipeoutButtonWidth;
       $buttonEl.css({
-        left: '0px'
+        left: '0px',
+        width: buttonWidth ? `${buttonWidth}px` : '',
+        marginLeft: '0px'
       }).removeClass('swipeout-overswipe-active');
+      delete $buttonEl[0].f7SwipeoutButtonWidth;
     });
     if (Swipeout.el && Swipeout.el === $el[0]) Swipeout.el = undefined;
   },

package/components/swipeout/swipeout.less

@@ -13,11 +13,26 @@
 }
 .swipeout-transitioning {
   .swipeout-content,
+  .swipeout-content .item-inner::after {
+    transition-duration: 300ms;
+    transition-property: transform, left, background-color, border-radius, opacity;
+  }
   .swipeout-actions-right a,
   .swipeout-actions-left a,
   .swipeout-overswipe {
     transition-duration: 300ms;
-    transition-property: transform, left;
+    transition-property: transform, left, width, margin-left, margin-right;
+  }
+  &:not(.swipeout-opened) {
+    .swipeout-content {
+      transition-delay: 0ms, 0ms, 300ms, 300ms, 0ms;
+    }
+  }
+}
+.list li:has(+ li:is(.swipeout-opened, .swipeout-active)) {
+  .item-inner::after {
+    opacity: 0;
+    transition-duration: 300ms;
   }
 }
 .swipeout-content {
@@ -26,7 +41,6 @@
 }
 .swipeout-overswipe {
   transition-duration: 200ms;
-  transition-property: left;
 }
 .swipeout-actions-left,
 .swipeout-actions-right {
@@ -39,6 +53,9 @@
   > button,
   > span,
   > div {
+    box-sizing: border-box;
+    border-radius: var(--f7-swipeout-button-border-radius);
+
     color: var(--f7-swipeout-button-text-color);
     background: var(--f7-swipeout-button-bg-color);
     padding: var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);
@@ -48,53 +65,12 @@
     left: 0;
     font-size: var(--f7-swipeout-button-font-size);
     font-weight: var(--f7-swipeout-button-font-weight);
-    &:after {
-      content: '';
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      width: 600%;
-      height: 100%;
-      background: inherit;
-      z-index: -1;
-      transform: translate3d(0, 0, 0);
-      pointer-events: none;
-    }
   }
   .swipeout-delete {
     background: var(--f7-swipeout-delete-button-bg-color);
   }
 }
-.swipeout-actions-right {
-  right: 0%;
-  transform: translateX(calc(100% + 1px));
-  > a,
-  > button,
-  > span,
-  > div {
-    &:after {
-      left: 100%;
-    }
-    &:last-child {
-      padding-right: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right));
-    }
-  }
-}
-.swipeout-actions-left {
-  left: 0%;
-  transform: translateX(calc(-100% - 1px));
-  > a,
-  > button,
-  > span,
-  > div {
-    &:after {
-      right: 100%;
-    }
-    &:first-child {
-      padding-left: calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left));
-    }
-  }
-}
+
 .swipeout-actions-left,
 .swipeout-actions-right {
   [class*='color-'] {

package/components/toast/toast-class.js

@@ -97,8 +97,8 @@ class Toast extends Modal {
       class: "toast-icon"
     }, icon), $jsx("div", {
       class: "toast-text"
-    }, text), closeButton && !icon && $jsx("a", {
-      class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}`
+    }, text), closeButton && !icon && $jsx("button", {
+      class: `toast-button button ${closeButtonColor ? `color-${closeButtonColor}` : ''}${toast.app.theme === 'ios' ? ' button-round' : ''}`
     }, closeButtonText)));
   }
 }

package/components/toast/toast-ios.less

@@ -3,6 +3,8 @@
     transition-duration: 300ms;
     width: 100%;
     left: 0;
+    .ios-glass-backdrop();
+    box-shadow: var(--f7-glass-shadow);
     &.toast-top {
       top: 0;
       transform: translate3d(0, -100%, 0);

package/components/toast/toast-rtl.css

@@ -1 +1 @@
-:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-right:16px;margin-left:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-right:16px;margin-left:-8px}
+:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:var(--f7-glass-bg-color);--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:32px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px;width:auto}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0;-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-right:16px;margin-left:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-right:16px;margin-left:-8px}

package/components/toast/toast-vars.less

@@ -4,12 +4,10 @@
   --f7-toast-max-width: 568px;
 }
 .ios-vars({
-  --f7-toast-text-color: #fff;
-  --f7-toast-bg-color: rgba(0,0,0,0.75);
-  --f7-toast-bg-color-rgb: 0, 0, 0;
+  --f7-toast-bg-color: var(--f7-glass-bg-color);
   --f7-toast-padding-horizontal: 16px;
   --f7-toast-padding-vertical: 12px;
-  --f7-toast-border-radius: 8px;
+  --f7-toast-border-radius: 32px;
   --f7-toast-button-min-width: 64px;
 });
 .md-vars({

package/components/toast/toast.css

@@ -1 +1 @@
-:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-text-color:#fff;--f7-toast-bg-color:rgba(0, 0, 0, 0.75);--f7-toast-bg-color-rgb:0,0,0;--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:8px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}@supports ((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))){.ios-translucent-modals .toast{background-color:rgba(var(--f7-toast-bg-color-rgb),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}
+:root{--f7-toast-font-size:14px;--f7-toast-icon-size:48px;--f7-toast-max-width:568px}.ios{--f7-toast-bg-color:var(--f7-glass-bg-color);--f7-toast-padding-horizontal:16px;--f7-toast-padding-vertical:12px;--f7-toast-border-radius:32px;--f7-toast-button-min-width:64px}.md{--f7-toast-padding-horizontal:24px;--f7-toast-padding-vertical:14px;--f7-toast-border-radius:16px;--f7-toast-button-min-width:64px}.md,.md .dark,.md [class*=color-]{--f7-toast-text-color:var(--f7-md-on-surface);--f7-toast-bg-color:var(--f7-md-surface-5)}.toast{transition-property:transform,opacity;position:absolute;max-width:var(--f7-toast-max-width);z-index:20000;color:var(--f7-toast-text-color);font-size:var(--f7-toast-font-size);box-sizing:border-box;background-color:var(--f7-toast-bg-color);opacity:0}.toast.modal-in{opacity:1}.toast .toast-content{display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;padding:var(--f7-toast-padding-vertical) var(--f7-toast-padding-horizontal)}.toast .toast-text{line-height:20px;flex-shrink:1;min-width:0}.toast .toast-button{flex-shrink:0;min-width:var(--f7-toast-button-min-width);margin-top:-8px;margin-bottom:-8px;width:auto}.toast.toast-with-icon .toast-content{display:block;text-align:center}.toast.toast-with-icon .toast-text{text-align:center}.toast.toast-with-icon .toast-icon .f7-icons,.toast.toast-with-icon .toast-icon .material-icons{font-size:var(--f7-toast-icon-size)}.toast.toast-center{top:50%}.toast.toast-top{margin-top:var(--f7-safe-area-top)}.ios .toast{transition-duration:.3s;width:100%;left:0;-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);box-shadow:var(--f7-glass-shadow)}.ios .toast.toast-top{top:0;transform:translate3d(0,-100%,0)}.ios .toast.toast-top.modal-in{transform:translate3d(0,0%,0)}.ios .toast.toast-center{width:auto;left:50%;border-radius:var(--f7-toast-border-radius);transform:translate3d(-50%,-50%,0)}.ios .toast.toast-center.modal-in{transform:translate3d(-50%,-50%,0)}.ios .toast.toast-bottom{bottom:0;transform:translate3d(0,100%,0)}.ios .toast.toast-bottom.modal-in{transform:translate3d(0,0%,0)}@media (max-width:568px){.ios .toast.toast-top{margin-top:0}.ios .toast.toast-top .toast-content{padding-top:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-top))}.ios .toast.toast-bottom .toast-content{padding-bottom:calc(var(--f7-toast-padding-vertical) + var(--f7-safe-area-bottom))}}@media (min-width:569px){.ios .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2);border-radius:var(--f7-toast-border-radius)}.ios .toast.toast-top{top:16px}.ios .toast.toast-center{margin-left:0}.ios .toast.toast-bottom{margin-bottom:calc(16px + var(--f7-safe-area-bottom))}}@media (min-width:1024px){.ios .toast{margin-left:0;width:auto}.ios .toast.toast-horizontal-left{left:16px}.ios .toast.toast-horizontal-right{left:auto;right:16px}.ios .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}}.ios .toast-button{margin-left:16px;margin-right:calc(-1 * var(--f7-button-padding-horizontal))}.md .toast{transition-duration:.2s;border-radius:var(--f7-toast-border-radius);width:calc(100% - 16px);transform:scale(.9);left:8px}.md .toast.modal-in{transform:scale(1)}.md .toast.modal-out{transform:scale(1)}.md .toast.toast-top{top:8px}.md .toast.toast-center{left:50%;width:auto;transform:scale(.9) translate3d(-55%,-55%,0)}.md .toast.toast-center.modal-in{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-center.modal-out{transform:scale(1) translate3d(-50%,-50%,0)}.md .toast.toast-bottom{bottom:calc(8px + var(--f7-safe-area-bottom))}@media (min-width:584px){.md .toast{left:50%;margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-center{margin-left:0}}@media (min-width:1024px){.md .toast{margin-left:0;width:auto}.md .toast.toast-horizontal-left{left:24px}.md .toast.toast-horizontal-right{left:auto;right:24px}.md .toast.toast-horizontal-center{left:50%;width:var(--f7-toast-max-width);margin-left:calc(-1 * var(--f7-toast-max-width)/ 2)}.md .toast.toast-bottom{bottom:calc(24px + var(--f7-safe-area-bottom))}.md .toast.toast-top{top:24px}}.md .toast-button{margin-left:16px;margin-right:-8px}

package/components/toast/toast.less

@@ -11,7 +11,6 @@
   box-sizing: border-box;
   background-color: var(--f7-toast-bg-color);
   opacity: 0;
-  .ios-translucent-modals(var(--f7-toast-bg-color-rgb));
   &.modal-in {
     opacity: 1;
   }
@@ -32,6 +31,7 @@
     min-width: var(--f7-toast-button-min-width);
     margin-top: -8px;
     margin-bottom: -8px;
+    width: auto;
   }
   &.toast-with-icon {
     .toast-content {

package/components/toggle/toggle-class.js

@@ -1,7 +1,6 @@
 import $ from '../../shared/dom7.js';
 import { extend, now, nextTick, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
-import { getSupport } from '../../shared/get-support.js';
 class Toggle extends Framework7Class {
   constructor(app, params) {
     if (params === void 0) {
@@ -9,7 +8,6 @@ class Toggle extends Framework7Class {
     }
     super(params, [app]);
     const toggle = this;
-    const support = getSupport();
     const defaults = {};
 
     // Extend defaults with modules params
@@ -120,19 +118,17 @@ class Toggle extends Framework7Class {
       toggle.emit('local::change toggleChange', toggle);
     }
     toggle.attachEvents = function attachEvents() {
-      const passive = support.passiveListener ? {
+      $el.on(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      $el.on(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.on('touchmove', handleTouchMove);
       app.on('touchend:passive', handleTouchEnd);
       toggle.$inputEl.on('change', handleInputChange);
     };
     toggle.detachEvents = function detachEvents() {
-      const passive = support.passiveListener ? {
+      $el.off(app.touchEvents.start, handleTouchStart, {
         passive: true
-      } : false;
-      $el.off(app.touchEvents.start, handleTouchStart, passive);
+      });
       app.off('touchmove', handleTouchMove);
       app.off('touchend:passive', handleTouchEnd);
       toggle.$inputEl.off('change', handleInputChange);

package/components/toggle/toggle-ios.less

@@ -1,69 +1,87 @@
 .ios {
   .toggle {
-    background: var(--f7-toggle-inactive-border-color);
-    input[type='checkbox']:checked + .toggle-icon {
-      background: var(--f7-toggle-active-color, var(--f7-theme-color));
-      &:before {
+    --f7-toggle-knob-tx: 0px;
+    &::before {
+      content: '';
+      border-radius: inherit;
+      inset: 0;
+      position: absolute;
+      background: var(--f7-toggle-inactive-border-color);
+      transition-duration: 300ms;
+      z-index: 0;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
+
+      top: 0;
+      width: var(--f7-toggle-height);
+      height: var(--f7-toggle-height);
+      border-radius: var(--f7-toggle-height);
+      background: var(--f7-toggle-inactive-border-color);
+      transition-duration: 300ms;
+      z-index: 0;
+    }
+    &:has(input[type='checkbox']:checked) {
+      --f7-toggle-knob-tx: calc(var(--f7-toggle-width) - 38px - 4px);
+      &::before {
         background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
-        transform: scale(0);
       }
-      &:after {
-        background: var(--f7-toggle-active-knob-bg-color);
-        .ltr({
-          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));
-        });
-        .rtl({
-          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))));
-        });
+      &::after {
+        background: var(--f7-toggle-active-bg-color, var(--f7-theme-color));
+        transform: translateX(0);
       }
     }
   }
   .toggle-icon {
-    background: var(--f7-toggle-border-color);
-    &:before {
+    background: var(--f7-toggle-inactive-knob-bg-color);
+    height: calc(var(--f7-toggle-height) - 4px);
+    width: 38px;
+    top: 2px;
+    .ltr({ left: 2px; });
+    .rtl({ right: 2px; });
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    border-radius: calc(var(--f7-toggle-height) - 4px);
+    transition-duration: 300ms;
+    transform: translateX(var(--f7-toggle-knob-tx)) scale(1);
+    position: relative;
+    z-index: 1;
+    transform-origin: center;
+    &::before {
+      content: '';
       position: absolute;
-      .ltr({ left: 2px; });
-      .rtl({ right: 2px; });
-      top: 2px;
-      width: calc(var(--f7-toggle-width) - 4px);
-      height: calc(var(--f7-toggle-height) - 4px);
-      border-radius: var(--f7-toggle-height);
-      box-sizing: border-box;
-      background: var(--f7-toggle-inactive-bg-color);
-      z-index: 1;
+      left: 50%;
+      top: 50%;
+      width: 1px;
+      height: 1px;
+      opacity: 0;
       transition-duration: 300ms;
-      transform: scale(1);
+      box-shadow: 0px 0px 40px 15px rgba(var(--f7-theme-color-rgb), 0.75);
     }
-    &:after {
-      background: var(--f7-toggle-inactive-knob-bg-color);
-      height: calc(var(--f7-toggle-height) - 4px);
-      width: calc(var(--f7-toggle-height) - 4px);
-      top: 2px;
-      .ltr({ left: 2px; });
-      .rtl({ right: 2px; });
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-      border-radius: calc(var(--f7-toggle-height) - 4px);
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      box-shadow: var(--f7-glass-shadow-thumb);
+      transition-duration: 300ms;
+      opacity: 0;
     }
   }
   .toggle-active-state {
-    input[type='checkbox']:not(:checked) + .toggle-icon {
-      &:before {
-        transform: scale(0);
-      }
+    &::before {
+      transform: scale(0.75);
     }
-    input[type='checkbox'] + .toggle-icon {
-      &:after {
-        width: calc(var(--f7-toggle-height) + 4px);
+    .toggle-icon {
+      background: transparent;
+      transform: translateX(var(--f7-toggle-knob-tx)) scale(1.4);
+      &::before {
+        opacity: 1;
       }
-    }
-    input[type='checkbox']:checked + .toggle-icon {
-      &:after {
-        .ltr({
-          transform: translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height) - 8px));
-        });
-        .rtl({
-          transform: translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)));
-        });
+      &::after {
+        opacity: 1;
       }
     }
   }

package/components/toggle/toggle-rtl.css

@@ -1 +1 @@
-.ios{--f7-toggle-width:52px;--f7-toggle-height:32px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{background:var(--f7-toggle-inactive-border-color)}.ios .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-color,var(--f7-theme-color))}.ios .toggle input[type=checkbox]:checked+.toggle-icon:before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:scale(0)}.ios .toggle input[type=checkbox]:checked+.toggle-icon:after{background:var(--f7-toggle-active-knob-bg-color);transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height))))}.ios .toggle-icon{background:var(--f7-toggle-border-color)}.ios .toggle-icon:before{position:absolute;right:2px;top:2px;width:calc(var(--f7-toggle-width) - 4px);height:calc(var(--f7-toggle-height) - 4px);border-radius:var(--f7-toggle-height);box-sizing:border-box;background:var(--f7-toggle-inactive-bg-color);z-index:1;transition-duration:.3s;transform:scale(1)}.ios .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:calc(var(--f7-toggle-height) - 4px);top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px)}.ios .toggle-active-state input[type=checkbox]:not(:checked)+.toggle-icon:before{transform:scale(0)}.ios .toggle-active-state input[type=checkbox]+.toggle-icon:after{width:calc(var(--f7-toggle-height) + 4px)}.ios .toggle-active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height) - 8px)))}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);right:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}
+.ios{--f7-toggle-width:64px;--f7-toggle-height:28px;--f7-toggle-inactive-knob-bg-color:#fff;--f7-toggle-active-knob-bg-color:#fff;--f7-toggle-inactive-border-color:#e5e5e5;--f7-toggle-inactive-bg-color:#fff}.ios .dark,.ios.dark{--f7-toggle-inactive-border-color:#555;--f7-toggle-inactive-bg-color:#555}.md{--f7-toggle-width:52px;--f7-toggle-height:32px}.md,.md .dark,.md [class*=color-]{--f7-toggle-inactive-bg-color:var(--f7-md-surface-variant);--f7-toggle-active-bg-color:var(--f7-theme-color);--f7-toggle-inactive-knob-bg-color:var(--f7-md-outline);--f7-toggle-active-knob-bg-color:var(--f7-md-on-primary);--f7-toggle-inactive-border-color:var(--f7-md-outline);--f7-toggle-active-border-color:var(--f7-theme-color)}.toggle,.toggle-icon{width:var(--f7-toggle-width);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height)}.toggle{display:inline-block;vertical-align:middle;position:relative;box-sizing:border-box;align-self:center;-webkit-user-select:none;user-select:none}.toggle input[type=checkbox]{display:none}.toggle input[disabled]~.toggle-icon{pointer-events:none}.toggle-icon{z-index:0;margin:0;padding:0;-webkit-appearance:none;appearance:none;border:none;position:relative;transition:.3s;box-sizing:border-box;display:block;cursor:pointer}.toggle-icon:after,.toggle-icon:before{content:''}.toggle-icon:after{position:absolute;z-index:2;transform:translateX(0px);transition-duration:.3s}.ios .toggle{--f7-toggle-knob-tx:0px}.ios .toggle::before{content:'';border-radius:inherit;inset:0;position:absolute;background:var(--f7-toggle-inactive-border-color);transition-duration:.3s;z-index:0}.ios .toggle::after{content:'';position:absolute;left:0;transform:translateX(calc(var(--f7-toggle-width) - var(--f7-toggle-height)));top:0;width:var(--f7-toggle-height);height:var(--f7-toggle-height);border-radius:var(--f7-toggle-height);background:var(--f7-toggle-inactive-border-color);transition-duration:.3s;z-index:0}.ios .toggle:has(input[type=checkbox]:checked){--f7-toggle-knob-tx:calc(var(--f7-toggle-width) - 38px - 4px)}.ios .toggle:has(input[type=checkbox]:checked)::before{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color))}.ios .toggle:has(input[type=checkbox]:checked)::after{background:var(--f7-toggle-active-bg-color,var(--f7-theme-color));transform:translateX(0)}.ios .toggle-icon{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 4px);width:38px;top:2px;right:2px;box-shadow:0 2px 4px rgba(0,0,0,.3);border-radius:calc(var(--f7-toggle-height) - 4px);transition-duration:.3s;transform:translateX(var(--f7-toggle-knob-tx)) scale(1);position:relative;z-index:1;transform-origin:center}.ios .toggle-icon::before{content:'';position:absolute;left:50%;top:50%;width:1px;height:1px;opacity:0;transition-duration:.3s;box-shadow:0px 0px 40px 15px rgba(var(--f7-theme-color-rgb),.75)}.ios .toggle-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--f7-glass-shadow-thumb);transition-duration:.3s;opacity:0}.ios .toggle-active-state::before{transform:scale(.75)}.ios .toggle-active-state .toggle-icon{background:0 0;transform:translateX(var(--f7-toggle-knob-tx)) scale(1.4)}.ios .toggle-active-state .toggle-icon::before{opacity:1}.ios .toggle-active-state .toggle-icon::after{opacity:1}.md .toggle input[type=checkbox]:checked+.toggle-icon{background:var(--f7-toggle-active-bg-color);border-color:var(--f7-toggle-active-border-color)}.md .toggle input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1);background:var(--f7-toggle-active-knob-bg-color)}.md .toggle.active-state input[type=checkbox]:checked+.toggle-icon:after{transform:translateX(calc(-1 * (var(--f7-toggle-width) - var(--f7-toggle-height)))) scale(1.1)}.md .toggle-icon{background:var(--f7-toggle-inactive-bg-color);border:2px solid var(--f7-toggle-inactive-border-color)}.md .toggle-icon:after{background:var(--f7-toggle-inactive-knob-bg-color);height:calc(var(--f7-toggle-height) - 8px);width:calc(var(--f7-toggle-height) - 8px);top:2px;border-radius:var(--f7-toggle-height);transform:scale(.666);right:2px}.md .toggle-icon.active-state:after{transform:scale(1.1)}

package/components/toggle/toggle-vars.less

@@ -1,6 +1,6 @@
 .ios-vars({
-  --f7-toggle-width: 52px;
-  --f7-toggle-height: 32px;
+  --f7-toggle-width: 64px;
+  --f7-toggle-height: 28px;
   /*
   --f7-toggle-active-bg-color: var(--f7-theme-color);
   */