ionic-framework/core/src/components/action-sheet/action-sheet.ios.scss

@import "./action-sheet";
@import "./action-sheet.ios.vars";

// iOS Action Sheet
// ---------------------------------------------------

:host {
  --background: #{$action-sheet-ios-background-color};
  --backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
  --button-background: #{$action-sheet-ios-button-background};
  --button-background-activated: #{$action-sheet-ios-button-background-activated};
  --button-background-activated-opacity: .08;
  --button-background-hover: currentColor;
  --button-background-hover-opacity: .04;
  --button-background-focused: currentColor;
  --button-background-focused-opacity: .12;
  --button-background-selected: #{$action-sheet-ios-button-background-selected};
  --button-background-selected-opacity: 1;
  --button-color: #{$action-sheet-ios-button-text-color};
  --button-color-disabled: #{$text-color-step-150};
  --color: #{$action-sheet-ios-title-color};

  text-align: $action-sheet-ios-text-align;
}

// iOS Action Sheet Wrapper
// ---------------------------------------------------

.action-sheet-wrapper {
  @include margin(var(--ion-safe-area-top, 0), auto, null, auto);
  /**
   * Bottom safe area is applied as padding so that it impacts the bounding box.
   * When the action sheet is shown/hidden, this element is transformed by translating
   * 100% of its height. This translation needs to include the bottom safe area
   * otherwise part of the action sheet will still be visible at the end of
   * the show transition.
   *
   * If this code is changed, reviewers should verify that the action
   * sheet still translates out of the viewport completely when the bottom
   * safe area is a positive value.
   */
  @include padding(null, null, var(--ion-safe-area-bottom, 0), null);

  // Using content-box to increase the height of the action sheet
  // wrapper by the bottom padding (safe area) to animate the
  // action sheet completely off the screen when safe area is set.
  box-sizing: content-box;
}

// iOS Action Sheet Container
// ---------------------------------------------------

.action-sheet-container {
  @include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
}


// iOS Action Sheet Group
// ---------------------------------------------------

.action-sheet-group {
  @include border-radius($action-sheet-ios-border-radius);
  @include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
}

.action-sheet-group:first-child {
  @include margin($action-sheet-ios-group-margin-top, null, null, null);
}

.action-sheet-group:last-child {
  @include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
}


// iOS Translucent Action Sheet
// ---------------------------------------------------

@supports (backdrop-filter: blur(0)) {
  :host(.action-sheet-translucent) .action-sheet-group {
    background-color: transparent;
    backdrop-filter: $action-sheet-ios-group-translucent-filter;
  }

  :host(.action-sheet-translucent) .action-sheet-title,
  :host(.action-sheet-translucent) .action-sheet-button {
    background-color: transparent;
    background-image:
      linear-gradient(0deg, $action-sheet-ios-translucent-background-color, $action-sheet-ios-translucent-background-color 100%),
      linear-gradient(0deg, $action-sheet-ios-translucent-border-color, $action-sheet-ios-translucent-border-color 50%, $action-sheet-ios-translucent-background-color 50%);
    background-repeat: no-repeat;

    /* stylelint-disable-next-line all */
    background-position: top, bottom;

    background-size: 100% calc(100% - 1px), 100% 1px;
    backdrop-filter: $action-sheet-ios-button-translucent-filter;
  }

  :host(.action-sheet-translucent) .action-sheet-button.ion-activated {
    background-color: $action-sheet-ios-translucent-background-color-activated;
    background-image: none;
  }

  :host(.action-sheet-translucent) .action-sheet-cancel {
    background: var(--button-background-selected);
  }
}

// iOS Action Sheet Border
// ---------------------------------------------------
// Border is made with a linear gradient in order
// to get the proper color and iOS blur effect

.action-sheet-title {
  background: $action-sheet-ios-button-background;
}


// iOS Action Sheet Title
// ---------------------------------------------------

.action-sheet-title {
  @include padding($action-sheet-ios-title-padding-top, $action-sheet-ios-title-padding-end, $action-sheet-ios-title-padding-bottom, $action-sheet-ios-title-padding-start);

  color: var(--color, $action-sheet-ios-title-color);

  font-size: $action-sheet-ios-title-font-size;
  font-weight: $action-sheet-ios-title-font-weight;

  text-align: $action-sheet-ios-text-align;
}

.action-sheet-title.action-sheet-has-sub-title {
  font-weight: $action-sheet-ios-title-with-sub-title-font-weight;
}

.action-sheet-sub-title {
  @include padding($action-sheet-ios-sub-title-padding-top, $action-sheet-ios-sub-title-padding-end, $action-sheet-ios-sub-title-padding-bottom, $action-sheet-ios-sub-title-padding-start);

  font-size: $action-sheet-ios-sub-title-font-size;

  font-weight: $action-sheet-ios-title-font-weight;
}


// iOS Action Sheet Buttons
// ---------------------------------------------------

.action-sheet-button {
  @include padding($action-sheet-ios-button-padding);

  min-height: $action-sheet-ios-button-height;

  font-size: $action-sheet-ios-button-font-size;

  contain: content;
}

.action-sheet-button .action-sheet-icon {
  @include margin-horizontal(null, $action-sheet-ios-button-icon-padding-right);

  font-size: $action-sheet-ios-button-icon-font-size;

  pointer-events: none;
}

.action-sheet-button:last-child {
  background-image: none;
}

.action-sheet-selected {
  font-weight: bold;
}

.action-sheet-cancel {
  font-weight: $action-sheet-ios-button-cancel-font-weight;

  &::after {
    background: var(--button-background-selected);

    opacity: var(--button-background-selected-opacity);
  }
}

// iOS Action Sheet Button: Destructive
// ---------------------------------------------------

.action-sheet-destructive,
.action-sheet-destructive.ion-activated,
.action-sheet-destructive.ion-focused {
  color: $action-sheet-ios-button-destructive-text-color;
}

@media (any-hover: hover) {
  .action-sheet-destructive:hover {
    color: $action-sheet-ios-button-destructive-text-color;
  }
}