@xenknight/framework7 0.0.5 → 0.0.7

package/components/searchbar-new/searchbar.js

@@ -0,0 +1,122 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import SearchbarNew from './searchbar-new-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'searchbar-new',
+  static: {
+    SearchbarNew
+  },
+  create() {
+    const app = this;
+    app.searchbarNew = ConstructorMethods({
+      defaultSelector: '.searchbar-new',
+      constructor: SearchbarNew,
+      app,
+      domProp: 'f7SearchbarNew',
+      addMethods: 'clear enable disable toggle search'.split(' ')
+    });
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.searchbar-new-init').each(searchbarEl => {
+        const $searchbarEl = $(searchbarEl);
+        app.searchbarNew.create(extend($searchbarEl.dataset(), {
+          el: searchbarEl
+        }));
+      });
+    },
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.searchbar-new-init').each(searchbarEl => {
+        if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+          searchbarEl.f7SearchbarNew.destroy();
+        }
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.searchbar-new-init').each(searchbarEl => {
+        const $searchbarEl = $(searchbarEl);
+        app.searchbarNew.create(extend($searchbarEl.dataset(), {
+          el: searchbarEl
+        }));
+      });
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarNewEl && page.$navbarNewEl.length > 0) {
+        page.$navbarNewEl.find('.searchbar-new-init').each(searchbarEl => {
+          const $searchbarEl = $(searchbarEl);
+          app.searchbarNew.create(extend($searchbarEl.dataset(), {
+            el: searchbarEl
+          }));
+        });
+      }
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.searchbar-new-init').each(searchbarEl => {
+        if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+          searchbarEl.f7SearchbarNew.destroy();
+        }
+      });
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarNewEl && page.$navbarNewEl.length > 0) {
+        page.$navbarNewEl.find('.searchbar-new-init').each(searchbarEl => {
+          if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+            searchbarEl.f7SearchbarNew.destroy();
+          }
+        });
+      }
+    }
+  },
+  clicks: {
+    '.searchbar-new-clear': function clear($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbarNew.get(data.searchbar);
+      if (sb) sb.clear();
+    },
+    '.searchbar-new-enable': function enable($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbarNew.get(data.searchbar);
+      if (sb) sb.enable(true);
+    },
+    '.searchbar-new-disable': function disable($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbarNew.get(data.searchbar);
+      if (sb) sb.disable();
+    },
+    '.searchbar-new-toggle': function toggle($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      const sb = app.searchbarNew.get(data.searchbar);
+      if (sb) sb.toggle();
+    }
+  },
+  vnode: {
+    'searchbar-new-init': {
+      insert(vnode) {
+        const app = this;
+        const searchbarEl = vnode.elm;
+        const $searchbarEl = $(searchbarEl);
+        app.searchbarNew.create(extend($searchbarEl.dataset(), {
+          el: searchbarEl
+        }));
+      },
+      destroy(vnode) {
+        const searchbarEl = vnode.elm;
+        if (searchbarEl.f7SearchbarNew && searchbarEl.f7SearchbarNew.destroy) {
+          searchbarEl.f7SearchbarNew.destroy();
+        }
+      }
+    }
+  }
+};

package/components/searchbar-new/searchbar.less

@@ -0,0 +1,331 @@
+/* === Searchbar New === */
+@import './searchbar-vars.less';
+
+.searchbar-new {
+  --f7-link-highlight-color: var(--f7-link-highlight-black);
+  .dark & {
+    --f7-link-highlight-color: var(--f7-link-highlight-white);
+  }
+  width: 100%;
+  position: relative;
+  z-index: 200;
+  height: var(--f7-searchbar-new-height);
+  background-color: var(--f7-searchbar-new-bars-bg-color);
+  input[type='search']::-webkit-search-decoration {
+    display: none;
+  }
+  .ios .subnavbar & {
+    background-color: transparent;
+    backdrop-filter: none;
+    .hairline-remove(bottom);
+  }
+  &.no-outline {
+    &:after {
+      display: none !important;
+    }
+  }
+
+  .hairline(bottom, var(--f7-searchbar-new-border-color, var(--f7-bars-border-color)));
+
+  .page > &:not(.searchbar-new-inline) {
+    z-index: 600;
+  }
+  input[type='text'],
+  input[type='search'] {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    display: block;
+    border: var(--f7-searchbar-new-input-border-width) solid
+      var(--f7-searchbar-new-input-border-color);
+    appearance: none;
+    font-family: inherit;
+    font-weight: normal;
+    color: var(--f7-searchbar-new-input-text-color);
+    font-size: var(--f7-searchbar-new-input-font-size);
+    background-color: var(--f7-searchbar-new-input-bg-color);
+    border-radius: var(--f7-searchbar-new-input-border-radius);
+    position: relative;
+    padding: 0;
+    .ltr({
+      padding-left: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+      padding-right: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-right, 0px));;
+    });
+    .rtl({
+      padding-left: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-right, 0px));;
+      padding-right: calc(var(--f7-searchbar-new-input-padding-horizontal) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+    });
+    &::placeholder {
+      color: var(--f7-searchbar-new-placeholder-color);
+      opacity: 1;
+    }
+  }
+  input::-webkit-search-cancel-button {
+    appearance: none;
+  }
+  .searchbar-new-input-wrap {
+    flex-shrink: 1;
+    width: 100%;
+    height: var(--f7-searchbar-new-input-height);
+    position: relative;
+  }
+  a {
+    color: var(--f7-searchbar-new-link-color, var(--f7-bars-link-color, var(--f7-theme-color)));
+  }
+  .page > &:not(.searchbar-new-inline) {
+    position: absolute;
+    left: 16px;
+    right: 16px;
+    width: auto;
+    top: 0;
+  }
+  .page-content &:not(.searchbar-new-inline) {
+    border-radius: var(--f7-searchbar-new-in-page-content-border-radius);
+    margin: var(--f7-searchbar-new-in-page-content-margin);
+    width: auto;
+    box-shadow: var(--f7-searchbar-new-in-page-content-box-shadow);
+    .searchbar-new-inner,
+    input[type='text'],
+    input[type='search'] {
+      border-radius: var(
+        --f7-searchbar-new-in-page-content-input-border-radius,
+        var(--f7-searchbar-new-input-border-radius)
+      );
+    }
+  }
+  .input-clear-button {
+    color: var(--f7-searchbar-new-input-clear-button-color, var(--f7-input-clear-button-color));
+  }
+}
+.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-searchbar-new-height);
+  position: absolute;
+  transition-duration: 300ms;
+  pointer-events: none;
+}
+.navbar-new .searchbar-new-expandable {
+  .hairline-remove(bottom);
+  background: transparent;
+}
+.navbar-new .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+  .searchbar-new-inner {
+    top: var(--f7-safe-area-top);
+    height: calc(100% - var(--f7-safe-area-top));
+  }
+}
+.toolbar .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-toolbar-height);
+}
+.subnavbar .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-subnavbar-height);
+}
+.tabbar-icons .searchbar-new.searchbar-new-expandable {
+  --f7-searchbar-new-expandable-size: var(--f7-tabbar-icons-height);
+}
+.searchbar-new-inner {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 calc(var(--f7-searchbar-new-inner-padding-right) + var(--f7-safe-area-right)) 0
+    calc(var(--f7-searchbar-new-inner-padding-left) + var(--f7-safe-area-left));
+}
+.searchbar-new-disable-button {
+  cursor: pointer;
+  pointer-events: none;
+  appearance: none;
+  background: none;
+  border: none;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  opacity: 0;
+}
+.searchbar-new-icon {
+  pointer-events: none;
+  background-position: center;
+  background-repeat: no-repeat;
+  &:after {
+    color: var(--f7-searchbar-new-search-icon-color);
+    .core-icons-font();
+  }
+}
+.searchbar-new-backdrop {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  opacity: 0;
+  pointer-events: none;
+  transition-duration: 300ms;
+  transform: translate3d(0, 0, 0);
+  background: var(--f7-searchbar-new-backdrop-bg-color);
+  &.searchbar-new-backdrop-in {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .page-content > & {
+    position: fixed;
+  }
+}
+.searchbar-new-found {
+  display: none;
+}
+.searchbar-new-not-found {
+  display: none;
+}
+.hidden-by-searchbar-new {
+  &,
+  .list &,
+  .list.li&,
+  .list li& {
+    display: none !important;
+  }
+}
+.navbar-new.with-searchbar-new-expandable-enabled-no-transition,
+.navbar-new.with-searchbar-new-expandable-enabled-no-transition {
+  --f7-navbar-new-large-collapse-progress: 1;
+}
+.navbar-new.with-searchbar-new-expandable-enabled,
+.navbar-new.with-searchbar-new-expandable-enabled {
+  --f7-navbar-new-large-collapse-progress: 1;
+  .navbar-new-bg,
+  .title-large,
+  .title-large-text {
+    transition-duration: 300ms;
+  }
+}
+.navbar-new.with-searchbar-new-expandable-closing,
+.navbar-new.with-searchbar-new-expandable-closing {
+  .navbar-new-bg,
+  .title-large,
+  .title-large-text {
+    transition-duration: 300ms;
+  }
+}
+
+.page-content.with-searchbar-new-expandable-enabled {
+  height: calc(100% + var(--f7-navbar-new-large-title-height));
+  transform: translateY(calc(-1 * var(--f7-navbar-new-large-title-height)));
+  transition-duration: 300ms;
+  transition-property: transform;
+}
+.page-content.with-searchbar-new-expandable-closing {
+  transition-duration: 300ms;
+}
+
+// Relation with page
+.navbar-new ~ .page:not(.no-navbar) > .searchbar-new,
+.page > .navbar-new ~ .searchbar-new {
+  top: calc(var(--f7-navbar-new-height) + var(--f7-safe-area-top));
+}
+
+.navbar-new ~ .page-with-navbar-new-large:not(.no-navbar) .searchbar-new,
+.page-with-navbar-new-large .navbar-new ~ .searchbar-new,
+.page-with-navbar-new-large .navbar-new ~ * .searchbar-new {
+  top: calc(
+    var(--f7-navbar-new-height) + var(--f7-navbar-new-large-title-height) + var(--f7-safe-area-top)
+  );
+  transform: translate3d(
+    0,
+    calc(
+      -1 * var(--f7-navbar-new-large-collapse-progress) * var(--f7-navbar-new-large-title-height)
+    ),
+    0
+  );
+}
+.page-with-navbar-new-large .page-content .searchbar-new {
+  top: 0;
+  transform: none;
+}
+
+.searchbar-new ~ * {
+  --f7-page-searchbar-new-offset: var(--f7-searchbar-new-height);
+}
+
+// Toolbar
+.page > .toolbar-top,
+.ios .page > .toolbar-top-ios,
+.md .page > .toolbar-top-md {
+  ~ .searchbar-new {
+    top: var(--f7-toolbar-height);
+  }
+}
+.page > .tabbar-icons.toolbar-top,
+.ios .page > .tabbar-icons.toolbar-top-ios,
+.md .page > .tabbar-icons.toolbar-top-md {
+  ~ .searchbar-new {
+    top: var(--f7-tabbar-icons-height);
+  }
+}
+.page > .navbar-new ~ .toolbar-top,
+.ios .page > .navbar-new ~ .toolbar-top-ios,
+.md .page > .navbar-new ~ .toolbar-top-md {
+  ~ .searchbar-new {
+    top: calc(var(--f7-navbar-new-height) + var(--f7-toolbar-height) + var(--f7-safe-area-top));
+  }
+}
+.page > .navbar-new ~ .tabbar-icons.toolbar-top,
+.ios .page > .navbar-new ~ .tabbar-icons.toolbar-top-ios,
+.md .page > .navbar-new ~ .tabbar-icons.toolbar-top-md {
+  ~ .searchbar-new {
+    top: calc(
+      var(--f7-navbar-new-height) + var(--f7-tabbar-icons-height) + var(--f7-safe-area-top)
+    );
+  }
+}
+
+.searchbar-new.searchbar-new-inline {
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  background-image: none;
+
+  &:after,
+  &:before {
+    display: none !important;
+  }
+  .searchbar-new-input-wrap {
+    height: var(--f7-searchbar-new-inline-input-height, var(--f7-searchbar-new-input-height));
+  }
+  .searchbar-new-inner {
+    padding: 0;
+    position: static;
+    width: auto;
+    height: auto;
+  }
+  input[type='text'],
+  input[type='search'] {
+    font-size: var(
+      --f7-searchbar-new-inline-input-font-size,
+      var(--f7-searchbar-new-input-font-size)
+    );
+    border-radius: var(
+      --f7-searchbar-new-inline-input-border-radius,
+      var(--f7-searchbar-new-input-border-radius)
+    );
+    .ltr({
+      padding-left: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+      padding-right: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-right, 0px));;
+    });
+    .rtl({
+      padding-left: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-right, 0px));;
+      padding-right: calc(var(--f7-searchbar-new-inline-input-padding-horizontal, var(--f7-searchbar-new-input-padding-horizontal)) + var(--f7-searchbar-new-input-extra-padding-left, 0px));
+    });
+  }
+}
+
+.if-ios-theme({
+  @import './searchbar-ios.less';
+});
+.if-md-theme({
+  @import './searchbar-md.less';
+});

package/components/swipeout/swipeout-ios.less

@@ -1,2 +1,39 @@
 .ios {
+  .swipeout-actions-right {
+    right: 0%;
+  }
+  .swipeout-actions-left {
+    left: 0%;
+  }
+  .swipeout-actions-left,
+  .swipeout-actions-right {
+    padding: 0 10px;
+    gap: 10px;
+    align-items: center;
+    > a,
+    > button,
+    > span,
+    > div {
+      transform: scale(0);
+      padding: var(--f7-swipeout-button-padding-vertical)
+        var(--f7-swipeout-button-padding-horizontal);
+    }
+  }
+  .swipeout-opened,
+  .swipeout-active {
+    .swipeout-content {
+      background-color: var(--f7-swipeout-active-bg-color);
+      border-radius: var(--f7-swipeout-active-border-radius);
+    }
+    .item-content {
+      border-radius: var(--f7-swipeout-active-border-radius);
+    }
+    .swipeout-content .item-inner::after {
+      opacity: 0;
+    }
+  }
+  .swipeout-overswipe {
+    transition-duration: 200ms;
+    transition-property: transform, left, width, margin-left, margin-right;
+  }
 }

package/components/swipeout/swipeout-md.less

@@ -1,2 +1,58 @@
 .md {
+  .swipeout-actions-left,
+  .swipeout-actions-right {
+    > a,
+    > button,
+    > span,
+    > div {
+      &: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-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-overswipe {
+    transition-property: left;
+  }
 }

package/components/swipeout/swipeout-rtl.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-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}