diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-opened-list.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-opened-list.snap.png index 98836c29dc4..8ecc091eecc 100644 Binary files a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-opened-list.snap.png and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-opened-list.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-with-search-result.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-with-search-result.snap.png index cec3435d465..818dccf5aa7 100644 Binary files a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-with-search-result.snap.png and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-with-search-result.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-with-suffix-value.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-with-suffix-value.snap.png index 60e5dc36841..72004999a82 100644 Binary files a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-with-suffix-value.snap.png and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-autocomplete-with-suffix-value.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-disabled-options.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-disabled-options.snap.png index f88fbff9d35..6def548ba71 100644 Binary files a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-disabled-options.snap.png and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-sbanken-have-to-match-disabled-options.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-opened-list.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-opened-list.snap.png index c615ffaa563..5bfd4a42729 100644 Binary files a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-opened-list.snap.png and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-opened-list.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-with-search-result.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-with-search-result.snap.png index 4bfb03fda59..11a4f6279fc 100644 Binary files a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-with-search-result.snap.png and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-with-search-result.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-with-suffix-value.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-with-suffix-value.snap.png index ea6c77af52e..1e9abcd3bb4 100644 Binary files a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-with-suffix-value.snap.png and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-autocomplete-with-suffix-value.snap.png differ diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-disabled-options.snap.png b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-disabled-options.snap.png index 1a9dd8c8d40..020c13feea6 100644 Binary files a/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-disabled-options.snap.png and b/packages/dnb-eufemia/src/components/autocomplete/__tests__/__image_snapshots__/autocomplete-for-ui-have-to-match-disabled-options.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-different-item-directions.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-different-item-directions.snap.png index eaead75948e..cc62ec8745e 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-different-item-directions.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-different-item-directions.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-disabled-options.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-disabled-options.snap.png index feb04da9718..afa92003490 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-disabled-options.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-disabled-options.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png index 5ba5ce5c70e..331d702686a 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png index a07f65b4717..2487fb300cc 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png index b6c6a11535a..f01a9690d4a 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png index 1751fcffa0c..c1aced1d071 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-items.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-items.snap.png index 28831c65b8f..63083bbe130 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-items.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-items.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png index 2fb167961e4..e89b1847501 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png index ee87421f9f3..5530e7253e2 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-sbanken-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-different-item-directions.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-different-item-directions.snap.png index 6bbbb71d5f4..cd28c955675 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-different-item-directions.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-different-item-directions.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-disabled-options.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-disabled-options.snap.png index 7c3492e143b..783d5e0ad29 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-disabled-options.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-disabled-options.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png index a6b17d3dd57..c6a93faf33e 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-action-menu-in-mobile-view.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png index f961ecda01e..f469e4332c3 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-action-menu-with-custom-items.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png index 8f00db39993..744c32cff5f 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-left-side.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png index 284b42ff256..061c6ffd645 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-dropdown-as-more-menu-opened-on-right-side.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png index c5f736f7cfa..6aadfb2e052 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-left-side.snap.png differ diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png index eed969d0109..c4b925d1cac 100644 Binary files a/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png and b/packages/dnb-eufemia/src/components/dropdown/__tests__/__image_snapshots__/dropdown-for-ui-have-to-match-the-tertiary-variant-opened-on-right-side.snap.png differ diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-sbanken-have-to-match-the-default-drawer-list.snap.png b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-sbanken-have-to-match-the-default-drawer-list.snap.png index c82c6740ebb..5a51cd430d5 100644 Binary files a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-sbanken-have-to-match-the-default-drawer-list.snap.png and b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-sbanken-have-to-match-the-default-drawer-list.snap.png differ diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-sbanken-have-to-match-the-disabled-option.snap.png b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-sbanken-have-to-match-the-disabled-option.snap.png index 8ef13d19ba4..833f07c9052 100644 Binary files a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-sbanken-have-to-match-the-disabled-option.snap.png and b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-sbanken-have-to-match-the-disabled-option.snap.png differ diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-ui-have-to-match-the-disabled-option.snap.png b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-ui-have-to-match-the-disabled-option.snap.png index 13f975ff051..8c26fae7ead 100644 Binary files a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-ui-have-to-match-the-disabled-option.snap.png and b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__image_snapshots__/drawerlist-for-ui-have-to-match-the-disabled-option.snap.png differ diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.tsx.snap b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.tsx.snap index d30df29afa7..b8a900e8d72 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.tsx.snap +++ b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/__snapshots__/DrawerList.test.tsx.snap @@ -31,7 +31,7 @@ exports[`DrawerList scss has to match style dependencies css 1`] = ` --drawer-list-list-background: var(--color-white); --drawer-list-list-line-height: var(--line-height-basis); --drawer-bg-disabled: var(--color-black-8); - --drawer-color-disabled: var(--color-black-80); + --drawer-color-disabled: var(--color-black-55); display: block; position: relative; width: inherit; @@ -459,10 +459,10 @@ html[data-whatinput=mouse] .dnb-drawer-list__options--focusring { content: ""; position: absolute; z-index: 2; - top: auto; + top: 0; left: 0; right: 0; - bottom: 0; + bottom: auto; height: var(--drawer-list-option-border-width); background-color: var(--color-mint-green-25); } @@ -561,7 +561,7 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected.dnb-drawer-list .dnb-drawer-list__option.last-of-type, .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner, .dnb-drawer-list__option--focus.last-of-type .dnb-drawer-list__option__inner::before { border-radius: 0 0 var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius); } -.dnb-drawer-list__option.last-of-type:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before { +.dnb-drawer-list__option.first-of-type:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before { content: none; } .dnb-drawer-list__option--selected .dnb-drawer-list__option__item .dnb-anchor:focus { @@ -589,6 +589,9 @@ html[data-whatinput=keyboard] .dnb-drawer-list__option--selected .dnb-drawer-lis .dnb-drawer-list--top .dnb-drawer-list__option--focus.closest-to-top .dnb-drawer-list__option__inner::before { border-radius: var(--drawer-list-options-border-radius) var(--drawer-list-options-border-radius) 0 0; } +.dnb-drawer-list__option[disabled] + .dnb-drawer-list__option[disabled]:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before { + background-color: var(--color-black-20); +} .dnb-drawer-list__status--error:not(.dnb-drawer-list--opened) .dnb-drawer-list__icon { color: var(--color-fire-red); } diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss index 73bc0a5b51c..2c32f481654 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss +++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/dnb-drawer-list.scss @@ -58,7 +58,7 @@ --drawer-list-list-background: var(--color-white); --drawer-list-list-line-height: var(--line-height-basis); --drawer-bg-disabled: var(--color-black-8); - --drawer-color-disabled: var(--color-black-80); + --drawer-color-disabled: var(--color-black-55); display: block; // has to be block element so we can se the content position: relative; diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss index a836fcf119c..740ae513ff2 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss +++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss @@ -13,9 +13,13 @@ --drawer-list-options-border-radius: 0 0 0.5rem 0.5rem; --drawer-list-options-border-radius-reversed: 0.5rem 0.5rem 0 0; --drawer-list-option-border-width: 0.125rem; + --drawer-list-option-border-color: transparent; --drawer-list-option-inner-border-display: none; --drawer-list-option-inner-background: transparent; --drawer-list-list-background: var(--sb-color-white); + --drawer-list-list-option-background: transparent; + --drawer-bg-disabled: var(--sb-color-gray-light); + --drawer-color-disabled: var(--sb-color-gray-dark-2); &__list { margin-top: calc( @@ -31,14 +35,14 @@ &__option__inner { overflow: visible; - background-color: inherit; padding: 1rem 0.75rem; + margin: 0 var(--drawer-list-option-border-width); &::before { content: ''; display: block; position: absolute; - bottom: -3px; + top: -1px; left: 0.5rem; width: calc(100% - 1rem); height: 1px; @@ -56,12 +60,9 @@ } &__option { - border: var(--drawer-list-option-border-width) solid - var(--sb-color-gray-dark-2); - border-bottom-color: transparent; - border-top-color: transparent; - border-right-color: transparent; // Fix ugly border with scrollbar - background-color: transparent; + box-shadow: inset 0 0 0 var(--drawer-list-option-border-width) + var(--drawer-list-option-border-color); + background: var(--drawer-list-list-option-background); z-index: 0; &__item.item-nr-1 { @@ -69,7 +70,7 @@ } @include hover() { - border-color: var(--sb-color-violet); + --drawer-list-option-border-color: var(--sb-color-violet); z-index: 1; .dnb-drawer-list__option__inner::before { @@ -78,7 +79,7 @@ } @include active() { - border-color: var(--sb-color-violet); + --drawer-list-option-border-color: var(--sb-color-violet); z-index: 1; .dnb-drawer-list__option__inner::before { @@ -87,7 +88,7 @@ } &--selected { - background-color: var(--sb-color-violet); + --drawer-list-list-option-background: var(--sb-color-violet); color: var(--sb-color-white); border-right-color: var( --sb-color-gray-dark-2 @@ -122,28 +123,33 @@ @include allAbove(small) { &--selected &__suffix { z-index: 2; // over check icon - background-color: inherit; // to "hide" the check icon + background-color: var( + --drawer-list-list-option-background + ); // to "hide" the check icon } } + &.first-of-type &__inner::before { + content: none; + } + &.last-of-type { border-radius: var(--drawer-list-options-border-radius); - - .dnb-drawer-list__option__inner::before { - display: none; - } } &:focus-visible, &--focus { - border-color: var(--sb-color-blue-dark); - outline: 0.0625rem solid var(--sb-color-blue-dark); - background-color: var(--sb-color-blue-light-3); + --drawer-list-option-border-color: var(--sb-color-blue-dark); + --drawer-list-list-option-background: var(--sb-color-blue-light-3); color: var(--sb-color-blue-dark); font-weight: var(--sb-font-weight-medium); z-index: 1; /* stylelint-disable no-descending-specificity */ + .dnb-drawer-list__option__inner { + --drawer-list-option-inner-background: transparent; + } + .dnb-drawer-list__option__inner::before { display: var(--drawer-list-option-inner-border-display); } diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss index b4c0e570c43..9375dffaaa3 100644 --- a/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss +++ b/packages/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-ui.scss @@ -54,17 +54,16 @@ content: ''; position: absolute; z-index: 2; - top: auto; + top: 0; left: 0; right: 0; - bottom: 0; + bottom: auto; // width: 100%; // 100% width would result in no margin right height: var(--drawer-list-option-border-width); background-color: var(--color-mint-green-25); } - &__item.item-nr-1 { font-weight: var(--font-weight-medium); } @@ -197,7 +196,7 @@ } // remove last bottom border - &.last-of-type:not(#{&}--focus) &__inner::before { + &.first-of-type:not(#{&}--focus) &__inner::before { content: none; } @@ -234,6 +233,13 @@ var(--drawer-list-options-border-radius) 0 0; } + // disabled + &__option[disabled] + + &__option[disabled]:not(#{&}__option--focus) + &__option__inner::before { + background-color: var(--color-black-20); + } + // error status &__status--error:not(#{&}--opened) &__icon { color: var(--color-fire-red);