@import './button.less'; @import './date-picker.less'; @import './dialog.less'; @import './time-select.less'; @import './table.less'; @import './input.less'; @import './pagination.less'; @import "./upload.less"; @import './switch.less'; @import './tabs.less'; @import './checkbox'; @import './message.less'; @import './message-box.less'; @import './notification.less'; @import './badge.less'; @import './slider.less'; @import './input-number.less'; @import './loading.less'; @import './steps.less'; @import './select'; @import './calendar.less'; @import './tooltip.less'; @import "./tag.less"; @import './rate.less'; @import './carousel.less'; @import './avatar.less'; @import './tree.less'; @import './alert.less'; @import './breadcrumb.less'; @import './header-nav.less'; @import './form.less'; :root { --el-border-radius-base: 2px; // 重置主题色 --el-color-primary: #3786fd; --el-color-primary-light-3:#73aafe; --el-color-primary-light-5:#9bc3fe; --el-color-primary-light-7:#c3dbfe; --el-color-primary-light-8:#d7e7ff; --el-color-primary-light-9:#ebf3ff; --el-color-primary-dark-2:#0253cc; --el-color-success: #19cc96; --el-color-success-light-3:#5edbb6; --el-color-success-light-5:#8ce6cb; --el-color-success-light-7:#baf0e0; --el-color-success-light-8:#d1f5ea; --el-color-success-light-9:#e8faf5; --el-color-success-dark-2:#0e7153; --el-color-danger: #ff5b63; --el-color-danger-light-3:#ff8c92; --el-color-danger-light-5:#ffadb1; --el-color-danger-light-7:#ffced0; --el-color-danger-light-8:#ffdee0; --el-color-danger-light-9:#ffefef; --el-color-danger-dark-2:#f4000c; --el-color-warning: #ff8f33; --el-color-warning-light-3:#ffb170; --el-color-warning-light-5:#ffc799; --el-color-warning-light-7:#ffddc2; --el-color-warning-light-8:#ffe9d6; --el-color-warning-light-9:#fff4eb; --el-color-warning-dark-2:#cc5c00; --el-color-info: #7f8b93; --el-color-info-light-3:#a5aeb3; --el-color-info-light-5:#bfc5c9; --el-color-info-light-7:#d9dcdf; --el-color-info-light-8:#e5e8e9; //--el-color-info-light-9:#f2f3f4; [注: 此处特殊处理为f7f7f7] --el-color-info-dark-2:#4f575d; --el-menu-item-height: 40px; --el-menu-sub-item-height: var(--el-menu-item-height); --el-text-color-primary: #333; --el-text-color-regular: #666; --el-text-color-secondary: #999; --el-text-color-disabled: #c0c0c0; --el-overlay-color-lighter: rgba(0, 0, 0, 0.3); // box-shadow --el-box-shadow-lighter: 0px 5px 12px 4px rgba(0,0,0,0.09), 0px 2px 6px 0px rgba(0,0,0,0.12), 0px 1px 2px -2px rgba(0,0,0,0.16); ; --el-box-shadow-light: 0px 9px 28px 8px rgba(0,0,0,0.05), 0px 6px 16px 0px rgba(0,0,0,0.08), 0px 3px 6px -4px rgba(0,0,0,0.12); --el-box-shadow: 0px 12px 48px 16px rgba(0,0,0,0.03), 0px 9px 28px 0px rgba(0,0,0,0.05), 0px 6px 16px -8px rgba(0,0,0,0.08); ; // input 部分颜色覆盖 --el-border-color: #d9d9d9; --el-fill-color: #f0f2f5; // el-tag 的填充色使用--el-fill-color --el-fill-color-light: #f7f7f7; --el-text-color-placeholder: #999; // button 部分颜色覆盖 // 非规范的写法(当导致info-light-9不是正在的info-light-9) --el-color-info-light-9: #f7f7f7; // 根据按钮disabled背景颜色设置 --el-border-color-light: #e6e6e6; // 根据按钮disabled边框颜色设置 --el-popover-border-radius: var(--el-border-radius-base); // el-popover在appendToBody时无法获取css变量 // el-select 下来 hover 色 #f4f7fa // 顶部导航栏高度 --main-framework-header-height: 64px; // menu 层级缩进 --el-menu-level-padding: 30px; } // 字阶与行高 .font-mix(@size){ font-size: @size; line-height: (@size+8); } each(range(12, 52, 2),.(@value,@key) { .font-@{value}{ .font-mix(@value * 1px) } }) // 字重 .font-regular{ font-weight: normal; } .font-medium{ font-weight: bold; } //字体 body{ font-family: -apple-system, Roboto, Arial, "PingFang SC", "Microsoft Yahei", "Source Han Sans", sans-serif; }