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

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

@@ -0,0 +1,159 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-el-checkbox-var($ele);
+
+/* Checkbox */
+body .el-checkbox {
+  .el-checkbox__label {
+    color: eleVar('checkbox', 'color');
+    font-size: eleVar('checkbox', 'font-size');
+    line-height: eleVar('checkbox', 'size');
+    transition: (color $ele-transition, font-weight $ele-transition);
+  }
+
+  .el-checkbox__inner {
+    $transit: (border-color $ele-transition, background-color $ele-transition);
+    width: eleVar('checkbox', 'size');
+    height: eleVar('checkbox', 'size');
+    background: eleVar('checkbox', 'bg');
+    border: eleVar('checkbox', 'border');
+    border-radius: eleVar('checkbox', 'radius');
+    transition: $transit;
+
+    &::after {
+      top: 50%;
+      left: eleVar('checkbox', 'icon-left');
+      width: eleVar('checkbox', 'icon-width');
+      height: eleVar('checkbox', 'icon-height');
+      border: 2px solid #fff;
+      border-top: 0;
+      border-left: 0;
+      box-sizing: border-box;
+      transform: rotate(45deg) scale(0) translate(-50%, -50%);
+      transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+      opacity: 0;
+    }
+  }
+
+  .el-checkbox__input .el-checkbox__inner::before {
+    content: '';
+    width: 60%;
+    height: 2px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    background: #fff;
+    transform: translateX(-50%) scale(0);
+    margin-top: -1px;
+    transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
+    opacity: 0;
+  }
+
+  &:hover .el-checkbox__inner {
+    border: eleVar('checkbox', 'hover-border');
+  }
+
+  &.is-checked {
+    .el-checkbox__label {
+      color: eleVar('checkbox', 'active-color');
+    }
+
+    .el-checkbox__inner {
+      background: elVar('color-primary');
+      border: 1px solid elVar('color-primary');
+
+      &::after {
+        opacity: 1;
+        transform: rotate(45deg) scale(1) translate(-50%, -50%);
+        transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+      }
+    }
+  }
+
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background: elVar('color-primary');
+    border: 1px solid elVar('color-primary');
+
+    &::before {
+      opacity: 1;
+      transform: translateX(-50%) scale(1);
+      transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
+    }
+
+    &::after {
+      display: block;
+      transform: rotate(45deg) scale(0) translate(-50%, -50%);
+      opacity: 0;
+    }
+  }
+
+  &.is-disabled {
+    span.el-checkbox__label {
+      color: eleVar('checkbox', 'disabled-color');
+    }
+
+    .el-checkbox__input .el-checkbox__inner {
+      background: eleVar('checkbox', 'disabled-bg');
+      border: eleVar('checkbox', 'disabled-border');
+
+      &::after {
+        border-color: eleVar('checkbox', 'disabled-color');
+      }
+    }
+  }
+
+  &.el-checkbox--small {
+    .el-checkbox__label {
+      font-size: eleVar('checkbox', 'sm-font-size');
+      line-height: eleVar('checkbox', 'sm-size');
+    }
+
+    .el-checkbox__inner {
+      width: eleVar('checkbox', 'sm-size');
+      height: eleVar('checkbox', 'sm-size');
+      border-radius: eleVar('checkbox', 'sm-radius');
+
+      &::after {
+        left: eleVar('checkbox', 'sm-icon-left');
+        width: eleVar('checkbox', 'sm-icon-width');
+        height: eleVar('checkbox', 'sm-icon-height');
+      }
+    }
+
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
+      top: 50%;
+    }
+  }
+
+  &.el-checkbox--large {
+    .el-checkbox__label {
+      font-size: eleVar('checkbox', 'lg-font-size');
+      line-height: eleVar('checkbox', 'lg-size');
+    }
+
+    .el-checkbox__inner {
+      width: eleVar('checkbox', 'lg-size');
+      height: eleVar('checkbox', 'lg-size');
+      border-radius: eleVar('checkbox', 'lg-radius');
+
+      &::after {
+        left: eleVar('checkbox', 'lg-icon-left');
+        width: eleVar('checkbox', 'lg-icon-width');
+        height: eleVar('checkbox', 'lg-icon-height');
+      }
+    }
+  }
+}
+
+body .el-checkbox,
+body .el-checkbox-group > .el-checkbox {
+  margin-right: eleVar('checkbox', 'space');
+}
+
+.el-checkbox-group > .el-checkbox:last-child {
+  margin-right: 0;
+}

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

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

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

@@ -0,0 +1,42 @@
+@use '../../../../style/themes/default.scss' as *;
+@use '../../../../style/util.scss' as *;
+
+/* ColorPicker */
+body .el-color-picker__panel {
+  padding: 10px;
+}
+
+.el-color-picker__panel {
+  .el-color-dropdown__btns {
+    margin-top: 8px;
+  }
+
+  .el-color-predefine__color-selector.selected {
+    box-shadow: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 5.71428571px;
+      height: 9.14285714px;
+      border: 2px solid #fff;
+      border-left: 0;
+      border-top: 0;
+      transform: rotate(45deg) translate(-50%, -50%);
+      box-sizing: border-box;
+      position: absolute;
+      top: 50%;
+      left: 6px;
+    }
+  }
+}
+
+.el-color-picker .el-color-picker__color {
+  border-color: elVar('border-color', 'light');
+  overflow: hidden;
+}
+
+body .el-color-picker .el-color-picker__icon,
+body .el-color-picker .el-color-picker__empty {
+  font-size: 13px;
+}

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

@@ -0,0 +1,33 @@
+@use '../../../style/util.scss' as *;
+@use './autocomplete/css-var.scss' as *;
+@use './cascader/css-var.scss' as *;
+@use './checkbox/css-var.scss' as *;
+@use './date-picker/css-var.scss' as *;
+@use './descriptions/css-var.scss' as *;
+@use './image-viewer/css-var.scss' as *;
+@use './message-box/css-var.scss' as *;
+@use './notification/css-var.scss' as *;
+@use './popper/css-var.scss' as *;
+@use './radio/css-var.scss' as *;
+@use './select/css-var.scss' as *;
+@use './table-filter/css-var.scss' as *;
+@use './tag/css-var.scss' as *;
+@use './tree-select/css-var.scss' as *;
+
+/* El 样式重写主题变量 */
+@mixin set-overwrite-var($var) {
+  @include set-el-autocomplete-var($var);
+  @include set-el-cascader-var($var);
+  @include set-el-checkbox-var($var);
+  @include set-el-date-picker-var($var);
+  @include set-el-descriptions-var($var);
+  @include set-el-image-viewer-var($var);
+  @include set-el-message-box-var($var);
+  @include set-el-notification-var($var);
+  @include set-el-popper-var($var);
+  @include set-el-radio-var($var);
+  @include set-el-select-var($var);
+  @include set-el-table-filter-var($var);
+  @include set-el-tag-var($var);
+  @include set-el-tree-select-var($var);
+}

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

@@ -0,0 +1,16 @@
+@use '../../../../style/util.scss' as *;
+
+/* ElDatepicker 主题变量 */
+@mixin set-el-date-picker-var($var) {
+  // Datepicker
+  .el-date-picker,
+  .el-date-range-picker {
+    @include set-ele-var('datepicker', $var);
+  }
+
+  // Timepicker
+  .el-time-panel,
+  .el-time-range-picker {
+    @include set-ele-var('timepicker', $var);
+  }
+}

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

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