bin-ui/src/styles/components/notice.styl

基于 vue2.6 / vue-cli3 的 UI 组件库

$notice-width = 335px;
$notice-padding = 16px;
$notice-margin-bottom = 10px;

.bin-notice {
  position: fixed;
  width: $notice-width;
  margin-right: 24px;
  z-index: 9999;
  &-content-with-icon {
    margin-left: 51px;
  }
  &-close {
    position: absolute;
    cursor: pointer;
    right: 8px;
    top: 10px;
    color: $color-text-secondary;
    outline: none;
    i {
      font-size: 28px;
    }
  }
  &-with-desc&-with-icon &-title {
    margin-left: 51px;
  }
  &-notice {
    margin-bottom: $notice-margin-bottom;
    padding: 16px 24px;
    border-radius: $border-base-radius;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    background: #fff;
    line-height: 1;
    position: relative;
    overflow: hidden;


    &-with-desc {
      .bin-notice-close {
        top: 11px;
      }
    }
  }
  &-content-with-render {
    .bin-notice-desc {
      display: none;
    }
  }

  &-content-with-render-notitle {
    margin-left: 26px;
  }
  &-title {
    font-size: $header-font-size;
    line-height: $header-font-size + 3; //fixed the bug that the bottom of some letters were hidden just like 'g'
    color: $color-text-default;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &-with-desc &-title {
    margin-bottom: 8px;
  }
  &-desc {
    font-size: $base-font-size
    color: $color-text-default;
    line-height: $base-line-height
  }
  &-with-desc&-with-icon &-desc {
    margin-left: 51px;
  }

  &-with-icon &-title {
    margin-left: 26px;
  }

  &-icon {
    position: absolute;
    top: -1px;
    i {
      font-size: $header-font-size + 4;
    }

    &-success {
      color: $color-success;
    }
    &-info {
      color: $color-primary;
    }
    &-warning {
      color: $color-warning;
    }
    &-danger {
      color: $color-danger;
    }
  }
  &-with-desc &-icon {
    i {
      font-size: 36px;
      top: -6px;
    }
  }

  &-custom-content {
    position: relative;
  }
}