ele-admin-plus 1.0.0-beta.1

package/es/style/themes/default.scss

@@ -0,0 +1,403 @@
+/** 默认主题 */
+@use 'element-plus/theme-chalk/src/mixins/function.scss' as *;
+@use 'sass:map';
+
+// 生成 css 变量名
+@function eleJoinVar($list) {
+  $name: '--ele';
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// 获取 css 变量值
+@function eleVar($arg1, $arg2: '', $arg3: '') {
+  $args: $arg1, $arg2;
+  @if $arg3 != '' {
+    @return var(#{eleJoinVar($args)}, $arg3);
+  } @else {
+    @return var(#{eleJoinVar($args)});
+  }
+}
+
+// 获取 css 变量名
+@function eleVarName($args...) {
+  @return eleJoinVar($args);
+}
+
+// 生成组件 css 变量
+@mixin set-ele-var($name, $variables) {
+  @if map.has-key($variables, $name) {
+    @each $attribute, $value in map.get($variables, $name) {
+      #{eleVarName($name, $attribute)}: #{$value};
+    }
+  }
+}
+
+// 获取 element 的 css 变量值
+@function elVar($args...) {
+  @return getCssVar($args...);
+}
+
+// 获取 element 的 css 变量名
+@function elVarName($args...) {
+  @return getCssVarName($args...);
+}
+
+// 过渡动画
+$ele-transition: 0.3s cubic-bezier(0.2, 0, 0, 1) !default;
+
+// 样式变量
+$ele: () !default;
+$ele: map.merge(
+  (
+    'scrollbar': (
+      // 滚动条
+      'size': 12px,
+      'radius': 6px,
+      'padding': 2px,
+      'color': #cfcfcf,
+      'hover-color': #b6b6b6,
+      'bg': transparent,
+      'mini-size': 8px,
+      'mini-radius': 4px
+    ),
+    'layout': (
+      // 布局
+      'bg': elVar('bg-color', 'page'),
+      'height': 100vh,
+      'index': 99,
+      'mask-index': calc(#{elVar('index', 'popper')} + 800)
+    ),
+    'header': (
+      // 顶栏
+      'height': 54px,
+      'bg': elVar('bg-color'),
+      'shadow': 0 1px 4px rgba(0, 21, 41, 0.08),
+      'line-color': elVar('border-color', 'extra-light')
+    ),
+    'header-dark': (
+      // 暗色顶栏
+      'bg': #001529,
+      'shadow': 0 1px 4px rgba(0, 0, 0, 0.1)
+    ),
+    'logo': (
+      // Logo
+      'color': elVar('text-color', 'primary'),
+      'dark-color': #fff,
+      'shadow': 1px 2px 3px rgba(0, 21, 41, 0.08),
+      'dark-shadow': 0 3px 4px rgba(0, 0, 0, 0.35)
+    ),
+    'sidebar': (
+      // 侧栏
+      'width': 220px,
+      'collapse-width': 54px,
+      'mix-width': 160px,
+      'bg': elVar('bg-color'),
+      'dark-bg': #001529,
+      'shadow': 1px 3px 3px rgba(0, 21, 41, 0.08),
+      'dark-shadow': 0 4px 4px rgba(0, 0, 0, 0.35),
+      'transition': (width $ele-transition, left $ele-transition),
+      'tool-hover-bg': rgba(0, 0, 0, 0.025),
+      'dark-tool-hover-bg': rgba(255, 255, 255, 0.05)
+    ),
+    'sidebox': (
+      // 双侧栏一级
+      'width': 80px,
+      'padding': 0 8px,
+      'collapse-padding': 0 4px,
+      'font-size': 12px,
+      'icon-font-size': 18px,
+      'title-margin': 6px,
+      'item-padding': 12px 0,
+      'collapse-item-padding': 12px 0,
+      'item-margin': 8px,
+      'collapse-item-margin': 8px,
+      'item-radius': 2px,
+      'popup-margin': 8px
+    ),
+    'message-plain': (
+      // 消息提示简约风格
+      'color': elVar('text-color', 'regular'),
+      'shadow': elVar('box-shadow', 'light'),
+      'bg': elVar('bg-color')
+    ),
+    'message-mask': (
+      // 消息提示遮罩层
+      'color': elVar('overlay-color', 'lighter'),
+      'size': 1000vw
+    ),
+    'bottom-bar': (
+      // 底部工具栏
+      'padding': 8px 16px,
+      'bg': elVar('bg-color', 'overlay'),
+      'shadow': 0 -1px 2px rgba(0, 0, 0, 0.03)
+    ),
+    'card-header': (
+      // 卡片标题
+      'padding': 14px 24px,
+      'font-size': elVar('font-size', 'medium'),
+      'line-height': calc(#{eleVar('card-header', 'font-size')} + 8px)
+    ),
+    'drawer-header': (
+      // 抽屉标题
+      'color': elVar('text-color', 'regular'),
+      'padding': 14px 16px,
+      'border': 1px solid elVar('border-color', 'lighter'),
+      'font-size': elVar('font-size', 'medium'),
+      'line-height': calc(#{eleVar('drawer-header', 'font-size')} + 8px)
+    ),
+    'drawer-icon': (
+      // 抽屉图标按钮
+      'color': elVar('text-color', 'secondary'),
+      'hover-color': elVar('text-color', 'primary'),
+      'font-size': elVar('font-size', 'large')
+    ),
+    'drawer-footer': (
+      // 抽屉底部
+      'padding': 14px 16px,
+      'border': 1px solid elVar('border-color', 'lighter')
+    ),
+    'file-list': (
+      // 文件列表
+      'selector-index': 999,
+      'selector-border': 1px solid #0078d7,
+      'selector-bg': rgba(0, 120, 215, 0.2),
+      'item-width': 110px,
+      'item-space': 14px,
+      'item-radius': 6px,
+      'item-border': 1px solid transparent,
+      'item-active-border-color': elVar('color-primary', 'light-8'),
+      'item-active-bg': elVar('color-primary', 'light-9'),
+      'table-sort-color': hsla(0, 0%, 60%, 0.6),
+      'table-sort-active-color': elVar('color-primary')
+    ),
+    'menu': (
+      // 垂直菜单
+      'icon-size': 16px,
+      'collapse-icon-size': 18px,
+      'icon-margin': 8px,
+      'arrow-size': 17px,
+      'child-bg': rgba(0, 0, 0, 0.02),
+      'collapse-width': 58px
+    ),
+    'menu-item': (
+      // 菜单项
+      'height': 40px,
+      'line-height': eleVar('menu-item', 'height'),
+      'margin': 8px,
+      'active-bg': elVar('color-primary', 'light-9'),
+      'active-line': 3px
+    ),
+    'menu-popup': (
+      // 气泡菜单
+      'min-width': 160px,
+      'item-padding': 16px,
+      'shadow': elVar('box-shadow', 'light'),
+      'dark-shadow': elVar('box-shadow', 'dark')
+    ),
+    'menu-horizontal': (
+      // 水平菜单
+      'item-padding': 4px,
+      'item-margin': 12px
+    ),
+    'menu-group': (
+      // 分组菜单
+      'color': elVar('text-color', 'placeholder'),
+      'size': 12px,
+      'weight': bold,
+      'icon-size': 12px,
+      'padding-top': 6px,
+      'padding-bottom': 2px,
+      'padding-right': elVar('menu', 'base-level-padding'),
+      'dark-color': rgba(255, 255, 255, 0.6)
+    ),
+    'menu-dark': (
+      // 菜单暗色主题
+      'bg': #001529,
+      'child-bg': #000c17,
+      'color': rgba(255, 255, 255, 0.8),
+      'active-color': #fff,
+      'active-bg': elVar('color-primary')
+    ),
+    'menu-colorful': (
+      // 菜单彩色图标
+      'icon-width': 24px,
+      'icon-size': 16px,
+      'icon-color': #fff,
+      'dot-size': 8px,
+      'dot-margin': 0 8px 0 0,
+      'dot-color': #d9d9d9,
+      'dot-hover-color': elVar('color-primary'),
+      'dark-dot-color': rgba(255, 255, 255, 0.65),
+      'dark-dot-hover-color': #fff,
+      'color-1': #61b2fc,
+      'color-2': #7dd733,
+      'color-3': #32a2d4,
+      'color-4': #7383cf,
+      'color-5': #f5686f,
+      'color-6': #2bccce,
+      'color-7': #7dd733,
+      'color-8': #faad14
+    ),
+    'menu-scrollbar': (
+      // 菜单滚动条
+      'size': 8px,
+      'radius': 4px,
+      'padding': 2px,
+      'color': #cfcfcf,
+      'hover-color': #b6b6b6,
+      'bg': transparent
+    ),
+    'menu-dark-scrollbar': (
+      // 菜单暗色主题滚动条
+      'color': #4d5b69,
+      'hover-color': #66737f,
+      'bg': transparent
+    ),
+    'modal': (
+      // 弹窗
+      'header-padding': 14px 20px,
+      'header-border': 1px solid elVar('border-color', 'lighter'),
+      'footer-padding': 10px 20px,
+      'footer-border': 1px solid elVar('border-color', 'lighter'),
+      'body-padding': 24px 20px,
+      'form-body-padding': 24px 20px 12px 20px,
+      'icon-color': elVar('text-color', 'secondary'),
+      'icon-hover-color': elVar('text-color', 'regular'),
+      'icon-font-size': 16px,
+      'icon-space': 16px,
+      'resize-bg':
+        linear-gradient(
+          135deg,
+          transparent 45%,
+          hsla(0, 0%, 60%, 0.8) 0,
+          hsla(0, 0%, 60%, 0.8) 55%,
+          transparent 0,
+          transparent 75%,
+          hsla(0, 0%, 60%, 0.8) 0,
+          hsla(0, 0%, 60%, 0.8) 85%,
+          transparent 0
+        ),
+      'fullscreen-border': 1px solid elVar('border-color', 'lighter'),
+      'mobile-space': 16px,
+      'index': elVar('index', 'popper')
+    ),
+    'page': (
+      // 页面容器
+      'padding': 16px,
+      'max-width': 1120px
+    ),
+    'tool-column': (
+      // 表格列配置
+      'width': 220px,
+      'max-height': 480px,
+      'line-color': elVar('border-color', 'light'),
+      'header-padding': 6px 16px 4px 16px,
+      'body-padding': 6px 0,
+      'item-padding': 16px,
+      'item-height': 28px
+    ),
+    'tab': (
+      // 标签页
+      'line-color': elVar('border-color', 'light'),
+      'height': 40px,
+      'padding': 16px
+    ),
+    'tab-small': (
+      // 标签页小型尺寸
+      'height': 32px,
+      'padding': 12px
+    ),
+    'tab-large': (
+      // 标签页大型尺寸
+      'height': 52px,
+      'padding': 22px
+    ),
+    'tab-simple': (
+      // 标签页简约风格
+      'active': elVar('color-primary', 'light-9'),
+      'hover': rgba(0, 0, 0, 0.025)
+    ),
+    'tab-indicator': (
+      // 标签页指示器风格
+      'size': 8px,
+      'color': #d9d9d9,
+      'margin': 6px
+    ),
+    'tab-button': (
+      // 标签页按钮风格
+      'space': 8px,
+      'radius': 4px,
+      'bg': elVar('bg-color', 'overlay')
+    ),
+    'table': (
+      // 静态表格
+      'bg': elVar('bg-color', 'overlay'),
+      'border-color': elVar('border-color', 'light'),
+      'font-szie': elVar('font-size', 'base'),
+      'line-height': 23px,
+      'padding': 9px 12px,
+      'th-color': elVar('text-color', 'primary'),
+      'th-font-weight': normal,
+      'th-bg': elVar('fill-color', 'light'),
+      'tr-bg': elVar('bg-color', 'overlay'),
+      'tr-hover-bg': elVar('fill-color', 'light'),
+      'tr-active-bg': elVar('color-primary', 'light-9'),
+      'lg-size': elVar('font-size', 'base'),
+      'lg-padding': 13px 16px,
+      'sm-size': elVar('font-size', 'extra-small'),
+      'sm-padding': 4px 8px
+    ),
+    'text-size': (
+      // 文本
+      'xxl': calc(#{elVar('font-size', 'extra-large')} + 6px),
+      'xxxl': calc(#{elVar('font-size', 'extra-large')} + 34px)
+    ),
+    'toolbar': (
+      // 工具栏
+      'padding': 0 16px,
+      'bg': elVar('fill-color', 'light'),
+      'border': 1px solid elVar('border-color', 'light'),
+      'radius': 0,
+      'space': 8px
+    ),
+    'toolbar-plain': (
+      // 工具栏朴素风格
+      'margin': 0 0 4px 0
+    ),
+    'tool': (
+      // 工具栏按钮
+      'font-size': elVar('font-size', 'base'),
+      'padding': 6px,
+      'border': 1px solid elVar('border-color'),
+      'radius': elVar('border-radius', 'small'),
+      'hover-bg': rgba(0, 0, 0, 0.025)
+    ),
+    'tool-plain': (
+      // 工具栏按钮朴素风格
+      'font-size': 16px
+    ),
+    'tooltip': (
+      // 文字提示
+      'padding': '6px 10px',
+      'radius': elVar('border-radius', 'base'),
+      'size': elVar('font-size', 'extra-small'),
+      'line-height': '20px'
+    ),
+    'tooltip-dark': (
+      // 文字提示暗色风格
+      'color': '#fff',
+      'bg': '#000',
+      'border': none
+    ),
+    'image-viewer': (
+      // 图片预览
+      'tool-bg': 'rgba(0, 0, 0, 0.88)'
+    )
+  ),
+  $ele
+);