tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

replace momentjs (incl. calendar)

Browse Source
This commit is contained in:
Thomas Ruoff
2020-09-22 00:21:08 +02:00
committed by Thomas Ruoff
parent 7f4604f0e6
commit 02c2b45747
6 changed files with 161 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
styles/index.css
View File

@@ -120,49 +120,109 @@
content: '\274c';
}
.Calendar-grid {
@apply flex flex-wrap;
.react-calendar {
@apply border border-gray-900;
}
.Calendar-header {
@apply flex justify-between bg-gray-700 text-gray-200 text-center;
.react-calendar button {
@apply outline-none;
}
.Calendar-header button {
@apply w-10 bg-transparent text-gray-200 cursor-pointer;
.react-calendar button:enabled:hover {
cursor: pointer;
}
.Calendar-grid-item {
@apply text-center p-1 border-r border-b border-solid border-gray-500;
flex: 0 calc(100% / 7);
.react-calendar__navigation {
@apply text-gray-100 bg-gray-900;
}
.Calendar-grid-item--past {
@apply text-gray-500 bg-gray-200;
.react-calendar__navigation button {
@apply px-3 py-2;
min-width: 2rem;
}
.Calendar-grid-item--current {
.react-calendar__navigation button:enabled:hover,
.react-calendar__navigation button:enabled:focus {
}
.react-calendar__navigation button[disabled] {
@apply text-gray-700 cursor-not-allowed;
}
.react-calendar__month-view__weekdays {
@apply text-sm text-center uppercase font-bold;
}
.react-calendar__month-view__weekdays__weekday {
@apply p-1;
}
.react-calendar__month-view__weekdays__weekday abbr {
@apply no-underline;
}
.react-calendar__month-view__weekNumbers {
@apply font-bold;
}
.react-calendar__month-view__weekNumbers .react-calendar__tile {
@apply flex items-center content-center;
}
.react-calendar__month-view__days__day--weekend {
@apply text-red-600;
}
.react-calendar__month-view__days__day--neighboringMonth {
@apply text-gray-400;
}
.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
}
.Calendar-grid-item--free:not(.Calendar-grid-item--past) {
.react-calendar__tile {
@apply py-1;
}
.react-calendar__tile--free {
@apply bg-green-200;
}
.Calendar-grid-item--booked {
.react-calendar__tile--booked {
@apply bg-red-200 cursor-not-allowed;
}
.Calendar-grid-item.nextMonth,
.Calendar-grid-item.prevMonth {
@apply text-gray-500;
.react-calendar__tile--past {
@apply bg-gray-400 cursor-not-allowed;
}
.Calendar-grid-item:nth-child(7n + 1) {
@apply border-l;
.react-calendar__tile:disabled {
@apply bg-gray-300;
}
.Calendar-grid-item:nth-child(-n + 7) {
@apply border-t;
.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
@apply bg-gray-500;
}
.react-calendar__tile--now {
@apply text-green-400;
}
.react-calendar__tile--now:enabled:hover,
.react-calendar__tile--now:enabled:focus {
background: #ffffa9;
}
.react-calendar__tile--hasActive {
background: #76baff;
}
.react-calendar__tile--hasActive:enabled:hover,
.react-calendar__tile--hasActive:enabled:focus {
background: #a9d4ff;
}
.react-calendar__tile--active {
background: #006edc;
color: white;
}
.react-calendar__tile--active:enabled:hover,
.react-calendar__tile--active:enabled:focus {
background: #1087ff;
}
.react-calendar--selectRange .react-calendar__tile--hover {
background-color: #e6e6e6;
}
/* Start purging... */