Refactor nav and progress

Refs: #7036
public-ui · Dec 16, 2024 · 34b0f86 · 34b0f86
1 parent 551e328
commit 34b0f86
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 41 deletions.
diff --git a/packages/components/src/components/progress/shadow.tsx b/packages/components/src/components/progress/shadow.tsx
@@ -126,7 +126,7 @@ export class KolProcess implements ProgressAPI {
 					max={this.state._max}
 					value={this.state._value}
 				></progress>
-				<span aria-live="polite" aria-relevant="removals text" class="visually-hidden">
+				<span class="kol-progress__span" aria-live="polite" aria-relevant="removals text" class="visually-hidden">
 					{this.state._liveValue} von {this.state._max} {this.state._unit}
 				</span>
 			</div>

diff --git a/packages/themes/default/src/components/nav.scss b/packages/themes/default/src/components/nav.scss
@@ -17,8 +17,8 @@
 			&--nested {
 				padding-left: rem(16);
 
-				a,
-				button {
+				.kol-link-wc,
+				.kol-button-wc {
 					font-weight: normal !important;
 					border-left-color: transparent !important;
 				}
@@ -31,12 +31,12 @@
 			}
 
 			&--item {
-				a:hover {
+				.kol-link-wc:hover {
 					text-decoration: underline;
 				}
 
-				a,
-				button {
+				.kol-link-wc,
+				.kol-button-wc {
 					align-items: center;
 					color: var(--color-primary);
 					display: flex;

diff --git a/packages/themes/default/src/components/progress.scss b/packages/themes/default/src/components/progress.scss
@@ -5,7 +5,7 @@
 		font-family: var(--font-family);
 
 		&__progress,
-		span {
+		&__span {
 			display: block;
 			height: 0;
 			overflow: hidden;
@@ -17,17 +17,17 @@
 				stroke: var(--color-primary-variant);
 			}
 		}
-	}
 
-	svg line:first-child,
-	svg circle:first-child {
-		fill: transparent;
-		stroke: var(--color-mute-variant);
-	}
+		&__line line:first-child,
+		&__cycle circle:first-child {
+			fill: transparent;
+			stroke: var(--color-mute-variant);
+		}
 
-	svg line:last-child,
-	svg circle:last-child {
-		fill: transparent;
-		stroke: var(--color-primary);
+		&__line line:last-child,
+		&__cycle circle:last-child {
+			fill: transparent;
+			stroke: var(--color-primary);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/nav.scss b/packages/themes/ecl/src/ecl-ec/components/nav.scss
@@ -48,7 +48,7 @@
 				flex-grow: 1;
 			}
 
-			&--expand-button button {
+			&--expand-button .kol-button-wc {
 				background-color: var(--color-blue-130);
 				margin: auto;
 				height: 100%;

diff --git a/packages/themes/ecl/src/ecl-ec/components/progress.scss b/packages/themes/ecl/src/ecl-ec/components/progress.scss
@@ -5,7 +5,7 @@
 		font-family: var(--font-family);
 
 		&__progress,
-		span {
+		&__span {
 			display: block;
 			height: 0;
 			overflow: hidden;
@@ -15,17 +15,17 @@
 		&__progress {
 			display: none;
 		}
-	}
 
-	svg line:first-child,
-	svg circle:first-child {
-		fill: transparent;
-		stroke: var(--color-grey-25);
-	}
+		&__line line:first-child,
+		&__circle circle:first-child {
+			fill: transparent;
+			stroke: var(--color-grey-25);
+		}
 
-	svg line:last-child,
-	svg circle:last-child {
-		stroke: var(--color-blue-130);
-		fill: transparent;
+		&__line line:last-child,
+		&__circle circle:last-child {
+			stroke: var(--color-blue-130);
+			fill: transparent;
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/nav.scss b/packages/themes/itzbund/src/components/nav.scss
@@ -56,7 +56,7 @@
 					border-bottom: 0.375em solid var(--color-citrin);
 				}
 
-				a {
+				.kol-link-wc {
 					border-radius: var(--border-radius);
 					background-color: var(--color-petrol);
 					border: rem(1) solid transparent;

diff --git a/packages/themes/itzbund/src/components/progress.scss b/packages/themes/itzbund/src/components/progress.scss
@@ -5,7 +5,7 @@
 		--kolibri-text-label-padding: #{rem(60)};
 
 		&__progress,
-		span {
+		&__span {
 			display: block;
 			height: 0;
 			overflow: hidden;
@@ -15,17 +15,17 @@
 		&__progress {
 			display: none;
 		}
-	}
 
-	svg line:first-child,
-	svg circle:first-child {
-		fill: transparent;
-		stroke: var(--color-fluorit);
-	}
+		&__line line:first-child,
+		&__circle circle:first-child {
+			fill: transparent;
+			stroke: var(--color-fluorit);
+		}
 
-	svg line:last-child,
-	svg circle:last-child {
-		stroke: var(--color-achat);
-		fill: transparent;
+		&__line line:last-child,
+		&__circle circle:last-child {
+			stroke: var(--color-achat);
+			fill: transparent;
+		}
 	}
 }