select dates text integration colors

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

@@ -2,7 +2,8 @@
 	<div class="columns">
 		<div class="column">
 			<!--				ajouter une date-->
-			<button class="btn btn--primary" (click)="addChoice()">
+			<button class="button is-primary" (click)="addChoice()">
+				<i class="fa fa-plus"></i>
 				{{ 'dates.add' | translate }}
 			</button>
 		</div>
@@ -21,12 +22,23 @@
 				cdkDrag
 				[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }"
 			>
-				<span class="button is-default">
+				<!--				<span class="button is-default">-->
-					<i class="icon fa fa-arrows-v"></i>
+				<!--					<i class="icon fa fa-arrows-v"></i>-->
-					<span *ngIf="choice.date_object">
+				<!--					<span *ngIf="choice.date_object">-->
-						{{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
+				<!--						{{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
-					</span>
+				<!--					</span>-->
-				</span>
+				<!--				</span>-->
+				<div class="columns">
+					<div class="column">
+						<label for="dateChoices_{{ id }}">
+							Date {{ id + 1 }} - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
+						</label>
+					</div>
+					<div class="column has-text-right">
+						<span class="format-helper">JJ/MM/AAAA</span>
+					</div>
+				</div>
+
 				<input
 					[(ngModel)]="choice.date_input"
 					class="date-choice-item"
@@ -34,16 +46,16 @@
 					id="dateChoices_{{ id }}"
 					type="date"
 				/>
-				<button (click)="dateChoices.splice(id, 1)" class="btn btn-warning">
+				<hr />
-					<i class="fa fa-times" aria-hidden="true"></i>
+				<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
-				</button>
+					<i class="fa fa-trash-o" aria-hidden="true"></i>
-				<br />
+					Supprimer la date
-
+				</div>
 				<div *ngIf="hasSeveralHours" class="several-times">
 					<br />
 					<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list>
 					<div class="text-right">
-						<button (click)="addTimeToDate(choice, id)" class="btn btn--primary">
+						<button (click)="addTimeToDate(choice, id)" class="button is-primary">
 							<i class="fa fa-plus"></i>
 							{{ 'dates.add_time' | translate }}
 							<i class="fa fa-clock-o"></i>

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

@@ -1,26 +1,70 @@
+@import '../../../../../../../styles/variables';
+
 .day-weekend {
 	background: #dccfed;
 }
+
 .button {
 	min-width: 9ch;
 }
+
 .icon {
 	margin-right: 1ch;
 	margin-left: 1ch;
 	display: inline-block;
 }
+
 .several-times {
 	padding-left: 2em;
 	width: 96.5%;
 }
+
 .date-choice {
-	&:nth-child(odd) {
+	margin-bottom: 0.5em;
-		background: #fbf8ff;
+	border-radius: 0.25em;
-		&.day-weekend {
+	background: $bg-grey;
-			background: #d7cae9;
+
+	.columns {
+		margin-bottom: 0;
 	}
+	label {
+		font-weight: 600;
 	}
+	input,
+	.button {
+		width: 100%;
+		display: block;
 	}
+	hr {
+		margin: 0.5em -1em;
+		background: $rules;
+	}
+	//&.day-weekend {
+	//	background: mix($legend_color_2, $grey-lighter);
+	//}
+
+	//&:nth-child(odd) {
+	//	background: $grey-lighter;
+	//
+	//	&.day-weekend {
+	//		background: mix($d-neutral, $grey-lighter);
+	//	}
+	//}
+}
+
 .date-choice-item {
 	width: 75%;
 }
+
+.button .fa {
+	margin-left: 1ch;
+	display: inline-block;
+}
+
+.delete-date {
+	color: $secondary_color !important;
+
+	.fa {
+		color: $secondary_color !important;
+	}
+}

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

@@ -12,7 +12,7 @@ export class StepThreeComponent implements OnInit {
 	step_max: any;
 	@Input()
 	form: any;
-	public mode_calendar = true;
+	public mode_calendar = false;
 
 	constructor(public pollService: PollService) {
 		this.pollService.step_current = 3;

src/styles/partials/_datepicker.scss

@@ -0,0 +1,80 @@
+// calendar primeng
+.p-datepicker {
+	border: solid 1px $logo_color;
+	padding: 0.5em;
+	margin: 1em auto;
+
+	.p-datepicker-title,
+	.p-datepicker-calendar thead tr th span {
+		color: $secondary_color !important;
+		text-align: center;
+		width: 100%;
+		display: block;
+	}
+
+	p-button,
+	button {
+		border: solid 1px $secondary_color !important;
+		color: $secondary_color !important;
+	}
+
+	.p-datepicker-buttonbar {
+		margin-top: 0.5em;
+	}
+
+	.p-datepicker-month {
+		margin-right: 1em;
+	}
+
+	.p-datepicker-weeknumber span {
+		border-right: 1px solid $secondary_color;
+	}
+
+	.p-datepicker-today span {
+		font-weight: bold;
+		border: solid 3px $secondary_color !important;
+		background: $white;
+	}
+
+	.p-datepicker-calendar td span {
+		padding: 1.5em 0.5em;
+		width: 3.5em;
+		transition: all ease 0.5s;
+		background: $white;
+		border: solid 1px $secondary_color;
+		color: $secondary_color;
+
+		&:hover {
+			background: mix($white, $secondary_color);
+			color: $white;
+			transition: all ease 0.2s;
+		}
+	}
+
+	table td > span {
+		border-radius: 0.25em;
+	}
+
+	.p-highlight {
+		background: $secondary_color !important;
+		color: $white !important;
+	}
+
+	.p-disabled {
+		background: $d-grey;
+		color: $grey;
+	}
+
+	.p-datepicker-other-month {
+		color: white;
+	}
+
+	// weekend days
+	tr > td {
+		&:nth-of-type(6),
+		&:nth-of-type(7) {
+			//border-left: 1px solid $border-color;
+			background: $bg-grey;
+		}
+	}
+}

src/styles/partials/_forms.scss

@@ -1,4 +1,7 @@
 @charset "UTF-8";
+
+@import 'datepicker';
+
 .input:hover,
 input:hover,
 select:hover,
@@ -265,81 +268,6 @@ mat-checkbox {
 	padding: 1em;
 }
 
-// calendar primeng
-.p-datepicker {
-	border: solid 1px $logo_color;
-	padding: 0.5em;
-	margin: 1em auto;
-
-	.p-datepicker-title,
-	.p-datepicker-calendar thead tr th span {
-		color: $secondary_color !important;
-		text-align: center;
-		width: 100%;
-		display: block;
-	}
-
-	p-button,
-	button {
-		border: solid 1px $secondary_color !important;
-		color: $secondary_color !important;
-	}
-	.p-datepicker-buttonbar {
-		margin-top: 0.5em;
-	}
-	.p-datepicker-month {
-		margin-right: 1em;
-	}
-
-	.p-datepicker-weeknumber span {
-		border-right: 1px solid $secondary_color;
-	}
-
-	.p-datepicker-today span {
-		font-weight: bold;
-		border: solid 3px $secondary_color !important;
-		background: $white;
-	}
-
-	.p-datepicker-calendar td span {
-		padding: 1.5em 0.5em;
-		width: 3.5em;
-		transition: all ease 0.5s;
-		background: $white;
-		border: solid 1px $secondary_color;
-		color: $secondary_color;
-
-		&:hover {
-			background: mix($white, $secondary_color);
-			color: $white;
-			transition: all ease 0.2s;
-		}
-	}
-
-	table td > span {
-		border-radius: 0.25em;
-	}
-	.p-highlight {
-		background: $secondary_color !important;
-		color: $white !important;
-	}
-	.p-disabled {
-		background: $d-grey;
-		color: $grey;
-	}
-	.p-datepicker-other-month {
-		color: white;
-	}
-	// weekend days
-	tr > td {
-		&:nth-of-type(6),
-		&:nth-of-type(7) {
-			//border-left: 1px solid $border-color;
-			background: $grey-lighter;
-		}
-	}
-}
-
 .advanced-config {
 	.box {
 		background: $light;

src/styles/variables.scss

@@ -25,7 +25,8 @@ $beige-lighter: #eff0eb;
 
 $d-primary: #3e3882; // bleu 800
 $d-primary-intense: #6359cf; // bleu 600
-$d-grey: #f6f5fd;
+$d-grey: #f6f5fd; // bleu 300
+$d-rule: #e2e0fa; // bleu 100
 $d-neutral: #767486;
 $d-alt: #a9607f;
 
@@ -42,6 +43,7 @@ $d-error-text: #d51b38;
 $primary_color: $d-primary;
 $primary: $d-primary;
 $secondary_color: $d-primary-intense;
+$bg-grey: $d-grey;
 $font_color: $black;
 $logo_color: $d-primary;
 $logo_color_2: $d-primary-intense;
@@ -49,6 +51,7 @@ $legend_color: $d-info-text;
 $legend_color_2: $d-info;
 $choice_select_border_color: $d-info;
 $hover-color: $d-neutral;
+$rules: $d-rule;
 $border-color: $d-neutral;
 $grey-dark: $d-primary;
 $grey-lighter: $beige-light;