样式

scss/components/form/_date.scss

@@ -33,7 +33,7 @@
   &.is-disabled {
     background: $gray200;
 
-    >&-input {
+    > &-input {
       color: $text--muted-color;
     }
   }
@@ -42,6 +42,7 @@
     color: $DatePicker-placeholderColor;
     user-select: none;
     margin-right: $gap-base;
+    min-width: px2rem(50px);
     flex-basis: 0;
     flex-grow: 1;
   }
@@ -78,18 +79,19 @@
   }
 }
 
-.#{$ns}DateControl:not(.is-inline)>.#{$ns}DatePicker {
+.#{$ns}DateControl:not(.is-inline) > .#{$ns}DatePicker {
   display: flex;
 }
 
 .#{$ns}DatePicker-shortcuts {
   margin: 0;
   background: $Calendar-shortcuts-bg;
-  padding: ($Calendar-shortcuts-height - $Calendar-fontSize * $lineHeightBase) / 2 $gap-sm;
+  padding: ($Calendar-shortcuts-height - $Calendar-fontSize * $lineHeightBase) /
+    2 $gap-sm;
   list-style: none;
   width: px2rem(250px);
 
-  &+.rdt .rdtPicker {
+  & + .rdt .rdtPicker {
     padding-top: 0;
   }
 }
@@ -166,8 +168,6 @@
       background: $Calendar-cell-onActive-bg;
     }
 
-
-
     td.rdtDisabled,
     td.rdtDisabled:hover {
       background-color: $Calendar-cell-onDisabled-bg;
@@ -262,7 +262,8 @@
     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,
@@ -270,16 +271,18 @@
     $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,
@@ -287,7 +290,8 @@
       $Calendar-btnCancel-onHover-color,
       $Calendar-btnCancel-onActive-bg,
       $Calendar-btnCancel-onActive-border,
-      $Calendar-btnCancel-onActive-color);
+      $Calendar-btnCancel-onActive-color
+    );
   }
 }
 
@@ -347,13 +351,13 @@
   width: 100%;
   // padding: 0 10px;
 
-  >* {
+  > * {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
   }
 
-  .rdtSwitch+.rdtSwitch {
+  .rdtSwitch + .rdtSwitch {
     margin-left: $gap-xs;
   }
 }
@@ -363,7 +367,7 @@ td.rdtYear {
   width: px2rem(50px);
   height: px2rem(40px);
 
-  >span {
+  > span {
     height: px2rem(24px);
     display: block;
   }
@@ -372,7 +376,7 @@ td.rdtYear {
   &.rdtActive {
     background: transparent !important;
 
-    >span {
+    > span {
       background: $info;
       color: $white;
     }
@@ -381,9 +385,9 @@ td.rdtYear {
   &.rdtDisabled {
     background: transparent !important;
 
-    >span {
+    > span {
       background: #edf1f2;
       color: #999;
     }
   }
-}
+}