yuang-framework-ui-pc 1.0.20 → 1.2.1

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

@@ -0,0 +1,2 @@
+import "element-plus/es/components/message-box/style/index";
+import "./index.scss";

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

@@ -0,0 +1,148 @@
+@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 $transition-base, background-color $transition-base);
+    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__status {
+    flex-shrink: 0;
+    font-size: eleVar('message-box', 'status-size');
+  }
+
+  .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: 0;
+    margin: eleVar('message-box', 'input-margin');
+    position: relative;
+  }
+
+  .el-message-box__errormsg {
+    line-height: 18px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+  }
+}
+
+.el-message-box .el-message-box__status.el-message-box-icon--info {
+  color: elVar('color-primary');
+}
+
+.el-message-box__message {
+  word-break: break-all;
+}
+
+body .el-overlay.is-message-box > .el-overlay-message-box {
+  overflow-x: hidden;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* useMessageBox */
+.ele-message-box > .el-message-box__content > .el-message-box__container {
+  gap: 0;
+
+  & > .el-message-box__status {
+    width: auto;
+    height: auto;
+  }
+}
+
+.ele-message-box-icon {
+  width: 1em;
+  height: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+}
+
+/* 容器 */
+.ele-message-box-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  pointer-events: none;
+  overflow: hidden;
+
+  & > .el-overlay.is-message-box {
+    pointer-events: auto;
+    position: absolute;
+
+    & > .el-overlay-message-box {
+      position: absolute;
+    }
+  }
+
+  &.is-hide {
+    display: none;
+  }
+}

package/es/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/es/ele-app/style/overwrite/notification/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,2 @@
+import "element-plus/es/components/notification/style/index";
+import "./index.scss";

package/es/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 $transition-base, background-color $transition-base);
+
+    &: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/es/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/es/ele-app/style/overwrite/popper/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+import "./index.scss";

package/es/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/es/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/es/ele-app/style/overwrite/radio/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+import "./index.scss";

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

@@ -0,0 +1,128 @@
+@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 {
+    width: eleVar('radio', 'size');
+    height: eleVar('radio', 'size');
+    background: eleVar('radio', 'bg');
+    border: eleVar('radio', 'border');
+    border-radius: eleVar('radio', 'radius');
+    transition: (
+      border-color $transition-base,
+      background-color $transition-base
+    );
+
+    &::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/es/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/es/ele-app/style/overwrite/select/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+import "./index.scss";

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

@@ -0,0 +1,203 @@
+@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 $transition-base, background-color $transition-base);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    & > span {
+      flex: 1;
+    }
+
+    & + .el-select-dropdown__item {
+      margin-top: eleVar('select', 'item-margin');
+    }
+
+    &.selected,
+    &.is-selected {
+      background: eleVar('select', 'item-active-bg');
+      font-weight: eleVar('select', 'item-active-font-weight');
+
+      &:hover,
+      &.hover,
+      &.is-hovering {
+        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,
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected {
+    background: eleVar('select', 'item-active-bg');
+
+    &:hover,
+    &.hover,
+    &.is-hovering {
+      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-tags-wrapper .el-tag__content,
+.el-select__collapse-tag .el-tag__content,
+.el-select__selected-item .el-tag__content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.el-select .el-tag__content .el-select__tags-text {
+  line-height: 1;
+}
+
+.el-select .el-select-tags-wrapper.has-prefix {
+  margin: 0 !important;
+  box-sizing: border-box;
+}
+
+.el-select .el-select__tags {
+  box-sizing: border-box;
+  padding: 0 0 0 4px;
+  left: 0;
+}
+
+.el-select .el-select__selection.is-near {
+  gap: 0;
+  margin: 0 0 0 calc(0px - #{eleVar('input', 'padding-left', 12px)});
+  padding: 1px 0 1px 3px;
+  box-sizing: border-box;
+}
+
+.el-select .el-select__tags .el-tag,
+.el-select__collapse-tags .el-select__collapse-tag .el-tag {
+  flex-shrink: 0;
+  margin: 2px 4px 2px 0;
+  height: calc(elVar('component-size') - 4px - 4px);
+  border: none;
+}
+
+.el-select .el-select__tags .el-select__input {
+  margin: 0 0 0 5.8px !important;
+}
+
+.el-select__selection.is-near > .el-select__selected-item,
+.el-popper > .el-select__selection > .el-select__selected-item {
+  flex-shrink: 0;
+  margin: 2px 4px 2px 0;
+}
+
+.el-select__selection .el-select__selected-item > .el-tag {
+  height: calc(elVar('component-size') - 4px - 4px);
+  border: none;
+}
+
+/* 小尺寸 */
+.el-select--small .el-select__tags .el-tag--small,
+.el-select__collapse-tags .el-select__collapse-tag .el-tag--small {
+  margin: 1px 4px 1px 0;
+  height: calc(elVar('component-size', 'small') - 4px - 2px);
+}
+
+.el-select--small .el-select__selection.is-near {
+  margin: 0 0 0 calc(0px - #{eleVar('input-sm', 'padding-left', 8px)});
+  padding: 1px 0 1px 3px;
+}
+
+.el-select--small .el-select__selection.is-near > .el-select__selected-item {
+  margin: 1px 4px 1px 0;
+}
+
+.el-select--small .el-select__selected-item > .el-tag,
+.el-popper > .el-select__selection .el-tag--small {
+  height: calc(elVar('component-size', 'small') - 4px - 2px);
+}
+
+.el-select--small .el-select__tags .el-select__input {
+  margin: 0 0 0 3.8px !important;
+}
+
+/* 大尺寸 */
+.el-select--large .el-select__tags {
+  padding: 1px 0 1px 6px;
+}
+
+.el-select--large .el-select__selection.is-near {
+  padding: 3px 0 3px 5px;
+}
+
+.el-select--large .el-select__tags .el-tag,
+.el-select--large .el-select__selected-item > .el-tag {
+  height: calc(elVar('component-size', 'large') - 8px - 4px);
+}
+
+.el-select--large .el-select__selection.is-near {
+  margin: 0 0 0 calc(0px - #{eleVar('input-lg', 'padding-left', 16px)});
+}
+
+.el-select--large .el-select__tags .el-select__input {
+  margin: 0 0 0 7.8px !important;
+}
+
+/* 多选搜索框 */
+.el-select-tags-wrapper.has-prefix + .el-select__input {
+  margin: 0 0 0 2px !important;
+}
+
+/* 标签溢出气泡 */
+.el-popper > .el-select__collapse-tags,
+.el-popper > .el-select__selection {
+  margin: -5px -11px;
+  padding: 8px 10px;
+  background: inherit;
+  border-radius: inherit;
+  box-sizing: border-box;
+  gap: 0;
+}

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

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

package/es/ele-app/style/overwrite/tag/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+import "./index.scss";