📦 Reduce DatePicker css bundle size

ant-design · Feb 25, 2020 · 30a15d1 · 30a15d1
1 parent 1f75773
commit 30a15d1
Showing 1 changed file with 97 additions and 96 deletions.
diff --git a/components/date-picker/style/panel.less b/components/date-picker/style/panel.less
@@ -166,17 +166,6 @@
   }
 
   .picker-cell-inner(@cellClassName) {
-    &::before {
-      position: absolute;
-      top: 50%;
-      right: 0;
-      left: 0;
-      z-index: 1;
-      height: 24px;
-      transform: translateY(-50%);
-      content: '';
-    }
-
     // >>> Default
     .@{cellClassName} {
       position: relative;
@@ -212,6 +201,100 @@
       }
     }
 
+    // >>> Selected
+    &-in-view&-selected .@{cellClassName},
+    &-in-view&-range-start .@{cellClassName},
+    &-in-view&-range-end .@{cellClassName} {
+      color: @text-color-inverse;
+      background: @primary-color;
+    }
+
+    // range start border-radius
+    &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
+      border-radius: @border-radius-base 0 0 @border-radius-base;
+    }
+    // range end border-radius
+    &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
+      border-radius: 0 @border-radius-base @border-radius-base 0;
+    }
+
+    // DatePanel only
+    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName},
+    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName} {
+      &::after {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        z-index: -1;
+        background: @picker-date-hover-range-color;
+        content: '';
+      }
+    }
+    .@{picker-prefix-cls}-date-panel
+      &-in-view&-in-range&-range-hover-start
+      .@{cellClassName}::after {
+      right: -6px - @border-width-base;
+      left: 0;
+
+      .@{picker-prefix-cls}-panel-rtl & {
+        right: 0;
+        left: -6px - @border-width-base;
+      }
+    }
+    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
+      right: 0;
+      left: -6px - @border-width-base;
+
+      .@{picker-prefix-cls}-panel-rtl & {
+        right: -6px - @border-width-base;
+        left: 0;
+      }
+    }
+
+    // >>> Disabled
+    &-disabled {
+      pointer-events: none;
+
+      .@{cellClassName} {
+        color: @disabled-color;
+        background: transparent;
+      }
+
+      &::before {
+        background: @picker-basic-cell-disabled-bg;
+      }
+    }
+    &-disabled&-today .@{cellClassName}::before {
+      border-color: @disabled-color;
+    }
+  }
+
+  &-cell {
+    padding: 3px 0;
+    color: @disabled-color;
+    cursor: pointer;
+
+    // In view
+    &-in-view {
+      color: @text-color;
+    }
+
+    // Disabled
+    &-disabled {
+      cursor: not-allowed;
+    }
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      left: 0;
+      z-index: 1;
+      height: 24px;
+      transform: translateY(-50%);
+      content: '';
+    }
+
     // >>> In Range
     &-in-view&-in-range {
       position: relative;
@@ -221,14 +304,6 @@
       }
     }
 
-    // >>> Selected
-    &-in-view&-selected .@{cellClassName},
-    &-in-view&-range-start .@{cellClassName},
-    &-in-view&-range-end .@{cellClassName} {
-      color: @text-color-inverse;
-      background: @primary-color;
-    }
-
     &-in-view&-range-start:not(&-range-start-single),
     &-in-view&-range-end:not(&-range-end-single) {
       &::before {
@@ -294,48 +369,6 @@
       background: @picker-date-hover-range-color;
     }
 
-    // range start border-radius
-    &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
-      border-radius: @border-radius-base 0 0 @border-radius-base;
-    }
-    // range end border-radius
-    &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
-      border-radius: 0 @border-radius-base @border-radius-base 0;
-    }
-
-    // DatePanel only
-    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-start .@{cellClassName},
-    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName} {
-      &::after {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        z-index: -1;
-        background: @picker-date-hover-range-color;
-        content: '';
-      }
-    }
-    .@{picker-prefix-cls}-date-panel
-      &-in-view&-in-range&-range-hover-start
-      .@{cellClassName}::after {
-      right: -6px - @border-width-base;
-      left: 0;
-
-      .@{picker-prefix-cls}-panel-rtl & {
-        right: 0;
-        left: -6px - @border-width-base;
-      }
-    }
-    .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
-      right: 0;
-      left: -6px - @border-width-base;
-
-      .@{picker-prefix-cls}-panel-rtl & {
-        right: -6px - @border-width-base;
-        left: 0;
-      }
-    }
-
     // Hover with range start & end
     &-range-hover&-range-start::after {
       right: 50%;
@@ -394,39 +427,6 @@
       }
     }
 
-    // >>> Disabled
-    &-disabled {
-      pointer-events: none;
-
-      .@{cellClassName} {
-        color: @disabled-color;
-        background: transparent;
-      }
-
-      &::before {
-        background: @picker-basic-cell-disabled-bg;
-      }
-    }
-    &-disabled&-today .@{cellClassName}::before {
-      border-color: @disabled-color;
-    }
-  }
-
-  &-cell {
-    padding: 3px 0;
-    color: @disabled-color;
-    cursor: pointer;
-
-    // In view
-    &-in-view {
-      color: @text-color;
-    }
-
-    // Disabled
-    &-disabled {
-      cursor: not-allowed;
-    }
-
     .picker-cell-inner(~'@{picker-cell-inner-cls}');
     .picker-cell-inner(~'@{picker-legacy-cell-cls}');
   }
@@ -707,11 +707,12 @@
 // https://github.com/ant-design/ant-design/issues/21559
 // https://codepen.io/afc163-1472555193/pen/mdJRaNj?editors=0110
 /* stylelint-disable-next-line */
-_:-ms-fullscreen, :root {
+_:-ms-fullscreen,
+:root {
   .@{picker-prefix-cls}-range-wrapper {
     .@{picker-prefix-cls}-month-panel .@{picker-prefix-cls}-cell,
     .@{picker-prefix-cls}-year-panel .@{picker-prefix-cls}-cell {
       padding: 21px 0;
     }
   }
-}
+}