mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-01-12 10:45:10 +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 $--datepicker
); );
$--date-editor: () !default;
$--date-editor: map.merge(
(
'width': 220px,
'monthrange-width': 300px,
'daterange-width': 350px,
'datetimerange-width': 400px,
),
$--date-editor
);
/* Loading /* Loading
--------------------------*/ --------------------------*/
// css3 var in packages/theme-chalk/src/loading.scss // 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"; @use "sass:map";
@import '../mixins/mixins'; @import '../mixins/mixins';
@import '../mixins/var';
@import '../common/var'; @import '../common/var';
@import '../common/transition'; @import '../common/transition';
@include b(picker) { @include b(picker) {
@include e(popper) { @include e(popper) {
@include picker-popper( @include picker-popper(
$--color-white, var(--el-color-white),
1px solid var(--el-datepicker-border-color), 1px solid var(--el-datepicker-border-color),
var(--el-box-shadow-light) var(--el-box-shadow-light)
); );
@ -15,33 +16,35 @@
} }
@include b(date-editor) { @include b(date-editor) {
@include set-component-css-var('date-editor', $--date-editor);
position: relative; position: relative;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
&.#{$namespace}-input, &.#{$namespace}-input,
&.#{$namespace}-input__inner { &.#{$namespace}-input__inner {
width: 220px; width: var(--el-date-editor-width);
} }
@include m((monthrange)) { @include m((monthrange)) {
&.#{$namespace}-input, &.#{$namespace}-input,
&.#{$namespace}-input__inner { &.#{$namespace}-input__inner {
width: 300px; width: var(--el-date-editor-monthrange-width);
} }
} }
@include m((daterange, timerange)) { @include m((daterange, timerange)) {
&.#{$namespace}-input, &.#{$namespace}-input,
&.#{$namespace}-input__inner { &.#{$namespace}-input__inner {
width: 350px; width: var(--el-date-editor-daterange-width);
} }
} }
@include m(datetimerange) { @include m(datetimerange) {
&.#{$namespace}-input, &.#{$namespace}-input,
&.#{$namespace}-input__inner { &.#{$namespace}-input__inner {
width: 400px; width: var(--el-date-editor-datetimerange-width);
} }
} }