Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
update: selected color
Browse files Browse the repository at this point in the history
  • Loading branch information
@MadanKumarGovindaswamy
MadanKumarGovindaswamy committed May 6, 2024
1 parent 8968d8b commit 5ca4e67
Show file tree
Hide file tree
Showing 20 changed files with 13 additions and 45 deletions.
22 changes: 2 additions & 20 deletions packages/terra-navigation-side-menu/src/MenuItem.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,33 +86,15 @@
}

&.is-selected {
background-attachment: var(--terra-navigation-side-menu-item-selected-background-attachment);
background-color: var(--terra-navigation-side-menu-item-selected-background-color, #f4f4f4);
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;
}
background-color: var(--terra-navigation-side-menu-item-selected-background-color, darken(#ebf6fd, 2%));

.chevron {
color: var(--terra-navigation-side-menu-item-selected-chevron-color, #909496);
}

&:hover,
&.is-hovered {
background-color: var(--terra-navigation-side-menu-item-selected-hover-background-color, #f4f4f4);
background-color: var(--terra-navigation-side-menu-item-selected-hover-background-color, darken(#ebf6fd, 2%));
color: var(--terra-navigation-side-menu-item-selected-hover-color);

/* stylelint-disable-next-line max-nesting-depth */
Expand Down
4 changes: 2 additions & 2 deletions packages/terra-navigation-side-menu/src/NavigationSideMenu.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@ class NavigationSideMenu extends Component {
}

let header;
if (this.onBack || !currentItem.isRootMenu) {
if (this.onBack || (currentItem && !currentItem.isRootMenu)) {
header = (
<li role="none">
<div
Expand Down Expand Up @@ -396,7 +396,7 @@ class NavigationSideMenu extends Component {
aria-relevant="additions text"
refCallback={this.setVisuallyHiddenComponent}
/>
<ContentContainer {...customProps} fill className={sideMenuContentContainerClassNames}>
<ContentContainer {...customProps} className={sideMenuContentContainerClassNames}>
<nav role="navigation" aria-label={this.props.ariaLabel}>
<ul role="menu" ref={(refobj) => this.handleMenuListRef(refobj)} className={cx(['side-menu-list'])}>
{header}
Expand Down
2 changes: 2 additions & 0 deletions packages/terra-navigation-side-menu/src/NavigationSideMenu.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
.side-menu-content-container {
background-color: var(--terra-navigation-side-menu-content-container-background-color);
overflow: hidden;
height: 100%;
width: 100%;

> :nth-child(1) {
background-color: var(--terra-navigation-side-menu-content-container-header-background-color);
Expand Down
2 changes: 1 addition & 1 deletion packages/terra-navigation-side-menu/src/_MenuItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ class MenuItem extends React.Component {

const itemClassNames = classNames(cx(
'menu-item',
{ 'is-selected': isSelected },
{ 'is-selected': isSelected && !hasChevron },
{ 'is-active': this.state.active },
theme.className,
),
Expand Down
14 changes: 3 additions & 11 deletions ...terra-navigation-side-menu/src/clinical-lowlight-theme/NavigationSideMenuItem.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
--terra-navigation-side-menu-list-item-border-right: none;
--terra-navigation-side-menu-list-item-border-top: none;

--terra-navigation-side-menu-item-active-background-color: #2d3539;
--terra-navigation-side-menu-item-active-background-color: #1e3a49;
--terra-navigation-side-menu-item-active-chevron-color: #c5c5c6;
--terra-navigation-side-menu-item-border-bottom: none;
--terra-navigation-side-menu-item-border-left: none;
Expand All @@ -30,20 +30,12 @@
--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: #2d3539;
--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-background-color: #004c76;
--terra-navigation-side-menu-item-selected-chevron-color: #c5c5c6;
--terra-navigation-side-menu-item-selected-color: #b2b5b6;
--terra-navigation-side-menu-item-selected-focus-background-color: #2d3539;
--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-font-weight: 600;
--terra-navigation-side-menu-item-selected-padding-left: 0.7143rem;
--terra-navigation-side-menu-item-selected-hover-background-color: #2d3539;
--terra-navigation-side-menu-item-selected-hover-background-color: #1e3a49;
--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;
Expand Down
14 changes: 3 additions & 11 deletions ...ages/terra-navigation-side-menu/src/orion-fusion-theme/NavigationSideMenuItem.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
--terra-navigation-side-menu-list-item-border-right: none;
--terra-navigation-side-menu-list-item-border-top: none;

--terra-navigation-side-menu-item-active-background-color: #f5fafe;
--terra-navigation-side-menu-item-active-background-color: #f4fafe;
--terra-navigation-side-menu-item-active-chevron-color: #bcbfc0;
--terra-navigation-side-menu-item-border-bottom: none;
--terra-navigation-side-menu-item-border-left: none;
Expand All @@ -30,20 +30,12 @@
--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: #f4f4f4;
--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-background-color: #e2f2fc;
--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: #f4f4f4;
--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;
--terra-navigation-side-menu-item-text-transform: none;
Expand Down
Binary file modified ...ht-theme/en/chrome_medium/navigation-side-menu-spec/first_menu_item_focused.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../chrome_medium/navigation-side-menu-spec/hover_navigation_side_menu_display.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...eme/en/chrome_medium/navigation-side-menu-spec/navigation_side_menu_display.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ..._medium/navigation-side-menu-spec/navigation_side_menu_display_with_toolbar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...t-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...me_medium/navigation-side-menu-spec/submenu_header_focused_with_right_arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...n-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...me_medium/navigation-side-menu-spec/first_menu_item_focused_with_left_arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...t-theme/en/chrome_medium/navigation-side-menu-spec/second_menu_item_focused.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...rome_medium/navigation-side-menu-spec/selected_navigation_side_menu_display.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5ca4e67

Please sign in to comment.