yun-ui/packages/style/stylesheets/toast.less

Mobile UI Components Library for Vue.js by yunzhijia.

@import "var";

//垂直居中
.middleCenter {
  top: 50%;
  left: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  -webkit-transform-origin: 50% 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform-origin: 50% 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform-origin: 50% 50%;
  -ms-transform: translate(-50%, -50%);
}

.@{uiName} {
  &-toast-container {
    position: fixed;
    display: block;
    width: @toastSize;
    padding: @toastPadding 0;
    .middleCenter;
    z-index: @zIndexNormal;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
    background-color: fade(@toastBG, 80%);
    border-radius: @toastBigRadius;
  }
  //loading icon
  &-toast-icon {
    position: relative;
    width: @toastIconWidth;
    height: @toastIconHeight;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  //loading文字内容显示区域
  &-toast-content {
    padding-top:@toastPadding;
    font-size: @toastFontSize;
    line-height: @toastLineHeight;
  }
}

.toast-border-radius {
  width: auto;
  border-radius: @toastRadius;
  padding: @toastPadding-top @toastPadding*2;
  .@{uiName}-toast-content{
    padding-top:0;
  }
}

.waiting-icon {
  width: @toastIconWaitingWidth;
  height: @toastIconWaitingHeight;
}
.is-loading-bottom {
  width: auto;
  top: auto;
  padding: @toastPadding-top @toastPadding*2;
  bottom: @toastPadding * 2;
  .@{uiName}-toast-content{
    padding-top:0;
  }
}
.waiting-width {
   width: auto;
   padding: @toastIconWaitingPadding;
}