Skip to content

Commit

Permalink
Try: Show background and increased opacity on disabled switcher
Browse files Browse the repository at this point in the history
This one goes out to all the @chrivanpatten's in the crowd!

Well, specifically, it is in response to this conversation we had here: #11669 (comment)

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?
  • Loading branch information
Joen Asmussen committed Feb 7, 2019
1 parent 3e12a7a commit 2fc5404
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion packages/editor/src/components/block-switcher/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,23 @@
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-100;
border-radius: 0;
opacity: 0.8;
}

// 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 {
Expand Down

0 comments on commit 2fc5404

Please sign in to comment.