From 92612bb403c5964989bb0b8f602134eb4d487bfd Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 16 Feb 2022 12:05:55 +0100
Subject: [PATCH] stepper background color and height var

---
 .../administration/stepper/stepper.component.scss      | 10 +++++-----
 src/styles/variables.scss                              |  2 ++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss
index 8854af4f..0f20c877 100644
--- a/src/app/features/administration/stepper/stepper.component.scss
+++ b/src/app/features/administration/stepper/stepper.component.scss
@@ -15,7 +15,7 @@
 	}
 
 	.step-counter-text {
-		margin-top: -5px;
+		margin-top: -$stepper-progress-bar-height;
 	}
 	.title-section {
 		display: inline-block;
@@ -46,15 +46,15 @@
 		top: 0;
 		display: block;
 		min-width: 1px;
-		height: 4px;
-		background: $d-grey !important;
+		height: $stepper-progress-bar-height;
+		background: $bar-progress-grey !important;
 	}
 
 	.step-bar-progress {
 		position: relative;
-		top: -4px;
+		top: -$stepper-progress-bar-height;
 		left: 0;
-		height: 4px;
+		height: $stepper-progress-bar-height;
 		display: block;
 		min-width: 1px;
 		background: $d-blue-700;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a1a74464..c8949f5f 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -50,6 +50,7 @@ $primary_color: $d-primary;
 $primary: $d-primary;
 $secondary_color: $d-primary-intense;
 $bg-grey: $d-blue30;
+$bar-progress-grey: #e3e3ea;
 $font_color: $d-black;
 $font_color_light: $d-grey;
 $logo_color: $d-primary;
@@ -82,6 +83,7 @@ $header-nav-height: 4.85rem;
 $header-nav-inner-height: 4.5rem;
 $widescreen-width-main-column: 75rem;
 $stepper-nav-height: 2rem;
+$stepper-progress-bar-height: 5px;
 $home-nav-height: 2rem;
 $home-nav-height-small: 3.5rem;
 // datepicker