💄 optimize RangePicker active cell style

close #17878 close #13567 close #16872
ant-design · Jul 30, 2019 · da741ec · da741ec
1 parent b71f2ec
commit da741ec
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less
@@ -131,6 +131,18 @@
   }
 }
 
+.calendar-selected-cell() {
+  .@{calendar-prefix-cls}-date {
+    color: @text-color-inverse;
+    background: @primary-color;
+    border: @border-width-base @border-style-base transparent;
+
+    &:hover {
+      background: @primary-color;
+    }
+  }
+}
+
 .@{calendar-prefix-cls} {
   position: relative;
   width: 280px;
@@ -255,27 +267,19 @@
     border-color: @primary-color;
   }
 
-  &-last-month-cell &-date,
-  &-next-month-btn-day &-date {
-    color: @disabled-color;
-  }
-
   &-selected-day &-date {
-    background: tint(@primary-color, 80%);
+    background: @primary-2;
   }
 
-  &-selected-date,
-  &-selected-start-date,
-  &-selected-end-date {
-    .@{calendar-prefix-cls}-date {
-      color: @text-color-inverse;
-      background: @primary-color;
-      border: @border-width-base @border-style-base transparent;
+  &-selected-date {
+    .calendar-selected-cell;
+  }
 
-      &:hover {
-        background: @primary-color;
-      }
-    }
+  &-last-month-cell &-date,
+  &-next-month-btn-day &-date {
+    color: @disabled-color !important;
+    background: transparent !important;;
+    border-color: transparent !important;;
   }
 
   &-disabled-cell &-date {

diff --git a/components/date-picker/style/RangePicker.less b/components/date-picker/style/RangePicker.less
@@ -84,6 +84,19 @@
     transform: translateX(-50%);
   }
 
+  .@{calendar-prefix-cls}-today {
+    .@{calendar-prefix-cls}-date {
+      color: @primary-color;
+      background: @primary-2;
+      border-color: @primary-color;
+    }
+  }
+
+  .@{calendar-prefix-cls}-selected-start-date,
+  .@{calendar-prefix-cls}-selected-end-date {
+    .calendar-selected-cell;
+  }
+
   &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
     margin-left: 0;
   }