@fk6/react-datepicker
Version:
React date picker with Hijri & Gregorian support, theming, localization, and more.
2 lines (1 loc) • 4.23 kB
CSS
.fkdp-calendar *{-webkit-user-select:none;user-select:none}.fkdp-calendar{background:var(--fkdp-calendar-bg);color:var(--fkdp-text);border-radius:6px;padding:.5rem;position:absolute;inset-inline-start:0;z-index:1000;margin-top:.25rem;box-shadow:0 2px 8px #00000026;display:flex;flex-direction:column;justify-content:center;align-items:center}.fkdp-calendar__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;width:100%;padding-bottom:10px;border-bottom:var(--fkdp-secondary) 1px solid}.fkdp-calendar__btn{background:transparent;border:none;padding:6px 10px;border-radius:50%;font-size:16px;cursor:pointer;transition:transform .2s ease-in-out;color:var(--fkdp-text)}.fkdp-calendar__btn:active{transform:scale(.95)}.fkdp-calendar__btn--disabled{color:var(--fkdp-secondary);cursor:not-allowed}.fkdp-calendar__footer .fkdp-calendar__go-to-today{margin-top:5px;background-color:var(--fkdp-calendar-bg);color:var(--fkdp-text);border:none;cursor:pointer;border-radius:5px;padding:4px 5px}.fkdp-calendar__woth-week-nums .fkdp-calendar__grid-months,.fkdp-calendar__woth-week-nums .fkdp-calendar__grid-years{grid-template-columns:repeat(4,4.15rem)}.fkdp-calendar__grid{display:grid;gap:.15rem}.fkdp-calendar__grid-days{grid-template-columns:repeat(7,2rem)}.fkdp-calendar__grid-days .fkdp-calendar__cell{border-radius:50%}.fkdp-calendar__grid-weekdays{grid-template-columns:repeat(7,2rem)}.fkdp-calendar__grid-weekdays .fkdp-calendar__cell{border-radius:50%}.fkdp-calendar__grid-with-weeknum{grid-template-columns:repeat(8,2rem)}.fkdp-calendar__grid-months{grid-template-columns:repeat(4,3.61rem)}.fkdp-calendar__grid-months .fkdp-calendar__cell{border-radius:10px}.fkdp-calendar__grid-years{grid-template-columns:repeat(4,3.61rem)}.fkdp-calendar__grid-years .fkdp-calendar__cell{border-radius:10px}.fkdp-calendar__cell{min-width:2rem;min-height:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:4px;background:none;border:none;position:relative;color:var(--fkdp-text)}.fkdp-calendar__cell--weekday{text-align:center;font-weight:600;font-size:14px;margin-bottom:4px;color:#666;padding:4px 0;cursor:default}.fkdp-calendar__cell--weeknum{text-align:center;font-weight:600;font-size:14px;color:#666;cursor:default}.fkdp-calendar__cell--weeknum:after{content:"|";position:absolute;inset-inline-end:0;margin-bottom:3px}.fkdp-calendar__cell--today{border:1px solid var(--fkdp-primary);font-weight:700}.fkdp-calendar__cell--focused{outline:2px solid var(--fkdp-primary)}.fkdp-calendar__cell--holiday{background-color:var(--fkdp-calendar-holiday-bg)}.fkdp-calendar__cell--highlighted{background:var(--fkdp-calendar-highlighted-bg)}.fkdp-calendar__cell--outside{opacity:.6;cursor:default}.fkdp-calendar__cell--outside:is(button){cursor:pointer}.fkdp-calendar__cell--selected{background:var(--fkdp-primary);color:var(--fkdp-light-text)}.fkdp-calendar__cell--disabled{cursor:not-allowed;opacity:.4}.fkdp-field{position:relative;display:inline-flex;align-items:center}.fkdp-field__input{flex:1;padding:.5rem 2rem .5rem .5rem;border:1px solid var(--fkdp-secondary);border-radius:6px;background-color:var(--fkdp-field-bg);color:var(--fkdp-field-color);font-size:14px}.fkdp-field__input:disabled{background:#f5f5f5;cursor:not-allowed}.fkdp-field__clear,.fkdp-field__icon{position:absolute;inset-inline-end:.5rem;background:none;border:none;cursor:pointer;font-size:14px;color:var(--fkdp-field-color)}.fkdp-field__clear:disabled,.fkdp-field__icon:disabled{opacity:.5;cursor:not-allowed}.fkdp-field__clear{inset-inline-end:2rem}:root{--fkdp-primary: #007bff;--fkdp-secondary: #977e7e;--fkdp-text: #000;--fkdp-light-text: #fff;--fkdp-field-bg: #fff;--fkdp-field-color: #333;--fkdp-calendar-bg: #fff;--fkdp-calendar-highlighted-bg: rgba(255, 122, 160, .8039215686);--fkdp-calendar-holiday-bg: #977e7e}:root .fkdp-datepicker__dark,:root .fkdp-calendar__dark{--fkdp-primary: #007bff;--fkdp-secondary: #977e7e;--fkdp-text: #fff;--fkdp-light-text: #000;--fkdp-field-bg: #4a4a4a;--fkdp-field-color: #eee;--fkdp-calendar-bg: #282828;--fkdp-calendar-highlighted-bg: #ff1a5b8a;--fkdp-calendar-holiday-bg: #848484}.fkdp-datepicker{position:relative;display:inline-block}