mirror of https://github.com/ElemeFE/element
Theme: parameterize color variables
Leopoldthecoder
parent
0e13dab680
commit
caa4fc4560
|
|
@ -12,7 +12,7 @@
|
|||
position: relative;
|
||||
background-color: var(--color-white);
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
opacity: 1;
|
||||
display: table;
|
||||
transition: opacity .2s;
|
||||
|
|
@ -59,14 +59,14 @@
|
|||
}
|
||||
|
||||
& .el-alert__description {
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
font-size: var(--alert-description-font-size);
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
@e closebtn {
|
||||
font-size: var(--alert-close-font-size);
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
opacity: 1;
|
||||
position: absolute 12px 15px * *;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
left: 0;
|
||||
top: 110%;
|
||||
margin: 5px 0 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #D3DCE6;
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-base-gray);
|
||||
width: 100%;
|
||||
padding: 6px 0;
|
||||
z-index: 10;
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
padding: 0 10px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
color: #475669;
|
||||
color: var(--color-extra-light-black);
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -40,14 +40,14 @@
|
|||
}
|
||||
&.highlighted {
|
||||
background-color: var(--color-primary);
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
&:active {
|
||||
background-color: darken(var(--color-primary), 0.2);
|
||||
}
|
||||
&.divider {
|
||||
margin-top: 6px;
|
||||
border-top: 1px solid #D3DCE6;
|
||||
border-top: 1px solid var(--color-base-gray);
|
||||
}
|
||||
&.divider:last-child {
|
||||
margin-bottom: -6px;
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
@utils-vertical-center;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
@e content {
|
||||
background-color: var(--badge-fill);
|
||||
border-radius: var(--badge-radius);
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
display: inline-block;
|
||||
font-size: var(--badge-font-size);
|
||||
height: var(--badge-size);
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
padding: 0 var(--badge-padding);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
border: 1px solid #fff;
|
||||
border: 1px solid var(--color-white);
|
||||
|
||||
@when fixed {
|
||||
position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
@e separator {
|
||||
margin: 0 8px;
|
||||
color: #c0ccda;
|
||||
color: var(--color-extra-light-silver);
|
||||
}
|
||||
@e item {
|
||||
float: left;
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
@e inner {
|
||||
&, & a {
|
||||
transition: color .15s linear;
|
||||
color:#475669;
|
||||
color:var(--color-extra-light-black);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.el-breadcrumb__item__inner,
|
||||
.el-breadcrumb__item__inner a {
|
||||
&, &:hover {
|
||||
color: #99a9bf;
|
||||
color: var(--color-light-silver);
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,13 +48,13 @@
|
|||
@when plain {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #fff;
|
||||
background: var(--color-white);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #fff;
|
||||
background: var(--color-white);
|
||||
border-color: shade(var(--color-primary), var(--button-active-shade-percent));
|
||||
color: shade(var(--color-primary), var(--button-active-shade-percent));
|
||||
outline: none;
|
||||
|
|
@ -85,9 +85,9 @@
|
|||
&,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #fff;
|
||||
border-color: #d3dce6;
|
||||
color: #C0CCDA;
|
||||
background-color: var(--color-white);
|
||||
border-color: var(--color-base-gray);
|
||||
color: var(--color-extra-light-silver);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -190,14 +190,14 @@
|
|||
@each $type in (primary, success, warning, danger, info) {
|
||||
.el-button--$type {
|
||||
&:first-child {
|
||||
border-right-color: rgba(#fff, 0.5);
|
||||
border-right-color: rgba(var(--color-white), 0.5);
|
||||
}
|
||||
&:last-child {
|
||||
border-left-color: rgba(#fff, 0.5);
|
||||
border-left-color: rgba(var(--color-white), 0.5);
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-left-color: rgba(#fff, 0.5);
|
||||
border-right-color: rgba(#fff, 0.5);
|
||||
border-left-color: rgba(var(--color-white), 0.5);
|
||||
border-right-color: rgba(var(--color-white), 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
@b card {
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, .12),
|
||||
0px 0px 6px 0px rgba(0, 0, 0, .04);
|
||||
|
|
|
|||
|
|
@ -12,33 +12,44 @@
|
|||
/* Colors
|
||||
-------------------------- */
|
||||
--color-primary: #20a0ff;
|
||||
|
||||
--color-success: #13ce66;
|
||||
--color-warning: #f7ba2a;
|
||||
--color-danger: #ff4949;
|
||||
--color-info: #50bfff;
|
||||
--color-blue: #2e90fe;
|
||||
--color-blue-light: #5da9ff;
|
||||
--color-blue-lighter: rgba(var(--color-blue), 0.12);
|
||||
|
||||
--color-secondary: color(var(--color-primary) s(99%) l(*0.9));
|
||||
--color-white: #fff;
|
||||
--color-dark-white: color(var(--color-white) blend(var(--color-primary) 2%));
|
||||
--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-color: #475669;
|
||||
--link-color: var(--color-extra-light-black);
|
||||
--link-hover-color: var(--color-primary);
|
||||
|
||||
/* Border
|
||||
-------------------------- */
|
||||
--border-width-base: 1px;
|
||||
--border-style-base: solid;
|
||||
--border-color-base: var(--color-grey);
|
||||
--border-color-hover: #8492a6;
|
||||
--border-color-base: var(--color-extra-light-silver);
|
||||
--border-color-hover: var(--color-base-silver);
|
||||
--border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
|
||||
--border-radius-base: 4px;
|
||||
--border-radius-small: 2px;
|
||||
--border-radius-circle: 100%;
|
||||
--shadow-base: 0 0 2px rgba(var(--color-black), 0.18), 0 0 1px var(--color-blue-light);
|
||||
|
||||
/* Box-shadow
|
||||
-------------------------- */
|
||||
|
|
@ -52,7 +63,7 @@
|
|||
/* Font
|
||||
-------------------------- */
|
||||
--font-size-base: 14px;
|
||||
--font-color-base: #1f2d3d;
|
||||
--font-color-base: var(--color-base-black);
|
||||
--font-color-disabled-base: #bbb;
|
||||
|
||||
/* Size
|
||||
|
|
@ -67,9 +78,9 @@
|
|||
|
||||
/* Disable base
|
||||
-------------------------- */
|
||||
--disabled-fill-base: #EFF2F7;
|
||||
--disabled-fill-base: var(--color-extra-light-gray);
|
||||
--disabled-color-base: #bbb;
|
||||
--disabled-border-base: #D3DCE6;
|
||||
--disabled-border-base: var(--color-base-gray);
|
||||
|
||||
/* Icon
|
||||
-------------------------- */
|
||||
|
|
@ -78,7 +89,7 @@
|
|||
/* Checkbox
|
||||
-------------------------- */
|
||||
--checkbox-font-size: 14px;
|
||||
--checkbox-color: #1f2d3d;
|
||||
--checkbox-color: var(--color-base-black);
|
||||
--checkbox-input-height: 18px;
|
||||
--checkbox-input-width: 18px;
|
||||
--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-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-icon-color: var(--fill-base);
|
||||
|
||||
--checkbox-input-shadow-hover: var(--shadow-base);
|
||||
--checkbox-input-border-color-hover: var(--color-primary);
|
||||
|
||||
/* Radio
|
||||
-------------------------- */
|
||||
--radio-font-size: 14px;
|
||||
--radio-color: #1f2d3d;
|
||||
--radio-color: var(--color-base-black);
|
||||
--radio-input-height: 18px;
|
||||
--radio-input-width: 18px;
|
||||
--radio-input-border-radius: var(--border-radius-circle);
|
||||
|
|
@ -126,7 +136,6 @@
|
|||
--radio-checked-input-fill: var(--color-white);
|
||||
--radio-checked-icon-color: var(--color-primary);
|
||||
|
||||
--radio-input-shadow-hover: var(--shadow-base);
|
||||
--radio-input-border-color-hover: var(--color-primary);
|
||||
|
||||
--radio-button-font-size: var(--font-size-base);
|
||||
|
|
@ -136,9 +145,9 @@
|
|||
--select-border-color-hover: var(--border-color-hover);
|
||||
--select-disabled-border: var(--disabled-border-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-input-focus-background: var(--color-primary);
|
||||
--select-input-font-size: 12px;
|
||||
|
|
@ -148,11 +157,11 @@
|
|||
--select-tag-background: var(--color-primary);
|
||||
|
||||
--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-hover-background: #e5e9f2;
|
||||
--select-option-hover-background: var(--color-light-gray);
|
||||
--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-height: 30px;
|
||||
|
|
@ -203,8 +212,8 @@
|
|||
--message-min-width: 300px;
|
||||
--message-padding: 10px 12px;
|
||||
--message-content-color: var(--border-color-hover);
|
||||
--message-close-color: var(--color-grey);
|
||||
--message-close-hover-color: #99A9BF;
|
||||
--message-close-color: var(--color-extra-light-silver);
|
||||
--message-close-hover-color: var(--color-light-silver);
|
||||
|
||||
--message-success-color: var(--color-success);
|
||||
--message-info-color: var(--color-info);
|
||||
|
|
@ -220,10 +229,10 @@
|
|||
--notification-font-size: var(--font-size-base);
|
||||
--notification-color: var(--border-color-hover);
|
||||
--notification-title-font-size: 16px;
|
||||
--notification-title-color: #1f2d3d;
|
||||
--notification-title-color: var(--color-base-black);
|
||||
|
||||
--notification-close-color: var(--color-grey);
|
||||
--notification-close-hover-color: #99A9BF;
|
||||
--notification-close-color: var(--color-extra-light-silver);
|
||||
--notification-close-hover-color: var(--color-light-silver);
|
||||
|
||||
--notification-success-color: var(--color-success);
|
||||
--notification-info-color: var(--color-info);
|
||||
|
|
@ -236,7 +245,6 @@
|
|||
--input-color: var(--font-color-base);
|
||||
--input-width: 140px;
|
||||
--input-height: 36px;
|
||||
--input-shadow-hover: var(--shadow-base);
|
||||
--input-border: var(--border-base);
|
||||
--input-border-color: var(--border-color-base);
|
||||
--input-border-radius: var(--border-radius-base);
|
||||
|
|
@ -244,8 +252,8 @@
|
|||
--input-fill: var(--color-white);
|
||||
--input-fill-disabled: var(--disabled-fill-base);
|
||||
--input-color-disabled: var(--font-color-disabled-base);
|
||||
--input-icon-color: var(--color-grey);
|
||||
--input-placeholder-color: #99a9bf;
|
||||
--input-icon-color: var(--color-extra-light-silver);
|
||||
--input-placeholder-color: var(--color-light-silver);
|
||||
--input-max-width: 314px;
|
||||
|
||||
--input-hover-border: var(--border-color-hover);
|
||||
|
|
@ -256,7 +264,7 @@
|
|||
--input-disabled-fill: var(--disabled-fill-base);
|
||||
--input-disabled-border: var(--disabled-border-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-height: 42px;
|
||||
|
|
@ -276,8 +284,8 @@
|
|||
--cascader-menu-border-color: var(--border-color-base);
|
||||
--cascader-menu-border-width: var(--border-width-base);
|
||||
--cascader-menu-color: var(--font-color-base);
|
||||
--cascader-menu-option-color-active: var(--color-blue);
|
||||
--cascader-menu-option-fill-active: rgba(var(--color-blue), 0.12);
|
||||
--cascader-menu-option-color-active: var(--color-secondary);
|
||||
--cascader-menu-option-fill-active: rgba(var(--color-secondary), 0.12);
|
||||
--cascader-menu-option-color-hover: var(--font-color-base);
|
||||
--cascader-menu-option-fill-hover: rgba(var(--color-black), 0.06);
|
||||
--cascader-menu-option-color-disabled: #999;
|
||||
|
|
@ -301,15 +309,14 @@
|
|||
-------------------------- */
|
||||
--tab-font-size: var(--font-size-base);
|
||||
--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: var(--font-color-base);
|
||||
--tab-header-fill-active: rgba(var(--color-black), 0.06);
|
||||
--tab-header-fill-hover: rgba(var(--color-black), 0.06);
|
||||
--tab-vertical-header-width: 90px;
|
||||
--tab-vertical-header-count-color: var(--color-white);
|
||||
--tab-vertical-header-count-fill: var(--color-blue);
|
||||
--tab-horizontal-border: 2px solid #438de0;
|
||||
--tab-vertical-header-count-fill: var(--color-secondary);
|
||||
|
||||
/* Button
|
||||
-------------------------- */
|
||||
|
|
@ -331,7 +338,7 @@
|
|||
--button-mini-padding-vertical: 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-border: #c4c4c4;
|
||||
|
||||
|
|
@ -339,8 +346,8 @@
|
|||
--button-ghost-fill: transparent;
|
||||
--button-ghost-border: none;
|
||||
|
||||
--button-disabled-color: var(--color-grey);
|
||||
--button-disabled-fill: #EFF2F7;
|
||||
--button-disabled-color: var(--color-extra-light-silver);
|
||||
--button-disabled-fill: var(--color-extra-light-gray);
|
||||
--button-disabled-border: var(--disabled-border-base);
|
||||
|
||||
--button-primary-border: var(--color-primary);
|
||||
|
|
@ -374,9 +381,9 @@
|
|||
/* Switch
|
||||
-------------------------- */
|
||||
--switch-on-color: var(--color-primary);
|
||||
--switch-off-color: var(--color-grey);
|
||||
--switch-disabled-color: #E5E9F3;
|
||||
--switch-disabled-text-color: #F9FAFC;
|
||||
--switch-off-color: var(--color-extra-light-silver);
|
||||
--switch-disabled-color: var(--color-light-gray);
|
||||
--switch-disabled-text-color: var(--color-dark-white);
|
||||
|
||||
--switch-font-size: var(--font-size-base);
|
||||
--switch-core-border-radius: 12px;
|
||||
|
|
@ -386,22 +393,21 @@
|
|||
|
||||
/* Dialog
|
||||
-------------------------- */
|
||||
--dialog-background-color: var(--color-blue);
|
||||
--dialog-footer-background: var(--color-blue-lighter);
|
||||
--dialog-background-color: var(--color-secondary);
|
||||
--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--dialog-tiny-width: 30%;
|
||||
--dialog-small-width: 50%;
|
||||
--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-title-font-size: 16px;
|
||||
--dialog-font-size: 14px;
|
||||
|
||||
/* Table
|
||||
-------------------------- */
|
||||
--table-border-color: #e0e6ed;
|
||||
--table-text-color: #1f2d3d;
|
||||
--table-header-background: #EFF2F7;
|
||||
--table-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
|
||||
--table-text-color: var(--color-base-black);
|
||||
--table-header-background: var(--color-extra-light-gray);
|
||||
|
||||
/* Pagination
|
||||
-------------------------- */
|
||||
|
|
@ -409,7 +415,7 @@
|
|||
--pagination-fill: var(--color-white);
|
||||
--pagination-color: var(--link-color);
|
||||
--pagination-border-radius: 2px;
|
||||
--pagination-button-color: #99a9bf;
|
||||
--pagination-button-color: var(--color-light-silver);
|
||||
--pagination-button-size: 28px;
|
||||
--pagination-button-disabled-color: #e4e4e4;
|
||||
--pagination-button-disabled-fill: var(--color-white);
|
||||
|
|
@ -425,14 +431,14 @@
|
|||
--popover-arrow-size: 6px;
|
||||
--popover-padding: 10px;
|
||||
--popover-title-font-size: 13px;
|
||||
--popover-title-color: #1f2d3d;
|
||||
--popover-title-color: var(--color-base-black);
|
||||
|
||||
/* Tooltip
|
||||
-------------------------- */
|
||||
--tooltip-fill: #1f2d3d;
|
||||
--tooltip-fill: var(--color-base-black);
|
||||
--tooltip-color: var(--color-white);
|
||||
--tooltip-font-size: 12px;
|
||||
--tooltip-border-color: #1f2d3d;
|
||||
--tooltip-border-color: var(--color-base-black);
|
||||
--tooltip-arrow-size: 6px;
|
||||
--tooltip-padding: 10px;
|
||||
|
||||
|
|
@ -445,8 +451,8 @@
|
|||
--tag-font-size: 12px;
|
||||
--tag-border-radius: 4px;
|
||||
|
||||
--tag-gray-fill: #e5e9f2;
|
||||
--tag-gray-border: #e5e9f2;
|
||||
--tag-gray-fill: var(--color-light-gray);
|
||||
--tag-gray-border: var(--color-light-gray);
|
||||
--tag-gray-color: var(--link-color);
|
||||
|
||||
--tag-primary-fill: rgba(32,159,255,0.10);
|
||||
|
|
@ -468,7 +474,7 @@
|
|||
/* Dropdown
|
||||
-------------------------- */
|
||||
--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);
|
||||
|
||||
/* Badge
|
||||
|
|
@ -488,10 +494,10 @@
|
|||
/* Slider
|
||||
--------------------------*/
|
||||
--slider-main-background-color: var(--color-primary);
|
||||
--slider-runway-background-color: #e5e9f2;
|
||||
--slider-button-hover-color: #1d8ce0;
|
||||
--slider-stop-background-color: var(--color-grey);
|
||||
--slider-disable-color: var(--color-grey);
|
||||
--slider-runway-background-color: var(--color-light-gray);
|
||||
--slider-button-hover-color: shade(var(--color-primary), 0.12);
|
||||
--slider-stop-background-color: var(--color-extra-light-silver);
|
||||
--slider-disable-color: var(--color-extra-light-silver);
|
||||
|
||||
--slider-margin: 16px 0;
|
||||
--slider-border-radius: 3px;
|
||||
|
|
@ -509,14 +515,14 @@
|
|||
/* Steps
|
||||
--------------------------*/
|
||||
--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);
|
||||
--submenu-item-fill: #e5e9f2;
|
||||
--submenu-item-fill: var(--color-light-gray);
|
||||
|
||||
--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-submenu-item-fill: #1f2d3d;
|
||||
--dark-submenu-item-fill: var(--color-base-black);
|
||||
|
||||
/* Rate
|
||||
--------------------------*/
|
||||
|
|
@ -524,19 +530,19 @@
|
|||
--rate-font-size: var(--font-size-base);
|
||||
--rate-icon-size: 18px;
|
||||
--rate-icon-margin: 6px;
|
||||
--rate-icon-color: #C6D1DE;
|
||||
--rate-icon-color: var(--color-extra-light-silver);
|
||||
|
||||
/* DatePicker
|
||||
--------------------------*/
|
||||
--datepicker-color: var(--link-color);
|
||||
--datepicker-off-color: #ddd;
|
||||
--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-inner-border-color: #e4e4e4;
|
||||
--datepicker-cell-hover-color: #e5e9f2;
|
||||
--datepicker-inrange-color: #D3ECFF;
|
||||
--datepicker-inrange-hover-color: #AFDCFF;
|
||||
--datepicker-cell-hover-color: var(--color-light-gray);
|
||||
--datepicker-inrange-color: tint(var(--color-primary), 0.8);
|
||||
--datepicker-inrange-hover-color: tint(var(--color-primary), 0.64);
|
||||
--datepicker-active-color: var(--color-primary);
|
||||
--datepicker-text-hover-color: var(--color-primary);
|
||||
|
||||
|
|
@ -547,8 +553,8 @@
|
|||
|
||||
/* Scrollbar
|
||||
--------------------------*/
|
||||
--scrollbar-background-color: rgba(#99a9bf, .3);
|
||||
--scrollbar-hover-background-color: rgba(#99a9bf, .5);
|
||||
--scrollbar-background-color: rgba(var(--color-light-silver), .3);
|
||||
--scrollbar-hover-background-color: rgba(var(--color-light-silver), .5);
|
||||
|
||||
/* Carousel
|
||||
--------------------------*/
|
||||
|
|
@ -564,14 +570,14 @@
|
|||
|
||||
/* Collapse
|
||||
--------------------------*/
|
||||
--collapse-border-color: #e0e6ed;
|
||||
--collapse-border-color: color(var(--border-color-base) h(-3) s(27%) l(90%));
|
||||
--collapse-header-height: 43px;
|
||||
--collapse-border-radius: 0;
|
||||
--collapse-header-padding: 20px;
|
||||
--collapse-header-fill: #fff;
|
||||
--collapse-header-color: #475669;
|
||||
--collapse-header-fill: var(--color-white);
|
||||
--collapse-header-color: var(--color-extra-light-black);
|
||||
--collapse-header-size: 13px;
|
||||
--collapse-content-fill: #f9fafc;
|
||||
--collapse-content-fill: var(--color-dark-white);
|
||||
--collapse-content-size: 13px;
|
||||
--collapse-content-color: #1f2d3d;
|
||||
--collapse-content-color: var(--color-base-black);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
&.current .cell {
|
||||
background-color: var(--datepicker-active-color) !important;
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
color: var(--datepicker-color);
|
||||
border: 1px solid var(--datepicker-border-color);
|
||||
box-shadow: 0 2px 6px #ccc;
|
||||
background: #fff;
|
||||
background: var(--color-white);
|
||||
border-radius: 2px;
|
||||
line-height: 20px;
|
||||
margin: 5px 0;
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
border-top: 1px solid var(--datepicker-inner-border-color);
|
||||
padding: 4px;
|
||||
text-align: right;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
border-right: 1px solid var(--datepicker-inner-border-color);
|
||||
box-sizing: border-box;
|
||||
padding-top: 6px;
|
||||
background-color: #f9fafc;
|
||||
background-color: var(--color-dark-white);
|
||||
}
|
||||
|
||||
.el-picker-panel *[slot=sidebar] + .el-picker-panel__body,
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
background-color: transparent;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
color: #8492a6;
|
||||
color: var(--color-base-silver);
|
||||
|
||||
&.confirm {
|
||||
font-weight: 800;
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
&.current .cell {
|
||||
background-color: var(--datepicker-active-color) !important;
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #fff;
|
||||
background: var(--color-white);
|
||||
border-radius: var(--border-radius-small);
|
||||
box-shadow: var(--dialog-box-shadow);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -55,12 +55,12 @@
|
|||
line-height: 1;
|
||||
font-size: var(--dialog-title-font-size);
|
||||
font-weight: bold;
|
||||
color: #1f2d3d;
|
||||
color: var(--color-base-black);
|
||||
}
|
||||
|
||||
@e body {
|
||||
padding: 30px 20px;
|
||||
color: #475669;
|
||||
color: var(--color-extra-light-black);
|
||||
font-size: var(--dialog-font-size);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
@b dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: #475669;
|
||||
color: var(--color-extra-light-black);
|
||||
font-size: var(--font-size-base);
|
||||
|
||||
.el-button-group {
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
}
|
||||
@b dropdown-menu {
|
||||
margin: 5px 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #D3DCE6;
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-base-gray);
|
||||
box-shadow: var(--dropdown-menu-box-shadow);
|
||||
padding: 6px 0;
|
||||
z-index: 10;
|
||||
|
|
@ -51,19 +51,19 @@
|
|||
@m divided {
|
||||
position: relative;
|
||||
margin-top: 6px;
|
||||
border-top: 1px solid #D3DCE6;
|
||||
border-top: 1px solid var(--color-base-gray);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 6px;
|
||||
display: block;
|
||||
margin: 0 -10px;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
}
|
||||
@when disabled {
|
||||
cursor: default;
|
||||
color: #c0ccda;
|
||||
color: var(--color-extra-light-silver);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
vertical-align: middle;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: #5e6d82;
|
||||
color: var(--color-extra-light-black);
|
||||
line-height: 1;
|
||||
padding: 11px 12px 11px 0;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
@utils-clearfix;
|
||||
}
|
||||
@e error {
|
||||
color: #ff4949;
|
||||
color: var(--color-danger);
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
padding-top: 4px;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
line-height: calc(var(--input-height) - 2);
|
||||
top: 1px;
|
||||
text-align: center;
|
||||
color: #99A9BF;
|
||||
color: var(--color-light-silver);
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -114,8 +114,8 @@
|
|||
display: table-cell;
|
||||
}
|
||||
@e append, prepend {
|
||||
background-color: #f9fafc;
|
||||
color: #99a9bf;
|
||||
background-color: var(--color-dark-white);
|
||||
color: var(--color-light-silver);
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
width: 100%;
|
||||
font-size: var(--font-size-base);
|
||||
color: var(--input-color);
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
background-image: none;
|
||||
border: var(--input-border);
|
||||
border-radius: 4px;
|
||||
|
|
|
|||
|
|
@ -33,18 +33,18 @@
|
|||
|
||||
& .el-menu-item,
|
||||
& .el-submenu__title {
|
||||
color: #c0ccda;
|
||||
color: var(--color-extra-light-silver);
|
||||
|
||||
&:hover {
|
||||
background-color: #475669;
|
||||
background-color: var(--color-extra-light-black);
|
||||
}
|
||||
}
|
||||
|
||||
& .el-submenu .el-menu {
|
||||
background-color: #1f2f3d;
|
||||
background-color: var(--color-base-black);
|
||||
|
||||
& .el-menu-item:hover {
|
||||
background-color: #475669;
|
||||
background-color: var(--color-extra-light-black);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -76,9 +76,9 @@
|
|||
position: absolute;
|
||||
top: 65px;
|
||||
left: 0;
|
||||
border:1px solid #d3dce6;
|
||||
border:1px solid var(--color-base-gray);
|
||||
padding: 5px 0;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
z-index: 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);
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
}
|
||||
|
||||
& .el-menu-item {
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
float: none;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
position: static;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
color: #99a9bf;
|
||||
color: var(--color-light-silver);
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
|
@ -125,10 +125,10 @@
|
|||
& .el-submenu {
|
||||
.el-menu-item,
|
||||
.el-submenu-title {
|
||||
color: #475669;
|
||||
color: var(--color-extra-light-black);
|
||||
|
||||
&:hover {
|
||||
background-color: #d3dce6;
|
||||
background-color: var(--color-base-gray);
|
||||
}
|
||||
}
|
||||
.el-menu-item.is-active {
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #d3dce6;
|
||||
background-color: var(--color-base-gray);
|
||||
}
|
||||
@when active {
|
||||
color: var(--color-primary);
|
||||
|
|
@ -165,11 +165,11 @@
|
|||
@extend menu-item;
|
||||
|
||||
&:hover {
|
||||
background-color: #d3dce6;
|
||||
background-color: var(--color-base-gray);
|
||||
}
|
||||
}
|
||||
& .el-menu {
|
||||
background-color: #e5e9f2;
|
||||
background-color: var(--color-light-gray);
|
||||
}
|
||||
& .el-menu-item {
|
||||
height: 50px;
|
||||
|
|
@ -177,7 +177,7 @@
|
|||
padding: 0 45px;
|
||||
|
||||
&:hover {
|
||||
background-color: #d3dce6;
|
||||
background-color: var(--color-base-gray);
|
||||
}
|
||||
}
|
||||
@e icon-arrow {
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
line-height: normal;
|
||||
font-size: 14px;
|
||||
padding-left: 20px;
|
||||
color: #99a9bf;
|
||||
color: var(--color-light-silver);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
text-align: left;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
width: var(--msgbox-width);
|
||||
border-radius: var(--msgbox-border-radius);
|
||||
font-size: var(--msgbox-font-size);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
left: 50%;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
transition: opacity 0.3s, transform .4s;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -30,13 +30,13 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #fff;
|
||||
background: var(--color-white);
|
||||
border-color: $border-color;
|
||||
color: $background-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #fff;
|
||||
background: var(--color-white);
|
||||
border-color: shade($border-color, var(--button-active-shade-percent));
|
||||
color: shade($background-color, var(--button-active-shade-percent));
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
border-radius: var(--border-radius-small);
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--notification-shadow);
|
||||
transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
@e text {
|
||||
font-size:14px;
|
||||
color:#475669;
|
||||
color:var(--color-extra-light-black);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
@e outer {
|
||||
height: 6px;
|
||||
border-radius: 100px;
|
||||
background-color: #e5e9f2;
|
||||
background-color: var(--color-light-gray);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
@e innerText {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
font-size: 12px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
circle: 6px #fff;
|
||||
circle: 6px var(--color-white);
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
display: inline-block;
|
||||
position: absolute;
|
||||
border-color: inherit;
|
||||
background-color: #c0ccda;
|
||||
background-color: var(--color-extra-light-silver);
|
||||
|
||||
@when icon {
|
||||
@when horizontal {
|
||||
|
|
@ -83,59 +83,59 @@
|
|||
border-style: solid;
|
||||
|
||||
@when process {
|
||||
color: #fff;
|
||||
background-color: #c0ccda;
|
||||
border-color: #c0ccda;
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-extra-light-silver);
|
||||
border-color: var(--color-extra-light-silver);
|
||||
}
|
||||
|
||||
@when wait {
|
||||
color: #c0ccda;
|
||||
background-color: #fff;
|
||||
border-color: #c0ccda;
|
||||
color: var(--color-extra-light-silver);
|
||||
background-color: var(--color-white);
|
||||
border-color: var(--color-extra-light-silver);
|
||||
}
|
||||
|
||||
@when success {
|
||||
color: #fff;
|
||||
background-color: #13ce66;
|
||||
border-color: #13ce66;
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-success);
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
@when error {
|
||||
color: #fff;
|
||||
background-color: #ff4949;
|
||||
border-color: #ff4949;
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-danger);
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
|
||||
@when finish {
|
||||
color: #fff;
|
||||
background-color: #20a0ff;
|
||||
border-color: #20a0ff;
|
||||
color: var(--color-white);
|
||||
background-color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@when process {
|
||||
color: #c0ccda;
|
||||
border-color: #c0ccda;
|
||||
color: var(--color-extra-light-silver);
|
||||
border-color: var(--color-extra-light-silver);
|
||||
}
|
||||
|
||||
@when wait {
|
||||
color: #c0ccda;
|
||||
border-color: #c0ccda;
|
||||
color: var(--color-extra-light-silver);
|
||||
border-color: var(--color-extra-light-silver);
|
||||
}
|
||||
|
||||
@when success {
|
||||
color: #13ce66;
|
||||
border-color: #13ce66;
|
||||
color: var(--color-success);
|
||||
border-color: var(--color-success);
|
||||
}
|
||||
|
||||
@when error {
|
||||
color: #ff4949;
|
||||
border-color: #ff4949;
|
||||
color: var(--color-danger);
|
||||
border-color: var(--color-danger);
|
||||
}
|
||||
|
||||
@when finish {
|
||||
color: #20a0ff;
|
||||
border-color: #20a0ff;
|
||||
color: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -152,27 +152,27 @@
|
|||
|
||||
@when process {
|
||||
font-weight: 700;
|
||||
color: #475669;
|
||||
color: var(--color-extra-light-black);
|
||||
}
|
||||
|
||||
@when wait {
|
||||
font-weight: normal;
|
||||
color: #99a9bf;
|
||||
color: var(--color-light-silver);
|
||||
}
|
||||
|
||||
@when success {
|
||||
font-weight: 700;
|
||||
color: #13ce66;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
@when error {
|
||||
font-weight: 700;
|
||||
color: #ff4949;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
@when finish {
|
||||
font-weight: 700;
|
||||
color: #20a0ff;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -182,23 +182,23 @@
|
|||
line-height: 14px;
|
||||
|
||||
@when process {
|
||||
color: #8492a6;
|
||||
color: var(--color-base-silver);
|
||||
}
|
||||
|
||||
@when wait {
|
||||
color: #c0ccda;
|
||||
color: var(--color-extra-light-silver);
|
||||
}
|
||||
|
||||
@when success {
|
||||
color: #13ce66;
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
@when error {
|
||||
color: #ff4949;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
@when finish {
|
||||
color: #20a0ff;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
}
|
||||
|
||||
@b table-filter {
|
||||
border: solid 1px #d3dce6;
|
||||
border: solid 1px var(--color-base-gray);
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
box-shadow: var(--dropdown-menu-box-shadow);
|
||||
box-sizing: border-box;
|
||||
margin: 2px 0;
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
}
|
||||
|
||||
@when active {
|
||||
background-color: #20a0ff;
|
||||
color: #fff;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -49,19 +49,19 @@
|
|||
}
|
||||
|
||||
@e bottom {
|
||||
border-top: 1px solid #d3dce6;
|
||||
border-top: 1px solid var(--color-base-gray);
|
||||
padding: 8px;
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #8492a6;
|
||||
color: var(--color-base-silver);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
padding: 0 3px;
|
||||
|
||||
&:hover {
|
||||
color: #20a0ff;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
|
||||
&.is-disabled {
|
||||
color: #c0ccda;
|
||||
color: var(--color-extra-light-silver);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--table-border-color);
|
||||
font-size: 14px;
|
||||
color: var(--table-text-color);
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #5e6d82;
|
||||
color: color(var(--color-primary) s(16%) l(44%));
|
||||
}
|
||||
|
||||
@e expand-column {
|
||||
|
|
@ -96,11 +96,11 @@
|
|||
|
||||
@e expanded-cell {
|
||||
padding: 20px 50px;
|
||||
background-color: #f9fafc;
|
||||
background-color: var(--color-dark-white);
|
||||
box-shadow: inset 0 2px 0 #f4f4f4;
|
||||
|
||||
&:hover {
|
||||
background-color: #f9fafc !important;
|
||||
background-color: var(--color-dark-white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -277,7 +277,7 @@
|
|||
box-sizing: border-box;
|
||||
|
||||
&.highlight {
|
||||
color: #20a0ff;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -307,13 +307,13 @@
|
|||
top: 11px;
|
||||
border-top: none;
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: 5px solid #99a9bf;
|
||||
border-bottom: 5px solid var(--color-light-silver);
|
||||
border-left: 5px solid transparent;
|
||||
}
|
||||
|
||||
&.descending {
|
||||
bottom: 11px;
|
||||
border-top: 5px solid #99a9bf;
|
||||
border-top: 5px solid var(--color-light-silver);
|
||||
border-right: 5px solid transparent;
|
||||
border-bottom: none;
|
||||
border-left: 5px solid transparent;
|
||||
|
|
@ -321,11 +321,11 @@
|
|||
}
|
||||
|
||||
& .ascending .sort-caret.ascending {
|
||||
border-bottom-color: #475669;
|
||||
border-bottom-color: var(--color-extra-light-black);
|
||||
}
|
||||
|
||||
& .descending .sort-caret.descending {
|
||||
border-top-color: #475669;
|
||||
border-top-color: var(--color-extra-light-black);
|
||||
}
|
||||
|
||||
& th.gutter, td.gutter {
|
||||
|
|
@ -361,7 +361,7 @@
|
|||
}
|
||||
|
||||
& tr {
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
|
||||
@modifier striped {
|
||||
|
|
@ -372,7 +372,7 @@
|
|||
}
|
||||
|
||||
&.current-row td {
|
||||
background: #EFF7FF;
|
||||
background: color(var(--color-primary) tint(92%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -380,11 +380,11 @@
|
|||
|
||||
@e body {
|
||||
tr.hover-row > td {
|
||||
background-color: #eff2f7;
|
||||
background-color: var(--color-extra-light-gray);
|
||||
}
|
||||
|
||||
tr.current-row > td {
|
||||
background: #eff7ff;
|
||||
background: color(var(--color-primary) tint(92%));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -411,7 +411,7 @@
|
|||
cursor: pointer;
|
||||
|
||||
& i {
|
||||
color: #99a9bf;
|
||||
color: var(--color-light-silver);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -423,7 +423,7 @@
|
|||
|
||||
@modifier enable-row-hover {
|
||||
tr:hover > td {
|
||||
background-color: #eff2f7;
|
||||
background-color: var(--color-extra-light-gray);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@component-namespace el {
|
||||
@b tabs {
|
||||
@e header {
|
||||
border-bottom: 1px solid #d3dce6;
|
||||
border-bottom: 1px solid var(--color-base-gray);
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin: 0 0 15px;
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
float: left;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
color: #8492a6;
|
||||
color: var(--color-base-silver);
|
||||
margin-bottom: -1px;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -43,8 +43,8 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #99a9bf;
|
||||
color: #fff;
|
||||
background-color: var(--color-light-silver);
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: #1f2d3d;
|
||||
color: var(--color-base-black);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -96,8 +96,8 @@
|
|||
}
|
||||
}
|
||||
&.is-active {
|
||||
border: 1px solid #d3dce6;
|
||||
border-bottom-color: #fff;
|
||||
border: 1px solid var(--color-base-gray);
|
||||
border-bottom-color: var(--color-white);
|
||||
border-radius: 4px 4px 0 0;
|
||||
|
||||
&.is-closable {
|
||||
|
|
@ -111,15 +111,15 @@
|
|||
}
|
||||
}
|
||||
@m border-card {
|
||||
background: #fff;
|
||||
border: 1px solid #d3dce6;
|
||||
background: var(--color-white);
|
||||
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);
|
||||
|
||||
&>.el-tabs__content {
|
||||
padding: 15px;
|
||||
}
|
||||
&>.el-tabs__header {
|
||||
background-color: #eff2f7;
|
||||
background-color: var(--color-extra-light-gray);
|
||||
margin: 0;
|
||||
}
|
||||
&>.el-tabs__header>.el-tabs__item {
|
||||
|
|
@ -129,15 +129,15 @@
|
|||
margin: * -1px;
|
||||
|
||||
&.is-active {
|
||||
background-color: #fff;
|
||||
border-right-color: #d3dce6;
|
||||
border-left-color: #d3dce6;
|
||||
background-color: var(--color-white);
|
||||
border-right-color: var(--color-base-gray);
|
||||
border-left-color: var(--color-base-gray);
|
||||
|
||||
&:first-child {
|
||||
border-left-color: #d3dce6;
|
||||
border-left-color: var(--color-base-gray);
|
||||
}
|
||||
&:last-child {
|
||||
border-right-color: #d3dce6;
|
||||
border-right-color: var(--color-base-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
right: -2px;
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
color: var(--tag-fill);
|
||||
}
|
||||
}
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-gray-color);
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
@m primary {
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-primary-color);
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
@m success {
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-success-color);
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
@m warning {
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-warning-color);
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
@m danger {
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
|
||||
& .el-tag__close:hover {
|
||||
background-color: var(--tag-danger-color);
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
.time-select-item.selected:not(.disabled) {
|
||||
background-color: var(--datepicker-active-color);
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-primary);
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
@component-namespace el {
|
||||
@b tree {
|
||||
cursor: default;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d3dce6;
|
||||
background: var(--color-white);
|
||||
border: 1px solid var(--color-base-gray);
|
||||
|
||||
@e empty-block {
|
||||
position: relative;
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #5e6d82;
|
||||
color: color(var(--color-primary) s(16%) l(44%));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
&:hover {
|
||||
background: #e5e9f2;
|
||||
background: var(--color-light-gray);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
margin-left: 10px;
|
||||
border: 6px solid transparent;
|
||||
border-right-width: 0;
|
||||
border-left-color: #99a9bf;
|
||||
border-left-color: var(--color-light-silver);
|
||||
border-left-width: 7px;
|
||||
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
color: #99a9bf;
|
||||
color: var(--color-light-silver);
|
||||
}
|
||||
|
||||
& > .el-tree-node__children {
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
@e file {
|
||||
transition: all .5s cubic-bezier(.55,0,.1,1);
|
||||
font-size: 14px;
|
||||
color: #475669;
|
||||
color: var(--color-extra-light-black);
|
||||
line-height: 32px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
position: relative;
|
||||
|
||||
a {
|
||||
color: #475669;
|
||||
color: var(--color-extra-light-black);
|
||||
display: block;
|
||||
margin-right: 40px;
|
||||
overflow: hidden;
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
white-space: nowrap;
|
||||
|
||||
[class^="el-icon"] {
|
||||
color: #99a9bf;
|
||||
color: var(--color-light-silver);
|
||||
margin-right: 7px;
|
||||
height: 100%;
|
||||
line-height: inherit;
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
padding-right: 0;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #eff2f7;
|
||||
background-color: var(--color-extra-light-gray);
|
||||
}
|
||||
@when finished {
|
||||
& a:hover {
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
}
|
||||
@e tip {
|
||||
font-size: 12px;
|
||||
color: #8492a6;
|
||||
color: var(--color-base-silver);
|
||||
margin-top: 7px;
|
||||
}
|
||||
@e btn-delete {
|
||||
|
|
@ -102,8 +102,8 @@
|
|||
}
|
||||
}
|
||||
@b dragger {
|
||||
background-color: #f9fafc;
|
||||
border: 1px solid #c0ccda;
|
||||
background-color: var(--color-dark-white);
|
||||
border: 1px solid var(--color-extra-light-silver);
|
||||
box-sizing: border-box;
|
||||
width: 360px;
|
||||
height: 180px;
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
}
|
||||
& .el-icon-upload {
|
||||
font-size: 67px;
|
||||
color: #99a9bf;
|
||||
color: var(--color-light-silver);
|
||||
margin: 40px 0 16px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
& ~ .el-upload__files {
|
||||
margin-top: 7px;
|
||||
padding-top: 5px;
|
||||
border-top: 1px solid rgba(#c0ccda, .2);
|
||||
border-top: 1px solid rgba(var(--color-extra-light-silver), .2);
|
||||
}
|
||||
|
||||
@e cover {
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
|
||||
& .btn {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
|
|
@ -209,7 +209,7 @@
|
|||
}
|
||||
|
||||
& i {
|
||||
color: #fff;
|
||||
color: var(--color-white);
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: inherit;
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
background-color: var(--color-white);
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -234,7 +234,7 @@
|
|||
margin: 0;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
color: #475669;
|
||||
color: var(--color-extra-light-black);
|
||||
}
|
||||
|
||||
& + .el-upload__inner {
|
||||
|
|
@ -245,7 +245,7 @@
|
|||
}
|
||||
|
||||
@e text {
|
||||
color: #99a9bf;
|
||||
color: var(--color-light-silver);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue