From 3d7a7a7482947f21847558aa4945a7fc5ca7557b Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 23 Feb 2021 16:54:27 +0100 Subject: [PATCH] Refactor the button sizing CSS. --- .../components/src/toolbar-group/style.scss | 109 ++++++++++-------- 1 file changed, 61 insertions(+), 48 deletions(-) diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss index 98d0832e54736..dc1152e6794e0 100644 --- a/packages/components/src/toolbar-group/style.scss +++ b/packages/components/src/toolbar-group/style.scss @@ -67,60 +67,73 @@ div.components-toolbar { // Size multiple sequential buttons to be optically balanced. // Icons are 36px, as set by a 24px icon and 12px padding. -.components-accessible-toolbar .components-toolbar-group > .components-button.components-button.has-icon, -.components-toolbar div > .components-button.components-button.has-icon { - min-width: $block-toolbar-height - $grid-unit-15; - padding-left: $grid-unit-15 / 2; // 6px. - padding-right: $grid-unit-15 / 2; - - svg { - min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this. +.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class. +.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot, // When no plugin adds to slots, the segment has a `components-toolbar-group` class. +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed. +.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button. +.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group { // Inline formatting tools use this class. + + // Segments with just a single button. + > .components-button:first-child:last-child, + > .components-dropdown:first-child:last-child .components-button, + &.components-dropdown > .components-button.components-button, // Single segments where the dropdown is also the toolbar group (such as text align). + &.components-dropdown > * .components-button { + min-width: $block-toolbar-height; + padding-left: $grid-unit-15; + padding-right: $grid-unit-15; + + &::before { + left: $grid-unit-10; + right: $grid-unit-10; + } } - &::before { - left: 2px; - right: 2px; + // First. + // @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment. + > .components-button:first-child, + > div:first-child > .components-button, + > .components-dropdown:first-child .components-button { + min-width: $block-toolbar-height - $grid-unit-15 / 2; + padding-left: $grid-unit-15 - $border-width; + padding-right: $grid-unit-15 / 2; + + &::before { + left: $grid-unit-10; + right: 2px; + } } -} -// First button in a group. -.components-accessible-toolbar .components-toolbar-group > .components-button:first-child.has-icon, -.components-accessible-toolbar .components-toolbar-group > div:first-child > .components-button.has-icon, -.components-toolbar div:first-child .components-button.has-icon { - min-width: $block-toolbar-height - $grid-unit-15 / 2; - padding-left: $grid-unit-15 - $border-width; - padding-right: $grid-unit-15 / 2; - - &::before { - left: $grid-unit-10; - right: 2px; - } -} + // Middle. + // @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment. + > .components-button, + > div > .components-button, + > .components-dropdown .components-button { + min-width: $block-toolbar-height - $grid-unit-15; + padding-left: $grid-unit-15 / 2; // 6px. + padding-right: $grid-unit-15 / 2; + + svg { + min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this. + } -// Last button in a group. -.components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon, -.components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon, -.components-toolbar div:last-child .components-button.has-icon { - min-width: $block-toolbar-height - $grid-unit-15 / 2; - padding-left: $grid-unit-15 / 2; - padding-right: $grid-unit-15 - $border-width; - - &::before { - left: 2px; - right: $grid-unit-10; + &::before { + left: 2px; + right: 2px; + } } -} -// Single buttons should remain 48px. -.components-accessible-toolbar .components-toolbar-group > .components-button:first-of-type:last-of-type.has-icon, -.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon, -.components-toolbar div:first-child:last-child > .components-button.has-icon { - min-width: $block-toolbar-height; - padding-left: $grid-unit-15; - padding-right: $grid-unit-15; - - &::before { - left: $grid-unit-10; - right: $grid-unit-10; + // Last. + // @todo, this unnamed div only shows up when plugins add to slots. We should remove the fragment. + > .components-button:last-child, + > div:last-child > .components-button, + > .components-dropdown:last-child .components-button { + min-width: $block-toolbar-height - $grid-unit-15 / 2; + padding-left: $grid-unit-15 / 2; + padding-right: $grid-unit-15 - $border-width; + + &::before { + left: 2px; + right: $grid-unit-10; + } } }