reactanggal/dist/reactanggal.css

A date picker component for React

.reactanggal__calendar{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;display:inline-block;padding:1rem;border-radius:4px;box-shadow:0 2px 4px -1px rgba(0,0,0,0.2),0 4px 5px 0 rgba(0,0,0,0.14),0 1px 10px 0 rgba(0,0,0,0.12)}.reactanggal__calendar .reactanggal__button{border:0;cursor:pointer;outline:0;position:relative;background-color:transparent;font-family:inherit;font-size:inherit;color:inherit;padding:0}.reactanggal__calendar .reactanggal__button:focus{outline:none}.reactanggal__calendar .reactanggal__button:hover::after,.reactanggal__calendar .reactanggal__button:focus::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#dbdfe2;z-index:-1;border-radius:4px}.reactanggal__calendar .reactanggal__button:disabled{opacity:0.6;cursor:not-allowed}.reactanggal__calendar .reactanggal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.reactanggal__calendar .reactanggal__header .reactanggal__header-period-control-button{padding:.75rem}.reactanggal__calendar .reactanggal__header .reactanggal__header-arrow-button{position:relative;height:2.5rem;width:2.5rem}.reactanggal__calendar .reactanggal__header .reactanggal__header-arrow-button::before{top:0;left:0;right:0;bottom:0;position:absolute;content:"";margin:1rem;border:0 solid currentColor;border-top-width:0px;border-left-width:0px;border-top-width:2px}.reactanggal__calendar .reactanggal__header .reactanggal__header-arrow-button--previous::before{border-left-width:2px;transform:translateX(2px) rotate(-45deg)}.reactanggal__calendar .reactanggal__header .reactanggal__header-arrow-button--next::before{border-right-width:2px;transform:translateX(-2px) rotate(45deg)}.reactanggal__calendar .reactanggal__calendar-weeks-header{display:flex;margin-bottom:.5rem}.reactanggal__calendar .reactanggal__calendar-body{border-top:1px solid rgba(0,0,0,0.12);padding-top:.5rem}.reactanggal__calendar .reactanggal__calendar-body .reactanggal__calendar-week,.reactanggal__calendar .reactanggal__calendar-body .reactanggal__calendar-years,.reactanggal__calendar .reactanggal__calendar-body .reactanggal__calendar-months{display:flex}.reactanggal__calendar .reactanggal__calendar-day{width:2.5rem}.reactanggal__calendar .reactanggal__calendar-day.reactanggal__calendar-day-name{font-size:12px;color:rgba(0,0,0,0.4)}.reactanggal__calendar .reactanggal__calendar-month,.reactanggal__calendar .reactanggal__calendar-year,.reactanggal__calendar .reactanggal__calendar-day{text-align:center}.reactanggal__calendar .reactanggal__calendar-month,.reactanggal__calendar .reactanggal__calendar-year,.reactanggal__calendar .reactanggal__calendar-day-num{cursor:pointer;position:relative;border-radius:4px;line-height:2.5rem;font-size:13px;color:#000}.reactanggal__calendar .reactanggal__calendar-month--today,.reactanggal__calendar .reactanggal__calendar-year--today,.reactanggal__calendar .reactanggal__calendar-day-num--today{background-color:rgba(54,153,255,0.2);color:#3699ff}.reactanggal__calendar .reactanggal__calendar-month--today::before,.reactanggal__calendar .reactanggal__calendar-year--today::before,.reactanggal__calendar .reactanggal__calendar-day-num--today::before{content:"";display:inline-block;border:solid transparent;border-width:0 0 7px 7px;border-bottom-color:#3699ff;border-top-color:#3699ff;position:absolute;bottom:4px;right:4px}.reactanggal__calendar .reactanggal__calendar-month--selected,.reactanggal__calendar .reactanggal__calendar-year--selected,.reactanggal__calendar .reactanggal__calendar-day-num--selected{background-color:#3699ff;color:#fff}.reactanggal__calendar .reactanggal__calendar-month--selected::before,.reactanggal__calendar .reactanggal__calendar-year--selected::before,.reactanggal__calendar .reactanggal__calendar-day-num--selected::before{border-bottom-color:#fff;border-top-color:#fff}.reactanggal__calendar .reactanggal__calendar-month--outside,.reactanggal__calendar .reactanggal__calendar-month--disabled,.reactanggal__calendar .reactanggal__calendar-year--outside,.reactanggal__calendar .reactanggal__calendar-year--disabled,.reactanggal__calendar .reactanggal__calendar-day-num--outside,.reactanggal__calendar .reactanggal__calendar-day-num--disabled{color:rgba(0,0,0,0.4)}.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-month--today,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-month--selected,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-year--today,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-year--selected,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-day-num--today,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-day-num--selected,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-month--today,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-month--selected,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-year--today,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-year--selected,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-day-num--today,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-day-num--selected,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-month--today,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-month--selected,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-year--today,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-year--selected,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-day-num--today,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-day-num--selected,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-month--today,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-month--selected,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-year--today,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-year--selected,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-day-num--today,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-day-num--selected,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-month--today,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-month--selected,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-year--today,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-year--selected,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-day-num--today,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-day-num--selected,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-month--today,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-month--selected,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-year--today,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-year--selected,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-day-num--today,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-day-num--selected{background-color:rgba(0,0,0,0.1)}.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-month--today::before,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-month--selected::before,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-year--today::before,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-year--selected::before,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-day-num--today::before,.reactanggal__calendar .reactanggal__calendar-month--outside.reactanggal__calendar-day-num--selected::before,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-month--today::before,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-month--selected::before,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-year--today::before,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-year--selected::before,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-day-num--today::before,.reactanggal__calendar .reactanggal__calendar-month--disabled.reactanggal__calendar-day-num--selected::before,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-month--today::before,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-month--selected::before,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-year--today::before,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-year--selected::before,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-day-num--today::before,.reactanggal__calendar .reactanggal__calendar-year--outside.reactanggal__calendar-day-num--selected::before,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-month--today::before,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-month--selected::before,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-year--today::before,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-year--selected::before,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-day-num--today::before,.reactanggal__calendar .reactanggal__calendar-year--disabled.reactanggal__calendar-day-num--selected::before,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-month--today::before,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-month--selected::before,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-year--today::before,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-year--selected::before,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-day-num--today::before,.reactanggal__calendar .reactanggal__calendar-day-num--outside.reactanggal__calendar-day-num--selected::before,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-month--today::before,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-month--selected::before,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-year--today::before,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-year--selected::before,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-day-num--today::before,.reactanggal__calendar .reactanggal__calendar-day-num--disabled.reactanggal__calendar-day-num--selected::before{border-bottom-color:rgba(0,0,0,0.4);border-top-color:rgba(0,0,0,0.4)}.reactanggal__calendar .reactanggal__calendar-month--hidden,.reactanggal__calendar .reactanggal__calendar-month--disabled,.reactanggal__calendar .reactanggal__calendar-year--hidden,.reactanggal__calendar .reactanggal__calendar-year--disabled,.reactanggal__calendar .reactanggal__calendar-day-num--hidden,.reactanggal__calendar .reactanggal__calendar-day-num--disabled{cursor:default}.reactanggal__calendar .reactanggal__calendar-month--disabled:hover::after,.reactanggal__calendar .reactanggal__calendar-year--disabled:hover::after,.reactanggal__calendar .reactanggal__calendar-day-num--disabled:hover::after{opacity:0}.reactanggal__calendar .reactanggal__calendar-month--hidden,.reactanggal__calendar .reactanggal__calendar-year--hidden,.reactanggal__calendar .reactanggal__calendar-day-num--hidden{opacity:0}.reactanggal__calendar .reactanggal__calendar-month,.reactanggal__calendar .reactanggal__calendar-year{width:calc(2.5rem * 7 / 4);height:2.5rem}