From 33e6d42229cdab77c5a8d72daef54fc1230db151 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 12 Feb 2019 09:17:02 +0100 Subject: [PATCH] Try: Show background and increased opacity on disabled switcher (#13721) * Try: Show background and increased opacity on disabled switcher This one goes out to all the @chrivanpatten's in the crowd! Well, specifically, it is in response to this conversation we had here: https://github.com/WordPress/gutenberg/issues/11669#issuecomment-456808244 The problem: we always show the Block Switcher interface, even if no transformations are available. When no transformations are available, the buttonis _disabled_, which usually means it needs to have very contrast. However in this case, the block switcher also works as a block type indicator, which makes it valuable to be able to see the icon in question. This PR tries to marry the two challenges and shows the button as disabled adding a light gray background, but still increasing the opacity. Thoughts? * Try darker gray and monochrome icon. --- .../src/components/block-switcher/style.scss | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-switcher/style.scss b/packages/editor/src/components/block-switcher/style.scss index a994ff7542404..0f062116d1b00 100644 --- a/packages/editor/src/components/block-switcher/style.scss +++ b/packages/editor/src/components/block-switcher/style.scss @@ -11,15 +11,30 @@ padding: 3px; } - .components-icon-button.editor-block-switcher__no-switcher-icon { width: $icon-button-size + 6px + 6px; + .editor-block-icon { margin-right: auto; margin-left: auto; } } +// When the block switcher does not have any transformations, we show it but as disabled. +// The background and opacity change helps make the icon legible, despite being disabled. +.components-button.editor-block-switcher__no-switcher-icon:disabled { + background: $light-gray-200; + border-radius: 0; + opacity: 0.84; + + // Also make the icon monochrome to further imply disabled state. + // We use !important here because icon colors are set as inline styles, + // and should be overridden when disabled. + .editor-block-icon.has-colors { + color: $dark-gray-500 !important; + } +} + // Style this the same as the block buttons in the library. // Needs specificiity to override the icon button. .components-icon-button.editor-block-switcher__toggle {