diff --git a/src/menu.scss b/src/menu.scss index c438beb780..fe0515da75 100644 --- a/src/menu.scss +++ b/src/menu.scss @@ -157,6 +157,10 @@ $block: #{$fd-namespace}-menu; .#{$block}__addon-after { color: var(--sapList_Active_TextColor); } + + @include fd-focus() { + outline-color: var(--sapContent_ContrastFocusColor); + } } @include fd-disabled() { diff --git a/src/object-list.scss b/src/object-list.scss index 8c88dfd067..9fa1bf6634 100644 --- a/src/object-list.scss +++ b/src/object-list.scss @@ -21,6 +21,8 @@ $block: #{$fd-namespace}-object-list; .#{$fd-namespace}-list__link { @include fd-active() { + background: var(--sapList_Active_Background); + .#{$block}__intro, .#{$block}__object-attribute, .#{$fd-namespace}-avatar, diff --git a/stories/list/standard/__snapshots__/standard-list.stories.storyshot b/stories/list/standard/__snapshots__/standard-list.stories.storyshot index 632b92890b..c7c847e042 100644 --- a/stories/list/standard/__snapshots__/standard-list.stories.storyshot +++ b/stories/list/standard/__snapshots__/standard-list.stories.storyshot @@ -1019,10 +1019,10 @@ exports[`Storyshots Components/List/Standard Icon 1`] = ` `; -exports[`Storyshots Components/List/Standard Interractive 1`] = ` +exports[`Storyshots Components/List/Standard Interactive 1`] = `

- Interractive Items + Interactive Items

@@ -1118,6 +1118,8 @@ exports[`Storyshots Components/List/Standard Interractive 1`] = ` + +
`; diff --git a/stories/list/standard/standard-list.stories.js b/stories/list/standard/standard-list.stories.js index 3ace245282..4208369000 100644 --- a/stories/list/standard/standard-list.stories.js +++ b/stories/list/standard/standard-list.stories.js @@ -93,7 +93,7 @@ unread.parameters = { } }; -export const interractive = () => `

Interractive Items

+export const interactive = () => `

Interactive Items

`; -interractive.storyName = 'Interractive'; +interactive.storyName = 'Interactive'; -interractive.parameters = { +interactive.parameters = { docs: { iframeHeight: 445, storyDescription: ` - The \`fd-list__item--interractive\` will force list item to handle hover and active states. - Usage of this modifier is not needed on \`Selection\`, \`Navigation\` and \`Action\` modes. +The \`fd-list__item--interractive\` will force list item to handle hover and active states. +Usage of this modifier is not needed on \`Selection\`, \`Navigation\` and \`Action\` modes. ` } };