FileMaster

Edit File: _schedule.scss

.weekday-schedules-w {
}
.weekday-schedule-w {
	background-color: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	&:last-child {
		border-bottom: none;
	}
	&.day-off {
		.ws-day-name {
			color: #c45252;
			&:after {
				width: 100%;
			}
		}
		.ws-head {
			&:hover {
				.ws-day-name {
					border-bottom-color: transparent;
				}
			}
			.ws-day-hours {
				display: none;
			}
			.wp-edit-icon {
				display: none;
			}
		}
		.weekday-schedule-form {
			display: none;
		}
	}
	.ws-head-w {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.ws-head {
		flex: 1;
		margin-left: 15px;
		display: flex;
		align-items: center;
		position: relative;
		cursor: pointer;
		padding: 15px 0px;
		.wp-edit-icon {
			font-size: 14px;
			color: $brand-primary;
			position: absolute;
			top: 56%;
			right: 0px;
			transform: translate(0%, -50%);
		}
		.os-toggler {
		}
		&:hover {
			.ws-day-name {
				border-bottom: 1px solid $body-color;
			}
			.wp-edit-icon {
			}
		}
	}
	.ws-day-name {
		color: $body-color;
		font-size: floor($font-size-base * 1.2);
		font-weight: $body-font-weight-bold;
		position: relative;
		margin-right: 20px;
		border-bottom: 1px solid transparent;
		&:after {
			width: 0%;
			background-color: #c45252;
			opacity: 0.7;
			height: 2px;
			top: 55%;
			left: 0px;
			position: absolute;
			transform: translateY(-50%);
			content: "";
			display: block;
		}
	}
	.ws-day-hours {
		text-align: right;
		color: $color-faded;
		font-size: floor($font-size-base * 0.8);
		font-weight: $body-font-weight-bold;
		margin-left: auto;
		cursor: pointer;
		padding-right: 25px;
		span {
			display: inline-block;
			vertical-align: middle;
			&:hover {
				color: $brand-primary;
			}
		}
		span + span {
			margin-left: 5px;
			border-left: 1px solid rgba(0, 0, 0, 0.05);
			padding-left: 5px;
		}
	}
	& + .weekday-schedule-w {
	}
	&.is-editing {
		.weekday-schedule-form {
			display: block;
		}
	}
}
.weekday-schedule-form {
	padding-bottom: 20px;
	padding-top: 5px;
	text-align: center;
	display: none;
	&.active {
		display: block;
	}
	.ws-period-add {
		border: 2px dashed #e0e6eb;
		display: block;
		background-color: #fff;
		box-shadow: none;
		padding: 5px;
		margin: 0px;
		color: #738db3;
		font-weight: $body-font-weight-bold;
		outline: none;
		cursor: pointer;
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		border-radius: $form-controls-border-radius;
		&:hover {
			border-color: $brand-primary;
			color: $brand-primary;
		}
		.add-period-graphic-w {
			width: 30px;
			height: 30px;
			position: relative;
			.add-period-plus {
				position: absolute;
				top: 50%;
				left: 50%;
				border-radius: 50%;
				height: 15px;
				width: 15px;
				transform: translate(-50%, -50%);
				i {
					position: absolute;
					display: block;
					top: 50%;
					left: 50%;
					font-size: 18px;
					transform: translate(-50%, -50%);
				}
			}
		}
		.add-period-label {
			color: $color-faded;
			font-weight: $body-font-weight-bold;
			font-size: $font-size-base * 1;
			margin-left: 5px;
		}
		&.os-loading {
			.latepoint-icon {
				display: none !important;
			}
			&:after {
				display: block;
				content: "";
				width: 14px;
				height: 14px;
				border-bottom: 2px solid $brand-primary;
				border-left: 2px solid $brand-primary;
				border-top: 2px solid $brand-primary;
				border-right: 2px solid rgba(255, 255, 255, 0);
				border-radius: 20px;
				position: absolute;
				top: 50%;
				left: 20px;
				transform: translate(-50%, -50%);
				animation: os-loading 700ms infinite linear;
			}
		}
	}
}
.ws-period {
	border: 1px solid #e0e6f0;
	font-size: $font-size-base * 0.9;
	align-items: center;
	background-color: #fff;
	position: relative;
	margin-bottom: 15px;
	border-radius: $form-controls-border-radius;

// Style for transparent form groups
	&.os-period-transparent {
		border: 1px solid #d6d6e1;
		border-bottom-color: #aaacb9;
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
		margin-bottom: 20px;
		input {
			border: 1px solid #d6d6e2;
			background-color: #ffffff;
			border-radius: 4px;
			min-height: 25px;
		}
	}

.os-time-group {
		padding-right: 5px;
	}
	.ws-period-remove {
		box-shadow: none;
		margin: 0px;
		padding: 3px;
		border-radius: 20px;
		border: 1px solid #e46666;
		background-color: #fff;
		line-height: 1;
		text-align: center;
		font-size: 10px;
		position: absolute;
		top: 50%;
		left: 0px;
		transform: translate(-50%, -50%);
		height: 18px;
		width: 18px;
		cursor: pointer;
		color: #e46666;
		i {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		&:hover {
			border-color: lighten(#d25656, 15%);
			color: #d25656;
		}
	}
}
.weekday-schedule-slider {
	display: none;
	background-color: #f5f6fa;
	padding: 30px;
	border-radius: $border-radius;
	.ws-slider-w {
		background-color: #dee6ef;
		height: 6px;
		border-radius: $border-radius-sm;
		margin-bottom: 10px;
		position: relative;
		.ws-handle {
			width: 10px;
			height: 10px;
			border-radius: $border-radius;
			background-color: $brand-primary;
			left: 30%;
			top: 50%;
			transform: translateY(-50%);
			box-shadow: 0px 0px 0px 2px #fff;
			position: absolute;
			z-index: 2;
		}
		.ws-handle-trail {
			background-color: lighten($brand-primary, 20%);
			position: absolute;
			top: 0px;
			bottom: 0px;
			left: 30%;
			right: 20%;
			z-index: 1;
		}
	}

.ws-marks {
		display: flex;
		.ws-mark {
			text-align: center;
			flex: 1;
			color: #8590b3;
			font-size: $font-size-base * 0.8;
		}
	}
}

.latepoint-settings-w {
	.weekday-schedules-w {
		margin-bottom: 20px;
	}
	.weekday-schedule-w {
		padding: 0px;
	}
	.weekday-schedule-form {
		padding-bottom: 10px;
	}
}
.custom-day-year-header {
	color: rgba(0, 0, 0, 0.3);
	font-size: 52px;
	font-weight: $body-font-weight-bold;
	margin-bottom: 20px;
	margin-top: 0px;
	line-height: 1;
	text-align: center;
	position: relative;
}
.custom-day-work-periods {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	& + .sub-level {
		margin-top: 40px;
	}
}
.custom-day-work-period {
	width: 140px;
	flex: 0 0 140px;
	text-align: center;
	margin: 0px 15px 15px 0px;
	position: relative;
	transition: all 0.2s ease;
	&.is-range {
		width: 250px;
		flex: 0 0 250px;
	}
	.custom-day-work-period-i {
		position: relative;
		padding: 24px 20px;
		border: 1px solid $border-color-main;
		border-radius: $border-radius-lg;
		background-color: #fff;
		transition: all 0.2s ease;
		&:before {
			top: 50%;
			left: 0px;
			right: 0px;
			background-color: rgba(0, 0, 0, 0.05);
			height: 1px;
			position: absolute;
			content: "";
		}
	}
	.custom-day-number {
		font-size: 46px;
		font-weight: $body-font-weight-bold;
		line-height: 1;
		margin-bottom: 5px;
		color: $brand-primary;
	}
	.remove-custom-day,
	.edit-custom-day {
		position: absolute;
		top: 0px;
		font-size: 14px;
		padding: 10px;
		text-decoration: none;
		line-height: 1;
		transition: all 0.2s ease;
		opacity: 0;
		z-index: 9999;
		outline: none;
		box-shadow: none;
		&.os-loading {
			opacity: 1;
			color: transparent;
			&:after {
				@include loading-circle($brand-primary, 15px);
			}
		}
	}
	.remove-custom-day {
		right: 0px;
		color: #d24646;
		transform: translateX(-10px);
	}
	.edit-custom-day {
		left: 0px;
		transform: translateX(10px);
	}
	&:hover {
		transform: translateY(-5px);
		.custom-day-work-period-i {
			border-color: darken($border-color-main, 10%);
		}
		.remove-custom-day,
		.edit-custom-day {
			transform: translateX(0px);
			opacity: 1;
		}
	}
	.custom-day-periods {
		padding-top: 10px;
		.custom-day-period {
			background-color: #f1f4fb;
			color: $headings-color;
			color: $color-faded;
			padding: 4px;
			border-radius: $border-radius-xs;
			font-weight: $body-font-weight-bold;
			font-size: floor($font-size-base * 0.9);
			& + .custom-day-period {
				margin-top: 10px;
			}
		}
	}
	.custom-day-month {
		font-size: $font-size-base * 1.2;
		line-height: 1;
		color: #9da8d5;
	}
	&.custom-day-off {
		.custom-day-number {
			color: #cd4949;
		}
		.custom-day-month {
			color: #cf9797;
		}
	}
}

.add-custom-day-w {
	border: 3px dotted rgba(0, 0, 0, 0.1);
	margin-right: 15px;
	width: 140px;
	flex: 0 0 140px;
	text-align: center;
	position: relative;
	cursor: pointer;
	display: block;
	outline: none;
	box-shadow: none;
	min-height: 115px;
	border-radius: $border-radius;
	.add-custom-day-i {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.add-day-graphic-w {
		width: 60px;
		height: 60px;
		position: relative;
		margin: 0px auto;
	}
	.add-day-plus {
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 50%;
		height: 24px;
		width: 24px;
		background-color: $brand-primary;
		box-shadow: 0px 0px 0px 10px rgba(208, 213, 220, 0.3);
		color: #fff;
		transform: translate(-50%, -50%);
		transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
		i {
			position: absolute;
			display: block;
			top: 50%;
			left: 50%;
			font-size: 10px;
			transform: translate(-45%, -47%);
			transition: all 0.2s ease;
		}
	}
	&:hover {
		border-color: $brand-primary;
		border-style: solid;
		.add-day-plus {
			box-shadow: 0px 0px 0px 15px rgba(208, 213, 220, 0.3);
			transform: translate(-50%, -50%) scale(1.2);
			i {
			}
		}
		.add-day-label {
			transform: translateY(5px);
		}
	}
	.add-day-label {
		color: $headings-color;
		font-weight: $body-font-weight-bold;
		font-size: $body-font-size-s;
		margin-top: 5px;
		white-space: nowrap;
		transition: all 0.2s cubic-bezier(0.25, 1.4, 0.5, 1.35);
	}
	&.os-loading {
		.add-day-plus {
			color: rgba(255, 255, 255, 0.4);
			&:after {
				@include loading-circle($brand-primary, 52px);
			}
		}
		animation: animate_appointment_small_box 0.8s ease infinite;
	}
}

Back