core/src/components/item-options/item-options.scss - main - githubmirror/ionic-framework

core/src/components/item-options/item-options.scss

90 строк2 KB

Liam DeBeasi

feat(a11y): add dynamic font scaling (#28314)

11 окт 2023, 00:38

11 окт 2023, 00:38f806781

@import "./item-options.vars";

// Item Options
// --------------------------------------------------

ion-item-options {
  @include multi-dir() {
    /* stylelint-disable property-disallowed-list */
    top: 0;
    right: 0;
    /* stylelint-enable property-disallowed-list */
  }

  @include ltr() {
    justify-content: flex-end;
  }

  @include rtl() {
    justify-content: flex-start;

    &:not(.item-options-end) {
      /* stylelint-disable property-disallowed-list */
      right: auto;
      left: 0;
      /* stylelint-enable property-disallowed-list */

      justify-content: flex-end;
    }
  }

  display: none;
  position: absolute;

  height: 100%;

  user-select: none;
  z-index: $z-index-item-options;
}

.item-options-start {
  @include multi-dir() {
    /* stylelint-disable property-disallowed-list */
    right: auto;
    left: 0;
    /* stylelint-enable property-disallowed-list */
  }

  @include ltr() {
    justify-content: flex-start;
  }

  @include rtl() {
    justify-content: flex-end;
  }
}

/* stylelint-disable property-disallowed-list */
[dir="ltr"] .item-options-start ion-item-option:first-child,
[dir="rtl"] .item-options-start ion-item-option:last-child {
  padding-left: var(--ion-safe-area-left);
}

[dir="ltr"] .item-options-end ion-item-option:last-child,
[dir="rtl"] .item-options-end ion-item-option:first-child {
  padding-right: var(--ion-safe-area-right);
}
/* stylelint-enable property-disallowed-list */

.item-sliding-active-slide {
  @include rtl() {
    &.item-sliding-active-options-start ion-item-options:not(.item-options-end) {
      width: 100%;

      visibility: visible;
    }
  }

  ion-item-options {
    display: flex;

    visibility: hidden;
  }

  &.item-sliding-active-options-start .item-options-start,
  &.item-sliding-active-options-end ion-item-options:not(.item-options-start) {
    width: 100%;

    visibility: visible;
  }
}