@zjhc/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,64 @@
+.el-pagination {
+  --el-pagination-button-width: 28px;
+  --el-pagination-button-height: 28px;
+  --el-pagination-item-gap: 12px;
+  --el-pagination-font-size: var(--font-size-s);
+  --el-pagination-border-radius: 3px;
+  --el-pagination-button-width-large: 32px;
+  --el-pagination-button-height-large: 32px;
+  --el-pagination-button-bg-color: var(--zjhc-light-backgound-color);
+  --el-pagination-button-disabled-color: rgba(102, 102, 102, 0.5);
+  --el-pagination-button-disabled-bg-color: rgba(247, 248, 251, 0.5);
+}
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev,
+.el-pagination.is-background .el-pager li {
+  margin: 0 4px;
+  padding: 0 5px;
+}
+.el-pagination .el-select {
+  width: 100px;
+}
+.el-pagination.is-background .el-pager li {
+  border: 1px solid var(--el-border-color);
+  --el-pagination-button-bg-color: var(--el-fill-color-blank);
+}
+.el-pagination.is-background .el-pager li:hover {
+  --el-pagination-button-bg-color: var(--zjhc-light-backgound-color);
+  border: 1px solid var(--el-border-color-hover);
+  color: var(--el-text-color-primary);
+}
+.el-pagination.is-background .el-pager li.is-active {
+  border: 1px solid var(--el-color-primary);
+}
+.el-pagination.is-background .el-pager li.is-active:hover {
+  color: var(--el-fill-color-blank);
+}
+.el-pagination.is-background .btn-next,
+.el-pagination.is-background .btn-prev {
+  color: var(--el-text-color-regular);
+  // background: #f7f8fb;
+}
+.el-pagination.is-background .btn-next:hover,
+.el-pagination.is-background .btn-prev:hover {
+  background: var(--el-pagination-button-hover-color);
+}
+.el-pagination.is-background .btn-next.is-disabled,
+.el-pagination.is-background .btn-next:disabled,
+.el-pagination.is-background .btn-prev.is-disabled,
+.el-pagination.is-background .btn-prev:disabled,
+.el-pagination.is-background .el-pager li.is-disabled,
+.el-pagination.is-background .el-pager li:disabled {
+  color: var(--el-pagination-button-disabled-color);
+  background: var(--el-pagination-button-disabled-bg-color);
+}
+
+.el-pagination--large {
+  font-size: var(--el-font-size-large);
+}
+.el-pagination .el-select--large {
+  width: 104px;
+}
+.el-pagination--large .el-pager li {
+  font-size: var(--el-font-size-large);
+}

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

@@ -0,0 +1,85 @@
+.el-picker-panel {
+  line-height: var(--el-input-height);
+}
+.el-date-range-picker {
+  --el-datepicker-inner-border-color: var(--el-border-color);
+}
+.el-date-picker__time-header,
+.el-date-range-picker__time-header {
+  padding: 8px 5px 8px;
+}
+.el-date-picker__header {
+  padding: 12px 20px 0;
+}
+.el-date-picker__header,
+.el-date-range-picker__header {
+  div {
+    font-size: var(--el-font-size-title);
+  }
+  .el-date-picker__header-label {
+    font-size: var(--el-font-size-title);
+  }
+  .el-picker-panel__icon-btn {
+    margin-top: 4px;
+    font-size: var(--el-input-clear-icon);
+  }
+}
+.el-picker__popper {
+  .el-picker-panel__shortcut {
+    padding: 0 10px;
+  }
+}
+
+.el-picker__popper {
+  .el-time-spinner__item {
+    font-size: var(--el-font-size-base);
+  }
+  .el-time-panel__footer {
+    padding: 10px;
+    height: auto;
+    line-height: normal;
+  }
+  .el-time-panel__btn {
+    font-size: var(--el-font-size-base);
+    margin: 0;
+    & + .el-time-panel__btn {
+      margin-left: 20px;
+      margin-right: 5px;
+    }
+  }
+}
+
+.el-picker__popper {
+  .el-month-table,
+  .el-year-table {
+    font-size: var(--el-font-size-base);
+  }
+}
+.el-color-picker__trigger {
+  height: var(--el-input-height);
+  width: var(--el-input-height);
+}
+.el-picker-panel__content {
+  margin-top: 5px;
+}
+.el-date-range-picker .el-picker-panel__content {
+  margin-top: 0px;
+}
+.el-color-picker__panel {
+  box-shadow: none;
+}
+.el-color-picker__panel.el-popper {
+  padding: 10px;
+  .el-color-dropdown__btns {
+    margin-top: 6px;
+  }
+  .el-button {
+    min-width: auto;
+    & + .el-button {
+      margin-left: 10px;
+    }
+  }
+}
+.el-picker__popper.el-popper {
+  box-shadow: none;
+}

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

@@ -0,0 +1,13 @@
+.el-popover {
+  --el-popover-padding: 15px;
+  --el-popover-title-font-size: var(--font-size-l);
+}
+.el-popover.el-popper {
+  --el-popper-border-radius: var(--el-border-radius-base);
+  box-shadow: none;
+  .el-popconfirm {
+    .el-button {
+      min-width: auto;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+.el-popper.is-dark,
+.el-popper.is-dark > .el-popper__arrow::before {
+  --el-text-color-primary: #1c4970;
+  border-radius: var(--el-border-radius-base);
+}
+
+.el-popper.is-light,
+.el-popper.is-light > .el-popper__arrow:before {
+  border: 1px solid var(--el-border-color);
+}
+.el-popper {
+  outline: none;
+}

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

@@ -0,0 +1,49 @@
+.el-radio__label {
+  font-size: var(--el-font-size-base);
+}
+
+.el-radio-button.el-radio-button--large .el-radio-button__inner {
+  font-size: var(--el-font-size-large);
+  padding: 8px 19px;
+}
+.el-radio.is-bordered.el-radio-large .el-radio__label {
+  padding: 8px;
+}
+.el-radio.el-radio--large {
+  height: var(--el-button-height-large);
+}
+.el-radio-button .el-radio-button__inner {
+  font-size: var(--el-font-size-base);
+  padding: 7px 15px;
+}
+.el-radio.is-bordered.el-radio--large {
+  padding: 0 8px 0 11px;
+}
+
+.el-radio__inner::after {
+  height: 5px;
+  width: 5px;
+}
+.el-radio.el-radio--large,
+.el-radio.is-bordered.el-radio--large {
+  .el-radio__inner {
+    width: var(--el-input-clear-icon);
+    height: var(--el-input-clear-icon);
+    &::after {
+      height: 6px;
+      width: 6px;
+    }
+  }
+  .el-radio__label {
+    font-size: var(--el-font-size-large);
+  }
+}
+.el-radio.el-radio--large .el-radio__label {
+  font-size: var(--el-font-size-large);
+}
+.el-radio {
+  margin-right: 24px;
+}
+.el-radio {
+  height: var(--el-input-height);
+}

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

@@ -0,0 +1,5 @@
+html {
+  .el-scrollbar__wrap {
+    // padding-right: 12px;
+  }
+}

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

@@ -0,0 +1,18 @@
+.el-segmented {
+  min-height: var(--el-height-size-base);
+  font-size: var(--el-font-size-base);
+  padding: 0;
+}
+.el-segmented--large {
+  min-height: var(--el-button-height-large);
+  font-size: var(--el-font-size-large);
+}
+
+.el-segmented--large .el-segmented__item,
+.el-segmented__item,
+.el-segmented__item-selected,
+.el-segmented--large .el-segmented__item-selected,
+.el-segmented--small .el-segmented__item,
+.el-segmented--small .el-segmented__item-selected {
+  border-radius: var(--el-border-radius-base);
+}

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

@@ -0,0 +1,49 @@
+.el-select__wrapper {
+  font-size: var(--font-size-base);
+  line-height: var(--el-input-height);
+  min-height: var(--el-input-height);
+  padding: 4px 10px;
+}
+.el-select--large .el-select__wrapper {
+  min-height: var(--el-button-height-large);
+  font-size: var(--el-font-size-large);
+}
+.el-select {
+  --el-select-input-font-size: var(--font-size-base);
+  .el-select__clear {
+    font-size: var(--el-input-clear-icon);
+  }
+  .el-input__prefix-icon {
+    font-size: var(--el-input-clear-icon);
+  }
+}
+.el-select-dropdown__item {
+  height: var(--el-input-height);
+  line-height: var(--el-input-height);
+  padding: 0 10px;
+  font-size: var(--font-size-base);
+}
+.el-select__selection.is-near {
+  margin-left: -3px;
+}
+.el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
+  width: 16px;
+  height: 16px;
+  right: 12px;
+}
+.el-select__suffix {
+  .el-icon {
+    font-size: var(--el-input-clear-icon);
+  }
+}
+.el-select-dropdown__item.is-selected {
+  background: var(--el-primary-opactiy01);
+  font-weight: normal;
+}
+.el-select__popper.el-popper {
+  box-shadow: none;
+}
+
+.el-select__input {
+  height: 20px;
+}

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

@@ -0,0 +1,40 @@
+.el-step__icon {
+  --el-step-icon-height: 24px;
+  width: var(--el-step-icon-height);
+  height: var(--el-step-icon-height);
+  position: relative;
+}
+.el-step__icon.is-text:before {
+  content: '';
+  width: calc(var(--el-step-icon-height) + 6px);
+  height: calc(var(--el-step-icon-height) + 6px);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border: 3px solid #fff;
+  display: block;
+  border-radius: 50%;
+}
+.el-step.is-simple .el-step__icon:before {
+  display: none;
+}
+.el-step__head.is-process {
+  color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
+}
+.el-step__title.is-process {
+  color: var(--el-color-primary);
+}
+.el-step.is-horizontal .el-step__line {
+  height: 1px;
+  top: 13px;
+}
+.el-step__title {
+  font-size: var(--font-size-l);
+  line-height: 30px;
+}
+.el-step.is-vertical .el-step__line {
+  width: 1px;
+  left: 11px;
+}

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

@@ -0,0 +1,11 @@
+.el-switch--large .el-switch__label * {
+  font-size: var(--el-font-size-large);
+}
+.el-switch__label * {
+  font-size: var(--el-font-size-base);
+}
+.el-switch__label,
+.el-switch__core .el-switch__inner .is-icon,
+.el-switch__core .el-switch__inner .is-text {
+  font-size: var(--el-font-size-base);
+}

package/theme-chalk/src/zjhc/table-v2.scss

@@ -0,0 +1,16 @@
+.el-table-v2 {
+  --el-table-header-bg-color: #f1f2f7;
+  --el-table-header-text-color: var(--el-text-color-regular);
+  --el-table-text-color: var(--el-text-color-regular);
+  font-size: var(--el-font-size-base);
+  color: var(--el-table-text-color);
+  .el-table-v2__cell {
+    padding: 7px 0;
+  }
+  .custom-tabs-label .el-icon {
+    font-size: 15px;
+  }
+  .sort-caret.ascending {
+    top: -4px;
+  }
+}

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

@@ -0,0 +1,44 @@
+.el-table {
+  --el-table-header-bg-color: #f1f2f7;
+  --el-table-header-text-color: var(--el-text-color-regular);
+  --el-table-text-color: var(--el-text-color-regular);
+}
+
+.el-table .el-table__cell {
+  padding: 7px 0;
+}
+
+.el-table .cell {
+  line-height: var(--el-table-height);
+}
+.el-table {
+  line-height: 18px;
+  font-size: var(--el-font-size-base);
+}
+.custom-tabs-label .el-icon {
+  font-size: 15px;
+}
+.el-table .sort-caret.ascending {
+  top: -4px;
+}
+.el-table__header-wrapper .el-table-column--selection > .cell,
+.el-table__body-wrapper .el-table-column--selection > .cell {
+  height: var(--el-table-height);
+  vertical-align: inherit;
+}
+
+.el-table__body-wrapper .el-radio,
+.el-table__header-wrapper .el-radio {
+  height: unset;
+  vertical-align: middle;
+  // 当表格的第一列是一个radio的时候，如果不隐藏label，会导致内容区域的宽度出现问题
+  .el-radio__label {
+    display: none;
+  }
+}
+.el-table__row.is-selected .el-table__cell {
+  background-color: var(--el-table-selected-bg) !important;
+}
+.el-table__body-wrapper tbody {
+  outline: none;
+}

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

@@ -0,0 +1,15 @@
+.el-tabs {
+  --el-tab-items-text: var(--font-size-base);
+}
+.el-tabs__nav-wrap:after {
+  height: 1px;
+}
+.el-tabs__item {
+  // max-width: 168px;
+  line-height: 40px;
+  font-size: var(--el-tab-items-text);
+  padding: 0 15px;
+}
+.el-tabs__item.is-active {
+  font-weight: bold;
+}

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

@@ -0,0 +1,25 @@
+.el-tag {
+  --el-tag-border-radius: var(--el-border-radius-base);
+  --el-tag-height-large: 24px;
+  --el-tag-font-size: var(--el-font-size-base);
+  height: var(--el-tag-height);
+  padding: 0 4px;
+  .el-tag__close {
+    margin-left: 8px;
+  }
+}
+.el-tag--large {
+  height: var(--el-tag-height-large);
+  font-size: var(--font-size-base);
+}
+.el-check-tag {
+  height: var(--el-tag-height);
+  line-height: var(--el-tag-height);
+  padding: 0 4px;
+  font-weight: normal;
+}
+
+.el-tag--plain,
+.el-tag--plain.el-tag--primary {
+  --el-tag-bg-color: transparent;
+}

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

@@ -0,0 +1,16 @@
+.el-timeline-item__node:before {
+    content: "";
+    width: calc(var(--el-timeline-node-size-normal) + 6px);
+    height: calc(var(--el-timeline-node-size-normal) + 6px);
+    border: 3px solid #fff;
+    background: transparent;
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.el-timeline-item__node--large:before{
+    width: calc(var(--el-timeline-node-size-large) + 6px);
+    height: calc(var(--el-timeline-node-size-large) + 6px);
+}

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

@@ -0,0 +1,9 @@
+.el-tour {
+  --el-tour-padding-primary: 20px;
+  --el-tour-font-size: var(--font-size-base);
+  --el-tour-title-font-size: var(--font-size-l);
+}
+.el-tour__closebtn {
+  top: 8px;
+  right: 6px;
+}

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

@@ -0,0 +1,6 @@
+.el-tree {
+    --el-tree-node-content-height: var(--el-height-size-base);
+}
+.el-tree .custom-tree-node{
+    font-size: var(--el-font-size-base);
+}

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

@@ -0,0 +1,6 @@
+.el-upload--picture-card {
+  background-color: #fff;
+  .el-icon {
+    color: inherit;
+  }
+}

package/theme-chalk/sticky-toolbar.css

@@ -0,0 +1,71 @@
+@charset "UTF-8";
+/**
+ * 该函数将选择器转化为字符串，并截取指定位置的字符。
+ * @param $selector - 需要转换的选择器对象。
+ * @return 返回转换后的选择器字符串。
+ */
+/**
+ * 判断父级选择器是否包含'--'
+ * @param $selector - 需要检查的选择器，可以是列表或字符串。
+ * @returns 如果选择器包含修饰符，则返回 true；否则返回 false。
+ */
+/**
+ * 判断父级选择器是否包含'.is-'
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器。
+ * @return 返回一个布尔值，如果选择器包含状态前缀则为true，否则为false。
+ */
+/**
+ * 判断父级是否包含 ':' （用于判断伪类和伪元素）
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器，函数会将其转换为字符串形式。
+ * @return 返回一个布尔值，如果选择器包含伪类，则返回 true；否则返回 false。
+ */
+/*
+ * 判断父级选择器是否包含`--` `.is-` `:`这三种字符
+ * @param {String} $selector 选择器
+ * @return {String} 如果父级选择器包含以上三种字符中的任意一种，返回true；否则返回false
+*/
+/**
+ * 函数用于将给定列表中的项目连接成一个变量名。
+ * @param $list - 一个包含要连接的字符串的列表。
+ * @return $name - 连接后的变量名，以"--"和配置中的命名空间开头，每个列表项之间用"-"连接。
+ */
+.zjhc-sticky__toolbar {
+  padding: 10px 15px;
+  position: sticky;
+  left: 0;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: flex-start;
+  background: #fff;
+}
+
+.zjhc-sticky__main {
+  flex: 1;
+  position: relative;
+}
+
+.zjhc-sticky__wrap {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  max-height: 0;
+  padding-right: 44px;
+}
+.zjhc-sticky__wrap > .el-button + .el-button {
+  margin-left: 0;
+}
+.zjhc-sticky__wrap > * {
+  margin-right: var(--zjhc-margin-space-m);
+  margin-bottom: 10px;
+}
+
+.zjhc-sticky__toggle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 5;
+  width: 32px;
+  padding: 8px 0;
+  min-width: 0 !important;
+}

package/theme-chalk/table-toolbar.css

@@ -0,0 +1,53 @@
+@charset "UTF-8";
+/**
+ * 该函数将选择器转化为字符串，并截取指定位置的字符。
+ * @param $selector - 需要转换的选择器对象。
+ * @return 返回转换后的选择器字符串。
+ */
+/**
+ * 判断父级选择器是否包含'--'
+ * @param $selector - 需要检查的选择器，可以是列表或字符串。
+ * @returns 如果选择器包含修饰符，则返回 true；否则返回 false。
+ */
+/**
+ * 判断父级选择器是否包含'.is-'
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器。
+ * @return 返回一个布尔值，如果选择器包含状态前缀则为true，否则为false。
+ */
+/**
+ * 判断父级是否包含 ':' （用于判断伪类和伪元素）
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器，函数会将其转换为字符串形式。
+ * @return 返回一个布尔值，如果选择器包含伪类，则返回 true；否则返回 false。
+ */
+/*
+ * 判断父级选择器是否包含`--` `.is-` `:`这三种字符
+ * @param {String} $selector 选择器
+ * @return {String} 如果父级选择器包含以上三种字符中的任意一种，返回true；否则返回false
+*/
+/**
+ * 函数用于将给定列表中的项目连接成一个变量名。
+ * @param $list - 一个包含要连接的字符串的列表。
+ * @return $name - 连接后的变量名，以"--"和配置中的命名空间开头，每个列表项之间用"-"连接。
+ */
+.zjhc-table__toolbar .zjhc-button__group {
+  line-height: 1;
+  overflow: hidden;
+}
+
+.zjhc-button__group--popper {
+  min-width: 80px;
+}
+
+.zjhc-button__group .el-dropdown + .el-button,
+.zjhc-button__group .el-dropdown + .el-dropdown,
+.zjhc-button__group .el-button + .el-dropdown {
+  margin-left: 12px;
+}
+.zjhc-button__group .el-button.el-button--text {
+  padding: 0;
+}
+.zjhc-button__group .el-button--text + .el-button--text,
+.zjhc-button__group .el-dropdown + .el-button--text,
+.zjhc-button__group .el-button--text + .el-dropdown {
+  margin-left: 20px;
+}