planning/src/app/page.module.scss

@import "./variables.scss";

section.buttons {
	margin: 50px;
	margin-bottom: 15px;
	display: flex;
	justify-content: right;
	gap: 15px;

	@media (max-width: 920px) {
		margin-left: 100px;
		flex-direction: column;
	}

	@media (max-width: 768px) {
		margin: 15px;
	}

	article.selectionBar {
		position: relative;
		transition: 100ms ease;
		width: 250px;

		@media (max-width: 920px) {
			width: 100%;
		}

		button.selected {
			display: flex;
			justify-content: space-between;
			padding: 10px 16px;
			font-size: 15px;
			background: #dedfe3;
			color: $darkGray;
			border: none;
			transition: 100ms ease;
			cursor: pointer;
			width: 250px;

			@media (max-width: 920px) {
				width: 100%;
			}

			&:hover {
				background: darken(#dedfe3, 2.5);
				color: $darkGray;
			}

			.unfoldIconUp,
			.unfoldIconDown {
				font-size: 18px;
				transition: 200ms ease;
			}

			.unfoldIconDown {
				transform: rotate(180deg);
			}
		}

		div.choices {
			position: absolute;
			z-index: 50;
			display: flex;
			flex-direction: column;
			user-select: none;
			overflow: hidden;
			width: 100%;

			button.choice {
				padding: 10px 16px;
				font-size: 13px;
				color: $darkGray;
				background: #dedfe3;
				text-align: left;
				border: none;
				transition: 100ms ease;
				cursor: pointer;
				border-top: 1px solid #d9dce5;

				&:first-child {
					border-top: 1px solid #c8c8c8;
				}

				&:hover {
					color: $darkGray;
					background: darken(#dedfe3, 2.5);
				}
			}
		}
	}

	article.directions {
		display: flex;

		@media (max-width: 920px) {
			width: 100%;
		}

		button.directionButton {
			display: flex;
			gap: 5px;
			align-items: center;
			justify-content: center;
			padding: 10px 16px;
			font-size: 18px;
			border: none;
			background: #dedfe3;
			color: $darkGray;
			cursor: pointer;
			transition: 100ms ease;
			border-left: 1px solid #b8bac3;

			@media (max-width: 920px) {
				width: 100%;
			}

			&:first-child {
				border-left: none;
			}

			&:hover {
				background: darken(#dedfe3, 2.5);
				color: $darkGray;
			}

			.textContent {
				font-size: 15px;
			}
		}
	}
}

section.planning {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	margin-right: 50px;
	margin-left: 100px;
	margin-bottom: 75px;
	background: #f5f5f5;

	@media (max-width: 768px) {
		margin-left: 15px;
		margin-right: 15px;
		grid-template-columns: 1fr;
	}

	article.planningDay {
		div.title {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 18px 0;
			color: $white;
			background: $accentColor;
			border-left: 1px solid $accentColorDark;

			p.duration {
				font-size: 13px;
				color: #f4c5c9;
			}
		}

		div.dayEvents {
			display: flex;
			flex-direction: column;
			position: relative;

			div.hourPlaceholders {
				display: flex;
				flex-direction: column;
				position: relative;

				div.dayEvent {
					border-top: 1px solid $secondaryColor;
					border-left: 1px solid $secondaryColor;
					height: 75px;

					&:last-child {
						border-bottom: 1px solid $secondaryColor;
					}
				}
			}

			div.events div.event {
				position: absolute;
				width: 100%;
				background: $white;
				border-radius: 6px;
				border-left: 6px solid #00000000;
				padding: 5px;
				box-shadow: 0 0 10px #00000011;
				z-index: 10;

				&::before {
					content: attr(data-room);
					position: absolute;
					top: 6px;
					right: 6px;
					font-size: 12px;
					padding: 3px 5px;
					background: $accentColor;
					border-radius: 5px;
					color: $white;

					@media (max-width: 768px) {
						font-size: 15px;
					}
				}

				p.interval {
					font-size: 13px;
					color: $gray;

					@media (max-width: 768px) {
						font-size: 15px;
					}
				}

				p.title {
					font-weight: 700;
					margin-right: 20%;

					@media (max-width: 768px) {
						font-size: 20px;
					}
				}

				div.teacher {
					display: flex;
					align-items: center;
					gap: 5px;

					.teacherIcon {
						font-size: 16px;
					}

					p.teacherContent {
						font-size: 15px;

						@media (max-width: 768px) {
							font-size: 18px;
						}
					}
				}
			}
		}

		&:first-child {
			h3.title {
				border-left: none;
			}

			div.dayEvents div.hourPlaceholders div.dayEvent {
				&::before {
					content: attr(data-start) ":00";
					position: absolute;
					font-size: 13px;
					transform: translate(-130%, -50%);

					@media (max-width: 768px) {
						display: none;
					}
				}

				&:last-child::after {
					content: attr(data-end) ":00";
					position: absolute;
					font-size: 13px;
					transform: translate(-130%, 50%);
					bottom: 0;

					@media (max-width: 768px) {
						display: none;
					}
				}
			}
		}

		&:last-child div.dayEvents div.hourPlaceholders div.dayEvent {
			border-right: 1px solid $secondaryColor;
		}
	}
}