Artifact Content
Not logged in

Artifact 42e1725d8101005bbdf2c1b3f9df42e0ba67ff6f:


/*------------------------------------------------------------------
[21. Calendar App]
*/

$cell-height : 80;
body.overflow-hidden{
	overflow: hidden;
}

/*
Calendar
--------------------------------------------------
Header / .calendar-header
Years / .years .year
Months / .months
Weeks / .weeks-wrapper .week
Grid / .calendar-container
Events / .event-container
*/
.calendar{
	height: 100%;
	.drager{
		overflow: hidden;
		.scroll-element{
			display: none;
		}
	}
	.calendar-header{
			height: 43px;
			background-color: $color-master-lightest;
			line-height: 43px;
			padding-left: 60px;
		& > .drager{
			width:calc(100% - 141px);
			border-right: 1px solid rgba(0, 0, 0, 0.33);
			margin-top: 7px;
			line-height: 35px;
		}
		.years{
			width: auto;
			list-style: none;
			white-space: nowrap;
			.year{
				display: inline-block;
				width: 69px;
				text-align: center;
				white-space: nowrap;
				font-family: "Segoe UI","Helvetica Neue", Helvetica, Arial, sans-serif;
				& > a{
					color: rgba(0, 0, 0, 0.5);
					position: relative;
					&.active{
						color: #000;
					}
					&.has-event{
						&:before{
							position: absolute;
							content: '\25CF';
							width: 100%;
							font-size: 8px;
							line-height: 6px;
							text-align: center;
							color:  rgba(0, 0, 0, 0.44);
						}
					}
				}
			}
		}
	}
	.options{
		padding-left: 60px;
		margin-top: 15px;
		.months{
			width: auto;
			white-space: nowrap;
			height: 43px;
			line-height: 43px;
			.month{
				min-width: 30px;
				max-width: 100px;
				padding: 0 10px;
				display: inline-block;
				& > a{
					position: relative;
					color: rgba(0, 0, 0, 0.28);
					&:hover{
						color: rgba(0, 0, 0, 0.33);
					}
					&.active{
						color: rgba(0, 0, 0, 1);
					}
					&.has-event{
						&:before{
							position: absolute;
							content: '\25CF';
							top: -6px;
							width: 100%;
							font-size: 8px;
							line-height: 6px;
							text-align: center;
							color:  rgba(0, 0, 0, 0.33);
						}
					}
				}
			}
		}
		.date{
			margin-bottom: 20px;
		}
	}
	.week-dragger{
		border-bottom: 1px solid #e6e6e6;
		margin-left:-20px;
	}
	.weeks-wrapper{
		width: auto;
		white-space: nowrap;
		padding-left: 10px;
		padding-bottom: 12px;
		margin-bottom: 5px;
		.week{
			display: inline-block;
			position: relative;
			padding-left: 30px;
			padding-right: 30px;
			&:first-child{
				padding-left: 0px;
			}
			&:last-child{
				padding-left: 0;
			}
			&:before{
				content: '';
				position: absolute;
				right: -20px;
				bottom: 6px;
				height: 20px;
				width: 20px;
				border-left: 1px dotted rgba(0, 0, 0, 0.3);
			}
			&.active{
				.day-wrapper .week-date{
					.day{
						& > a{
						color: rgba(0, 0, 0, 0.6);	
						}
					}

				}
			}
			.day-wrapper{
				display: inline-block;
				.week-date{
					text-align: center;
					width: 21px;
					height: 21px;
					margin: 6px;
					@include border-radius(99px);
					&.current-date{
						background-color: $color-master-light;
					}
					&.active{
						background-color: $color-success;
						.day > a{
							font-weight: bold;
							opacity: 1;
							color: #fff;
						}
					}
					.day > a{
						letter-spacing: -0.01em;
					}
				}
				.week-day{
					text-align: center;
				}
				.day{
					display: inline-block;
					text-align: center;
					position: relative;
					z-index: 10;
					padding: 1px 0;
					font-size: 12px;
					color: rgba(0, 0, 0, 0.3);
					& > a{
						position: relative;
						width: 100%;
						display: block;
						text-align: center;
						color: rgba(0, 0, 0, 0.3);
						opacity: 0.7;
						font-weight: 600;
						&.has-event{
							&:before{
								position: absolute;
								content: '\25CF';
								top: -10px;
								width: 100%;
								font-size: 8px;
								line-height: 6px;
								text-align: center;
								color:  $color-success;
							}
						}
					}

					&.week-header{
						text-transform: uppercase;
						text-align: center;
						font-family: 'Montserrat';
						font-size: 10px;	
					}
				}
			}
		}
	}
	.calendar-container{
		position: relative;
		height: calc(100% - 200px);
		padding-top: 10px;
		.view{
			&.month-view{
				.tble .trow .tcell{
					height: 20%;
					.cell-inner:only-child, .cell-inner{
						height: 100%;
						border-bottom: 1px solid $color-master-light;
					}
					.month-date{
						position: absolute;
						top: 10px;
						right: 10px;
					}
				}
				.grid .tble{
					height: 100%;
					width: 100%;	
					padding-left: 50px;
				}
			}
			width: 100%;
			height: 100%;
			white-space: nowrap;
			-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
			.tble{
				display: inline-table;
				width: calc(100% - 50px);
				vertical-align: top;
				.thead{
					display: table-row;
					width: 100%;
					background: #fff;
					.tcell{
						padding: 10px;
						height: $cell-height/2 * 1px;
						position: relative;
						.weekday{
							font-size: 12px;
							display: inline-block;
							color: rgba(0, 0, 0, 0.51);
						}
						.weekdate{
							font-size: 14px;
							display: inline-block;
							margin-right:10px;
							color: rgba(0, 0, 0, 0.77);
						}
						&.active{
							.weekdate, .weekday{
							color:rgba(0, 0, 0, 1);
							}
						}
						&:before{
							content: '';
							border-bottom: 1px solid $color-master-light;
							width: calc(100% - 18px);
							position: absolute;
							bottom: 0;
						}
						.event-bubble{
							display: inline-block;
							width: 8px;
							height: 8px;
							margin-left: 5px;
							float: right;
							@include border-radius(30px);
						}
					}
				}
				.tcell{
					display: table-cell;
					height: $cell-height * 1px;
					max-width: 14.2857%;
					width: 14.2857%;
				}
				.trow{
					display:table-row;
					.tcell{
						background: #fff;
						padding: 0 10px;
						.cell-inner{
							height: $cell-height/2 * 1px;
							position: relative;
							&:first-child{
								border-bottom: 1px dotted $color-master-light;
							}
							&:last-child{
								border-bottom: 1px solid $color-master-light;
							}
							&:only-child{
								height: 40px;
								border-bottom: 0;
							}
						}
						&.active{
							background-color: #fef8e7;
							& > *{
								border-color: rgba(0, 0, 0, 0.1) !important;
							}
						}	
					}
					
				}
			}
		}
		.even-holder{
			position: absolute;
			display: table;
			width: calc(100% - 50px);
			width: '100% \0';
			height: calc(100% - 25px);
			.event-placeholder{
				height: 100%;
				width: 14.2857%;
				display: table-cell;
			}
		}
		.event-container{
			width: 100%;
			height: 40px;
			position: absolute !important;
			z-index: 10;
			overflow: hidden;
			@include transition(width .16s ease);
			.event-inner{
				padding: 15px;
				&:before{
					position: absolute;
					width: 8px;
					height: 8px;
					content: '';
					background-color: rgba(255, 255, 255,0.8);
					border-radius: 999px;
					right: 14px;
					top: 11px;
				}
			}
			.time-wrap{
				line-height: 12px;
				text-align: left;
				color: rgba(0, 0, 0, 0.77);
				overflow: hidden;
    			text-overflow: ellipsis;
			}
			.event-start-time, .event-end-time{
				font-size: 12px;
				color: rgba(0, 0, 0, 0.44);
			}
			.event-title{
				font-size: 14px;
				line-height: 15px;
				margin-bottom: 8px;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.ui-resizable-handle{
				position: absolute;
				z-index: 3;
				left: 0;
				right: 0;
				bottom: 0;
				height: 8px;
				overflow: hidden;
				line-height: 8px;
				font-size: 11px;
				font-family: monospace;
				text-align: center;
				cursor: s-resize;
				&:after {
				content: "=";
				color: rgba(0, 0, 0, 0.44);
				}
			}
		}
		.grid{
			display: block;
			overflow: scroll;
			height: calc(100% - 40px);
			-webkit-overflow-scrolling: touch;
		}
		.allday-cell{
			height: $cell-height/2 * 1px;
			display: inline-block;
			width: 50px;
			float: left;
		}
	}
	.time-slot-wrapper{
		display: inline-block;
		width: 50px;
		float: left;
		height: 100%;
		.time-slot{
			display: block;
			height: $cell-height*1px;
			width: 100%;
			background: #fff;
			&:first-child{
				span{
					display: none;
				}
			}
			& > span{
				float: right;
				font-size: 12px;
				position: relative;
				top: -15%;
				color: rgba(0, 0, 0, 0.46);
				font-weight: bold;
				font-size: 12px;
				right: 5px;
			}
		}
	}

}
.calendar-event{
	width: 330px;
	right: -330px;
	.scrollable{
		height: 100%;
	}
}
.date-selector{
	cursor: pointer;
}
/*
Responsive Util
*/
@media (max-width: 991px) {
.calendar {
	background-color: #fff;
	.calendar-header{
		display: none;
	}
	.options{
		margin-top:0;
		padding-left:10px;
		.months{
			height: 21px;
			line-height: 21px;
		}
		.date{
			margin-bottom: 10px;
		}
	}
	.calendar-container {
		height:100%;
		.week-view .tble{
			white-space: nowrap;
			.thead{
				white-space: nowrap;
				overflow: hidden;
				display: inline-block;
			}
			.tcell{
				display: inline-block;
				max-width: 100%;
				width: 100%;		
			}
			.trow{
				display: block;
				height: 80px;
			}
		}
	}
	.weeks-wrapper{
		margin-bottom: 0;
	}

}
.calendar-event{
	width: 240px;
	right: -240px;
}
.months-drager{
	margin-left: 27px;
	width: calc(100% - 80px);
	margin-top: 14px;
	border-right: 1px solid $color-master-light;
	padding-top: 0;
}
}