@maxtropy/v-components 0.1.12-beta.1 → 0.1.12-beta.11

package/es/components/datePicker/MxDatePicker.css

@@ -0,0 +1,586 @@
+.mx-date-picker.el-date-editor .el-input__wrapper {
+  border: 1px solid rgba(0, 173, 255, 0.5);
+  border-radius: 2px;
+  background: rgba(74, 144, 226, 0.16);
+  box-shadow: none;
+}
+.mx-date-picker.el-date-editor .el-input__wrapper:hover {
+  border-color: rgba(0, 173, 255, 0.8);
+  background-color: rgba(74, 144, 226, 0.16);
+}
+.mx-date-picker.el-date-editor .el-input__wrapper .el-input__inner {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 22px;
+}
+.mx-date-picker.el-date-editor .el-input__wrapper .el-input__prefix {
+  order: 1;
+}
+.mx-date-picker.el-date-editor .el-input__wrapper .el-input__prefix .el-input__prefix-inner .el-icon.el-input__icon {
+  margin-right: 0px;
+}
+.mx-date-picker.el-date-editor .el-input__wrapper .el-input__suffix .el-input__suffix-inner .clear-icon {
+  position: absolute;
+  top: 8px;
+  right: 11px;
+  background: #232324;
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.45);
+}
+.mx-date-picker.el-date-editor .el-input__wrapper .el-input__suffix .el-input__suffix-inner .clear-icon:hover {
+  color: rgba(255, 255, 255, 0.55);
+}
+.mx-date-picker.el-date-editor .el-icon.el-input__icon.el-range__icon {
+  order: 1;
+}
+.mx-date-picker.el-date-editor .el-icon.el-input__icon.el-range__close-icon {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  background-color: #232324;
+  border-radius: 4px;
+  height: 14px;
+  color: rgba(255, 255, 255, 0.45);
+  z-index: 2;
+}
+.mx-date-picker.el-date-editor .el-icon.el-input__icon.el-range__close-icon :hover {
+  color: rgba(255, 255, 255, 0.55);
+}
+.mx-date-picker.el-date-editor.is-disabled .el-input__wrapper {
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: none;
+}
+.mx-date-picker.el-date-editor.is-disabled .el-input__wrapper:hover {
+  border: 1px solid rgba(0, 173, 255, 0.5);
+}
+.mx-date-picker.el-date-editor.is-disabled .el-input__wrapper .el-input__inner {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-date-picker.el-date-editor.el-input__wrapper {
+  border: 1px solid rgba(0, 173, 255, 0.5);
+  border-radius: 2px;
+  background: rgba(74, 144, 226, 0.16);
+  box-shadow: none;
+  padding: 0px 12px;
+}
+.mx-date-picker.el-date-editor.el-input__wrapper:hover {
+  border-color: rgba(0, 173, 255, 0.8);
+  background-color: rgba(74, 144, 226, 0.16);
+  box-shadow: none;
+}
+.mx-date-picker.el-date-editor.el-input__wrapper .el-range-input {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 22px;
+  text-align: start;
+  width: 42%;
+}
+.mx-date-picker.el-date-editor.el-input__wrapper .el-range-separator {
+  color: rgba(255, 255, 255, 0.45);
+  padding: 0;
+}
+.mx-date-picker.el-date-editor.el-input__wrapper.el-date-editor--datetimerange .el-range-input {
+  width: 43%;
+}
+.mx-date-picker.el-date-editor.el-input__wrapper.is-disabled {
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: none;
+}
+.mx-date-picker.el-date-editor.el-input__wrapper.is-disabled:hover {
+  border: 1px solid rgba(0, 173, 255, 0.5);
+}
+.mx-date-picker.el-date-editor.el-input__wrapper.is-disabled .el-range-input {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-date-picker.el-date-editor.el-input__wrapper.is-disabled input {
+  background: transparent;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light {
+  border: none;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker {
+  background: #1f1f1f;
+  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.2), 0px 6px 16px 0px rgba(0, 0, 0, 0.32), 0px 3px 6px -4px rgba(0, 0, 0, 0.48);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-input__wrapper {
+  border: 1px solid rgba(0, 173, 255, 0.5);
+  border-radius: 2px;
+  background: rgba(74, 144, 226, 0.16);
+  box-shadow: none;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-input__wrapper:hover {
+  border-color: rgba(0, 173, 255, 0.8);
+  background-color: rgba(74, 144, 226, 0.16);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-input__wrapper .el-input__inner {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-time-panel {
+  background: #1f1f1f;
+  border: none;
+  box-shadow: none;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-time-panel .el-time-panel__content::before {
+  border-top: 1px solid rgba(255, 255, 255, 0);
+  border-bottom: 1px solid rgba(255, 255, 255, 0);
+  background: #111d2c;
+  margin-left: 0;
+  margin-right: 0;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-time-panel .el-time-spinner__item {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+  padding-top: 5px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-time-panel .el-time-spinner__item.is-active {
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-time-panel .el-time-spinner__item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.85);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-time-panel .el-time-panel__footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-time-panel .el-time-panel__footer .el-time-panel__btn {
+  color: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-time-panel .el-time-panel__footer .el-time-panel__btn:hover {
+  color: #75b3f0;
+  background-color: #1f1f1f;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__time-header .el-time-panel .el-time-panel__footer .el-time-panel__btn.confirm {
+  font-weight: 500;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__header {
+  margin: 0px;
+  height: 38px;
+  padding: 8px 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__header .el-picker-panel__icon-btn {
+  color: rgba(255, 255, 255, 0.45);
+  margin: 0px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__header .el-picker-panel__icon-btn:hover {
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__header .el-picker-panel__icon-btn:first-child {
+  margin-right: 15px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__header .el-date-picker__header-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-picker__header .el-date-picker__header-label:hover {
+  color: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table th {
+  border-bottom: none;
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .prev-month {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.3);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .prev-month .el-date-table-cell__text:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available .el-date-table-cell__text:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.85);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .today .el-date-table-cell__text {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid #4a90e2;
+  color: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available.in-range .el-date-table-cell {
+  background-color: #111d2c;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available.in-range.start-date .el-date-table-cell .el-date-table-cell__text,
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available.in-range.end-date .el-date-table-cell .el-date-table-cell__text {
+  width: 24px;
+  height: 24px;
+  background: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .disabled {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .disabled .el-date-table-cell {
+  background: #363636;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .disabled .el-date-table-cell .el-date-table-cell__text {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .next-month {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.3);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .next-month .el-date-table-cell__text:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .current .el-date-table-cell__text {
+  background: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .current .el-date-table-cell__text:hover {
+  background: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table.is-week-mode .el-date-table__row.current .el-date-table-cell {
+  background-color: #111d2c;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table.is-week-mode .el-date-table__row:hover .el-date-table-cell {
+  background-color: #111d2c;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .cell {
+  width: 48px;
+  height: 24px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .available .cell {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .available .cell:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .current .cell {
+  background: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .current .cell:hover {
+  background: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-month-table .cell {
+  width: 48px;
+  height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-month-table .cell:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-month-table .current .cell {
+  background: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-month-table .current .cell:hover {
+  background: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__footer {
+  background: #1f1f1f;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__footer .el-button.is-text {
+  color: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__footer .el-button.is-text:hover {
+  color: #75b3f0;
+  background-color: #1f1f1f;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__footer .el-button.is-plain {
+  background: #4a90e2;
+  border-color: #4a90e2;
+  border-radius: 2px;
+  color: #ffffff;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-picker .el-picker-panel__footer .el-button.is-plain:hover {
+  background-color: #6ba3da;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-popper__arrow {
+  display: none;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker {
+  background: #1f1f1f;
+  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.2), 0px 6px 16px 0px rgba(0, 0, 0, 0.32), 0px 3px 6px -4px rgba(0, 0, 0, 0.48);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-input__wrapper {
+  border: 1px solid rgba(0, 173, 255, 0.5);
+  border-radius: 2px;
+  background: rgba(74, 144, 226, 0.16);
+  box-shadow: none;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-input__wrapper:hover {
+  border-color: rgba(0, 173, 255, 0.8);
+  background-color: rgba(74, 144, 226, 0.16);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-input__wrapper .el-input__inner {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-time-panel {
+  background: #1f1f1f;
+  border: none;
+  box-shadow: none;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-time-panel .el-time-panel__content::before {
+  border-top: 1px solid rgba(255, 255, 255, 0);
+  border-bottom: 1px solid rgba(255, 255, 255, 0);
+  background: #111d2c;
+  margin-left: 0;
+  margin-right: 0;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-time-panel .el-time-spinner__item {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+  padding-top: 5px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-time-panel .el-time-spinner__item.is-active {
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-time-panel .el-time-spinner__item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.85);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-time-panel .el-time-panel__footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-time-panel .el-time-panel__footer .el-time-panel__btn {
+  color: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-date-range-picker__time-header .el-time-panel .el-time-panel__footer .el-time-panel__btn:hover {
+  color: #75b3f0;
+  background-color: #1f1f1f;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content {
+  padding: 16px 0px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table th {
+  border-bottom: none;
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .prev-month {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.3);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .prev-month .el-date-table-cell__text:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available .el-date-table-cell__text:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .disabled {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .disabled .el-date-table-cell {
+  background: #363636;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .disabled .el-date-table-cell .el-date-table-cell__text {
+  color: rgba(255, 255, 255, 0.3);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .today .el-date-table-cell__text {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid #4a90e2;
+  color: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available.in-range .el-date-table-cell {
+  background-color: #111d2c;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available.in-range .el-date-table-cell .el-date-table-cell__text {
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available.in-range.start-date .el-date-table-cell .el-date-table-cell__text,
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .available.in-range.end-date .el-date-table-cell .el-date-table-cell__text {
+  width: 24px;
+  height: 24px;
+  background: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .next-month {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.3);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .next-month .el-date-table-cell__text:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .current .el-date-table-cell__text {
+  background: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-date-table .el-date-table__row .current .el-date-table-cell__text:hover {
+  background: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .cell {
+  width: 48px;
+  height: 24px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .available .cell {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .available .cell:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .current .cell {
+  background: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-year-table .current .cell:hover {
+  background: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-month-table .cell {
+  width: 48px;
+  height: 24px;
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.65);
+  line-height: 22px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-month-table .cell:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-month-table .current .cell {
+  background: #4a90e2;
+  border-radius: 2px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content .el-month-table .current .cell:hover {
+  background: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content .el-date-range-picker__header {
+  height: 38px;
+  padding: 0 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content .el-date-range-picker__header .el-picker-panel__icon-btn {
+  color: rgba(255, 255, 255, 0.45);
+  margin: 0px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content .el-date-range-picker__header .arrow-right,
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content .el-date-range-picker__header .d-arrow-left {
+  margin-right: 17px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content .el-date-range-picker__header .el-picker-panel__icon-btn:hover {
+  color: rgba(255, 255, 255, 0.85);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content.is-left {
+  border-right: none;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content.is-left .el-date-table {
+  margin-top: 16px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__body-wrapper .el-picker-panel__body .el-picker-panel__content.el-date-range-picker__content.is-right .el-date-table {
+  margin-top: 16px;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__footer {
+  background: #1f1f1f;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__footer .el-button.is-text {
+  color: #4a90e2;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__footer .el-button.is-text:hover {
+  color: #75b3f0;
+  background-color: #1f1f1f;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__footer .el-button.is-plain {
+  background: #4a90e2;
+  border-color: #4a90e2;
+  border-radius: 2px;
+  color: #ffffff;
+}
+.mx-date-picker-popper.el-picker__popper.el-popper.is-pure.is-light .el-date-range-picker .el-picker-panel__footer .el-button.is-plain:hover {
+  background-color: #6ba3da;
+}
+.el-button.mx-date-picker-range-switch-btn {
+  width: 32px;
+  margin-left: 8px !important;
+  --el-button-font-weight: 400;
+  --el-button-bg-color: rgba(255, 255, 255, 0.05);
+  --el-button-hover-text-color: #6ba3da;
+  --el-button-hover-border-color: #4a90e2;
+  --el-button-active-text-color: #37659a;
+  --el-button-active-border-color: #3570bd;
+  --el-button-border-color: rgba(255, 255, 255, 0.2);
+  --el-button-text-color: rgba(255, 255, 255, 0.85);
+  --el-fill-color-blank: #232324;
+  --el-button-hover-bg-color: rgba(255, 255, 255, 0.1);
+  padding: 5px 16px;
+  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.04);
+  --el-border-radius-base: 2px;
+  --el-button-disabled-text-color: rgba(255, 255, 255, 0.3);
+  --el-button-disabled-border-color: rgba(255, 255, 255, 0.2);
+}

package/es/components/datePicker/MxDatePicker.vue.d.ts

@@ -0,0 +1,49 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    startPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    endPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    showSwitch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click-left" | "click-right")[], "click-left" | "click-right", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    startPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    endPlaceholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    showSwitch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onClick-left"?: ((...args: any[]) => any) | undefined;
+    "onClick-right"?: ((...args: any[]) => any) | undefined;
+}, {
+    placeholder: string;
+    showSwitch: boolean;
+    startPlaceholder: string;
+    endPlaceholder: string;
+}, {}>, Partial<Record<NonNullable<string | number>, (_: {}) => any>>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};