framework7/lazy-components/swipeout.css

Full featured mobile HTML framework for building iOS & Android apps

.swipeout{overflow:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.swipeout-deleting{-webkit-transition-duration:.3s;transition-duration:.3s}.swipeout-deleting .swipeout-content{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.swipeout-transitioning .swipeout-actions-left a,.swipeout-transitioning .swipeout-actions-right a,.swipeout-transitioning .swipeout-content,.swipeout-transitioning .swipeout-overswipe{-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:left,-webkit-transform;transition-property:left,-webkit-transform;transition-property:transform,left;transition-property:transform,left,-webkit-transform}.swipeout-content{position:relative;z-index:10}.swipeout-overswipe{-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:left;transition-property:left}.swipeout-actions-left,.swipeout-actions-right{position:absolute;top:0;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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:#fff;background:#c7c7cc;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;position:relative;left:0}.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;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);pointer-events:none}.swipeout-actions-right{right:0%;-webkit-transform:translateX(100%);transform:translateX(100%)}.swipeout-actions-right>a:after,.swipeout-actions-right>button:after,.swipeout-actions-right>div:after,.swipeout-actions-right>span:after{left:100%;margin-left:-1px}.swipeout-actions-left{left:0%;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.swipeout-actions-left>a:after,.swipeout-actions-left>button:after,.swipeout-actions-left>div:after,.swipeout-actions-left>span:after{right:100%;margin-right:-1px}.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:0 30px;color:#fff}.ios .swipeout-actions-left .swipeout-delete,.ios .swipeout-actions-right .swipeout-delete{background:#ff3b30}.ios .swipeout-actions-left>a.color-red,.ios .swipeout-actions-left>button.color-red,.ios .swipeout-actions-left>div.color-red,.ios .swipeout-actions-left>span.color-red,.ios .swipeout-actions-right>a.color-red,.ios .swipeout-actions-right>button.color-red,.ios .swipeout-actions-right>div.color-red,.ios .swipeout-actions-right>span.color-red{background-color:#ff3b30}.ios .swipeout-actions-left>a.color-green,.ios .swipeout-actions-left>button.color-green,.ios .swipeout-actions-left>div.color-green,.ios .swipeout-actions-left>span.color-green,.ios .swipeout-actions-right>a.color-green,.ios .swipeout-actions-right>button.color-green,.ios .swipeout-actions-right>div.color-green,.ios .swipeout-actions-right>span.color-green{background-color:#4cd964}.ios .swipeout-actions-left>a.color-blue,.ios .swipeout-actions-left>button.color-blue,.ios .swipeout-actions-left>div.color-blue,.ios .swipeout-actions-left>span.color-blue,.ios .swipeout-actions-right>a.color-blue,.ios .swipeout-actions-right>button.color-blue,.ios .swipeout-actions-right>div.color-blue,.ios .swipeout-actions-right>span.color-blue{background-color:#007aff}.ios .swipeout-actions-left>a.color-pink,.ios .swipeout-actions-left>button.color-pink,.ios .swipeout-actions-left>div.color-pink,.ios .swipeout-actions-left>span.color-pink,.ios .swipeout-actions-right>a.color-pink,.ios .swipeout-actions-right>button.color-pink,.ios .swipeout-actions-right>div.color-pink,.ios .swipeout-actions-right>span.color-pink{background-color:#ff2d55}.ios .swipeout-actions-left>a.color-yellow,.ios .swipeout-actions-left>button.color-yellow,.ios .swipeout-actions-left>div.color-yellow,.ios .swipeout-actions-left>span.color-yellow,.ios .swipeout-actions-right>a.color-yellow,.ios .swipeout-actions-right>button.color-yellow,.ios .swipeout-actions-right>div.color-yellow,.ios .swipeout-actions-right>span.color-yellow{background-color:#fc0}.ios .swipeout-actions-left>a.color-orange,.ios .swipeout-actions-left>button.color-orange,.ios .swipeout-actions-left>div.color-orange,.ios .swipeout-actions-left>span.color-orange,.ios .swipeout-actions-right>a.color-orange,.ios .swipeout-actions-right>button.color-orange,.ios .swipeout-actions-right>div.color-orange,.ios .swipeout-actions-right>span.color-orange{background-color:#ff9500}.ios .swipeout-actions-left>a.color-gray,.ios .swipeout-actions-left>button.color-gray,.ios .swipeout-actions-left>div.color-gray,.ios .swipeout-actions-left>span.color-gray,.ios .swipeout-actions-right>a.color-gray,.ios .swipeout-actions-right>button.color-gray,.ios .swipeout-actions-right>div.color-gray,.ios .swipeout-actions-right>span.color-gray{background-color:#8e8e93}.ios .swipeout-actions-left>a.color-white,.ios .swipeout-actions-left>button.color-white,.ios .swipeout-actions-left>div.color-white,.ios .swipeout-actions-left>span.color-white,.ios .swipeout-actions-right>a.color-white,.ios .swipeout-actions-right>button.color-white,.ios .swipeout-actions-right>div.color-white,.ios .swipeout-actions-right>span.color-white{background-color:#fff}.ios .swipeout-actions-left>a.color-black,.ios .swipeout-actions-left>button.color-black,.ios .swipeout-actions-left>div.color-black,.ios .swipeout-actions-left>span.color-black,.ios .swipeout-actions-right>a.color-black,.ios .swipeout-actions-right>button.color-black,.ios .swipeout-actions-right>div.color-black,.ios .swipeout-actions-right>span.color-black{background-color:#000}.md .swipeout-actions-left>a,.md .swipeout-actions-left>button,.md .swipeout-actions-left>div,.md .swipeout-actions-left>span,.md .swipeout-actions-right>a,.md .swipeout-actions-right>button,.md .swipeout-actions-right>div,.md .swipeout-actions-right>span{padding:0 24px;color:#fff}.md .swipeout-actions-left .swipeout-delete,.md .swipeout-actions-right .swipeout-delete{background:#f44336}.md .swipeout-actions-left>a.color-red,.md .swipeout-actions-left>button.color-red,.md .swipeout-actions-left>div.color-red,.md .swipeout-actions-left>span.color-red,.md .swipeout-actions-right>a.color-red,.md .swipeout-actions-right>button.color-red,.md .swipeout-actions-right>div.color-red,.md .swipeout-actions-right>span.color-red{background-color:#f44336}.md .swipeout-actions-left>a.color-green,.md .swipeout-actions-left>button.color-green,.md .swipeout-actions-left>div.color-green,.md .swipeout-actions-left>span.color-green,.md .swipeout-actions-right>a.color-green,.md .swipeout-actions-right>button.color-green,.md .swipeout-actions-right>div.color-green,.md .swipeout-actions-right>span.color-green{background-color:#4caf50}.md .swipeout-actions-left>a.color-blue,.md .swipeout-actions-left>button.color-blue,.md .swipeout-actions-left>div.color-blue,.md .swipeout-actions-left>span.color-blue,.md .swipeout-actions-right>a.color-blue,.md .swipeout-actions-right>button.color-blue,.md .swipeout-actions-right>div.color-blue,.md .swipeout-actions-right>span.color-blue{background-color:#2196f3}.md .swipeout-actions-left>a.color-pink,.md .swipeout-actions-left>button.color-pink,.md .swipeout-actions-left>div.color-pink,.md .swipeout-actions-left>span.color-pink,.md .swipeout-actions-right>a.color-pink,.md .swipeout-actions-right>button.color-pink,.md .swipeout-actions-right>div.color-pink,.md .swipeout-actions-right>span.color-pink{background-color:#e91e63}.md .swipeout-actions-left>a.color-yellow,.md .swipeout-actions-left>button.color-yellow,.md .swipeout-actions-left>div.color-yellow,.md .swipeout-actions-left>span.color-yellow,.md .swipeout-actions-right>a.color-yellow,.md .swipeout-actions-right>button.color-yellow,.md .swipeout-actions-right>div.color-yellow,.md .swipeout-actions-right>span.color-yellow{background-color:#ffeb3b}.md .swipeout-actions-left>a.color-orange,.md .swipeout-actions-left>button.color-orange,.md .swipeout-actions-left>div.color-orange,.md .swipeout-actions-left>span.color-orange,.md .swipeout-actions-right>a.color-orange,.md .swipeout-actions-right>button.color-orange,.md .swipeout-actions-right>div.color-orange,.md .swipeout-actions-right>span.color-orange{background-color:#ff9800}.md .swipeout-actions-left>a.color-gray,.md .swipeout-actions-left>button.color-gray,.md .swipeout-actions-left>div.color-gray,.md .swipeout-actions-left>span.color-gray,.md .swipeout-actions-right>a.color-gray,.md .swipeout-actions-right>button.color-gray,.md .swipeout-actions-right>div.color-gray,.md .swipeout-actions-right>span.color-gray{background-color:#9e9e9e}.md .swipeout-actions-left>a.color-white,.md .swipeout-actions-left>button.color-white,.md .swipeout-actions-left>div.color-white,.md .swipeout-actions-left>span.color-white,.md .swipeout-actions-right>a.color-white,.md .swipeout-actions-right>button.color-white,.md .swipeout-actions-right>div.color-white,.md .swipeout-actions-right>span.color-white{background-color:#fff}.md .swipeout-actions-left>a.color-black,.md .swipeout-actions-left>button.color-black,.md .swipeout-actions-left>div.color-black,.md .swipeout-actions-left>span.color-black,.md .swipeout-actions-right>a.color-black,.md .swipeout-actions-right>button.color-black,.md .swipeout-actions-right>div.color-black,.md .swipeout-actions-right>span.color-black{background-color:#000}