style helvetica, color on first step

src/app/app.component.html

@@ -4,19 +4,22 @@
 	</mat-sidenav>
 
 	<mat-sidenav-content>
-		<div id="big_container" [class]="themeClass">
+		<div class="sidenav-content">
-			<app-header
+			le contenu de side nav
-				*ngIf="onHomePage || environment.display_menu_creation"
-				[appTitle]="appTitle"
-				[appLogo]="appLogo"
-			></app-header>
-			<div [class.container]="!onHomePage">
-				<main [@routeAnimations]="prepareRoute(outlet)">
-					<router-outlet #outlet></router-outlet>
-				</main>
-				<app-feedback></app-feedback>
-			</div>
 		</div>
-		<app-footer></app-footer>
 	</mat-sidenav-content>
 </mat-sidenav-container>
+<div id="big_container" [class]="themeClass">
+	<app-header
+		*ngIf="onHomePage || environment.display_menu_creation"
+		[appTitle]="appTitle"
+		[appLogo]="appLogo"
+	></app-header>
+	<div [class.container]="!onHomePage">
+		<main [@routeAnimations]="prepareRoute(outlet)">
+			<router-outlet #outlet></router-outlet>
+		</main>
+		<app-feedback></app-feedback>
+	</div>
+</div>
+<app-footer></app-footer>

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

@@ -13,7 +13,6 @@
 					<input
 						class="input is-fullwidth"
 						#title
-						[placeholder]="'creation.choose_title_placeholder' | translate"
 						formControlName="title"
 						(keyup)="pollService.updateSlug()"
 						(blur)="pollService.updateSlug()"
@@ -29,11 +28,6 @@
 			<div class="columns">
 				<div class="column">
 					<label for="descr">Description (optionnel)</label>
-					<!--					<div class="rich-text-toggle">-->
-					<!--						<label for="richTextMode">mode de saisie avancée</label>-->
-
-					<!--						<mat-checkbox formControlName="richTextMode" id="richTextMode"></mat-checkbox>-->
-					<!--					</div>-->
 					<div class="rich-toolbar" *ngIf="pollService.form.value.richTextMode">
 						richTextMode activé
 					</div>
@@ -43,7 +37,6 @@
 						matInput
 						id="descr"
 						class="is-large is-full input"
-						placeholder="Description"
 						formControlName="description"
 						required
 						maxlength="300"

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

@@ -63,9 +63,10 @@
 			<div class="column">
 				<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
 			</div>
-			<div class="column is-narrow has-text-right">
+			<div class="column has-text-right">
-				<a class="shortcut cancel-button" (click)="cancelDialog()">
+				<a class="" (click)="cancelDialog()">
-					<i class="fa fa-times"></i>
+					Annuler
+					<span class="cancel-button"><i class="fa fa-times"></i></span>
 				</a>
 			</div>
 		</div>

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

@@ -1,50 +1,43 @@
 @import '../../../../styles/variables';
-.step-info {
+
-	.title.step-title-poll {
+#creation_stepper {
-		font-size: 0.85rem;
+	.step-bar-container {
-		color: $border-color;
+		margin: 1rem 0 2rem;
+		height: 0.6em;
+		display: inline-block;
+		min-width: 1px;
+		background: $d-grey !important;
+		width: 100%;
 	}
-}
+
-.step-bar-container {
+	.step-bar-progress {
-	margin: 1em 0;
+		position: relative;
-	height: 0.6em;
+		top: -0.5em;
-	display: inline-block;
+		left: 0;
-	min-width: 1px;
+		height: 0.5em;
-	background: $d-grey !important;
+		display: inline-block;
-	width: 100%;
+		min-width: 1px;
-}
+		background: $primary_color;
-.step-bar-progress {
-	position: relative;
-	top: -0.5em;
-	left: 0;
-	height: 0.5em;
-	display: inline-block;
-	min-width: 1px;
-	background: $primary_color;
-}
-.shortcut {
-	background: $dark-lavender;
-	color: white;
-	padding: 1em;
-	margin: 1em;
-	display: inline-block;
-	border-radius: 100%;
-	text-align: center;
-	width: 4em;
-	&.is-active {
-		background: $font_color;
 	}
-	&:hover {
+
-		background: $clicked-color;
+	.shortcut {
-	}
+		padding: 1em;
-	&.cancel-button {
+		margin: 1em;
-		background: $border-color;
+		display: inline-block;
-		margin-top: -0.5em;
+		text-align: center;
-		&:hover {
+		width: 4em;
+
+		&.is-active {
 			background: $font_color;
 		}
+
+		&.cancel-button {
+			background: $border-color;
+			margin-top: -0.5em;
+
+			&:hover {
+				background: $font_color;
+			}
+		}
 	}
 }
-.poll-title {
-	color: $d-neutral;
-}

src/styles/dev-utilities/_debug.scss

@@ -15,6 +15,9 @@
 }
 
 label {
+	color: $font_color;
+	font-wieght: 600;
+
 	&[for] {
 		cursor: pointer;
 	}

src/styles/partials/_forms.scss

@@ -12,7 +12,7 @@ input.is-hovered,
 select.is-hovered,
 .is-hovered.textarea,
 .select select.is-hovered {
-	border-color: $border-color !important;
+	border-color: $font_color !important;
 }
 
 app-step-one,
@@ -41,8 +41,6 @@ select,
 textarea {
 	display: inline-block;
 	padding: 1rem;
-	border: 1px solid $secondary_color;
-	border-bottom: 3px solid $primary_color;
 	width: calc(100% - 45px);
 	margin-right: 2px;
 	margin-bottom: 1em;
@@ -53,12 +51,19 @@ textarea {
 	}
 }
 
+textarea,
+input,
+.input,
+.textarea,
+select,
+.select {
+	border: solid 1px $font_color;
+}
 input,
 select,
 textarea {
 	@extend .clickable;
-	margin-bottom: 0.25rem;
+	margin-bottom: 2rem;
-	border-bottom: 2px solid $primary_color;
 	padding: 0.5rem;
 
 	&:active,
@@ -67,10 +72,6 @@ textarea {
 		color: $primary_color;
 	}
 
-	&.ng-invalid {
-		border: $warning 3px solid !important;
-	}
-
 	&[required] {
 		&:after {
 			content: '*';
@@ -131,7 +132,8 @@ select {
 }
 
 input {
-	@extend .input, .text-ellipsis;
+	border-color: #4e4c59 !important;
+	@extend .text-ellipsis;
 }
 
 textarea {
@@ -288,6 +290,25 @@ mat-checkbox {
 	}
 }
 
+.step {
+	.title {
+		color: $primary_color;
+	}
+
+	.step-counter-text {
+		color: $primary_color;
+		font-size: 1rem;
+		line-height: 1.25rem;
+	}
+}
+.mat-drawer-container {
+	.step-info {
+		.step-title-poll {
+			font-size: 0.85rem !important;
+			color: $d-neutral !important;
+		}
+	}
+}
 // resume de la création de sondage
 .step-resume {
 	.content {
@@ -310,6 +331,7 @@ mat-checkbox {
 		margin: 0.5em -1em;
 		background: $rules;
 	}
+
 	.go-to-step,
 	.custom-action {
 		@extend .clickable;
@@ -327,3 +349,11 @@ mat-checkbox {
 .block-resume {
 	@extend .rounded-block;
 }
+label {
+	font-family: $default_font;
+	color: $font_color;
+	font-weight: bold;
+	font-size: 0.85rem;
+	line-height: 1rem;
+	margin-bottom: 0.5rem;
+}

src/styles/partials/_main.scss

@@ -2,6 +2,7 @@
 body,
 html {
 	background: $white;
+	color: $font_color;
 }
 main {
 	display: block;

src/styles/partials/_responsive.scss

@@ -1,10 +1,11 @@
+// small screens
+@media (min-width: 600px) {
+	.feedback-container {
+		position: fixed;
+	}
+}
+// wide screen like desktop
 @media (min-width: $widescreen) {
-	//select,
-	//input,
-	//label + select,
-	//label {
-	//	width: 45%;
-	//}
 	.date-choice > input:first-of-type {
 		width: 75%;
 	}
@@ -15,6 +16,7 @@
 	}
 	.time-choice {
 		padding: 1em;
+
 		input {
 			width: 80%;
 		}

src/styles/partials/_typo.scss

@@ -4,12 +4,10 @@ h3,
 h4,
 h5,
 h6 {
-	@extend .title;
 	font-family: $title_font;
 }
 
 h1 {
-	@extend .is-1;
 	font-family: $title_font;
 	&::after {
 		background-color: $primary_color;
@@ -18,17 +16,14 @@ h1 {
 }
 
 h2 {
-	@extend .is-2;
 	font-family: $title_font;
 }
 
 h3 {
-	@extend .is-3;
 	font-family: $title_font;
 }
 
 h4 {
-	@extend .is-4;
 	font-family: $title_font;
 }
 

src/styles/variables.scss

@@ -25,7 +25,7 @@ $beige-lighter: #eff0eb;
 
 $d-primary: #3e3882; // bleu 800
 $d-primary-intense: #6359cf; // bleu 600
-$d-grey: #f6f5fd; // bleu 300
+$d-grey: #e3e3ea; // bleu 300
 $d-blue30: #f6f5fd; // bleu 300
 $d-rule: #e2e0fa; // bleu 100
 $d-neutral: #767486;
@@ -63,5 +63,5 @@ $warning: $d-warning;
 $danger: $d-error;
 $success: $d-success;
 
-$default_font: 'helvetica';
+$default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
-$title_font: 'helvetica', 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono';
+$title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';