framework7/components/toast/toast.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Toast === */
.toast {
  transition-property: transform, opacity;
  position: absolute;
  max-width: 568px;
  z-index: 20000;
  color: #fff;
  font-size: 14px;
  box-sizing: border-box;
  &.modal-in {
    opacity: 1;
  }
  .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%;
    opacity: 0;
  }

  @media (min-width: 1024px) {
    opacity: 0;
  }
}

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

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