From 2ea81c9deb4dcda884dd0f56a53f4fde0359dbc3 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 17 Jul 2024 10:32:15 +0200 Subject: [PATCH 1/2] refactor: optimized this selector especially in this context of SCSS --- .../navigation-item/navigation-item.scss | 6 ++--- .../src/components/navigation/navigation.scss | 24 +++++++++++-------- .../src/components/popover/popover.scss | 4 +--- .../components/src/components/tag/tag.scss | 8 ++----- .../src/components/textarea/textarea.scss | 6 ++--- .../src/styles/_form-components.scss | 8 ++++--- .../components/src/styles/_scrollbar.scss | 6 ++--- .../src/styles/_tag-components.scss | 4 +--- 8 files changed, 29 insertions(+), 37 deletions(-) diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss index 4587b262048..7278650e0f6 100644 --- 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 index 40da0f87716..b012a0dabd7 100644 --- a/packages/components/src/components/navigation/navigation.scss +++ b/packages/components/src/components/navigation/navigation.scss @@ -40,11 +40,12 @@ } } - &: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:hover, + ~ .db-sub-navigation:focus-visible, + ~ .db-sub-navigation:focus-within + ) { &::after { transform: form-components.$dropdown-icon-transform; } @@ -62,11 +63,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 index 95f916e5ce9..54786d2d62a 100644 --- 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 index 2132577f31f..e775e99aeb6 100644 --- 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 index b96fc27f181..f5aec1804df 100644 --- 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 index fc037567946..2b146122ea0 100644 --- a/packages/components/src/styles/_form-components.scss +++ b/packages/components/src/styles/_form-components.scss @@ -112,9 +112,11 @@ $input-types: "button", "checkbox", "color", "date", "datetime-local", "email", } } - &: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 index 09aa693e428..3d50641b429 100644 --- 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 index 120ebaa4420..1f3f4477187 100644 --- 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; } } From 9eb054c7e167c204d6a3016ba5c02e9c2d64280b Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 17 Jul 2024 11:21:17 +0200 Subject: [PATCH 2/2] refactor: optimized this selector --- .../components/src/components/navigation/navigation.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/navigation/navigation.scss b/packages/components/src/components/navigation/navigation.scss index b012a0dabd7..b449ca727d6 100644 --- a/packages/components/src/components/navigation/navigation.scss +++ b/packages/components/src/components/navigation/navigation.scss @@ -42,9 +42,11 @@ &:is(:hover, :focus-visible), &:has( - ~ .db-sub-navigation:hover, - ~ .db-sub-navigation:focus-visible, - ~ .db-sub-navigation:focus-within + ~ .db-sub-navigation:is( + :hover, + :focus-visible, + :focus-within + ) ) { &::after { transform: form-components.$dropdown-icon-transform;