From 2558bf5b88a727d427dba5019b4b1fbd4f4d5132 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 7 Feb 2019 12:57:55 +0100 Subject: [PATCH 1/4] 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. --- packages/components/src/menu-group/style.scss | 3 ++- packages/components/src/menu-item/style.scss | 13 +++++++++---- .../src/components/block-settings-menu/style.scss | 7 +++---- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss index 92dd7747ff483..6682581a5bfab 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 85a0a1b580356..743941a3fee29 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; @@ -23,6 +23,11 @@ // See: https://github.com/WordPress/gutenberg/pull/10333 @include break-medium() { @include menu-style__hover; + background: $light-gray-200; + } + + .components-menu-item__shortcut { + opacity: 1; } } @@ -39,15 +44,15 @@ .components-menu-item__info { margin-top: $grid-size-small; font-size: $default-font-size - 1px; - opacity: 0.82; + opacity: 0.8; } .components-menu-item__shortcut { align-self: center; - opacity: 0.5; + opacity: 0.8; 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/editor/src/components/block-settings-menu/style.scss b/packages/editor/src/components/block-settings-menu/style.scss index 6cdfd96b023cd..418343d72a446 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; From 334b98a746de305db694a5aa5dc8eedc9e88bdcb Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 7 Feb 2019 15:32:59 +0100 Subject: [PATCH 2/4] Darken other hover colors to match. --- assets/stylesheets/_mixins.scss | 2 +- packages/components/src/menu-item/style.scss | 4 ++-- packages/components/src/panel/style.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss index 54f812844eb04..c80bbdf973024 100644 --- a/assets/stylesheets/_mixins.scss +++ b/assets/stylesheets/_mixins.scss @@ -226,7 +226,7 @@ } @mixin block-style__hover { - background: $light-gray-100; + background: $light-gray-200; color: $dark-gray-900; } diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss index 743941a3fee29..beaee67b94864 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -44,12 +44,12 @@ .components-menu-item__info { margin-top: $grid-size-small; font-size: $default-font-size - 1px; - opacity: 0.8; + opacity: 0.84; } .components-menu-item__shortcut { align-self: center; - opacity: 0.8; + opacity: 0.84; margin-right: 0; margin-left: auto; padding-left: $grid-size; diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss index e4f2d58af2645..5b10bbdf8e358 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 { From f54c31c8c487aa9e6f86a1ad1f9dbeeb38e5cc7f Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 12 Feb 2019 11:21:00 +0100 Subject: [PATCH 3/4] Address feedback. --- assets/stylesheets/_mixins.scss | 1 + packages/components/src/autocomplete/style.scss | 8 +++++--- packages/components/src/menu-item/style.scss | 1 - 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss index c80bbdf973024..fa79974e2a112 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() { diff --git a/packages/components/src/autocomplete/style.scss b/packages/components/src/autocomplete/style.scss index 2928c7626881c..49a602b678940 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/menu-item/style.scss b/packages/components/src/menu-item/style.scss index beaee67b94864..8f750618c2a15 100644 --- a/packages/components/src/menu-item/style.scss +++ b/packages/components/src/menu-item/style.scss @@ -23,7 +23,6 @@ // See: https://github.com/WordPress/gutenberg/pull/10333 @include break-medium() { @include menu-style__hover; - background: $light-gray-200; } .components-menu-item__shortcut { From 3426b53d7e0deea6ff3cecaf43b8cec3f668eaff Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 13 Feb 2019 09:10:10 +0100 Subject: [PATCH 4/4] Apply to font size picker too. --- packages/components/src/font-size-picker/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss index e8bb60c971b0b..6435f4dfd6dee 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 {