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

refactor(descriptions): migrate css var (#2643)

Browse Source
This commit is contained in:
云游君 2021-07-23 23:13:31 +08:00 committed by GitHub
parent 0154b542e5
commit 741fd86f1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -669,10 +669,8 @@ $--empty-bottom-margin-top: 20px !default;
/* Descriptions
-------------------------- */
$--descriptions-header-margin-bottom: 20px !default;
$--descriptions-title-font-size: 16px !default;
$--descriptions-table-border: 1px solid map.get($--border-color, 'lighter') !default;
$--descriptions-item-bordered-label-background: #fafafa !default;
// refactor with css3 var
// See packages/theme-chalk/src/descriptions.scss
/* Result
-------------------------- */

4
packages/theme-chalk/src/descriptions-item.scss
View File

@ -5,8 +5,8 @@
@include e(label) {
&.is-bordered-label {
font-weight: bold;
color: $--color-text-secondary;
background: $--descriptions-item-bordered-label-background;
color: var(--el-color-text-secondary);
background: var(--el-descriptions-item-bordered-label-background);
}
&:not(.is-bordered-label) {

15
packages/theme-chalk/src/descriptions.scss
View File

@ -2,19 +2,26 @@
@import 'common/var';
@import 'descriptions-item';
:root {
--el-descriptions-header-margin-bottom: 20px;
--el-descriptions-title-font-size: 16px;
--el-descriptions-table-border: 1px solid map.get($--border-color, 'lighter');
--el-descriptions-item-bordered-label-background: #fafafa;
}
@include b(descriptions) {
box-sizing: border-box;
font-size: var(--el-font-size-base);
color: $--color-text-primary;
color: var(--el-color-text-primary);
@include e(header) {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $--descriptions-header-margin-bottom;
margin-bottom: var(--el-descriptions-header-margin-bottom);
@include e(title) {
font-size: $--descriptions-title-font-size;
font-size: var(--el-descriptions-title-font-size);
font-weight: bold;
}
}
@ -52,7 +59,7 @@
.is-bordered {
th,
td {
border: $--descriptions-table-border;
border: var(--el-descriptions-table-border);
padding: 12px 10px;
}
}