1437 lines
25 KiB
SCSS
1437 lines
25 KiB
SCSS
@import '../../css/_custom-variables/libs';
|
|
@import 'mixins';
|
|
|
|
$fullcalendar-event-border-radius: .125rem !default;
|
|
$fullcalendar-button-padding: .375rem .75rem !default;
|
|
$fullcalendar-day-grid-event-padding: .0625rem .1875rem !default;
|
|
$fullcalendar-highlight-opacity: .05 !default;
|
|
$fullcalendar-bg-event-opacity: .1 !default;
|
|
$fullcalendar-popover-body-padding: .3125rem !default;
|
|
$fullcalendar-popover-header-padding: .3125rem .5rem !default;
|
|
$fullcalendar-day-header-padding-y: .5rem !default;
|
|
$fullcalendar-today-bg: rgba(#02BC77, .05) !default;
|
|
$fullcalendar-nonbusiness-bg: rgba(0, 0, 0, .02) !default;
|
|
$fullcalendar-event-selected-shadow: 0 .125rem .3125rem rgba(0, 0, 0, 0.2) !default;
|
|
$fullcalendar-event-selected-dragging-shadow: 0 .125rem .4375rem rgba(0, 0, 0, 0.3) !default;
|
|
$fullcalendar-now-indicator-color: red !default;
|
|
$fullcalendar-toolbar-margin-x: 1em !default;
|
|
$fullcalendar-list-table-cell-padding: .5rem .875rem !default;
|
|
$fullcalendar-event-dot-size: .625rem !default;
|
|
$fullcalendar-now-indicator-arrow-size: .3125rem !default;
|
|
|
|
.fc {
|
|
direction: ltr;
|
|
}
|
|
|
|
.fc-rtl {
|
|
.fc-toolbar,
|
|
.fc-popover,
|
|
.fc-popover,
|
|
.fc-timeline,
|
|
.fc-list-item td,
|
|
.fc-list-heading td,
|
|
.fc-event,
|
|
.fc-day-header,
|
|
.fc-more-cell {
|
|
direction: rtl;
|
|
}
|
|
}
|
|
|
|
.fc-highlight {
|
|
background: #bce8f1;
|
|
opacity: $fullcalendar-highlight-opacity;
|
|
}
|
|
|
|
.fc-bgevent {
|
|
background: #8fdf82;
|
|
opacity: $fullcalendar-bg-event-opacity;
|
|
}
|
|
|
|
.fc-nonbusiness {
|
|
background: $fullcalendar-nonbusiness-bg;
|
|
opacity: 1;
|
|
}
|
|
|
|
.fc .alert-info {
|
|
background: $fullcalendar-today-bg;
|
|
color: inherit;
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Popover
|
|
|
|
.fc-popover {
|
|
position: absolute;
|
|
|
|
.fc-header {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: $fullcalendar-popover-header-padding;
|
|
}
|
|
|
|
.fc-header .fc-title {
|
|
margin: 0 .125rem;
|
|
}
|
|
|
|
.fc-header .fc-close {
|
|
font-size: 1.1em;
|
|
opacity: .65;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fc-body {
|
|
padding: $fullcalendar-popover-body-padding;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Misc Reusable Components
|
|
|
|
.fc-divider {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
}
|
|
|
|
hr.fc-divider {
|
|
margin: 0;
|
|
padding: 0 0 .125rem;
|
|
height: 0;
|
|
border-width: 1px 0;
|
|
}
|
|
|
|
.fc-bg,
|
|
.fc-bgevent-skeleton,
|
|
.fc-highlight-skeleton,
|
|
.fc-mirror-skeleton {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.fc-bg {
|
|
bottom: 0;
|
|
}
|
|
|
|
.fc-bg table {
|
|
height: 100%;
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Tables
|
|
|
|
.fc {
|
|
table {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
table-layout: fixed;
|
|
font-size: 1em;
|
|
}
|
|
|
|
th {
|
|
text-align: center;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 0;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
vertical-align: top;
|
|
}
|
|
|
|
td.fc-today {
|
|
border-style: double;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Internal Nav Links
|
|
|
|
a[data-goto] {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Fake Table Rows
|
|
|
|
.fc .fc-row {
|
|
border-width: 0;
|
|
border-style: solid;
|
|
}
|
|
|
|
.fc-row table {
|
|
border-right: 0 hidden transparent;
|
|
border-bottom: 0 hidden transparent;
|
|
border-left: 0 hidden transparent;
|
|
}
|
|
|
|
.fc-row:first-child table {
|
|
border-top: 0 hidden transparent;
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Day Row (used within the header and the DayGrid)
|
|
|
|
.fc-row {
|
|
position: relative;
|
|
|
|
.fc-bg {
|
|
z-index: 1;
|
|
}
|
|
|
|
.fc-bgevent-skeleton,
|
|
.fc-highlight-skeleton {
|
|
bottom: 0;
|
|
}
|
|
|
|
.fc-bgevent-skeleton table,
|
|
.fc-highlight-skeleton table {
|
|
height: 100%;
|
|
}
|
|
|
|
.fc-highlight-skeleton td,
|
|
.fc-bgevent-skeleton td {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.fc-bgevent-skeleton {
|
|
z-index: 2;
|
|
}
|
|
|
|
.fc-highlight-skeleton {
|
|
z-index: 3;
|
|
}
|
|
|
|
.fc-content-skeleton {
|
|
position: relative;
|
|
z-index: 4;
|
|
padding-bottom: .125rem;
|
|
}
|
|
|
|
.fc-mirror-skeleton {
|
|
z-index: 5;
|
|
}
|
|
|
|
.fc-content-skeleton table,
|
|
.fc-content-skeleton td,
|
|
.fc-mirror-skeleton td {
|
|
border-color: transparent;
|
|
background: none;
|
|
}
|
|
|
|
.fc-content-skeleton td,
|
|
.fc-mirror-skeleton td {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.fc-content-skeleton tbody td,
|
|
.fc-mirror-skeleton tbody td {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Scrolling Container
|
|
|
|
.fc-scroller {
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
> .fc-day-grid,
|
|
> .fc-time-grid {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Global Event Styles
|
|
|
|
.fc-event {
|
|
position: relative;
|
|
display: block;
|
|
border-radius: $fullcalendar-event-border-radius;
|
|
}
|
|
|
|
.fc-event,
|
|
.fc-event-dot {
|
|
background-color: #3788d8;
|
|
}
|
|
|
|
.fc-event {
|
|
&,
|
|
&:hover {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
&[href],
|
|
&.fc-draggable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fc-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.fc-resizer {
|
|
position: absolute;
|
|
z-index: 4;
|
|
}
|
|
|
|
.fc-resizer {
|
|
display: none;
|
|
}
|
|
|
|
&.fc-allow-mouse-resize .fc-resizer,
|
|
&.fc-selected .fc-resizer {
|
|
display: block;
|
|
}
|
|
|
|
&.fc-selected .fc-resizer:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 9999;
|
|
margin-top: -1.25rem;
|
|
margin-left: -1.25rem;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
}
|
|
}
|
|
|
|
.fc-not-allowed,
|
|
.fc-not-allowed .fc-event {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Event Selection (only for touch devices)
|
|
|
|
.fc-event.fc-selected {
|
|
z-index: 9999 !important;
|
|
box-shadow: $fullcalendar-event-selected-shadow;
|
|
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -.0625rem;
|
|
right: -.0625rem;
|
|
bottom: -.0625rem;
|
|
left: -.0625rem;
|
|
z-index: 1;
|
|
background: #000;
|
|
opacity: .25;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Event Dragging
|
|
|
|
.fc-event.fc-dragging {
|
|
&.fc-selected {
|
|
box-shadow: $fullcalendar-event-selected-dragging-shadow;
|
|
}
|
|
|
|
&:not(.fc-selected) {
|
|
opacity: .75;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Horizontal Events
|
|
|
|
.fc-h-event.fc-selected:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: -.625rem;
|
|
right: 0;
|
|
bottom: -.625rem;
|
|
left: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.fc-ltr .fc-h-event.fc-not-start,
|
|
.fc-rtl .fc-h-event.fc-not-end {
|
|
margin-left: 0;
|
|
padding-left: .0625rem;
|
|
border-left-width: 0;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.fc-ltr .fc-h-event.fc-not-end,
|
|
.fc-rtl .fc-h-event.fc-not-start {
|
|
margin-right: 0;
|
|
padding-right: .0625rem;
|
|
border-right-width: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.fc-ltr .fc-h-event .fc-start-resizer,
|
|
.fc-rtl .fc-h-event .fc-end-resizer {
|
|
left: -.0625rem;
|
|
cursor: w-resize;
|
|
}
|
|
|
|
.fc-ltr .fc-h-event .fc-end-resizer,
|
|
.fc-rtl .fc-h-event .fc-start-resizer {
|
|
right: -.0625rem;
|
|
cursor: e-resize;
|
|
}
|
|
|
|
.fc-h-event.fc-allow-mouse-resize .fc-resizer {
|
|
top: -.0625rem;
|
|
bottom: -.0625rem;
|
|
width: .4375rem;
|
|
}
|
|
|
|
.fc-h-event.fc-selected .fc-resizer {
|
|
top: 50%;
|
|
margin-top: -.25rem;
|
|
width: .375rem;
|
|
height: .375rem;
|
|
border-width: .0625rem;
|
|
border-style: solid;
|
|
border-color: inherit;
|
|
border-radius: .25rem;
|
|
background: #fff;
|
|
}
|
|
|
|
.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,
|
|
.fc-rtl .fc-h-event.fc-selected .fc-end-resizer {
|
|
margin-left: -.25rem;
|
|
}
|
|
|
|
.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,
|
|
.fc-rtl .fc-h-event.fc-selected .fc-start-resizer {
|
|
margin-right: -.25rem;
|
|
}
|
|
|
|
|
|
// *******************************************************************************
|
|
// * Day Grid Events
|
|
|
|
.fc-day-grid-event {
|
|
margin: .0625rem .125rem 0;
|
|
padding: $fullcalendar-day-grid-event-padding;
|
|
}
|
|
|
|
tr:first-child > td > .fc-day-grid-event {
|
|
margin-top: .125rem;
|
|
}
|
|
|
|
.fc-mirror-skeleton tr:first-child > td > .fc-day-grid-event {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.fc-day-grid-event .fc-content {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fc-day-grid-event .fc-time {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.fc-day-grid-event.fc-allow-mouse-resize {
|
|
.fc-ltr & .fc-start-resizer,
|
|
.fc-rtl & .fc-end-resizer {
|
|
margin-left: -.125rem;
|
|
}
|
|
|
|
.fc-ltr & .fc-end-resizer,
|
|
.fc-rtl & .fc-start-resizer {
|
|
margin-right: -.125rem;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Horizontal Events
|
|
|
|
a.fc-more {
|
|
margin: .0625rem .1875rem;
|
|
text-decoration: none;
|
|
font-size: .85em;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.fc-limited {
|
|
display: none;
|
|
}
|
|
|
|
.fc-day-grid .fc-row {
|
|
z-index: 1;
|
|
}
|
|
|
|
.fc-more-popover {
|
|
z-index: 2;
|
|
width: 13.75rem;
|
|
|
|
&.fc-event-container {
|
|
padding: .625rem;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Now Indicator
|
|
|
|
.fc-now-indicator {
|
|
position: absolute;
|
|
border: 0 solid $fullcalendar-now-indicator-color;
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Toolbar
|
|
|
|
.fc-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
&.fc-header-toolbar {
|
|
margin-bottom: $fullcalendar-toolbar-margin-x;
|
|
}
|
|
|
|
&.fc-footer-toolbar {
|
|
margin-top: $fullcalendar-toolbar-margin-x;
|
|
}
|
|
|
|
> * > :not(:first-child) {
|
|
margin-left: .75em;
|
|
|
|
.fc-rtl & {
|
|
margin-right: .75em;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.btn {
|
|
padding: $fullcalendar-button-padding;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * View Structure
|
|
|
|
.fc-view-container {
|
|
position: relative;
|
|
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
|
|
.fc-view,
|
|
.fc-view > table {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Utilities
|
|
|
|
.fc-unselectable {
|
|
user-select: none;
|
|
|
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
-webkit-touch-callout: none;
|
|
}
|
|
|
|
|
|
// *******************************************************************************
|
|
// *
|
|
// * Grid view
|
|
// *
|
|
// *******************************************************************************
|
|
|
|
|
|
.fc-week-number {
|
|
text-align: center;
|
|
}
|
|
|
|
.fc-day-number {
|
|
display: block;
|
|
float: right;
|
|
clear: right;
|
|
|
|
.fc-rtl & {
|
|
float: left;
|
|
clear: left;
|
|
}
|
|
}
|
|
|
|
.fc-head .fc-day-header,
|
|
.fc-head .fc-week-number {
|
|
padding-top: $fullcalendar-day-header-padding-y !important;
|
|
padding-bottom: $fullcalendar-day-header-padding-y !important;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.fc-day-top.fc-other-month {
|
|
opacity: .3;
|
|
}
|
|
|
|
.fc-week-number,
|
|
.fc-day-number {
|
|
padding: .125rem;
|
|
}
|
|
|
|
th.fc-week-number,
|
|
th.fc-day-number {
|
|
padding: 0 .125rem;
|
|
}
|
|
|
|
|
|
// *******************************************************************************
|
|
// *
|
|
// * List View
|
|
// *
|
|
// *******************************************************************************
|
|
|
|
|
|
.fc-event-dot {
|
|
display: inline-block;
|
|
width: $fullcalendar-event-dot-size;
|
|
height: $fullcalendar-event-dot-size;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.fc-list-view {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
box-shadow: none !important;
|
|
|
|
.fc-rtl & {
|
|
direction: rtl;
|
|
}
|
|
}
|
|
|
|
.fc .fc-list-table {
|
|
table-layout: auto;
|
|
}
|
|
|
|
.fc-list-table td {
|
|
padding: $fullcalendar-list-table-cell-padding;
|
|
border-width: 1px 0 0;
|
|
}
|
|
|
|
.fc-list-table tr:first-child td {
|
|
border-top-width: 0;
|
|
}
|
|
|
|
.fc-list-heading {
|
|
border-bottom-width: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.fc-list-heading-main {
|
|
float: left;
|
|
|
|
.fc-rtl & {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.fc-list-heading-alt {
|
|
float: right;
|
|
|
|
.fc-rtl & {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.fc-list-item.fc-has-url {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fc-list-item-marker,
|
|
.fc-list-item-time {
|
|
width: .0625rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fc-ltr .fc-list-item-marker {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.fc-rtl .fc-list-item-marker {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.fc-list-item-title a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
|
|
&[href]:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.fc-list-empty-wrap2 {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.fc-list-empty-wrap1 {
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.fc-list-empty {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
// *******************************************************************************
|
|
// *
|
|
// * Time Grid View
|
|
// *
|
|
// *******************************************************************************
|
|
|
|
.fc-timeGrid-view .fc-day-grid {
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
.fc-row {
|
|
min-height: 3em;
|
|
|
|
.fc-content-skeleton {
|
|
padding-bottom: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * TimeGrid axis running down the side (for both the all-day area and the slot area)
|
|
|
|
.fc .fc-axis {
|
|
padding: 0 .25rem;
|
|
vertical-align: middle;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
|
|
.fc-rtl & {
|
|
text-align-last: left;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * TimeGrid Structure
|
|
|
|
.fc-time-grid-container,
|
|
.fc-time-grid {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fc-time-grid {
|
|
min-height: 100%;
|
|
|
|
table {
|
|
border: 0 hidden transparent;
|
|
}
|
|
|
|
> .fc-bg {
|
|
z-index: 1;
|
|
}
|
|
|
|
.fc-slats,
|
|
> hr {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.fc-content-col {
|
|
position: relative;
|
|
}
|
|
|
|
.fc-content-skeleton {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.fc-business-container {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fc-bgevent-container {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.fc-highlight-container {
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.fc-event-container {
|
|
position: relative;
|
|
z-index: 4;
|
|
}
|
|
|
|
.fc-now-indicator-line {
|
|
z-index: 5;
|
|
}
|
|
|
|
.fc-mirror-container {
|
|
position: relative;
|
|
z-index: 6;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * TimeGrid Slats (lines that run horizontally)
|
|
|
|
.fc-time-grid .fc-slats {
|
|
td {
|
|
height: 1.5em;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.fc-minor td {
|
|
border-top-style: dotted;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * TimeGrid Highlighting Slots
|
|
|
|
.fc-time-grid {
|
|
.fc-highlight-container {
|
|
position: relative;
|
|
}
|
|
|
|
.fc-highlight {
|
|
position: absolute;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * TimeGrid Event Containment
|
|
|
|
.fc-time-grid {
|
|
.fc-event-container {
|
|
margin: 0 2.5% 0 .125rem;
|
|
}
|
|
|
|
.fc-event,
|
|
.fc-bgevent {
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fc-bgevent {
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * TimeGrid Event Styling
|
|
|
|
.fc-time-grid-event {
|
|
margin-bottom: .0625rem;
|
|
|
|
&.fc-not-start {
|
|
padding-top: .0625rem;
|
|
border-top-width: 0;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
&.fc-not-end {
|
|
padding-bottom: .0625rem;
|
|
border-bottom-width: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.fc-content {
|
|
overflow: hidden;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.fc-time,
|
|
.fc-title {
|
|
padding: 0 .0625rem;
|
|
}
|
|
|
|
.fc-time {
|
|
white-space: nowrap;
|
|
font-size: .85em;
|
|
}
|
|
|
|
&.fc-short {
|
|
.fc-content {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fc-time,
|
|
.fc-title {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.fc-time span {
|
|
display: none;
|
|
}
|
|
|
|
.fc-time:before {
|
|
content: attr(data-start);
|
|
}
|
|
|
|
.fc-time:after {
|
|
content: "\000A0-\000A0";
|
|
}
|
|
|
|
.fc-title {
|
|
padding: 0;
|
|
font-size: .85em;
|
|
}
|
|
}
|
|
|
|
&.fc-allow-mouse-resize .fc-resizer {
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
height: .5rem;
|
|
text-align: center;
|
|
font-size: .6875rem;
|
|
font-family: monospace;
|
|
line-height: .5rem;
|
|
cursor: s-resize;
|
|
|
|
&::after {
|
|
content: "=";
|
|
}
|
|
}
|
|
|
|
&.fc-selected .fc-resizer {
|
|
bottom: -.3125rem;
|
|
left: 50%;
|
|
margin-left: -.3125rem;
|
|
width: .5rem;
|
|
height: .5rem;
|
|
border: 1px solid inherit;
|
|
border-radius: .3125rem;
|
|
background: #fff;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Now Indicator
|
|
|
|
.fc-time-grid {
|
|
.fc-now-indicator-line {
|
|
right: 0;
|
|
left: 0;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.fc-now-indicator-arrow {
|
|
left: 0;
|
|
margin-top: -$fullcalendar-now-indicator-arrow-size;
|
|
border-width: $fullcalendar-now-indicator-arrow-size 0 $fullcalendar-now-indicator-arrow-size calc(#{$fullcalendar-now-indicator-arrow-size} + 1px);
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
|
|
.fc-rtl & {
|
|
right: 0;
|
|
left: auto;
|
|
border-width: $fullcalendar-now-indicator-arrow-size calc(#{$fullcalendar-now-indicator-arrow-size} + 1px) $fullcalendar-now-indicator-arrow-size 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// *******************************************************************************
|
|
// *
|
|
// * Timeline View
|
|
// *
|
|
// *******************************************************************************
|
|
|
|
|
|
.fc-scroller-clip {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fc-no-scrollbars {
|
|
background: rgba(255, 255, 255, 0);
|
|
}
|
|
|
|
.fc-no-scrollbars::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.fc-scroller-canvas {
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
min-height: 100%;
|
|
|
|
> .fc-bg {
|
|
z-index: 1;
|
|
}
|
|
|
|
.fc-scroller-canvas > .fc-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
border-width: 0;
|
|
border-style: solid;
|
|
}
|
|
|
|
.fc-ltr &.fc-gutter-left > .fc-content {
|
|
margin-left: -.0625rem;
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.fc-ltr &.fc-gutter-right > .fc-content {
|
|
margin-right: -.0625rem;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.fc-rtl &.fc-gutter-left > .fc-content {
|
|
margin-right: -.0625rem;
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.fc-rtl &.fc-gutter-right > .fc-content {
|
|
margin-left: -.0625rem;
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
&.fc-gutter-top > .fc-content {
|
|
margin-top: -.0625rem;
|
|
border-top-width: 1px;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * View Structure
|
|
|
|
.fc-scrolled .fc-head .fc-scroller {
|
|
z-index: 2;
|
|
}
|
|
|
|
.fc-timeline.fc-scrolled .fc-head .fc-scroller {
|
|
box-shadow: 0 .1875rem .25rem rgba(0, 0, 0, .075);
|
|
}
|
|
|
|
.fc-timeline .fc-body .fc-scroller {
|
|
z-index: 1;
|
|
}
|
|
|
|
.fc-timeline .fc-scroller-canvas {
|
|
> div > table,
|
|
> div > div > table {
|
|
border-style: hidden;
|
|
}
|
|
|
|
> .fc-content > .fc-rows > table {
|
|
border-bottom-style: none;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Table Cell Common
|
|
|
|
.fc-timeline {
|
|
th,
|
|
td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fc-cell-content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fc-cell-text {
|
|
display: inline-block;
|
|
padding-right: .25rem;
|
|
padding-left: .25rem;
|
|
}
|
|
|
|
th {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.fc-head {
|
|
.fc-cell-content {
|
|
padding-top: .1875rem;
|
|
padding-bottom: .1875rem;
|
|
}
|
|
|
|
.fc-time-area .fc-cell-content {
|
|
overflow: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fc-timeline-event .fc-time + .fc-title {
|
|
left: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Time Area
|
|
|
|
.fc-time-area col {
|
|
min-width: 2.2em;
|
|
text-align: left;
|
|
|
|
.fc-rtl & {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.fc-time-area .fc-chrono th {
|
|
text-align: left;
|
|
|
|
.fc-rtl & {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.fc-time-area .fc-slats {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
|
|
table {
|
|
height: 100%;
|
|
}
|
|
|
|
.fc-minor {
|
|
border-style: dotted;
|
|
}
|
|
|
|
td {
|
|
border-width: 0 1px;
|
|
|
|
.fc-ltr & {
|
|
border-right-width: 0;
|
|
}
|
|
|
|
.fc-rtl & {
|
|
border-left-width: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fc-time-area {
|
|
.fc-bgevent-container,
|
|
.fc-highlight-container {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
width: 0;
|
|
}
|
|
|
|
.fc-mirror-container,
|
|
.fc-bgevent-container,
|
|
.fc-highlight-container {
|
|
left: 0;
|
|
|
|
.fc-rtl & {
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
|
|
.fc-bgevent,
|
|
.fc-highlight {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Now Indicator
|
|
|
|
.fc-timeline .fc-now-indicator {
|
|
top: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.fc-time-area .fc-now-indicator-arrow {
|
|
margin-top: -$fullcalendar-now-indicator-arrow-size;
|
|
border-width: $fullcalendar-now-indicator-arrow-size 0 $fullcalendar-now-indicator-arrow-size calc(#{$fullcalendar-now-indicator-arrow-size} + 1px);
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
|
|
.fc-rtl & {
|
|
border-width: $fullcalendar-now-indicator-arrow-size calc(#{$fullcalendar-now-indicator-arrow-size} + 1px) $fullcalendar-now-indicator-arrow-size 0;
|
|
}
|
|
}
|
|
|
|
|
|
.fc-time-area .fc-now-indicator-line {
|
|
bottom: 0;
|
|
margin: 0 -.0625rem;
|
|
|
|
.fc-ltr & {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.fc-rtl & {
|
|
border-right-width: 1px;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Event Container
|
|
|
|
.fc-time-area {
|
|
.fc-event-container {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 0;
|
|
}
|
|
|
|
.fc-mirror-container {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.fc-event-container {
|
|
top: -.0625rem;
|
|
padding-bottom: .5rem;
|
|
}
|
|
|
|
tr:first-child .fc-event-container {
|
|
top: 0;
|
|
}
|
|
|
|
.fc-no-overlap & .fc-event-container {
|
|
top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// *******************************************************************************
|
|
// * Time Grid Events
|
|
|
|
.fc-timeline-event {
|
|
position: absolute;
|
|
margin-bottom: .0625rem;
|
|
padding: .125rem 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.fc-no-overlap .fc-timeline-event {
|
|
margin-bottom: 0;
|
|
padding: .3125rem 0;
|
|
}
|
|
|
|
.fc-timeline-event {
|
|
.fc-ltr & {
|
|
margin-right: .0625rem;
|
|
}
|
|
|
|
.fc-rtl & {
|
|
margin-left: .0625rem;
|
|
}
|
|
|
|
.fc-time {
|
|
display: inline-block;
|
|
padding: 0 .0625rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.fc-title {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
padding: 0 .1875rem;
|
|
max-width: 100%;
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fc-ltr &.fc-not-start .fc-content,
|
|
.fc-rtl &.fc-not-end .fc-content {
|
|
margin-left: .5rem;
|
|
}
|
|
|
|
.fc-rtl &.fc-not-start .fc-content,
|
|
.fc-ltr &.fc-not-end .fc-content {
|
|
margin-right: .5rem;
|
|
}
|
|
|
|
&.fc-not-start .fc-content:before,
|
|
&.fc-not-end .fc-content:after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
margin-top: -.3125rem;
|
|
border: 5px solid #000;
|
|
border-top-color: transparent;
|
|
border-bottom-color: transparent;
|
|
opacity: .5;
|
|
}
|
|
|
|
.fc-ltr &.fc-not-start .fc-content:before,
|
|
.fc-rtl &.fc-not-end .fc-content:after {
|
|
left: -.375rem;
|
|
border-left: 0;
|
|
}
|
|
|
|
.fc-ltr &.fc-not-end .fc-content:after,
|
|
.fc-rtl &.fc-not-start .fc-content:before {
|
|
right: -.375rem;
|
|
border-right: 0;
|
|
}
|
|
}
|
|
|
|
|
|
// *******************************************************************************
|
|
// *
|
|
// * Theming
|
|
// *
|
|
// *******************************************************************************
|
|
|
|
|
|
.default-style {
|
|
@import "../../css/_appwork/include";
|
|
|
|
hr.fc-divider {
|
|
border-color: $table-border-color;
|
|
}
|
|
|
|
.fc-popover {
|
|
border-color: $popover-border-color;
|
|
box-shadow: $popover-box-shadow;
|
|
}
|
|
|
|
.fc-event {
|
|
color: $body-color;
|
|
font-size: $font-size-sm;
|
|
line-height: $line-height-sm;
|
|
}
|
|
|
|
.fc-toolbar .btn {
|
|
font-size: $font-size-sm !important;
|
|
line-height: $line-height-sm !important;
|
|
}
|
|
|
|
.fc-toolbar h2 {
|
|
font-size: $h3-font-size;
|
|
font-weight: $font-weight-light;
|
|
}
|
|
|
|
.fc-head .fc-day-header,
|
|
.fc-list-heading,
|
|
.fc-head .fc-week-number,
|
|
.fc-timeline .fc-cell-text {
|
|
font-size: $font-size-sm !important;
|
|
line-height: $line-height-sm;
|
|
font-weight: $font-weight-semibold;
|
|
}
|
|
|
|
.fc-popover .fc-header .fc-close {
|
|
line-height: $component-line-height;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
@if $color !=primary {
|
|
.fc-event-#{$color} {
|
|
@include fullcalendar-event-variant($value);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.material-style {
|
|
@import "../../css/_appwork/include-material";
|
|
|
|
hr.fc-divider {
|
|
border-color: $table-border-color;
|
|
}
|
|
|
|
.fc-popover {
|
|
border-color: $popover-border-color;
|
|
box-shadow: $popover-box-shadow;
|
|
}
|
|
|
|
.fc-event {
|
|
color: $body-color;
|
|
font-size: $font-size-sm;
|
|
line-height: $line-height-sm;
|
|
}
|
|
|
|
.fc-toolbar .btn {
|
|
font-size: $font-size-sm !important;
|
|
line-height: $line-height-sm !important;
|
|
}
|
|
|
|
.fc-toolbar h2 {
|
|
font-size: $h3-font-size;
|
|
font-weight: $font-weight-light;
|
|
}
|
|
|
|
.fc-head .fc-day-header,
|
|
.fc-list-heading,
|
|
.fc-head .fc-week-number,
|
|
.fc-timeline .fc-cell-text {
|
|
font-size: $font-size-sm !important;
|
|
line-height: $line-height-sm;
|
|
font-weight: $font-weight-semibold;
|
|
}
|
|
|
|
.fc-popover .fc-header .fc-close {
|
|
line-height: $component-line-height;
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
@if $color !=primary {
|
|
.fc-event-#{$color} {
|
|
@include fullcalendar-event-variant($value);
|
|
}
|
|
}
|
|
}
|
|
}
|