style calendar small screen and header button

src/app/core/services/poll.service.ts

@@ -50,7 +50,7 @@ export class PollService implements Resolve<Poll> {
 	public showDateInterval = false;
 	public allowSeveralHours = false;
 	public richTextMode = false;
-	public mode_calendar = false;
+	public mode_calendar = true; // default input to select dates in creation step
 	public calendar: Date[] = [new Date()];
 	public disabled_dates: Date[] = [];
 

src/app/features/administration/form/steps/step-three/step-three.component.scss

@@ -24,7 +24,7 @@
 }
 
 .date-input-selector {
-	padding: 0.5rem 1rem;
+	padding: 0.25rem 1rem;
 }
 
 .hide-back-button {

src/app/features/administration/stepper/stepper.component.html

@@ -61,11 +61,11 @@
 			/>
 		</a>
 		<h1 class="title-section">
-			<a class="logo-home-link pull-left" routerLink="/" routerLinkActive="active">
+			<span class="logo-home-link pull-left">
 				<span class="step-title-poll" *ngIf="pollService.step_current == 1">
 					{{ 'creation.title' | translate }}
 				</span>
-			</a>
+			</span>
 
 			<div *ngIf="pollService.step_current > 1">
 				<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">

src/app/features/administration/stepper/stepper.component.scss

@@ -27,7 +27,6 @@
 		max-width: 45ch;
 		text-overflow: ellipsis;
 		display: inline-block !important;
-		overflow: hidden;
 	}
 
 	.columns,

src/styles/libraries/_overrides.scss

@@ -59,3 +59,13 @@ button .icon:first-child:last-child,
 	margin-left: 1rem;
 	margin-right: auto;
 }
+.p-datepicker .p-datepicker-calendar td span,
+.p-datepicker .p-datepicker-calendar .p-ripple {
+	transition: outline ease 0.1s;
+}
+.p-button:focus,
+.p-datepicker table td > span:focus,
+.p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
+.p-datepicker .p-datepicker-header .p-datepicker-next:focus {
+	outline: 3px solid $black !important;
+}

src/styles/partials/_buttons.scss

@@ -28,7 +28,6 @@ button {
 
 .btn-primary {
 	@extend .is-primary;
-	color: $white !important;
 }
 
 .is-warning {

src/styles/partials/_datepicker.scss

@@ -41,8 +41,10 @@ p-calendar,
 		button.p-datepicker-next {
 			border: solid 1px $d-primary !important;
 			border-radius: 0.25rem !important;
-			width: 54px !important;
+			width: 70px;
-			height: 54px !important;
+			display: inline-block;
+			height: 52px;
+			text-align: center;
 		}
 	}
 
@@ -104,7 +106,7 @@ p-calendar,
 			padding: 0.25em;
 			width: $cell-size-datepicker;
 			height: $cell-size-datepicker;
-			transition: all ease 0.5s;
+			transition: all ease 0.15s;
 			background: $white;
 			border: solid 1px $primary_color;
 			color: $primary_color;
@@ -114,6 +116,9 @@ p-calendar,
 				color: $white;
 				transition: all ease 0.2s;
 			}
+			&:focus {
+				@extend .outlined;
+			}
 
 			&.p-disabled {
 				@extend .striked-background;

src/styles/partials/_forms.scss

@@ -15,16 +15,6 @@ select.is-hovered,
 	border-color: $font-color !important;
 }
 
-app-step-one,
-app-step-two,
-app-step-three,
-app-step-four,
-app-step-five,
-app-step-six,
-app-step-seven {
-	display: block;
-}
-
 input,
 select,
 textarea {
@@ -40,6 +30,7 @@ textarea {
 }
 
 button,
+.p-link,
 .button {
 	&:focus {
 		@extend .outlined;
@@ -68,7 +59,7 @@ select,
 textarea {
 	@extend .clickable;
 	margin-bottom: 1rem;
-	padding: 0.5rem;
+	padding: 0.25rem;
 
 	&:active,
 	&:focus,
@@ -226,7 +217,6 @@ mat-checkbox {
 	display: block;
 	background: white;
 	border-radius: 4px;
-	overflow: hidden;
 	padding: 1em 2em;
 }
 
@@ -294,8 +284,6 @@ mat-checkbox {
 	margin: 0 auto;
 	padding: 7rem 0;
 	box-sizing: border-box;
-	overflow-y: auto;
-	overflow-x: hidden;
 	@extend .top-padding-nav;
 
 	.title {
@@ -306,11 +294,9 @@ mat-checkbox {
 	}
 
 	.columns {
-		margin-left: 0;
+		margin: 0;
-		margin-right: 0;
-		margin-top: 0;
-
 		.column {
+			margin: 0;
 			padding-left: 0;
 			padding-right: 0;
 		}

src/styles/partials/_responsive.scss

@@ -21,13 +21,13 @@
 	.p-datepicker {
 		.p-datepicker-calendar {
 			td {
-				width: $cell-size-datepicker-desktop;
+				width: $cell-size-datepicker;
 			}
 
 			td span,
 			.p-ripple {
-				width: $cell-size-datepicker-desktop;
+				width: $cell-size-datepicker;
-				height: $cell-size-datepicker-desktop;
+				height: $cell-size-datepicker;
 			}
 		}
 	}
@@ -41,6 +41,20 @@
 			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 {
@@ -94,9 +108,6 @@
 	.is-visible-smallest-screen {
 		display: none;
 	}
-	.feedback-container {
-		//position: fixed;
-	}
 }
 
 // wide screen like desktop

src/styles/partials/global.scss

@@ -8,12 +8,9 @@ html {
 	* {
 		box-sizing: border-box;
 	}
-
-	overflow-x: hidden;
 }
 body {
 	height: 100%;
-	overflow-x: hidden;
 }
 
 form {
@@ -27,7 +24,6 @@ main {
 .min-height {
 	padding-bottom: 1em;
 	min-height: 50vh;
-	overflow-x: hidden;
 }
 
 .content {
@@ -68,7 +64,6 @@ main {
 .contained-in-main-column {
 	max-width: $main-column-width;
 	margin: 0 auto;
-	width: 100vw;
 	display: block;
 }
 .contained-in-large-column {

src/styles/variables.scss

@@ -84,7 +84,7 @@ $home-nav-height: 2rem;
 $home-nav-height-small: 3.5rem;
 // datepicker
 $cell-size-datepicker-small: 30px;
-$cell-size-datepicker-desktop: 40px;
+$cell-size-datepicker-desktop: 42px;
 $cell-size-datepicker: 50px;
 
 // css vars