diff --git a/packages/editor/src/components/url-popover/index.js b/packages/editor/src/components/url-popover/index.js index c89f76d8bfd626..5842dd6017b5ed 100644 --- a/packages/editor/src/components/url-popover/index.js +++ b/packages/editor/src/components/url-popover/index.js @@ -54,7 +54,7 @@ class URLPopover extends Component { { !! renderSettings && ( svg { + padding: 5px; + border-radius: $radius-round-rectangle; + height: 30px; + width: 30px; + } + + &:not(:disabled):not([aria-disabled="true"]):not(.is-default):hover { + box-shadow: none; + + > svg { + @include formatting-button-style__hover; + } + } + + &:not(:disabled):focus { + box-shadow: none; + + > svg { + @include formatting-button-style__focus; + } + } + } + &__settings-toggle { flex-shrink: 0; - width: $icon-button-size; - height: $icon-button-size; - .dashicon { - transform: rotate(90deg); + // Add a left divider to the toggle button. + border-radius: 0; + border-left: $border-width solid $light-gray-500; + margin-left: 1px; + + &[aria-expanded="true"] .dashicon { + transform: rotate(180deg); } } &__settings { - padding: 7px 8px; + padding: $panel-padding; border-top: $border-width solid $light-gray-500; - padding-top: 7px + $border-width; + + .components-base-control:last-child .components-base-control__field { + margin-bottom: 0; + } } } diff --git a/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap index 4bffa2ecb37473..f8f0aa9027bdc7 100644 --- a/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/url-popover/test/__snapshots__/index.js.snap @@ -16,7 +16,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = ` @@ -40,7 +40,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]