tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

datepicker cell size

Browse Source
This commit is contained in:
Tykayn 2022-02-11 12:11:53 +01:00 committed by tykayn
parent 3670a7efb2
commit 8a39c43ead
3 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/styles/partials/_datepicker.scss
View File

@ -89,7 +89,7 @@ p-calendar,
.p-datepicker-calendar { .p-datepicker-calendar {
td { td {
width: $cell-size; width: $cell-size-datepicker-small;
padding: 0.15rem 0.25rem; padding: 0.15rem 0.25rem;
} }
@ -97,8 +97,8 @@ p-calendar,
.p-ripple { .p-ripple {
margin: 0; margin: 0;
padding: 0.25em; padding: 0.25em;
width: $cell-size; width: $cell-size-datepicker-small;
height: $cell-size; height: $cell-size-datepicker-small;
transition: all ease 0.5s; transition: all ease 0.5s;
background: $white; background: $white;
border: solid 1px $primary_color; border: solid 1px $primary_color;

34
src/styles/partials/_responsive.scss
View File

@ -5,6 +5,7 @@
#creation_stepper { #creation_stepper {
.step-title-poll { .step-title-poll {
font-size: 0.85rem; font-size: 0.85rem;
max-width: 20ch;
} }
.title-section { .title-section {
width: 40%; width: 40%;
@ -14,6 +15,23 @@
} }
} }
} }
@media (min-width: 341px) {
// calendar datepicker cells
.p-datepicker {
.p-datepicker-calendar {
td {
width: $cell-size-datepicker-desktop;
}
td span,
.p-ripple {
width: $cell-size-datepicker-desktop;
height: $cell-size-datepicker-desktop;
}
}
}
}
@media (max-width: 400px) { @media (max-width: 400px) {
#creation_stepper { #creation_stepper {
.title-section { .title-section {
@ -49,7 +67,7 @@
padding: calc(56px + 32px) 1rem; padding: calc(56px + 32px) 1rem;
} }
.bottom-step-buttons { .bottom-step-buttons {
padding: 0.25rem; padding: 0.25rem 0;
.contained-in-main-column { .contained-in-main-column {
padding: 0.5rem; padding: 0.5rem;
} }
@ -87,20 +105,6 @@
.feedback-container { .feedback-container {
//position: fixed; //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 // wide screen like desktop

4
src/styles/variables.scss
View File

@ -83,8 +83,8 @@ $stepper-nav-height: 56px;
$home-nav-height: 56px; $home-nav-height: 56px;
$home-nav-height-small: 3.5rem; $home-nav-height-small: 3.5rem;
// datepicker // datepicker
$cell-size: 30px; $cell-size-datepicker-small: 30px;
$cell-size-desktop: 40px; $cell-size-datepicker-desktop: 40px;
// css vars // css vars
:root { :root {