@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 { --@{elNamespace}-border-radius-base: 2px; // 重置主题色 --@{elNamespace}-color-primary: #3786fd; --@{elNamespace}-color-primary-light-3:#73aafe; --@{elNamespace}-color-primary-light-5:#9bc3fe; --@{elNamespace}-color-primary-light-7:#c3dbfe; --@{elNamespace}-color-primary-light-8:#d7e7ff; --@{elNamespace}-color-primary-light-9:#ebf3ff; --@{elNamespace}-color-primary-dark-2:#0253cc; --@{elNamespace}-color-success: #19cc96; --@{elNamespace}-color-success-light-3:#5edbb6; --@{elNamespace}-color-success-light-5:#8ce6cb; --@{elNamespace}-color-success-light-7:#baf0e0; --@{elNamespace}-color-success-light-8:#d1f5ea; --@{elNamespace}-color-success-light-9:#e8faf5; --@{elNamespace}-color-success-dark-2:#0e7153; --@{elNamespace}-color-danger: #ff5b63; --@{elNamespace}-color-danger-light-3:#ff8c92; --@{elNamespace}-color-danger-light-5:#ffadb1; --@{elNamespace}-color-danger-light-7:#ffced0; --@{elNamespace}-color-danger-light-8:#ffdee0; --@{elNamespace}-color-danger-light-9:#ffefef; --@{elNamespace}-color-danger-dark-2:#f4000c; --@{elNamespace}-color-warning: #ff8f33; --@{elNamespace}-color-warning-light-3:#ffb170; --@{elNamespace}-color-warning-light-5:#ffc799; --@{elNamespace}-color-warning-light-7:#ffddc2; --@{elNamespace}-color-warning-light-8:#ffe9d6; --@{elNamespace}-color-warning-light-9:#fff4eb; --@{elNamespace}-color-warning-dark-2:#cc5c00; --@{elNamespace}-color-info: #7f8b93; --@{elNamespace}-color-info-light-3:#a5aeb3; --@{elNamespace}-color-info-light-5:#bfc5c9; --@{elNamespace}-color-info-light-7:#d9dcdf; --@{elNamespace}-color-info-light-8:#e5e8e9; //--@{elNamespace}-color-info-light-9:#f2f3f4; [注: 此处特殊处理为f7f7f7] --@{elNamespace}-color-info-dark-2:#4f575d; --@{elNamespace}-menu-item-height: 40px; --@{elNamespace}-menu-sub-item-height: var(~'--@{elNamespace}-menu-item-height'); --@{elNamespace}-text-color-primary: #333; --@{elNamespace}-text-color-regular: #666; --@{elNamespace}-text-color-secondary: #999; --@{elNamespace}-text-color-disabled: #c0c0c0; --@{elNamespace}-overlay-color-lighter: rgba(0, 0, 0, 0.3); // box-shadow --@{elNamespace}-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); ; --@{elNamespace}-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); --@{elNamespace}-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 部分颜色覆盖 --@{elNamespace}-border-color: #d9d9d9; --@{elNamespace}-fill-color: #f0f2f5; // el-tag 的填充色使用--@{elNamespace}-fill-color --@{elNamespace}-fill-color-light: #f7f7f7; --@{elNamespace}-text-color-placeholder: #999; // button 部分颜色覆盖 // 非规范的写法(当导致info-light-9不是正在的info-light-9) --@{elNamespace}-color-info-light-9: #f7f7f7; // 根据按钮disabled背景颜色设置 --@{elNamespace}-border-color-light: #e6e6e6; // 根据按钮disabled边框颜色设置 --@{elNamespace}-popover-border-radius: var(~'--@{elNamespace}-border-radius-base'); // el-popover在appendToBody时无法获取css变量 // el-select 下来 hover 色 #f4f7fa // 顶部导航栏高度 --main-framework-header-height: 64px; // menu 层级缩进 --@{elNamespace}-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; }