core/src/components/toast/toast.ios.scss - main - githubmirror/ionic-framework

core/src/components/toast/toast.ios.scss

87 строк2 KB

Liam DeBeasi

refactor(toast): md animation uses transform (#28392)

23 окт 2023, 17:44

23 окт 2023, 17:440e2797b

@import "./toast";
@import "./toast.ios.vars";

// iOS Toast
// --------------------------------------------------

:host {
  --background: #{$toast-ios-background-color};
  --border-radius: #{$toast-ios-border-radius};
  --button-color: #{$toast-ios-button-color};
  --color: #{$toast-ios-title-color};
  --max-width: #{$toast-max-width};
  --max-height: #{$toast-ios-max-height};
  --start: 10px;
  --end: 10px;

  font-size: $toast-ios-content-font-size;
}

.toast-wrapper {
  @include margin(auto);

  display: block;
  position: absolute;

  z-index: $z-index-overlay-wrapper;
}

@supports (backdrop-filter: blur(0)) {
  :host(.toast-translucent) .toast-wrapper {
    background: $toast-ios-translucent-background-color;
    backdrop-filter: $toast-ios-translucent-filter;
  }

  :host(.ion-color.toast-translucent) .toast-wrapper {
    background: #{current-color(base, $toast-ios-translucent-background-color-alpha)};
  }
}

.toast-wrapper.toast-middle {
  opacity: .01;
}

.toast-content {
  @include padding($toast-ios-content-padding-top, $toast-ios-content-padding-end, $toast-ios-content-padding-bottom, $toast-ios-content-padding-start);
}

.toast-header {
  margin-bottom: $toast-ios-header-margin-bottom;

  font-weight: $toast-ios-header-font-weight;
}

// iOS Toast Button
// --------------------------------------------------

.toast-button {
  @include padding($toast-ios-button-padding-top, $toast-ios-button-padding-end, $toast-ios-button-padding-bottom, $toast-ios-button-padding-start);

  min-height: $toast-ios-button-min-height;

  transition: background-color, opacity 100ms linear;

  border: 0;

  background-color: $toast-ios-button-background-color;

  font-family: var(--ion-font-family);
  font-size: $toast-ios-button-font-size;
  font-weight: $toast-ios-button-font-weight;

  overflow: hidden;
}

.toast-button.ion-activated {
  opacity: $toast-ios-button-opacity-activated;
}


// iOS Toast Button: Hover
// --------------------------------------------------

@media (any-hover: hover) {
  .toast-button:hover {
    opacity: .6;
  }
}