diff --git a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss index 75119be30857f6..41e97f4d402bcf 100644 --- a/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss +++ b/packages/edit-post/src/components/header/fullscreen-mode-close/style.scss @@ -1,3 +1,6 @@ +// Developer notes: these rules are duplicated for the site editor. +// They need to be updated in both places. + .edit-post-fullscreen-mode-close.has-icon { // Do not show the toolbar icon on small screens, // when Fullscreen Mode is not an option in the "More" menu. @@ -23,7 +26,9 @@ box-shadow: none; } - &:focus::before { + &::before { + transition: box-shadow 0.1s ease; + @include reduce-motion("transition"); content: ""; display: block; position: absolute; @@ -32,8 +37,16 @@ bottom: 9px; left: 9px; border-radius: $radius-block-ui + $border-width + $border-width; + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e; + } - // Lightened spot color focus. + // Hover color. + &:hover::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700; + } + + // Lightened spot color focus. + &:focus::before { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); } } diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss index c3fec21511d40b..eec2ca5c784a93 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss @@ -62,7 +62,6 @@ } .edit-site-navigation-panel__back-to-dashboard.components-button.is-tertiary { - border-radius: 0; height: $button-size; margin-top: $grid-unit-30; padding: $grid-unit $grid-unit-20 $grid-unit $grid-unit; diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss index c628dae3dd8841..d3ab0f7ac3d5b1 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss @@ -1,3 +1,6 @@ +// Developer notes: these rules are duplicated for the post editor. +// They need to be updated in both places. + .edit-site-navigation-toggle { align-items: center; background: $gray-900; @@ -21,19 +24,42 @@ &.has-icon { min-width: $header-height; - &:hover { - background: #32373d; // WP-admin light-gray. - color: $white; - } + &:hover, &:active { color: $white; } + &:focus { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 3px $white; + box-shadow: none; + } + + &::before { + transition: box-shadow 0.1s ease; + @include reduce-motion("transition"); + content: ""; + display: block; + position: absolute; + top: 9px; + right: 9px; + bottom: 9px; + left: 9px; + border-radius: $radius-block-ui + $border-width + $border-width; + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) #23282e; + } + + // Hover color. + &:hover::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700; + } + + // Lightened spot color focus. + &:focus::before { + box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) rgba($white, 0.1), inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); } } } .edit-site-navigation-toggle__site-icon { - width: 36px; + width: $button-size; + border-radius: $radius-block-ui; }