mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-06 10:38:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(date-picker): custom date-editor width (#2836)

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

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

@ -917,6 +917,17 @@ $--datepicker: map.merge(
$--datepicker
);
$--date-editor: () !default;
$--date-editor: map.merge(
(
'width': 220px,
'monthrange-width': 300px,
'daterange-width': 350px,
'datetimerange-width': 400px,
),
$--date-editor
);
/* Loading
--------------------------*/
// css3 var in packages/theme-chalk/src/loading.scss

13
packages/theme-chalk/src/date-picker/picker.scss
View File

@ -1,13 +1,14 @@
@use "sass:map";
@import '../mixins/mixins';
@import '../mixins/var';
@import '../common/var';
@import '../common/transition';
@include b(picker) {
@include e(popper) {
@include picker-popper(
$--color-white,
var(--el-color-white),
1px solid var(--el-datepicker-border-color),
var(--el-box-shadow-light)
);
@ -15,33 +16,35 @@
}
@include b(date-editor) {
@include set-component-css-var('date-editor', $--date-editor);
position: relative;
display: inline-block;
text-align: left;
&.#{$namespace}-input,
&.#{$namespace}-input__inner {
width: 220px;
width: var(--el-date-editor-width);
}
@include m((monthrange)) {
&.#{$namespace}-input,
&.#{$namespace}-input__inner {
width: 300px;
width: var(--el-date-editor-monthrange-width);
}
}
@include m((daterange, timerange)) {
&.#{$namespace}-input,
&.#{$namespace}-input__inner {
width: 350px;
width: var(--el-date-editor-daterange-width);
}
}
@include m(datetimerange) {
&.#{$namespace}-input,
&.#{$namespace}-input__inner {
width: 400px;
width: var(--el-date-editor-datetimerange-width);
}
}