@xenknight/framework7 0.0.5 → 0.0.6

package/components/swipeout/swipeout-vars.less

@@ -1,7 +1,7 @@
 :root {
   --f7-swipeout-delete-button-bg-color: #ff3b30;
   --f7-swipeout-button-text-color: #fff;
-  --f7-swipeout-button-padding-vertical: 0px;
+
   .light-vars({
     --f7-swipeout-button-bg-color: rgba(0,0,0,0.22);
   });
@@ -10,11 +10,22 @@
   });
 }
 .ios-vars({
-  --f7-swipeout-button-padding-horizontal: 30px;
+  --f7-swipeout-button-border-radius: 48px;
+  --f7-swipeout-button-padding-vertical: 10px;
+  --f7-swipeout-button-padding-horizontal: 16px;
   --f7-swipeout-button-font-size: inherit;
   --f7-swipeout-button-font-weight: inherit;
+  --f7-swipeout-active-border-radius: 16px;
+  .light-vars({
+    --f7-swipeout-active-bg-color: #eee;
+  });
+  .dark-vars({
+    --f7-swipeout-active-bg-color: #2c2c2e;
+  });
 });
 .md-vars({
+  --f7-swipeout-button-border-radius: 0px;
+  --f7-swipeout-button-padding-vertical: 0px;
   --f7-swipeout-button-padding-horizontal: 24px;
   --f7-swipeout-button-font-size: 14px;
   --f7-swipeout-button-font-weight: 500;

package/components/swipeout/swipeout.css

@@ -1 +1 @@
-:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-padding-vertical:0px;--f7-swipeout-button-bg-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-swipeout-button-bg-color:rgba(255, 255, 255, 0.55)}.ios{--f7-swipeout-button-padding-horizontal:30px;--f7-swipeout-button-font-size:inherit;--f7-swipeout-button-font-weight:inherit}.md{--f7-swipeout-button-padding-horizontal:24px;--f7-swipeout-button-font-size:14px;--f7-swipeout-button-font-weight:500}.md .dark,.md.dark{--f7-swipeout-button-text-color:#000}.swipeout{overflow:hidden;transform-style:preserve-3d}.swipeout-deleting{transition-duration:.3s}.swipeout-deleting .swipeout-content{transform:translateX(-100%)}.swipeout-transitioning .swipeout-actions-left a,.swipeout-transitioning .swipeout-actions-right a,.swipeout-transitioning .swipeout-content,.swipeout-transitioning .swipeout-overswipe{transition-duration:.3s;transition-property:transform,left}.swipeout-content{position:relative;z-index:10}.swipeout-overswipe{transition-duration:.2s;transition-property:left}.swipeout-actions-left,.swipeout-actions-right{position:absolute;top:0;height:100%;display:flex;direction:ltr}.swipeout-actions-left>a,.swipeout-actions-left>button,.swipeout-actions-left>div,.swipeout-actions-left>span,.swipeout-actions-right>a,.swipeout-actions-right>button,.swipeout-actions-right>div,.swipeout-actions-right>span{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);display:flex;align-items:center;position:relative;left:0;font-size:var(--f7-swipeout-button-font-size);font-weight:var(--f7-swipeout-button-font-weight)}.swipeout-actions-left>a:after,.swipeout-actions-left>button:after,.swipeout-actions-left>div:after,.swipeout-actions-left>span:after,.swipeout-actions-right>a:after,.swipeout-actions-right>button:after,.swipeout-actions-right>div:after,.swipeout-actions-right>span:after{content:'';position:absolute;top:0;width:600%;height:100%;background:inherit;z-index:-1;transform:translate3d(0,0,0);pointer-events:none}.swipeout-actions-left .swipeout-delete,.swipeout-actions-right .swipeout-delete{background:var(--f7-swipeout-delete-button-bg-color)}.swipeout-actions-right{right:0%;transform:translateX(calc(100% + 1px))}.swipeout-actions-right>a:after,.swipeout-actions-right>button:after,.swipeout-actions-right>div:after,.swipeout-actions-right>span:after{left:100%}.swipeout-actions-right>a:last-child,.swipeout-actions-right>button:last-child,.swipeout-actions-right>div:last-child,.swipeout-actions-right>span: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))}.swipeout-actions-left>a:after,.swipeout-actions-left>button:after,.swipeout-actions-left>div:after,.swipeout-actions-left>span:after{right:100%}.swipeout-actions-left>a:first-child,.swipeout-actions-left>button:first-child,.swipeout-actions-left>div:first-child,.swipeout-actions-left>span:first-child{padding-left:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left))}.swipeout-actions-left [class*=color-],.swipeout-actions-right [class*=color-]{--f7-swipeout-button-bg-color:var(--f7-theme-color)}
+:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-bg-color:rgba(0, 0, 0, 0.22)}:root .dark,:root.dark{--f7-swipeout-button-bg-color:rgba(255, 255, 255, 0.55)}.ios{--f7-swipeout-button-border-radius:48px;--f7-swipeout-button-padding-vertical:10px;--f7-swipeout-button-padding-horizontal:16px;--f7-swipeout-button-font-size:inherit;--f7-swipeout-button-font-weight:inherit;--f7-swipeout-active-border-radius:16px;--f7-swipeout-active-bg-color:#eee}.ios .dark,.ios.dark{--f7-swipeout-active-bg-color:#2c2c2e}.md{--f7-swipeout-button-border-radius:0px;--f7-swipeout-button-padding-vertical:0px;--f7-swipeout-button-padding-horizontal:24px;--f7-swipeout-button-font-size:14px;--f7-swipeout-button-font-weight:500}.md .dark,.md.dark{--f7-swipeout-button-text-color:#000}.swipeout{overflow:hidden;transform-style:preserve-3d}.swipeout-deleting{transition-duration:.3s}.swipeout-deleting .swipeout-content{transform:translateX(-100%)}.swipeout-transitioning .swipeout-content,.swipeout-transitioning .swipeout-content .item-inner::after{transition-duration:.3s;transition-property:transform,left,background-color,border-radius,opacity}.swipeout-transitioning .swipeout-actions-left a,.swipeout-transitioning .swipeout-actions-right a,.swipeout-transitioning .swipeout-overswipe{transition-duration:.3s;transition-property:transform,left,width,margin-left,margin-right}.swipeout-transitioning:not(.swipeout-opened) .swipeout-content{transition-delay:0s,0s,0.3s,0.3s,0s}.list li:has( + li:is(.swipeout-opened,.swipeout-active)) .item-inner::after{opacity:0;transition-duration:.3s}.swipeout-content{position:relative;z-index:10}.swipeout-overswipe{transition-duration:.2s}.swipeout-actions-left,.swipeout-actions-right{position:absolute;top:0;height:100%;display:flex;direction:ltr}.swipeout-actions-left>a,.swipeout-actions-left>button,.swipeout-actions-left>div,.swipeout-actions-left>span,.swipeout-actions-right>a,.swipeout-actions-right>button,.swipeout-actions-right>div,.swipeout-actions-right>span{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);display:flex;align-items:center;position:relative;left:0;font-size:var(--f7-swipeout-button-font-size);font-weight:var(--f7-swipeout-button-font-weight)}.swipeout-actions-left .swipeout-delete,.swipeout-actions-right .swipeout-delete{background:var(--f7-swipeout-delete-button-bg-color)}.swipeout-actions-left [class*=color-],.swipeout-actions-right [class*=color-]{--f7-swipeout-button-bg-color:var(--f7-theme-color)}.ios .swipeout-actions-right{right:0%}.ios .swipeout-actions-left{left:0%}.ios .swipeout-actions-left,.ios .swipeout-actions-right{padding:0 10px;gap:10px;align-items:center}.ios .swipeout-actions-left>a,.ios .swipeout-actions-left>button,.ios .swipeout-actions-left>div,.ios .swipeout-actions-left>span,.ios .swipeout-actions-right>a,.ios .swipeout-actions-right>button,.ios .swipeout-actions-right>div,.ios .swipeout-actions-right>span{transform:scale(0);padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal)}.ios .swipeout-active .swipeout-content,.ios .swipeout-opened .swipeout-content{background-color:var(--f7-swipeout-active-bg-color);border-radius:var(--f7-swipeout-active-border-radius)}.ios .swipeout-active .item-content,.ios .swipeout-opened .item-content{border-radius:var(--f7-swipeout-active-border-radius)}.ios .swipeout-active .swipeout-content .item-inner::after,.ios .swipeout-opened .swipeout-content .item-inner::after{opacity:0}.ios .swipeout-overswipe{transition-duration:.2s;transition-property:transform,left,width,margin-left,margin-right}.md .swipeout-actions-left>a:after,.md .swipeout-actions-left>button:after,.md .swipeout-actions-left>div:after,.md .swipeout-actions-left>span:after,.md .swipeout-actions-right>a:after,.md .swipeout-actions-right>button:after,.md .swipeout-actions-right>div:after,.md .swipeout-actions-right>span:after{content:'';position:absolute;top:0;width:600%;height:100%;background:inherit;z-index:-1;transform:translate3d(0,0,0);pointer-events:none}.md .swipeout-actions-right{right:0%;transform:translateX(calc(100% + 1px))}.md .swipeout-actions-right>a:after,.md .swipeout-actions-right>button:after,.md .swipeout-actions-right>div:after,.md .swipeout-actions-right>span:after{left:100%}.md .swipeout-actions-right>a:last-child,.md .swipeout-actions-right>button:last-child,.md .swipeout-actions-right>div:last-child,.md .swipeout-actions-right>span:last-child{padding-right:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-right))}.md .swipeout-actions-left{left:0%;transform:translateX(calc(-100% - 1px))}.md .swipeout-actions-left>a:after,.md .swipeout-actions-left>button:after,.md .swipeout-actions-left>div:after,.md .swipeout-actions-left>span:after{right:100%}.md .swipeout-actions-left>a:first-child,.md .swipeout-actions-left>button:first-child,.md .swipeout-actions-left>div:first-child,.md .swipeout-actions-left>span:first-child{padding-left:calc(var(--f7-swipeout-button-padding-horizontal) + var(--f7-safe-area-left))}.md .swipeout-overswipe{transition-property:left}

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 {