hbte-saas-ui 0.0.2 → 1.0.0

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

@@ -1,722 +0,0 @@
-@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;
-    }
-  }
-}