diff --git a/src/styles/partials/_datepicker.scss b/src/styles/partials/_datepicker.scss index 71f8c1e2..e239e437 100644 --- a/src/styles/partials/_datepicker.scss +++ b/src/styles/partials/_datepicker.scss @@ -89,7 +89,7 @@ p-calendar, .p-datepicker-calendar { td { - width: $cell-size; + width: $cell-size-datepicker-small; padding: 0.15rem 0.25rem; } @@ -97,8 +97,8 @@ p-calendar, .p-ripple { margin: 0; padding: 0.25em; - width: $cell-size; - height: $cell-size; + width: $cell-size-datepicker-small; + height: $cell-size-datepicker-small; transition: all ease 0.5s; background: $white; border: solid 1px $primary_color; diff --git a/src/styles/partials/_responsive.scss b/src/styles/partials/_responsive.scss index 069ecbeb..060b47d5 100644 --- a/src/styles/partials/_responsive.scss +++ b/src/styles/partials/_responsive.scss @@ -5,6 +5,7 @@ #creation_stepper { .step-title-poll { font-size: 0.85rem; + max-width: 20ch; } .title-section { 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) { #creation_stepper { .title-section { @@ -49,7 +67,7 @@ padding: calc(56px + 32px) 1rem; } .bottom-step-buttons { - padding: 0.25rem; + padding: 0.25rem 0; .contained-in-main-column { padding: 0.5rem; } @@ -87,20 +105,6 @@ .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 diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 8cd14c06..60432caf 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -83,8 +83,8 @@ $stepper-nav-height: 56px; $home-nav-height: 56px; $home-nav-height-small: 3.5rem; // datepicker -$cell-size: 30px; -$cell-size-desktop: 40px; +$cell-size-datepicker-small: 30px; +$cell-size-datepicker-desktop: 40px; // css vars :root {