@ibiz-template/web-theme 1.0.31 → 1.0.32-dev.0

package/src/theme/generic/element-plus.scss

@@ -0,0 +1,452 @@
+/* stylelint-disable no-descending-specificity */
+:root {
+  --el-color-primary: #{getCssVar(color, primary)};
+  --el-bg-color: #{getCssVar(color, bg, 0)};
+  --el-border-color-light: #{getCssVar(color, border)};
+  --el-border-radius-base: #{getCssVar(border, radius, small)};
+  --el-mask-color: rgba(#{getCssVar(grey, 6)}, 0.1);
+  --el-text-color-regular: #{getCssVar(color, text, 0)};
+  --el-text-color-placeholder: #{getCssVar(color, text, 3)};
+  --el-font-size-base: #{getCssVar(font-size, regular)};
+  --el-disabled-text-color: #{getCssVar(color, disabled, text)};
+  --el-disabled-bg-color: #{getCssVar(color, disabled, fill)};
+  --el-disabled-border-color: #{getCssVar(color, disabled, border)};
+  --el-border-color-hover: #{getCssVar(color, primary, hover)};
+  --el-fill-color-light: #{getCssVar(color, bg, 2)};
+  --el-border-color: #{getCssVar(color, border)};
+  --el-border-color-extra-light: #{getCssVar(color, secondary, light, default)};
+  --el-bg-color-overlay: #{getCssVar(color, bg, 3)};
+  --el-border-color-lighter: #{getCssVar(color, border)};
+  --el-fill-color-blank: transparent;
+  --el-fill-color-lighter: #{getCssVar(color, fill, 0)};
+  --el-border-color-darker: #{getCssVar(color, border)};
+
+  // 警告色替换
+  --el-color-info: #{getCssVar(color, text, 2)};
+  --el-color-success: #{getCssVar(color, success)};
+  --el-color-warning: #{getCssVar(color, warning)};
+  --el-color-error: #{getCssVar(color, danger)};
+
+  color: getCssVar(color, text, 0);
+  background-color: getCssVar(color, bg, 0);
+}
+
+.el-input-number {
+  .el-input__wrapper {
+    --el-border-color: #{getCssVar(color, border)};
+    --el-input-border-color: #{getCssVar(color, border)};
+  }
+}
+
+// 去除 溢出阴影
+.el-input-number__increase:hover
+~ .el-input:not(.is-disabled)
+.el-input__wrapper {
+  box-shadow: 0 0 0 1px var(--el-input-focus-border-color);
+}
+
+// 模态
+.el-dialog__headerbtn {
+  width: 32px;
+  height: 32px;
+}
+
+.el-input,
+.el-textarea,
+.el-date-editor {
+  --el-input-text-color: #{getCssVar(editor, default, text-color)};
+  --el-input-border-color: #{getCssVar(editor, default, border-color)};
+  --el-input-hover-border-color: #{getCssVar(editor, hover, border-color)};
+}
+
+.el-autocomplete-suggestion {
+  --el-fill-color-light: #{getCssVar(editor, hover, bg-color)};
+}
+
+// 默认输入框背景色
+.el-input__wrapper {
+  --el-input-bg-color: #{getCssVar(editor, default, bg-color)};
+}
+
+// 飘窗
+.el-drawer {
+  .el-drawer__body {
+    padding: 0;
+  }
+}
+
+// 应用菜单
+.el-menu {
+  --el-menu-bg-color: transparent;
+}
+
+// 下拉框
+.el-dropdown-menu {
+  background-color: getCssVar('color', 'bg', 3);
+}
+
+.el-dropdown-menu__item {
+  color: getCssVar('color', 'text', 0);
+
+  &:hover {
+    color: getCssVar('color', 'primary', 'active', 'text');
+    background-color: getCssVar('color', 'primary', 'active');
+  }
+}
+
+// 树
+.el-tree {
+  --el-tree-text-color: #{getCssVar(color, text, 0)};
+  --el-tree-node-hover-bg-color: #{getCssVar(color, fill, 0)};
+  --el-tree-expand-icon-color: #{getCssVar(color, text, 2)};
+
+  font-size: getCssVar('font-size', 'regular');
+  background-color: transparent;
+
+  &.el-tree--highlight-current
+  .el-tree-node.is-current
+  > .el-tree-node__content {
+    background-color: #{getCssVar(color, primary, light, default)};
+  }
+}
+
+// 按钮 begin
+.el-button {
+  --el-button-bg-color: #{getCssVar(color, primary)};
+  --el-button-text-color: #{getCssVar(color, primary, text)};
+  --el-button-hover-text-color: #{getCssVar(color, primary, text)};
+  --el-button-hover-bg-color: #{getCssVar(color, primary, hover)};
+  --el-button-hover-border-color: #{getCssVar(color, primary, hover)};
+  --el-button-active-text-color: #{getCssVar(color, primary, text)};
+  --el-button-active-bg-color: #{getCssVar(color, primary, active)};
+  --el-button-active-border-color: #{getCssVar(color, primary, active)};
+  --el-button-disabled-bg-color: #{getCssVar(color, disabled, bg)};
+  --el-button-disabled-text-color: #{getCssVar(color, disabled, text)};
+  --el-button-border-color: #{getCssVar(color, border)};
+
+  border-width: 0;
+}
+
+.el-button--primary {
+  --el-button-bg-color: #{getCssVar(color, primary)};
+  --el-button-hover-bg-color: #{getCssVar(color, primary, hover)};
+  --el-button-active-bg-color: #{getCssVar(color, primary, active)};
+}
+
+.el-button--info {
+  --el-button-bg-color: var(--el-fill-color-blank);
+  --el-button-text-color: var(--el-text-color-regular);
+  --el-button-disabled-text-color: var(--el-disabled-text-color);
+  --el-button-disabled-bg-color: var(--el-fill-color-blank);
+  --el-button-disabled-border-color: var(--el-border-color-light);
+  --el-button-divide-border-color: #{getCssVar(color, border)};
+  --el-button-hover-text-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary-light-9);
+  --el-button-hover-border-color: var(--el-color-primary-light-7);
+  --el-button-active-text-color: var(--el-button-hover-text-color);
+  --el-button-active-border-color: var(--el-color-primary);
+  --el-button-active-bg-color: var(--el-button-hover-bg-color);
+  --el-button-outline-color: var(--el-color-primary-light-5);
+  --el-button-hover-link-text-color: var(--el-color-info);
+  --el-button-active-color: var(--el-text-color-primary);
+
+  border-width: 1px;
+}
+
+.el-button--success {
+  --el-button-bg-color: #{getCssVar(color, success)};
+  --el-button-hover-bg-color: #{getCssVar(color, success, hover)};
+  --el-button-active-bg-color: #{getCssVar(color, success, active)};
+}
+
+.el-button--warning {
+  --el-button-bg-color: #{getCssVar(color, warning)};
+  --el-button-hover-bg-color: #{getCssVar(color, warning, hover)};
+  --el-button-active-bg-color: #{getCssVar(color, warning, active)};
+}
+
+.el-button--danger {
+  --el-button-bg-color: #{getCssVar(color, danger)};
+  --el-button-hover-bg-color: #{getCssVar(color, danger, hover)};
+  --el-button-active-bg-color: #{getCssVar(color, danger, active)};
+}
+
+.el-button.is-link {
+  --el-button-text-color: #{getCssVar(color, link)};
+  --el-button-hover-link-text-color: #{getCssVar(color, link, hover)};
+}
+
+.el-button.is-text {
+  --el-button-text-color: #{getCssVar(color, primary)};
+
+  background-color: transparent;
+  border: 0 solid transparent;
+}
+
+.el-button.is-plain {
+  --el-button-hover-text-color: #{getCssVar(color, primary, text)};
+  --el-button-hover-bg-color: #{getCssVar(color, primary, hover)};
+}
+
+.el-button.is-text:not(.is-disabled):focus,
+.el-button.is-text:not(.is-disabled):hover {
+  background-color: #{getCssVar(color, fill, 0)};
+}
+
+.el-button [class*=el-icon]+span{
+  margin-left: 0;
+}
+
+// 按钮 end
+
+//  表格 begin
+.el-table {
+  --el-table-row-hover-bg-color: rgba(#{getCssVar(grey, 1)}, 1);
+  --el-table-current-row-bg-color: rgba(#{getCssVar(blue, cyan, 0)}, 1);
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-bg-color: transparent;
+  --el-table-border: 0.1px solid #{getCssVar(color, border)};
+  --el-table-border-color: #{getCssVar(color, border)};
+
+  font-size: #{getCssVar(font, size, regular)};
+
+  //  表格底部额外 border
+  .el-table__inner-wrapper::before {
+    display: none;
+  }
+}
+
+// 表格分页栏
+.el-pagination {
+  --el-pagination-bg-color: transparent;
+  --el-pagination-text-color: #{getCssVar(color, text, 2)};
+  --el-pagination-hover-color: #{getCssVar(color, text, 0)};
+  --el-pagination-button-bg-color: transparent;
+  --el-pagination-button-color: #{getCssVar(color, text, 0)};
+  --el-pagination-button-disabled-bg-color: transparent;
+  --el-disabled-bg-color: transparent;
+}
+
+.is-background .el-pager li:hover {
+  background-color: #{getCssVar(color, fill, 0)};
+}
+
+.el-popper__arrow {
+  display: none;
+}
+
+.el-pagination__jump {
+  color: #{getCssVar(color, text, 0)};
+
+  .el-input__wrapper {
+    background-color: #{getCssVar(color, fill, 0)};
+    box-shadow: none;
+  }
+
+  .el-input__wrapper:hover {
+    box-shadow: none;
+  }
+
+  .el-input__inner {
+    color: #{getCssVar(color, text, 0)};
+  }
+}
+
+.el-pagination.is-background .el-pager li.is-active {
+  color: #{getCssVar(color, primary)};
+  background-color: #{getCssVar(color, primary, light, default)};
+}
+
+// 表格分页数量选择器
+.el-popper.is-light {
+  background-color: #{getCssVar(color, bg, 3)};
+  border-width: 0;
+
+  .el-select-dropdown__item {
+    font-weight: #{getCssVar(font-weight, regular)};
+    color: #{getCssVar(color, text, 0)};
+  }
+
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background-color: #{getCssVar(color, fill, 0)};
+  }
+
+  .el-select-dropdown__item.is-disabled{
+    color: #{getCssVar(color, disabled, text)};
+    cursor: not-allowed;
+  }
+}
+
+.el-pagination button {
+  --el-button-hover-bg-color: #{getCssVar(color, fill, 0)};
+  --el-button-hover-text-color: #{getCssVar(color, text, 0)};
+}
+
+.el-pagination__sizes {
+  --el-select-border-color-hover: transparent;
+
+  .el-select {
+    --el-select-border-color-hover: transparent;
+    --el-select-input-focus-border-color: #{getCssVar(color, focus, border)};
+  }
+
+  .el-input__wrapper {
+    background-color: #{getCssVar(color, fill, 0)};
+    box-shadow: none;
+  }
+
+  .el-input__inner {
+    color: #{getCssVar(color, text, 0)};
+  }
+
+  .el-select .el-input.is-focus .el-input__wrapper {
+    box-shadow: none;
+  }
+}
+
+//  表格 end
+
+//  卡片 begin
+.el-card {
+  --el-card-border-radius: #{getCssVar(border, radius, medium)};
+  --el-card-padding: #{getCssVar(spacing, base)};
+  --el-card-bg-color: transparent;
+}
+
+//  卡片 end
+
+// 下拉菜单
+.el-scrollbar {
+  --el-scrollbar-bg-color: #{getCssVar(color, fill, 2)};
+  --el-scrollbar-hover-bg-color: #{getCssVar(color, fill, 2)};
+  --el-scrollbar-opacity: 1;
+}
+
+// 滑动输入条
+.el-slider {
+  --el-slider-stop-bg-color: #{getCssVar(color, fill, 0)};
+  --el-slider-runway-bg-color: #{getCssVar(color, fill, 0)};
+}
+
+// 文件上传
+.el-upload--picture-card {
+  border-width: 2px;
+}
+
+.el-upload--picture-card:hover {
+  color: #{getCssVar(color, fill, 0)};
+  background-color: #{getCssVar(color, fill, 1)};
+  border-color: #{getCssVar(color, border)};
+}
+
+// 选择
+.el-select__tags .el-tag--info {
+  color: #{getCssVar(editor, default, text-color)};
+  background-color: #{getCssVar(color, fill, 0)};
+}
+
+// 图片预览
+.el-image {
+  .el-image-viewer__actions__inner {
+    color: #{getCssVar(color, text, 1)};
+  }
+
+  .el-image-viewer__actions {
+    background-color: #{getCssVar(color, bg, 1)};
+  }
+
+  .el-image-viewer__close {
+    color: #{getCssVar(color, text, 1)};
+    background-color: #{getCssVar(color, bg, 1)};
+  }
+}
+
+// 评分
+.el-rate {
+  --el-rate-fill-color: #{getCssVar(color, primary)};
+}
+
+// 弹出框
+.el-alert--info {
+  --el-alert-bg-color: #{getCssVar(color, bg, 1)};
+}
+
+// 输入框后缀区间隔
+.el-input__suffix-inner {
+  gap: getCssVar(spacing, tight);
+}
+
+// 多选框
+.el-checkbox{
+  --el-checkbox-disabled-input-fill: #{getCssVar(color, disabled, fill)};
+}
+
+.el-checkbox__label {
+  padding-left: getCssVar(spacing, base-tight);
+}
+
+// 单选框
+.el-radio__label {
+  padding-left: getCssVar(spacing, base-tight);
+}
+
+// 下拉悬浮框
+.el-popper.el-dropdown__popper {
+  .el-dropdown-menu {
+    padding: getCssVar(spacing, extra-tight) 0;
+    background-color: getCssVar(color, primary);
+
+    .el-dropdown-menu__item {
+      padding: getCssVar(spacing, tight) getCssVar(spacing, base);
+      color: getCssVar(color, primary, text);
+      background-color: getCssVar(color, primary);
+
+      &:hover {
+        background-color: getCssVar(color, primary, hover);
+      }
+
+      &.is-disabled{
+        cursor: not-allowed;
+        background-color: getCssVar(color, primary, disabled);
+      }
+    }
+  }
+
+  .el-scrollbar {
+    .el-dropdown__list {
+      background-color: getCssVar(color, primary);
+
+      .el-dropdown-menu {
+        padding: getCssVar(spacing, extra-tight) 0;
+      }
+
+      .el-dropdown-menu__item {
+        padding: getCssVar(spacing, tight) getCssVar(spacing, base);
+        color: getCssVar(color, primary, text);
+        background-color: getCssVar(color, primary);
+
+        &:hover {
+          background-color: getCssVar(color, primary, hover);
+        }
+
+        &.is-disabled{
+          cursor: not-allowed;
+          background-color: getCssVar(color, primary, disabled);
+        }
+      }
+    }
+  }
+}
+
+// 下拉框内浏览器内置样式边框去除
+.el-dropdown .el-tooltip__trigger:focus-visible {
+  outline: none;
+}
+
+// 模态和飘窗内视图背景色补充
+.el-drawer__body,
+.el-dialog__body {
+  background-color: getCssVar(view, bg, color);
+}

package/src/theme/generic/index.scss

@@ -0,0 +1,2 @@
+/** 重置标准化样式、框大小定义等，例如 normalize.css、reset.css **/
+@import './element-plus';

package/src/theme/index.scss

@@ -0,0 +1,17 @@
+/* 重置标准样式 */
+@import './generic/index';
+
+/* 标准元素样式 */
+@import './elements/index';
+
+/* 面向对象编写样式 */
+@import './objects/index';
+
+/* 特异性最高的样式，唯一可以使用 !important */
+@import './tumps/index';
+
+/* 默认主题 */
+@import './theme/index';
+
+/* 定义变量 */
+@import './var';

package/src/theme/objects/expand/expand.scss

@@ -0,0 +1,41 @@
+// 默认组件的样式扩展
+
+@include b(view-detabexpview) {
+  position: relative;
+
+  .#{bem(control-tabexppanel)} {
+    .el-tabs__nav-wrap::after {
+      background-color: transparent;
+    }
+  }
+}
+
+@include b(panel-container) {
+
+  @include m(indexactions) {
+    .el-button {
+      font-size: 28px;
+    }
+
+    .el-button:hover {
+      background-color: transparent;
+    }
+  }
+
+  @include m(indextopactions) {
+    .el-button {
+      padding: 0 getCssVar(spacing, tight);
+      font-size: 20px;
+    }
+
+    .el-button:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.#{bem(panel-container)}.#{bem(panel-container, '', view_footer)} {
+  height: 54px;
+  padding: 0 getCssVar(spacing, base);
+  border-top: 1px solid getCssVar(color, border);
+}

package/src/theme/objects/index.scss

@@ -0,0 +1,3 @@
+/** 面向对象编写样式,  **/
+@import './expand/expand';
+@import './state/state';

package/src/theme/objects/state/state.scss

@@ -0,0 +1 @@
+// 状态