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

65 lines
929 B
SCSS

// small screens
@media (max-width: 487px) {
.step {
padding: 0.25rem;
}
.bottom-step-buttons {
padding: 0;
.contained-in-main-column {
padding: 0.5rem;
}
}
#creation_stepper {
.step-info {
height: 4.5rem;
}
.cancel-button {
padding: 0.5rem 0.75rem;
min-width: 1em;
line-height: 1.5rem;
margin-top: 0;
}
}
}
@media (min-width: 380px) {
.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%;
}
}
}