diff --git a/packages/terra-navigation-side-menu/src/MenuItem.module.scss b/packages/terra-navigation-side-menu/src/MenuItem.module.scss index d4f3134a95..4118e08d38 100644 --- a/packages/terra-navigation-side-menu/src/MenuItem.module.scss +++ b/packages/terra-navigation-side-menu/src/MenuItem.module.scss @@ -86,7 +86,25 @@ } &.is-selected { + background-attachment: var(--terra-navigation-side-menu-item-selected-background-attachment); background-color: var(--terra-navigation-side-menu-item-selected-background-color, darken(#ebf6fd, 2%)); + background-image: var(--terra-navigation-side-menu-item-selected-background-image); + background-size: var(--terra-navigation-side-menu-item-selected-background-size); + border-left: var(--terra-navigation-side-menu-item-selected-border-left, 0.5rem solid #007cc3); + color: var(--terra-navigation-side-menu-item-selected-color); + font-weight: var(--terra-navigation-side-menu-item-selected-font-weight, 600); + padding-left: var(--terra-navigation-side-menu-item-selected-padding-left, 0.7143rem); + + &::before { + background-image: var(--terra-navigation-side-menu-item-selected-before-background-image); + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: -1; + } .chevron { color: var(--terra-navigation-side-menu-item-selected-chevron-color, #909496); diff --git a/packages/terra-navigation-side-menu/src/clinical-lowlight-theme/NavigationSideMenuItem.module.scss b/packages/terra-navigation-side-menu/src/clinical-lowlight-theme/NavigationSideMenuItem.module.scss index 9d364e62a6..125bbc414a 100644 --- a/packages/terra-navigation-side-menu/src/clinical-lowlight-theme/NavigationSideMenuItem.module.scss +++ b/packages/terra-navigation-side-menu/src/clinical-lowlight-theme/NavigationSideMenuItem.module.scss @@ -17,25 +17,33 @@ --terra-navigation-side-menu-item-chevron-padding-left: 0.7143rem; --terra-navigation-side-menu-item-chevron-width: 0.8em; --terra-navigation-side-menu-item-color: #b2b5b6; - --terra-navigation-side-menu-item-focus-background-color: #2d3539; + --terra-navigation-side-menu-item-focus-background-color: #1e3a49; --terra-navigation-side-menu-item-focus-box-shadow: inset 0 0 0 1px #4a90e2, inset 0 0 0 4px rgba(0, 0, 0, 0.3); --terra-navigation-side-menu-item-font-size: 1.071rem; --terra-navigation-side-menu-item-font-weight: normal; --terra-navigation-side-menu-item-line-height: 1.42857; --terra-navigation-side-menu-item-focus-chevron-color: #c5c5c6; - --terra-navigation-side-menu-item-hover-background-color: #2d3539; + --terra-navigation-side-menu-item-hover-background-color: #1e3a49; --terra-navigation-side-menu-item-hover-chevron-color: #c5c5c6; --terra-navigation-side-menu-item-hover-color: #b2b5b6; --terra-navigation-side-menu-item-padding-bottom: 0.8225rem; --terra-navigation-side-menu-item-padding-left: 1.2143rem; --terra-navigation-side-menu-item-padding-right: 0.7143rem; --terra-navigation-side-menu-item-padding-top: 0.8225rem; + --terra-navigation-side-menu-item-selected-background-attachment: none; --terra-navigation-side-menu-item-selected-background-color: #004c76; + --terra-navigation-side-menu-item-selected-background-image: none; + --terra-navigation-side-menu-item-selected-before-background-image: none; + --terra-navigation-side-menu-item-selected-background-size: auto; + --terra-navigation-side-menu-item-selected-border-left: 4px solid #3496cf; --terra-navigation-side-menu-item-selected-chevron-color: #c5c5c6; - --terra-navigation-side-menu-item-selected-focus-background-color: #2d3539; + --terra-navigation-side-menu-item-selected-color: #b2b5b6; + --terra-navigation-side-menu-item-selected-focus-background-color: #1e3a49; --terra-navigation-side-menu-item-selected-focus-chevron-color: #c5c5c6; --terra-navigation-side-menu-item-selected-focus-color: #b2b5b6; --terra-navigation-side-menu-item-selected-hover-background-color: #1e3a49; + --terra-navigation-side-menu-item-selected-font-weight: 600; + --terra-navigation-side-menu-item-selected-padding-left: 0.7143rem; --terra-navigation-side-menu-item-selected-hover-chevron-color: #c5c5c6; --terra-navigation-side-menu-item-selected-hover-color: #b2b5b6; --terra-navigation-side-menu-item-text-transform: none; diff --git a/packages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss b/packages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss index 9ac6e58e65..eb83d652be 100644 --- a/packages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss +++ b/packages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss @@ -30,11 +30,19 @@ --terra-navigation-side-menu-item-padding-left: 1.2143rem; --terra-navigation-side-menu-item-padding-right: 0.7143rem; --terra-navigation-side-menu-item-padding-top: 0.8225rem; + --terra-navigation-side-menu-item-selected-background-attachment: none; --terra-navigation-side-menu-item-selected-background-color: #e2f2fc; + --terra-navigation-side-menu-item-selected-background-image: none; + --terra-navigation-side-menu-item-selected-before-background-image: none; + --terra-navigation-side-menu-item-selected-background-size: auto; + --terra-navigation-side-menu-item-selected-border-left: 0.5rem solid #007cc3; --terra-navigation-side-menu-item-selected-chevron-color: #909496; + --terra-navigation-side-menu-item-selected-color: #1c1f21; --terra-navigation-side-menu-item-selected-focus-background-color: #f4f4f4; --terra-navigation-side-menu-item-selected-focus-chevron-color: #909496; --terra-navigation-side-menu-item-selected-focus-color: #1c1f21; + --terra-navigation-side-menu-item-selected-font-weight: 600; + --terra-navigation-side-menu-item-selected-padding-left: 0.7143rem; --terra-navigation-side-menu-item-selected-hover-background-color: #f4fafe; --terra-navigation-side-menu-item-selected-hover-chevron-color: #909496; --terra-navigation-side-menu-item-selected-hover-color: #1c1f21;