display all buttons on home, style accordingly, remove bulma buttons styles

src/app/core/components/home/home.component.html

@@ -3,20 +3,38 @@
 		<div class="landing container content">
 			<div class="columns presentation">
 				<div class="column">
-					<section class="buttons contained-in-main-column">
+					<section class="buttons-demo contained-in-main-column">
 						<h1 class="title is-1">titre h1</h1>
 						<h2 class="title is-2">titre h2</h2>
 						<h3 class="title is-3">titre h3</h3>
-						<button class="button is-primary is-disabled">bouton primaire inactif</button>
+						<button class="is-primary is-disabled">bouton primaire inactif</button>
-						<button class="button is-primary">bouton primaire</button>
+						<button class="is-primary">bouton primaire</button>
-						<button class="button is-primary is-thin">bouton primaire fin</button>
+						<button class="is-primary is-thin">bouton primaire fin</button>
-						<button class="button is-secondary is-disabled">bouton secondaire</button>
+						<button class="is-final">bouton succès</button>
-						<button class="button is-secondary">bouton secondaire</button>
+						<button class="is-secondary is-disabled">bouton secondaire inactif</button>
-						<button class="button is-secondary is-thin">bouton secondaire fin</button>
+						<button class="is-secondary">bouton secondaire</button>
-						<button class="button is-action">bouton action</button>
+						<button class="is-secondary is-thin">bouton secondaire fin</button>
-						<button class="button is-action">bouton action fin</button>
+						<button class="is-action">bouton action</button>
+						<button class="is-action is-thin">bouton action fin</button>
 					</section>
-
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
+					<br />
 					<h2 class="title is-2">
 						{{ 'config.landing_title' | translate }}
 					</h2>
@@ -25,14 +43,14 @@
 					</p>
 					<div class="columns">
 						<div class="column">
-							<button class="button is-fullwidth is-primary" routerLink="administration">
+							<button class="is-fullwidth is-primary" routerLink="administration">
 								{{ 'config.letsgo' | translate }}
 							</button>
 						</div>
 						<div class="column">
 							<button
 								id="open_popup_button"
-								class="button is-fullwidth is-secondary is-outlined"
+								class="is-fullwidth is-secondary is-outlined"
 								(click)="openModalFindPoll()"
 							>
 								{{ 'config.discover' | translate }}
@@ -67,7 +85,7 @@
 			<div class="top">
 				<button
 					id="close_dialog"
-					class="button no-outline cancel-button-reject pull-right has-no-border"
+					class="no-outline cancel-button-reject pull-right has-no-border"
 					(click)="focusOnCancelButton()"
 				>
 					{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
@@ -112,7 +130,7 @@
 								<button
 									type="submit"
 									role="button"
-									class="button is-outlined is-fullwidth is-info button-submit"
+									class="is-outlined is-fullwidth is-info button-submit"
 									[disabled]="
 										!storageService.vote_stack.owner.email.length ||
 										nonexistent_email === storageService.vote_stack.owner.email
@@ -129,10 +147,7 @@
 					<div class="poll-list">
 						<ul>
 							<li *ngFor="let p of storageService.userPolls">
-								<a
+								<a class="is-fullwidth padded" [routerLink]="'poll/' + p.custom_url + '/consultation'">
-									class="button is-fullwidth padded"
-									[routerLink]="'poll/' + p.custom_url + '/consultation'"
-								>
 									{{ p.title }}
 									<i class="fa fa-arrow-right pull-right"></i>
 								</a>

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

@@ -1,6 +1,6 @@
 <div class="admin-consultation min-height padded">
 	<h2 class="title is-2">Consulter le sondage</h2>
-	<button class="btn is-primary" [routerLink]="'/administration'">
+	<button class="is-primary" [routerLink]="'/administration'">
 		<i class="fa fa-pencil"></i>
 		{{ 'resume.edit' | translate }}
 	</button>

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

@@ -46,7 +46,7 @@
 				<button
 					(click)="pollService.removeAllTimes()"
 					*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
-					class="btn is-warning marged"
+					class="is-warning marged"
 					id="remove_time_button"
 				>
 					<i class="fa fa-trash" aria-hidden="true"></i>
@@ -55,7 +55,7 @@
 				<button
 					(click)="pollService.resetTimes()"
 					*ngIf="pollService.timeList.length && false == pollService.allowSeveralHours"
-					class="btn is-warning marged"
+					class="is-warning marged"
 					id="reset_time_button"
 				>
 					<i class="fa fa-refresh" aria-hidden="true"></i>

src/app/features/administration/form/text-select/text-select.component.html

@@ -2,13 +2,13 @@
 	<form [formGroup]="form">
 		<span class="columns">
 			<span class="column">
-				<button class="btn is-primary" (click)="addChoice()">
+				<button class="is-primary" (click)="addChoice()">
 					<i class="fa fa-plus"></i>
 					Ajouter un choix
 				</button>
 			</span>
 			<span class="column pull-right">
-				<button class="btn is-warning" (click)="reinitChoices()">
+				<button class="is-warning" (click)="reinitChoices()">
 					<i class="fa fa-recycle"></i>
 					Réinitialiser
 				</button>
@@ -22,7 +22,7 @@
 			<div class="form-row" [formGroup]="choice">
 				<div class="columns">
 					<div class="column">
-						<button class="btn btn-warning" (click)="deleteChoiceField(i)">
+						<button class="is-warning" (click)="deleteChoiceField(i)">
 							<i class="fa fa-times"></i>
 						</button>
 						{{ i * 1 + 1 }})

src/styles/dev-utilities/_helpers.scss

@@ -70,14 +70,8 @@
 	.go-to-step,
 	.custom-action {
 		@extend .clickable;
-		color: $secondary_color;
 		padding: 1.5em;
 		border-radius: 0.25em;
-
-		&:hover {
-			background: $secondary_color;
-			color: $white;
-		}
 	}
 }
 

src/styles/libraries/_frameworks.scss

@@ -4,8 +4,8 @@
 //@import '../../../node_modules/bulma/sass/base/_all.sass';
 //@import '../../../node_modules/bulma/sass/elements/button.sass';
 @import '../../../node_modules/bulma/sass/elements/container.sass';
-@import '../../../node_modules/bulma/sass/elements/title.sass';
+//@import '../../../node_modules/bulma/sass/elements/title.sass';
-@import '../../../node_modules/bulma/sass/form/_all.sass';
+//@import '../../../node_modules/bulma/sass/form/_all.sass';
 @import '../../../node_modules/bulma/sass/components/navbar.sass';
 @import '../../../node_modules/bulma/sass/layout/hero.sass';
 @import '../../../node_modules/bulma/sass/layout/section.sass';

src/styles/partials/_buttons.scss

@@ -1,42 +1,62 @@
 .outlined {
 	&:focus {
-		outline: #6359cf;
+		outline: $outline-color;
 		outline-style: solid;
+		outline-offset: 0.15rem;
 	}
 }
-a {
+
-	@extend .outlined;
-}
 button,
 .btn {
 	@extend .outlined;
-	@extend .button;
 }
 
 .btn--full {
 	@extend .is-block;
 }
 
-button {
+button,
-	&.is-white {
+a {
+	@extend .outlined;
+	text-align: center;
+	padding: 10px 30px;
+	border: 1px solid transparent;
+	box-sizing: border-box;
+	border-radius: 4px;
+	cursor: pointer;
+}
+
+.is-white {
 	&:hover {
 		background: $secondary_color;
 		color: $white;
 	}
 }
-	&:hover {
+.is-final {
-		outline-color: cadetblue;
-	}
-}
-
-.is-success {
 	background: #128149;
+	border-color: #128149;
 	color: #fff;
+	&:hover {
+		background: #07532d;
+		border-color: #07532d;
+	}
 }
 
 .is-primary {
 	background: #6359cf;
 	color: #fff;
+	border-color: #6359cf;
+	&.is-disabled {
+		background: #767486;
+	}
+	&:hover {
+		background-color: #3e3882;
+		border-color: #3e3882;
+		&.is-disabled {
+			background: #767486;
+			border-color: #6359cf;
+		}
+	}
 }
 
 .is-disabled {
@@ -48,7 +68,46 @@ button {
 	background: #fff;
 	color: #6359cf;
 	border-color: #6359cf;
+	&.is-disabled {
+		color: #767486;
+		border-color: #767486;
 	}
+	&:hover {
+		background-color: #f6f5fb;
+		border-color: #3e3882;
+		color: #3e3882;
+		&.is-disabled {
+			color: #767486;
+			border-color: #767486;
+		}
+	}
+}
+
+.is-thin {
+	font-size: 14px;
+	line-height: 18px;
+}
+
+.is-action {
+	background: #fff;
+	color: #6359cf;
+	border-radius: 100px;
+	border-color: transparent;
+	padding: 4px !important;
+
+	&:hover {
+		background-color: #e3e3ea;
+		border-color: #e3e3ea;
+		color: #3e3882;
+	}
+}
+
+.buttons-demo button {
+	float: left;
+	clear: both;
+	margin-bottom: 1rem;
+}
+
 .btn-primary {
 	@extend .is-primary;
 }

src/styles/partials/_datepicker.scss

@@ -60,10 +60,8 @@ p-calendar,
 		font-weight: normal;
 	}
 
-	p-button,
+	p-button {
-	button {
 		color: $primary_color !important;
-
 		&:hover {
 			color: $white !important;
 			background: $secondary_color !important;

src/styles/partials/_forms.scss

@@ -61,12 +61,6 @@ textarea {
 	@extend .clickable;
 	padding: 0.25rem 0.25rem 0.25rem 1rem;
 
-	&:active,
-	&:focus,
-	&:hover {
-		color: $primary_color;
-	}
-
 	&[required] {
 		&:after {
 			content: '*';

src/styles/partials/_navigation.scss

@@ -22,15 +22,6 @@ nav {
 		&::after {
 			display: none;
 		}
-
-		&.active,
-		&.is-active {
-			color: $white;
-			background: $primary_color !important;
-			&:hover {
-				background: $dark !important;
-			}
-		}
 	}
 }
 a {
@@ -45,13 +36,6 @@ a {
 		content: '';
 	}
 
-	&:hover {
-		&.next::before,
-		&.prev::after {
-			background-color: rgba($primary_color, 0.7);
-		}
-	}
-
 	span {
 		padding-right: 1rem;
 		padding-left: 1rem;

src/styles/variables.scss

@@ -37,6 +37,7 @@ $d-alt: #a9607f;
 
 $d-info: #ecf4ff;
 $d-info-text: #316ec7;
+$intense-blue: #0a76f6;
 $d-success: #ecfff5;
 $d-success-text: #128149;
 $d-warning: #dcd3bb;
@@ -45,6 +46,7 @@ $d-error: #ffecee;
 $d-error-text: #d51b38;
 
 // interpretations in app
+$outline-color: $intense-blue; // #0a76f6
 $success_color: $d-success-text;
 $primary_color: $d-primary;
 $primary: $d-primary;