@pi0/framework7/src/components/swipeout/swipeout.less

Full featured mobile HTML framework for building iOS & Android apps

/* === 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;
    }
  }
}
.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 (@include-ios-theme) {
  @import url('./swipeout-ios.less');
}
& when (@include-md-theme) {
  @import url('./swipeout-md.less');
}