funky-framadate-front/src/styles/partials/_responsive.scss

@import '../variables';

// small screens
@media (max-width: 340px) {
	#creation_stepper {
		.step-title-poll {
			font-size: 0.85rem;
			max-width: 20ch;
		}
		.title-section {
			width: 40%;
		}
		.menu-button {
			padding: 0.5rem;
		}
	}
}

@media (min-width: 341px) {
	// calendar datepicker cells
	.p-datepicker {
		.p-datepicker-calendar {
			td {
				width: $cell-size-datepicker;
			}

			td span,
			.p-ripple {
				width: $cell-size-datepicker;
				height: $cell-size-datepicker;
			}
		}
	}
}
@media (max-width: 400px) {
	#creation_stepper {
		.title-section {
			width: 45%;
		}
		.menu-button {
			padding: 1rem;
		}
	}

	.p-datepicker {
		.p-datepicker-calendar {
			td {
				width: $cell-size-datepicker-small;
			}

			td span,
			.p-ripple {
				width: $cell-size-datepicker-small;
				height: $cell-size-datepicker-small;
			}
		}
	}
}
@media (max-width: 569px) {
	.logo-home-link-img {
		display: inline-block;
		width: 50px;
	}
	.title-section {
		width: 60%;
	}

	.is-hidden-smallest-screen {
		display: none;
	}
	.is-visible-smallest-screen {
		display: block;
	}
	.big-header {
		height: $home-nav-height-small;
	}

	.step {
		padding: 120px 10px;
	}
	#creation_stepper {
		.logo-home-link {
			padding: 0;
			margin: 0;
			img {
				padding: 0;
				margin: 0;
			}
			&:hover {
				background: transparent;
			}
		}
		.cancel-button {
			padding: 0.5rem 0.75rem;
			min-width: 1em;
			line-height: 1.5rem;
			margin-top: 0;
		}
	}

	.step-title-poll {
		max-width: 18ch;
	}
}
@media (min-width: 570px) {
	.is-hidden-smallest-screen {
		display: block;
	}
	.is-visible-smallest-screen {
		display: none;
	}
}

// wide screen like desktop
@media (min-width: $widescreen) {
	.step {
		padding: 120px 0;
	}
	.date-choice > input:first-of-type {
		width: 75%;
	}
	.date-choice .btn--primary,
	.several-times {
		margin-left: 1rem;
		display: inline-block;
	}
	.time-choice {
		input {
			width: 80%;
		}
	}
}