hbte-saas-ui 0.0.1

package/packages/theme-chalk/common/elementCover.scss

@@ -0,0 +1,722 @@
+@import "var.scss";
+/**
+ * 由于此样式同时会影响到业务系统显示，不要再在业务系统内重新定义以下组件或情景的样式。
+ */
+
+/** el-button 按钮调整为较小尺寸+主题色 **/
+// 尺寸： mini、small
+// 色彩： primary、success、info
+// 透明度：plain
+// 圆角：round
+// 禁用：disabled
+// 文本化： text
+body {
+  .el-button {
+    background-color: $defaultBg;
+    border-color: $defaultBorderColor;
+    color: $subColor;
+    padding: 0 18px;
+    height: 30px;
+    font-size: $articleFontSize;
+    i[class] {
+      margin-left: -8px;
+      & + span {
+        margin-right: -8px;
+        margin-left: 8px;
+      }
+    }
+    &:hover,
+    &:focus {
+      background-color: $defaultBg;
+      border-color: $primaryBg;
+      color: $primaryBg;
+    }
+    &--default.is-plain {
+      &:hover,
+      &:focus {
+        background-color: $defaultBg;
+        border-color: $primaryBg;
+        color: $primaryBg;
+      }
+    }
+    &--primary {
+      background-color: $primaryBg;
+      border-color: $primaryBg;
+      color: $defaultColor;
+      &:hover,
+      &:focus {
+        background-color: $primaryBgHover;
+        border-color: $primaryBgHover;
+        color: $defaultColor;
+      }
+      &.is-plain {
+        background-color: $plainPrimaryBg;
+        border-color: $plainPrimaryBorderColor;
+        color: $primaryBg;
+        &:hover,
+        &:focus {
+          background-color: $plainPrimaryBg;
+          border-color: $primaryBgHover;
+          color: $primaryBgHover;
+        }
+      }
+      &.is-disabled,
+      &.is-disabled:hover,
+      &.is-disabled:focus {
+        border-color: transparent;
+      }
+    }
+    &--success {
+      background-color: $successBg;
+      border-color: $successBg;
+      color: $defaultColor;
+
+      &:hover,
+      &:focus {
+        background-color: $successBgHover;
+        border-color: $successBgHover;
+        color: $defaultColor;
+      }
+
+      &.is-plain {
+        background-color: $plainSuccessBg;
+        border-color: $plainSuccessBorderColor;
+        color: $successBg;
+        &:hover,
+        &:focus {
+          background-color: $plainSuccessBg;
+          border-color: $successBgHover;
+          color: $successBgHover;
+        }
+      }
+      &.is-disabled,
+      &.is-disabled:hover,
+      &.is-disabled:focus {
+        border-color: transparent;
+      }
+    }
+    &--danger {
+      background-color: $dangerBg;
+      border-color: $dangerBg;
+      color: $defaultColor;
+      &:hover,
+      &:focus {
+        background-color: $dangerBgHover;
+        border-color: $dangerBgHover;
+        color: $defaultColor;
+      }
+      &.is-plain {
+        background-color: $plainDangerBg;
+        border-color: $plainDangerBorderColor;
+        color: $dangerBg;
+
+        &:hover,
+        &:focus {
+          background-color: $plainDangerBgHover;
+          border-color: $dangerBgHover;
+          color: $dangerBgHover;
+        }
+      }
+      &.is-disabled,
+      &.is-disabled:hover,
+      &.is-disabled:focus {
+        border-color: transparent;
+      }
+    }
+    &--warning {
+      background-color: $warnBg;
+      border-color: $warnBg;
+      color: $defaultColor;
+      &:hover,
+      &:focus {
+        background-color: $warnBgHover;
+        border-color: $warnBgHover;
+        color: $defaultColor;
+      }
+      &.is-plain {
+        background-color: $plainWarnBg;
+        border-color: $plainWarnBorderColor;
+        color: $warnBg;
+        &:hover,
+        &:focus {
+          background-color: $plainWarnBgHover;
+          border-color: $warnBgHover;
+          color: $warnBgHover;
+        }
+      }
+      &.is-disabled,
+      &.is-disabled:hover,
+      &.is-disabled:focus {
+        border-color: transparent;
+      }
+    }
+
+    &--mini {
+      height: 24px;
+      padding: 0px 12px;
+      font-size: $listFontSize;
+      border-radius: 2px;
+      .is-round {
+        padding: 5px 11px;
+      }
+      .is-circle {
+        padding: 5px;
+      }
+      i[class] {
+        margin-left: -4px;
+        & + span {
+          margin-right: -4px;
+          margin-left: 8px;
+        }
+      }
+    }
+
+    // 禁用
+    &.is-disabled {
+      &,
+      &:hover,
+      &:focus,
+      &:active,
+      &.is-plain {
+        color: $subColor3;
+        background: $disabledBg;
+        border-color: $disabledBg;
+        cursor: not-allowed;
+        background-image: none;
+        &:hover {
+          background: $disabledBg;
+          color: $subColor3;
+        }
+      }
+    }
+
+    // 文本化再覆盖
+    &--text {
+      border-color: transparent;
+      color: $primaryBg;
+      background: transparent;
+      padding-left: 0;
+      padding-right: 0;
+      &:focus,
+      &:hover,
+      &:active {
+        border-color: transparent;
+        background-color: transparent;
+        color: mix(#000000, $primaryBg, 10%);
+      }
+      &.is-disabled,
+      &.is-disabled:hover,
+      &.is-disabled:focus {
+        border-color: transparent;
+      }
+    }
+  }
+
+  /** el-message-box 消息框字体边距调整 **/
+  .el-message-box {
+    padding-bottom: 20px;
+    &__header {
+      padding-bottom: 14px;
+      border-bottom: 1px solid #eee;
+    }
+    &__title {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: $mainColor;
+    }
+    &__message {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      color: $subColor1;
+      line-height: 22px;
+      p {
+        line-height: 22px;
+      }
+    }
+  }
+
+  /** el-dialog 弹窗容器模型和边距调整**/
+  .el-dialog {
+    border-radius: 6px;
+    margin: 0;
+    // 实现屏幕居中
+    &__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    // 较小的标题和内容区域
+    &__header {
+      padding: 10px 20px;
+      height: 20px;
+      line-height: 20px;
+      border-bottom: 1px solid #eee;
+      &btn {
+        top: 10px;
+      }
+    }
+    &__title {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: $mainColor;
+      line-height: 22px;
+    }
+
+    &__body {
+      padding: 20px;
+      max-height: 73.6vh;
+      line-height: 22px;
+      overflow-y: auto;
+    }
+    &__footer {
+      padding: 20px;
+      padding-top: 0;
+    }
+  }
+
+  /** el-form 表单边距调整 **/
+  .el-form {
+    &.el-form--label-top {
+      .el-form-item {
+        .el-form-item__content {
+          line-height: 1;
+        }
+        .el-form-item__label {
+          padding-bottom: 0;
+          font-weight: 400;
+          color: $subColor1;
+          font-size: $articleFontSize;
+          line-height: 1;
+          margin-bottom: 10px;
+        }
+
+        .el-date-editor,
+        .el-select,
+        .el-cascader {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  /** el-input、el-textarea 输入框尺寸调整 **/
+  .el-input {
+    font-size: 13px;
+    .el-input__icon {
+      line-height: 30px;
+    }
+    &__inner {
+      padding: 0 10px;
+      line-height: 28px;
+      height: 30px;
+      border: 1px solid $defaultBorderColor;
+      color: $mainColor;
+      font-size: $articleFontSize;
+      &::placeholder {
+        font-size: $articleFontSize;
+        color: $subColor3;
+      }
+      &:focus {
+        border-color: $primaryBg;
+      }
+      &:hover {
+        border-color: $primaryBgHover;
+      }
+    }
+    &--small {
+      .el-input__inner {
+        height: 28px;
+        line-height: 26px;
+      }
+      .el-input__icon {
+        line-height: 28px;
+      }
+    }
+
+    &--mini {
+      .el-input__inner {
+        font-size: $listFontSize;
+        height: 24px;
+        line-height: 22px;
+        border-radius: 2px;
+        &::placeholder {
+          font-size: $listFontSize;
+        }
+      }
+      .el-input__icon {
+        line-height: 22px;
+        height: 22px;
+        margin-top: 1px;
+      }
+    }
+  }
+  .el-textarea {
+    &__inner {
+      padding: 5px 10px;
+      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+        PingFang SC, Helvetica Neue, Noto Sans, Noto Sans CJK SC,
+        Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif;
+      font-size: 13px;
+    }
+  }
+
+  /** el-date-picker 尺寸调整 **/
+  // .el-date-editor {
+  //   .el-range__icon {
+  //     line-height: 30px;
+  //   }
+  //   .el-range-separator {
+  //     font-size: 13px;
+  //     line-height: 30px;
+  //   }
+  //   .el-range__close-icon {
+  //     line-height: 30px;
+  //   }
+  //   .el-range-input {
+  //     font-size: 13px;
+  //     &::placeholder {
+  //       // position: relative;
+  //       // top: 1px;
+  //       font-size: 13px;
+  //       color: #999999;
+  //     }
+  //   }
+  // }
+  .el-range-editor {
+    &--small {
+      &.el-input__inner {
+        height: 30px;
+        padding: 2px 10px;
+        &::placeholder {
+          // position: relative;
+          // top: 1px;
+          font-size: 13px;
+          color: #999999;
+        }
+      }
+    }
+    &--mini {
+      &.el-input__inner {
+        height: 24px;
+        padding: 2px 10px;
+        &::placeholder {
+          // position: relative;
+          // top: 1px;
+          font-size: 13px;
+          color: #999999;
+        }
+      }
+    }
+  }
+
+  /** el-dropdown 尺寸调整 **/
+  .el-dropdown-menu {
+    padding: 6px 0;
+    overflow: unset; //question
+    &__item {
+      color: #222;
+      &:not(.is-disabled):hover,
+      &:focus {
+        color: $primaryBg;
+      }
+    }
+  }
+
+  // el-checkebox样式覆盖
+  .el-checkbox {
+    .el-checkbox__input {
+      .el-checkbox__inner {
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        width: 13px;
+        height: 13px;
+        &:hover {
+          border: 1px solid $primaryBg;
+        }
+      }
+      &.is-indeterminate .el-checkbox__inner {
+        background: $primaryBg;
+        border: 1px solid $primaryBg;
+      }
+    }
+    &.is-checked {
+      .el-checkbox__input {
+        .el-checkbox__inner {
+          background: $primaryBg;
+          border: 1px solid $primaryBg;
+        }
+      }
+      .el-checkbox__label {
+        color: $subColor1;
+      }
+    }
+
+    &.is-disabled {
+      .el-checkbox__input {
+        .el-checkbox__inner {
+          border: 1px solid #e5e5e5;
+          background: #f1f3f5;
+          &::after {
+            border-color: $subColor3;
+          }
+          &:hover {
+            border: 1px solid #e5e5e5;
+          }
+        }
+      }
+      .el-checkbox__label {
+        color: $subColor3;
+      }
+    }
+    .el-checkbox__label {
+      color: $subColor1;
+      font-size: $articleFontSize;
+    }
+  }
+
+  //el-tag样式覆盖
+  .el-tag {
+    height: 26px;
+    line-height: 24px;
+    font-size: $articleFontSize;
+    &--info.el-tag {
+      background: #f4f4f5;
+      border: 1px solid rgba(144, 147, 153, 0.3);
+      color: $subColor;
+    }
+  }
+  //el-tab横向—+ 竖向 样式覆盖
+  .el-tabs {
+    .el-tabs__header {
+      .el-tabs__nav {
+        .el-tabs__item {
+          color: $subColor;
+        }
+      }
+    }
+  }
+
+  //el-tab横向样式覆盖
+  .el-tabs--top {
+    .el-tabs__header {
+      padding: 0 20px;
+      border: 1px solid #eee;
+      margin: 0;
+      .el-tabs__content {
+        padding-top: 20px;
+      }
+      .el-tabs__active-bar {
+        background: $primaryBg;
+      }
+      .el-tabs__item.is-active {
+        color: $primaryBg;
+      }
+      .el-tabs__item:hover {
+        color: $primaryBgHover;
+      }
+      .el-tabs__nav-wrap::after {
+        content: none;
+      }
+    }
+    .el-tabs__content {
+      padding: 20px;
+    }
+  }
+
+  //el-tree
+  .el-tree {
+    & > .el-tree-node {
+      margin-bottom: 10px;
+    }
+    .el-tree-node__content {
+      .el-checkbox__label {
+        font-weight: bold;
+      }
+    }
+    .el-tree-node__children {
+      .el-checkbox__label {
+        font-weight: normal;
+      }
+      .el-tree-node {
+        margin-top: 4px;
+      }
+    }
+  }
+
+  //下拉框样式
+  .el-select {
+    .el-select__tags {
+      .el-tag {
+        border: none;
+        background-color: $assistantBg;
+        margin: 3px;
+        height: 22px;
+        color: $primaryBg;
+        line-height: 22px;
+        padding: 0 7px;
+        i {
+          color: #fff;
+          background-color: $primaryBg;
+          transform: scale(0.75);
+          &:hover {
+            background-color: $primaryBg;
+          }
+        }
+      }
+      .el-select__input {
+        font-size: $articleFontSize;
+      }
+    }
+  }
+  .el-select-dropdown {
+    .el-select-dropdown__list {
+      .el-select-dropdown__item {
+        color: $mainColor;
+        font-size: $articleFontSize;
+        font-weight: normal;
+      }
+      .el-select-dropdown__item.is-disabled {
+        color: $disableColor;
+      }
+      .el-select-dropdown__item.hover,
+      .el-select-dropdown__item.selected.hover {
+        background-color: $assistantBg;
+      }
+    }
+  }
+
+  //下拉按钮尖括号icon样式
+  .el-select .el-input .el-select__caret {
+    color: $subColor2;
+  }
+
+  //switch样式覆盖
+  .el-switch {
+    line-height: 28px;
+    .el-switch__label {
+      color: $subColor3;
+      height: 28px;
+      & > * {
+        font-size: $articleFontSize;
+      }
+    }
+    &.is-checked {
+      .el-switch__core {
+        background: $primaryBg;
+        border-color: $primaryBg;
+        &::after {
+          margin-left: -24px;
+        }
+      }
+    }
+    .el-switch__core {
+      background: #adadad;
+      border-color: #adadad;
+      height: 28px;
+      border-radius: 14px;
+      width: 50px !important;
+      &::after {
+        width: 20px;
+        height: 20px;
+        top: 3px;
+        left: 3px;
+      }
+    }
+  }
+
+  //el-table样式覆盖
+  .el-table {
+    // 边框颜色覆盖
+    &.el-table--border,
+    &.el-table--group {
+      border: 1px solid #dbdbdb;
+    }
+
+    // 空白时高度
+    &__empty-block {
+      min-height: 155px;
+    }
+    &__fixed-right-patch,
+    &__cell.gutter {
+      background-color: #eff1f5;
+    }
+
+    // header-cell
+    th.el-table__cell {
+      position: relative;
+      padding: 7px 0;
+      font-size: 12px;
+      background-color: #eff1f5;
+      border-color: #eeeeee;
+      color: $mainColor;
+      & > .cell {
+        color: inherit;
+        font-weight: bold;
+        line-height: 20px;
+        padding-left: 12px;
+        padding-right: 12px;
+        vertical-align: middle;
+      }
+      &:hover {
+        background-color: #eff1f5;
+      }
+    }
+
+    // body-cell
+    .el-table__cell {
+      position: relative;
+      padding: 6px 0;
+      font-size: 12px;
+      border-color: #eeeeee;
+      color: #222222;
+
+      > .cell {
+        color: inherit;
+        line-height: 18px;
+        min-height: 18px;
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+      // &:hover {
+      //   background-color: #ffffff;
+      // }
+    }
+    // body-cell hover
+    &.el-table--enable-row-hover
+      .el-table__body
+      tr:hover
+      > td.el-table__cell:hover {
+      background-color: #ffffff;
+    }
+
+    // 特殊情景1：序号列样式再调整
+    // 如果使用el-table,序号列column加上class-name="el-table-index"
+    th.el-table-index > .cell,
+    tr.el-table-index > .cell {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+    // 特殊情景2：无数据插槽
+    // 使用一下插槽结构以统一项目风格
+    // <img
+    // class="el-table-nodata"
+    // src="[项目nodata图片src]" 这里的nodata.png图片需要加入到项目中
+    // />
+    // <div class="el-table-nodata-text">暂无数据</div>
+    .el-table-nodata {
+      margin: 0 auto;
+      width: 140px;
+      height: 55px;
+      background: url("../theme-chalk/images/nodata.png") no-repeat center;
+      background-size: 100% auto;
+    }
+    .el-table-nodata-text {
+      height: 30px;
+      line-height: 30px;
+      font-size: 12px;
+    }
+  }
+}