ele-admin-plus 1.1.6-beta.1 → 1.1.6-beta.3

package/lib/ele-app/style/overwrite/table-filter/index.scss

@@ -0,0 +1,98 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use '../../../../ele-virtual-table/style/css-var.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-table-filter-var($ele);
+
+/* TableFilter */
+.el-table-filter {
+  .el-table-filter__list {
+    padding: eleVar('table-filter', 'padding');
+    max-height: eleVar('table-filter', 'max-height');
+    box-sizing: border-box;
+    overflow: auto;
+  }
+
+  .el-table-filter__list-item {
+    color: eleVar('table-filter', 'item-color');
+    height: eleVar('table-filter', 'item-height');
+    line-height: eleVar('table-filter', 'item-height');
+    padding: eleVar('table-filter', 'item-padding');
+    border-radius: eleVar('table-filter', 'item-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+    box-sizing: border-box;
+
+    & + .el-table-filter__list-item {
+      margin-top: eleVar('table-filter', 'item-margin');
+    }
+
+    &:hover {
+      color: eleVar('table-filter', 'item-hover-color');
+      background: eleVar('table-filter', 'item-hover-bg');
+    }
+
+    &.is-active {
+      color: eleVar('table-filter', 'item-active-color');
+      background: eleVar('table-filter', 'item-active-bg');
+      font-weight: eleVar('table-filter', 'item-active-font-weight');
+
+      &:hover {
+        background: eleVar('table-filter', 'item-active-hover-bg');
+      }
+    }
+  }
+
+  .el-table-filter__wrap {
+    max-height: eleVar('table-filter', 'max-height');
+  }
+
+  @include filter-checkbox-style($ele-transition);
+
+  .el-table-filter__bottom {
+    padding: eleVar('table-filter', 'footer-padding');
+    border-top: eleVar('table-filter', 'footer-border');
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    & > button {
+      height: 24px;
+      line-height: 24px;
+      padding: 0 11px;
+      font-size: 12px;
+      color: elVar('text-color', 'regular');
+      border-radius: calc(#{elVar('border-radius', 'base')} - 1px);
+      transition: (color $ele-transition, background-color $ele-transition);
+      box-sizing: border-box;
+
+      &:hover {
+        background: elVar('fill-color', 'light');
+      }
+
+      &:active {
+        background: elVar('fill-color');
+      }
+
+      &:first-child {
+        order: 2;
+        color: #fff;
+        background: elVar('color-primary');
+        margin-left: 4px;
+
+        &:hover {
+          background: elVar('color-primary', 'light-3');
+        }
+
+        &:active {
+          background: elVar('color-primary', 'dark-2');
+        }
+
+        &.is-disabled {
+          background: elVar('color-primary', 'light-5');
+        }
+      }
+    }
+  }
+}

package/lib/ele-app/style/overwrite/tag/css-var.scss

@@ -0,0 +1,24 @@
+@use '../../../../style/util.scss' as *;
+
+/* ElTag 主题变量 */
+@mixin set-el-tag-var($var) {
+  .el-tag {
+    @include set-ele-var('tag', $var);
+  }
+
+  .el-tag--small {
+    @include set-ele-var('tag-sm', $var);
+  }
+
+  .el-tag--large {
+    @include set-ele-var('tag-lg', $var);
+  }
+
+  .el-tag--dark {
+    @include set-ele-var('tag-dark', $var);
+  }
+
+  .el-tag--plain {
+    @include set-ele-var('tag-plain', $var);
+  }
+}

package/lib/ele-app/style/overwrite/tag/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-app/style/overwrite/tag/index.scss

@@ -0,0 +1,303 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-tag-var($ele);
+
+/* Tag */
+.el-tag.el-tag--light,
+.el-tag.el-tag--dark,
+.el-tag.el-tag--plain {
+  line-height: inherit;
+  height: eleVar('tag', 'height');
+  font-size: eleVar('tag', 'size');
+  border-radius: eleVar('tag', 'radius');
+  padding: eleVar('tag', 'padding');
+
+  .el-icon {
+    width: auto;
+    height: auto;
+    font-size: inherit;
+    border-radius: 0;
+    cursor: inherit;
+  }
+
+  &.is-closable {
+    padding: eleVar('tag', 'padding');
+  }
+
+  &.el-tag--small {
+    padding: eleVar('tag', 'sm-padding');
+  }
+
+  &.el-tag--large {
+    padding: eleVar('tag', 'lg-padding');
+  }
+}
+
+/* 关闭按钮 */
+.el-tag.is-closable .el-tag__close {
+  width: auto;
+  height: auto;
+  font-size: eleVar('tag', 'close-size');
+  margin: eleVar('tag', 'close-margin');
+  padding: eleVar('tag', 'close-padding');
+  border-radius: eleVar('tag', 'close-radius');
+  transition: (color $ele-transition, background-color $ele-transition);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+/* 亮色风格 */
+.el-tag.el-tag--light {
+  color: eleVar('tag', 'color');
+  background: eleVar('tag', 'bg');
+  border-color: eleVar('tag', 'border-color');
+
+  .el-tag__close {
+    color: eleVar('tag', 'close-color');
+
+    &:hover {
+      color: eleVar('tag', 'close-hover-color');
+      background: eleVar('tag', 'close-hover-bg');
+    }
+  }
+}
+
+.el-tag--light {
+  &.el-tag--info {
+    color: eleVar('tag', 'info-color');
+    background: eleVar('tag', 'info-bg');
+    border-color: eleVar('tag', 'info-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'info-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'info-close-hover-color');
+        background: eleVar('tag', 'info-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--success {
+    color: eleVar('tag', 'success-color');
+    background: eleVar('tag', 'success-bg');
+    border-color: eleVar('tag', 'success-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'success-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'success-close-hover-color');
+        background: eleVar('tag', 'success-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--warning {
+    color: eleVar('tag', 'warning-color');
+    background: eleVar('tag', 'warning-bg');
+    border-color: eleVar('tag', 'warning-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'warning-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'warning-close-hover-color');
+        background: eleVar('tag', 'warning-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--danger {
+    color: eleVar('tag', 'danger-color');
+    background: eleVar('tag', 'danger-bg');
+    border-color: eleVar('tag', 'danger-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'danger-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'danger-close-hover-color');
+        background: eleVar('tag', 'danger-close-hover-bg');
+      }
+    }
+  }
+}
+
+/* 暗色风格 */
+.el-tag.el-tag--dark {
+  color: eleVar('tag', 'dark-color');
+  background: eleVar('tag', 'dark-bg');
+  border: none;
+
+  .el-tag__close {
+    color: eleVar('tag', 'dark-close-color');
+
+    &:hover {
+      color: eleVar('tag', 'dark-close-hover-color');
+      background: eleVar('tag', 'dark-close-hover-bg');
+    }
+  }
+}
+
+.el-tag--dark {
+  &.el-tag--info {
+    color: eleVar('tag', 'dark-info-color');
+    background: eleVar('tag', 'dark-info-bg');
+
+    .el-tag__close {
+      color: eleVar('tag', 'dark-info-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'dark-info-close-hover-color');
+        background: eleVar('tag', 'dark-info-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--success {
+    color: eleVar('tag', 'dark-success-color');
+    background: eleVar('tag', 'dark-success-bg');
+
+    .el-tag__close {
+      color: eleVar('tag', 'dark-success-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'dark-success-close-hover-color');
+        background: eleVar('tag', 'dark-success-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--warning {
+    color: eleVar('tag', 'dark-warning-color');
+    background: eleVar('tag', 'dark-warning-bg');
+
+    .el-tag__close {
+      color: eleVar('tag', 'dark-warning-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'dark-warning-close-hover-color');
+        background: eleVar('tag', 'dark-warning-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--danger {
+    color: eleVar('tag', 'dark-danger-color');
+    background: eleVar('tag', 'dark-danger-bg');
+
+    .el-tag__close {
+      color: eleVar('tag', 'dark-danger-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'dark-danger-close-hover-color');
+        background: eleVar('tag', 'dark-danger-close-hover-bg');
+      }
+    }
+  }
+}
+
+/* 朴素风格 */
+.el-tag.el-tag--plain {
+  color: eleVar('tag', 'plain-color');
+  border-color: eleVar('tag', 'plain-border-color');
+  background: none;
+
+  .el-tag__close {
+    color: eleVar('tag', 'plain-close-color');
+
+    &:hover {
+      color: eleVar('tag', 'plain-close-hover-color');
+      background: eleVar('tag', 'plain-close-hover-bg');
+    }
+  }
+}
+
+.el-tag--plain {
+  &.el-tag--info {
+    color: eleVar('tag', 'plain-info-color');
+    border-color: eleVar('tag', 'plain-info-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'plain-info-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'plain-info-close-hover-color');
+        background: eleVar('tag', 'plain-info-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--success {
+    color: eleVar('tag', 'plain-success-color');
+    border-color: eleVar('tag', 'plain-success-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'plain-success-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'plain-success-close-hover-color');
+        background: eleVar('tag', 'plain-success-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--warning {
+    color: eleVar('tag', 'plain-warning-color');
+    border-color: eleVar('tag', 'plain-warning-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'plain-warning-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'plain-warning-close-hover-color');
+        background: eleVar('tag', 'plain-warning-close-hover-bg');
+      }
+    }
+  }
+
+  &.el-tag--danger {
+    color: eleVar('tag', 'plain-danger-color');
+    border-color: eleVar('tag', 'plain-danger-border-color');
+
+    .el-tag__close {
+      color: eleVar('tag', 'plain-danger-close-color');
+
+      &:hover {
+        color: eleVar('tag', 'plain-danger-close-hover-color');
+        background: eleVar('tag', 'plain-danger-close-hover-bg');
+      }
+    }
+  }
+}
+
+/* 小尺寸 */
+.el-tag.el-tag--small {
+  height: eleVar('tag', 'sm-height');
+  font-size: eleVar('tag', 'sm-size');
+  border-radius: eleVar('tag', 'sm-radius');
+
+  .el-tag__close {
+    font-size: eleVar('tag', 'sm-close-size');
+    margin: eleVar('tag', 'sm-close-margin');
+    padding: eleVar('tag', 'sm-close-padding');
+    border-radius: eleVar('tag', 'sm-close-radius');
+  }
+}
+
+/* 大尺寸 */
+.el-tag.el-tag--large {
+  height: eleVar('tag', 'lg-height');
+  font-size: eleVar('tag', 'lg-size');
+  border-radius: eleVar('tag', 'lg-radius');
+
+  .el-tag__close {
+    font-size: eleVar('tag', 'lg-close-size');
+    margin: eleVar('tag', 'lg-close-margin');
+    padding: eleVar('tag', 'lg-close-padding');
+    border-radius: eleVar('tag', 'lg-close-radius');
+  }
+}

package/lib/ele-app/style/overwrite/tree-select/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../../../style/util.scss' as *;
+
+/* ElTreeSelect 主题变量 */
+@mixin set-el-tree-select-var($var) {
+  .el-tree-select__popper {
+    @include set-ele-var('tree-select', $var);
+  }
+}

package/lib/ele-app/style/overwrite/tree-select/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-app/style/overwrite/tree-select/index.scss

@@ -0,0 +1,138 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-tree-select-var($ele);
+
+/* TreeSelect */
+.el-tree-select__popper {
+  .el-select-dropdown__wrap .el-select-dropdown__list {
+    margin: 0 !important;
+    padding: eleVar('tree-select', 'padding') !important;
+  }
+
+  .el-tree-node {
+    padding-top: eleVar('tree-select', 'item-margin');
+  }
+
+  .el-tree > .el-tree-node:first-child {
+    padding-top: 0;
+  }
+
+  .el-tree-node__content {
+    height: eleVar('tree-select', 'item-height');
+    padding: eleVar('tree-select', 'item-padding');
+    border-radius: eleVar('tree-select', 'item-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+    box-sizing: border-box;
+    position: relative;
+    z-index: 0;
+
+    & > .el-tree-node__expand-icon {
+      flex-shrink: 0;
+      width: auto;
+      height: auto;
+      transform: none;
+      box-sizing: border-box;
+      margin: eleVar('tree-select', 'expand-margin');
+      padding: eleVar('tree-select', 'expand-padding');
+      border-radius: eleVar('tree-select', 'expand-radius');
+      font-size: eleVar('tree-select', 'expand-size');
+      transition: background-color $ele-transition;
+      z-index: 4;
+
+      & > svg {
+        transition: transform 0.3s;
+      }
+
+      &.expanded > svg {
+        transform: rotate(90deg);
+      }
+
+      &:hover {
+        background: eleVar('tree-select', 'expand-hover-bg');
+      }
+
+      &.is-leaf {
+        pointer-events: none;
+      }
+    }
+
+    .el-select-dropdown__item {
+      height: auto;
+      line-height: eleVar('tree-select', 'item-line-height');
+      padding: 0;
+      border-radius: 0;
+      position: static;
+
+      &::before {
+        content: '';
+        border-radius: eleVar('tree-select', 'item-radius');
+        transition: background-color $ele-transition;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+      }
+    }
+
+    & > .el-checkbox,
+    & > .el-checkbox + .el-tree-node__loading-icon {
+      & + .el-select-dropdown__item::before {
+        display: none;
+      }
+    }
+
+    &:has(> .el-select-dropdown__item.is-disabled) {
+      cursor: not-allowed;
+    }
+  }
+
+  .el-tree .el-tree-node > .el-tree-node__content .el-select-dropdown__item {
+    color: inherit;
+    font-weight: normal;
+  }
+
+  /* 选中 */
+  .el-tree-node > .el-tree-node__content {
+    .el-select-dropdown__item.selected {
+      color: eleVar('tree-select', 'item-active-color');
+      font-weight: eleVar('tree-select', 'item-active-weight');
+
+      &::before {
+        background: eleVar('tree-select', 'item-active-bg');
+      }
+    }
+
+    &:hover .el-select-dropdown__item.selected::before {
+      background: eleVar('tree-select', 'item-active-hover-bg');
+    }
+  }
+
+  /* 有复选框时去掉文本选中效果 */
+  .el-tree-node > .el-tree-node__content > .el-checkbox,
+  .el-tree-node__content > .el-checkbox + .el-tree-node__loading-icon {
+    & + .el-select-dropdown__item {
+      color: inherit;
+      font-weight: normal;
+    }
+  }
+
+  /* 禁用 */
+  .el-tree-node > .el-tree-node__content .el-select-dropdown__item.is-disabled {
+    color: eleVar('tree-select', 'item-disabled-color');
+
+    &::before {
+      display: none;
+    }
+  }
+
+  /* 行点击高亮时去掉模拟背景的伪元素 */
+  .el-tree--highlight-current .el-tree-node.is-current {
+    & > .el-tree-node__content .el-select-dropdown__item::before {
+      display: none;
+    }
+  }
+}

package/lib/ele-app/style/scrollbar/css-var.scss

@@ -0,0 +1,53 @@
+@use '../../../style/util.scss' as *;
+
+/* 滚动条主题变量 */
+@mixin set-scrollbar-var($var) {
+  @include set-ele-var('scrollbar', $var);
+}
+
+/* 滚动条样式 */
+@mixin scrollbar-style() {
+  ::-webkit-scrollbar {
+    width: eleVar('scrollbar', 'size');
+    height: eleVar('scrollbar', 'size');
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: eleVar('scrollbar', 'padding') solid transparent;
+    border-radius: eleVar('scrollbar', 'radius');
+    background-color: eleVar('scrollbar', 'color');
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: eleVar('scrollbar', 'hover-color');
+    }
+  }
+
+  ::-webkit-scrollbar-track {
+    background: eleVar('scrollbar', 'bg');
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
+  }
+}
+
+/* 美化滚动条样式 */
+@mixin set-scrollbar-style($selector) {
+  @if $selector == '' {
+    @include scrollbar-style();
+  } @else if $selector == 'pc' {
+    @media (hover: hover) and (pointer: fine) {
+      @include scrollbar-style();
+    }
+  } @else if $selector != 'never' {
+    #{$selector} {
+      @include scrollbar-style();
+    }
+  }
+}

package/lib/ele-app/style/scrollbar/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-app/style/{scrollbar.scss → scrollbar/index.scss}

@@ -1,5 +1,5 @@
-@use '../../style/themes/default.scss' as *;
-@use '../../style/util.scss' as *;
+@use '../../../style/themes/default.scss' as *;
+@use '../../../style/util.scss' as *;
 @use './css-var.scss' as *;
 
 :root {