LimitLess-admin-panel/assets/less/components/plugins/ui/fullcalendar.less

/* ------------------------------------------------------------------------------
 *
 *  # FullCalendar
 *
 *  A JavaScript event calendar. Customizable and open source
 *
 *  Version: 1.2
 *  Latest update: Mar 10, 2016
 *
 * ---------------------------------------------------------------------------- */


// Layout
// ------------------------------

// Container
.fc {
	direction: ltr;
	text-align: left;
}

// 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,
	hr,
	thead,
	tbody,
	.fc-row,
	.fc-popover {
		border-color: @panel-default-border;
	}

	// Change bottom border color
	thead,
	thead td,
	thead th {
		border-bottom-color: @table-border-highlight;
	}

	// Horizontal rule
	hr {
		background-color: #f5f5f5;
	}

	// Popover
	.fc-popover {
		background-color: #fff;
		border-radius: @border-radius-base;

		.fc-header {
			background-color: #f5f5f5;
		}
	}

	// Highlight today's date
	.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
.fc-nonbusiness {
	background-color: #ccc;
}


// Icons
// ------------------------------

// Icon base
.fc-icon {
	display: block;

	// 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-close {
			cursor: pointer;
		}
	}
	.fc-ltr & {
		.fc-header {
			.fc-title {
				float: left;
			}

			.fc-close {
				float: right;
			}
		}
	}

	// Unthemed
	.fc-unthemed & {
		.fc-header .fc-close {
			margin-top: 2px;
			.opacity(0.6);

			&:hover {
				.opacity(1);
			}
		}
	}
}


// Misc reusable components
// ------------------------------

.fc hr {
	height: 0;
	margin: 0;
	padding: 0 0 2px; // height is unreliable across browsers, so use padding
	border-style: solid;
	border-width: 1px 0;
}

// Clear helper
.fc-clear {
	clear: both;
}

.fc-bg,
.fc-bgevent-skeleton,
.fc-highlight-skeleton,
.fc-helper-skeleton {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.fc-bg {
	bottom: 0; // strech bg to bottom edge

	table {
		height: 100%; // strech bg to bottom edge
	}
}


// 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; // overcome neighboring borders
	}
}


// 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
// ------------------------------

.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 {
	overflow-y: scroll;
	overflow-x: hidden;

	// We expect an immediate inner element
	> * {
		position: relative;
		width: 100%;
		overflow: hidden;
	}
}


// Global event styles
// ------------------------------

.fc-event {
	position: relative; // for resize handle and other inner positioning
	display: block; // make the <a> tag block
	border: 1px solid @color-blue-600; // default BORDER color
	background-color: @color-blue-600; // default BACKGROUND color
	font-weight: normal;
	border-radius: @border-radius-small;

	&,
	&:hover {
		color: #fff; // default TEXT color
		text-decoration: none; // if <a> has an href
	}

	// Give events with links and draggable events a hand mouse pointer
	&[href],
	&.fc-draggable {
		cursor: pointer;
	}
}

// Override an event's custom cursor
.fc-not-allowed {
	&,
	.fc-event {
		cursor: @cursor-disabled;
	}
}


// DayGrid events
// ------------------------------

.fc-day-grid-event {
	margin: 0 5px 5px 5px;
	padding: 4px 8px;

	// 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;
	}

	// resize handle
	.fc-resizer {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 7px;
	}

	// LTR
	.fc-ltr & {
		.fc-resizer {
			right: -3px;
			cursor: e-resize;
		}
	}

	@media (min-width: @screen-lg-min) {
		> .fc-content {
			background-color: inherit;
		}

		.fc-time {
			float: right;
			padding-left: 5px;
			display: inline-block;
			z-index: 2;
			position: relative;
			background-color: inherit;
		}

		.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;
	}
}


// Toolbar
// ------------------------------

.fc-toolbar {
	text-align: center;
	margin-bottom: @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;
	}
} 


// BasicView
// ------------------------------

// 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;
		}
	}

	// Day number only
	.fc-day-number {
		text-align: right;

		&.fc-other-month {
			.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
// ------------------------------

.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-bgevent-skeleton,
	.fc-content-skeleton {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.fc-bgevent-skeleton {
		z-index: 3;
	}
	.fc-highlight-skeleton {
		z-index: 4;
	}
	.fc-content-skeleton {
		z-index: 5;
	}
	.fc-helper-skeleton {
		z-index: 6;
	}
}


// TimeGrid slats
// ------------------------------

.fc-slats {
	td {
		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;
		left: 0;
		right: 0;
	}
}


// TimeGrid event containment
// ------------------------------

.fc-time-grid {
	.fc-event-container,
	.fc-bgevent-container {
		position: relative;
	}

	.fc-event,
	.fc-bgevent {
		position: absolute;
		z-index: 1;
		margin: 5px;
		padding: 10px;
		min-height: 45px;
		.box-shadow(0 0 0 1px #fff);
	}

	.fc-bgevent {
		left: 0;
		right: 0;
	}
}


// TimeGrid event styling
// ------------------------------

.fc-time-grid-event {
	overflow: hidden;

	// Events that are continuing from another day
	&.fc-not-start { 
		border-top-width: 0;
		padding-top: 1px;
		.border-top-radius(0);
	}
	&.fc-not-end {
		border-bottom-width: 0;
		padding-bottom: 1px;
		.border-bottom-radius(0);
	}

	// Contains the time and title, but no bg and resizer
	> .fc-content {
		position: relative;
		z-index: 2;
	}

	// Time font weight
	.fc-time {
		font-weight: 500;
	}

	// Short mode, where time and title are on the same line
	&.fc-short {
		.fc-content {
			white-space: nowrap;
		}

		.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: .85em;
			padding: 0;
		}
	}

	// Resizer
	.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: "=";
		}
	}
}


// 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;
		}
	}
}