hy-dispatch-ui-v3 0.2.12 → 0.2.14

package/es/style/element/hy-element.scss

@@ -0,0 +1,981 @@
+// 测试
+:root {
+  --hy-el-fill-color-light: rgba(var(--hy-background-2), 1);
+  --hy-el-fill-color-lighter: rgba(var(--hy-background-4), 1);
+  --hy-el-fill-color-blank: rgba(var(--hy-background-2), 1);
+  --hy-el-color-info: rgba(var(--hy-info), 1);
+  --hy-el-border: var(--hy-el-border-width) var(--hy-el-border-style) rgba(var(--hy-border), 1);
+  --hy-el-disabled-border-color: rgba(var(--hy-border), 1);
+  --hy-el-bg-color: rgba(var(--hy-background), 1);
+  --hy-el-text-color-secondary: rgba(var(--hy-auxiliary), 1);
+  --hy-el-text-color-regular: rgba(var(--hy-auxiliary), 1);
+  --hy-el-border-color-light: rgba(var(--hy-border), 1);
+  --hy-el-border-color-lighter: rgba(var(--hy-border), 1);
+  --hy-el-color-primary: rgba(var(--hy-theme), 1);
+  --hy-el-text-color-placeholder: rgba(var(--hy-info), 1);
+  --hy-el-text-color-primary: rgba(var(--hy-auxiliary), 1);
+  --hy-el-color-danger: rgba(var(--hy-danger), 1);
+}
+
+// 表格
+.hy-el-table {
+  --hy-el-table-border-color: rgba(var(--hy-border), 1);
+  --hy-el-table-border: 1px solid rgba(var(--hy-border), 0.5);
+  --hy-el-table-text-color: rgba(var(--hy-main), 1);
+  --hy-el-table-header-text-color: rgba(var(--hy-main), 1);
+  --hy-el-table-row-hover-bg-color: rgba(var(--hy-background-2-50), 1);
+  --hy-el-table-current-row-bg-color: rgba(var(--hy-background-2-50), 1);
+  --hy-el-table-header-bg-color: rgba(var(--hy-background-2), 1);
+  --hy-el-table-fixed-box-shadow: var(--hy-el-box-shadow-light);
+  --hy-el-table-bg-color: rgba(var(--hy-background), 1);
+  --hy-el-table-tr-bg-color: rgba(var(--hy-background), 1);
+  --hy-el-table-expanded-cell-bg-color: rgba(var(--hy-background), 1);
+  --hy-el-table-fixed-left-column: inset 10px 0 10px -10px rgba(var(--hy-background-3), 1);
+  --hy-el-table-fixed-right-column: inset -10px 0 10px -10px rgba(var(--hy-background-3), 1);
+  --hy-el-table-index: var(--hy-el-index-normal);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  height: -moz-fit-content;
+  height: fit-content;
+  width: 100%;
+  max-width: 100%;
+  background-color: var(--hy-el-table-bg-color);
+  font-size: var(--hy-el-font-size-base);
+  color: var(--hy-el-table-text-color);
+}
+
+.hy-el-table__expand-icon {
+  color: rgba(var(--hy-main), 1);
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 700;
+  width: min(23px, 100%);
+  height: 23px;
+}
+
+.hy-el-table__expand-icon>.hy-el-icon {
+  font-size: 12px;
+}
+
+.hy-el-table tr:hover td:first-child {
+  box-shadow: inset 10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table tr:hover td:last-child {
+  box-shadow: inset -10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table tr:hover td:not(:first-child):not(:last-child) {
+  box-shadow: inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-scrollbar__view {
+  height: 100%;
+}
+
+// 虚拟表格
+.hy-el-table-v2 {
+  --hy-el-table-border-color: rgba(var(--hy-border), 1);
+  --hy-el-table-border: 1px solid rgba(var(--hy-border), 0.5);
+  --hy-el-table-text-color: rgba(var(--hy-main), 1);
+  --hy-el-table-header-text-color: rgba(var(--hy-main), 1);
+  --hy-el-table-row-hover-bg-color: rgba(var(--hy-background-2-50), 1);
+  --hy-el-table-current-row-bg-color: rgba(var(--hy-background-2-50), 1);
+  --hy-el-table-header-bg-color: rgba(var(--hy-background-2), 1);
+  --hy-el-table-fixed-box-shadow: var(--hy-el-box-shadow-light);
+  --hy-el-table-bg-color: rgba(var(--hy-background), 1);
+  --hy-el-table-tr-bg-color: rgba(var(--hy-background), 1);
+  --hy-el-table-expanded-cell-bg-color: rgba(var(--hy-background), 1);
+  --hy-el-table-fixed-left-column: inset 10px 0 10px -10px rgba(var(--hy-background-3), 1);
+  --hy-el-table-fixed-right-column: inset -10px 0 10px -10px rgba(var(--hy-background-3), 1);
+  --hy-el-table-index: var(--hy-el-index-normal);
+  font-size: var(--hy-el-font-size-base);
+}
+
+.hy-el-table-v2__table .hy-el-table-v2__row:hover .hy-el-table-v2__row-cell:first-child {
+  box-shadow: inset 10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table-v2__table .hy-el-table-v2__row:hover .hy-el-table-v2__row-cell:last-child {
+  box-shadow: inset -10px 0 10px -10px rgba(var(--hy-theme), 0.2), inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table-v2__table .hy-el-table-v2__row:hover .hy-el-table-v2__row-cell:not(:first-child):not(:last-child) {
+  box-shadow: inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2), inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table-v2__right {
+  display: flex;
+  flex-direction: column-reverse;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  background-color: var(--hy-el-bg-color);
+  right: 0;
+  box-shadow: -2px 0 4px 0 rgba(var(--hy-background-3), 1);
+}
+
+.hy-el-table-v2__left {
+  display: flex;
+  flex-direction: column-reverse;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  background-color: var(--hy-el-bg-color);
+  left: 0;
+  box-shadow: 2px 0 4px 0 rgba(var(--hy-background-3), 1);
+}
+
+.hy-el-empty__image svg {
+  color: rgba(var(--hy-auxiliary), 1);
+  fill: currentColor;
+  width: 100%;
+  height: 100%;
+  vertical-align: top;
+}
+
+// input输入框
+.hy-el-input {
+  --hy-el-input-text-color: rgba(var(--hy-main), 1);
+  --hy-el-input-border: rgba(var(--hy-border), 1);
+  --hy-el-input-hover-border: rgba(var(--hy-theme), 1);
+  --hy-el-input-focus-border: rgba(var(--hy-theme), 1);
+  --hy-el-input-transparent-border: 0 0 0 1px transparent inset;
+  --hy-el-input-border-color: rgba(var(--hy-border), 1);
+  --hy-el-input-border-radius: var(--hy-el-border-radius-base);
+  --hy-el-input-bg-color: rgba(var(--hy-background-2), 1);
+  --hy-el-input-icon-color: var(--hy-el-text-color-placeholder);
+  --hy-el-input-placeholder-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-input-hover-border-color: rgba(var(--hy-theme), 1);
+  --hy-el-input-clear-hover-color: var(--hy-el-text-color-secondary);
+  --hy-el-input-focus-border-color: rgba(var(--hy-theme), 1);
+  --hy-el-input-width: 100%;
+  --hy-el-input-height: var(--hy-el-component-size);
+  position: relative;
+  font-size: var(--hy-el-font-size-base);
+  display: inline-flex;
+  width: var(--hy-el-input-width);
+  line-height: var(--hy-el-input-height);
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.hy-el-input-group__prepend {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.hy-el-input-group__append {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.hy-el-input.is-disabled .hy-el-input__wrapper {
+  background-color: rgba(var(--hy-background-2), 1);
+  // background-color: var(--hy-el-input-bg-color);
+  cursor: not-allowed;
+  box-shadow: 0 0 0 1px rgba(var(--hy-border), 1) inset;
+}
+
+.hy-el-textarea {
+  --hy-el-input-text-color: rgba(var(--hy-main), 1);
+  --hy-el-input-border: rgba(var(--hy-border), 1);
+  --hy-el-input-hover-border: rgba(var(--hy-theme), 1);
+  --hy-el-input-focus-border: rgba(var(--hy-theme), 1);
+  --hy-el-input-transparent-border: 0 0 0 1px transparent inset;
+  --hy-el-input-border-color: rgba(var(--hy-border), 1);
+  --hy-el-input-border-radius: var(--hy-el-border-radius-base);
+  --hy-el-input-bg-color: rgba(var(--hy-background-2), 1);
+  --hy-el-input-icon-color: var(--hy-el-text-color-placeholder);
+  --hy-el-input-placeholder-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-input-hover-border-color: rgba(var(--hy-theme), 1);
+  --hy-el-input-clear-hover-color: var(--hy-el-text-color-secondary);
+  --hy-el-input-focus-border-color: rgba(var(--hy-theme), 1);
+  --hy-el-input-width: 100%;
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+  font-size: var(--hy-el-font-size-base);
+}
+
+.hy-el-input-group__append,
+.hy-el-input-group__prepend {
+  background-color: var(--hy-el-fill-color-light);
+  color: rgba(var(--hy-auxiliary), 1);
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  border-radius: var(--hy-el-input-border-radius);
+  padding: 0 20px;
+  white-space: nowrap;
+}
+
+// 日期选择器
+.hy-el-popper.hy-el-tooltip.hy-el-picker__popper {
+  --hy-el-border-color-light: rgba(var(--hy-auxiliary), 1);
+}
+
+.hy-el-popper {
+  --hy-el-popper-border-radius: var(--hy-el-popover-border-radius, 4px);
+  --hy-el-popper-bg-color-light: rgba(var(--hy-background-2), 1);
+  --hy-el-popper-bg-color-dark: rgba(var(--hy-background-2), 1);
+  position: absolute;
+  border-radius: var(--hy-el-popper-border-radius);
+  padding: 5px 11px;
+  z-index: 2000;
+  font-size: 12px;
+  line-height: 20px;
+  min-width: 10px;
+  overflow-wrap: break-word;
+  word-break: normal;
+  visibility: visible;
+}
+
+.hy-el-date-picker {
+  --hy-el-datepicker-text-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-datepicker-off-text-color: rgba(var(--hy-info), 1);
+  --hy-el-datepicker-header-text-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-datepicker-icon-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-datepicker-border-color: var(--hy-el-disabled-border-color);
+  --hy-el-datepicker-inner-border-color: var(--hy-el-border-color-light);
+  --hy-el-datepicker-inrange-bg-color: rgba(var(--hy-background-2), 1);
+  --hy-el-datepicker-inrange-hover-bg-color: rgba(var(--hy-background-3), 1);
+  --hy-el-datepicker-active-color: rgba(var(--hy-background-3), 1);
+  --hy-el-datepicker-hover-text-color: rgba(var(--hy-theme), 1);
+  --hy-el-datepicker-bg-color: rgba(var(--hy-background-2), 1);
+  --hy-el-fill-color-blank: rgba(var(--hy-background-2), 1);
+}
+
+.hy-el-date-table td.selected .hy-el-date-table-cell__text {
+  background-color: var(--hy-el-datepicker-active-color);
+  color: rgba(var(--hy-theme), 1);
+}
+
+.hy-el-button.is-plain {
+  --hy-el-button-hover-text-color: rgba(var(--hy-theme), 1);
+  --hy-el-button-hover-bg-color: rgba(var(--hy-background-2), 1);
+  --hy-el-button-hover-border-color: rgba(var(--hy-theme), 1);
+}
+
+.hy-el-button {
+  --hy-el-button-font-weight: var(--hy-el-font-weight-primary);
+  --hy-el-button-border-color: rgba(var(--hy-border), 1);
+  --hy-el-button-bg-color: var(--hy-el-fill-color-blank);
+  --hy-el-button-text-color: var(--hy-el-text-color-regular);
+  --hy-el-button-disabled-text-color: var(--hy-el-disabled-text-color);
+  --hy-el-button-disabled-bg-color: var(--hy-el-fill-color-blank);
+  --hy-el-button-disabled-border-color: var(--hy-el-border-color-light);
+  --hy-el-button-divide-border-color: rgba(255, 255, 255, 0.5);
+  --hy-el-button-hover-text-color: var(--hy-el-color-primary);
+  --hy-el-button-hover-bg-color: var(--hy-el-color-primary-light-9);
+  --hy-el-button-hover-border-color: var(--hy-el-color-primary-light-7);
+  --hy-el-button-active-text-color: var(--hy-el-button-hover-text-color);
+  --hy-el-button-active-border-color: var(--hy-el-color-primary);
+  --hy-el-button-active-bg-color: var(--hy-el-button-hover-bg-color);
+  --hy-el-button-outline-color: var(--hy-el-color-primary-light-5);
+  --hy-el-button-hover-link-text-color: var(--hy-el-text-color-secondary);
+  --hy-el-button-active-color: var(--hy-el-text-color-primary);
+}
+
+.hy-el-date-table.is-week-mode .hy-el-date-table__row.current .hy-el-date-table-cell {
+  background-color: rgba(var(--hy-background-3), 1);
+}
+
+.hy-el-date-table td.start-date .hy-el-date-table-cell__text,
+.hy-el-date-table td.end-date .hy-el-date-table-cell__text {
+  background-color: rgba(var(--hy-background-2), 1);
+}
+
+.hy-el-date-table td.start-date .hy-el-date-table-cell,
+.hy-el-date-table td.end-date .hy-el-date-table-cell {
+  color: rgba(var(--hy-theme), 1);
+}
+
+.hy-el-year-table td.current:not(.disabled) .hy-el-date-table-cell__text {
+  color: rgba(var(--hy-theme), 1);
+  background-color: var(--hy-el-datepicker-active-color);
+}
+
+.hy-el-month-table td.current:not(.disabled) .hy-el-date-table-cell__text {
+  color: rgba(var(--hy-theme), 1);
+  background-color: var(--hy-el-datepicker-active-color);
+}
+
+.hy-el-date-table td.current:not(.disabled) .hy-el-date-table-cell__text {
+  color: rgba(var(--hy-theme), 1);
+  background-color: var(--hy-el-datepicker-active-color);
+}
+
+.hy-el-date-range-picker {
+  --hy-el-datepicker-text-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-datepicker-off-text-color: rgba(var(--hy-info), 1);
+  --hy-el-datepicker-header-text-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-datepicker-icon-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-datepicker-border-color: rgba(var(--hy-border), 1);
+  --hy-el-datepicker-inner-border-color: rgba(var(--hy-border), 1);
+  --hy-el-datepicker-inrange-bg-color: rgba(var(--hy-background-2), 1);
+  --hy-el-datepicker-inrange-hover-bg-color: rgba(var(--hy-background-3), 1);
+  --hy-el-datepicker-active-color: rgba(var(--hy-background-3), 1);
+  --hy-el-datepicker-hover-text-color: rgba(var(--hy-theme), 1);
+  --hy-el-datepicker-bg-color: rgba(var(--hy-background-2), 1);
+}
+
+.hy-el-date-table td.in-range .hy-el-date-table-cell {
+  background-color: rgba(var(--hy-background-3), 1);
+}
+
+.hy-el-date-editor.hy-el-input__wrapper {
+  box-shadow: 0 0 0 1px rgba(var(--hy-border), 1) inset;
+}
+
+.hy-el-date-editor {
+  --hy-el-input-icon-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-input-placeholder-color: rgba(var(--hy-auxiliary), 1);
+  --hy-el-input-hover-border: rgba(var(--hy-theme), 1);
+  --hy-el-input-hover-border-color: rgba(var(--hy-theme), 1);
+  --hy-el-text-color-placeholder: rgba(var(--hy-auxiliary), 1);
+  --hy-el-text-color-regular: rgba(var(--hy-main), 1);
+}
+
+.hy-el-date-editor .hy-el-range__icon {
+  color: rgba(var(--hy-auxiliary), 1);
+}
+
+.hy-el-date-picker__editor-wrap .hy-el-input__wrapper {
+  background-color: rgba(var(--hy-background-2), 1);
+}
+
+.hy-el-scrollbar__wrap .hy-el-time-spinner__list .hy-el-time-spinner__item:hover {
+  background-color: rgba(var(--hy-background-3), 1);
+}
+
+.hy-el-button.is-text:not(.is-disabled):hover {
+  background-color: rgba(var(--hy-background-3), 1);
+}
+
+// 单选框
+.hy-el-radio__inner {
+  background-color: rgba(var(--hy-background), 1);
+}
+
+.hy-el-radio__input.is-checked .hy-el-radio__inner::after {
+  background-color: rgba(var(--hy-theme), 1);
+}
+
+.hy-el-radio__input.is-checked .hy-el-radio__inner {
+  border-color: var(--hy-el-color-primary);
+  background: rgba(var(--hy-background), 1);
+}
+
+// 多选框
+.hy-el-checkbox__inner {
+  background-color: rgba(var(--hy-background), 1)
+}
+
+.hy-el-checkbox__input.is-checked .hy-el-checkbox__inner,
+.hy-el-checkbox__input.is-indeterminate .hy-el-checkbox__inner {
+  background: rgba(var(--hy-theme), .5);
+  box-shadow: 0 0 4px 0 rgba(var(--hy-theme), 1);
+  border-color: rgba(var(--hy-theme), 1);
+}
+
+.hy-el-checkbox__input.is-disabled .hy-el-checkbox__inner {
+  background-color: rgba(var(--hy-background), 1);
+  border-color: rgba(var(--hy-info), 1);
+  cursor: not-allowed;
+}
+
+.hy-el-checkbox__input.is-disabled.is-checked .hy-el-checkbox__inner {
+  background-color: rgba(var(--hy-background), 1);
+  border-color: rgba(var(--hy-info), 1);
+  box-shadow: 0 0 4px 0 rgba(var(--hy-info), 1);
+}
+
+.hy-el-checkbox__input.is-disabled.is-checked .hy-el-checkbox__inner::after {
+  border-color: rgba(var(--hy-info), 1);
+}
+
+.hy-el-checkbox-button.is-checked .hy-el-checkbox-button__inner {
+  color: var(--hy-el-checkbox-button-checked-text-color);
+  // background: linear-gradient(180deg, rgba(var(--hy-auxiliary), .5), rgba(var(--hy-auxiliary), .8) 53%, rgba(var(--hy-theme), .9));
+  background: rgba(var(--hy-theme), .5);
+  // border: 1px solid rgba(var(--hy-theme), 1);
+  box-shadow: inset 0px 0px 0px 1px rgba(var(--hy-theme), 1) !important;
+  position: relative;
+  z-index: 99;
+  // &::after {
+  //   content: '';
+  //   position: absolute;
+  //   bottom: 0px;
+  //   left: 0px;
+  //   width: 100%;
+  //   height: 2px;
+  //   background: linear-gradient( 90deg, rgba(var(--hy-theme), 0) 0%, rgba(var(--hy-theme), 1) 49.31%, rgba(var(--hy-theme), 0) 100%);
+  // }
+}
+
+// 选择框
+.hy-el-popper.hy-el-tooltip.hy-el-select__popper {
+  --hy-el-border-color-light: rgba(var(--hy-border), 1);
+}
+
+.hy-el-select__wrapper {
+  box-shadow: 0 0 0 1px rgba(var(--hy-border), 1) inset;
+}
+
+.hy-el-select__wrapper.is-hovering:not(.is-focused) {
+  box-shadow: 0 0 0 1px rgba(var(--hy-theme), 1) inset;
+}
+
+.hy-el-select__placeholder.is-transparent {
+  color: rgba(var(--hy-auxiliary), 1);
+}
+
+.hy-el-select__placeholder {
+  color: rgba(var(--hy-main), 1);
+}
+
+.hy-el-select__caret {
+  color: rgba(var(--hy-main), 1);
+}
+
+.hy-el-select-dropdown__item.is-selected {
+  background-color: rgba(var(--hy-background-2), 1);
+}
+
+.hy-el-select-dropdown__item.is-hovering:hover {
+  background-color: rgba(var(--hy-background-3), 1);
+  color: rgba(var(--hy-theme), 1);
+}
+
+.hy-el-select__wrapper.is-disabled {
+  box-shadow: 0 0 0 1px rgba(var(--hy-info), 1) inset !important;
+}
+
+.hy-el-tag.hy-el-tag--info {
+  --hy-el-tag-bg-color: rgba(var(--hy-background-2), 1);
+  --hy-el-tag-border-color: rgba(var(--hy-border), 1);
+  --hy-el-tag-hover-color: var(--hy-el-color-info);
+}
+
+.hy-el-select__selection .hy-el-tag {
+  border-color: rgba(var(--hy-border), 1);
+}
+
+.hy-el-tag.hy-el-tag--info {
+  --hy-el-tag-text-color: rgba(var(--hy-main), 1);
+}
+
+.hy-el-tag .hy-el-tag__close {
+  background-color: rgba(var(--hy-danger-2), 1) !important;
+}
+
+// 消息提示框
+.hy-el-popper,
+.hy-el-tooltip {
+  --hy-el-border-color-light: rgba(var(--hy-theme), 1);
+}
+
+.hy-el-popper.is-dark {
+  --hy-el-border-color-light: rgba(var(--hy-theme), 1);
+  --hy-el-text-color-primary: rgba(var(--hy-theme), 1);
+  color: rgba(var(--hy-main), 1);
+  background: var(--hy-el-popper-bg-color-dark);
+  border: 1px solid var(--hy-el-text-color-primary);
+}
+
+.hy-el-popover.hy-el-popper {
+  color: rgba(var(--hy-main), 1);
+  padding: 0px;
+}
+
+// 分页器
+.hy-el-pagination.is-background .btn-prev {
+  border-radius: 50%;
+  background: rgba(var(--hy-background-2), 1);
+  color: rgba(var(--hy-main), 1);
+
+  &:hover {
+    color: rgba(var(--hy-theme), 1);
+  }
+}
+
+.hy-el-pagination.is-background .btn-prev:disabled {
+  border-radius: 50%;
+
+  &:hover {
+    color: rgba(var(--hy-main), 1);
+  }
+}
+
+.hy-el-pagination.is-background .btn-next,
+.hy-el-pagination.is-background .hy-el-pager li {
+  border-radius: 50%;
+  background: rgba(var(--hy-background-2), 1);
+  color: rgba(var(--hy-main), 1);
+
+  &:hover {
+    color: rgba(var(--hy-theme), 1);
+  }
+}
+
+.hy-el-pagination.is-background .hy-el-pager li {
+  border-radius: 50%;
+  background: rgba(var(--hy-background-2), 1);
+  color: rgba(var(--hy-main), 1);
+
+  &:hover {
+    color: rgba(var(--hy-theme), 1);
+  }
+}
+
+.hy-el-pagination.is-background .btn-prev.is-active,
+.hy-el-pagination.is-background .btn-next.is-active,
+.hy-el-pagination.is-background .hy-el-pager li.is-active {
+  background: rgba(var(--hy-theme), .5);
+  box-shadow: 0 0 6px 0 rgba(var(--hy-theme), 1);
+  border: 1px solid rgba(var(--hy-theme), 1);
+  color: rgba(var(--hy-main), 1);
+
+}
+
+.hy-el-pagination__total {
+  color: rgba(var(--hy-main), 1);
+}
+
+.hy-el-pagination__jump {
+  color: rgba(var(--hy-main), 1);
+}
+
+.hy-el-pagination.is-background .btn-prev:disabled,
+.hy-el-pagination.is-background .btn-prev.is-disabled,
+.hy-el-pagination.is-background .btn-next:disabled,
+.hy-el-pagination.is-background .btn-next.is-disabled,
+.hy-el-pagination.is-background .hy-el-pager li:disabled,
+.hy-el-pagination.is-background .hy-el-pager li.is-disabled {
+  &:hover {
+    color: var(--hy-el-text-color-placeholder);
+  }
+}
+
+// 下拉框
+.hy-el-dropdown__popper.hy-el-popper {
+  --hy-el-border-color-light: rgba(var(--hy-border), 1);
+}
+
+.hy-el-dropdown-menu {
+  background-color: rgba(var(--hy-background-2), 1);
+
+  .hy-el-dropdown-menu__item {
+    &:hover {
+      background-color: rgba(var(--hy-background-3), 1);
+    }
+  }
+}
+
+.hy-el-dropdown-menu__item:not(.is-disabled):focus,
+.hy-el-dropdown-menu__item:not(.is-disabled):hover {
+  background-color: rgba(var(--hy-background-3), 1);
+}
+
+.hy-el-dialog {
+  --hy-el-dialog-bg-color: var(--hy-el-bg-color);
+  --hy-el-dialog-box-shadow: 0 0 12px 0 rgba(var(--hy-theme), 1);
+  box-shadow: 0 0 12px 0 transparent;
+  background-color: rgba(var(--hy-background), .7);
+  backdrop-filter: blur(2px);
+  border: 1px solid rgba(var(--hy-theme), 1);
+  padding: 0px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    width: 24px;
+    height: 24px;
+    border-left: 1px solid;
+    border-top: 1px solid;
+    border-top-left-radius: 4px;
+    border-image: radial-gradient(circle at 16.27% 15.07%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
+    pointer-events: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    width: 24px;
+    height: 24px;
+    border-right: 1px solid;
+    border-top: 1px solid;
+    border-top-right-radius: 4px;
+    border-image: radial-gradient(circle at 83.73% 15.07%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
+    pointer-events: none;
+  }
+}
+
+.hy-el-dialog__body {
+  position: relative;
+  color: rgba(var(--hy-main), 1);
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 2px;
+    bottom: 2px;
+    width: 24px;
+    height: 24px;
+    border-left: 1px solid;
+    border-bottom: 1px solid;
+    border-bottom-left-radius: 4px;
+    border-image: radial-gradient(circle at 16.27% 84.93%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
+    pointer-events: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    width: 24px;
+    height: 24px;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-bottom-right-radius: 4px;
+    border-image: radial-gradient(circle at 83.73% 84.93%, rgba(var(--hy-theme), 1) 0%, rgba(56, 189, 227, 0) 100%) 1;
+    pointer-events: none;
+  }
+}
+
+.hy-el-dialog__header {
+  padding: 0px !important;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 2px;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 1px;
+    background: linear-gradient(90deg, rgba(45, 242, 255, 0) 0%, rgba(var(--hy-theme), 1) 10%, rgba(var(--hy-theme), 1) 90%, rgba(45, 242, 255, 0) 100%);
+    pointer-events: none;
+  }
+}
+
+.hy-el-dialog__title {
+  color: rgba(var(--hy-main), 1);
+}
+
+.hy-el-dialog__headerbtn .hy-el-dialog__close {
+  color: rgba(var(--hy-main), 1);
+}
+
+.hy-el-drawer__header {
+  color: rgba(var(--hy-main), 1);
+}
+
+//  .hy-el-drawer {
+//   --hy-el-drawer-bg-color: rgba(var(--hy-background-4), 1);
+//  }
+// 选项卡
+.hy-el-tabs {
+  border-radius: 6px 6px 0 0;
+  overflow: hidden;
+}
+
+.hy-el-tabs__nav-scroll {
+  background-color: rgba(var(--hy-background-2), 1);
+}
+
+.hy-el-tabs__nav-wrap::after {
+  background-color: rgba(var(--hy-background), 1);
+}
+
+.hy-el-tabs__active-bar {
+  background: transparent;
+}
+
+.hy-el-tabs .hy-el-tabs__item {
+  border-radius: 6px 6px 0 0;
+  border: 1px solid rgba(var(--hy-background-2), 1);
+  padding: 0 20px !important;
+
+  &:hover {
+    border-color: rgba(var(--hy-theme), .5);
+    box-shadow: inset 0 0 6px 0 rgba(var(--hy-theme), .5);
+  }
+}
+
+.hy-el-tabs__header {
+  margin: 0;
+}
+
+.hy-el-tabs__header .hy-el-tabs__item {
+  color: rgba(var(--hy-auxiliary), 1);
+  font-size: 14px;
+
+  &:hover {
+    color: rgba(var(--hy-main), 1);
+  }
+}
+
+.hy-el-tabs__content {
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+  border: 1px solid rgba(var(--hy-background-2), 1);
+}
+
+.hy-el-tabs__item.is-active {
+  color: rgba(var(--hy-main), 1);
+  background-color: rgba(var(--hy-background-3), 1);
+  font-weight: 700;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    left: 0px;
+    border-radius: 999px;
+    background: linear-gradient(90deg,
+        rgba(45, 242, 255, 0) 0%,
+        rgba(var(--hy-theme), 1) 50%,
+        rgba(45, 242, 255, 0) 100%);
+    pointer-events: none;
+  }
+}
+
+.childrenTabs {
+  .hy-el-tabs {
+    border-radius: 6px 6px 0 0;
+    overflow: hidden;
+
+    .hy-el-tabs__nav-next,
+    .hy-el-tabs__nav-prev {
+      i::before {
+        top: 2px !important;
+      }
+    }
+
+    .hy-el-tabs__header {
+      margin: 0;
+
+      .hy-el-tabs__active-bar {
+        transform: translateX(0px);
+        height: 2px;
+        border-bottom: 3px solid;
+        border-image: linear-gradient(50deg,
+            rgba(0, 216, 247, 0) 0%,
+            rgba(var(--hy-theme), 1) 50%,
+            rgba(0, 216, 247, 0)) 2 2 2 2;
+        background: transparent;
+      }
+    }
+
+    .hy-el-tabs__content {
+      border-radius: 0 0 8px 8px;
+      overflow: hidden;
+      border: 0px solid rgba(var(--hy-border), 1);
+    }
+
+    .hy-el-tabs__item {
+      border-radius: 6px 6px 0px 0px;
+      border: 0px solid transparent;
+      padding: 0 20px !important;
+    }
+
+    .hy-el-tabs__item:hover {
+      color: #fff;
+      box-shadow: transparent 0px 1px 3px 0px inset;
+      border-bottom: 3px solid;
+      border-image: linear-gradient(50deg,
+          rgba(0, 216, 247, 0) 0%,
+          rgba(var(--hy-theme), 1) 40%,
+          rgba(0, 216, 247, 0) 80%) 2 2 2 2;
+    }
+
+    .is-active {
+      color: #fff !important;
+      background: transparent;
+      box-shadow: transparent 0px 1px 3px 0px inset;
+      border-bottom: 3px solid;
+      border-image: linear-gradient(50deg,
+          rgba(0, 216, 247, 0) 0%,
+          rgba(var(--hy-theme), 1) 40%,
+          rgba(0, 216, 247, 0) 80%) 2 2 2 2;
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 0px;
+        bottom: 0;
+        left: 0px;
+      }
+    }
+
+    .hy-el-tabs__nav-wrap.is-scrollable,
+    .hy-el-tabs__nav-scroll {
+      background: transparent;
+    }
+  }
+}
+
+// 级联选择器
+.hy-el-cascader__dropdown {
+  --hy-el-border-color-light: rgba(var(--hy-border), 1);
+}
+
+.hy-el-cascader-panel {
+  --hy-el-cascader-menu-border: 1px solid rgba(var(--hy-border), 1);
+}
+
+// 表单
+.hy-el-form-item--label-top .hy-el-form-item__label {
+  width: 100%;
+  color: rgba(var(--hy-main), 1);
+}
+
+.hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.hy-el-form-item__label-wrap>.hy-el-form-item__label:before {
+  color: transparent;
+  margin-right: 0px;
+  display: none;
+}
+
+.hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.hy-el-form-item__label:before {
+  color: transparent;
+  margin-right: 0px;
+  display: none;
+}
+
+.hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left>.hy-el-form-item__label .form-label {
+  font-size: 14px;
+  color: rgba(var(--hy-main), 1);
+
+  &::after {
+    content: '*';
+    color: rgba(var(--hy-danger), 1);
+    margin-left: 4px;
+  }
+}
+
+
+
+// .hy-el-switch {
+//   // --hy-el-switch-on-color: rgba(var(--hy-success-2), 1);
+//   // --hy-el-switch-off-color: rgba(var(--hy-background-3), 1);
+// }
+
+// .hy-el-switch__core {
+//   border: 1px solid var(--hy-el-switch-border-color, rgba(var(--hy-border), 1));
+// }
+
+// .hy-el-switch.is-checked .hy-el-switch__core {
+//   border-color: var(--hy-el-switch-border-color, rgba(var(--hy-auxiliary), 1));
+
+//   .hy-el-switch__inner-wrapper {
+//     color: rgba(var(--hy-main), 1);
+//   }
+// }
+
+// .hy-el-switch__core .hy-el-switch__inner-wrapper {
+//   color: rgba(var(--hy-auxiliary), 1);
+// }
+
+/* 折叠 */
+.collapse-item__header_lightColor.hy-el-collapse {
+
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+
+  .hy-el-collapse-item {
+    margin-top: 8px;
+    border-radius: 6px;
+    overflow: hidden;
+
+    .hy-el-collapse-item__header {
+      border-bottom: 1px solid transparent;
+      color: rgba(var(--hy-main), 1);
+      line-height: inherit;
+      text-align: left;
+      font-size: 14px;
+      font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
+      font-weight: 700;
+      display: flex;
+      justify-content: space-between;
+      position: relative;
+      height: 38px;
+      padding-left: 20px;
+    }
+
+    .hy-el-collapse-item__wrap {
+      border-bottom: 0px solid transparent;
+
+      .hy-el-collapse-item__content {
+        padding-bottom: 0px;
+      }
+    }
+
+  }
+}
+
+// 日历
+.hy-el-calendar {
+  background-color: rgba(var(--hy-background), 1);
+  --hy-el-calendar-border: var(--hy-el-table-border, 1px solid rgba(157, 167, 178, .5));
+
+  .hy-el-calendar__body {
+    padding: 0px;
+  }
+
+  .hy-el-calendar-table {
+    color: rgba(var(--hy-info), 1);
+
+    thead th {
+      color: rgba(var(--hy-main), 1);
+    }
+
+
+    td.is-selected {
+      box-shadow: 0px 0 12px 0px rgba(var(--hy-theme), 1) inset;
+      background: rgba(var(--hy-background-2), 1);
+      .hy-el-calendar-day {
+        border: 1px solid rgba(var(--hy-theme), 1);
+      }
+    }
+
+    td.is-today {
+      color: rgba(var(--hy-info), 1);
+    }
+
+    td.current {
+      background-color: rgba(var(--hy-background-2), 1);
+    }
+
+    .hy-el-calendar-day:hover {
+      border: 1px solid rgba(var(--hy-theme), 1);
+      box-shadow: 0px 0 12px 0px rgba(var(--hy-theme), 1) inset;
+      background: rgba(var(--hy-background-2), 1);
+    }
+
+    &:not(.is-range) td.next,
+    &:not(.is-range) td.prev {
+      background: rgba(var(--hy-background), 1);
+
+      .hy-el-calendar-day:hover {
+        background: rgba(var(--hy-background), 1);
+      }
+    }
+
+  }
+}