Skip to content

E
Element
Commit 31d7acc7 authored by baiyaaaaa's avatar baiyaaaaa Committed by GitHub
Browse files
Options

Merge pull request #2384 from Leopoldthecoder/dev 

Theme: parameterize color variables
parents afcdcd6f e21b6684
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 494 additions and 490 deletions
packages/theme-default/src/alert.css
View file @ 31d7acc7
......@@ -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;
......
packages/theme-default/src/autocomplete.css
View file @ 31d7acc7
......@@ -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);
}
}
......
packages/theme-default/src/badge.css
View file @ 31d7acc7
......@@ -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) * *;
......
packages/theme-default/src/breadcrumb.css
View file @ 31d7acc7
......@@ -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;
}
}
......
packages/theme-default/src/button.css
View file @ 31d7acc7
......@@ -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);
}
}
}
......
packages/theme-default/src/card.css
View file @ 31d7acc7
......@@ -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);
......
packages/theme-default/src/common/var.css
View file @ 31d7acc7
This diff is collapsed.
packages/theme-default/src/date-picker/month-table.css
View file @ 31d7acc7
......@@ -31,7 +31,7 @@
&.current .cell {
background-color: var(--datepicker-active-color) !important;
color: #fff;
color: var(--color-white);
}
}
}
......
packages/theme-default/src/date-picker/picker-panel.css
View file @ 31d7acc7
......@@ -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,
......
packages/theme-default/src/date-picker/time-picker.css
View file @ 31d7acc7
......@@ -75,7 +75,7 @@
background-color: transparent;
outline: none;
font-size: 12px;
color: #8492a6;
color: var(--color-base-silver);
&.confirm {
font-weight: 800;
......
packages/theme-default/src/date-picker/year-table.css
View file @ 31d7acc7
......@@ -35,7 +35,7 @@
&.current .cell {
background-color: var(--datepicker-active-color) !important;
color: #fff;
color: var(--color-white);
}
}
}
......
packages/theme-default/src/dialog.css
View file @ 31d7acc7
......@@ -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);
}
......
packages/theme-default/src/dropdown.css
View file @ 31d7acc7
......@@ -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;
}
}
......
packages/theme-default/src/form.css
View file @ 31d7acc7
......@@ -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;
......
packages/theme-default/src/input-number.css
View file @ 31d7acc7
......@@ -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;
......
packages/theme-default/src/input.css
View file @ 31d7acc7
......@@ -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;
......
packages/theme-default/src/menu.css
View file @ 31d7acc7
......@@ -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);
}
}
}
packages/theme-default/src/message-box.css
View file @ 31d7acc7
......@@ -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);
......
packages/theme-default/src/message.css
View file @ 31d7acc7
......@@ -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;
......
packages/theme-default/src/mixins/_button.css
View file @ 31d7acc7
......@@ -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;
......
packages/theme-default/src/notification.css
View file @ 31d7acc7
......@@ -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;
......
packages/theme-default/src/progress.css
View file @ 31d7acc7
......@@ -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;
}
......
packages/theme-default/src/radio.css
View file @ 31d7acc7
......@@ -87,7 +87,7 @@
}
&::after {
circle: 6px #fff;
circle: 6px var(--color-white);
content: "";
position: absolute;
left: 50%;
......
packages/theme-default/src/step.css
View file @ 31d7acc7
......@@ -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);
}
}
}
......
packages/theme-default/src/table-column.css
View file @ 31d7acc7
......@@ -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;
}
}
......
packages/theme-default/src/table.css
View file @ 31d7acc7
......@@ -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);
}
}
......
packages/theme-default/src/tabs.css
View file @ 31d7acc7
......@@ -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);
}
}
}
......
packages/theme-default/src/tag.css
View file @ 31d7acc7
......@@ -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);
}
}
}
......
packages/theme-default/src/time-select.css
View file @ 31d7acc7
......@@ -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);
......
packages/theme-default/src/tree.css
View file @ 31d7acc7
......@@ -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 {
......
packages/theme-default/src/upload.css
View file @ 31d7acc7
......@@ -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;
......
yarn.lock
View file @ 31d7acc7
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment