@wangxinowo/vue-datepicker-next 1.0.2 → 1.0.5

package/dist/vue-datepicker-next.min.css

@@ -2026,8 +2026,13 @@ html {
   width: 100%;
   min-width: 280px;
   height: 32px;
-  padding: 0 12px;
+  padding: 4px 11px;
+  padding-right: 41px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  line-height: 1.5;
   background-color: #fff;
+  background-image: none;
   border: 1px solid #d9d9d9;
   border-radius: 4px;
   transition: all 0.3s;
@@ -2045,9 +2050,11 @@ html {
   background-color: transparent;
   border: none;
   box-shadow: none;
+  padding-right: 11px;
 }
 .ant-calendar-range-picker-input-wrapper[disabled],
 .ant-calendar-picker-disabled .ant-calendar-range-picker-input-wrapper {
+  color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
   border-color: #d9d9d9;
   cursor: not-allowed;
@@ -2086,9 +2093,48 @@ html {
   border-color: #52c41a;
   box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.2);
 }
+.ant-calendar-range-picker-input-wrapper .ant-calendar-picker-icon {
+  position: absolute;
+  top: 50%;
+  right: 11px;
+  z-index: 1;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-top: -7px;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 14px;
+  line-height: 1;
+  transition: all 0.3s;
+  user-select: none;
+}
+.ant-calendar-range-picker-input-wrapper .ant-calendar-picker-clear {
+  position: absolute;
+  top: 50%;
+  right: 11px;
+  z-index: 2;
+  width: 14px;
+  height: 14px;
+  margin-top: -7px;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 14px;
+  background: #fff;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.3s;
+}
+.ant-calendar-range-picker-input-wrapper .ant-calendar-picker-clear:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-calendar-range-picker-input-wrapper:hover .ant-calendar-picker-clear {
+  opacity: 1;
+  pointer-events: auto;
+}
 .ant-calendar-range-picker-input {
-  width: 44%;
-  height: 99%;
+  flex: 1;
+  min-width: 0;
+  height: 100%;
   text-align: center;
   background-color: transparent;
   border: 0;
@@ -2130,9 +2176,10 @@ html {
   opacity: 1;
 }
 .ant-calendar-range-picker-separator {
-  display: inline-block;
-  min-width: 10px;
-  height: 100%;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
   color: rgba(0, 0, 0, 0.45);
   white-space: nowrap;
   text-align: center;
@@ -2312,7 +2359,7 @@ textarea.ant-calendar-range .ant-calendar-time-picker-input {
 .ant-calendar-range .ant-calendar-decade-panel-table,
 .ant-calendar-range .ant-calendar-year-panel-table,
 .ant-calendar-range .ant-calendar-month-panel-table {
-  height: 208px;
+  height: auto;
 }
 .ant-calendar-range .ant-calendar-in-range-cell {
   position: relative;
@@ -2334,6 +2381,43 @@ textarea.ant-calendar-range .ant-calendar-time-picker-input {
   border-radius: 0;
   content: '';
 }
+.ant-calendar-range .ant-calendar-year-panel-cell.ant-calendar-in-range-cell,
+.ant-calendar-range .ant-calendar-month-panel-cell.ant-calendar-in-range-cell {
+  position: relative;
+  border-radius: 0;
+}
+.ant-calendar-range .ant-calendar-year-panel-cell.ant-calendar-in-range-cell > a,
+.ant-calendar-range .ant-calendar-month-panel-cell.ant-calendar-in-range-cell > a {
+  position: relative;
+  z-index: 1;
+}
+.ant-calendar-range .ant-calendar-year-panel-cell.ant-calendar-in-range-cell::before,
+.ant-calendar-range .ant-calendar-month-panel-cell.ant-calendar-in-range-cell::before {
+  position: absolute;
+  top: 4px;
+  right: 0;
+  bottom: 4px;
+  left: 0;
+  display: block;
+  background: #e6f7ff;
+  border: 0;
+  border-radius: 0;
+  content: '';
+}
+.ant-calendar-range .ant-calendar-year-panel-selected-start-cell.ant-calendar-in-range-cell::before,
+.ant-calendar-range .ant-calendar-month-panel-selected-start-cell.ant-calendar-in-range-cell::before {
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.ant-calendar-range .ant-calendar-year-panel-selected-end-cell.ant-calendar-in-range-cell::before,
+.ant-calendar-range .ant-calendar-month-panel-selected-end-cell.ant-calendar-in-range-cell::before {
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.ant-calendar-range .ant-calendar-year-panel-cell.ant-calendar-in-hover-range-cell::before,
+.ant-calendar-range .ant-calendar-month-panel-cell.ant-calendar-in-hover-range-cell::before {
+  background: #bae7ff;
+}
 .ant-calendar-range .ant-calendar-selected-start-date .ant-calendar-date,
 .ant-calendar-range .ant-calendar-selected-end-date .ant-calendar-date {
   color: #fff;
@@ -2822,6 +2906,17 @@ li.ant-calendar-time-picker-select-option-disabled:hover {
   background: #e6f7ff;
   cursor: pointer;
 }
+.ant-calendar-month-panel-selected-start-cell .ant-calendar-month-panel-month,
+.ant-calendar-month-panel-selected-end-cell .ant-calendar-month-panel-month {
+  color: #fff;
+  background: #1890ff;
+  border-radius: 2px;
+}
+.ant-calendar-month-panel-selected-start-cell .ant-calendar-month-panel-month:hover,
+.ant-calendar-month-panel-selected-end-cell .ant-calendar-month-panel-month:hover {
+  color: #fff;
+  background: #40a9ff;
+}
 .ant-calendar-year-panel {
   position: absolute;
   top: 0;
@@ -3096,6 +3191,17 @@ li.ant-calendar-time-picker-select-option-disabled:hover {
   color: rgba(0, 0, 0, 0.25);
   user-select: none;
 }
+.ant-calendar-year-panel-selected-start-cell .ant-calendar-year-panel-year,
+.ant-calendar-year-panel-selected-end-cell .ant-calendar-year-panel-year {
+  color: #fff;
+  background: #1890ff;
+  border-radius: 2px;
+}
+.ant-calendar-year-panel-selected-start-cell .ant-calendar-year-panel-year:hover,
+.ant-calendar-year-panel-selected-end-cell .ant-calendar-year-panel-year:hover {
+  color: #fff;
+  background: #40a9ff;
+}
 .ant-calendar-decade-panel {
   position: absolute;
   top: 0;
@@ -3420,6 +3526,49 @@ li.ant-calendar-time-picker-select-option-disabled:hover {
   font-weight: 500;
   background: #e6f7ff;
 }
+.ant-calendar-presets-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid #e8e8e8;
+  background: #fff;
+}
+.ant-calendar-presets-footer-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 12px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.65);
+  background: #fafafa;
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  user-select: none;
+}
+.ant-calendar-presets-footer-btn:hover {
+  color: #1890ff;
+  border-color: #1890ff;
+  background: #e6f7ff;
+}
+.ant-calendar-presets-footer-btn:active {
+  color: #096dd9;
+  border-color: #096dd9;
+}
+.ant-calendar-presets-footer-btn-selected {
+  color: #fff;
+  background: #1890ff;
+  border-color: #1890ff;
+}
+.ant-calendar-presets-footer-btn-selected:hover {
+  color: #fff;
+  background: #40a9ff;
+  border-color: #40a9ff;
+}
 .ant-calendar-range-with-presets .ant-calendar-range-part {
   display: flex;
 }