mirror of
https://github.com/element-plus/element-plus.git
synced 2024-12-21 02:50:11 +08:00
refactor: migrate tree/popup/form/timeline-item css var (#2697)
This commit is contained in:
云游君
GitHub
parent
62976c27e3
commit
3f4e0f6f33
@ -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) {
|
||||
|
||||
@ -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
|
||||
--------------------------*/
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user