framework7/components/swipeout/swipeout.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Swipeout === */
@import './swipeout-vars.less';

.swipeout {
  overflow: hidden;
  transform-style: preserve-3d;
}
.swipeout-deleting {
  transition-duration: 300ms;
  .swipeout-content {
    transform: translateX(-100%);
  }
}
.swipeout-transitioning {
  .swipeout-content,
  .swipeout-content .item-inner::after {
    transition-duration: 300ms;
    transition-property: transform, left, background-color, border-radius, opacity;
  }
  .swipeout-actions-right a,
  .swipeout-actions-left a,
  .swipeout-overswipe {
    transition-duration: 300ms;
    transition-property: transform, left, width, margin-left, margin-right;
  }
  &:not(.swipeout-opened) {
    .swipeout-content {
      transition-delay: 0ms, 0ms, 300ms, 300ms, 0ms;
    }
  }
}
.list li:has(+ li:is(.swipeout-opened, .swipeout-active)) {
  .item-inner::after {
    opacity: 0;
    transition-duration: 300ms;
  }
}
.swipeout-content {
  position: relative;
  z-index: 10;
}
.swipeout-overswipe {
  transition-duration: 200ms;
}
.swipeout-actions-left,
.swipeout-actions-right {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  direction: ltr;
  > a,
  > button,
  > span,
  > div {
    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-delete {
    background: var(--f7-swipeout-delete-button-bg-color);
  }
}

.swipeout-actions-left,
.swipeout-actions-right {
  [class*='color-'] {
    --f7-swipeout-button-bg-color: var(--f7-theme-color);
  }
}
.if-ios-theme({
  @import './swipeout-ios.less';
});
.if-md-theme({
  @import './swipeout-md.less';
});