@ionic/core/dist/collection/components/item-sliding/item-sliding.css

Base components for Ionic

/**
 * Convert a font size to a dynamic font size.
 * Fonts that participate in Dynamic Type should use
 * dynamic font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param unit (optional) - The unit to convert to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a maximum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * a minimum font size.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * Convert a font size to a dynamic font size but impose
 * maximum and minimum font sizes.
 * @param size - The initial font size including the unit (i.e. px or pt)
 * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
 * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
 * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
 * convert to a unit other than $baselineUnit.
 */
/**
 * A heuristic that applies CSS to tablet
 * viewports.
 *
 * Usage:
 * @include tablet-viewport() {
 *   :host {
 *     background-color: green;
 *   }
 * }
 */
/**
 * A heuristic that applies CSS to mobile
 * viewports (i.e. phones, not tablets).
 *
 * Usage:
 * @include mobile-viewport() {
 *   :host {
 *     background-color: blue;
 *   }
 * }
 */
ion-item-sliding {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
}

ion-item-sliding .item {
  user-select: none;
}

.item-sliding-active-slide .item {
  position: relative;
  transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
  opacity: 1;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

.item-sliding-closing ion-item-options {
  pointer-events: none;
}

.item-sliding-active-swipe-end .item-options-end .item-option-expandable {
  /* stylelint-disable-next-line property-disallowed-list */
  padding-left: 100%;
  order: 1;
  transition-duration: 0.6s;
  transition-property: padding-left;
}
:host-context([dir=rtl]) .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
  order: -1;
}

[dir=rtl] .item-sliding-active-swipe-end .item-options-end .item-option-expandable {
  order: -1;
}

@supports selector(:dir(rtl)) {
  .item-sliding-active-swipe-end .item-options-end .item-option-expandable:dir(rtl) {
    order: -1;
  }
}

.item-sliding-active-swipe-start .item-options-start .item-option-expandable {
  /* stylelint-disable-next-line property-disallowed-list */
  padding-right: 100%;
  order: -1;
  transition-duration: 0.6s;
  transition-property: padding-right;
}
:host-context([dir=rtl]) .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
  order: 1;
}

[dir=rtl] .item-sliding-active-swipe-start .item-options-start .item-option-expandable {
  order: 1;
}

@supports selector(:dir(rtl)) {
  .item-sliding-active-swipe-start .item-options-start .item-option-expandable:dir(rtl) {
    order: 1;
  }
}