@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/datePicker/datePicker.scss

@@ -7,7 +7,6 @@ $module-list: #{$prefix}-scrolllist;
 .#{$module} {
     box-sizing: border-box;
     display: inline-block;
-    vertical-align: top;
 
     .#{$module-list}-body {
         .#{$module-list}-item {
@@ -77,6 +76,7 @@ $module-list: #{$prefix}-scrolllist;
                 &[x-open-type=year] {
                     min-height: $height-datepicker_month_grid_yearType_insetInput;
                 }
+
                 &[x-open-type=time] {
                     min-height: $height-datepicker_month_grid_timeType_insetInput;
                 }
@@ -101,7 +101,7 @@ $module-list: #{$prefix}-scrolllist;
 
         // when preset postion is left or right, and insetinput is false, let the month panel get the fixed height
         &[x-preset-position=left][x-insetinput=false],
-        &[x-preset-position=right][x-insetinput=false] { 
+        &[x-preset-position=right][x-insetinput=false] {
             .#{$module}-month {
                 height: $height-datepicker_month_max;
             }
@@ -169,11 +169,23 @@ $module-list: #{$prefix}-scrolllist;
     }
 
     // 年月选择器
-
     &-panel-yam {
         // add left or right preset panel to panel yam, max-width will be bigger
         max-width: $width-datepicker_monthPanel_max + $width-datepicker_presetPanel_left_and_right;
 
+        &[x-type="monthRange"] {
+            max-width: $width-datepicker_monthRangePanel_max + $width-datepicker_presetPanel_left_and_right;
+        }
+
+        .#{$module}-yearmonth-body {
+            display: flex;
+
+            .#{$prefix}-scrolllist:nth-child(2) {
+                border-left: 1px solid var(--semi-color-border);
+
+            }
+        }
+
         .#{$prefix}-scrolllist {
             box-shadow: none;
             height: $height-datepicker_panel_yam_scrolllist;
@@ -196,13 +208,14 @@ $module-list: #{$prefix}-scrolllist;
                 padding: 0;
                 overflow: hidden;
 
-                .#{$prefix}-scrolllist-item-wheel {
+                .#{$prefix}-scrolllist-item-wheel:not(#neverExistElement) {
+                    // equal to #{$prefix}-scrolllist-item-wheel, add [:not] selector only to increase selector priority
                     border: none;
                 }
 
-                .#{$prefix}-scrolllist-item {
-                    border: none;
-                }
+                // .#{$prefix}-scrolllist-item {
+                //     border: none;
+                // }
             }
         }
     }
@@ -221,6 +234,7 @@ $module-list: #{$prefix}-scrolllist;
             &:first-of-type {
                 margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
             }
+
             // confirm button
             &:nth-of-type(2) {
                 margin-right: $spacing-datepicker_footer_confirm_button-marginRight;
@@ -551,6 +565,7 @@ $module-list: #{$prefix}-scrolllist;
                 }
             }
         }
+
         // 以上是天状态
     }
 
@@ -649,11 +664,12 @@ $module-list: #{$prefix}-scrolllist;
             display: grid;
             align-content: flex-start;
             grid-gap: $spacing-datepicker_quick_control_item-margin;
-            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_left_and_right_two_col_button - $width-datepicker_presetPanel_scroll_bar * 0.5 , $width-datepicker_presetPanel_left_and_right_two_col_button));
+            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_left_and_right_two_col_button - $width-datepicker_presetPanel_scroll_bar * 0.5, $width-datepicker_presetPanel_left_and_right_two_col_button));
             padding: 0 $spacing-datepicker_quick_control_content-paddingX $spacing-datepicker_quick_control_content-paddingX;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_left_and_right_two_col_button;
+
                 &-ellipsis {
                     // ellipsis text content, $spacing-datepicker_quick_control_item-margin（default 8px）space left and right
                     width: $width-datepicker_presetPanel_left_and_right_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
@@ -673,6 +689,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_three_col_button;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_three_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     color: $color-datepicker_quick_button-text-default;
@@ -692,6 +709,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_five_col_button;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_five_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     color: $color-datepicker_quick_button-text-default;
@@ -710,6 +728,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button;
+
                 &-ellipsis {
                     max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     color: $color-datepicker_quick_button-text-default;
@@ -720,6 +739,7 @@ $module-list: #{$prefix}-scrolllist;
 
         &-month {
             max-width: $width-datepicker_monthPanel_max;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
@@ -735,12 +755,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-date {
             max-width: $width-datepicker_monthPanel_max;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -749,12 +771,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTime {
             max-width: $width-datepicker_monthPanel_max;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -763,12 +787,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateRange {
             max-width: $width-datepicker_monthPanel_max * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -777,12 +803,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTimeRange {
             max-width: $width-datepicker_monthPanel_max * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -825,13 +853,18 @@ $module-list: #{$prefix}-scrolllist;
             padding-bottom: $spacing-datepicker_insetInput_wrapper-paddingBottom;
 
             width: $width-datepicker_insetInput_date_type_wrapper;
+
             &[x-type=dateRange],
             &[x-type=dateTimeRange] {
                 width: $width-datepicker_insetInput_date_range_type_wrapper;
             }
+
             &[x-type=month] {
                 width: $width-datepicker_insetInput_month_type_wrapper;
             }
+            &[x-type=monthRange] {
+                width: $width-datepicker_insetInput_month_range_type_wrapper;
+            }
 
             .#{$prefix}-input-wrapper {
                 flex: 1;
@@ -859,6 +892,23 @@ $module-list: #{$prefix}-scrolllist;
             height: $height-datepicker_range_input-default;
             color: $color-datepicker_range_input-text-default;
             background-color: $color-datepicker_range_input-bg-default;
+            border: $width-datepicker_range_trigger-border solid $color-datepicker_range_trigger-border;
+
+            &:hover {
+                border-color: $color-datepicker_range_trigger-border-hover;
+            }
+
+            &:active {
+                border-color: $color-datepicker_range_trigger-border-active;
+            }
+
+            &:focus-within{
+                border-color: $color-datepicker_range_trigger-border-focus;
+            }
+
+            .#{$module}-monthRange-input {
+                background-color: transparent;
+            }
 
             &-wrapper {
                 box-sizing: border-box;
@@ -885,7 +935,7 @@ $module-list: #{$prefix}-scrolllist;
                     & ~ .#{$module}-range-input-clearbtn {
                         display: flex;
                     }
-    
+
                     & ~ .#{$module}-range-input-clearbtn ~ .#{$module}-range-input-suffix {
                         display: none;
                     }
@@ -910,7 +960,7 @@ $module-list: #{$prefix}-scrolllist;
 
                 &-start-with-prefix {
                     border-radius: 0;
-                }                
+                }
 
                 &-end {
                     border-radius: 0;
@@ -946,13 +996,16 @@ $module-list: #{$prefix}-scrolllist;
             &:hover {
                 .#{$module}-range-input-clearbtn {
                     display: flex;
-                    color: $color-datepicker_range_input_clearbtn-icon-hover;
                     cursor: pointer;
                 }
 
                 .#{$module}-range-input-clearbtn ~ .#{$module}-range-input-suffix {
                     display: none;
                 }
+
+                .#{$module}-range-input-clearbtn:hover {
+                    color: $color-datepicker_range_input_clearbtn-icon-hover;
+                }
             }
 
             &-disabled {
@@ -965,7 +1018,7 @@ $module-list: #{$prefix}-scrolllist;
                         background-color: $color-datepicker_range_input_inputWrapper-bg-default;
                     }
                 }
-                
+
                 &:hover {
                     background-color: $color-datepicker_range_input_disabled-bg-hover;
                 }
@@ -983,8 +1036,8 @@ $module-list: #{$prefix}-scrolllist;
                 .#{$module}-range-input-wrapper {
                     &:hover {
                         background-color: $color-datepicker_range_input_warning-bg-hover;
-                    } 
-                    
+                    }
+
                     &-active {
                         border-color: $color-datepicker_range_input_warning-border-active;
                         background-color: $color-datepicker_range_input_warning-bg-active;
@@ -999,8 +1052,8 @@ $module-list: #{$prefix}-scrolllist;
                 .#{$module}-range-input-wrapper {
                     &:hover {
                         background-color: $color-datepicker_range_input_error-bg-hover;
-                    } 
-                    
+                    }
+
                     &-active {
                         border-color: $color-datepicker_range_input_error-border-active;
                         background-color: $color-datepicker_range_input_error-bg-active;
@@ -1022,6 +1075,7 @@ $module-list: #{$prefix}-scrolllist;
                 font-weight: $font-datepicker_range_input_prefix_suffix_clearbtn-fontWeight;
                 font-size: $font-datepicker_range_input_prefix_suffix_clearbtn-fontSize;
                 line-height: $font-datepicker_range_input_prefix_suffix_clearbtn-lineHeight;
+                font-family: $font-family-regular;
                 white-space: nowrap;
                 color: $color-datepicker_range_input-text-default;
             }
@@ -1034,7 +1088,7 @@ $module-list: #{$prefix}-scrolllist;
             &-suffix {
                 padding-left: $spacing-datepicker_range_input_suffix-paddingLeft;
                 padding-right: $spacing-datepicker_range_input_suffix-paddingRight;
-                
+
                 &-hidden {
                     display: none;
                 }
@@ -1054,7 +1108,7 @@ $module-list: #{$prefix}-scrolllist;
 .#{$module}-compact {
     @include font-size-small;
     line-height: $lineHeight-datepicker_compact;
-  
+
     .#{$module}-month-grid {
 
         &[x-type="dateTime"],
@@ -1064,7 +1118,7 @@ $module-list: #{$prefix}-scrolllist;
                 height: calc(100% - #{$height-datepicker_switch_compact});
             }
         }
-    
+
         &[x-type="dateRange"],
         &[x-type="dateTimeRange"] {
             .#{$module}-month-grid-left {
@@ -1084,7 +1138,7 @@ $module-list: #{$prefix}-scrolllist;
 
         // when preset postion is left or right, and insetinput is false, let the month panel get the fixed height
         &[x-preset-position=left][x-insetinput=false],
-        &[x-preset-position=right][x-insetinput=false] { 
+        &[x-preset-position=right][x-insetinput=false] {
 
             .#{$module}-month {
                 height: $height-datepicker_month_max_compact;
@@ -1097,6 +1151,15 @@ $module-list: #{$prefix}-scrolllist;
             padding: $spacing-datepicker_yam_panel_header_compact-padding;
         }
 
+        .#{$module}-yearmonth-body {
+            display: flex;
+
+            .#{$prefix}-scrolllist:nth-child(2){
+                border: 1px solid var(--semi-color-border);
+
+            }
+        }
+
         .#{$prefix}-scrolllist {
             @include font-size-small;
             line-height: $lineHeight-datepicker_compact;
@@ -1146,6 +1209,7 @@ $module-list: #{$prefix}-scrolllist;
                 &[x-open-type=year] {
                     min-height: $height-datepicker_tpk_compact;
                 }
+
                 &[x-open-type=time] {
                     min-height: $height-datepicker_tpk_compact;
                 }
@@ -1234,7 +1298,7 @@ $module-list: #{$prefix}-scrolllist;
     .#{$module}-day {
         width: $width-datepicker_day_compact;
         height: $width-datepicker_day_compact;
-  
+
         &-main {
             width: $width-datepicker_day_main_compact;
             height: $width-datepicker_day_main_compact;
@@ -1346,6 +1410,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_left_and_right_two_col_button;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_left_and_right_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1365,6 +1430,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1383,6 +1449,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_five_col_button_compact;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_five_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1401,6 +1468,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button_compact;
+
                 &-ellipsis {
                     max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1411,12 +1479,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-month {
             max-width: $width-datepicker_panel_compact;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content_compact + $height-datepicker_inset_input_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1425,12 +1495,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-date {
             max-width: $width-datepicker_panel_compact;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1439,12 +1511,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTime {
             max-width: $width-datepicker_panel_compact;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1453,12 +1527,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateRange {
             max-width: $width-datepicker_panel_compact * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1467,12 +1543,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTimeRange {
             max-width: $width-datepicker_panel_compact * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1493,6 +1571,7 @@ $module-list: #{$prefix}-scrolllist;
             padding-bottom: $spacing-datepicker_insetInput_wrapper_compact-paddingBottom;
 
             width: $width-datepicker_insetInput_date_type_wrapper_compact;
+
             &[x-type=dateRange],
             &[x-type=dateTimeRange] {
                 width: $width-datepicker_insetInput_date_range_type_wrapper_compact;
@@ -1502,6 +1581,7 @@ $module-list: #{$prefix}-scrolllist;
                     margin-top: $spacing-datepicker_insetInput_wrapper_compact-paddingY;
                 }
             }
+
             &[x-type=month] {
                 width: $width-datepicker_insetInput_month_type_wrapper_compact;
             }
@@ -1547,4 +1627,73 @@ $module-list: #{$prefix}-scrolllist;
     }
 }
 
+.#{$module}-borderless {
+
+    &:not(:focus-within):not(:hover){
+        background-color: transparent;
+        border-color: transparent;
+
+        .#{$prefix}-input-suffix, .#{$module}-range-input-suffix {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+
+    &.#{$module}-range-input-error {
+
+        .#{$module}-range-input-wrapper {
+            &-active {
+                border-color: transparent;
+            }
+        }
+        &:hover {
+            background-color: $color-datepicker_range_input_error-border-default;
+        }
+
+        &:focus-within {
+            background-color: $color-datepicker_range_input_error-border-default;
+        }
+    }
+    &.#{$module}-range-input-error:not(:focus-within){
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_error-border-active;
+    }
+    &.#{$module}-range-input-error:focus-within {
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_error-border-active;
+    }
+
+    // split style into not and normal to avoid style override
+    &.#{$module}-range-input-warning {
+
+        .#{$module}-range-input-wrapper {
+            &-active {
+                border-color: transparent;
+            }
+        }
+        &:hover {
+            background-color: $color-datepicker_range_input_warning-border-default;
+        }
+
+        &:focus-within {
+            background-color: $color-datepicker_range_input_warning-border-default;
+        }
+    }
+
+    &.#{$module}-range-input-warning:not(:focus-within){
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_warning-border-active;
+    }
+    &.#{$module}-range-input-warning:focus-within {
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_warning-border-active;
+    }
+
+}
+
+
 @import "./rtl.scss";