diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 9194935c616b2..a8cf19135b428 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -89,6 +89,9 @@ * Block Toolbar when contextual. */ +// Base left position for the toolbar when fixed. +@include editor-left(".block-editor-block-contextual-toolbar.is-fixed"); + .block-editor-block-contextual-toolbar { // Block UI appearance. display: inline-flex; @@ -104,7 +107,6 @@ &.is-fixed { position: sticky; top: 0; - left: 0; z-index: z-index(".block-editor-block-popover"); display: block; width: 100%; @@ -121,14 +123,15 @@ // on desktop and tablet viewports the toolbar is fixed // on top of interface header + @include break-medium() { &.is-fixed { + // leave room for block inserter + margin-left: $grid-unit-80; // position on top of interface header position: fixed; - top: $grid-unit-50 - 2; - // leave room for block inserter - left: $grid-unit-80 + $grid-unit-40; + top: $admin-bar-height + $grid-unit; // Don't fill up when empty min-height: initial; // remove the border @@ -137,15 +140,17 @@ display: flex; &.is-collapsed { - left: $grid-unit-10 * 32; + width: initial; + margin-left: $grid-unit-80 * 3 + $grid-unit-30; } .is-fullscreen-mode & { - top: $grid-unit - 2; // leave room for block inserter - left: $grid-unit-80 + $grid-unit-70; + margin-left: $grid-unit-80 + $grid-unit-70; + top: $grid-unit; &.is-collapsed { - left: $grid-unit-10 * 35; + width: initial; + margin-left: $grid-unit-80 * 4 + $grid-unit-30; } } @@ -183,16 +188,21 @@ } .show-icon-labels & { - left: $grid-unit-80 + $grid-unit-50; + + margin-left: $grid-unit-80; &.is-collapsed { - left: $grid-unit-10 * 56; + margin-left: $grid-unit-80 * 6; } .is-fullscreen-mode & { - left: $grid-unit-80 + $grid-unit-80; + margin-left: $grid-unit-80 + $grid-unit-80; + &.is-collapsed { + margin-left: $grid-unit-80 * 7; + } } + .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after { left: 0; } @@ -250,35 +260,7 @@ // except for the inserter on the left @include break-medium() { &.is-fixed { - - left: 28 * $grid-unit; - width: calc(100% - #{28 * $grid-unit}); - - &.is-collapsed { - // when collapsed minimize area - width: initial; - left: $grid-unit * 48; - } - - // collapsed wp admin sidebar when not in full screen mode - .auto-fold & { - left: $grid-unit-80 + $grid-unit-40; - width: calc(100% - #{$grid-unit-80 + $grid-unit-40}); - - &.is-collapsed { - left: $grid-unit * 32; - } - } - - .is-fullscreen-mode & { - width: calc(100% - #{$grid-unit-80 + $grid-unit-70}); - left: $grid-unit-80 + $grid-unit-70; - &.is-collapsed { - left: $grid-unit * 36; - // when collapsed minimize area - width: initial; - } - } + width: 100%; } } @@ -287,54 +269,7 @@ // for the block inserter the publish button @include break-large() { &.is-fixed { - - .auto-fold & { - // Don't fill the whole header, minimize area - width: initial; - - // leave room for block inserter and the dashboard navigation - left: $grid-unit-80 + $grid-unit-40 + ( $grid-unit-80 * 2 ); - - &.is-collapsed { - // when collapsed minimize area - width: initial; - left: $grid-unit * 48; - } - - } - - // collapsed wp admin sidebar when not in full screen mode - .auto-fold.folded & { - width: initial; - left: $grid-unit-80 + $grid-unit-40; - - &.is-collapsed { - // when collapsed minimize area - width: initial; - left: $grid-unit * 32; - } - - } - - .auto-fold.is-fullscreen-mode & { - // Don't fill the whole header, minimize area - width: initial; - left: $grid-unit-80 + $grid-unit-70; - - &.is-collapsed { - // when collapsed minimize area - width: initial; - left: $grid-unit * 36; - } - } - - .auto-fold.is-fullscreen-mode .show-icon-labels & { - left: $grid-unit-80 * 2; - &.is-collapsed { - left: $grid-unit * 48; - } - } - + width: initial; } }