/* === Swipeout === */ .swipeout { overflow: hidden; transform-style: preserve-3d; } .swipeout-deleting { transition-duration: 300ms; .swipeout-content { transform: translateX(-100%); } } .swipeout-transitioning { .swipeout-content, .swipeout-actions-right a, .swipeout-actions-left a, .swipeout-overswipe { transition-duration: 300ms; transition-property: transform, left; } } .swipeout-content { position: relative; z-index: 10; } .swipeout-overswipe { transition-duration: 200ms; transition-property: left; } .swipeout-actions-left, .swipeout-actions-right { position: absolute; top: 0; height: 100%; display: flex; direction: ltr; > a, > button, > span, > div { color: #fff; background: #c7c7cc; display: flex; align-items: center; position: relative; left: 0; &: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-right { right: 0%; transform: translateX(100%); > a, > button, > span, > div { &:after { left: 100%; margin-left: -1px; } } } .swipeout-actions-left { left: 0%; transform: translateX(-100%); > a, > button, > span, > div { &:after { right: 100%; margin-right: -1px; } } } & when (@includeIosTheme) { @import url('./swipeout-ios.less'); } & when (@includeMdTheme) { @import url('./swipeout-md.less'); }