From e93a5cd2d91dc4e02f2af55e8dd527c1b89c9c0d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 27 Dec 2019 14:27:38 +0100 Subject: [PATCH] tweaks --- packages/base-styles/_mixins.scss | 2 +- packages/base-styles/_z-index.scss | 1 - .../src/components/block-list/style.scss | 5 +-- .../components/block-navigation/style.scss | 10 +----- .../components/inserter-list-item/style.scss | 32 +------------------ .../src/components/inserter/style.scss | 1 - .../src/block/edit-panel/editor.scss | 3 -- .../src/components/post-title/style.scss | 2 +- 8 files changed, 7 insertions(+), 49 deletions(-) diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index 9714a2ae728c0a..53b1b80c9b3e79 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -224,7 +224,7 @@ @mixin block-style__hover { background: $light-gray-200; - color: $dark-gray-900; + color: $dark-gray-900 !important; } @mixin block-style__focus() { diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index e3318841e57bc2..ce1b42d71d9f58 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -55,7 +55,6 @@ $z-layers: ( ".block-editor-inner-blocks.has-overlay::after": 60, // The toolbar, when contextual, should be above any adjacent nested block click overlays. - ".block-editor-block-list__layout .reusable-block-edit-panel": 61, ".block-editor-block-contextual-toolbar": 61, // The block mover, particularly in nested contexts, diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index d12ca08c21aad8..90717b348a9482 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -108,7 +108,7 @@ } // Navigate mode & Focused wrapper. - &:focus > .block-editor-block-list__block-edit > [data-block] { + &:focus:not(.is-reusable) > .block-editor-block-list__block-edit > [data-block] { @include button-style__focus-active; } @@ -384,7 +384,7 @@ height: $block-padding + 8px; // Show a clickable plus. - .block-editor-inserter__toggle { + .block-editor-inserter__toggle.has-icon { border-radius: 50%; color: $blue-medium-focus; background: $white; @@ -580,6 +580,7 @@ .components-popover__content { margin-left: 0 !important; min-width: auto; + width: max-content; background: none; border: none; box-shadow: none; diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 737353fedf67bc..6df832c7e293ef 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -83,20 +83,12 @@ $tree-item-height: 36px; padding: 6px; text-align: left; color: $dark-gray-600; - border-radius: 4px; + border-radius: 2px; .block-editor-block-icon { margin-right: 6px; } - &:hover:not(:disabled):not([aria-disabled="true"]) { - @include menu-style__hover; - } - - &:focus:not(:disabled):not([aria-disabled="true"]) { - @include menu-style__focus; - } - &.is-selected, &.is-selected:focus { color: $dark-gray-700; diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 824108bc3929ad..7bbe6a156934c8 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -29,38 +29,8 @@ } &:not(:disabled) { - - // Show the hover background in a pseudo selector so it can be below "stacked" icons, like Columns. - &:hover::before { - content: ""; - display: block; - @include block-style__hover(); - position: absolute; - z-index: -1; - border-radius: $radius-round-rectangle; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - &:hover { - .block-editor-block-types-list__item-icon, - .block-editor-block-types-list__item-title { - color: inherit; - } - } - - &:active, - &:focus { - position: relative; - @include block-style__focus(); - background: transparent; - - .block-editor-block-types-list__item-icon, - .block-editor-block-types-list__item-title { - color: inherit; - } + @include block-style__hover(); } &.is-active { diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index d1bbf278a4e749..1a83d3df00a358 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -28,7 +28,6 @@ $block-inserter-search-height: 38px; .block-editor-inserter__toggle { display: inline-flex; align-items: center; - color: $dark-gray-500; background: none; cursor: pointer; border: none; diff --git a/packages/block-library/src/block/edit-panel/editor.scss b/packages/block-library/src/block/edit-panel/editor.scss index 4d8d17ee23ab9c..715d410a02ba45 100644 --- a/packages/block-library/src/block/edit-panel/editor.scss +++ b/packages/block-library/src/block/edit-panel/editor.scss @@ -11,9 +11,6 @@ margin: 0 (-$block-padding); padding: $grid-size $block-padding; - // Elevate the reusable blocks toolbar above the clickthrough overlay. - z-index: z-index(".block-editor-block-list__layout .reusable-block-edit-panel"); - // Use opacity to work in various editor styles. border: $border-width dashed $border-color; border-bottom: none; diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index 0d52892ac2e25d..8a3c42c8ac7802 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -89,7 +89,7 @@ @include break-mobile() { position: absolute; - top: -$block-toolbar-height + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size + top: -$icon-button-size + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size right: 0; flex-wrap: nowrap; width: auto;