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;