From 85f1db9ba66223412fccdeb797be497d75c6830f Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 11 Oct 2023 11:54:25 +0200 Subject: [PATCH] Use nth-child notation instead of :has and sibling selector --- .../components/colors-gradients/style.scss | 21 ++++--------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss index cccce186353b44..6cade124b7fe46 100644 --- a/packages/block-editor/src/components/colors-gradients/style.scss +++ b/packages/block-editor/src/components/colors-gradients/style.scss @@ -77,33 +77,20 @@ $swatch-gap: 12px; border-right: 1px solid $gray-300; border-bottom: 1px solid $gray-300; - // Identify the first instance as the item that is not a subsequent item to an - // item with the same class. The `~` selector is used instead of `+` to take - // into account any potential `ToolsPanelItem` placeholder item. - &:not(& ~ &) { + // Identify the first visible instance as placeholder items will not have this class. + &:nth-child(1 of &) { margin-top: $grid-unit-30; border-top-left-radius: $radius-block-ui; border-top-right-radius: $radius-block-ui; border-top: 1px solid $gray-300; } - // Identify the last instance as an item without any subsequent siblings - // with the same class. The `~` selector is used instead of `+` to take - // into account any potential `ToolsPanelItem` placeholder item. - &:not(:has(~ &)) { + // Identify the last visible instance as placeholder items will not have this class. + &:nth-last-child(1 of &) { border-bottom-left-radius: $radius-block-ui; border-bottom-right-radius: $radius-block-ui; } - // Less accurate fallback to detect the last instance of this item - // for older browsers not yet supporting the `:has()` selector. - @supports not selector(:has(*)) { - &.last { - border-bottom-left-radius: $radius-block-ui; - border-bottom-right-radius: $radius-block-ui; - } - } - > div, > div > button { border-radius: inherit;