framework7/components/swipeout/swipeout.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-swipeout-delete-button-bg-color:#ff3b30;--f7-swipeout-button-text-color:#fff;--f7-swipeout-button-bg-color:#00000038}:root .dark,:root.dark{--f7-swipeout-button-bg-color:#ffffff8c}.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,.3s,.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{direction:ltr;display:flex;height:100%;position:absolute;top:0}.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{align-items:center;background:var(--f7-swipeout-button-bg-color);border-radius:var(--f7-swipeout-button-border-radius);box-sizing:border-box;color:var(--f7-swipeout-button-text-color);display:flex;font-size:var(--f7-swipeout-button-font-size);font-weight:var(--f7-swipeout-button-font-weight);left:0;padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);position:relative}.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{align-items:center;gap:10px;padding:0 10px}.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{padding:var(--f7-swipeout-button-padding-vertical) var(--f7-swipeout-button-padding-horizontal);transform:scale(0)}.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{background:inherit;content:"";height:100%;pointer-events:none;position:absolute;top:0;transform:translateZ(0);width:600%;z-index:-1}.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}