react-jalali-picker/dist/styles.css

A React component library for selecting dates, featuring both a DatePicker and a RangePicker that support Jalali (Persian) and Gregorian calendars.

.react-jalali-date-picker-wrapper,
.react-jalali-range-picker-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  direction: rtl;
}
.react-jalali-date-picker-wrapper .current-month,
.react-jalali-date-picker-wrapper .next-month,
.react-jalali-range-picker-wrapper .current-month,
.react-jalali-range-picker-wrapper .next-month {
  width: 28rem;
  text-align: center;
}
.react-jalali-date-picker-wrapper .current-month .calendar-header,
.react-jalali-date-picker-wrapper .next-month .calendar-header,
.react-jalali-range-picker-wrapper .current-month .calendar-header,
.react-jalali-range-picker-wrapper .next-month .calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.react-jalali-date-picker-wrapper .current-month .calendar-header .month-year-header,
.react-jalali-date-picker-wrapper .next-month .calendar-header .month-year-header,
.react-jalali-range-picker-wrapper .current-month .calendar-header .month-year-header,
.react-jalali-range-picker-wrapper .next-month .calendar-header .month-year-header {
  flex: 1;
}
.react-jalali-date-picker-wrapper .current-month .calendar-header .next-btns,
.react-jalali-date-picker-wrapper .current-month .calendar-header .prv-btns,
.react-jalali-date-picker-wrapper .next-month .calendar-header .next-btns,
.react-jalali-date-picker-wrapper .next-month .calendar-header .prv-btns,
.react-jalali-range-picker-wrapper .current-month .calendar-header .next-btns,
.react-jalali-range-picker-wrapper .current-month .calendar-header .prv-btns,
.react-jalali-range-picker-wrapper .next-month .calendar-header .next-btns,
.react-jalali-range-picker-wrapper .next-month .calendar-header .prv-btns {
  display: flex;
  gap: 0.5rem;
}
.react-jalali-date-picker-wrapper .current-month .calendar-grid,
.react-jalali-date-picker-wrapper .next-month .calendar-grid,
.react-jalali-range-picker-wrapper .current-month .calendar-grid,
.react-jalali-range-picker-wrapper .next-month .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}
.react-jalali-date-picker-wrapper .current-month .calendar-grid .day-name,
.react-jalali-date-picker-wrapper .next-month .calendar-grid .day-name,
.react-jalali-range-picker-wrapper .current-month .calendar-grid .day-name,
.react-jalali-range-picker-wrapper .next-month .calendar-grid .day-name {
  font-weight: bold;
  text-transform: uppercase;
}
.react-jalali-date-picker-wrapper .current-month .calendar-grid .day,
.react-jalali-date-picker-wrapper .next-month .calendar-grid .day,
.react-jalali-range-picker-wrapper .current-month .calendar-grid .day,
.react-jalali-range-picker-wrapper .next-month .calendar-grid .day {
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0.5rem;
}
.react-jalali-date-picker-wrapper .current-month .calendar-grid .day:hover,
.react-jalali-date-picker-wrapper .next-month .calendar-grid .day:hover,
.react-jalali-range-picker-wrapper .current-month .calendar-grid .day:hover,
.react-jalali-range-picker-wrapper .next-month .calendar-grid .day:hover {
  color: #fff;
  background-color: #6c177f;
}
.react-jalali-date-picker-wrapper .current-month .calendar-grid .day.isSelected,
.react-jalali-date-picker-wrapper .next-month .calendar-grid .day.isSelected,
.react-jalali-range-picker-wrapper .current-month .calendar-grid .day.isSelected,
.react-jalali-range-picker-wrapper .next-month .calendar-grid .day.isSelected {
  background-color: #6c177f;
  color: white;
}
.react-jalali-date-picker-wrapper .current-month .calendar-grid .day.isInRange,
.react-jalali-date-picker-wrapper .next-month .calendar-grid .day.isInRange,
.react-jalali-range-picker-wrapper .current-month .calendar-grid .day.isInRange,
.react-jalali-range-picker-wrapper .next-month .calendar-grid .day.isInRange {
  background-color: rgba(108, 23, 127, 0.1882352941);
  border: 1px solid #480d7c;
  box-sizing: border-box;
}
.react-jalali-date-picker-wrapper .current-month .calendar-grid .day.disabled-day,
.react-jalali-date-picker-wrapper .next-month .calendar-grid .day.disabled-day,
.react-jalali-range-picker-wrapper .current-month .calendar-grid .day.disabled-day,
.react-jalali-range-picker-wrapper .next-month .calendar-grid .day.disabled-day {
  color: #ccc;
  pointer-events: none;
  opacity: 0.5;
}
.react-jalali-date-picker-wrapper .current-month .calendar-grid .range-info,
.react-jalali-date-picker-wrapper .next-month .calendar-grid .range-info,
.react-jalali-range-picker-wrapper .current-month .calendar-grid .range-info,
.react-jalali-range-picker-wrapper .next-month .calendar-grid .range-info {
  margin-top: 20px;
}

.rtl {
  direction: rtl;
}

.ltr {
  direction: ltr;
}

@media only screen and (max-width: 500px) {
  .react-jalali-range-picker-wrapper .next-month {
    display: none;
  }
  .react-jalali-range-picker-wrapper .current-month .calendar-header .next-btns {
    display: flex;
  }
}
@media only screen and (min-width: 500px) {
  .react-jalali-range-picker-wrapper .next-month {
    display: none;
  }
  .react-jalali-range-picker-wrapper .current-month .calendar-header .next-btns {
    display: flex;
  }
}
@media only screen and (min-width: 800px) {
  .react-jalali-range-picker-wrapper .next-month {
    display: block;
  }
  .react-jalali-range-picker-wrapper .current-month .calendar-header .next-btns {
    display: none;
  }
}
@media only screen and (min-width: 1000px) {
  .react-jalali-range-picker-wrapper .next-month {
    display: block;
  }
  .react-jalali-range-picker-wrapper .current-month .calendar-header .next-btns {
    display: none;
  }
}

/*# sourceMappingURL=styles.css.map */