@zjhc/ui 0.0.0-stage → 0.1.0

package/theme-chalk/src/zjhc/cascader.scss

@@ -0,0 +1,26 @@
+.el-cascader-node__label {
+  padding: 0 10px;
+}
+.el-cascader-node {
+  .el-cascader-node__prefix {
+    font-size: var(--el-input-clear-icon);
+    left: 8px;
+  }
+}
+.el-cascader__dropdown.el-popper {
+  box-shadow: none;
+}
+.el-cascader {
+  .el-input {
+    height: auto;
+    min-height: var(--el-input-height);
+  }
+}
+.el-cascader-node.in-active-path,
+.el-cascader-node.is-selectable.in-checked-path,
+.el-cascader-node.is-active {
+  background-color: var(--el-primary-opactiy01);
+  &:hover {
+    background-color: var(--el-primary-opactiy01);
+  }
+}

package/theme-chalk/src/zjhc/checkbox.scss

@@ -0,0 +1,59 @@
+.el-checkbox .el-checkbox__label {
+  font-size: var(--el-font-size-base);
+}
+.el-checkbox {
+  --el-checkbox-font-size: var(--el-font-size-base);
+  .el-checkbox__inner {
+    &::after {
+      border-right-width: 1.6px;
+      border-bottom-width: 1.6px;
+    }
+  }
+}
+.el-checkbox-button.el-checkbox-button--large .el-checkbox-button__inner,
+.el-checkbox.is-bordered.el-checkbox--large .el-checkbox__label {
+  font-size: var(--el-font-size-large);
+  padding: 8px 19px;
+}
+.el-checkbox.is-bordered.el-checkbox--large .el-checkbox__label {
+  padding: 8px;
+}
+.el-checkbox.el-checkbox--large {
+  height: var(--el-button-height-large);
+}
+.el-checkbox-button .el-checkbox-button__inner {
+  font-size: var(--el-font-size-base);
+  padding: 7px 15px;
+}
+.el-checkbox.is-bordered.el-checkbox--large {
+  padding: 0 8px 0 11px;
+}
+
+.el-checkbox.el-checkbox--large,
+.el-checkbox.is-bordered.el-checkbox--large {
+  .el-checkbox__inner {
+    width: var(--el-input-clear-icon);
+    height: var(--el-input-clear-icon);
+    &::after {
+      height: 8px;
+      left: 5px;
+    }
+  }
+  .el-checkbox__label {
+    font-size: var(--el-font-size-large);
+  }
+}
+
+.el-checkbox {
+  margin-right: 24px;
+  height: var(--el-input-height);
+}
+
+.el-checkbox {
+  .el-checkbox__inner {
+    &::after {
+      border-right-width: 1.6px;
+      border-bottom-width: 1.6px;
+    }
+  }
+}

package/theme-chalk/src/zjhc/collapse.scss

@@ -0,0 +1,8 @@
+.el-collapse {
+  --el-collapse-header-height: 36px;
+  --el-collapse-content-font-size: var(--font-size-s);
+  --el-collapse-header-font-size: var(--font-size-s);
+}
+.el-collapse-item__content {
+  padding-bottom: 12px;
+}

package/theme-chalk/src/zjhc/dateEditor.scss

@@ -0,0 +1,14 @@
+.el-date-editor .el-icon {
+  font-size: var(--el-input-clear-icon);
+}
+.el-date-editor.el-input,
+.el-date-editor.el-input__wrapper {
+  height: var(--el-input-height);
+}
+.el-date-table {
+  font-size: var(--el-font-size-base);
+}
+.el-date-editor .el-range-input {
+  height: var(--el-input-height);
+  line-height: var(--el-input-height);
+}

package/theme-chalk/src/zjhc/descriptions.scss

@@ -0,0 +1,32 @@
+.el-descriptions {
+  --el-descriptions-item-bordered-label-background: #f1f2f7;
+}
+.el-descriptions__body
+  .el-descriptions__table.is-bordered
+  .el-descriptions__cell {
+  padding: 0 11px;
+  height: var(--el-height-size-base);
+  line-height: var(--el-height-size-base);
+}
+
+.el-descriptions__label.el-descriptions__cell.is-bordered-label {
+  font-weight: normal;
+}
+
+.el-descriptions__body .el-descriptions__table .el-descriptions__cell {
+  font-size: var(--el-font-size-base);
+}
+
+.el-descriptions--large
+  .el-descriptions__body
+  .el-descriptions__table.is-bordered
+  .el-descriptions__cell {
+  padding: 2px 15px;
+}
+
+.el-descriptions--large
+  .el-descriptions__body
+  .el-descriptions__table
+  .el-descriptions__cell {
+  font-size: var(--el-font-size-large);
+}

package/theme-chalk/src/zjhc/dialog.scss

@@ -0,0 +1,148 @@
+.el-dialog {
+  --el-dialog-title-font-size: var(--font-size-xxl);
+  --el-dialog-border-radius: var(--zjhc-border-radius-middle);
+  --el-dialog-padding-primary: 28px;
+  --el-dialog-header-bottom: 15px;
+  --el-dialog-header-top: var(--zjhc-padding-space-l);
+  --el-dialog-content-font-size: var(--font-size-base);
+  --el-font-line-height-primary: 30px;
+  pointer-events: auto;
+  max-width: 100%;
+  padding-top: var(--el-dialog-header-top);
+}
+
+.el-dialog::before{
+  content: "";
+  height: 1px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top:64px;
+  background-color: var(--el-dialog-header-divider-color);
+}
+
+.el-dialog.is-draggable {
+  // 如果eldialog设置draggable会因为此样式出现位置异常
+  position: fixed;
+}
+.el-dialog.is-resizable {
+  --el-message-close-size: 30px;
+  height: var(--el-dialog-height);
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--el-border-color);
+}
+.el-dialog__header {
+  padding-bottom: var(--el-dialog-header-bottom);
+}
+.el-dialog.is-resizable .el-dialog__header {
+  padding-right: calc(var(--el-dialog-padding-primary) + var(--el-message-close-size, 16px) * 3);
+  // position: relative;
+}
+.el-dialog.is-resizable .el-dialog__header.show-close {
+  padding-right: calc(var(--el-dialog-padding-primary) + var(--el-message-close-size, 16px) * 4);
+}
+.el-dialog.is-resizable .el-dialog__body {
+  flex: 1;
+  overflow: hidden;
+}
+.el-dialog__headerbtn {
+  font-size: var(--font-size-xxxl);
+}
+.el-dialog__title {
+  font-weight: bold;
+}
+.el-dialog.is-resizable .el-dialog__title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.el-dialog__headerbtn .el-dialog__minus,
+.el-dialog__headerbtn .el-dialog__close{
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--el-dialog-header-button-bg-color);
+  font-size: 16px;
+  color:var(--el-text-color-placeholder);
+}
+
+.el-dialog__headerbtn:focus .el-dialog__close,
+.el-dialog__headerbtn:hover .el-dialog__close {
+  color: var(--el-text-color-primary) !important;
+  background: var(--el-dialog-header-button-bg-hover-color);
+}
+
+.el-dialog .el-dialog__button{
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--el-dialog-header-button-bg-color);
+  font-size: 16px;
+  cursor: pointer;
+  color:var(--el-text-color-placeholder);
+}
+
+.el-dialog .el-dialog__button:hover{
+  background: var(--el-dialog-header-button-bg-hover-color);
+}
+
+.el-dialog.is-resizable .el-dialog__headerbtns {
+  position: absolute;
+  height: 36px;
+  right: 18px;
+  top: 18px;
+  display: flex;
+  align-items: center;
+}
+.el-dialog.is-resizable .el-dialog__headerbtn {
+  position: static;
+  width: 36px;
+  height: 36px;
+}
+.el-dialog .el-dialog__headerbtn {
+  right: 7px;
+  top: 12px;
+  margin-left: var(--zjhc-margin-space-l);
+}
+.el-dialog.is-fullscreen {
+  margin: 0;
+  --el-dialog-height: 100% !important;
+  --el-dialog-width: 100% !important;
+}
+.el-dialog.is-minus {
+  width: 200px;
+  height: 56px;
+  left: 0;
+  top: 0;
+  position: absolute;
+  margin: 0;
+  --el-dialog-padding-primary: 12px;
+  --el-dialog-header-top: 12px;
+  --el-dialog-header-bottom: 0;
+}
+
+.el-dialog.is-minus .el-dialog__header .el-input{
+  display: none;
+}
+
+.el-dialog.is-minus .el-dialog__header.show-close{
+  padding-right: calc(var(--el-dialog-padding-primary) + var(--el-message-close-size, 16px)*3);
+}
+
+.el-dialog.is-resizable.is-minus .el-dialog__headerbtns {
+  top: 7px;
+}
+
+.el-dialog.is-minus .el-dialog__body,
+.el-dialog.is-minus .el-dialog__footer {
+  display: none;
+}
+
+.el-dialog__body {
+  padding-top: var(--zjhc-padding-space-l);
+}

package/theme-chalk/src/zjhc/drawer.scss

@@ -0,0 +1,4 @@
+.el-drawer__close-btn:focus i,
+.el-drawer__close-btn:hover i {
+  color: var(--el-text-color-primary);
+}

package/theme-chalk/src/zjhc/dropdown.scss

@@ -0,0 +1,16 @@
+.el-dropdown .el-dropdown__caret-button {
+  width: var(--el-height-size-base);
+  min-width: auto;
+}
+.el-dropdown-menu__item {
+  padding: 3px 10px;
+}
+
+.el-dropdown-menu__item:not(.is-disabled):focus,
+.el-dropdown-menu__item:not(.is-disabled):hover {
+  background-color: var(--el-fill-color-light);
+  color: var(--el-text-color-regular);
+}
+.el-dropdown__popper.el-popper {
+  box-shadow: none;
+}

package/theme-chalk/src/zjhc/empty.scss

@@ -0,0 +1,3 @@
+.el-empty__description {
+  margin-top: 8px;
+}

package/theme-chalk/src/zjhc/fontsize.scss

@@ -0,0 +1,42 @@
+html {
+  --font-size-xs: 12px;
+  --font-size-s: 13px;
+  --font-size-base: 14px;
+  --font-size-m: 15px;
+  --font-size-l: 16px;
+  --font-size-xl: 17px;
+  --font-size-xxl: 18px;
+  --font-size-xxxl: 20px;
+}
+
+html:root {
+  --font-size-extra-large: var(--font-size-xxxl);
+  --font-size-large: var(--font-size-xxl);
+  --font-size-medium: var(--font-size-l);
+  --font-size-small: var(--font-size-s);
+  --font-size-extra-small: var(--font-size-xs);
+  --el-height-size-base: 28px;
+  --el-input-height: var(--el-height-size-base);
+  --el-component-size: var(--el-input-height);
+  --el-button--height: var(--el-height-size-base);
+  --el-checkbox-height: var(--el-height-size-base);
+  --el-component-size-small: var(--el-height-size-base);
+  --el-input-clear-icon: var(--font-size-l);
+  --el-button-height-large: 32px;
+  --el-component-size-large: 32px;
+  --el-table-height: var(--font-size-xxl);
+}
+// 在基础的文字大小上面增加了2px
+html.zjhc-caremode {
+  --font-size-xs: 14px;
+  --font-size-s: 15px;
+  --font-size-base: 16px;
+  --font-size-m: 17px;
+  --font-size-l: 18px;
+  --font-size-xl: 19px;
+  --font-size-xxl: 20px;
+  --font-size-xxxl: 22px;
+  --el-height-size-base: 32px;
+  --el-button-height-large: 34px;
+  --el-component-size-large: 34px;
+}

package/theme-chalk/src/zjhc/form.scss

@@ -0,0 +1,33 @@
+.el-slider__runway.show-input {
+  margin-right: 20px;
+}
+
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left
+  > .el-form-item__label:before,
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left
+  > .el-form-item__label-wrap
+  > .el-form-item__label:before {
+  margin-right: 6px;
+}
+.el-form-item.is-required .el-input.is-disabled .el-input__wrapper {
+  background-color: var(--el-disabled-bg-color);
+}
+.el-form-item__label {
+  height: var(--el-input-height);
+  line-height: var(--el-input-height);
+  padding: 0 10px 0 0;
+}
+.el-rate {
+  --el-rate-fill-color: var(--el-color-warning);
+}
+.el-form-item {
+  margin-bottom: 16px;
+}
+.el-form-item.is-required .el-select__wrapper,
+.el-form-item.is-required .el-input__wrapper,
+.el-form-item.is-required .el-textarea__inner {
+  background: var(--el-form-required-bg-color);
+}
+.el-form-item__content {
+  line-height: var(--el-input-height);
+}

package/theme-chalk/src/zjhc/index.scss

@@ -0,0 +1,48 @@
+@use './button.scss';
+@use './fontsize.scss';
+@use './form.scss';
+@use './scrollbar.scss';
+@use './calendar.scss';
+@use './card.scss';
+@use './collapse.scss';
+@use './empty.scss';
+@use './pagination.scss';
+@use './select.scss';
+@use './tags.scss';
+@use './timeline.scss';
+@use './tree.scss';
+@use './segmented.scss';
+@use './anchor.scss';
+@use './backtop.scss';
+@use './breadcrumb.scss';
+@use './dropdown.scss';
+@use './menu.scss';
+@use './steps.scss';
+@use './tabs.scss';
+@use './table.scss';
+@use './descriptions.scss';
+@use './message-box.scss';
+@use './popover.scss';
+@use './popper.scss';
+@use './tour.scss';
+@use './table-v2.scss';
+@use './alert.scss';
+@use './dialog.scss';
+@use './drawer.scss';
+@use './message.scss';
+@use './main.scss';
+@use './notification.scss';
+@use './picker.scss';
+@use './switch.scss';
+@use './input.scss';
+@use './mention.scss';
+@use './dateEditor.scss';
+@use './number.scss';
+@use './autocomplete.scss';
+@use './checkbox.scss';
+@use './radio.scss';
+@use './link.scss';
+@use './cascader.scss';
+@use './upload.scss';
+@use './overlay.scss';
+@use './page.scss';

package/theme-chalk/src/zjhc/input.scss

@@ -0,0 +1,47 @@
+.el-input__inner {
+  --el-input-inner-height: var(--el-input-height);
+}
+.el-input {
+  --el-input-text-color: #333;
+  height: var(--el-input-height);
+}
+.el-textarea__inner {
+  padding: 5px 10px;
+}
+.el-input {
+  .el-button:has(.el-icon) {
+    min-width: auto;
+    padding: 6px 15px;
+  }
+  .el-input-group__append,
+  .el-input-group__prepend,
+  .el-input-group__append .el-button {
+    padding: 0 15px;
+  }
+  .el-input-group__append .el-select,
+  .el-input-group__append .el-button,
+  .el-input-group__prepend .el-select,
+  .el-input-group__prepend .el-button {
+    margin: 0 -15px;
+  }
+}
+.el-input-group__append .el-button {
+  font-size: var(--font-size-l);
+}
+.el-input__wrapper {
+  padding: 0 10px;
+}
+.el-input--large .el-input__wrapper {
+  height: var(--el-button-height-large);
+}
+.el-input--small {
+  .el-input__inner {
+    height: var(--el-input-height);
+  }
+  .el-input__wrapper {
+    padding: 0 7px;
+  }
+}
+.el-input .el-icon {
+  font-size: var(--el-input-clear-icon);
+}

package/theme-chalk/src/zjhc/link.scss

@@ -0,0 +1,20 @@
+.el-link {
+  .el-icon + span {
+    margin-left: 6px;
+  }
+  .el-icon {
+    font-size: 16px;
+  }
+  &.is-underline {
+    &::after {
+      display: none;
+    }
+    &:hover {
+      text-decoration: underline;
+      text-decoration-color: var(--el-link-hover-text-color);
+    }
+  }
+}
+.el-link + .el-link {
+  margin-left: 20px;
+}

package/theme-chalk/src/zjhc/main.scss

@@ -0,0 +1,3 @@
+.el-main {
+  --el-main-padding: 0;
+}

package/theme-chalk/src/zjhc/mention.scss

@@ -0,0 +1,9 @@
+.el-mention-dropdown__item {
+  padding: 0 15px;
+}
+.el-mention__popper.el-popper {
+  box-shadow: none;
+}
+.el-mention-dropdown {
+  --el-mention-option-height: var(--el-input-height);
+}

package/theme-chalk/src/zjhc/message-box.scss

@@ -0,0 +1,57 @@
+.el-message-box {
+  --el-messagebox-padding-primary: 28px;
+  --el-message-close-size: var(--font-size-xxl);
+  --el-messagebox-font-size: var(--font-size-xxl);
+  --el-font-line-height-primary: 30px;
+  --el-messagebox-error-font-size: var(--el-font-size-base);
+  --el-messagebox-border-radius: var(--zjhc-border-radius-middle);
+  --el-messagebox-header-top: var(--zjhc-padding-space-l);
+  --el-messagebox-header-bottom: var(--zjhc-padding-space-m);
+  padding-top: var(--el-messagebox-header-top);
+}
+.el-message-box__header {
+  padding-bottom: var(--el-messagebox-header-bottom);
+}
+.el-message-box__headerbtn {
+  top: 10px;
+  right: 10px;
+}
+.el-message-box__status {
+  font-size: 28px;
+}
+
+.el-message-box__title {
+  font-weight: 700;
+}
+.el-message-box__headerbtn:focus .el-message-box__close,
+.el-message-box__headerbtn:hover .el-message-box__close {
+  color: #333;
+}
+
+.el-message-box::before{
+  content: "";
+  height: 1px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top:64px;
+  background-color: var(--el-dialog-header-divider-color);
+}
+
+.el-message-box__headerbtn .el-message-box__close {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: var(--el-dialog-header-button-bg-color);
+  font-size: 16px;
+  color:var(--el-text-color-placeholder);
+}
+.el-message-box__headerbtn .el-message-box__close:hover {
+  background: var(--el-dialog-header-button-bg-hover-color);
+}
+
+.el-message-box__content{
+  padding-top: 30px;
+  padding-bottom: var(--zjhc-padding-space-l);
+  font-size: var(--font-size-m);
+}

package/theme-chalk/src/zjhc/message.scss

@@ -0,0 +1,13 @@
+.el-message--info {
+  --el-message-bg-color: var(--el-color-primary-light-9);
+  --el-message-border-color: var(--el-color-primary-light-8);
+  --el-message-text-color: var(--el-color-primary);
+  --el-message-padding: 8px 15px;
+}
+
+.el-message {
+  --el-message-close-size: var(--font-size-xxl);
+}
+.el-message__icon {
+  font-size: var(--font-size-xxl);
+}

package/theme-chalk/src/zjhc/notification.scss

@@ -0,0 +1,4 @@
+.el-notification {
+  --el-notification-title-font-size: var(--font-size-l);
+  --el-notification-group-margin-left: 8px;
+}

package/theme-chalk/src/zjhc/number.scss

@@ -0,0 +1,9 @@
+.el-input-number.is-controls-right[class*='large'] [class*='increase'],
+.el-input-number.is-controls-right[class*='large'] [class*='decrease'] {
+  --el-input-number-controls-height: var(--el-input-clear-icon);
+}
+
+.el-input-number.is-controls-right .el-input-number__increase,
+.el-input-number.is-controls-right .el-input-number__decrease {
+  --el-input-number-controls-height: var(--el-font-size-title);
+}

package/theme-chalk/src/zjhc/overlay.scss

@@ -0,0 +1,3 @@
+.el-overlay {
+  --el-overlay-color-lighter: rgba(0, 0, 0, 0.25);
+}

package/theme-chalk/src/zjhc/page.scss

@@ -0,0 +1,3 @@
+.el-page-header__content {
+  font-size: var(--font-size-m);
+}