webhandle-calendar/less/webhandle-calendar/grid-calendar.less

Calendar tools for node webhandle

@calendar-colors: {
	@filterColor: 					#65806D;
	@filterBack: 					#f5f4f5;
	
	buttonColor: 					white;
	buttonBackground: 				#65806D;
	
	monthColor: 					#24221f;
	monthBackground: 				#e1e0e1;
	
	showFilterBack: 				#f5f4f5;
	showFilterColor: 				#65806D;
	
	dayOfWeekColor: 				white;
	dayOfWeekBackground: 			#666666;
	
	dayOfMonthColor: 				#24221f;
	dayOfMonthBackground: 			#f7f7f7;
	dayOfMonthComingColor:			white;
	dayOfMonthComingBackground:		#b3b3b3;
	
	boxBorder: 						#d8d8d8;
	boxBackground: 					white;
	boxNonCurrentBackground: 		#f9f9f9;
	
	eventColor: 					#65806D;
	eventBorder:					#e6e5e6;
	
	alternateMonthColor:			#65806D;
}

#webhandle-calendar-properties() {
	.colors() {
		filterColor: 					#65806D;
		filterBack: 					#f5f4f5;
		
		buttonColor: 					white;
		buttonBackground: 				#65806D;
		
		monthColor: 					#24221f;
		monthBackground: 				#e1e0e1;
		
		showFilterBack: 				#f5f4f5;
		showFilterColor: 				#65806D;
		
		dayOfWeekColor: 				white;
		dayOfWeekBackground: 			#666666;
		
		dayOfMonthColor: 				#24221f;
		dayOfMonthBackground: 			#f7f7f7;
		dayOfMonthComingColor:			white;
		dayOfMonthComingBackground:		#b3b3b3;
		
		boxBorder: 						#d8d8d8;
		boxBackground: 					white;
		boxNonCurrentBackground: 		#f9f9f9;
		
		eventColor: 					#65806D;
		eventBorder:					#e6e5e6;
		
		alternateMonthColor:			#65806D;
	};
}


#set-calendar-breakpoints() {
	@container-width:			1040px;
	@tablet-width: 				800px;
	@tablet-small-width:        716px;
	@big-phone-width:			650px;
	@phone-width:               550px;
	@iphone-4-landscape-width:	480px;
	@iphone-4-width: 			320px;
}
#set-calendar-breakpoints();

.calendar-tablet-and-smaller(@rules) {
	@media (max-width: @tablet-width) {
		@rules();
	}
}

.webhandle-calendar-grid() {
	
	h1 {
		font-size: 32px;
		text-align: center;
	}

	@colors: #webhandle-calendar-properties.colors();
	

	
	.filters {
		.show-filters {
			display: block;
			line-height: 3em;
			margin: 5px auto;
			text-align: center;
			background-color: #f5f4f5;
			color: #65806D;
			text-decoration: none;
			font-weight: 600;
		}
		
	}
	.month-nav {
		
		.clear-inner;
		margin: 30px auto 15px auto;
		
		.previous, .next {
			color: #65806D;
			text-decoration: none;
			font-size: 120%;
		}
		
		.previous {
			float: left;
		}
		
		.next {
			float: right;
		}
	}
	
	.cal-grid {
		display: flex;
		flex-wrap: wrap;
		
		.day-cell {
			box-sizing: border-box;
			width: 100% / 7;
		}
		
		.day-header {
			background-color: #666666;
			color: white;
			line-height: 3em;
			text-align: center;
			font-weight: 600;
		}
		
		.day-grid-box {
			
			border: solid 1px #d8d8d8;
			
			
			.date {
				background-color: #b3b3b3;
				color: white;
				line-height: 2em;
				padding-left: 7px;
				font-weight: 600;
			}
			
			.individual-events {
				min-height: 8em;
			}
			
			.grid-event {
				display: block;
				margin: 0 5px;
				border-bottom: #e6e5e6;
				color: #65806D;
				padding: 10px 6px;
				border-bottom: solid 1px #e6e5e6;
				text-decoration: none;
				
				&:last-of-type {
					border-bottom: 0;
				}
			}
			
			&.occurred {
				.date {
					background-color: #f7f7f7;
					color: #24221f;
				}
			}
			
			&.non-cur-month {
				background-color: #f9f9f9;
				.date {
					background-color: #f7f7f7;
					color: #c5c5c5;
				}
			}
			
			.time {
				display: none;
			}
		}
	}
	
	.calendar-tablet-and-smaller({
		.cal-grid {
			.day-header, .non-cur-month {
				display: none;
			}
			.day-cell, .day-cell.occurred {
				width: 100%;
				padding: 10px;
				// border: 0;
				
				.date {
					background-color: #65806D;
					display: inline-block;
					color: white;
					width: 2em;
					height: 2em;
					text-align: center;
					border-radius: 50%;
					color: white;
					padding: 0;
					line-height: 2em;
					margin-bottom: 14px;
				}
				
				.individual-events {
					min-height: 0em;
					margin-bottom: 10px;
				}
				
				border-bottom-width: 0;
				
				&:hover {
					background-color: @grey-white-off;
				}
				
				.time {
					display: inline;
				}
			}
			border-bottom: solid 1px #d8d8d8;

		}
		
	});

}