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

@import '../variables';

// small screens
@media (max-width: 487px) {
	.logo-home-link-img {
		display: inline-block;
		margin-top: 8px;
		width: 50px;
		padding: 8px !important;
	}
	.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: $stepper-nav-height 0.25rem;
	}
	.bottom-step-buttons {
		padding: 0;
		.contained-in-main-column {
			padding: 0.5rem;
		}
	}
	#creation_stepper {
		.logo-home-link {
			padding: 0;
			margin: 0;
			img {
				padding: 0;
				margin: 0;
			}
		}
		.step-info {
			height: 4.5rem;
		}
		.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: 488px) {
	.is-hidden-smallest-screen {
		display: block;
	}
	.is-visible-smallest-screen {
		display: none;
	}
	.feedback-container {
		//position: fixed;
	}

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

			td span,
			.p-ripple {
				width: $cell-size-desktop;
				height: $cell-size-desktop;
			}
		}
	}
}

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

		input {
			width: 80%;
		}
	}
}