modo-mobile/lib/toast/style/index.less

A mobile UI toolkit, based on React

@import "../../style/themes/default.less";

@toastPrefixCls: m-toast;

.@{toastPrefixCls} {
  position: relative;
  z-index: @zindex-toast;

  &.@{toastPrefixCls}-icon {
    .@{toastPrefixCls}-content {
      span {
        padding-left: 6px;
      }
    }
  }

  &-wrapper {
    position: relative;
    display: inline-block;
    text-align: left;
    padding: 12px 16px;
    font-size: 14px;
    color: #ccc;
    background-color: fade(#000, 80);
    box-sizing: content-box;
    border-radius: @border-radius-base;

    i {
      font-size: 20px;
    }

    svg {
      padding: 5px 0;
    }
  }

  &-content {
    display: flex;
    align-items: center;
  }

  .m-popup {
    .m-popup-box {
      width: 60%;
      text-align: center;
      overflow: visible;
    }
    .m-popup-mask {
      background: transparent;
    }
  }

  &.bottom {
    .m-popup.center .m-popup-box {
      top: auto;
      bottom: 50px;
    }
  }

  &.top {
    .m-popup.center .m-popup-box {
      top: 50px;
      bottom: auto;
    }
  }
}