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(dialog): migrate css var (#2641)

Browse Source
This commit is contained in:
云游君 2021-07-23 23:12:45 +08:00 committed by GitHub
parent 7e3b9df2da
commit 4ae485123e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -185,11 +185,6 @@ $--font-size: map.merge(
$--font-size
);
/// fontWeight|1|Font Weight|1
$--font-weight-primary: 500 !default;
/// fontLineHeight|1|Line Height|2
$--font-line-height-primary: 24px !default;
/* Disable base
-------------------------- */
$--disabled-fill-base: $--background-color-base !default;
@ -207,8 +202,6 @@ $--disabled-border-base: map.get($--border-color, 'light') !default;
-------------------------- */
/// fontSize||Font|1
$--radio-font-size: map.get($--font-size, 'base') !default;
/// fontWeight||Font|1
$--radio-font-weight: $--font-weight-primary !default;
/// color||Color|0
$--radio-font-color: $--color-text-regular !default;
$--radio-input-height: 14px !default;
@ -431,16 +424,8 @@ $--button-active-shade-percent: 10% !default;
/* Dialog
-------------------------- */
$--dialog-background-color: $--color-white !default;
$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default;
/// fontSize||Font|1
$--dialog-title-font-size: map.get($--font-size, 'large') !default;
/// fontSize||Font|1
$--dialog-content-font-size: 14px !default;
/// fontLineHeight||LineHeight|2
$--dialog-font-line-height: $--font-line-height-primary !default;
/// padding||Spacing|3
$--dialog-padding-primary: 20px !default;
// refactor with css3 var
// See packages/theme-chalk/src/dialog.scss
/* Table
-------------------------- */

38
packages/theme-chalk/src/dialog.scss
View File

@ -4,12 +4,21 @@
@import 'common/popup';
@import './overlay.scss';
:root {
--el-dialog-background-color: var(--el-color-white);
--el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
--el-dialog-title-font-size: var(--el-font-size-large);
--el-dialog-content-font-size: 14px;
--el-dialog-font-line-height: var(--el-font-line-height-primary);
--el-dialog-padding-primary: 20px;
}
@include b(dialog) {
position: relative;
margin: 0 auto 50px;
background: $--dialog-background-color;
border-radius: $--border-radius-small;
box-shadow: $--dialog-box-shadow;
background: var(--el-dialog-background-color);
border-radius: var(--el-border-radius-small);
box-shadow: var(--el-dialog-box-shadow);
box-sizing: border-box;
width: 50%;
@ -32,14 +41,14 @@
}
@include e(header) {
padding: $--dialog-padding-primary;
padding: var(--el-dialog-padding-primary);
padding-bottom: 10px;
}
@include e(headerbtn) {
position: absolute;
top: $--dialog-padding-primary;
right: $--dialog-padding-primary;
top: var(--el-dialog-padding-primary);
right: var(--el-dialog-padding-primary);
padding: 0;
background: transparent;
border: none;
@ -60,20 +69,21 @@
}
@include e(title) {
line-height: $--dialog-font-line-height;
font-size: $--dialog-title-font-size;
color: $--color-text-primary;
line-height: var(--el-dialog-font-line-height);
font-size: var(--el-dialog-title-font-size);
color: var(--el-color-text-primary);
}
@include e(body) {
padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary;
color: $--color-text-regular;
font-size: $--dialog-content-font-size;
padding: calc(var(--el-dialog-padding-primary) + 10px)
var(--el-dialog-padding-primary);
color: var(--el-color-text-regular);
font-size: var(--el-dialog-content-font-size);
word-break: break-all;
}
@include e(footer) {
padding: $--dialog-padding-primary;
padding: var(--el-dialog-padding-primary);
padding-top: 10px;
text-align: right;
box-sizing: border-box;
@ -85,7 +95,7 @@
@include e(body) {
text-align: initial;
padding: 25px ($--dialog-padding-primary + 5px) 30px;
padding: 25px calc(var(--el-dialog-padding-primary) + 5px) 30px;
}
@include e(footer) {

12
packages/theme-chalk/src/drawer.scss
View File

@ -71,10 +71,18 @@
$directions: rtl, ltr, ttb, btt;
:root {
--el-drawer-background-color: var(
--el-dialog-background-color,
var(--el-color-white)
);
--el-drawer-padding-primary: var(--el-dialog-padding-primary, 20px);
}
@include b(drawer) {
position: absolute;
box-sizing: border-box;
background-color: $--dialog-background-color;
background-color: var(--el-drawer-background-color);
display: flex;
flex-direction: column;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
@ -96,7 +104,7 @@ $directions: rtl, ltr, ttb, btt;
color: rgb(114, 118, 123);
display: flex;
margin-bottom: 32px;
padding: $--dialog-padding-primary;
padding: var(--el-dialog-padding-primary);
padding-bottom: 0;
& > :first-child {
flex: 1;

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

@ -5,9 +5,13 @@
@import 'mixins/button';
@import 'common/var';
:root {
--el-radio-font-weight: var(--el-font-weight-primary);
}
@include b(radio) {
color: $--radio-font-color;
font-weight: $--radio-font-weight;
font-weight: var(--el-radio-font-weight);
line-height: 1;
position: relative;
cursor: pointer;

4
packages/theme-chalk/src/var.scss
View File

@ -62,8 +62,8 @@
@include set-css-var-type('font-size', $type, $--font-size);
}
--el-font-weight-primary: #{$--font-weight-primary};
--el-line-height-primary: #{$--font-line-height-primary};
--el-font-weight-primary: 500;
--el-font-line-height-primary: 24px;
--el-font-color-disabled-base: #bbb;
// z-index