Merge pull request #2877 from db-ui/2856-refactorscss-improve-selecto…

…rs-by-grouping refactor: optimized selectors
db-ui · Jul 23, 2024 · 67e957e · 67e957e
2 parents 87a4507 + 8099993
commit 67e957e
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 37 deletions.
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -11,8 +11,7 @@
 %sub-navi-handler-desktop {
 	// show sub-navigation on hover
 	@include screen-sizes.screen("md") {
-		&:hover,
-		&:focus-visible {
+		&:is(:hover, :focus-visible) {
 			~ .db-sub-navigation {
 				visibility: visible;
 			}
@@ -203,8 +202,7 @@
 			inset-inline-start: 100%;
 		}
 
-		&:hover,
-		&:focus-within {
+		&:is(:hover, :focus-within) {
 			visibility: visible;
 		}
 

diff --git a/packages/components/src/components/navigation/navigation.scss b/packages/components/src/components/navigation/navigation.scss
@@ -40,11 +40,14 @@
 						}
 					}
 
-					&:hover,
-					&:focus-visible,
-					&:has(~ .db-sub-navigation:hover),
-					&:has(~ .db-sub-navigation:focus-visible),
-					&:has(~ .db-sub-navigation:focus-within) {
+					&:is(:hover, :focus-visible),
+					&:has(
+							~ .db-sub-navigation:is(
+									:hover,
+									:focus-visible,
+									:focus-within
+								)
+						) {
 						&::after {
 							transform: form-components.$dropdown-icon-transform;
 						}
@@ -62,11 +65,14 @@
 							--db-icon-margin-start: auto;
 						}
 
-						&:hover,
-						&:focus-visible,
-						&:has(~ .db-sub-navigation:hover),
-						&:has(~ .db-sub-navigation:focus-visible),
-						&:has(~ .db-sub-navigation:focus-within) {
+						&:is(:hover, :focus-visible),
+						:has(
+								~ .db-sub-navigation:is(
+										:hover,
+										:focus-visible,
+										:focus-within
+									)
+							) {
 							&::after {
 								transform: none;
 							}

diff --git a/packages/components/src/components/popover/popover.scss b/packages/components/src/components/popover/popover.scss
@@ -4,9 +4,7 @@
 .db-popover {
 	position: relative;
 
-	&[data-e2e-hover="true"],
-	&:hover,
-	&:focus-within {
+	&:is([data-e2e-hover="true"], :hover, :focus-within) {
 		> article:not([data-open="false"]) {
 			@extend %show-popover;
 		}

diff --git a/packages/components/src/components/tag/tag.scss b/packages/components/src/components/tag/tag.scss
@@ -119,9 +119,7 @@
 
 			&:checked {
 				&,
-				&:not(:disabled):hover,
-				&:not(:disabled):focus,
-				&:not(:disabled):active {
+				&:not(:disabled):is(:hover, :focus, :active) {
 					background-color: colors.$db-brand-bg-transparent-full-enabled;
 				}
 
@@ -148,9 +146,7 @@
 	}
 
 	.db-link {
-		&:hover,
-		&:focus,
-		&:active {
+		&:is(:hover, :focus, :active) {
 			color: inherit;
 		}
 	}

diff --git a/packages/components/src/components/textarea/textarea.scss b/packages/components/src/components/textarea/textarea.scss
@@ -52,8 +52,7 @@
 	}
 
 	&[data-variant="floating"] {
-		&:has(textarea:focus-within),
-		&:has(textarea:not(:placeholder-shown)) {
+		&:has(textarea:is(:focus-within, :not(:placeholder-shown))) {
 			&::before {
 				@extend %default-transition;
 
@@ -77,8 +76,7 @@
 				background-color: colors.$db-current-color-bg-lvl-1-enabled !important;
 			}
 
-			&:has(textarea:not(:disabled):hover),
-			&:has(textarea:not(:disabled):focus) {
+			&:has(textarea:not(:disabled):is(:hover, :focus)) {
 				&::after {
 					background-color: colors.$db-current-color-bg-transparent-hover;
 				}

diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss
@@ -114,9 +114,11 @@ $check-border-size: min(#{variables.$db-border-height-2xs}, 2px);
 			}
 		}
 
-		&:has(#{$selector}:focus-within),
-		&:has(#{$selector}:is(input, textarea):not(:placeholder-shown)),
-		&:has(> select option:checked:not([hidden])) {
+		&:has(
+				#{$selector}:focus-within,
+				#{$selector}:is(input, textarea):not(:placeholder-shown),
+				> select option:checked:not([hidden])
+			) {
 			label {
 				@extend %db-overwrite-font-size-2xs;
 

diff --git a/packages/components/src/styles/_scrollbar.scss b/packages/components/src/styles/_scrollbar.scss
@@ -17,8 +17,7 @@ $scrollbar-width: helpers.px-to-rem(8);
 		border-start-end-radius: variables.$db-border-radius-xs;
 	}
 
-	&:hover,
-	&:focus {
+	&:is(:hover, :focus) {
 		&::-webkit-scrollbar-track,
 		&::-webkit-scrollbar-button:single-button {
 			background-color: colors.$db-current-color-bg-transparent-hover;
@@ -48,8 +47,7 @@ $scrollbar-width: helpers.px-to-rem(8);
 		background-position: center;
 		block-size: form-components.$floating-label-size;
 
-		&:hover,
-		&:focus {
+		&:is(:hover, :focus) {
 			background-color: colors.$db-current-color-bg-transparent-hover;
 		}
 

diff --git a/packages/components/src/styles/_tag-components.scss b/packages/components/src/styles/_tag-components.scss
@@ -130,9 +130,7 @@ $interactive-selectors: "label, button:not(.db-tab-remove-button), a";
 		// radio should have bg-lvl-3 (checked) without hover/pressed
 		label:has(input[type="radio"]:checked) {
 			&,
-			&:hover,
-			&:focus,
-			&:active {
+			&:is(:hover, :focus, :active) {
 				background-color: colors.$db-current-color-bg-lvl-3-enabled;
 			}
 		}