From f264ee28d74385808c4b0c31927c3b312b651a1d Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Fri, 5 Aug 2016 17:26:37 -0700 Subject: [PATCH 1/4] dropdown color updates, and focusBorder color update --- src/common/_semanticColorVariables.scss | 2 +- src/components/Dropdown/Dropdown.scss | 26 +++++++++++++++---------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/common/_semanticColorVariables.scss b/src/common/_semanticColorVariables.scss index 675b1281a604d..50396aa1abc99 100644 --- a/src/common/_semanticColorVariables.scss +++ b/src/common/_semanticColorVariables.scss @@ -1,4 +1,4 @@ -$focusedBorderColor: $ms-color-neutralSecondaryAlt; +$focusedBorderColor: $ms-color-neutralSecondary; $bodyBackgroundColor: $ms-color-white; $bodyForegroundColor: $ms-color-neutralPrimary; diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index f90daf14c5f9b..66aab60aa365d 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -7,6 +7,9 @@ // -------------------------------------------------- // Dropdown styles +$Dropdown-selectedItem-bg: $ms-color-neutralQuaternaryAlt; +$Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter; + // Mixin for high contrast mode link states @mixin highContrastListItemState { @media screen and (-ms-high-contrast: active) { @@ -27,12 +30,9 @@ } .ms-Dropdown { - @include ms-baseFont; @include ms-u-normalize; - color: $ms-color-neutralPrimary; + @include ms-font-m; - font-size: $ms-font-size-m; - font-weight: $ms-font-weight-regular; margin-bottom: 10px; position: relative; outline: 0; @@ -50,7 +50,7 @@ &:hover, &:active { .ms-Dropdown-title { - border-color: $ms-color-neutralSecondaryAlt; + border-color: $ms-color-themePrimary; } } @@ -205,15 +205,19 @@ } &:hover { - background-color: $ms-color-neutralLight; + background-color: $Dropdown-selectedItem-hover-bg; color: $ms-color-black; @include highContrastListItemState; } + @include focus-border(); + &:focus { + background-color: $ms-color-neutralLighter; + } + &:active { - background-color: $ms-color-neutralLight; - border-color: $ms-color-themePrimary; + background-color: $Dropdown-selectedItem-hover-bg; color: $ms-color-black; } @@ -229,12 +233,14 @@ // Use .is-selected instead. .ms-Dropdown-item.is-selected, .ms-Dropdown-item.ms-Dropdown-item--selected { - background-color: $ms-color-themeLight; + background-color: $Dropdown-selectedItem-bg; color: $ms-color-black; &:hover { - background-color: $ms-color-themeLight; + background-color: $Dropdown-selectedItem-bg; } + @include focus-border(); + @include highContrastListItemState; } \ No newline at end of file From 6c1879b86f5e845742a2947c705b6cc5b92aae54 Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Fri, 5 Aug 2016 18:06:45 -0700 Subject: [PATCH 2/4] Removing icons from check example, setting item height to 36px --- src/components/ContextualMenu/ContextualMenu.scss | 4 +++- .../examples/ContextualMenu.Checkmarks.Example.tsx | 6 ------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/ContextualMenu/ContextualMenu.scss b/src/components/ContextualMenu/ContextualMenu.scss index 8e6ff43875794..bb265e56d5948 100644 --- a/src/components/ContextualMenu/ContextualMenu.scss +++ b/src/components/ContextualMenu/ContextualMenu.scss @@ -3,7 +3,7 @@ $ContextualMenu-background: $ms-color-white; $ContextualMenu-itemHover: $ms-color-neutralLight; $ContextualMenu-expandedItemBackground: $ms-color-neutralQuaternaryAlt; -$ContextualMenu-itemHeight: 40px; +$ContextualMenu-itemHeight: 36px; $ContextualMenu-iconWidth: 24px; .ms-ContextualMenu { @@ -49,6 +49,8 @@ $ContextualMenu-iconWidth: 24px; &.is-expanded, &.is-expanded:hover { background: $ContextualMenu-expandedItemBackground; + color: $ms-color-black; + font-weight: $ms-font-weight-semibold; } } diff --git a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx index c9dcd1f12051e..73619d4bae9f9 100644 --- a/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx +++ b/src/demo/pages/ContextualMenuPage/examples/ContextualMenu.Checkmarks.Example.tsx @@ -40,7 +40,6 @@ export class ContextualMenuCheckmarksExample extends React.Component Date: Fri, 5 Aug 2016 18:15:04 -0700 Subject: [PATCH 3/4] hover color update, focus bg --- src/components/ContextualMenu/ContextualMenu.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/ContextualMenu/ContextualMenu.scss b/src/components/ContextualMenu/ContextualMenu.scss index bb265e56d5948..320838d84d492 100644 --- a/src/components/ContextualMenu/ContextualMenu.scss +++ b/src/components/ContextualMenu/ContextualMenu.scss @@ -1,7 +1,7 @@ @import '../../common/common'; $ContextualMenu-background: $ms-color-white; -$ContextualMenu-itemHover: $ms-color-neutralLight; +$ContextualMenu-itemHover: $ms-color-neutralLighter; $ContextualMenu-expandedItemBackground: $ms-color-neutralQuaternaryAlt; $ContextualMenu-itemHeight: 36px; $ContextualMenu-iconWidth: 24px; @@ -46,6 +46,10 @@ $ContextualMenu-iconWidth: 24px; background: $ContextualMenu-itemHover; } + .is-focusVisible &:focus { + background: $ContextualMenu-itemHover; + } + &.is-expanded, &.is-expanded:hover { background: $ContextualMenu-expandedItemBackground; From 24ee82058f1920a1d67f549c5cd44ac4f5eb6afd Mon Sep 17 00:00:00 2001 From: Aniket Handa Date: Tue, 9 Aug 2016 15:49:37 -0700 Subject: [PATCH 4/4] Addressing comments Newline Cursor pointer in ContextualMenu --- src/components/ContextualMenu/ContextualMenu.scss | 1 + src/components/Dropdown/Dropdown.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/ContextualMenu/ContextualMenu.scss b/src/components/ContextualMenu/ContextualMenu.scss index 320838d84d492..f9bdd9193f170 100644 --- a/src/components/ContextualMenu/ContextualMenu.scss +++ b/src/components/ContextualMenu/ContextualMenu.scss @@ -40,6 +40,7 @@ $ContextualMenu-iconWidth: 24px; height: $ContextualMenu-itemHeight; line-height: $ContextualMenu-itemHeight; display: block; + cursor: pointer; @include text-align(left); &:hover:not([disabled]) { diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index 66aab60aa365d..0f24a606a58a4 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -212,6 +212,7 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter; } @include focus-border(); + &:focus { background-color: $ms-color-neutralLighter; }