@alifd/meet-react/es/date-picker/styles/index.css

Fusion Mobile React UI System Component

.mt-datepicker-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  overflow-x: hidden;
}
.mt-datepicker-range {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-grow: 1;
  width: 200%;
  overflow: hidden;
  transition: all 0.2s var(--motion-type-ease);
}
.mt-datepicker-range--next {
  transform: translateX(-50%);
}
.mt-datepicker-range-item {
  flex-grow: 1;
  flex-shrink: 1;
}
.mt-datepicker-range-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  transition: all var(--motion-time-2);
}
.mt-datepicker-range-container-step-2 {
  transform: translate(-50%, 0);
}
.mt-datepicker-range-step-1 {
  flex: 1;
  width: 100%;
}
.mt-datepicker-range-step-2 {
  flex: 1;
  width: 100%;
}
.mt-datepicker-mode-switch {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 10.666666666666666vw;
  color: var(--color-brand-3);
  font-size: var(--p-body-2-font-size);
}
.mt-datepicker-hide-icon {
  visibility: hidden;
}
.mt-datepicker-time-indicator {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: var(--line-1) solid var(--color-line1-2);
  height: 12.8vw;
}
.mt-datepicker-time-indicator-text {
  font-size: --p-body-1-font-size;
  font-weight: bold;
  transition: color var(--motion-time-1);
  color: var(--color-text1-1);
}
.mt-datepicker-time-indicator--highlight {
  color: var(--color-text1-4);
}