github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Theme: parameterize color variables

pull/2384/head
Leopoldthecoder 2017-01-12 21:45:48 +08:00
parent 0e13dab680
commit caa4fc4560
31 changed files with 251 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/theme-default/src/alert.css
View File

@ -12,7 +12,7 @@
position: relative; position: relative;
background-color: var(--color-white); background-color: var(--color-white);
overflow: hidden; overflow: hidden;
color: #fff; color: var(--color-white);
opacity: 1; opacity: 1;
display: table; display: table;
transition: opacity .2s; transition: opacity .2s;
@ -59,14 +59,14 @@
} }
& .el-alert__description { & .el-alert__description {
color: #fff; color: var(--color-white);
font-size: var(--alert-description-font-size); font-size: var(--alert-description-font-size);
margin: 5px 0 0 0; margin: 5px 0 0 0;
} }
@e closebtn { @e closebtn {
font-size: var(--alert-close-font-size); font-size: var(--alert-close-font-size);
color: #fff; color: var(--color-white);
opacity: 1; opacity: 1;
position: absolute 12px 15px * *; position: absolute 12px 15px * *;
cursor: pointer; cursor: pointer;

12
packages/theme-default/src/autocomplete.css
View File

@ -12,8 +12,8 @@
left: 0; left: 0;
top: 110%; top: 110%;
margin: 5px 0 0; margin: 5px 0 0;
background-color: #fff; background-color: var(--color-white);
border: 1px solid #D3DCE6; border: 1px solid var(--color-base-gray);
width: 100%; width: 100%;
padding: 6px 0; padding: 6px 0;
z-index: 10; z-index: 10;
@ -29,7 +29,7 @@
padding: 0 10px; padding: 0 10px;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
color: #475669; color: var(--color-extra-light-black);
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
@ -40,14 +40,14 @@
} }
&.highlighted { &.highlighted {
background-color: var(--color-primary); background-color: var(--color-primary);
color: #fff; color: var(--color-white);
} }
&:active { &:active {
background-color: darken(var(--color-primary), 0.2); background-color: darken(var(--color-primary), 0.2);
} }
&.divider { &.divider {
margin-top: 6px; margin-top: 6px;
border-top: 1px solid #D3DCE6; border-top: 1px solid var(--color-base-gray);
} }
&.divider:last-child { &.divider:last-child {
margin-bottom: -6px; margin-bottom: -6px;
@ -64,7 +64,7 @@
@utils-vertical-center; @utils-vertical-center;
&:hover { &:hover {
background-color: #fff; background-color: var(--color-white);
} }
} }

4
packages/theme-default/src/badge.css
View File

@ -10,7 +10,7 @@
@e content { @e content {
background-color: var(--badge-fill); background-color: var(--badge-fill);
border-radius: var(--badge-radius); border-radius: var(--badge-radius);
color: #fff; color: var(--color-white);
display: inline-block; display: inline-block;
font-size: var(--badge-font-size); font-size: var(--badge-font-size);
height: var(--badge-size); height: var(--badge-size);
@ -18,7 +18,7 @@
padding: 0 var(--badge-padding); padding: 0 var(--badge-padding);
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border: 1px solid #fff; border: 1px solid var(--color-white);
@when fixed { @when fixed {
position: absolute 0 calc(var(--badge-size) / 2 + 1) * *; position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;

6
packages/theme-default/src/breadcrumb.css
View File

@ -10,7 +10,7 @@
@e separator { @e separator {
margin: 0 8px; margin: 0 8px;
color: #c0ccda; color: var(--color-extra-light-silver);
} }
@e item { @e item {
float: left; float: left;
@ -18,7 +18,7 @@
@e inner { @e inner {
&, & a { &, & a {
transition: color .15s linear; transition: color .15s linear;
color:#475669; color:var(--color-extra-light-black);
&:hover { &:hover {
color: var(--color-primary); color: var(--color-primary);
@ -31,7 +31,7 @@
.el-breadcrumb__item__inner, .el-breadcrumb__item__inner,
.el-breadcrumb__item__inner a { .el-breadcrumb__item__inner a {
&, &:hover { &, &:hover {
color: #99a9bf; color: var(--color-light-silver);
cursor: text; cursor: text;
} }
} }

18
packages/theme-default/src/button.css
View File

@ -48,13 +48,13 @@
@when plain { @when plain {
&:hover, &:hover,
&:focus { &:focus {
background: #fff; background: var(--color-white);
border-color: var(--color-primary); border-color: var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
} }
&:active { &:active {
background: #fff; background: var(--color-white);
border-color: shade(var(--color-primary), var(--button-active-shade-percent)); border-color: shade(var(--color-primary), var(--button-active-shade-percent));
color: shade(var(--color-primary), var(--button-active-shade-percent)); color: shade(var(--color-primary), var(--button-active-shade-percent));
outline: none; outline: none;
@ -85,9 +85,9 @@
&, &,
&:hover, &:hover,
&:focus { &:focus {
background-color: #fff; background-color: var(--color-white);
border-color: #d3dce6; border-color: var(--color-base-gray);
color: #C0CCDA; color: var(--color-extra-light-silver);
} }
} }
} }
@ -190,14 +190,14 @@
@each $type in (primary, success, warning, danger, info) { @each $type in (primary, success, warning, danger, info) {
.el-button--$type { .el-button--$type {
&:first-child { &:first-child {
border-right-color: rgba(#fff, 0.5); border-right-color: rgba(var(--color-white), 0.5);
} }
&:last-child { &:last-child {
border-left-color: rgba(#fff, 0.5); border-left-color: rgba(var(--color-white), 0.5);
} }
&:not(:first-child):not(:last-child) { &:not(:first-child):not(:last-child) {
border-left-color: rgba(#fff, 0.5); border-left-color: rgba(var(--color-white), 0.5);
border-right-color: rgba(#fff, 0.5); border-right-color: rgba(var(--color-white), 0.5);
} }
} }
} }

2
packages/theme-default/src/card.css
View File

@ -5,7 +5,7 @@
@b card { @b card {
border: 1px solid var(--card-border-color); border: 1px solid var(--card-border-color);
border-radius: var(--card-border-radius); border-radius: var(--card-border-radius);
background-color: #fff; background-color: var(--color-white);
overflow: hidden; overflow: hidden;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12), box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
0px 0px 6px 0px rgba(0, 0, 0, .04); 0px 0px 6px 0px rgba(0, 0, 0, .04);

154
packages/theme-default/src/common/var.css
View File

@ -12,33 +12,44 @@
/* Colors /* Colors
-------------------------- */ -------------------------- */
--color-primary: #20a0ff; --color-primary: #20a0ff;
--color-success: #13ce66; --color-success: #13ce66;
--color-warning: #f7ba2a; --color-warning: #f7ba2a;
--color-danger: #ff4949; --color-danger: #ff4949;
--color-info: #50bfff; --color-info: #50bfff;
--color-blue: #2e90fe;
--color-blue-light: #5da9ff; --color-secondary: color(var(--color-primary) s(99%) l(*0.9));
--color-blue-lighter: rgba(var(--color-blue), 0.12);
--color-white: #fff; --color-white: #fff;
--color-dark-white: color(var(--color-white) blend(var(--color-primary) 2%));
--color-black: #000; --color-black: #000;
--color-grey: #c0ccda;
--color-base-black: color(var(--color-primary) h(+6) s(33%) l(18%));
--color-light-black: color(var(--color-base-black) h(+5) s(27%) l(27%));
--color-extra-light-black: color(var(--color-base-black) h(+2) s(19%) l(35%));
--color-base-silver: color(var(--color-base-black) h(+3) s(16%) l(58%));
--color-light-silver: color(var(--color-base-black) h(+3) s(23%) l(67%));
--color-extra-light-silver: color(var(--color-base-black) s(26%) l(80%));
--color-base-gray: color(var(--color-base-black) s(28%) l(86%));
--color-light-gray: color(var(--color-base-black) h(+10) s(33%) l(92%));
--color-extra-light-gray: color(var(--color-base-black) h(+6) s(33%) l(95%));
/* Link /* Link
-------------------------- */ -------------------------- */
--link-color: #475669; --link-color: var(--color-extra-light-black);
--link-hover-color: var(--color-primary); --link-hover-color: var(--color-primary);
/* Border /* Border
-------------------------- */ -------------------------- */
--border-width-base: 1px; --border-width-base: 1px;
--border-style-base: solid; --border-style-base: solid;
--border-color-base: var(--color-grey); --border-color-base: var(--color-extra-light-silver);
--border-color-hover: #8492a6; --border-color-hover: var(--color-base-silver);
--border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base); --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
--border-radius-base: 4px; --border-radius-base: 4px;
--border-radius-small: 2px; --border-radius-small: 2px;
--border-radius-circle: 100%; --border-radius-circle: 100%;
--shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
/* Box-shadow /* Box-shadow
-------------------------- */ -------------------------- */
@ -52,7 +63,7 @@
/* Font /* Font
-------------------------- */ -------------------------- */
--font-size-base: 14px; --font-size-base: 14px;
--font-color-base: #1f2d3d; --font-color-base: var(--color-base-black);
--font-color-disabled-base: #bbb; --font-color-disabled-base: #bbb;
/* Size /* Size
@ -67,9 +78,9 @@
/* Disable base /* Disable base
-------------------------- */ -------------------------- */
--disabled-fill-base: #EFF2F7; --disabled-fill-base: var(--color-extra-light-gray);
--disabled-color-base: #bbb; --disabled-color-base: #bbb;
--disabled-border-base: #D3DCE6; --disabled-border-base: var(--color-base-gray);
/* Icon /* Icon
-------------------------- */ -------------------------- */
@ -78,7 +89,7 @@
/* Checkbox /* Checkbox
-------------------------- */ -------------------------- */
--checkbox-font-size: 14px; --checkbox-font-size: 14px;
--checkbox-color: #1f2d3d; --checkbox-color: var(--color-base-black);
--checkbox-input-height: 18px; --checkbox-input-height: 18px;
--checkbox-input-width: 18px; --checkbox-input-width: 18px;
--checkbox-input-border-radius: var(--border-radius-base); --checkbox-input-border-radius: var(--border-radius-base);
@ -95,17 +106,16 @@
--checkbox-disabled-checked-input-border-color: var(--disabled-border-base); --checkbox-disabled-checked-input-border-color: var(--disabled-border-base);
--checkbox-disabled-checked-icon-color: var(--color-white); --checkbox-disabled-checked-icon-color: var(--color-white);
--checkbox-checked-input-border-color: var(--color-blue); --checkbox-checked-input-border-color: var(--color-secondary);
--checkbox-checked-input-fill: var(--color-primary); --checkbox-checked-input-fill: var(--color-primary);
--checkbox-checked-icon-color: var(--fill-base); --checkbox-checked-icon-color: var(--fill-base);
--checkbox-input-shadow-hover: var(--shadow-base);
--checkbox-input-border-color-hover: var(--color-primary); --checkbox-input-border-color-hover: var(--color-primary);
/* Radio /* Radio
-------------------------- */ -------------------------- */
--radio-font-size: 14px; --radio-font-size: 14px;
--radio-color: #1f2d3d; --radio-color: var(--color-base-black);
--radio-input-height: 18px; --radio-input-height: 18px;
--radio-input-width: 18px; --radio-input-width: 18px;
--radio-input-border-radius: var(--border-radius-circle); --radio-input-border-radius: var(--border-radius-circle);
@ -126,7 +136,6 @@
--radio-checked-input-fill: var(--color-white); --radio-checked-input-fill: var(--color-white);
--radio-checked-icon-color: var(--color-primary); --radio-checked-icon-color: var(--color-primary);
--radio-input-shadow-hover: var(--shadow-base);
--radio-input-border-color-hover: var(--color-primary); --radio-input-border-color-hover: var(--color-primary);
--radio-button-font-size: var(--font-size-base); --radio-button-font-size: var(--font-size-base);
@ -136,9 +145,9 @@
--select-border-color-hover: var(--border-color-hover); --select-border-color-hover: var(--border-color-hover);
--select-disabled-border: var(--disabled-border-base); --select-disabled-border: var(--disabled-border-base);
--select-font-size: var(--font-size-base); --select-font-size: var(--font-size-base);
--select-close-hover-color: #99a9bf; --select-close-hover-color: var(--color-light-silver);
--select-input-color: var(--color-grey); --select-input-color: var(--color-extra-light-silver);
--select-multiple-input-color: #666; --select-multiple-input-color: #666;
--select-input-focus-background: var(--color-primary); --select-input-focus-background: var(--color-primary);
--select-input-font-size: 12px; --select-input-font-size: 12px;
@ -148,11 +157,11 @@
--select-tag-background: var(--color-primary); --select-tag-background: var(--color-primary);
--select-option-color: var(--link-color); --select-option-color: var(--link-color);
--select-option-disabled-color: var(--color-grey); --select-option-disabled-color: var(--color-extra-light-silver);
--select-option-height: 36px; --select-option-height: 36px;
--select-option-hover-background: #e5e9f2; --select-option-hover-background: var(--color-light-gray);
--select-option-selected: var(--color-primary); --select-option-selected: var(--color-primary);
--select-option-selected-hover: #1D8CE0; --select-option-selected-hover: shade(var(--color-primary), 0.12);
--select-group-color: #999; --select-group-color: #999;
--select-group-height: 30px; --select-group-height: 30px;
@ -203,8 +212,8 @@
--message-min-width: 300px; --message-min-width: 300px;
--message-padding: 10px 12px; --message-padding: 10px 12px;
--message-content-color: var(--border-color-hover); --message-content-color: var(--border-color-hover);
--message-close-color: var(--color-grey); --message-close-color: var(--color-extra-light-silver);
--message-close-hover-color: #99A9BF; --message-close-hover-color: var(--color-light-silver);
--message-success-color: var(--color-success); --message-success-color: var(--color-success);
--message-info-color: var(--color-info); --message-info-color: var(--color-info);
@ -220,10 +229,10 @@
--notification-font-size: var(--font-size-base); --notification-font-size: var(--font-size-base);
--notification-color: var(--border-color-hover); --notification-color: var(--border-color-hover);
--notification-title-font-size: 16px; --notification-title-font-size: 16px;
--notification-title-color: #1f2d3d; --notification-title-color: var(--color-base-black);
--notification-close-color: var(--color-grey); --notification-close-color: var(--color-extra-light-silver);
--notification-close-hover-color: #99A9BF; --notification-close-hover-color: var(--color-light-silver);
--notification-success-color: var(--color-success); --notification-success-color: var(--color-success);
--notification-info-color: var(--color-info); --notification-info-color: var(--color-info);
@ -236,7 +245,6 @@
--input-color: var(--font-color-base); --input-color: var(--font-color-base);
--input-width: 140px; --input-width: 140px;
--input-height: 36px; --input-height: 36px;
--input-shadow-hover: var(--shadow-base);
--input-border: var(--border-base); --input-border: var(--border-base);
--input-border-color: var(--border-color-base); --input-border-color: var(--border-color-base);
--input-border-radius: var(--border-radius-base); --input-border-radius: var(--border-radius-base);
@ -244,8 +252,8 @@
--input-fill: var(--color-white); --input-fill: var(--color-white);
--input-fill-disabled: var(--disabled-fill-base); --input-fill-disabled: var(--disabled-fill-base);
--input-color-disabled: var(--font-color-disabled-base); --input-color-disabled: var(--font-color-disabled-base);
--input-icon-color: var(--color-grey); --input-icon-color: var(--color-extra-light-silver);
--input-placeholder-color: #99a9bf; --input-placeholder-color: var(--color-light-silver);
--input-max-width: 314px; --input-max-width: 314px;
--input-hover-border: var(--border-color-hover); --input-hover-border: var(--border-color-hover);
@ -256,7 +264,7 @@
--input-disabled-fill: var(--disabled-fill-base); --input-disabled-fill: var(--disabled-fill-base);
--input-disabled-border: var(--disabled-border-base); --input-disabled-border: var(--disabled-border-base);
--input-disabled-color: var(--disabled-color-base); --input-disabled-color: var(--disabled-color-base);
--input-disabled-placeholder-color: var(--color-grey); --input-disabled-placeholder-color: var(--color-extra-light-silver);
--input-large-font-size: 16px; --input-large-font-size: 16px;
--input-large-height: 42px; --input-large-height: 42px;
@ -276,8 +284,8 @@
--cascader-menu-border-color: var(--border-color-base); --cascader-menu-border-color: var(--border-color-base);
--cascader-menu-border-width: var(--border-width-base); --cascader-menu-border-width: var(--border-width-base);
--cascader-menu-color: var(--font-color-base); --cascader-menu-color: var(--font-color-base);
--cascader-menu-option-color-active: var(--color-blue); --cascader-menu-option-color-active: var(--color-secondary);
--cascader-menu-option-fill-active: rgba(var(--color-blue), 0.12); --cascader-menu-option-fill-active: rgba(var(--color-secondary), 0.12);
--cascader-menu-option-color-hover: var(--font-color-base); --cascader-menu-option-color-hover: var(--font-color-base);
--cascader-menu-option-fill-hover: rgba(var(--color-black), 0.06); --cascader-menu-option-fill-hover: rgba(var(--color-black), 0.06);
--cascader-menu-option-color-disabled: #999; --cascader-menu-option-color-disabled: #999;
@ -301,15 +309,14 @@
-------------------------- */ -------------------------- */
--tab-font-size: var(--font-size-base); --tab-font-size: var(--font-size-base);
--tab-border-line: 1px solid #e4e4e4; --tab-border-line: 1px solid #e4e4e4;
--tab-header-color-active: var(--color-blue); --tab-header-color-active: var(--color-secondary);
--tab-header-color-hover: var(--font-color-base); --tab-header-color-hover: var(--font-color-base);
--tab-header-color: var(--font-color-base); --tab-header-color: var(--font-color-base);
--tab-header-fill-active: rgba(var(--color-black), 0.06); --tab-header-fill-active: rgba(var(--color-black), 0.06);
--tab-header-fill-hover: rgba(var(--color-black), 0.06); --tab-header-fill-hover: rgba(var(--color-black), 0.06);
--tab-vertical-header-width: 90px; --tab-vertical-header-width: 90px;
--tab-vertical-header-count-color: var(--color-white); --tab-vertical-header-count-color: var(--color-white);
--tab-vertical-header-count-fill: var(--color-blue); --tab-vertical-header-count-fill: var(--color-secondary);
--tab-horizontal-border: 2px solid #438de0;
/* Button /* Button
-------------------------- */ -------------------------- */
@ -331,7 +338,7 @@
--button-mini-padding-vertical: 4px; --button-mini-padding-vertical: 4px;
--button-mini-padding-horizontal: 4px; --button-mini-padding-horizontal: 4px;
--button-default-color: #1F2D3D; --button-default-color: var(--color-base-black);
--button-default-fill: var(--color-white); --button-default-fill: var(--color-white);
--button-default-border: #c4c4c4; --button-default-border: #c4c4c4;
@ -339,8 +346,8 @@
--button-ghost-fill: transparent; --button-ghost-fill: transparent;
--button-ghost-border: none; --button-ghost-border: none;
--button-disabled-color: var(--color-grey); --button-disabled-color: var(--color-extra-light-silver);
--button-disabled-fill: #EFF2F7; --button-disabled-fill: var(--color-extra-light-gray);
--button-disabled-border: var(--disabled-border-base); --button-disabled-border: var(--disabled-border-base);
--button-primary-border: var(--color-primary); --button-primary-border: var(--color-primary);
@ -374,9 +381,9 @@
/* Switch /* Switch
-------------------------- */ -------------------------- */
--switch-on-color: var(--color-primary); --switch-on-color: var(--color-primary);
--switch-off-color: var(--color-grey); --switch-off-color: var(--color-extra-light-silver);
--switch-disabled-color: #E5E9F3; --switch-disabled-color: var(--color-light-gray);
--switch-disabled-text-color: #F9FAFC; --switch-disabled-text-color: var(--color-dark-white);
--switch-font-size: var(--font-size-base); --switch-font-size: var(--font-size-base);
--switch-core-border-radius: 12px; --switch-core-border-radius: 12px;
@ -386,22 +393,21 @@
/* Dialog /* Dialog
-------------------------- */ -------------------------- */
--dialog-background-color: var(--color-blue); --dialog-background-color: var(--color-secondary);
--dialog-footer-background: var(--color-blue-lighter);
--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
--dialog-tiny-width: 30%; --dialog-tiny-width: 30%;
--dialog-small-width: 50%; --dialog-small-width: 50%;
--dialog-large-width: 90%; --dialog-large-width: 90%;
--dialog-close-color: var(--color-grey); --dialog-close-color: var(--color-extra-light-silver);
--dialog-close-hover-color: var(--color-primary); --dialog-close-hover-color: var(--color-primary);
--dialog-title-font-size: 16px; --dialog-title-font-size: 16px;
--dialog-font-size: 14px; --dialog-font-size: 14px;
/* Table /* Table
-------------------------- */ -------------------------- */
--table-border-color: #e0e6ed; --table-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
--table-text-color: #1f2d3d; --table-text-color: var(--color-base-black);
--table-header-background: #EFF2F7; --table-header-background: var(--color-extra-light-gray);
/* Pagination /* Pagination
-------------------------- */ -------------------------- */
@ -409,7 +415,7 @@
--pagination-fill: var(--color-white); --pagination-fill: var(--color-white);
--pagination-color: var(--link-color); --pagination-color: var(--link-color);
--pagination-border-radius: 2px; --pagination-border-radius: 2px;
--pagination-button-color: #99a9bf; --pagination-button-color: var(--color-light-silver);
--pagination-button-size: 28px; --pagination-button-size: 28px;
--pagination-button-disabled-color: #e4e4e4; --pagination-button-disabled-color: #e4e4e4;
--pagination-button-disabled-fill: var(--color-white); --pagination-button-disabled-fill: var(--color-white);
@ -425,14 +431,14 @@
--popover-arrow-size: 6px; --popover-arrow-size: 6px;
--popover-padding: 10px; --popover-padding: 10px;
--popover-title-font-size: 13px; --popover-title-font-size: 13px;
--popover-title-color: #1f2d3d; --popover-title-color: var(--color-base-black);
/* Tooltip /* Tooltip
-------------------------- */ -------------------------- */
--tooltip-fill: #1f2d3d; --tooltip-fill: var(--color-base-black);
--tooltip-color: var(--color-white); --tooltip-color: var(--color-white);
--tooltip-font-size: 12px; --tooltip-font-size: 12px;
--tooltip-border-color: #1f2d3d; --tooltip-border-color: var(--color-base-black);
--tooltip-arrow-size: 6px; --tooltip-arrow-size: 6px;
--tooltip-padding: 10px; --tooltip-padding: 10px;
@ -445,8 +451,8 @@
--tag-font-size: 12px; --tag-font-size: 12px;
--tag-border-radius: 4px; --tag-border-radius: 4px;
--tag-gray-fill: #e5e9f2; --tag-gray-fill: var(--color-light-gray);
--tag-gray-border: #e5e9f2; --tag-gray-border: var(--color-light-gray);
--tag-gray-color: var(--link-color); --tag-gray-color: var(--link-color);
--tag-primary-fill: rgba(32,159,255,0.10); --tag-primary-fill: rgba(32,159,255,0.10);
@ -468,7 +474,7 @@
/* Dropdown /* Dropdown
-------------------------- */ -------------------------- */
--dropdown-menu-box-shadow: var(--box-shadow-dark); --dropdown-menu-box-shadow: var(--box-shadow-dark);
--dropdown-menuItem-hover-fill: #e5e9f2; --dropdown-menuItem-hover-fill: var(--color-light-gray);
--dropdown-menuItem-hover-color: var(--link-color); --dropdown-menuItem-hover-color: var(--link-color);
/* Badge /* Badge
@ -488,10 +494,10 @@
/* Slider /* Slider
--------------------------*/ --------------------------*/
--slider-main-background-color: var(--color-primary); --slider-main-background-color: var(--color-primary);
--slider-runway-background-color: #e5e9f2; --slider-runway-background-color: var(--color-light-gray);
--slider-button-hover-color: #1d8ce0; --slider-button-hover-color: shade(var(--color-primary), 0.12);
--slider-stop-background-color: var(--color-grey); --slider-stop-background-color: var(--color-extra-light-silver);
--slider-disable-color: var(--color-grey); --slider-disable-color: var(--color-extra-light-silver);
--slider-margin: 16px 0; --slider-margin: 16px 0;
--slider-border-radius: 3px; --slider-border-radius: 3px;
@ -509,14 +515,14 @@
/* Steps /* Steps
--------------------------*/ --------------------------*/
--menu-item-color: var(--link-color); --menu-item-color: var(--link-color);
--menu-item-fill: #eff2f7; --menu-item-fill: var(--color-extra-light-gray);
--menu-item-hover-fill: var(--disabled-border-base); --menu-item-hover-fill: var(--disabled-border-base);
--submenu-item-fill: #e5e9f2; --submenu-item-fill: var(--color-light-gray);
--dark-menu-item-color: var(--link-color); --dark-menu-item-color: var(--link-color);
--dark-menu-item-fill: #324057; --dark-menu-item-fill: var(--color-light-black);
--dark-menu-item-hover-fill: var(--link-color); --dark-menu-item-hover-fill: var(--link-color);
--dark-submenu-item-fill: #1f2d3d; --dark-submenu-item-fill: var(--color-base-black);
/* Rate /* Rate
--------------------------*/ --------------------------*/
@ -524,19 +530,19 @@
--rate-font-size: var(--font-size-base); --rate-font-size: var(--font-size-base);
--rate-icon-size: 18px; --rate-icon-size: 18px;
--rate-icon-margin: 6px; --rate-icon-margin: 6px;
--rate-icon-color: #C6D1DE; --rate-icon-color: var(--color-extra-light-silver);
/* DatePicker /* DatePicker
--------------------------*/ --------------------------*/
--datepicker-color: var(--link-color); --datepicker-color: var(--link-color);
--datepicker-off-color: #ddd; --datepicker-off-color: #ddd;
--datepicker-header-color: var(--border-color-hover); --datepicker-header-color: var(--border-color-hover);
--datepicker-icon-color: #99a9bf; --datepicker-icon-color: var(--color-light-silver);
--datepicker-border-color: var(--disabled-border-base); --datepicker-border-color: var(--disabled-border-base);
--datepicker-inner-border-color: #e4e4e4; --datepicker-inner-border-color: #e4e4e4;
--datepicker-cell-hover-color: #e5e9f2; --datepicker-cell-hover-color: var(--color-light-gray);
--datepicker-inrange-color: #D3ECFF; --datepicker-inrange-color: tint(var(--color-primary), 0.8);
--datepicker-inrange-hover-color: #AFDCFF; --datepicker-inrange-hover-color: tint(var(--color-primary), 0.64);
--datepicker-active-color: var(--color-primary); --datepicker-active-color: var(--color-primary);
--datepicker-text-hover-color: var(--color-primary); --datepicker-text-hover-color: var(--color-primary);
@ -547,8 +553,8 @@
/* Scrollbar /* Scrollbar
--------------------------*/ --------------------------*/
--scrollbar-background-color: rgba(#99a9bf, .3); --scrollbar-background-color: rgba(var(--color-light-silver), .3);
--scrollbar-hover-background-color: rgba(#99a9bf, .5); --scrollbar-hover-background-color: rgba(var(--color-light-silver), .5);
/* Carousel /* Carousel
--------------------------*/ --------------------------*/
@ -564,14 +570,14 @@
/* Collapse /* Collapse
--------------------------*/ --------------------------*/
--collapse-border-color: #e0e6ed; --collapse-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
--collapse-header-height: 43px; --collapse-header-height: 43px;
--collapse-border-radius: 0; --collapse-border-radius: 0;
--collapse-header-padding: 20px; --collapse-header-padding: 20px;
--collapse-header-fill: #fff; --collapse-header-fill: var(--color-white);
--collapse-header-color: #475669; --collapse-header-color: var(--color-extra-light-black);
--collapse-header-size: 13px; --collapse-header-size: 13px;
--collapse-content-fill: #f9fafc; --collapse-content-fill: var(--color-dark-white);
--collapse-content-size: 13px; --collapse-content-size: 13px;
--collapse-content-color: #1f2d3d; --collapse-content-color: var(--color-base-black);
} }

2
packages/theme-default/src/date-picker/month-table.css
View File

@ -31,7 +31,7 @@
&.current .cell { &.current .cell {
background-color: var(--datepicker-active-color) !important; background-color: var(--datepicker-active-color) !important;
color: #fff; color: var(--color-white);
} }
} }
} }

6
packages/theme-default/src/date-picker/picker-panel.css
View File

@ -5,7 +5,7 @@
color: var(--datepicker-color); color: var(--datepicker-color);
border: 1px solid var(--datepicker-border-color); border: 1px solid var(--datepicker-border-color);
box-shadow: 0 2px 6px #ccc; box-shadow: 0 2px 6px #ccc;
background: #fff; background: var(--color-white);
border-radius: 2px; border-radius: 2px;
line-height: 20px; line-height: 20px;
margin: 5px 0; margin: 5px 0;
@ -27,7 +27,7 @@
border-top: 1px solid var(--datepicker-inner-border-color); border-top: 1px solid var(--datepicker-inner-border-color);
padding: 4px; padding: 4px;
text-align: right; text-align: right;
background-color: #fff; background-color: var(--color-white);
position: relative; position: relative;
} }
@ -103,7 +103,7 @@
border-right: 1px solid var(--datepicker-inner-border-color); border-right: 1px solid var(--datepicker-inner-border-color);
box-sizing: border-box; box-sizing: border-box;
padding-top: 6px; padding-top: 6px;
background-color: #f9fafc; background-color: var(--color-dark-white);
} }
.el-picker-panel *[slot=sidebar] + .el-picker-panel__body, .el-picker-panel *[slot=sidebar] + .el-picker-panel__body,

2
packages/theme-default/src/date-picker/time-picker.css
View File

@ -75,7 +75,7 @@
background-color: transparent; background-color: transparent;
outline: none; outline: none;
font-size: 12px; font-size: 12px;
color: #8492a6; color: var(--color-base-silver);
&.confirm { &.confirm {
font-weight: 800; font-weight: 800;

2
packages/theme-default/src/date-picker/year-table.css
View File

@ -35,7 +35,7 @@
&.current .cell { &.current .cell {
background-color: var(--datepicker-active-color) !important; background-color: var(--datepicker-active-color) !important;
color: #fff; color: var(--color-white);
} }
} }
} }

6
packages/theme-default/src/dialog.css
View File

@ -8,7 +8,7 @@
position: absolute; position: absolute;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
background: #fff; background: var(--color-white);
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
box-shadow: var(--dialog-box-shadow); box-shadow: var(--dialog-box-shadow);
box-sizing: border-box; box-sizing: border-box;
@ -55,12 +55,12 @@
line-height: 1; line-height: 1;
font-size: var(--dialog-title-font-size); font-size: var(--dialog-title-font-size);
font-weight: bold; font-weight: bold;
color: #1f2d3d; color: var(--color-base-black);
} }
@e body { @e body {
padding: 30px 20px; padding: 30px 20px;
color: #475669; color: var(--color-extra-light-black);
font-size: var(--dialog-font-size); font-size: var(--dialog-font-size);
} }

12
packages/theme-default/src/dropdown.css
View File

@ -6,7 +6,7 @@
@b dropdown { @b dropdown {
display: inline-block; display: inline-block;
position: relative; position: relative;
color: #475669; color: var(--color-extra-light-black);
font-size: var(--font-size-base); font-size: var(--font-size-base);
.el-button-group { .el-button-group {
@ -27,8 +27,8 @@
} }
@b dropdown-menu { @b dropdown-menu {
margin: 5px 0; margin: 5px 0;
background-color: #fff; background-color: var(--color-white);
border: 1px solid #D3DCE6; border: 1px solid var(--color-base-gray);
box-shadow: var(--dropdown-menu-box-shadow); box-shadow: var(--dropdown-menu-box-shadow);
padding: 6px 0; padding: 6px 0;
z-index: 10; z-index: 10;
@ -51,19 +51,19 @@
@m divided { @m divided {
position: relative; position: relative;
margin-top: 6px; margin-top: 6px;
border-top: 1px solid #D3DCE6; border-top: 1px solid var(--color-base-gray);
&:before { &:before {
content: ''; content: '';
height: 6px; height: 6px;
display: block; display: block;
margin: 0 -10px; margin: 0 -10px;
background-color: #fff; background-color: var(--color-white);
} }
} }
@when disabled { @when disabled {
cursor: default; cursor: default;
color: #c0ccda; color: var(--color-extra-light-silver);
pointer-events: none; pointer-events: none;
} }
} }

4
packages/theme-default/src/form.css
View File

@ -40,7 +40,7 @@
vertical-align: middle; vertical-align: middle;
float: left; float: left;
font-size: 14px; font-size: 14px;
color: #5e6d82; color: var(--color-extra-light-black);
line-height: 1; line-height: 1;
padding: 11px 12px 11px 0; padding: 11px 12px 11px 0;
box-sizing: border-box; box-sizing: border-box;
@ -52,7 +52,7 @@
@utils-clearfix; @utils-clearfix;
} }
@e error { @e error {
color: #ff4949; color: var(--color-danger);
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
padding-top: 4px; padding-top: 4px;

2
packages/theme-default/src/input-number.css
View File

@ -20,7 +20,7 @@
line-height: calc(var(--input-height) - 2); line-height: calc(var(--input-height) - 2);
top: 1px; top: 1px;
text-align: center; text-align: center;
color: #99A9BF; color: var(--color-light-silver);
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
z-index: 1; z-index: 1;

6
packages/theme-default/src/input.css
View File

@ -114,8 +114,8 @@
display: table-cell; display: table-cell;
} }
@e append, prepend { @e append, prepend {
background-color: #f9fafc; background-color: var(--color-dark-white);
color: #99a9bf; color: var(--color-light-silver);
vertical-align: middle; vertical-align: middle;
display: table-cell; display: table-cell;
position: relative; position: relative;
@ -184,7 +184,7 @@
width: 100%; width: 100%;
font-size: var(--font-size-base); font-size: var(--font-size-base);
color: var(--input-color); color: var(--input-color);
background-color: #fff; background-color: var(--color-white);
background-image: none; background-image: none;
border: var(--input-border); border: var(--input-border);
border-radius: 4px; border-radius: 4px;

30
packages/theme-default/src/menu.css
View File

@ -33,18 +33,18 @@
& .el-menu-item, & .el-menu-item,
& .el-submenu__title { & .el-submenu__title {
color: #c0ccda; color: var(--color-extra-light-silver);
&:hover { &:hover {
background-color: #475669; background-color: var(--color-extra-light-black);
} }
} }
& .el-submenu .el-menu { & .el-submenu .el-menu {
background-color: #1f2f3d; background-color: var(--color-base-black);
& .el-menu-item:hover { & .el-menu-item:hover {
background-color: #475669; background-color: var(--color-extra-light-black);
} }
} }
} }
@ -76,9 +76,9 @@
position: absolute; position: absolute;
top: 65px; top: 65px;
left: 0; left: 0;
border:1px solid #d3dce6; border:1px solid var(--color-base-gray);
padding: 5px 0; padding: 5px 0;
background-color: #fff; background-color: var(--color-white);
z-index: 100; z-index: 100;
min-width: 100%; min-width: 100%;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04); box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
@ -91,7 +91,7 @@
} }
& .el-menu-item { & .el-menu-item {
background-color: #fff; background-color: var(--color-white);
float: none; float: none;
height: 36px; height: 36px;
line-height: 36px; line-height: 36px;
@ -102,7 +102,7 @@
position: static; position: static;
vertical-align: middle; vertical-align: middle;
margin-left: 5px; margin-left: 5px;
color: #99a9bf; color: var(--color-light-silver);
margin-top: -3px; margin-top: -3px;
} }
} }
@ -125,10 +125,10 @@
& .el-submenu { & .el-submenu {
.el-menu-item, .el-menu-item,
.el-submenu-title { .el-submenu-title {
color: #475669; color: var(--color-extra-light-black);
&:hover { &:hover {
background-color: #d3dce6; background-color: var(--color-base-gray);
} }
} }
.el-menu-item.is-active { .el-menu-item.is-active {
@ -152,7 +152,7 @@
margin-right: 0; margin-right: 0;
} }
&:hover { &:hover {
background-color: #d3dce6; background-color: var(--color-base-gray);
} }
@when active { @when active {
color: var(--color-primary); color: var(--color-primary);
@ -165,11 +165,11 @@
@extend menu-item; @extend menu-item;
&:hover { &:hover {
background-color: #d3dce6; background-color: var(--color-base-gray);
} }
} }
& .el-menu { & .el-menu {
background-color: #e5e9f2; background-color: var(--color-light-gray);
} }
& .el-menu-item { & .el-menu-item {
height: 50px; height: 50px;
@ -177,7 +177,7 @@
padding: 0 45px; padding: 0 45px;
&:hover { &:hover {
background-color: #d3dce6; background-color: var(--color-base-gray);
} }
} }
@e icon-arrow { @e icon-arrow {
@ -213,7 +213,7 @@
line-height: normal; line-height: normal;
font-size: 14px; font-size: 14px;
padding-left: 20px; padding-left: 20px;
color: #99a9bf; color: var(--color-light-silver);
} }
} }
} }

2
packages/theme-default/src/message-box.css
View File

@ -10,7 +10,7 @@
text-align: left; text-align: left;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background-color: #fff; background-color: var(--color-white);
width: var(--msgbox-width); width: var(--msgbox-width);
border-radius: var(--msgbox-border-radius); border-radius: var(--msgbox-border-radius);
font-size: var(--msgbox-font-size); font-size: var(--msgbox-font-size);

2
packages/theme-default/src/message.css
View File

@ -13,7 +13,7 @@
left: 50%; left: 50%;
top: 20px; top: 20px;
transform: translateX(-50%); transform: translateX(-50%);
background-color: #fff; background-color: var(--color-white);
transition: opacity 0.3s, transform .4s; transition: opacity 0.3s, transform .4s;
overflow: hidden; overflow: hidden;

4
packages/theme-default/src/mixins/_button.css
View File

@ -30,13 +30,13 @@
&:hover, &:hover,
&:focus { &:focus {
background: #fff; background: var(--color-white);
border-color: $border-color; border-color: $border-color;
color: $background-color; color: $background-color;
} }
&:active { &:active {
background: #fff; background: var(--color-white);
border-color: shade($border-color, var(--button-active-shade-percent)); border-color: shade($border-color, var(--button-active-shade-percent));
color: shade($background-color, var(--button-active-shade-percent)); color: shade($background-color, var(--button-active-shade-percent));
outline: none; outline: none;

2
packages/theme-default/src/notification.css
View File

@ -10,7 +10,7 @@
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
position: fixed; position: fixed;
right: 16px; right: 16px;
background-color: #fff; background-color: var(--color-white);
box-shadow: var(--notification-shadow); box-shadow: var(--notification-shadow);
transition: opacity 0.3s, transform .3s, right .3s, top 0.4s; transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
overflow: hidden; overflow: hidden;

6
packages/theme-default/src/progress.css
View File

@ -8,7 +8,7 @@
@e text { @e text {
font-size:14px; font-size:14px;
color:#475669; color:var(--color-extra-light-black);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: 10px; margin-left: 10px;
@ -81,7 +81,7 @@
@e outer { @e outer {
height: 6px; height: 6px;
border-radius: 100px; border-radius: 100px;
background-color: #e5e9f2; background-color: var(--color-light-gray);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
@ -102,7 +102,7 @@
@e innerText { @e innerText {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
color: #fff; color: var(--color-white);
font-size: 12px; font-size: 12px;
margin: 0 5px; margin: 0 5px;
} }

2
packages/theme-default/src/radio.css
View File

@ -87,7 +87,7 @@
} }
&::after { &::after {
circle: 6px #fff; circle: 6px var(--color-white);
content: ""; content: "";
position: absolute; position: absolute;
left: 50%; left: 50%;

72
packages/theme-default/src/step.css
View File

@ -25,7 +25,7 @@
display: inline-block; display: inline-block;
position: absolute; position: absolute;
border-color: inherit; border-color: inherit;
background-color: #c0ccda; background-color: var(--color-extra-light-silver);
@when icon { @when icon {
@when horizontal { @when horizontal {
@ -83,59 +83,59 @@
border-style: solid; border-style: solid;
@when process { @when process {
color: #fff; color: var(--color-white);
background-color: #c0ccda; background-color: var(--color-extra-light-silver);
border-color: #c0ccda; border-color: var(--color-extra-light-silver);
} }
@when wait { @when wait {
color: #c0ccda; color: var(--color-extra-light-silver);
background-color: #fff; background-color: var(--color-white);
border-color: #c0ccda; border-color: var(--color-extra-light-silver);
} }
@when success { @when success {
color: #fff; color: var(--color-white);
background-color: #13ce66; background-color: var(--color-success);
border-color: #13ce66; border-color: var(--color-success);
} }
@when error { @when error {
color: #fff; color: var(--color-white);
background-color: #ff4949; background-color: var(--color-danger);
border-color: #ff4949; border-color: var(--color-danger);
} }
@when finish { @when finish {
color: #fff; color: var(--color-white);
background-color: #20a0ff; background-color: var(--color-primary);
border-color: #20a0ff; border-color: var(--color-primary);
} }
} }
@when process { @when process {
color: #c0ccda; color: var(--color-extra-light-silver);
border-color: #c0ccda; border-color: var(--color-extra-light-silver);
} }
@when wait { @when wait {
color: #c0ccda; color: var(--color-extra-light-silver);
border-color: #c0ccda; border-color: var(--color-extra-light-silver);
} }
@when success { @when success {
color: #13ce66; color: var(--color-success);
border-color: #13ce66; border-color: var(--color-success);
} }
@when error { @when error {
color: #ff4949; color: var(--color-danger);
border-color: #ff4949; border-color: var(--color-danger);
} }
@when finish { @when finish {
color: #20a0ff; color: var(--color-primary);
border-color: #20a0ff; border-color: var(--color-primary);
} }
} }
@ -152,27 +152,27 @@
@when process { @when process {
font-weight: 700; font-weight: 700;
color: #475669; color: var(--color-extra-light-black);
} }
@when wait { @when wait {
font-weight: normal; font-weight: normal;
color: #99a9bf; color: var(--color-light-silver);
} }
@when success { @when success {
font-weight: 700; font-weight: 700;
color: #13ce66; color: var(--color-success);
} }
@when error { @when error {
font-weight: 700; font-weight: 700;
color: #ff4949; color: var(--color-danger);
} }
@when finish { @when finish {
font-weight: 700; font-weight: 700;
color: #20a0ff; color: var(--color-primary);
} }
} }
@ -182,23 +182,23 @@
line-height: 14px; line-height: 14px;
@when process { @when process {
color: #8492a6; color: var(--color-base-silver);
} }
@when wait { @when wait {
color: #c0ccda; color: var(--color-extra-light-silver);
} }
@when success { @when success {
color: #13ce66; color: var(--color-success);
} }
@when error { @when error {
color: #ff4949; color: var(--color-danger);
} }
@when finish { @when finish {
color: #20a0ff; color: var(--color-primary);
} }
} }
} }

16
packages/theme-default/src/table-column.css
View File

@ -12,9 +12,9 @@
} }
@b table-filter { @b table-filter {
border: solid 1px #d3dce6; border: solid 1px var(--color-base-gray);
border-radius: 2px; border-radius: 2px;
background-color: #fff; background-color: var(--color-white);
box-shadow: var(--dropdown-menu-box-shadow); box-shadow: var(--dropdown-menu-box-shadow);
box-sizing: border-box; box-sizing: border-box;
margin: 2px 0; margin: 2px 0;
@ -39,8 +39,8 @@
} }
@when active { @when active {
background-color: #20a0ff; background-color: var(--color-primary);
color: #fff; color: var(--color-white);
} }
} }
@ -49,19 +49,19 @@
} }
@e bottom { @e bottom {
border-top: 1px solid #d3dce6; border-top: 1px solid var(--color-base-gray);
padding: 8px; padding: 8px;
button { button {
background: transparent; background: transparent;
border: none; border: none;
color: #8492a6; color: var(--color-base-silver);
cursor: pointer; cursor: pointer;
font-size: var(--font-size-base); font-size: var(--font-size-base);
padding: 0 3px; padding: 0 3px;
&:hover { &:hover {
color: #20a0ff; color: var(--color-primary);
} }
&:focus { &:focus {
@ -69,7 +69,7 @@
} }
&.is-disabled { &.is-disabled {
color: #c0ccda; color: var(--color-extra-light-silver);
cursor: not-allowed; cursor: not-allowed;
} }
} }

30
packages/theme-default/src/table.css
View File

@ -11,7 +11,7 @@
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
background-color: #fff; background-color: var(--color-white);
border: 1px solid var(--table-border-color); border: 1px solid var(--table-border-color);
font-size: 14px; font-size: 14px;
color: var(--table-text-color); color: var(--table-text-color);
@ -63,7 +63,7 @@
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: #5e6d82; color: color(var(--color-primary) s(16%) l(44%));
} }
@e expand-column { @e expand-column {
@ -96,11 +96,11 @@
@e expanded-cell { @e expanded-cell {
padding: 20px 50px; padding: 20px 50px;
background-color: #f9fafc; background-color: var(--color-dark-white);
box-shadow: inset 0 2px 0 #f4f4f4; box-shadow: inset 0 2px 0 #f4f4f4;
&:hover { &:hover {
background-color: #f9fafc !important; background-color: var(--color-dark-white) !important;
} }
} }
@ -277,7 +277,7 @@
box-sizing: border-box; box-sizing: border-box;
&.highlight { &.highlight {
color: #20a0ff; color: var(--color-primary);
} }
} }
@ -307,13 +307,13 @@
top: 11px; top: 11px;
border-top: none; border-top: none;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-bottom: 5px solid #99a9bf; border-bottom: 5px solid var(--color-light-silver);
border-left: 5px solid transparent; border-left: 5px solid transparent;
} }
&.descending { &.descending {
bottom: 11px; bottom: 11px;
border-top: 5px solid #99a9bf; border-top: 5px solid var(--color-light-silver);
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-bottom: none; border-bottom: none;
border-left: 5px solid transparent; border-left: 5px solid transparent;
@ -321,11 +321,11 @@
} }
& .ascending .sort-caret.ascending { & .ascending .sort-caret.ascending {
border-bottom-color: #475669; border-bottom-color: var(--color-extra-light-black);
} }
& .descending .sort-caret.descending { & .descending .sort-caret.descending {
border-top-color: #475669; border-top-color: var(--color-extra-light-black);
} }
& th.gutter, td.gutter { & th.gutter, td.gutter {
@ -361,7 +361,7 @@
} }
& tr { & tr {
background-color: #fff; background-color: var(--color-white);
} }
@modifier striped { @modifier striped {
@ -372,7 +372,7 @@
} }
&.current-row td { &.current-row td {
background: #EFF7FF; background: color(var(--color-primary) tint(92%));
} }
} }
} }
@ -380,11 +380,11 @@
@e body { @e body {
tr.hover-row > td { tr.hover-row > td {
background-color: #eff2f7; background-color: var(--color-extra-light-gray);
} }
tr.current-row > td { tr.current-row > td {
background: #eff7ff; background: color(var(--color-primary) tint(92%));
} }
} }
@ -411,7 +411,7 @@
cursor: pointer; cursor: pointer;
& i { & i {
color: #99a9bf; color: var(--color-light-silver);
} }
} }
@ -423,7 +423,7 @@
@modifier enable-row-hover { @modifier enable-row-hover {
tr:hover > td { tr:hover > td {
background-color: #eff2f7; background-color: var(--color-extra-light-gray);
} }
} }

30
packages/theme-default/src/tabs.css
View File

@ -4,7 +4,7 @@
@component-namespace el { @component-namespace el {
@b tabs { @b tabs {
@e header { @e header {
border-bottom: 1px solid #d3dce6; border-bottom: 1px solid var(--color-base-gray);
padding: 0; padding: 0;
position: relative; position: relative;
margin: 0 0 15px; margin: 0 0 15px;
@ -28,7 +28,7 @@
float: left; float: left;
list-style: none; list-style: none;
font-size: 14px; font-size: 14px;
color: #8492a6; color: var(--color-base-silver);
margin-bottom: -1px; margin-bottom: -1px;
position: relative; position: relative;
@ -43,8 +43,8 @@
} }
&:hover { &:hover {
background-color: #99a9bf; background-color: var(--color-light-silver);
color: #fff; color: var(--color-white);
} }
} }
@ -53,7 +53,7 @@
} }
&:hover { &:hover {
color: #1f2d3d; color: var(--color-base-black);
cursor: pointer; cursor: pointer;
} }
@ -96,8 +96,8 @@
} }
} }
&.is-active { &.is-active {
border: 1px solid #d3dce6; border: 1px solid var(--color-base-gray);
border-bottom-color: #fff; border-bottom-color: var(--color-white);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
&.is-closable { &.is-closable {
@ -111,15 +111,15 @@
} }
} }
@m border-card { @m border-card {
background: #fff; background: var(--color-white);
border: 1px solid #d3dce6; border: 1px solid var(--color-base-gray);
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04); box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12), 0px 0px 6px 0px rgba(0,0,0,0.04);
&>.el-tabs__content { &>.el-tabs__content {
padding: 15px; padding: 15px;
} }
&>.el-tabs__header { &>.el-tabs__header {
background-color: #eff2f7; background-color: var(--color-extra-light-gray);
margin: 0; margin: 0;
} }
&>.el-tabs__header>.el-tabs__item { &>.el-tabs__header>.el-tabs__item {
@ -129,15 +129,15 @@
margin: * -1px; margin: * -1px;
&.is-active { &.is-active {
background-color: #fff; background-color: var(--color-white);
border-right-color: #d3dce6; border-right-color: var(--color-base-gray);
border-left-color: #d3dce6; border-left-color: var(--color-base-gray);
&:first-child { &:first-child {
border-left-color: #d3dce6; border-left-color: var(--color-base-gray);
} }
&:last-child { &:last-child {
border-right-color: #d3dce6; border-right-color: var(--color-base-gray);
} }
} }
} }

12
packages/theme-default/src/tag.css
View File

@ -31,7 +31,7 @@
right: -2px; right: -2px;
&:hover { &:hover {
background-color: #fff; background-color: var(--color-white);
color: var(--tag-fill); color: var(--tag-fill);
} }
} }
@ -46,7 +46,7 @@
& .el-tag__close:hover { & .el-tag__close:hover {
background-color: var(--tag-gray-color); background-color: var(--tag-gray-color);
color: #fff; color: var(--color-white);
} }
} }
@m primary { @m primary {
@ -59,7 +59,7 @@
& .el-tag__close:hover { & .el-tag__close:hover {
background-color: var(--tag-primary-color); background-color: var(--tag-primary-color);
color: #fff; color: var(--color-white);
} }
} }
@m success { @m success {
@ -72,7 +72,7 @@
& .el-tag__close:hover { & .el-tag__close:hover {
background-color: var(--tag-success-color); background-color: var(--tag-success-color);
color: #fff; color: var(--color-white);
} }
} }
@m warning { @m warning {
@ -85,7 +85,7 @@
& .el-tag__close:hover { & .el-tag__close:hover {
background-color: var(--tag-warning-color); background-color: var(--tag-warning-color);
color: #fff; color: var(--color-white);
} }
} }
@m danger { @m danger {
@ -98,7 +98,7 @@
& .el-tag__close:hover { & .el-tag__close:hover {
background-color: var(--tag-danger-color); background-color: var(--tag-danger-color);
color: #fff; color: var(--color-white);
} }
} }
} }

2
packages/theme-default/src/time-select.css
View File

@ -19,7 +19,7 @@
.time-select-item.selected:not(.disabled) { .time-select-item.selected:not(.disabled) {
background-color: var(--datepicker-active-color); background-color: var(--datepicker-active-color);
color: #fff; color: var(--color-white);
&:hover { &:hover {
background-color: var(--color-primary); background-color: var(--color-primary);

14
packages/theme-default/src/tree.css
View File

@ -4,8 +4,8 @@
@component-namespace el { @component-namespace el {
@b tree { @b tree {
cursor: default; cursor: default;
background: #ffffff; background: var(--color-white);
border: 1px solid #d3dce6; border: 1px solid var(--color-base-gray);
@e empty-block { @e empty-block {
position: relative; position: relative;
@ -20,7 +20,7 @@
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: #5e6d82; color: color(var(--color-primary) s(16%) l(44%));
} }
} }
@ -40,7 +40,7 @@
vertical-align: middle; vertical-align: middle;
} }
&:hover { &:hover {
background: #e5e9f2; background: var(--color-light-gray);
} }
} }
@ -53,7 +53,7 @@
margin-left: 10px; margin-left: 10px;
border: 6px solid transparent; border: 6px solid transparent;
border-right-width: 0; border-right-width: 0;
border-left-color: #99a9bf; border-left-color: var(--color-light-silver);
border-left-width: 7px; border-left-width: 7px;
transform: rotate(0deg); transform: rotate(0deg);
@ -84,7 +84,7 @@
vertical-align: middle; vertical-align: middle;
margin-right: 4px; margin-right: 4px;
font-size: 14px; font-size: 14px;
color: #99a9bf; color: var(--color-light-silver);
} }
& > .el-tree-node__children { & > .el-tree-node__children {
@ -99,7 +99,7 @@
} }
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
background-color: #eff7ff; background-color: color(var(--color-primary) tint(92%));
} }
.collapse-transition { .collapse-transition {

28
packages/theme-default/src/upload.css
View File

@ -31,7 +31,7 @@
@e file { @e file {
transition: all .5s cubic-bezier(.55,0,.1,1); transition: all .5s cubic-bezier(.55,0,.1,1);
font-size: 14px; font-size: 14px;
color: #475669; color: var(--color-extra-light-black);
line-height: 32px; line-height: 32px;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
@ -40,7 +40,7 @@
position: relative; position: relative;
a { a {
color: #475669; color: var(--color-extra-light-black);
display: block; display: block;
margin-right: 40px; margin-right: 40px;
overflow: hidden; overflow: hidden;
@ -50,7 +50,7 @@
white-space: nowrap; white-space: nowrap;
[class^="el-icon"] { [class^="el-icon"] {
color: #99a9bf; color: var(--color-light-silver);
margin-right: 7px; margin-right: 7px;
height: 100%; height: 100%;
line-height: inherit; line-height: inherit;
@ -72,7 +72,7 @@
padding-right: 0; padding-right: 0;
} }
&:hover { &:hover {
background-color: #eff2f7; background-color: var(--color-extra-light-gray);
} }
@when finished { @when finished {
& a:hover { & a:hover {
@ -89,7 +89,7 @@
} }
@e tip { @e tip {
font-size: 12px; font-size: 12px;
color: #8492a6; color: var(--color-base-silver);
margin-top: 7px; margin-top: 7px;
} }
@e btn-delete { @e btn-delete {
@ -102,8 +102,8 @@
} }
} }
@b dragger { @b dragger {
background-color: #f9fafc; background-color: var(--color-dark-white);
border: 1px solid #c0ccda; border: 1px solid var(--color-extra-light-silver);
box-sizing: border-box; box-sizing: border-box;
width: 360px; width: 360px;
height: 180px; height: 180px;
@ -119,7 +119,7 @@
} }
& .el-icon-upload { & .el-icon-upload {
font-size: 67px; font-size: 67px;
color: #99a9bf; color: var(--color-light-silver);
margin: 40px 0 16px; margin: 40px 0 16px;
line-height: 50px; line-height: 50px;
} }
@ -130,7 +130,7 @@
& ~ .el-upload__files { & ~ .el-upload__files {
margin-top: 7px; margin-top: 7px;
padding-top: 5px; padding-top: 5px;
border-top: 1px solid rgba(#c0ccda, .2); border-top: 1px solid rgba(var(--color-extra-light-silver), .2);
} }
@e cover { @e cover {
@ -180,7 +180,7 @@
& .btn { & .btn {
display: inline-block; display: inline-block;
color: #fff; color: var(--color-white);
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
vertical-align: middle; vertical-align: middle;
@ -209,7 +209,7 @@
} }
& i { & i {
color: #fff; color: var(--color-white);
display: block; display: block;
font-size: 24px; font-size: 24px;
line-height: inherit; line-height: inherit;
@ -222,7 +222,7 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: #fff; background-color: var(--color-white);
height: 36px; height: 36px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
@ -234,7 +234,7 @@
margin: 0; margin: 0;
line-height: 36px; line-height: 36px;
font-size: 14px; font-size: 14px;
color: #475669; color: var(--color-extra-light-black);
} }
& + .el-upload__inner { & + .el-upload__inner {
@ -245,7 +245,7 @@
} }
@e text { @e text {
color: #99a9bf; color: var(--color-light-silver);
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;