BC-7404 Layers cleanup (#3839)

* removed unused variable

* Removed variable --layer-behind

* Correct z-index value in StepProgress component

* Adjustment of the positioning and width of the After pseudo element in the StepProgress component

* Remove the background of the After pseudo element in the StepProgress component style

* Change z-index values in several components and remove the unused CSS variable --layer-page

* Set z-index for sticky header to a fixed value and remove unused CSS variable --layer-sticky-header

* Set fixed z-index value for ContextMenu component and remove unused CSS variable --layer-dropdown

* Set fixed z-index for AlertContainer component and remove unused CSS variables; update ApplicationErrorWrapper conditional rendering

* Fix conditional rendering in ApplicationErrorWrapper to display error content when an error exists

* Set fixed z-index values for multiple components and remove unused CSS variable --layer-fab

* Remove the unused CSS variable --layer-fab from the layer styles

* Set fixed z-index for modal and remove unused CSS variable --layer-modal

* Remove unused layer styles from CSS variable imports

* Set height for progressbar li::after to 1px and ensure background color is applied for active state

* trigger CI

---------

Co-authored-by: odalys-dataport <[email protected]>
Co-authored-by: Uwe Ilgenstein <[email protected]>

Author: 3 people

src/components/legacy/NavigationBar.vue

@@ -87,7 +87,7 @@ const setActive = (idx: number) => {
 	position: -webkit-sticky;
 	top: 0;
 	left: 0;
-	z-index: var(--layer-fab);
+	z-index: 100;
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: center;

src/components/lern-store/ContentCard.vue

@@ -149,7 +149,7 @@ export default {
 	position: absolute;
 	top: 0;
 	left: 0;
-	z-index: var(--layer-page);
+	z-index: 1;
 	padding: 8px;
 	margin: 12px;
 	font-size: var(--text-xs);
@@ -183,7 +183,7 @@ export default {
 	border-radius: var(--radius-round);
 	opacity: 0.7;
 	// stylelint-disable
-	z-index: calc(var(--layer-page) + 1);
+	z-index: 2;
 	padding: 6px 4px 2px;
 	// stylelint-enable
 }
@@ -216,7 +216,7 @@ export default {
 
 		&-background-gradient {
 			position: absolute;
-			z-index: var(--layer-page);
+			z-index: 2;
 			width: 100%;
 			height: 100%;
 			background: linear-gradient(
@@ -227,26 +227,6 @@ export default {
 			border-radius: var(--radius-md) var(--radius-md) 0 0;
 			opacity: 0.8;
 		}
-
-		&-icon {
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			z-index: var(--layer-page);
-			font-size: 52px !important;
-			filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 1));
-			opacity: 0.9;
-			transform: translate(-50%, -50%);
-		}
-
-		&-checkbox {
-			position: absolute;
-			top: 5%;
-			left: 90%;
-			z-index: var(--layer-page);
-			color: rgba(var(--v-theme-white));
-			cursor: pointer;
-		}
 	}
 
 	&__title {

src/components/lern-store/LernstoreCollectionDetailView.vue

@@ -335,7 +335,7 @@ $tablet-portrait-width: 768px;
 					position: -webkit-sticky;
 					position: sticky;
 					top: 32px;
-					z-index: var(--layer-fab);
+					z-index: 100;
 					margin-top: 32px;
 					border-radius: var(--radius-md);
 

src/components/lern-store/LernstoreDetailView.vue

@@ -378,7 +378,7 @@ $tablet-portrait-width: 768px;
 		position: fixed;
 		top: 0;
 		right: 0;
-		z-index: var(--layer-modal);
+		z-index: 1000;
 		display: flex;
 		justify-content: flex-end;
 		padding: 16px;
@@ -430,7 +430,7 @@ $tablet-portrait-width: 768px;
 				right: 0;
 				bottom: 0;
 				left: 0;
-				z-index: var(--layer-page);
+				z-index: 1;
 				filter: blur(0.7rem);
 				background-repeat: no-repeat;
 				background-position: center;
@@ -439,7 +439,7 @@ $tablet-portrait-width: 768px;
 			}
 
 			img {
-				z-index: var(--layer-page);
+				z-index: 1;
 				object-position: center;
 				object-fit: contain;
 
@@ -453,7 +453,7 @@ $tablet-portrait-width: 768px;
 	.floating-buttons {
 		position: sticky;
 		bottom: 0;
-		z-index: var(--layer-page);
+		z-index: 1;
 		border-radius: var(--radius-md);
 
 		@media (max-width: $tablet-portrait-width) {

src/components/molecules/AlertContainer.vue

@@ -47,7 +47,7 @@ const onRemoveNotification = (notification: AlertPayload) => {
 .alert-wrapper {
 	position: fixed;
 	right: 0;
-	z-index: var(--layer-tooltip);
+	z-index: 50;
 	overflow: visible;
 }
 
@@ -56,7 +56,7 @@ const onRemoveNotification = (notification: AlertPayload) => {
 	right: 0;
 	bottom: 5vh;
 	left: 0;
-	z-index: var(--layer-tooltip);
+	z-index: 50;
 	overflow: visible;
 }
 </style>

src/components/molecules/ContextMenu.vue

@@ -220,7 +220,7 @@ export default {
 	--transition-duration: 0.15s;
 
 	position: absolute;
-	z-index: var(--layer-dropdown);
+	z-index: 30;
 	display: flex;
 	flex-direction: column;
 	min-width: 150px;

src/components/organisms/DataTable/TableHeadRow.vue

@@ -394,13 +394,13 @@ export default {
 }
 
 .info-button {
-	z-index: calc(var(--layer-fab) + 1);
+	z-index: 101;
 }
 
 .info-box {
 	position: absolute;
 	right: 0%;
-	z-index: calc(var(--layer-fab) + 1);
+	z-index: 101;
 	min-width: 320px;
 	margin-top: 40px;
 	margin-right: 24px;
@@ -419,7 +419,7 @@ export default {
 	}
 
 	button:not(.is-none):focus {
-		z-index: var(--layer-fab);
+		z-index: 100;
 		outline: none;
 		box-shadow:
 			0 0 0 0 rgba(var(--v-theme-white)),

src/components/organisms/StepProgress.vue

@@ -109,20 +109,17 @@ ul.progressbar {
 	&::after {
 		position: absolute;
 		top: 25px;
-		left: -50%;
-		z-index: var(--layer-behind);
-		width: 100%;
-		height: calc(3 * var(--border-width));
+		left: -30%;
+		width: 60%;
+		height: 1px;
 		content: "";
-		background: map.get($grey, base);
 	}
 }
 
 .progressbar li.active {
 	&::after {
 		background: map.get($grey, base);
 	}
-
 	&::before {
 		color: map.get($grey, base);
 		text-decoration: underline;

src/components/templates/DefaultWireframe.vue

@@ -194,7 +194,7 @@ const showDivider = computed(() => {
 .sticky {
 	position: sticky;
 	top: var(--topbar-height);
-	z-index: var(--layer-sticky-header);
+	z-index: 20;
 	background-color: rgb(var(--v-theme-white));
 }
 

src/pages/administration/StudentOverview.page.vue

@@ -724,7 +724,7 @@ export default {
 }
 
 button:not(.is-none):focus {
-	z-index: var(--layer-fab);
+	z-index: 100;
 	outline: none;
 	box-shadow:
 		0 0 0 0 rgba(var(--v-theme-white)),