Initial commit
This commit is contained in:
351
resources/styles/@core/template/libs/full-calendar.scss
Normal file
351
resources/styles/@core/template/libs/full-calendar.scss
Normal file
@@ -0,0 +1,351 @@
|
||||
/* stylelint-disable no-duplicate-selectors */
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
@use "@core-scss/base/mixins";
|
||||
@use "@styles/variables/vuetify.scss";
|
||||
|
||||
.calendar-add-event-drawer {
|
||||
.v-navigation-drawer__content {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
body .fc {
|
||||
--fc-today-bg-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
--fc-border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
--fc-neutral-bg-color: rgb(var(--v-theme-background));
|
||||
--fc-list-event-hover-bg-color: rgba(var(--v-theme-on-surface), 0.02);
|
||||
--fc-page-bg-color: rgb(var(--v-theme-surface));
|
||||
--fc-event-border-color: currentcolor;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fc-timegrid-divider {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
border-width: 0;
|
||||
border-radius: 0.375rem;
|
||||
line-height: 22px;
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1.25rem;
|
||||
}
|
||||
|
||||
th.fc-col-header-cell {
|
||||
border-inline-end-color: transparent;
|
||||
}
|
||||
|
||||
.fc-day-other .fc-daygrid-day-top {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fc-daygrid-event {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.fc-col-header-cell-cushion {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
.fc-toolbar-title {
|
||||
display: inline-block;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
|
||||
font-weight: 500;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.fc-toolbar .fc-toolbar-title {
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.fc-timegrid-event,
|
||||
.fc-timegrid-more-link {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fc-event-time {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500 !important;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.fc-event-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500 !important;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.fc-timegrid-event {
|
||||
.fc-event-title {
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.fc-event-time {
|
||||
margin-block-end: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-event-title-container {
|
||||
.fc-event-title {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-prev-button {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.fc-prev-button,
|
||||
.fc-next-button {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.fc-timegrid-event-harness-inset .fc-timegrid-event,
|
||||
.fc-timegrid-event.fc-event-mirror,
|
||||
.fc-timegrid-more-link {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.fc-direction-ltr .fc-timegrid-col-events {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fc-col-header .fc-col-header-cell .fc-col-header-cell-cushion {
|
||||
padding: 0.5rem;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.fc-timegrid .fc-timegrid-slots .fc-timegrid-slot {
|
||||
block-size: 3rem;
|
||||
}
|
||||
|
||||
// Removed double border in list view
|
||||
.fc-list {
|
||||
border-block-end: none;
|
||||
border-inline: none;
|
||||
font-size: 0.8125rem;
|
||||
|
||||
.fc-list-day-cushion.fc-cell-shaded {
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc-list-event-time,
|
||||
.fc-list-event-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.fc-list-day .fc-list-day-text,
|
||||
.fc-list-day .fc-list-day-side-text {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 22px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.fc-list-table {
|
||||
border-block-end: 1px solid rgba(var(--v-theme-on-surface));
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-axis {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 0.8125rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.fc-timegrid-slot-label-frame {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.8125rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fc-header-toolbar {
|
||||
flex-wrap: wrap;
|
||||
padding: 1.4688rem;
|
||||
gap: 1rem 0.5rem;
|
||||
margin-block-end: 0 !important;
|
||||
}
|
||||
|
||||
.fc-toolbar-chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fc-button-group {
|
||||
.fc-button-primary {
|
||||
&,
|
||||
&:hover,
|
||||
&:not(.disabled):active {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.fc-button-group {
|
||||
border-radius: 0.375rem;
|
||||
|
||||
.fc-button,
|
||||
.fc-button:active {
|
||||
background-color: rgba(var(--v-theme-primary), 0.16);
|
||||
color: rgb(var(--v-theme-primary));
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.0187rem;
|
||||
padding-inline: 1rem;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-inline-end: 0.0625rem solid rgba(var(--v-theme-primary), var(--v-border-opacity));
|
||||
}
|
||||
|
||||
&.fc-button-active {
|
||||
background-color: rgba(var(--v-theme-primary), 0.24);
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar content container
|
||||
.fc-view-harness {
|
||||
min-block-size: 41.625rem;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
margin-block-end: 0.5625rem;
|
||||
padding-block: 0.25rem;
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
.fc-event-main {
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
tbody[role="rowgroup"] {
|
||||
> tr > td[role="presentation"] {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-scrollgrid {
|
||||
border-inline-start: none;
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
padding: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 0.6875rem;
|
||||
}
|
||||
|
||||
.fc-scrollgrid-section > * {
|
||||
border-inline-end-width: 0;
|
||||
border-inline-start-width: 0;
|
||||
}
|
||||
|
||||
.fc-list-event-dot {
|
||||
color: inherit;
|
||||
|
||||
--fc-event-border-color: currentcolor;
|
||||
}
|
||||
|
||||
.fc-list-event {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.fc-popover {
|
||||
@include mixins.elevation(3);
|
||||
|
||||
border-radius: 6px;
|
||||
|
||||
.fc-popover-header,
|
||||
.fc-popover-body {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.fc-popover-title {
|
||||
margin: 0;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 sidebar toggler
|
||||
.fc-toolbar-chunk {
|
||||
.fc-button-group {
|
||||
align-items: center;
|
||||
|
||||
.fc-button .fc-icon {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// ℹ️ Below two `background-image` styles contains static color due to browser limitation of not parsing the css var inside CSS url()
|
||||
.fc-drawerToggler-button {
|
||||
display: none;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(47,43,61,0.9)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
block-size: 1.5625rem;
|
||||
font-size: 0;
|
||||
inline-size: 1.5625rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
|
||||
@media (max-width: 1279px) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ Workaround of https://github.com/fullcalendar/fullcalendar/issues/6407
|
||||
.fc-col-header,
|
||||
.fc-daygrid-body,
|
||||
.fc-scrollgrid-sync-table,
|
||||
.fc-timegrid-body,
|
||||
.fc-timegrid-body table {
|
||||
inline-size: 100% !important;
|
||||
}
|
||||
|
||||
// Remove event margin in week view inside day column
|
||||
.fc-timegrid-col-events {
|
||||
.fc-event {
|
||||
padding-block: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timeGridWeek-view .fc-timegrid-slot-minor {
|
||||
border-block-start-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.v-theme--dark .fc .fc-toolbar-chunk .fc-button-group .fc-drawerToggler-button {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(225,222,245,0.9)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.v-theme--dark .fc .fc-toolbar-chunk .fc-button-group .fc-drawerToggler-button {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||
}
|
||||
Reference in New Issue
Block a user