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

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

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

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

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

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

@@ -0,0 +1,48 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-descriptions-var($ele);
+
+/* Descriptions */
+.el-descriptions {
+  .el-descriptions__table.is-bordered {
+    border-spacing: 0;
+    border-collapse: separate;
+    border-radius: eleVar('descriptions', 'radius');
+    border-top: 1px solid eleVar('descriptions', 'border-color');
+    border-left: 1px solid eleVar('descriptions', 'border-color');
+
+    tr {
+      & > .el-descriptions__cell {
+        border-top: none;
+        border-left: none;
+        border-color: eleVar('descriptions', 'border-color');
+      }
+
+      &:first-child > .el-descriptions__cell {
+        &:first-child {
+          border-top-left-radius: eleVar('descriptions', 'radius');
+        }
+
+        &:last-child {
+          border-top-right-radius: eleVar('descriptions', 'radius');
+        }
+      }
+
+      &:last-child > .el-descriptions__cell {
+        &:first-child {
+          border-bottom-left-radius: eleVar('descriptions', 'radius');
+        }
+
+        &:last-child {
+          border-bottom-right-radius: eleVar('descriptions', 'radius');
+        }
+      }
+    }
+  }
+
+  .el-descriptions__label.el-descriptions__cell.is-bordered-label {
+    background: eleVar('descriptions', 'bg');
+  }
+}

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

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

package/lib/ele-app/style/overwrite/image-viewer/index.js

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

package/lib/ele-app/style/overwrite/image-viewer/index.scss

@@ -0,0 +1,10 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-image-viewer-var($ele);
+
+/* ImageViewer */
+.el-image-viewer__wrapper {
+  #{elVarName('text-color', 'regular')}: eleVar('image-viewer', 'tool-bg');
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+require("./popper/index");
+require("./tag/index");
+require("./radio/index");
+require("./checkbox/index");
+require("./select/index");
+require("./autocomplete/index");
+require("./cascader/index");
+require("./tree-select/index");
+require("./table-filter/index");
+require("./message-box/index");
+require("./notification/index");
+require("./descriptions/index");
+require("./backtop/index");
+require("./image-viewer/index");
+require("./color-picker/index");
+require("./date-picker/index");

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

@@ -0,0 +1,16 @@
+@use './popper/index.scss' as popper;
+@use './tag/index.scss' as tag;
+@use './radio/index.scss' as radio;
+@use './checkbox/index.scss' as checkbox;
+@use './select/index.scss' as select;
+@use './autocomplete/index.scss' as autocomplete;
+@use './cascader/index.scss' as cascader;
+@use './tree-select/index.scss' as treeSelect;
+@use './table-filter/index.scss' as tableFilter;
+@use './message-box/index.scss' as messageBox;
+@use './notification/index.scss' as notification;
+@use './descriptions/index.scss' as descriptions;
+@use './backtop/index.scss' as backtop;
+@use './image-viewer/index.scss' as imageViewer;
+@use './color-picker/index.scss' as colorPicker;
+@use './date-picker/index.scss' as datePicker;

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

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

package/lib/ele-app/style/overwrite/message-box/index.js

@@ -0,0 +1,3 @@
+"use strict";
+require("element-plus/es/components/message-box/style/index");
+require("./index.scss");

package/lib/ele-app/style/overwrite/message-box/index.scss

@@ -0,0 +1,84 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-message-box-var($ele);
+
+/* MessageBox */
+.el-overlay-message-box .el-message-box {
+  padding: 0;
+  max-width: eleVar('message-box', 'width');
+  border-radius: eleVar('message-box', 'radius');
+  border: none;
+
+  .el-message-box__header {
+    padding: eleVar('message-box', 'header-padding');
+    border-bottom: eleVar('message-box', 'header-border');
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+  }
+
+  .el-message-box__title {
+    flex: 1;
+    color: eleVar('message-box', 'header-color');
+    font-size: eleVar('message-box', 'header-font-size');
+    font-weight: eleVar('message-box', 'header-font-weight');
+    line-height: eleVar('message-box', 'header-line-height');
+  }
+
+  .el-message-box__headerbtn {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: eleVar('message-box', 'icon-size');
+    height: eleVar('message-box', 'icon-size');
+    line-height: eleVar('message-box', 'icon-size');
+    color: eleVar('message-box', 'icon-color');
+    font-size: eleVar('message-box', 'icon-font-size');
+    border-radius: eleVar('message-box', 'icon-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+    box-sizing: border-box;
+    position: static;
+    right: auto;
+    top: auto;
+
+    .el-message-box__close {
+      color: inherit;
+    }
+
+    &:hover {
+      color: eleVar('message-box', 'icon-hover-color');
+      background: eleVar('message-box', 'icon-hover-bg');
+    }
+  }
+
+  .el-message-box__content {
+    padding: eleVar('message-box', 'body-padding');
+    box-sizing: border-box;
+  }
+
+  .el-message-box__btns {
+    padding: eleVar('message-box', 'footer-padding');
+    border-top: eleVar('message-box', 'footer-border');
+    box-sizing: border-box;
+  }
+
+  .el-message-box__input {
+    padding-top: eleVar('message-box', 'input-padding');
+  }
+
+  .el-message-box__errormsg {
+    line-height: 18px;
+  }
+}
+
+body .el-overlay.is-message-box > .el-overlay-message-box {
+  overflow-x: hidden;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

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

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

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

@@ -0,0 +1,3 @@
+"use strict";
+require("element-plus/es/components/notification/style/index");
+require("./index.scss");

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

@@ -0,0 +1,65 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-notification-var($ele);
+
+/* Notification */
+body .el-notification {
+  width: eleVar('notification', 'width');
+  max-width: calc(100vw - 48px);
+  padding: eleVar('notification', 'padding');
+  border: eleVar('notification', 'border');
+  border-radius: eleVar('notification', 'radius');
+  box-shadow: eleVar('notification', 'shadow');
+
+  .el-notification__icon {
+    width: eleVar('notification', 'icon-size');
+    height: eleVar('notification', 'icon-size');
+    font-size: eleVar('notification', 'icon-size');
+    margin: eleVar('notification', 'icon-margin');
+  }
+}
+
+.el-notification .el-notification__icon.el-notification--info {
+  color: elVar('color-primary');
+}
+
+.el-notification .el-notification__group {
+  margin: 0;
+
+  .el-notification__closeBtn {
+    top: 0;
+    right: 0;
+    width: eleVar('notification', 'close-size');
+    height: eleVar('notification', 'close-size');
+    line-height: eleVar('notification', 'close-size');
+    color: eleVar('notification', 'close-color');
+    font-size: eleVar('notification', 'close-font-size');
+    margin: eleVar('notification', 'close-margin');
+    border-radius: eleVar('notification', 'close-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+
+    &:hover {
+      color: eleVar('notification', 'close-hover-color');
+      background: eleVar('notification', 'close-hover-bg');
+    }
+  }
+
+  .el-notification__title {
+    color: eleVar('notification', 'title-color');
+    font-size: eleVar('notification', 'title-size');
+    font-weight: eleVar('notification', 'title-font-weight');
+    line-height: eleVar('notification', 'title-line-height');
+    padding: eleVar('notification', 'title-padding');
+    box-sizing: border-box;
+  }
+
+  .el-notification__content {
+    color: eleVar('notification', 'color');
+    font-size: eleVar('notification', 'size');
+    margin-top: eleVar('notification', 'body-margin');
+    line-height: inherit;
+    text-align: left;
+  }
+}

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

@@ -0,0 +1,14 @@
+@use '../../../../style/util.scss' as *;
+
+/* Popper 主题变量 */
+@mixin set-el-popper-var($var) {
+  // Popper
+  .el-popper {
+    @include set-ele-var('popper', $var);
+  }
+
+  // Tooltip
+  .el-popper.is-dark {
+    @include set-ele-var('tooltip', $var);
+  }
+}

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

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

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

@@ -0,0 +1,9 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use '../../../../ele-tooltip/style/css-var.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-popper-var($ele);
+
+/* 气泡通用 */
+@include popper-style('body .el-popper');

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

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

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

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

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

@@ -0,0 +1,126 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-radio-var($ele);
+
+/* Radio */
+body .el-radio {
+  .el-radio__label {
+    color: eleVar('radio', 'color');
+    font-size: eleVar('radio', 'font-size');
+    line-height: eleVar('radio', 'size');
+  }
+
+  .el-radio__inner {
+    $transit: (border-color $ele-transition, background-color $ele-transition);
+    width: eleVar('radio', 'size');
+    height: eleVar('radio', 'size');
+    background: eleVar('radio', 'bg');
+    border: eleVar('radio', 'border');
+    border-radius: eleVar('radio', 'radius');
+    transition: $transit;
+
+    &::after {
+      $size: eleVar('radio', 'dot-size');
+      width: $size;
+      height: $size;
+      margin-top: calc(0px - (#{$size} / 2));
+      margin-left: calc(0px - (#{$size} / 2));
+      background: eleVar('radio', 'dot-color');
+      border-radius: eleVar('radio', 'dot-radius');
+      transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+      box-sizing: border-box;
+      transform: scale(0);
+      opacity: 0;
+    }
+  }
+
+  &:hover .el-radio__inner {
+    border: eleVar('radio', 'hover-border');
+  }
+
+  &.is-checked {
+    .el-radio__label {
+      color: eleVar('radio', 'active-color');
+    }
+
+    .el-radio__inner {
+      background: eleVar('radio', 'active-bg');
+      border: eleVar('radio', 'active-border');
+
+      &::after {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+  }
+
+  &.is-disabled {
+    span.el-radio__label {
+      color: eleVar('radio', 'disabled-color');
+    }
+
+    .el-radio__input .el-radio__inner {
+      background: eleVar('radio', 'disabled-bg');
+      border: eleVar('radio', 'disabled-border');
+
+      &::after {
+        background: eleVar('radio', 'disabled-dot-color');
+      }
+    }
+  }
+
+  &.el-radio--small {
+    .el-radio__label {
+      font-size: eleVar('radio', 'sm-font-size');
+      line-height: eleVar('radio', 'sm-size');
+    }
+
+    .el-radio__inner {
+      width: eleVar('radio', 'sm-size');
+      height: eleVar('radio', 'sm-size');
+      border-radius: eleVar('radio', 'sm-radius');
+
+      &::after {
+        $size: eleVar('radio', 'sm-dot-size');
+        width: $size;
+        height: $size;
+        margin-top: calc(0px - (#{$size} / 2));
+        margin-left: calc(0px - (#{$size} / 2));
+        border-radius: eleVar('radio', 'sm-dot-radius');
+      }
+    }
+  }
+
+  &.el-radio--large {
+    .el-radio__label {
+      font-size: eleVar('radio', 'lg-font-size');
+      line-height: eleVar('radio', 'lg-size');
+    }
+
+    .el-radio__inner {
+      width: eleVar('radio', 'lg-size');
+      height: eleVar('radio', 'lg-size');
+      border-radius: eleVar('radio', 'lg-radius');
+
+      &::after {
+        $size: eleVar('radio', 'lg-dot-size');
+        width: $size;
+        height: $size;
+        margin-top: calc(0px - (#{$size} / 2));
+        margin-left: calc(0px - (#{$size} / 2));
+        border-radius: eleVar('radio', 'lg-dot-radius');
+      }
+    }
+  }
+}
+
+body .el-radio,
+body .el-radio-group > .el-radio {
+  margin-right: eleVar('radio', 'space');
+}
+
+.el-radio-group > .el-radio:last-child {
+  margin-right: 0;
+}

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

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

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

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

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

@@ -0,0 +1,111 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-select-var($ele);
+
+/* Select */
+.el-select__popper {
+  .el-select-dropdown {
+    background: inherit;
+    border-radius: inherit;
+  }
+
+  .el-select-dropdown__list {
+    margin: 0 !important;
+    padding: eleVar('select', 'padding') !important;
+  }
+
+  .el-select-dropdown__item {
+    height: eleVar('select', 'item-height');
+    line-height: eleVar('select', 'item-height');
+    padding: eleVar('select', 'item-padding');
+    border-radius: eleVar('select', 'item-radius');
+    transition: (color $ele-transition, background-color $ele-transition);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    & > span {
+      flex: 1;
+    }
+
+    & + .el-select-dropdown__item {
+      margin-top: eleVar('select', 'item-margin');
+    }
+
+    &.selected {
+      background: eleVar('select', 'item-active-bg');
+      font-weight: eleVar('select', 'item-active-font-weight');
+
+      &:hover,
+      &.hover {
+        background: eleVar('select', 'item-active-hover-bg');
+      }
+    }
+  }
+
+  .el-select-dropdown__list .el-select-dropdown__item > span {
+    font-size: inherit;
+  }
+
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+    background: eleVar('select', 'item-active-bg');
+
+    &:hover,
+    &.hover {
+      background: eleVar('select', 'item-active-hover-bg');
+    }
+
+    &::after {
+      width: eleVar('select', 'icon-size');
+      height: eleVar('select', 'icon-size');
+      margin: eleVar('select', 'icon-margin');
+      display: inline-block;
+      position: static;
+      top: auto;
+      right: auto;
+      transform: none;
+    }
+  }
+
+  .el-select-group__title {
+    padding: eleVar('select', 'item-padding');
+  }
+
+  .el-select-group__wrap:not(:last-of-type) {
+    padding-bottom: 0;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.el-select .el-select__tags .el-tag,
+.el-select__collapse-tags .el-select__collapse-tag .el-tag {
+  flex-shrink: 0;
+  margin: 4px 4px 0 0;
+  height: calc(elVar('component-size') - 4px - 4px);
+  border: none;
+}
+
+.el-select .el-select__tags {
+  top: 2px;
+  transform: none;
+}
+
+.el-select .el-select-tags-wrapper.has-prefix {
+  margin: -2px 0 0 0 !important;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  padding: 0 0 0 4px;
+}
+
+.el-popper > .el-select__collapse-tags {
+  margin: -5px -11px;
+  padding: 8px 10px;
+  background: inherit;
+  border-radius: inherit;
+}

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

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

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

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