test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-01 02:37:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

refactor(style): rename to text-color bg-color (#4468)

Browse Source 
* refactor(style): rename -font to -text-color & -background to -bg-color

* refactor(style): rename bg-color text-color

* refactor(style): rename 'color' to 'text-color'
This commit is contained in:
云游君 2021-11-22 11:19:44 +08:00 committed by GitHub
parent c4dece47e8
commit e68b6c05d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 256 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/.vitepress/vitepress/styles/vars.scss
View File

@ -40,13 +40,13 @@
// code block vars
--code-bg-color: var(--el-background-color-base);
--code-bg-color: var(--el-bg-color-base);
--code-text-color: var(--text-color);
--code-font-family: var(--font-family-mono);
// doc search vars
--docsearch-primary-color: var(--brand-color);
--docsearch-searchbox-background: var(--el-background-color-base);
--docsearch-searchbox-background: var(--el-bg-color-base);
}
:root {

4
docs/en-US/guide/theming.md
View File

@ -191,14 +191,14 @@ Like this:
If you just want to customize a particular component, just add inline styles for certain components individually.
```html
<el-tag style="--el-tag-background-color: red">Tag</el-tag>
<el-tag style="--el-tag-bg-color: red">Tag</el-tag>
```
For performance reasons, it is more recommended to custom css variables under a class rather than the global `:root`.
```css
.custom-class {
--el-tag-background-color: red;
--el-tag-bg-color: red;
}
```

4
docs/examples/table/with-status.vue
View File

@ -53,9 +53,9 @@ export default {
<style>
.el-table .warning-row {
--el-table-tr-background-color: var(--el-color-warning-lighter);
--el-table-tr-bg-color: var(--el-color-warning-lighter);
}
.el-table .success-row {
--el-table-tr-background-color: var(--el-color-success-lighter);
--el-table-tr-bg-color: var(--el-color-success-lighter);
}
</style>

4
packages/components/menu/__tests__/menu.spec.ts
View File

@ -57,7 +57,7 @@ describe('menu', () => {
// const item2 = await wrapper.findComponent({ ref: 'item2' })
expect(
window.getComputedStyle(instance)._values['--el-menu-background-color']
window.getComputedStyle(instance)._values['--el-menu-bg-color']
).toEqual(backgroundColor)
// We can not test final style, so comment it out for now.
@ -161,7 +161,7 @@ describe('menu', () => {
expect(elSubMenu.vm.$.exposed.opened).toBeTruthy()
})
test('hover-background-color', async () => {
test('hover-bg-color', async () => {
const wrapper = _mount(
`<el-menu ref="menu" default-active="2"
:background-color="background"

4
packages/components/menu/src/use-menu-css-var.ts
View File

@ -8,8 +8,8 @@ export const useMenuCssVar = (props: MenuProps) => {
return {
'--el-menu-text-color': props.textColor || '',
'--el-menu-hover-text-color': props.textColor || '',
'--el-menu-background-color': props.backgroundColor || '',
'--el-menu-hover-background-color': useMenuColor(props).value || '',
'--el-menu-bg-color': props.backgroundColor || '',
'--el-menu-hover-bg-color': useMenuColor(props).value || '',
'--el-menu-active-color': props.activeTextColor || '',
}
})

16
packages/hooks/__tests__/use-css-var.spec.ts
View File

@ -10,8 +10,8 @@ describe('usecssvar', () => {
`,
setup() {
const themeVars = ref({
'--el-button-default-background-color': '#f44336',
'--el-button-default-font-color': '#2196f3',
'--el-button-default-bg-color': '#f44336',
'--el-button-default-text-color': '#2196f3',
})
useCssVar(themeVars)
@ -21,10 +21,10 @@ describe('usecssvar', () => {
const rootElement = window.document.documentElement
expect(
rootElement.style.getPropertyValue('--el-button-default-background-color')
rootElement.style.getPropertyValue('--el-button-default-bg-color')
).toBe('#f44336')
expect(
rootElement.style.getPropertyValue('--el-button-default-font-color')
rootElement.style.getPropertyValue('--el-button-default-text-color')
).toBe('#2196f3')
})
@ -35,8 +35,8 @@ describe('usecssvar', () => {
`,
setup() {
const themeVars = ref({
'--el-span-default-background-color': '#f44336',
'--el-span-default-font-color': '#2196f3',
'--el-span-default-bg-color': '#f44336',
'--el-span-default-text-color': '#2196f3',
})
const elRef = ref(null)
@ -51,10 +51,10 @@ describe('usecssvar', () => {
const customElement = wrapper.find('span').element
expect(
customElement.style.getPropertyValue('--el-span-default-background-color')
customElement.style.getPropertyValue('--el-span-default-bg-color')
).toBe('#f44336')
expect(
customElement.style.getPropertyValue('--el-span-default-font-color')
customElement.style.getPropertyValue('--el-span-default-text-color')
).toBe('#2196f3')
})
})

4
packages/hooks/use-css-var/index.ts
View File

@ -50,8 +50,8 @@ export const themeVarsKey: InjectionKey<VarsType> = 'themeVars' as any
* ```ts
* setup() {
* const themeVars = ref({
* '--el-button-default-background-color': '#f44336',
* '--el-button-default-font-color': '#2196f3',
* '--el-button-default-bg-color': '#f44336',
* '--el-button-default-text-color': '#2196f3',
* })
* useCssVar(themeVars)
* }

4
packages/theme-chalk/src/alert.scss
View File

@ -41,10 +41,10 @@
@each $type in (success, info, warning, error) {
@include m($type) {
--el-alert-background-color: #{map.get($colors, $type, 'light-9')};
--el-alert-bg-color: #{map.get($colors, $type, 'light-9')};
&.is-light {
background-color: var(--el-alert-background-color);
background-color: var(--el-alert-bg-color);
color: var(--el-color-#{$type});
.#{$namespace}-alert__description {

4
packages/theme-chalk/src/avatar.scss
View File

@ -9,8 +9,8 @@
box-sizing: border-box;
text-align: center;
overflow: hidden;
color: var(--el-avatar-font-color);
background: var(--el-avatar-background-color);
color: var(--el-avatar-text-color);
background: var(--el-avatar-bg-color);
width: var(--el-avatar-large-size);
height: var(--el-avatar-large-size);
line-height: var(--el-avatar-large-size);

6
packages/theme-chalk/src/backtop.scss
View File

@ -6,11 +6,11 @@
@include set-component-css-var('backtop', $backtop);
position: fixed;
background-color: var(--el-backtop-background-color);
background-color: var(--el-backtop-bg-color);
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--el-backtop-font-color);
color: var(--el-backtop-text-color);
display: flex;
align-items: center;
justify-content: center;
@ -20,7 +20,7 @@
z-index: 5;
&:hover {
background-color: var(--el-backtop-hover-background-color);
background-color: var(--el-backtop-hover-bg-color);
}
@include e(icon) {

2
packages/theme-chalk/src/badge.scss
View File

@ -13,7 +13,7 @@
display: inline-block;
@include e(content) {
background-color: var(--el-badge-background-color);
background-color: var(--el-badge-bg-color);
border-radius: var(--el-badge-radius);
color: var(--el-color-white);
display: inline-block;

4
packages/theme-chalk/src/calendar.scss
View File

@ -48,7 +48,7 @@
transition: background-color var(--el-transition-duration-fast) ease;
@include when(selected) {
background-color: var(--el-calendar-selected-background-color);
background-color: var(--el-calendar-selected-bg-color);
}
@include when(today) {
@ -74,7 +74,7 @@
height: var(--el-calendar-cell-width);
&:hover {
cursor: pointer;
background-color: var(--el-calendar-selected-background-color);
background-color: var(--el-calendar-selected-bg-color);
}
}
}

2
packages/theme-chalk/src/card.scss
View File

@ -13,7 +13,7 @@
@include b(card) {
border-radius: var(--el-card-border-radius);
border: 1px solid var(--el-card-border-color);
background-color: var(--el-card-background-color);
background-color: var(--el-card-bg-color);
overflow: hidden;
color: var(--el-text-color-primary);
transition: var(--el-transition-duration);

6
packages/theme-chalk/src/cascader-panel.scss
View File

@ -20,7 +20,7 @@
@include b(cascader-menu) {
min-width: 180px;
box-sizing: border-box;
color: var(--el-cascader-menu-font-color);
color: var(--el-cascader-menu-text-color);
border-right: var(--el-cascader-menu-border);
&:last-child {
@ -76,13 +76,13 @@
outline: none;
&.is-selectable.in-active-path {
color: var(--el-cascader-menu-font-color);
color: var(--el-cascader-menu-text-color);
}
&.in-active-path,
&.is-selectable.in-checked-path,
&.is-active {
color: var(--el-cascader-menu-selected-font-color);
color: var(--el-cascader-menu-selected-text-color);
font-weight: bold;
}

6
packages/theme-chalk/src/cascader.scss
View File

@ -153,7 +153,7 @@
margin: 0;
padding: 6px 0;
font-size: var(--el-font-size-base);
color: var(--el-cascader-menu-font-color);
color: var(--el-cascader-menu-text-color);
text-align: center;
}
@ -173,7 +173,7 @@
}
&.is-checked {
color: var(--el-cascader-menu-selected-font-color);
color: var(--el-cascader-menu-selected-text-color);
font-weight: bold;
}
@ -193,7 +193,7 @@
min-width: 60px;
margin: 2px 0 2px 15px;
padding: 0;
color: var(--el-cascader-menu-font-color);
color: var(--el-cascader-menu-text-color);
border: none;
outline: none;
box-sizing: border-box;

15
packages/theme-chalk/src/checkbox-button.scss
View File

@ -21,13 +21,10 @@
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background: var(
--el-button-background-color,
map.get($button, 'background-color')
);
background: var(--el-button-bg-color, map.get($button, 'bg-color'));
border: $border-base;
border-left: 0;
color: var(--el-button-font-color, map.get($button, 'font-color'));
color: var(--el-button-text-color, map.get($button, 'text-color'));
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
@ -67,8 +64,8 @@
&.is-checked {
& .#{$namespace}-checkbox-button__inner {
color: var(--el-checkbox-button-checked-font-color);
background-color: var(--el-checkbox-button-checked-background-color);
color: var(--el-checkbox-button-checked-text-color);
background-color: var(--el-checkbox-button-checked-bg-color);
border-color: var(--el-checkbox-button-checked-border-color);
box-shadow: -1px 0 0 0 var(--el-color-primary-light-4);
}
@ -86,8 +83,8 @@
cursor: not-allowed;
background-image: none;
background-color: var(
--el-button-disabled-background-color,
map.get($button, 'disabled-background-color')
--el-button-disabled-bg-color,
map.get($button, 'disabled-bg-color')
);
border-color: var(
--el-button-disabled-border-color,

10
packages/theme-chalk/src/checkbox.scss
View File

@ -49,7 +49,7 @@ $checkbox-bordered-input-width: map.merge(
}
@include b(checkbox) {
color: var(--el-checkbox-font-color);
color: var(--el-checkbox-text-color);
font-weight: var(--el-checkbox-font-weight);
font-size: var(--el-font-size-base);
position: relative;
@ -167,7 +167,7 @@ $checkbox-bordered-input-width: map.merge(
@include when(checked) {
.#{$namespace}-checkbox__inner {
background-color: var(--el-checkbox-checked-background-color);
background-color: var(--el-checkbox-checked-bg-color);
border-color: var(--el-checkbox-checked-input-border-color);
&::after {
@ -176,7 +176,7 @@ $checkbox-bordered-input-width: map.merge(
}
& + .#{$namespace}-checkbox__label {
color: var(--el-checkbox-checked-font-color);
color: var(--el-checkbox-checked-text-color);
}
}
@include when(focus) {
@ -187,7 +187,7 @@ $checkbox-bordered-input-width: map.merge(
}
@include when(indeterminate) {
.#{$namespace}-checkbox__inner {
background-color: var(--el-checkbox-checked-background-color);
background-color: var(--el-checkbox-checked-bg-color);
border-color: var(--el-checkbox-checked-input-border-color);
&::before {
@ -216,7 +216,7 @@ $checkbox-bordered-input-width: map.merge(
box-sizing: border-box;
width: var(--el-checkbox-input-width);
height: var(--el-checkbox-input-height);
background-color: var(--el-checkbox-background-color);
background-color: var(--el-checkbox-bg-color);
z-index: var(--el-index-normal);
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

10
packages/theme-chalk/src/collapse.scss
View File

@ -13,7 +13,7 @@
@include b(collapse-item) {
@include when(disabled) {
.#{$namespace}-collapse-item__header {
color: var(--el-font-color-disabled-base);
color: var(--el-text-color-disabled-base);
cursor: not-allowed;
}
}
@ -22,8 +22,8 @@
align-items: center;
height: var(--el-collapse-header-height);
line-height: var(--el-collapse-header-height);
background-color: var(--el-collapse-header-background-color);
color: var(--el-collapse-header-font-color);
background-color: var(--el-collapse-header-bg-color);
color: var(--el-collapse-header-text-color);
cursor: pointer;
border-bottom: 1px solid var(--el-collapse-border-color);
font-size: var(--el-collapse-header-font-size);
@ -48,7 +48,7 @@
@include e(wrap) {
will-change: height;
background-color: var(--el-collapse-content-background-color);
background-color: var(--el-collapse-content-bg-color);
overflow: hidden;
box-sizing: border-box;
border-bottom: 1px solid var(--el-collapse-border-color);
@ -57,7 +57,7 @@
@include e(content) {
padding-bottom: 25px;
font-size: var(--el-collapse-content-font-size);
color: var(--el-collapse-content-font-color);
color: var(--el-collapse-content-text-color);
line-height: 1.769230769230769;
}

2
packages/theme-chalk/src/common/popup.scss
View File

@ -37,7 +37,7 @@
width: 100%;
height: 100%;
opacity: var(--el-popup-modal-opacity);
background: var(--el-popup-modal-background-color);
background: var(--el-popup-modal-bg-color);
}
@include b(popup-parent) {

150
packages/theme-chalk/src/common/var.scss
View File

@ -153,7 +153,7 @@ $font-size: map.merge(
);
// Disable base
$disabled-fill-base: var(--el-background-color-base) !default;
$disabled-fill-base: var(--el-bg-color-base) !default;
$disabled-color-base: var(--el-text-color-placeholder) !default;
$disabled-border-base: var(--el-border-color-light) !default;
@ -164,11 +164,11 @@ $checkbox: map.merge(
(
'font-size': 14px,
'font-weight': var(--el-font-weight-primary),
'font-color': var(--el-text-color-regular),
'text-color': var(--el-text-color-regular),
'input-height': 14px,
'input-width': 14px,
'border-radius': var(--el-border-radius-small),
'background-color': var(--el-color-white),
'bg-color': var(--el-color-white),
'input-border': var(--el-border-base),
'disabled-border-color': var(--el-border-color-base),
'disabled-input-fill': #edf2fc,
@ -176,9 +176,9 @@ $checkbox: map.merge(
'disabled-checked-input-fill': var(--el-border-color-extra-light),
'disabled-checked-input-border-color': var(--el-border-color-base),
'disabled-checked-icon-color': var(--el-text-color-placeholder),
'checked-font-color': var(--el-color-primary),
'checked-text-color': var(--el-color-primary),
'checked-input-border-color': var(--el-color-primary),
'checked-background-color': var(--el-color-primary),
'checked-bg-color': var(--el-color-primary),
'checked-icon-color': var(--el-fill-base),
'input-border-color-hover': var(--el-color-primary),
),
@ -188,8 +188,8 @@ $checkbox: map.merge(
$checkbox-button: () !default;
$checkbox-button: map.merge(
(
'checked-background-color': var(--el-color-primary),
'checked-font-color': var(--el-color-white),
'checked-bg-color': var(--el-color-primary),
'checked-text-color': var(--el-color-white),
'checked-border-color': var(--el-color-primary),
),
$checkbox-button
@ -201,12 +201,12 @@ $radio: () !default;
$radio: map.merge(
(
'font-size': var(--el-font-size-base),
'font-color': var(--el-text-color-regular),
'text-color': var(--el-text-color-regular),
'font-weight': var(--el-font-weight-primary),
'input-height': 14px,
'input-width': 14px,
'input-border-radius': var(--el-border-radius-circle),
'input-background-color': var(--el-color-white),
'input-bg-color': var(--el-color-white),
'input-border': var(--el-border-base),
'input-border-color': var(--el-border-color-base),
'input-border-color-hover': var(--el-color-primary),
@ -228,8 +228,8 @@ $radio-height: map.merge(
$radio-button: () !default;
$radio-button: map.merge(
(
'checked-background-color': var(--el-color-primary),
'checked-font-color': var(--el-color-white),
'checked-bg-color': var(--el-color-primary),
'checked-text-color': var(--el-color-white),
'checked-border-color': var(--el-color-primary),
'disabled-checked-fill': var(--el-border-color-extra-light),
),
@ -252,7 +252,7 @@ $radio-disabled: map.merge(
$radio-checked: () !default;
$radio-checked: map.merge(
(
'font-color': var(--el-color-primary),
'text-color': var(--el-color-primary),
'input-border-color': var(--el-color-primary),
'icon-color': var(--el-color-primary),
),
@ -309,11 +309,11 @@ $select: map.merge(
$select-option: () !default;
$select-option: map.merge(
(
'color': var(--el-text-color-regular),
'text-color': var(--el-text-color-regular),
'disabled-color': var(--el-text-color-placeholder),
'height': 34px,
'hover-background': var(--el-background-color-base),
'selected-font-color': var(--el-color-primary),
'hover-background': var(--el-bg-color-base),
'selected-text-color': var(--el-color-primary),
),
$select-option
);
@ -321,7 +321,7 @@ $select-option: map.merge(
$select-group: () !default;
$select-group: map.merge(
(
'color': var(--el-color-info),
'text-color': var(--el-color-info),
'height': 30px,
'font-size': 12px,
),
@ -331,7 +331,7 @@ $select-group: map.merge(
$select-dropdown: () !default;
$select-dropdown: map.merge(
(
'background': var(--el-color-white),
'bg-color': var(--el-color-white),
'shadow': var(--el-box-shadow-light),
'empty-color': var(--el-text-color-secondary),
'max-height': 274px,
@ -382,7 +382,7 @@ $message: () !default;
$message: map.merge(
(
'min-width': 380px,
'background-color': #edf2fc,
'bg-color': #edf2fc,
'padding': 15px 15px 15px 20px,
'close-size': 16px,
'close-icon-color': var(--el-text-color-placeholder),
@ -421,11 +421,11 @@ $notification: map.merge(
$input: () !default;
$input: map.merge(
(
'font-color': var(--el-text-color-regular),
'text-color': var(--el-text-color-regular),
'border': var(--el-border-base),
'border-color': var(--el-border-color-base),
'border-radius': var(--el-border-radius-base),
'background-color': var(--el-color-white),
'bg-color': var(--el-color-white),
'icon-color': var(--el-text-color-placeholder),
'placeholder-color': var(--el-text-color-placeholder),
'hover-border': var(--el-border-color-hover),
@ -440,7 +440,7 @@ $input-disabled: map.merge(
(
'fill': var(--el-disabled-fill-base),
'border': var(--el-disabled-border-base),
'color': var(--el-disabled-color-base),
'text-color': var(--el-disabled-color-base),
'placeholder-color': var(--el-text-color-placeholder),
),
$input-disabled
@ -493,14 +493,14 @@ $input-number-width: map.merge(
$cascader: () !default;
$cascader: map.merge(
(
'menu-font-color': var(--el-text-color-regular),
'menu-selected-font-color': var(--el-color-primary),
'menu-text-color': var(--el-text-color-regular),
'menu-selected-text-color': var(--el-color-primary),
'menu-fill': var(--el-fill-base),
'menu-font-size': var(--el-font-size-base),
'menu-radius': var(--el-border-radius-base),
'menu-border': solid 1px var(--el-border-color-light),
'menu-shadow': var(--el-box-shadow-light),
'node-background-hover': var(--el-background-color-base),
'node-background-hover': var(--el-bg-color-base),
'node-color-disabled': var(--el-text-color-placeholder),
'color-empty': var(--el-text-color-placeholder),
'tag-background': #f0f2f5,
@ -622,7 +622,7 @@ $dialog: map.merge(
(
'width': 50%,
'margin-top': 15vh,
'background-color': var(--el-color-white),
'bg-color': var(--el-color-white),
'box-shadow': 0 1px 3px rgba(0, 0, 0, 0.3),
'title-font-size': var(--el-font-size-large),
'content-font-size': 14px,
@ -639,15 +639,15 @@ $table: map.merge(
(
'border-color': var(--el-border-color-lighter),
'border': 1px solid var(--el-table-border-color),
'font-color': var(--el-text-color-regular),
'header-font-color': var(--el-text-color-secondary),
'row-hover-background-color': var(--el-background-color-base),
'current-row-background-color': var(--el-color-primary-light-9),
'header-background-color': var(--el-color-white),
'text-color': var(--el-text-color-regular),
'header-text-color': var(--el-text-color-secondary),
'row-hover-bg-color': var(--el-bg-color-base),
'current-row-bg-color': var(--el-color-primary-light-9),
'header-bg-color': var(--el-color-white),
'fixed-box-shadow': 0 0 10px rgba(0, 0, 0, 0.12),
'background-color': var(--el-color-white),
'tr-background-color': var(--el-color-white),
'expanded-cell-background-color': var(--el-color-white),
'bg-color': var(--el-color-white),
'tr-bg-color': var(--el-color-white),
'expanded-cell-bg-color': var(--el-color-white),
),
$table
);
@ -658,14 +658,14 @@ $pagination: () !default;
$pagination: map.merge(
(
'font-size': 13px,
'background-color': var(--el-color-white),
'font-color': var(--el-text-color-primary),
'bg-color': var(--el-color-white),
'text-color': var(--el-text-color-primary),
'border-radius': 3px,
'button-color': var(--el-text-color-primary),
'button-width': 35.5px,
'button-height': 28px,
'button-disabled-color': var(--el-text-color-placeholder),
'button-disabled-background-color': var(--el-color-white),
'button-disabled-bg-color': var(--el-color-white),
'hover-color': var(--el-color-primary),
'height-extra-small': 22px,
'line-height-extra-small': var(--el-pagination-height-extra-small),
@ -678,7 +678,7 @@ $pagination: map.merge(
$popup: () !default;
$popup: map.merge(
(
'modal-background-color': var(--el-color-black),
'modal-bg-color': var(--el-color-black),
'modal-opacity': 0.5,
),
$popup
@ -689,13 +689,13 @@ $popup: map.merge(
$popover: () !default;
$popover: map.merge(
(
'background-color': var(--el-color-white),
'bg-color': var(--el-color-white),
'font-size': var(--el-font-size-base),
'border-color': var(--el-border-color-lighter),
'padding': 12px,
'padding-large': 18px 20px,
'title-font-size': 16px,
'title-font-color': var(--el-text-color-primary),
'title-text-color': var(--el-text-color-primary),
'border-radius': 4px,
),
$popover
@ -726,7 +726,7 @@ $tooltip: () !default;
$tooltip: map.merge(
(
'fill': var(--el-text-color-primary),
'color': var(--el-color-white),
'text-color': var(--el-color-white),
'font-size': 12px,
'border-color': var(--el-text-color-primary),
'arrow-size': 6px,
@ -774,8 +774,8 @@ $tag-height: map.merge(
$tree: () !default;
$tree: map.merge(
(
'node-hover-background-color': var(--el-background-color-base),
'font-color': var(--el-text-color-regular),
'node-hover-bg-color': var(--el-bg-color-base),
'text-color': var(--el-text-color-regular),
'expand-icon-color': var(--el-text-color-placeholder),
),
$tree
@ -798,7 +798,7 @@ $dropdown: map.merge(
$drawer: () !default;
$drawer: map.merge(
(
'background-color': var(--el-dialog-background-color, var(--el-color-white)),
'bg-color': var(--el-dialog-bg-color, var(--el-color-white)),
'padding-primary': var(--el-dialog-padding-primary, 20px),
),
$drawer
@ -809,7 +809,7 @@ $drawer: map.merge(
$badge: () !default;
$badge: map.merge(
(
'background-color': var(--el-color-danger),
'bg-color': var(--el-color-danger),
'radius': 10px,
'font-size': 12px,
'padding': 6px,
@ -826,7 +826,7 @@ $card: map.merge(
var(--el-border-color-light, map.get($border-color, 'lighter')),
'border-radius': 4px,
'padding': 20px,
'background-color': var(--el-color-white),
'bg-color': var(--el-color-white),
),
$card
);
@ -834,7 +834,7 @@ $card: map.merge(
$dark-card: () !default;
$dark-card: map.merge(
(
'background-color': var(--el-color-black),
'bg-color': var(--el-color-black),
),
$dark-card
);
@ -844,9 +844,9 @@ $dark-card: map.merge(
$slider: () !default;
$slider: map.merge(
(
'main-background-color': var(--el-color-primary),
'runway-background-color': var(--el-border-color-light),
'stop-background-color': var(--el-color-white),
'main-bg-color': var(--el-color-primary),
'runway-bg-color': var(--el-border-color-light),
'stop-bg-color': var(--el-color-white),
'disable-color': var(--el-text-color-placeholder),
'margin': 16px 0,
'border-radius': 3px,
@ -866,8 +866,8 @@ $menu: map.merge(
'active-color': var(--el-color-primary),
'text-color': var(--el-text-color-primary),
'hover-text-color': var(--el-text-color-primary),
'background-color': var(--el-color-white),
'hover-background-color': var(--el-color-primary-light-9),
'bg-color': var(--el-color-white),
'hover-bg-color': var(--el-color-primary-light-9),
'item-font-size': var(--el-font-size-base),
'item-hover-fill': var(--el-color-primary-light-9),
'border-color': #e6e6e6,
@ -893,16 +893,16 @@ $rate: map.merge(
$datepicker: () !default;
$datepicker: map.merge(
(
'font-color': var(--el-text-color-regular),
'off-font-color': var(--el-text-color-placeholder),
'header-font-color': var(--el-text-color-regular),
'text-color': var(--el-text-color-regular),
'off-text-color': var(--el-text-color-placeholder),
'header-text-color': var(--el-text-color-regular),
'icon-color': var(--el-text-color-primary),
'border-color': var(--el-disabled-border-base),
'inner-border-color': var(--el-border-color-light),
'inrange-background-color': var(--el-border-color-extra-light),
'inrange-hover-background-color': var(--el-border-color-extra-light),
'inrange-bg-color': var(--el-border-color-extra-light),
'inrange-hover-bg-color': var(--el-border-color-extra-light),
'active-color': var(--el-color-primary),
'hover-font-color': var(--el-color-primary),
'hover-text-color': var(--el-color-primary),
),
$datepicker
);
@ -935,9 +935,9 @@ $scrollbar: () !default;
$scrollbar: map.merge(
(
'opacity': 0.3,
'background-color': var(--el-text-color-secondary),
'bg-color': var(--el-text-color-secondary),
'hover-opacity': 0.5,
'hover-background-color': var(--el-text-color-secondary),
'hover-bg-color': var(--el-text-color-secondary),
),
$scrollbar
);
@ -967,12 +967,12 @@ $collapse: map.merge(
(
'border-color': var(--el-border-color-lighter),
'header-height': 48px,
'header-background-color': var(--el-color-white),
'header-font-color': var(--el-text-color-primary),
'header-bg-color': var(--el-color-white),
'header-text-color': var(--el-text-color-primary),
'header-font-size': 13px,
'content-background-color': var(--el-color-white),
'content-bg-color': var(--el-color-white),
'content-font-size': 13px,
'content-font-color': var(--el-text-color-primary),
'content-text-color': var(--el-text-color-primary),
),
$collapse
);
@ -986,7 +986,7 @@ $transfer: map.merge(
'border-radius': var(--el-border-radius-base),
'panel-width': 200px,
'panel-header-height': 40px,
'panel-header-background-color': var(--el-background-color-base),
'panel-header-bg-color': var(--el-bg-color-base),
'panel-footer-height': 40px,
'panel-body-height': 246px,
'item-height': 30px,
@ -1012,9 +1012,9 @@ $timeline: map.merge(
$backtop: () !default;
$backtop: map.merge(
(
'background-color': var(--el-color-white),
'font-color': var(--el-color-primary),
'hover-background-color': var(--el-border-color-extra-light),
'bg-color': var(--el-color-white),
'text-color': var(--el-color-primary),
'hover-bg-color': var(--el-border-color-extra-light),
),
$backtop
);
@ -1026,18 +1026,18 @@ $link: map.merge(
(
'font-size': var(--el-font-size-base),
'font-weight': var(--el-font-weight-primary),
'default-font-color': var(--el-text-color-regular),
'default-text-color': var(--el-text-color-regular),
'default-active-color': var(--el-color-primary),
'disabled-font-color': var(--el-text-color-placeholder),
'disabled-text-color': var(--el-text-color-placeholder),
),
$link
);
$link-font-color: () !default;
$link-text-color: () !default;
@each $type in $types {
$link-font-color: map.merge(
$link-font-color,
$link-text-color: map.merge(
$link-text-color,
(
$type: map.get($colors, $type, 'base'),
)
@ -1051,7 +1051,7 @@ $calendar: map.merge(
(
'border': var(--el-table-border, 1px solid var(--el-border-color-lighter)),
'header-border-bottom': var(--el-calendar-border),
'selected-background-color': #f2f8fe,
'selected-bg-color': #f2f8fe,
'cell-width': 85px,
),
$calendar
@ -1073,8 +1073,8 @@ $form: map.merge(
$avatar: () !default;
$avatar: map.merge(
(
'font-color': #fff,
'background-color': #c0c4cc,
'text-color': #fff,
'bg-color': #c0c4cc,
'text-font-size': 14px,
'icon-font-size': 18px,
'border-radius': var(--el-border-radius-base),

2
packages/theme-chalk/src/date-picker/date-picker.scss
View File

@ -72,7 +72,7 @@
color: var(--el-text-color-regular);
&:hover {
color: var(--el-datepicker-hover-font-color);
color: var(--el-datepicker-hover-text-color);
}
&.active {

22
packages/theme-chalk/src/date-picker/date-table.scss
View File

@ -9,10 +9,10 @@
.#{$namespace}-date-table__row {
&:hover {
.el-date-table-cell {
background-color: var(--el-datepicker-inrange-background-color);
background-color: var(--el-datepicker-inrange-bg-color);
}
td.available:hover {
color: var(--el-datepicker-font-color);
color: var(--el-datepicker-text-color);
}
td:first-child .el-date-table-cell {
margin-left: 5px;
@ -27,7 +27,7 @@
}
&.current .el-date-table-cell {
background-color: var(--el-datepicker-inrange-background-color);
background-color: var(--el-datepicker-inrange-bg-color);
}
}
}
@ -60,7 +60,7 @@
&.next-month,
&.prev-month {
color: var(--el-datepicker-off-font-color);
color: var(--el-datepicker-off-text-color);
}
&.today {
@ -76,13 +76,13 @@
}
&.available:hover {
color: var(--el-datepicker-hover-font-color);
color: var(--el-datepicker-hover-text-color);
}
&.in-range .el-date-table-cell {
background-color: var(--el-datepicker-inrange-background-color);
background-color: var(--el-datepicker-inrange-bg-color);
&:hover {
background-color: var(--el-datepicker-inrange-hover-background-color);
background-color: var(--el-datepicker-inrange-hover-bg-color);
}
}
@ -122,10 +122,10 @@
&.selected .el-date-table-cell {
margin-left: 5px;
margin-right: 5px;
background-color: var(--el-datepicker-inrange-background-color);
background-color: var(--el-datepicker-inrange-bg-color);
border-radius: 15px;
&:hover {
background-color: var(--el-datepicker-inrange-hover-background-color);
background-color: var(--el-datepicker-inrange-hover-bg-color);
}
}
@ -137,13 +137,13 @@
&.week {
font-size: 80%;
color: var(--el-datepicker-header-font-color);
color: var(--el-datepicker-header-text-color);
}
}
th {
padding: 5px;
color: var(--el-datepicker-header-font-color);
color: var(--el-datepicker-header-text-color);
font-weight: 400;
border-bottom: solid 1px var(--el-border-color-lighter);
}

8
packages/theme-chalk/src/date-picker/month-table.scss
View File

@ -41,18 +41,18 @@
height: 36px;
display: block;
line-height: 36px;
color: var(--el-datepicker-font-color);
color: var(--el-datepicker-text-color);
margin: 0 auto;
border-radius: 18px;
&:hover {
color: var(--el-datepicker-hover-font-color);
color: var(--el-datepicker-hover-text-color);
}
}
&.in-range div {
background-color: var(--el-datepicker-inrange-background-color);
background-color: var(--el-datepicker-inrange-bg-color);
&:hover {
background-color: var(--el-datepicker-inrange-hover-background-color);
background-color: var(--el-datepicker-inrange-hover-bg-color);
}
}
&.start-date div,

8
packages/theme-chalk/src/date-picker/picker-panel.scss
View File

@ -43,14 +43,14 @@
background-color: transparent;
line-height: 28px;
font-size: 14px;
color: var(--el-datepicker-font-color);
color: var(--el-datepicker-text-color);
padding-left: 12px;
text-align: left;
outline: none;
cursor: pointer;
&:hover {
color: var(--el-datepicker-hover-font-color);
color: var(--el-datepicker-hover-text-color);
}
&.active {
@ -86,11 +86,11 @@
margin-top: 8px;
&:hover {
color: var(--el-datepicker-hover-font-color);
color: var(--el-datepicker-hover-text-color);
}
@include when(disabled) {
color: var(--el-font-color-disabled-base);
color: var(--el-text-color-disabled-base);
&:hover {
cursor: not-allowed;

6
packages/theme-chalk/src/date-picker/picker.scss
View File

@ -173,7 +173,7 @@
@include when(disabled) {
background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border');
color: map.get($input-disabled, 'color');
color: map.get($input-disabled, 'text-color');
cursor: not-allowed;
&:hover,
@ -183,7 +183,7 @@
input {
background-color: map.get($input-disabled, 'fill');
color: map.get($input-disabled, 'color');
color: map.get($input-disabled, 'text-color');
cursor: not-allowed;
&::placeholder {
color: map.get($input-disabled, 'placeholder-color');
@ -191,7 +191,7 @@
}
.#{$namespace}-range-separator {
color: map.get($input-disabled, 'color');
color: map.get($input-disabled, 'text-color');
}
}
}

6
packages/theme-chalk/src/date-picker/year-table.scss
View File

@ -23,7 +23,7 @@
}
&.disabled .cell {
background-color: var(--el-background-color-base);
background-color: var(--el-bg-color-base);
cursor: not-allowed;
color: var(--el-text-color-placeholder);
@ -37,11 +37,11 @@
height: 32px;
display: block;
line-height: 32px;
color: var(--el-datepicker-font-color);
color: var(--el-datepicker-text-color);
margin: 0 auto;
&:hover {
color: var(--el-datepicker-hover-font-color);
color: var(--el-datepicker-hover-text-color);
}
}

2
packages/theme-chalk/src/dialog.scss
View File

@ -11,7 +11,7 @@
position: relative;
margin: var(--el-dialog-margin-top, 15vh) auto 50px;
background: var(--el-dialog-background-color);
background: var(--el-dialog-bg-color);
border-radius: var(--el-border-radius-small);
box-shadow: var(--el-dialog-box-shadow);
box-sizing: border-box;

2
packages/theme-chalk/src/drawer.scss
View File

@ -11,7 +11,7 @@ $directions: rtl, ltr, ttb, btt;
@include b(drawer) {
position: absolute;
box-sizing: border-box;
background-color: var(--el-drawer-background-color);
background-color: var(--el-drawer-bg-color);
display: flex;
flex-direction: column;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),

2
packages/theme-chalk/src/dropdown.scss
View File

@ -148,7 +148,7 @@
@include when(disabled) {
cursor: not-allowed;
color: var(--el-font-color-disabled-base);
color: var(--el-text-color-disabled-base);
}
}

20
packages/theme-chalk/src/input.scss
View File

@ -24,11 +24,8 @@
width: 100%;
font-size: inherit;
font-family: inherit;
color: var(--el-input-font-color, map.get($input, 'font-color'));
background-color: var(
--el-input-background-color,
map.get($input, 'background-color')
);
color: var(--el-input-text-color, map.get($input, 'text-color'));
background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
background-image: none;
border: var(--el-input-border, map.get($input, 'border'));
border-radius: var(
@ -74,7 +71,7 @@
.#{$namespace}-textarea__inner {
background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border');
color: map.get($input-disabled, 'color');
color: map.get($input-disabled, 'text-color');
cursor: not-allowed;
&::placeholder {
@ -132,10 +129,7 @@
@include e(inner) {
-webkit-appearance: none;
background-color: var(
--el-input-background-color,
map.get($input, 'background-color')
);
background-color: var(--el-input-bg-color, map.get($input, 'bg-color'));
background-image: none;
border-radius: var(
--el-input-border-radius,
@ -143,7 +137,7 @@
);
border: var(--el-input-border, map.get($input, 'border'));
box-sizing: border-box;
color: var(--el-input-font-color, map.get($input, 'font-color'));
color: var(--el-input-text-color, map.get($input, 'text-color'));
display: inline-block;
font-size: inherit;
height: map.get($input-height, 'default');
@ -238,7 +232,7 @@
.#{$namespace}-input__inner {
background-color: map.get($input-disabled, 'fill');
border-color: map.get($input-disabled, 'border');
color: map.get($input-disabled, 'color');
color: map.get($input-disabled, 'text-color');
cursor: not-allowed;
&::placeholder {
@ -307,7 +301,7 @@
}
@include e((append, prepend)) {
background-color: var(--el-background-color-base);
background-color: var(--el-bg-color-base);
color: var(--el-color-info);
vertical-align: middle;
display: table-cell;

16
packages/theme-chalk/src/link.scss
View File

@ -45,7 +45,7 @@
}
&.#{$namespace}-link--default {
color: var(--el-link-default-font-color);
color: var(--el-link-default-text-color);
&:hover {
color: var(--el-link-default-active-color);
@ -56,29 +56,29 @@
}
@include when(disabled) {
color: var(--el-link-disabled-font-color);
color: var(--el-link-disabled-text-color);
}
}
@each $type in $types {
&.#{$namespace}-link--#{$type} {
--el-link-font-color: var(--el-color-#{$type});
color: var(--el-link-font-color);
--el-link-text-color: var(--el-color-#{$type});
color: var(--el-link-text-color);
&:hover {
color: mix(map.get($link-font-color, $type), $color-white, 80%);
color: mix(map.get($link-text-color, $type), $color-white, 80%);
}
&:after {
border-color: var(--el-link-font-color);
border-color: var(--el-link-text-color);
}
@include when(disabled) {
color: mix(map.get($link-font-color, $type), $color-white, 50%);
color: mix(map.get($link-text-color, $type), $color-white, 50%);
}
@include when(underline) {
&:hover:after {
border-color: var(--el-link-font-color);
border-color: var(--el-link-text-color);
}
}
}

10
packages/theme-chalk/src/menu.scss
View File

@ -35,7 +35,7 @@
}
&:hover {
background-color: var(--el-menu-hover-background-color);
background-color: var(--el-menu-hover-bg-color);
}
@include when(disabled) {
@ -53,7 +53,7 @@
position: relative;
margin: 0;
padding-left: 0;
background-color: var(--el-menu-background-color);
background-color: var(--el-menu-bg-color);
box-sizing: border-box;
@include m(horizontal) {
@ -122,7 +122,7 @@
& .#{$namespace}-menu {
& .#{$namespace}-menu-item,
& .#{$namespace}-sub-menu__title {
background-color: var(--el-menu-background-color);
background-color: var(--el-menu-bg-color);
display: flex;
align-items: center;
height: 36px;
@ -139,7 +139,7 @@
& .#{$namespace}-menu-item:not(.is-disabled):focus {
outline: none;
color: var(--el-menu-hover-text-color);
background-color: var(--el-menu-hover-background-color);
background-color: var(--el-menu-hover-bg-color);
}
& > .#{$namespace}-menu-item.is-active {
border-bottom: 2px solid var(--el-menu-active-color);
@ -241,7 +241,7 @@
@include menu-item;
&:hover {
background-color: var(--el-menu-hover-background-color);
background-color: var(--el-menu-hover-bg-color);
}
}
& .#{$namespace}-menu {

14
packages/theme-chalk/src/message.scss
View File

@ -19,9 +19,9 @@
left: 50%;
top: 20px;
transform: translateX(-50%);
background-color: var(--el-message-background-color);
background-color: var(--el-message-bg-color);
transition: opacity 0.3s, transform 0.4s, top 0.4s;
background-color: var(--el-message-background-color);
background-color: var(--el-message-bg-color);
transition: opacity var(--el-transition-duration), transform 0.4s, top 0.4s;
padding: var(--el-message-padding);
display: flex;
@ -43,7 +43,7 @@
@include m(info) {
.#{$namespace}-message__content {
color: var(--el-message-info-font-color);
color: var(--el-message-info-text-color);
}
}
@ -52,10 +52,10 @@
background-color: map.get($colors, $type, 'light-9');
border-color: map.get($colors, $type, 'light-8');
--el-message-font-color: var(--el-color-#{$type});
--el-message-text-color: var(--el-color-#{$type});
.#{$namespace}-message__content {
color: var(--el-message-font-color);
color: var(--el-message-text-color);
}
}
}
@ -98,8 +98,8 @@
@each $type in (success, info, warning, error) {
& .#{$namespace}-message-icon--#{$type} {
--el-message-font-color: var(--el-color-#{$type});
color: var(--el-message-font-color);
--el-message-text-color: var(--el-color-#{$type});
color: var(--el-message-text-color);
}
}
}

2
packages/theme-chalk/src/option-group.scss
View File

@ -44,7 +44,7 @@
@include e(title) {
padding-left: $gap;
font-size: map.get($select-group, 'font-size');
color: map.get($select-group, 'color');
color: map.get($select-group, 'text-color');
line-height: map.get($select-group, 'height');
}

8
packages/theme-chalk/src/option-item.scss
View File

@ -13,7 +13,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: map.get($select-option, 'color');
color: map.get($select-option, 'text-color');
height: map.get($select-option, 'height');
line-height: map.get($select-option, 'height');
box-sizing: border-box;
@ -33,7 +33,7 @@
font-weight: 700;
&:not(.is-multiple) {
color: map.get($select-option, 'selected-font-color');
color: map.get($select-option, 'selected-text-color');
}
}
@ -49,8 +49,8 @@
@include when(multiple) {
.el-select-dropdown__option-item {
&.is-selected {
color: map.get($select-option, 'selected-font-color');
background-color: map.get($select-dropdown, 'background');
color: map.get($select-option, 'selected-text-color');
background-color: map.get($select-dropdown, 'bg-color');
& .el-icon {
position: absolute;

4
packages/theme-chalk/src/option.scss
View File

@ -12,7 +12,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: map.get($select-option, 'color');
color: map.get($select-option, 'text-color');
height: map.get($select-option, 'height');
line-height: map.get($select-option, 'height');
box-sizing: border-box;
@ -33,7 +33,7 @@
}
&.selected {
color: map.get($select-option, 'selected-font-color');
color: map.get($select-option, 'selected-text-color');
font-weight: bold;
}
}

8
packages/theme-chalk/src/pagination.scss
View File

@ -10,7 +10,7 @@
white-space: nowrap;
padding: 2px 5px;
color: var(--el-pagination-font-color);
color: var(--el-pagination-text-color);
font-weight: bold;
@include utils-clearfix;
@ -62,7 +62,7 @@
&:disabled {
color: var(--el-pagination-button-disabled-color);
background-color: var(--el-pagination-button-disabled-background-color);
background-color: var(--el-pagination-button-disabled-bg-color);
cursor: not-allowed;
}
}
@ -71,7 +71,7 @@
.btn-next {
background: center center no-repeat;
background-size: 16px;
background-color: var(--el-pagination-background-color);
background-color: var(--el-pagination-bg-color);
cursor: pointer;
margin: 0;
color: var(--el-pagination-button-color);
@ -267,7 +267,7 @@
li {
padding: 0 4px;
background: var(--el-pagination-background-color);
background: var(--el-pagination-bg-color);
vertical-align: top;
display: inline-block;
font-size: var(--el-pagination-font-size);

4
packages/theme-chalk/src/popover.scss
View File

@ -6,7 +6,7 @@
@include set-component-css-var('popover', $popover);
&.#{$namespace}-popper {
background: var(--el-popover-background-color);
background: var(--el-popover-bg-color);
min-width: 150px;
border-radius: var(--el-popover-border-radius);
border: 1px solid var(--el-popover-border-color);
@ -24,7 +24,7 @@
}
@include e(title) {
color: var(--el-popover-title-font-color);
color: var(--el-popover-title-text-color);
font-size: var(--el-popover-title-font-size);
line-height: 1;
margin-bottom: 12px;

19
packages/theme-chalk/src/radio-button.scss
View File

@ -20,14 +20,11 @@
line-height: 1;
white-space: nowrap;
vertical-align: middle;
background: var(
--el-button-background-color,
map.get($button, 'background-color')
);
background: var(--el-button-bg-color, map.get($button, 'bg-color'));
border: $border-base;
font-weight: var(--el-button-font-weight, map.get($button, 'font-weight'));
border-left: 0;
color: var(--el-button-font-color, map.get($button, 'font-color'));
color: var(--el-button-text-color, map.get($button, 'text-color'));
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
@ -76,12 +73,12 @@
&:checked {
& + .#{$namespace}-radio-button__inner {
color: var(
--el-radio-button-checked-font-color,
map.get($radio-button, 'checked-font-color')
--el-radio-button-checked-text-color,
map.get($radio-button, 'checked-text-color')
);
background-color: var(
--el-radio-button-checked-background-color,
map.get($radio-button, 'checked-background-color')
--el-radio-button-checked-bg-color,
map.get($radio-button, 'checked-bg-color')
);
border-color: var(
--el-radio-button-checked-border-color,
@ -104,8 +101,8 @@
cursor: not-allowed;
background-image: none;
background-color: var(
--el-button-disabled-background-color,
map.get($button, 'disabled-background-color')
--el-button-disabled-bg-color,
map.get($button, 'disabled-bg-color')
);
border-color: var(
--el-button-disabled-border-color,

6
packages/theme-chalk/src/radio.scss
View File

@ -11,7 +11,7 @@
}
@include b(radio) {
color: var(--el-radio-font-color);
color: var(--el-radio-text-color);
font-weight: var(--el-radio-font-weight);
position: relative;
cursor: pointer;
@ -121,7 +121,7 @@
}
& + .#{$namespace}-radio__label {
color: map.get($radio-checked, 'font-color');
color: map.get($radio-checked, 'text-color');
}
}
@ -136,7 +136,7 @@
border-radius: var(--el-radio-input-border-radius);
width: var(--el-radio-input-width);
height: var(--el-radio-input-height);
background-color: var(--el-radio-input-background-color);
background-color: var(--el-radio-input-bg-color);
position: relative;
cursor: pointer;
display: inline-block;

8
packages/theme-chalk/src/scrollbar.scss
View File

@ -33,16 +33,16 @@
cursor: pointer;
border-radius: inherit;
background-color: var(
--el-scrollbar-background-color,
map.get($scrollbar, 'background-color')
--el-scrollbar-bg-color,
map.get($scrollbar, 'bg-color')
);
transition: var(--el-transition-duration) background-color;
opacity: var(--el-scrollbar-opacity, map.get($scrollbar, 'opacity'));
&:hover {
background-color: var(
--el-scrollbar-hover-background-color,
map.get($scrollbar, 'hover-background-color')
--el-scrollbar-hover-bg-color,
map.get($scrollbar, 'hover-bg-color')
);
opacity: var(
--el-scrollbar-hover-opacity,

4
packages/theme-chalk/src/select-dropdown.scss
View File

@ -10,8 +10,8 @@
@include when(multiple) {
& .#{$namespace}-select-dropdown__item.selected {
color: map.get($select-option, 'selected-font-color');
background-color: map.get($select-dropdown, 'background');
color: map.get($select-option, 'selected-text-color');
background-color: map.get($select-dropdown, 'bg-color');
&.hover {
background-color: map.get($select-option, 'hover-background');

6
packages/theme-chalk/src/select-v2.scss
View File

@ -48,7 +48,7 @@ $input-inline-start: 15px !default;
@include when(disabled) {
cursor: not-allowed;
background-color: var(--el-background-color-base);
background-color: var(--el-bg-color-base);
color: var(--el-text-color-placeholder);
border-color: var(--el-select-disabled-border);
@ -116,7 +116,7 @@ $input-inline-start: 15px !default;
@include e(popper) {
@include picker-popper(
map.get($select-dropdown, 'background'),
map.get($select-dropdown, 'bg-color'),
map.get($select-dropdown, 'border'),
map.get($select-dropdown, 'shadow')
);
@ -315,7 +315,7 @@ $input-inline-start: 15px !default;
margin-inline-start: $input-inline-start;
width: calc(100% - 52px);
@include utils-ellipsis;
color: var(--el-input-font-color, map.get($input, 'font-color'));
color: var(--el-input-text-color, map.get($input, 'text-color'));
font-size: inherit;
@include when(transparent) {
color: var(--el-text-color-placeholder);

2
packages/theme-chalk/src/select.scss
View File

@ -17,7 +17,7 @@
@include e(popper) {
@include picker-popper(
map.get($select-dropdown, 'background'),
map.get($select-dropdown, 'bg-color'),
map.get($select-dropdown, 'border'),
map.get($select-dropdown, 'shadow')
);

8
packages/theme-chalk/src/slider.scss
View File

@ -16,7 +16,7 @@
width: 100%;
height: var(--el-slider-height);
margin: var(--el-slider-margin);
background-color: var(--el-slider-runway-background-color);
background-color: var(--el-slider-runway-bg-color);
border-radius: var(--el-slider-border-radius);
position: relative;
cursor: pointer;
@ -88,7 +88,7 @@
@include e(bar) {
height: var(--el-slider-height);
background-color: var(--el-slider-main-background-color);
background-color: var(--el-slider-main-bg-color);
border-top-left-radius: var(--el-slider-border-radius);
border-bottom-left-radius: var(--el-slider-border-radius);
position: absolute;
@ -123,7 +123,7 @@
width: var(--el-slider-button-size);
height: var(--el-slider-button-size);
vertical-align: middle;
border: solid 2px var(--el-slider-main-background-color);
border: solid 2px var(--el-slider-main-bg-color);
background-color: var(--el-color-white);
border-radius: 50%;
box-sizing: border-box;
@ -151,7 +151,7 @@
height: var(--el-slider-height);
width: var(--el-slider-height);
border-radius: var(--el-border-radius-circle);
background-color: var(--el-slider-stop-background-color);
background-color: var(--el-slider-stop-bg-color);
transform: translateX(-50%);
}

32
packages/theme-chalk/src/table.scss
View File

@ -13,9 +13,9 @@
height: fit-content;
width: 100%;
max-width: 100%;
background-color: var(--el-table-background-color);
background-color: var(--el-table-bg-color);
font-size: 14px;
color: var(--el-table-font-color);
color: var(--el-table-text-color);
// when data is empty
@include e(empty-block) {
@ -61,7 +61,7 @@
}
@include e(expanded-cell) {
background-color: var(--el-table-expanded-cell-background-color);
background-color: var(--el-table-expanded-cell-bg-color);
// increase the weight purely
&[class*='cell'] {
@ -105,12 +105,12 @@
}
thead {
color: var(--el-table-header-font-color);
color: var(--el-table-header-text-color);
font-weight: 500;
&.is-group {
th.#{$namespace}-table__cell {
background: var(--el-background-color-base);
background: var(--el-bg-color-base);
}
}
}
@ -167,7 +167,7 @@
}
tr {
background-color: var(--el-table-tr-background-color);
background-color: var(--el-table-tr-bg-color);
input[type='checkbox'] {
margin: 0;
@ -186,7 +186,7 @@
th.#{$namespace}-table__cell {
overflow: hidden;
user-select: none;
background-color: var(--el-table-header-background-color);
background-color: var(--el-table-header-bg-color);
> .cell {
display: inline-block;
@ -324,7 +324,7 @@
position: absolute;
top: -1px;
right: 0;
background-color: var(--el-table-header-background-color);
background-color: var(--el-table-header-bg-color);
border-bottom: var(--el-table-border);
}
@ -356,8 +356,8 @@
& tbody td.#{$namespace}-table__cell {
border-top: var(--el-table-border);
background-color: var(--el-table-row-hover-background-color);
color: var(--el-table-font-color);
background-color: var(--el-table-row-hover-bg-color);
color: var(--el-table-text-color);
}
}
@ -389,8 +389,8 @@
overflow: hidden;
& tbody td.#{$namespace}-table__cell {
background-color: var(--el-table-row-hover-background-color);
color: var(--el-table-font-color);
background-color: var(--el-table-row-hover-bg-color);
color: var(--el-table-text-color);
}
}
@ -484,7 +484,7 @@
}
&.current-row td.#{$namespace}-table__cell {
background-color: var(--el-table-current-row-background-color);
background-color: var(--el-table-current-row-bg-color);
}
}
}
@ -497,14 +497,14 @@
&,
&.current-row {
> td.#{$namespace}-table__cell {
background-color: var(--el-table-row-hover-background-color);
background-color: var(--el-table-row-hover-bg-color);
}
}
}
}
tr.current-row > td.#{$namespace}-table__cell {
background-color: var(--el-table-current-row-background-color);
background-color: var(--el-table-current-row-bg-color);
}
}
@ -538,7 +538,7 @@
@include m(enable-row-hover) {
.#{$namespace}-table__body tr:hover > td.#{$namespace}-table__cell {
background-color: var(--el-table-row-hover-background-color);
background-color: var(--el-table-row-hover-bg-color);
}
}

20
packages/theme-chalk/src/tag.scss
View File

@ -11,10 +11,10 @@
@mixin genTheme(
$backgroundColorWeight,
$borderColorWeight,
$fontColorWeight,
$textColorWeight,
$hoverColorWeight
) {
--el-tag-background-color: #{mix(
--el-tag-bg-color: #{mix(
map.get($tag-color, 'primary'),
$color-white,
$backgroundColorWeight
@ -24,10 +24,10 @@
$color-white,
$borderColorWeight
)};
--el-tag-font-color: #{mix(
--el-tag-text-color: #{mix(
map.get($tag-color, 'primary'),
$color-white,
$fontColorWeight
$textColorWeight
)};
--el-tag-hover-color: #{mix(
map.get($tag-color, 'primary'),
@ -35,16 +35,16 @@
$hoverColorWeight
)};
background-color: var(--el-tag-background-color);
background-color: var(--el-tag-bg-color);
border-color: var(--el-tag-border-color);
color: var(--el-tag-font-color);
color: var(--el-tag-text-color);
@include when(hit) {
border-color: map.get($tag-color, 'primary');
}
.#{$namespace}-tag__close {
color: var(--el-tag-font-color);
color: var(--el-tag-text-color);
&:hover {
color: var(--el-color-white);
background-color: var(--el-tag-hover-color);
@ -53,7 +53,7 @@
@each $type in $types {
&.#{$namespace}-tag--#{$type} {
--el-tag-background-color: #{mix(
--el-tag-bg-color: #{mix(
map.get($tag-color, $type),
$color-white,
$backgroundColorWeight
@ -63,10 +63,10 @@
$color-white,
$borderColorWeight
)};
--el-tag-font-color: #{mix(
--el-tag-text-color: #{mix(
map.get($tag-color, $type),
$color-white,
$fontColorWeight
$textColorWeight
)};
--el-tag-hover-color: #{mix(
map.get($tag-color, $type),

2
packages/theme-chalk/src/transfer.scss
View File

@ -140,7 +140,7 @@
.#{$namespace}-transfer-panel__header {
height: var(--el-transfer-panel-header-height);
line-height: var(--el-transfer-panel-header-height);
background: var(--el-transfer-panel-header-background-color);
background: var(--el-transfer-panel-header-bg-color);
margin: 0;
padding-left: 15px;
border-bottom: 1px solid var(--el-transfer-border-color);

6
packages/theme-chalk/src/tree.scss
View File

@ -11,7 +11,7 @@
position: relative;
cursor: default;
background: var(--el-color-white);
color: var(--el-tree-font-color);
color: var(--el-tree-text-color);
@include e(empty-block) {
position: relative;
@ -45,7 +45,7 @@
&:focus {
/* focus */
> .#{$namespace}-tree-node__content {
background-color: var(--el-tree-node-hover-background-color);
background-color: var(--el-tree-node-hover-bg-color);
}
}
@ -69,7 +69,7 @@
margin-right: 8px;
}
&:hover {
background-color: var(--el-tree-node-hover-background-color);
background-color: var(--el-tree-node-hover-bg-color);
}
.#{$namespace}-tree.is-dragging & {

6
packages/theme-chalk/src/var.scss
View File

@ -35,7 +35,7 @@
}
// Background
--el-background-color-base: #{$background-color-base};
--el-bg-color-base: #{$background-color-base};
// Border
--el-border-width-base: #{$border-width-base};
@ -68,7 +68,7 @@
--el-font-weight-primary: 500;
--el-font-line-height-primary: 24px;
--el-font-color-disabled-base: #bbb;
--el-text-color-disabled-base: #bbb;
// z-index
--el-index-normal: 1;
@ -76,7 +76,7 @@
--el-index-popper: 2000;
// Disable base
--el-disabled-fill-base: var(--el-background-color-base);
--el-disabled-fill-base: var(--el-bg-color-base);
--el-disabled-color-base: var(--el-text-color-placeholder);
--el-disabled-border-base: var(--el-border-color-light);