@pi0/framework7/src/components/toast/toast.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Toast === */
.toast {
  transition-duration: 450ms;
  transition-property: transform, opacity;
  position: absolute;
  width: 100%;
  max-width: 568px;
  left: 0;
  z-index: 20000;
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;

  .toast-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }
  .toast-text {
    line-height: 20px;
    flex-shrink: 1;
    min-width: 0;
  }
  .toast-button {
    flex-shrink: 0;
  }
  &.toast-with-icon {
    .toast-content {
      display: block;
      text-align: center;
    }
    .toast-text {
      text-align: center;
    }
    .toast-icon .f7-icons {
      font-size: 50px;
      width: 50px;
      height: 50px;
    }
    .toast-icon .material-icons {
      font-size: 48px;
      width: 48px;
      height: 48px;
    }
  }
  &.toast-center {
    top: 50%;
    left: 50%;
    width: auto;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    &.modal-in {
      transform: translate3d(-50%, -50%, 0);
      opacity: 1;
    }
  }
  &.toast-top {
    top: 0;
    transform: translate3d(0, -100%, 0);
    &.modal-in {
      transform: translate3d(0, 0%, 0);
      opacity: 1;
    }
  }
  &.toast-bottom {
    bottom: 0;
    transform: translate3d(0, 100%, 0);
    &.modal-in {
      transform: translate3d(0, 0%, 0);
      opacity: 1;
    }
  }

  @media (min-width: 569px) {
    left: 50%;
    margin-left: -568px / 2;
    &.toast-center {
      margin-left: 0;
    }
  }
  @media (min-width: 1024px) {
    opacity: 0;
    margin-left: auto;
    width: auto;
    &.toast-center {
      margin-left: 0;
    }
  }
}

html.with-statusbar {
  &.device-ios .toast-top, &.ios:not(.device-ios):not(.device-android) .toast-top {
    margin-top: 20px;
  }
  &.device-android .toast-top, &.md:not(.device-ios):not(.device-android) .toast-top {
    margin-top: 24px;
  }
}

& when (@include-ios-theme) {
  @import url('./toast-ios.less');
}
& when (@include-md-theme) {
  @import url('./toast-md.less');
}