mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-21 02:50:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate tree/popup/form/timeline-item css var (#2697)

Browse Source
This commit is contained in:
云游君 2021-07-27 09:02:46 +08:00 committed by GitHub
parent 62976c27e3
commit 3f4e0f6f33
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,11 @@
@import './var.scss';
@import '../mixins/mixins';
:root {
--el-popup-modal-background-color: var(--el-color-black);
--el-popup-modal-opacity: 0.5;
}
.v-modal-enter {
animation: v-modal-in var(--el-transition-duration-fast) ease;
}
@ -31,8 +36,8 @@
top: 0;
width: 100%;
height: 100%;
opacity: $--popup-modal-opacity;
background: $--popup-modal-background-color;
opacity: var(--el-popup-modal-opacity);
background: var(--el-popup-modal-background-color);
}
@include b(popup-parent) {

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

@ -453,10 +453,8 @@ $--button-active-shade-percent: 10% !default;
/* Popup
-------------------------- */
/// color||Color|0
$--popup-modal-background-color: $--color-black !default;
/// opacity||Other|1
$--popup-modal-opacity: 0.5 !default;
// refactor with css3 var
// See packages/theme-chalk/src/popup.scss
/* Popover
-------------------------- */
@ -475,12 +473,8 @@ $--popup-modal-opacity: 0.5 !default;
/* Tree
-------------------------- */
/// color||Color|0
$--tree-node-hover-background-color: $--background-color-base !default;
/// color||Color|0
$--tree-font-color: var(--el-text-color-regular) !default;
/// color||Color|0
$--tree-expand-icon-color: var(--el-text-color-placeholder) !default;
// refactor with css3 var
// See packages/theme-chalk/src/tree.scss
/* Dropdown
-------------------------- */
@ -600,9 +594,8 @@ $--loading-fullscreen-spinner-size: 50px !default;
/* Timeline
--------------------------*/
$--timeline-node-size-normal: 12px !default;
$--timeline-node-size-large: 14px !default;
$--timeline-node-color: map.get($--border-color, 'light') !default;
// refactor with css3 var
// See packages/theme-chalk/src/timeline-item.scss
/* Backtop
--------------------------*/
@ -628,8 +621,8 @@ $--backtop-hover-background-color: map.get(
/* Form
-------------------------- */
/// fontSize||Font|1
$--form-label-font-size: map.get($--font-size, 'base') !default;
// refactor with css3 var
// See packages/theme-chalk/src/form.scss
/* Avatar
--------------------------*/

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

@ -2,6 +2,10 @@
@import 'mixins/utils';
@import 'common/var';
:root {
--el-form-label-font-size: var(--el-font-size-base);
}
@include b(form) {
@include m(label-left) {
& .#{$namespace}-form-item__label {
@ -93,7 +97,7 @@
@include e(label) {
flex: 0 0 auto;
text-align: right;
font-size: $--form-label-font-size;
font-size: var(--el-form-label-font-size);
color: var(--el-text-color-regular);
line-height: 40px;
padding: 0 12px 0 0;

36
packages/theme-chalk/src/timeline-item.scss
View File

@ -1,6 +1,12 @@
@import 'mixins/mixins';
@import 'common/var';
:root {
--el-timeline-node-size-normal: 12px;
--el-timeline-node-size-large: 14px;
--el-timeline-node-color: var(--el-border-color-light);
}
@include b(timeline-item) {
position: relative;
padding-bottom: 20px;
@ -15,17 +21,17 @@
position: absolute;
left: 4px;
height: 100%;
border-left: 2px solid $--timeline-node-color;
border-left: 2px solid var(--el-timeline-node-color);
}
@include e(icon) {
color: $--color-white;
color: var(--el-color-white);
font-size: var(--el-font-size-small);
}
@include e(node) {
position: absolute;
background-color: $--timeline-node-color;
background-color: var(--el-timeline-node-color);
border-radius: 50%;
display: flex;
justify-content: center;
@ -33,29 +39,17 @@
@include m(normal) {
left: -1px;
width: $--timeline-node-size-normal;
height: $--timeline-node-size-normal;
width: var(--el-timeline-node-size-normal);
height: var(--el-timeline-node-size-normal);
}
@include m(large) {
left: -2px;
width: $--timeline-node-size-large;
height: $--timeline-node-size-large;
width: var(--el-timeline-node-size-large);
height: var(--el-timeline-node-size-large);
}
@include m(primary) {
background-color: var(--el-color-primary);
}
@include m(success) {
background-color: var(--el-color-success);
}
@include m(warning) {
background-color: var(--el-color-warning);
}
@include m(danger) {
background-color: var(--el-color-danger);
}
@include m(info) {
background-color: var(--el-color-info);
@each $type in (primary, success, warning, danger, info) {
background-color: var(--el-color-#{$type});
}
}

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

@ -3,11 +3,17 @@
@import 'common/transition';
@import 'checkbox';
:root {
--el-tree-node-hover-background-color: var(--el-background-color-base);
--el-tree-font-color: var(--el-text-color-regular);
--el-tree-expand-icon-color: var(--el-text-color-placeholder);
}
@include b(tree) {
position: relative;
cursor: default;
background: $--color-white;
color: $--tree-font-color;
background: var(--el-color-white);
color: var(--el-tree-font-color);
@include e(empty-block) {
position: relative;
@ -41,7 +47,7 @@
&:focus {
/* focus */
> .#{$namespace}-tree-node__content {
background-color: $--tree-node-hover-background-color;
background-color: var(--el-tree-node-hover-background-color);
}
}
@ -65,7 +71,7 @@
margin-right: 8px;
}
&:hover {
background-color: $--tree-node-hover-background-color;
background-color: var(--el-tree-node-hover-background-color);
}
.#{$namespace}-tree.is-dragging & {
@ -83,7 +89,7 @@
@include e(expand-icon) {
cursor: pointer;
color: $--tree-expand-icon-color;
color: var(--el-tree-expand-icon-color);
font-size: 12px;
transform: rotate(0deg);
@ -106,7 +112,7 @@
@include e(loading-icon) {
margin-right: 8px;
font-size: var(--el-font-size-base);
color: $--tree-expand-icon-color;
color: var(--el-tree-expand-icon-color);
}
& > .#{$namespace}-tree-node__children {
@ -122,5 +128,5 @@
.#{$namespace}-tree--highlight-current
.#{$namespace}-tree-node.is-current
> .#{$namespace}-tree-node__content {
background-color: mix($--color-white, $--color-primary, 92%);
background-color: var(--el-color-primary-light-9);
}