change on cancel button style

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

@@ -10,9 +10,16 @@
 		background: $d-grey;
 		border: solid white 1px;
 		transition: background-color ease 1.5s;
+		color: $font-color;
 		&.is-selected {
 			border: solid $primary-color 1px;
-			color: $font_color;
+			color: $white;
+			label {
+				color: $white;
+			}
+			.fa {
+				color: $white;
+			}
 		}
 		&:hover {
 			background: $secondary_color;

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

@@ -52,7 +52,7 @@
 	</div>
 	<div class="step-info">
 		<div class="columns">
-			<div class="column is-narrow">
+			<div class="column is-narrow is-hidden-mobile">
 				<a class="navbar-item is-block" [routerLink]="['/']" routerLinkActive="active">
 					<img src="assets/img/icone_home.png" alt="logo framadate" />
 				</a>
@@ -66,7 +66,7 @@
 				</h2>
 				<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
 			</div>
-			<div class="column is-half has-text-right">
+			<div class="column has-text-right is-narrow">
 				<a class="cancel-button" (click)="showCancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
 			</div>
 		</div>

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

@@ -8,10 +8,12 @@
 
 	a {
 		@extend .clickable;
+
 		&:hover {
 			color: $secondary_color;
 		}
 	}
+
 	.columns,
 	.column {
 		padding-bottom: 0;
@@ -46,24 +48,27 @@
 		&.is-active {
 			background: $font_color;
 		}
+	}
 
-		&.cancel-button {
-			background: $border-color;
-			margin-top: -0.5em;
+	.cancel-button {
+		margin-top: -0.5em;
+		line-height: 2rem;
+		display: inline-block;
 
-			&:hover {
-				background: $font_color;
-			}
+		&:hover {
+			background: $font_color;
 		}
 	}
 
 	.step-info {
 		padding: 0.85rem 0.85rem 2rem;
 		background: $white;
+
 		i {
 			margin-left: 1ch;
 		}
 	}
+
 	.step-title-poll {
 		font-size: 0.85rem;
 		color: $d-neutral;
@@ -77,6 +82,7 @@
 	.step-counter-text {
 		font-weight: 600;
 	}
+
 	.cancel-button-reject,
 	.cancel-button-confirm {
 		display: block !important;