mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-24 11:05:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(cascader): migrate css var (#2578)

Browse Source
This commit is contained in:
云游君 2021-07-19 20:11:27 +08:00 committed by GitHub
parent e430bd3d49
commit 4ffb2d164c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,20 +6,20 @@
@include b(cascader-panel) {
display: flex;
border-radius: $--cascader-menu-radius;
font-size: $--cascader-menu-font-size;
border-radius: var(--el-cascader-menu-radius);
font-size: var(--el-cascader-menu-font-size);
@include when(bordered) {
border: $--cascader-menu-border;
border-radius: $--cascader-menu-radius;
border: var(--el-cascader-menu-border);
border-radius: var(--el-cascader-menu-radius);
}
}
@include b(cascader-menu) {
min-width: 180px;
box-sizing: border-box;
color: $--cascader-menu-font-color;
border-right: $--cascader-menu-border;
color: var(--el-cascader-menu-font-color);
border-right: var(--el-cascader-menu-border);
&:last-child {
border-right: none;
@ -60,7 +60,7 @@
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: $--cascader-color-empty;
color: var(--el-cascader-color-empty);
}
}
@ -74,13 +74,13 @@
outline: none;
&.is-selectable.in-active-path {
color: $--cascader-menu-font-color;
color: var(--el-cascader-menu-font-color);
}
&.in-active-path,
&.is-selectable.in-checked-path,
&.is-active {
color: $--cascader-menu-selected-font-color;
color: var(--el-cascader-menu-selected-font-color);
font-weight: bold;
}
@ -89,12 +89,12 @@
&:hover,
&:focus {
background: $--cascader-node-background-hover;
background: var(--el-cascader-node-background-hover);
}
}
@include when(disabled) {
color: $--cascader-node-color-disabled;
color: var(--el-cascader-node-color-disabled);
cursor: not-allowed;
}

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

@ -5,6 +5,21 @@
@import './input';
@import './popper';
@import './tag';
:root {
--el-cascader-menu-font-color: var(--el-color-text-regular);
--el-cascader-menu-selected-font-color: var(--el-color-primary);
--el-cascader-menu-fill: var(--el-fill-base);
--el-cascader-menu-font-size: var(--el-font-size-base);
--el-cascader-menu-radius: var(--el-border-radius-base);
--el-cascader-menu-border: solid 1px var(--el-border-color-light);
--el-cascader-menu-shadow: var(--el-box-shadow-light);
--el-cascader-node-background-hover: var(--el-background-color-base);
--el-cascader-node-color-disabled: var(--el-color-text-placeholder);
--el-cascader-color-empty: var(--el-color-text-placeholder);
--el-cascader-tag-background: #f0f2f5;
}
@import './cascader-panel';
@include b(cascader) {
@ -62,18 +77,18 @@
@include when(disabled) {
.#{$namespace}-cascader__label {
z-index: calc(var(--el-index-normal) + 1);
color: $--disabled-color-base;
color: var(--el-disabled-color-base);
}
}
@include e(dropdown) {
font-size: $--cascader-menu-font-size;
border-radius: $--cascader-menu-radius;
font-size: var(--el-cascader-menu-font-size);
border-radius: var(--el-cascader-menu-radius);
@include picker-popper(
$--cascader-menu-fill,
$--cascader-menu-border,
$--cascader-menu-shadow
var(--el-cascader-menu-fill),
var(--el-cascader-menu-border),
var(--el-cascader-menu-shadow)
);
}
@ -95,7 +110,7 @@
max-width: 100%;
margin: 2px 0 2px 6px;
text-overflow: ellipsis;
background: $--cascader-tag-background;
background: var(--el-cascader-tag-background);
&:not(.is-hit) {
border-color: transparent;
@ -109,18 +124,18 @@
.#{$namespace}-icon-close {
flex: none;
background-color: $--color-text-placeholder;
color: $--color-white;
background-color: var(--el-color-text-placeholder);
color: var(--el-color-white);
&:hover {
background-color: $--color-text-secondary;
background-color: var(--el-color-text-secondary);
}
}
}
}
@include e(suggestion-panel) {
border-radius: $--cascader-menu-radius;
border-radius: var(--el-cascader-menu-radius);
}
@include e(suggestion-list) {
@ -128,7 +143,7 @@
margin: 0;
padding: 6px 0;
font-size: var(--el-font-size-base);
color: $--cascader-menu-font-color;
color: var(--el-cascader-menu-font-color);
text-align: center;
}
@ -144,11 +159,11 @@
&:hover,
&:focus {
background: $--cascader-node-background-hover;
background: var(--el-cascader-node-background-hover);
}
&.is-checked {
color: $--cascader-menu-selected-font-color;
color: var(--el-cascader-menu-selected-font-color);
font-weight: bold;
}
@ -159,7 +174,7 @@
@include e(empty-text) {
margin: 10px 0;
color: $--cascader-color-empty;
color: var(--el-cascader-color-empty);
}
@include e(search-input) {
@ -168,13 +183,13 @@
min-width: 60px;
margin: 2px 0 2px 15px;
padding: 0;
color: $--cascader-menu-font-color;
color: var(--el-cascader-menu-font-color);
border: none;
outline: none;
box-sizing: border-box;
&::placeholder {
color: $--color-text-placeholder;
color: var(--el-color-text-placeholder);
}
}
}

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

@ -170,10 +170,6 @@ $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
--------------- */
$--svg-monochrome-grey: #dcdde0 !default;
/* Fill
-------------------------- */
$--fill-base: $--color-white !default;
/* Typography
-------------------------- */
$--font-path: 'fonts' !default;
@ -392,19 +388,8 @@ $--input-number-width: (
/* Cascader
-------------------------- */
/// color||Color|0
$--cascader-menu-font-color: $--color-text-regular !default;
/// color||Color|0
$--cascader-menu-selected-font-color: $--color-primary !default;
$--cascader-menu-fill: $--fill-base !default;
$--cascader-menu-font-size: map.get($--font-size, 'base') !default;
$--cascader-menu-radius: $--border-radius-base !default;
$--cascader-menu-border: solid 1px map.get($--border-color, 'light') !default;
$--cascader-menu-shadow: $--box-shadow-light !default;
$--cascader-node-background-hover: $--background-color-base !default;
$--cascader-node-color-disabled: $--color-text-placeholder !default;
$--cascader-color-empty: $--color-text-placeholder !default;
$--cascader-tag-background: #f0f2f5 !default;
// refactor with css3 var
// See packages/theme-chalk/src/cascader.scss
/* Button
-------------------------- */