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

feat(card): add var background-color & prepare for dark mode (#2912)

Browse Source
This commit is contained in:
云游君 2021-08-19 10:30:51 +08:00 committed by GitHub
parent 77a4cbf1b8
commit 47516e75ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,10 +4,16 @@
@include b(card) {
@include set-component-css-var('card', $--card);
}
@include dark(card) {
@include set-component-css-var('card', $--dark-card);
}
@include b(card) {
border-radius: var(--el-card-border-radius);
border: 1px solid var(--el-card-border-color);
background-color: $--color-white;
background-color: var(--el-card-background-color);
overflow: hidden;
color: var(--el-text-color-primary);
transition: var(--el-transition-duration);

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

@ -844,10 +844,19 @@ $--card: map.merge(
var(--el-border-color-light, map.get($--border-color, 'lighter')),
'border-radius': 4px,
'padding': 20px,
'background-color': var(--el-color-white),
),
$--card
);
$--dark-card: () !default;
$--dark-card: map.merge(
(
'background-color': var(--el-color-black),
),
$--dark-card
);
/* Slider
--------------------------*/
// css3 var in packages/theme-chalk/src/slider.scss

9
packages/theme-chalk/src/mixins/mixins.scss
View File

@ -230,3 +230,12 @@
}
}
}
// dark
@mixin dark($block) {
.dark {
@include b($block) {
@content;
}
}
}