@charset "UTF-8";

//---------页面初始化加载时的动画---------
.spinner {
  margin-top: calc(50vh - 12px);
  margin-left: auto;
  margin-right: auto;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: $nec-primary-color;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%,
  100%,
  80% {
    -webkit-transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes sk-bouncedelay {
  0%,
  100%,
  80% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

// Alert部分样式
.ui-dialog.ui-widget {
  .ui-dialog-titlebar {
    background-color: $nec-divide-part-bg;
    color: $nec-warning-color;
    height: 42px;
    line-height: 42px;
    padding: 0;
    text-align: center;

    > .ui-dialog-title {
      font-size: 16px;
    }
  }

  .ui-widget-header {
    background: $nec-divide-part-bg;
  }

  .ui-dialog-content .fa {
    display: none;
    margin-right: 0;
  }

  .ui-dialog-content {
    background-color: $white;
    font-size: 16px;
    text-align: center;
    padding: 40px 0;

    > .ui-confirmdialog-message {
      color: $nec-text-color;
      display: inline-block;
      padding: 0 20px;
      text-align: left;
    }
  }

  .ui-dialog-footer {
    border: none;
    padding-top: 0;
    text-align: center;

    > p-footer > button:first-child {
      margin-right: 12px;
    }
  }
}

//toast部分样式
.ui-growl.nec-toast {
  // 4.X 版本不支持官方提供的 [baseZIndex] 属性，只能先写这
  z-index: 99999 !important;
  left: calc(50%);
  right: auto;
  width: auto;
  min-width: 20em;
  transform: translateX(-50%);

  .ui-growl-message-success {
    background-color: $nec-primary-color;
  }

  .ui-growl-message-warn {
    background-color: $nec-warning-color;
  }

  .ui-growl-message-error {
    background-color: $nec-error-color;
  }

  .ui-growl-image {
    font-size: 30px;
  }

  .ui-growl-icon-close {
    display: none;
  }

  .ui-growl-message {
    font-size: 16px;

    > .ui-growl-title {
      display: none;
    }

    > p {
      padding-top: 5px;
    }
  }
}

// Loading部分样式
.nec-loading-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .nec-loading-sign {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
    width: 100%;
    text-align: center;
    background-color: inherit;
    border: none;
    box-shadow: none;
    color: $nec-text-color;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  }

  .nec-loading-spinner-line {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nec-loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
  }

  .animation {
    background: url('#{$nec-image-path}/common/loading/loading.png') no-repeat;
    background-size: 100% 100%;
    animation-delay: 0s;
    transform-origin: center bottom;
    animation: bounce 0.5s cubic-bezier(0.3, 2.4, 0.85, 2.5) infinite;
  }

  .nec-loading-text {
    padding-left: 10px;
    font-size: 16px;
    color: $nec-text-color;
    max-width: 400px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  }

  @keyframes bounce {
    from,
    to {
      transform: translateY(-3px) scaleY(1);
    }

    80% {
      transform: translateY(2px) scaleY(0.9);
    }
  }

  .nec-loading-tips {
    display: inline-block;
    margin-top: 10px;
    padding: 22px 36px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background-color: #fff;

    .nec-loading-tip-label {
      font-weight: 600;
    }
  }
}

// loading遮罩样式
.ng-busy-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background: #fff;
  opacity: 0.7;
}

// 配合necAutoSize指令使用
.nec-flex-text-wrap {
  position: relative;

  pre,
  textarea {
    white-space: pre-wrap;
    width: 100%;
    padding: 10px 10px 0;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  textarea {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    resize: none;

    /* IE7 box-sizing fudge factor */
    *height: 94%;
    *width: 94%;
  }

  pre {
    display: block;
    visibility: hidden;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;

    span {
      word-wrap: break-word;
    }
  }
}

// 解决tooltip英文或数子不会换行的问题
.ui-tooltip {
  .ui-tooltip-text {
    word-break: break-all;
    word-wrap: break-word;
  }
}