fix(theme-chalk): [DatetimePicker] change inner to wrapper & use css var (#7703)

* fix(theme-chalk): [DatetimePicker] change inner to wrapper & use css var for width

* test: use wrapper to fix test

packages/components/date-picker/__tests__/date-picker.test.ts

@@ -975,7 +975,7 @@ describe('DateRangePicker', () => {
     inputs[0].trigger('focus')
     await nextTick()
 
-    const outterInput = wrapper.find('.el-range-editor.el-input__inner')
+    const outterInput = wrapper.find('.el-range-editor.el-input__wrapper')
     expect(outterInput.classes()).toContain(customClassName)
     expect(outterInput.attributes().style).toBeDefined()
     const panels = document.querySelectorAll('.el-date-range-picker__content')

packages/components/time-picker/src/common/picker.vue

@@ -73,7 +73,7 @@
         :class="[
           nsDate.b('editor'),
           nsDate.bm('editor', type),
-          nsInput.e('inner'),
+          nsInput.e('wrapper'),
           nsDate.is('disabled', pickerDisabled),
           nsDate.is('active', pickerVisible),
           nsRange.b('editor'),

packages/theme-chalk/src/date-picker/picker.scss

@@ -23,12 +23,7 @@
   display: inline-block;
   text-align: left;
 
-  &.#{$namespace}-input__inner {
-    border-radius: var(
-      #{getCssVarName('input-border-radius')},
-      #{getCssVar('border-radius-base')}
-    );
-
+  &.#{$namespace}-input__wrapper {
     @include inset-input-border(
       var(
         #{getCssVarName('input-border-color')},
@@ -42,33 +37,34 @@
   }
 
   &.#{$namespace}-input,
-  &.#{$namespace}-input__inner {
+  &.#{$namespace}-input__wrapper {
     width: getCssVar('date-editor-width');
+    height: getCssVar('component-size', '');
   }
 
   @include m((monthrange)) {
-    &.#{$namespace}-input,
-    &.#{$namespace}-input__inner {
-      width: getCssVar('date-editor-monthrange-width');
-    }
+    @include css-var-from-global(
+      'date-editor-width',
+      'date-editor-monthrange-width'
+    );
   }
 
   @include m((daterange, timerange)) {
-    &.#{$namespace}-input,
-    &.#{$namespace}-input__inner {
-      width: getCssVar('date-editor-daterange-width');
-    }
+    @include css-var-from-global(
+      'date-editor-width',
+      'date-editor-daterange-width'
+    );
   }
 
   @include m(datetimerange) {
-    &.#{$namespace}-input,
-    &.#{$namespace}-input__inner {
-      width: getCssVar('date-editor-datetimerange-width');
-    }
+    @include css-var-from-global(
+      'date-editor-width',
+      'date-editor-datetimerange-width'
+    );
   }
 
   @include m(dates) {
-    .#{$namespace}-input__inner {
+    .#{$namespace}-input__wrapper {
       text-overflow: ellipsis;
       white-space: nowrap;
     }
@@ -152,7 +148,7 @@
 }
 
 @include b(range-editor) {
-  &.#{$namespace}-input__inner {
+  &.#{$namespace}-input__wrapper {
     display: inline-flex;
     align-items: center;
     padding: 3px 10px;
@@ -171,10 +167,10 @@
 
   @each $size in (large, small) {
     @include m($size) {
-      line-height: map.get($input-height, $size);
+      line-height: getCssVar('component-size', $size);
 
-      &.#{$namespace}-input__inner {
-        height: map.get($input-height, $size);
+      &.#{$namespace}-input__wrapper {
+        height: getCssVar('component-size', $size);
       }
 
       .#{$namespace}-range-separator {