Refactor pagination

Refs: #7036
public-ui · Nov 29, 2024 · f9a2ab5 · f9a2ab5
1 parent ba85194
commit f9a2ab5
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 54 deletions.
diff --git a/packages/themes/default/src/components/pagination.scss b/packages/themes/default/src/components/pagination.scss
@@ -2,25 +2,13 @@
 @import '../mixins/rem';
 
 @layer kol-theme-component {
-	:host {
+	.kol-pagination {
 		font-family: var(--font-family);
 	}
 
-	.kol-pagination {
-		&__button {
-			&--selected .button {
-				opacity: 1;
-
-				&:focus {
-					outline: none;
-				}
-			}
-
-			&--selected .button-inner {
-				background-color: var(--color-primary);
-				color: var(--color-light);
-				border: 0;
-			}
+	.button {
+		.kol-pagination__button--selected & {
+			opacity: 1;
 		}
 	}
 
@@ -37,6 +25,12 @@
 		transition-duration: 0.5s;
 		transition-property: background-color, color, border-color;
 
+		.kol-pagination__button--selected & {
+			background-color: var(--color-primary);
+			color: var(--color-light);
+			border: 0;
+		}
+
 		.button:focus & {
 			@include focus-outline;
 		}

diff --git a/packages/themes/ecl/src/ecl-ec/components/pagination.scss b/packages/themes/ecl/src/ecl-ec/components/pagination.scss
@@ -13,18 +13,6 @@
 		text-decoration: none;
 	}
 
-	.kol-pagination {
-		&__button {
-			&--selected .button-inner {
-				background-color: var(--color-blue);
-				border-color: var(--color-blue);
-				color: var(--color-white);
-				opacity: 1;
-				text-decoration: underline;
-			}
-		}
-	}
-
 	.button-inner {
 		background-color: var(--color-yellow);
 		border: rem(2) solid var(--color-yellow);
@@ -44,6 +32,14 @@
 			outline: rem(2) solid var(--color-black);
 		}
 
+		.kol-pagination__button--selected & {
+			background-color: var(--color-blue);
+			border-color: var(--color-blue);
+			color: var(--color-white);
+			opacity: 1;
+			text-decoration: underline;
+		}
+
 		.button:disabled & {
 			cursor: not-allowed;
 			opacity: 0.5;

diff --git a/packages/themes/ecl/src/ecl-eu/components/pagination.scss b/packages/themes/ecl/src/ecl-eu/components/pagination.scss
@@ -15,19 +15,6 @@
 		}
 	}
 
-	.kol-pagination {
-		&__button {
-			&--selected .button-inner {
-				background-color: var(--color-blue);
-				border-color: var(--color-blue);
-				color: var(--color-white);
-				font-weight: bold;
-				text-decoration: underline;
-				opacity: 1;
-			}
-		}
-	}
-
 	.button-inner {
 		min-height: var(--a11y-min-size);
 		min-width: var(--a11y-min-size);
@@ -55,6 +42,15 @@
 				0 rem(-4) rem(4) rgb(9 49 142 / 4%);
 		}
 
+		.kol-pagination__button--selected & {
+			background-color: var(--color-blue);
+			border-color: var(--color-blue);
+			color: var(--color-white);
+			font-weight: bold;
+			text-decoration: underline;
+			opacity: 1;
+		}
+
 		.button:disabled & {
 			opacity: 0.5;
 			cursor: not-allowed;

diff --git a/packages/themes/itzbund/src/components/pagination.scss b/packages/themes/itzbund/src/components/pagination.scss
@@ -6,19 +6,6 @@
 		font-family: var(--font-family-sans);
 	}
 
-	.kol-pagination {
-		&__button {
-			&--selected .button-inner {
-				background-color: var(--color-achat);
-				border-color: var(--color-achat);
-				color: var(--color-weiss);
-				font-weight: bold;
-				opacity: 1;
-				text-decoration: underline;
-			}
-		}
-	}
-
 	.button-inner {
 		background-color: var(--color-weiss);
 		border-radius: rem(32);
@@ -37,6 +24,15 @@
 			padding: 0 rem(8);
 		}
 
+		.kol-pagination__button--selected & {
+			background-color: var(--color-achat);
+			border-color: var(--color-achat);
+			color: var(--color-weiss);
+			font-weight: bold;
+			opacity: 1;
+			text-decoration: underline;
+		}
+
 		.button:not(:disabled):hover &,
 		.button:focus & {
 			background-color: var(--color-anthrazit);