/* ------------------------------------------------------------------------------ * * # FullCalendar * * A JavaScript event calendar. Customizable and open source * * Version: 1.4 * Latest update: Mar 20, 2017 * * ---------------------------------------------------------------------------- */ // Layout // ------------------------------ // Container .fc { direction: ltr; text-align: left; // Extra precedence to overcome jqui body & { font-size: 1em; } // RTL direction &-rtl { text-align: right; } } // Calendar view .fc-view { > table { min-width: @screen-sm; } } // Events container .fc-events-container { background-color: #fcfcfc; border: 1px solid @panel-inner-border; padding: 10px; border-radius: @border-radius-base; .fc-event { margin: 0; padding: 4px @padding-small-horizontal; + .fc-event { margin-top: 10px; } } } // Colors // ------------------------------ // Default theme .fc-unthemed { th, td, thead, tbody, .fc-divider, .fc-row, .fc-content, .fc-popover, .fc-list-view, .fc-list-heading td { border-color: @panel-default-border; } // Change bottom border color thead, thead td, thead th { border-bottom-color: @table-border-highlight; } // Popover .fc-popover { background-color: #fff; border-radius: @border-radius-base; } // Backgrounds .fc-divider, .fc-popover .fc-header, .fc-list-heading td { background-color: #f5f5f5; } // Highlight today's date td.fc-today { background-color: @color-success-50; } } // When user is selecting cells .fc-highlight { background-color: #e5e5e5; .opacity(0.3); } // Default look for background events .fc-bgevent { background-color: @color-success-300; .opacity(0.3); } // Default look for non-business-hours areas // Will inherit .fc-bgevent's styles .fc-nonbusiness { background-color: #e5e5e5; } // Icons // ------------------------------ // Icon base .fc-icon { display: block; .user-select(none); // Icon base &:after { display: inline-block; font-family: "icomoon"; line-height: 1; font-size: @icon-font-size; vertical-align: middle; position: relative; top: -1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } // Arrow icons .fc-icon-left-single-arrow:after { content: "\e9c0"; } .fc-icon-right-single-arrow:after { content: "\e9c3"; } .fc-icon-left-double-arrow:after { content: "\000AB"; } .fc-icon-right-double-arrow:after { content: "\000BB"; } // X icon .fc-icon-x:after { content: "\ed6b"; font-size: @font-size-small; display: block; } // Buttons // ------------------------------ // Base, identical to .btn-default .fc-button { margin: 0; border: 1px solid @btn-default-border; padding: @padding-base-vertical @padding-base-horizontal; white-space: nowrap; cursor: pointer; outline: 0; // Firefox has an annoying inner border &::-moz-focus-inner { margin: 0; padding: 0; } } // // Button states // // Default .fc-state-default { border: 1px solid @btn-default-border; background-color: @btn-default-bg; &.fc-corner-left { .border-left-radius(@border-radius-base); } &.fc-corner-right { .border-right-radius(@border-radius-base); } } // Hover .fc-state-hover { background-color: #f8f8f8; } // Active .fc-state-down, .fc-state-active { background-color: #f5f5f5; .fc-button& { border-color: @btn-default-border; .box-shadow(0 1px 3px fade(#000, 5%) inset); } } // Disabled .fc-state-disabled { color: @text-muted; cursor: @cursor-disabled; .opacity(0.65); .box-shadow(none); } // // Button groups // .fc-button-group { display: inline-block; .fc & { > * { float: left; margin: 0 0 0 -1px; } > :first-child { margin-left: 0; } } } // Popover // ------------------------------ .fc-popover { position: absolute; border: 1px solid @panel-default-border; .box-shadow(0 1px 5px fade(#000, 5%)); // Header .fc-header { padding: 10px; .fc-title { float: left; } .fc-close { cursor: pointer; float: right; } } // Unthemed .fc-unthemed & { .fc-header .fc-close { margin-top: 2px; .opacity(0.6); &:hover { .opacity(1); } } } } // Misc reusable components // ------------------------------ // Divider .fc-divider { border-style: solid; border-width: 1px; hr& { height: 0; margin: 0; padding: 0 0 2px; border-width: 1px 0; } } // Clear helper .fc-clear { clear: both; } // Element positioning .fc-bg, .fc-bgevent-skeleton, .fc-highlight-skeleton, .fc-helper-skeleton { position: absolute; top: 0; left: 0; right: 0; } // General background .fc-bg { bottom: 0; table { height: 100%; } } // Tables // ------------------------------ .fc { table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } th, td { border-style: solid; border-width: 1px; padding: 0; vertical-align: top; } th { padding: @table-cell-padding; font-weight: 500; text-align: center; } td.fc-today { border-style: double; } } // Internal Nav Links // ------------------------------ a[data-goto] { cursor: pointer; color: @text-color; } // Fake table rows // ------------------------------ .fc-row { border-style: solid; border-width: 0; position: relative; table { border-left: 0 hidden transparent; border-right: 0 hidden transparent; border-bottom: 0 hidden transparent; } &:first-child table { border-top: 0 hidden transparent; // no top border on first row } } // Day row (used within the header and the DayGrid) // ------------------------------ .fc-row { .fc-bg { z-index: 1; } // Highlighting cells & background event skeleton .fc-bgevent-skeleton, .fc-highlight-skeleton { bottom: 0; table { height: 100%; } td { border-color: transparent; border: 0; } } .fc-bgevent-skeleton { z-index: 2; } .fc-highlight-skeleton { z-index: 3; } // Row content .fc-content-skeleton, .fc-helper-skeleton { td { background: none; border-color: transparent; border-bottom: 0; } // Cells with events inside (so NOT the day number cell) tbody td { border-top: 0; } } .fc-content-skeleton { position: relative; z-index: 4; } .fc-helper-skeleton { z-index: 5; } } // Scrolling container // ------------------------------ .fc-scroller { -webkit-overflow-scrolling: touch; // Timing grids > .fc-day-grid, > .fc-time-grid { position: relative; width: 100%; } } // Global event styles // ------------------------------ .fc-event { position: relative; display: block; border: 1px solid @color-blue-600; font-weight: normal; border-radius: @border-radius-small; &, &:hover { color: #fff; text-decoration: none; } // Give events with links and draggable events a hand mouse pointer &[href], &.fc-draggable { cursor: pointer; } // Event background .fc-bg { z-index: 1; background-color: #fff; .opacity(0.25); } // Event content .fc-content { position: relative; z-index: 2; } // // Resizer // // Base .fc-resizer { position: absolute; z-index: 4; display: none; } // Show resizer &.fc-allow-mouse-resize .fc-resizer, &.fc-selected .fc-resizer { display: block; } // Hit area &.fc-selected .fc-resizer:before { content: ""; position: absolute; z-index: 9999; top: 50%; left: 50%; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; } // // Event selection (only for touch devices) // .fc-event { &.fc-selected { z-index: 9999 !important; .box-shadow(0 2px 5px fade(#000, 20%)); // Dragging &.fc-dragging { .box-shadow(0 2px 7px fade(#000, 30%)); } } } } // Backgrounds .fc-event, .fc-event-dot { background-color: @color-blue-600; } // Override an event's custom cursor .fc-not-allowed { &, .fc-event { cursor: @cursor-disabled; } } // Horizontal events // ------------------------------ .fc-h-event { // Bigger touch area when selected &.fc-selected:before { content: ""; position: absolute; z-index: 3; top: -10px; bottom: -10px; left: 0; right: 0; } // // Resizer // // Start .fc-start-resizer { cursor: w-resize; left: -1px; } // End .fc-end-resizer { cursor: e-resize; right: -1px; } // In selected event &.fc-selected { .fc-start-resizer { margin-left: -4px; } .fc-end-resizer { margin-right: -4px; } } // Resizer (mouse devices) &.fc-allow-mouse-resize .fc-resizer { width: 7px; top: -1px; bottom: -1px; } // Resizer (touch devices) &.fc-selected .fc-resizer { border-radius: 4px; border-width: 1px; width: 6px; height: 6px; border-style: solid; border-color: inherit; background: #fff; top: 50%; margin-top: -4px; } } // DayGrid events // ------------------------------ .fc-day-grid-event { margin: 0 5px 5px 5px; padding: 4px 8px; // Darken selected event &.fc-selected:after { content: ""; position: absolute; z-index: 1; top: -1px; right: -1px; bottom: -1px; left: -1px; background-color: #000; .opacity(0.25); } // Force events to be one-line tall > .fc-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // Make the time semibold .fc-time { font-weight: 500; } // Resizer &.fc-allow-mouse-resize { .fc-start-resizer { margin-left: -2px; } .fc-end-resizer { margin-right: -2px; } } // Desktop view @media (min-width: @screen-lg-min) { // Content > .fc-content { background-color: inherit; } // Time .fc-time { float: right; padding-left: 5px; display: inline-block; z-index: 2; position: relative; background-color: inherit; } // Title .fc-title { z-index: 1; position: relative; } } } // Event limiting // ------------------------------ // "More" link a.fc-more { margin: 1px 5px; background-color: #fafafa; display: block; padding: 5px; text-align: center; border-radius: @border-radius-base; color: @gray-light; font-size: @font-size-small; &:hover { background-color: #f5f5f5; color: @text-color; } } // Rows and cells that are hidden because of a "more" link .fc-limited { display: none; } // Popover that appears when "more" link is clicked .fc-day-grid .fc-row { z-index: 1; } .fc-more-popover { z-index: 2; width: 220px; .fc-event-container { padding: 10px 5px; } } // Utilities // ------------------------------ // Now indicator .fc-now-indicator { position: absolute; border: 0 solid @color-danger-400; } // Not selectable .fc-unselectable { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); .user-select(none); } // Toolbar // ------------------------------ .fc-toolbar { text-align: center; // Header toolbar &.fc-header-toolbar { margin-bottom: @line-height-computed; } // Footer toolbar &.fc-footer-toolbar { margin-top: @line-height-computed; } // Title text h2 { margin: 5px 0; font-size: @font-size-h5; } // Left .fc-left { float: left; width: 33%; } // Right .fc-right { float: right; width: 33%; .fc-button-group { float: right; } } // Left/right buttons .fc-left, .fc-right { > .fc-button { margin-left: 10px; } } // Center .fc-center { display: inline-block; vertical-align: middle; } // The things within each left/right/center section > * { > * { float: left; } // The first thing within each left/center/right section > :first-child { margin-left: 0; } } // Button layering (for border precedence) button { position: relative; &:focus { z-index: 5; } } // States .fc-state-hover, .ui-state-hover { z-index: 2; } .fc-state-down { z-index: 3; } .fc-state-active, .ui-state-active { z-index: 4; } } // View structure // ------------------------------ .fc-view-container { border-left: 1px solid @panel-default-border; border-right: 1px solid @panel-default-border; overflow: auto; max-width: 100%; // Remove borders from table cells .fc-view > table { // Right border th, td { border-right-width: 0; } // Left border from first cell tr:first-child { th:first-child, td:first-child { border-left-width: 0; } } } // Change box sizing * { &, &:before, &:after { .box-sizing(content-box); } } } // Scope positioning and z-index's .fc-view { &, > table { position: relative; z-index: 1; } } // Basic view // ------------------------------ // Day row structure .fc-basicWeek-view, .fc-basicDay-view { .fc-content-skeleton { padding-top: 5px; padding-bottom: 10px; } } // Rows .fc-basic-view tbody .fc-row { min-height: 100px; // ensure that all rows are at least this tall min-width: 100px; } // A "rigid" row will take up a constant amount of height // because content-skeleton is absolute .fc-row.fc-rigid { overflow: hidden; .fc-content-skeleton { position: absolute; top: 0; left: 0; right: 0; } } // Week and day number styling .fc-basic-view { // Week and day .fc-week-number, .fc-day-number { padding: 10px; } // Week number only .fc-week-number { text-align: center; span { display: inline-block; min-width: 1.25em; } td& { text-align: center; > * { display: inline-block; min-width: 1.25em; } } } // Day number only .fc-day-number { text-align: right; } // Top date .fc-day-top { // Day number .fc-day-number { float: right; } // Week number .fc-week-number { float: left; min-width: 1.5em; text-align: center; background-color: #f5f5f5; color: @text-muted; border-radius: 0 0 @border-radius-base 0; } } } // Other month .fc-other-month { &.fc-day-top, &.fc-day-number { .opacity(0.3); } } // AgendaView all-day area // ------------------------------ .fc-agenda-view { .fc-day-grid { position: relative; z-index: 2; .fc-row { min-height: 3em; .fc-content-skeleton { padding-top: 5px; padding-bottom: 0; } } } } // TimeGrid axis // ------------------------------ .fc-axis { text-align: right; .fc & { vertical-align: middle; padding: 10px; white-space: nowrap; } } // TimeGrid structure // ------------------------------ // Base .fc-time-grid-container, .fc-time-grid { position: relative; z-index: 1; } // Grid .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; } // Containers .fc-content-skeleton { position: absolute; top: 0; left: 0; right: 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-helper-container { position: relative; z-index: 6; } // // TimeGrid slats // .fc-slats { td { border-bottom: 0; } .fc-minor td { border-top-style: dotted; } } // // TimeGrid highlighting slots // // Container .fc-highlight-container { position: relative; } // Highlight .fc-highlight { position: absolute; left: 0; right: 0; } // // TimeGrid event containment // // Containers .fc-event-container, .fc-bgevent-container { position: relative; } // Blue event container .fc-event { margin: 5px; .box-shadow(0 0 0 1px #fff); } // Events .fc-event, .fc-bgevent { position: absolute; z-index: 1; padding: 10px; min-height: 45px; } // Background event .fc-bgevent { left: 0; right: 0; } } // Generic Vertical Event // ------------------------------ .fc-v-event { // Events that are continuing from another day &.fc-not-start { border-top-width: 0; padding-top: 1px; .border-top-radius(0); } // Replace space made by the top border with padding &.fc-not-end { border-bottom-width: 0; padding-bottom: 1px; .border-bottom-radius(0); } } // TimeGrid event styling // ------------------------------ .fc-time-grid-event { overflow: hidden; // Need to allow touch resizers to extend outside event's bounding box &.fc-selected { overflow: visible; // Hide semi-white background, to appear darker .fc-bg { display: none; } } // Contains the time and title, but no bg and resizer .fc-content { position: relative; overflow: hidden; } // Time font weight .fc-time { font-weight: 500; } // Short mode, where time and title are on the same line &.fc-short { // Content .fc-content { white-space: nowrap; } // Time and title .fc-time, .fc-title { display: inline-block; vertical-align: top; } .fc-time { &:before { content: attr(data-start); } &:after { content: "\000A0-\000A0"; } span { display: none; } } .fc-title { font-size: @font-size-small; padding: 0; } } // // Resizer // // Cursor device &.fc-allow-mouse-resize { .fc-resizer { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 8px; overflow: hidden; line-height: 10px; font-size: @font-size-small; font-family: monospace; text-align: center; cursor: s-resize; background-color: fade(#000, 5%); padding: 1px; &:hover { background-color: fade(#000, 10%); } &:after { content: "="; } } } // Touch devide &.fc-selected .fc-resizer { border-radius: 5px; border-width: 1px; width: 8px; height: 8px; border-style: solid; border-color: inherit; background-color: #fff; left: 50%; margin-left: -5px; bottom: -5px; } } // Now indicator // ------------------------------ .fc-time-grid { // Line .fc-now-indicator-line { border-top-width: 1px; left: 0; right: 0; } // Arrow .fc-now-indicator-arrow { left: 0; margin-top: -5px; border-width: 5px 0 5px 6px; border-top-color: transparent; border-bottom-color: transparent; } } // List view // ------------------------------ // Event dot .fc-event-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } // List view base .fc-list-view { border-width: 1px 0; border-style: solid; direction: ltr; } // // Table resets // .fc-list-table { .fc & { table-layout: auto; } td { border-width: 1px 0 0; padding: @table-cell-padding; } tr:first-child td { border-top-width: 0; } } // // Day headings with the list // .fc-list-heading { border-bottom-width: 1px; td { font-weight: 500; } } .fc-list-heading-main { float: left; } .fc-list-heading-alt { float: right; } // // Event list items // // Item .fc-list-item { &.fc-has-url { cursor: pointer; } // Change bg on hover &:hover td { background-color: #fafafa; } } // Markers .fc-list-item-marker, .fc-list-item-time { white-space: nowrap; width: 1px; } // Make the dot closer to the event title .fc-list-item-marker { padding-right: 0; } // Title .fc-list-item-title a { text-decoration: none; color: inherit; } // // Message when no events // .fc-list-empty-wrap2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .fc-list-empty-wrap1 { width: 100%; height: 100%; display: table; } .fc-list-empty { display: table-cell; vertical-align: middle; text-align: center; } .fc-unthemed .fc-list-empty { /* theme will provide own background */ background-color: #fafafa; } // Responsive stuff // ------------------------------ @media (max-width: @screen-xs-max) { .fc-toolbar { .fc-left, .fc-left > .fc-button, .fc-right, .fc-right > .fc-button, .fc-left .fc-button-group, .fc-right .fc-button-group { float: none; width: auto; vertical-align: top; } .fc-left, .fc-right { display: block; margin-bottom: 10px; } } }