From 0432dd9dd110d00cb23b705666eac104aad2d331 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 13 Feb 2019 14:30:35 +0100 Subject: [PATCH] Add background color to menu items being hovered (#13732) * Add background color to menu items being hovered This PR adds some clarity to which menu item you're highlighting. It: - Adds a background color to a menu item hovered - Increases the contrast (opacity) of the keyboard shortcut indicator when hovering - It widens the hit are of the button to go edge to edge It's a relatively small PR, but it's a really nice improvement to have. * Darken other hover colors to match. * Address feedback. * Apply to font size picker too. --- assets/stylesheets/_mixins.scss | 3 ++- packages/components/src/autocomplete/style.scss | 8 +++++--- packages/components/src/font-size-picker/style.scss | 8 ++++++++ packages/components/src/menu-group/style.scss | 3 ++- packages/components/src/menu-item/style.scss | 12 ++++++++---- packages/components/src/panel/style.scss | 2 +- .../src/components/block-settings-menu/style.scss | 7 +++---- 7 files changed, 29 insertions(+), 14 deletions(-) diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss index 54f812844eb046..fa79974e2a1127 100644 --- a/assets/stylesheets/_mixins.scss +++ b/assets/stylesheets/_mixins.scss @@ -209,6 +209,7 @@ color: $dark-gray-900; border: none; box-shadow: none; + background: $light-gray-200; } @mixin menu-style__focus() { @@ -226,7 +227,7 @@ } @mixin block-style__hover { - background: $light-gray-100; + background: $light-gray-200; color: $dark-gray-900; } diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss index 2928c7626881c1..49a602b6789408 100644 --- a/packages/components/src/autocomplete/style.scss +++ b/packages/components/src/autocomplete/style.scss @@ -23,14 +23,16 @@ flex-grow: 1; flex-shrink: 0; align-items: center; - padding: 6px; + padding: 6px 8px; + margin-left: -3px; + margin-right: -3px; text-align: left; &.is-selected { - @include button-style__focus-active; + @include menu-style__focus; } &:hover { - @include button-style__hover; + @include menu-style__hover; } } diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss index e8bb60c971b0bb..6435f4dfd6dee4 100644 --- a/packages/components/src/font-size-picker/style.scss +++ b/packages/components/src/font-size-picker/style.scss @@ -38,6 +38,14 @@ top: calc(50% - 10px); left: 10px; } + + &:hover { + @include menu-style__hover; + } + + &:focus { + @include menu-style__focus; + } } .components-font-size-picker__buttons .components-font-size-picker__selector { diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss index 92dd7747ff483d..6682581a5bfab9 100644 --- a/packages/components/src/menu-group/style.scss +++ b/packages/components/src/menu-group/style.scss @@ -1,9 +1,10 @@ .components-menu-group { width: 100%; - padding: $grid-size - $border-width; + padding: ($grid-size - $border-width) 0; } .components-menu-group__label { margin-bottom: $grid-size; color: $dark-gray-300; + padding: 0 ($grid-size - $border-width); } diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss index 85a0a1b5803568..8f750618c2a159 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -1,7 +1,7 @@ .components-menu-item__button, .components-menu-item__button.components-icon-button { width: 100%; - padding: 8px; + padding: $grid-size ($grid-size-large - $border-width); text-align: left; color: $dark-gray-600; @@ -24,6 +24,10 @@ @include break-medium() { @include menu-style__hover; } + + .components-menu-item__shortcut { + opacity: 1; + } } &:focus:not(:disabled):not([aria-disabled="true"]) { @@ -39,15 +43,15 @@ .components-menu-item__info { margin-top: $grid-size-small; font-size: $default-font-size - 1px; - opacity: 0.82; + opacity: 0.84; } .components-menu-item__shortcut { align-self: center; - opacity: 0.5; + opacity: 0.84; margin-right: 0; margin-left: auto; - padding-left: 8px; + padding-left: $grid-size; // Hide the keyboard shortcuts on mobile, because they aren't super-useful // for most mobile users and it frees up screen space for any item diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index e4f2d58af26454..5b10bbdf8e358e 100644 --- a/packages/components/src/panel/style.scss +++ b/packages/components/src/panel/style.scss @@ -73,7 +73,7 @@ // Hover States .components-panel__body > .components-panel__body-title:hover, .edit-post-last-revision__panel > .components-icon-button:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { - background: $light-gray-100; + background: $light-gray-200; } .components-panel__body-toggle.components-button { diff --git a/packages/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss index 6cdfd96b023cdd..418343d72a446d 100644 --- a/packages/editor/src/components/block-settings-menu/style.scss +++ b/packages/editor/src/components/block-settings-menu/style.scss @@ -10,14 +10,14 @@ } .editor-block-settings-menu__content { - padding: $grid-size - $border-width; + padding: ($grid-size - $border-width) 0; } .editor-block-settings-menu__separator { margin-top: $grid-size; margin-bottom: $grid-size; - margin-left: -$grid-size + $border-width; - margin-right: -$grid-size + $border-width; + margin-left: 0; + margin-right: 0; border-top: $border-width solid $light-gray-500; // Check if the separator is the last child in the node and if so, hide itself @@ -36,7 +36,6 @@ .editor-block-settings-menu__control { width: 100%; justify-content: flex-start; - padding: 8px; background: none; outline: none; border-radius: 0;