striked background on calendar disabled dates

src/app/features/administration/form/date/list/day/day-list.component.html

@@ -37,7 +37,7 @@
 				/>
 				<hr />
 				<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
-					<img class="icon" aria-hidden="true" src="assets/icons/trash.cvg" />
+					<img class="icon" aria-hidden="true" src="assets/icons/trash.csv" />
 					Supprimer la date
 				</div>
 				<div *ngIf="hasSeveralHours" class="several-times">

src/app/features/administration/form/steps/step-one/step-one.component.html

@@ -44,11 +44,10 @@
 						class="text-info"
 						[ngClass]="{ 'has-background-warning': pollService.form.value.description.length === 300 }"
 					>
-						<span class="counter-current" *ngIf="pollService.form.value.description.length">
-							{{ pollService.form.value.description.length }} /
-						</span>
 						<p>
-							300 caractères maximum
+							<span class="counter-current" *ngIf="pollService.form.value.description.length">
+								{{ pollService.form.value.description.length }} / </span
+							>300 caractères maximum
 						</p>
 					</div>
 				</div>

src/styles/partials/_datepicker.scss

@@ -91,6 +91,9 @@ p-calendar,
 				color: $white;
 				transition: all ease 0.2s;
 			}
+			&.p-disabled {
+				@extend .striked-background;
+			}
 		}
 	}
 

src/styles/partials/_forms.scss

@@ -51,9 +51,11 @@ input,
 .textarea,
 select,
 .select {
-	@extend .clickable;
+	font-size: 1rem !important;
+	line-height: 1.25rem;
 	border: solid 1px $font_color;
 	max-width: 90vw !important;
+	@extend .clickable;
 	&:focus {
 		@extend .outlined;
 	}
@@ -84,8 +86,8 @@ textarea {
 .mat-checkbox-label,
 .mat-checkbox-layout .mat-checkbox-label {
 	max-width: 90vw;
-
 	overflow-x: auto;
+	@extend .clickable;
 }
 .button {
 	label {
@@ -329,4 +331,18 @@ label {
 	line-height: 1rem;
 	margin-bottom: 0.5rem;
 	display: block;
+	@extend .clickable;
+}
+
+.striked-background {
+	&:after {
+		content: '';
+		position: absolute;
+		border-top: 1px solid $border-color;
+		width: 4rem;
+		transform: rotate(45deg);
+		transform-origin: 0% 0%;
+		left: 0;
+		top: 0;
+	}
 }