date picker 被 overlay 挡住的问题修复

scss/components/_list.scss

@@ -15,7 +15,7 @@
     &-actions {
         display: inline-block;
 
-        > * {
+        >* {
             margin-right: $Crud-toolbar-gap;
         }
     }
@@ -23,14 +23,14 @@
     &-header {
         padding: $List-toolbar-paddingY $List-toolbar-paddingX;
 
-        > * + .#{$ns}Button,
-        > * + .#{$ns}ButtonGroup,
-        > * + .#{$ns}ButtonToolbar {
+        >*+.#{$ns}Button,
+        >*+.#{$ns}ButtonGroup,
+        >*+.#{$ns}ButtonToolbar {
             margin-left: $Crud-toolbar-gap;
         }
     }
 
-    &-header + &-toolbar {
+    &-header+&-toolbar {
         padding-top: 0;
     }
 
@@ -85,7 +85,7 @@
 .#{$ns}ListItem {
     @include clearfix();
 
-    & + & {
+    &+& {
         border-top: $ListItem-borderWidth solid $ListItem-borderColor;
     }
 
@@ -134,6 +134,7 @@
         position: relative;
         flex-basis: 0;
         flex-grow: 1;
+        max-width: 100%;
     }
 
     &-fieldLabel {
@@ -146,7 +147,7 @@
         border-color: $ListItem-onChecked-borderColor;
         color: $ListItem-onChecked-color;
 
-        + .#{$ns}ListItem {
+        +.#{$ns}ListItem {
             border-color: $ListItem-onChecked-borderColor;
         }
 
@@ -161,7 +162,7 @@
         border-color: $ListItem-onModified-borderColor;
         color: $ListItem-onModified-color;
 
-        + .#{$ns}ListItem {
+        +.#{$ns}ListItem {
             border-color: $ListItem-onModified-borderColor;
         }
 
@@ -173,4 +174,4 @@
     &.is-dragging {
         opacity: $ListItem-onDragging-opacity;
     }
-}
+}

scss/components/_popover.scss

@@ -24,6 +24,11 @@
     border: $borderWidth solid $borderColor;
     border-radius: $borderRadius;
 
+    &>* {
+        position: relative;
+        z-index: 2;
+    }
+
     &-overlay {
         position: fixed !important;
         top: 0;
@@ -32,10 +37,5 @@
         z-index: 1;
         bottom: 0;
         background: transparent;
-
-        & + * {
-            position: relative;
-            z-index: 2;
-        }
     }
-}
+}

scss/components/form/_date.scss

@@ -33,7 +33,7 @@
     &.is-disabled {
         background: $gray200;
 
-        > &-input {
+        >&-input {
             color: $text--muted-color;
         }
     }
@@ -78,7 +78,7 @@
     }
 }
 
-.#{$ns}DateControl:not(.is-inline) > .#{$ns}DatePicker {
+.#{$ns}DateControl:not(.is-inline)>.#{$ns}DatePicker {
     display: flex;
 }
 
@@ -107,6 +107,7 @@
     .rdtPicker {
         margin-top: 0;
         padding: $gap-md;
+        background: transparent;
         border: none;
 
         .dow {
@@ -233,8 +234,7 @@
         font-size: $fontSizeSm;
     }
 
-    @include button-variant(
-        $Calendar-btn-bg,
+    @include button-variant($Calendar-btn-bg,
         $Calendar-btn-border,
         $Calendar-btn-color,
         $Calendar-btn-onHover-bg,
@@ -242,18 +242,16 @@
         $Calendar-btn-onHover-color,
         $Calendar-btn-onActive-bg,
         $Calendar-btn-onActive-border,
-        $Calendar-btn-onActive-color
-    );
+        $Calendar-btn-onActive-color);
 
     border-radius: $Calendar-btn-borderRadius;
 
-    & + .rdtBtn {
+    &+.rdtBtn {
         margin-left: $gap-xs;
     }
 
     &Cancel {
-        @include button-variant(
-            $Calendar-btnCancel-bg,
+        @include button-variant($Calendar-btnCancel-bg,
             $Calendar-btnCancel-border,
             $Calendar-btnCancel-color,
             $Calendar-btnCancel-onHover-bg,
@@ -261,8 +259,7 @@
             $Calendar-btnCancel-onHover-color,
             $Calendar-btnCancel-onActive-bg,
             $Calendar-btnCancel-onActive-border,
-            $Calendar-btnCancel-onActive-color
-        );
+            $Calendar-btnCancel-onActive-color);
     }
 }
 
@@ -308,4 +305,4 @@
             display: flex;
         }
     }
-}
+}