100 lines
2.9 KiB
CSS
100 lines
2.9 KiB
CSS
/** CONTAINER STYLES **/
|
|
|
|
.DateRangePickerInput {
|
|
@apply flex border-0 bg-transparent;
|
|
}
|
|
|
|
.DateRangePicker_picker {
|
|
@apply -mt-1;
|
|
}
|
|
|
|
/** INPUT DIV STYLES **/
|
|
|
|
.DateInput {
|
|
background: transparent;
|
|
@apply flex w-auto flex-1;
|
|
}
|
|
|
|
/** INPUT FIELD COMMON STYLES **/
|
|
|
|
.DateInput_input {
|
|
/* used data:image as background-image because svg import with relative url didn't work */
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="%236b6b6b" fill-rule="evenodd"><path d="M20 20h-4v-4h4v4zm-6-10h-4v4h4v-4zm6 0h-4v4h4v-4zm-12 6h-4v4h4v-4zm6 0h-4v4h4v-4zm-6-6h-4v4h4v-4zm16-8v22h-24v-22h3v1c0 1.103.897 2 2 2s2-.897 2-2v-1h10v1c0 1.103.897 2 2 2s2-.897 2-2v-1h3zm-2 6h-20v14h20v-14zm-2-7c0-.552-.447-1-1-1s-1 .448-1 1v2c0 .552.447 1 1 1s1-.448 1-1v-2zm-14 2c0 .552-.447 1-1 1s-1-.448-1-1v-2c0-.552.447-1 1-1s1 .448 1 1v2z"/></g></svg>');
|
|
|
|
background-size: 14px;
|
|
background-position: 10px center;
|
|
@apply bg-no-repeat;
|
|
}
|
|
.DateInput_input {
|
|
@apply border-primary-main mt-2 w-full cursor-pointer appearance-none rounded border-t border-l border-r border-b border-solid bg-black py-2 px-3 pl-8 text-sm font-light leading-tight text-white shadow transition duration-300;
|
|
}
|
|
.DateInput_input:hover {
|
|
@apply border-gray-500;
|
|
}
|
|
.DateInput_input:focus {
|
|
@apply border-gray-500 outline-none;
|
|
}
|
|
/** FIRST INPUT STYLES **/
|
|
.DateInput:first-child .DateInput_input {
|
|
@apply rounded-r-none;
|
|
}
|
|
|
|
.DateInput:first-child .DateInput_input:hover,
|
|
.DateInput:first-child .DateInput_input:focus {
|
|
@apply relative z-10;
|
|
}
|
|
|
|
/** SECOND INPUT STYLES **/
|
|
.DateInput:last-child .DateInput_input {
|
|
@apply rounded-l-none;
|
|
margin-left: -1px;
|
|
}
|
|
/** ARROW STYLES **/
|
|
.DateRangePickerInput_arrow {
|
|
@apply hidden;
|
|
}
|
|
|
|
/* SELECT MONTH PICKER */
|
|
.DateRangePicker_select {
|
|
@apply text-secondary-active border-common-dark cursor-pointer appearance-none rounded border bg-white py-1 pl-2 pr-5 text-base; /* NEEDED FOR ARROW DOWN */
|
|
background-image: linear-gradient(45deg, transparent 50%, gray 50%),
|
|
linear-gradient(135deg, gray 50%, transparent 50%);
|
|
background-position:
|
|
calc(100% - 11px) 11px,
|
|
calc(100% - 6px) calc(11px);
|
|
background-size:
|
|
5px 5px,
|
|
5px 5px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
/* CALENDAR DAYS */
|
|
.CalendarDay {
|
|
@apply rounded-full border-0;
|
|
}
|
|
|
|
.CalendarDay:hover,
|
|
.CalendarDay__selected,
|
|
.CalendarDay__selected:active,
|
|
.CalendarDay__selected:hover {
|
|
@apply bg-primary-main border-primary-main border-0 text-white;
|
|
}
|
|
|
|
.CalendarDay__blocked_out_of_range:hover {
|
|
@apply text-common-dark cursor-not-allowed border-0 bg-white;
|
|
}
|
|
|
|
.CalendarDay__selected_span {
|
|
@apply bg-primary-light border-0;
|
|
}
|
|
|
|
/* MONTH NAVIGATION BUTTONS */
|
|
.DayPickerNavigation_button__horizontalDefault,
|
|
.DayPickerNavigation_button__horizontalDefault:hover {
|
|
@apply border-common-dark text-common-dark;
|
|
top: 24px;
|
|
padding: 3px 9px;
|
|
}
|
|
.DayPickerNavigation_svg__horizontal {
|
|
@apply fill-current;
|
|
}
|