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 911445344febc..28a108c521bc4 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 @@ -14,10 +14,9 @@ background: $gray-900; color: $white; border-radius: 0; - height: $header-height + $border-width; + height: $header-height; width: $header-height; position: relative; - margin-bottom: - $border-width; &:active { color: $white; diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index fdbf6b184aa21..8c15cdae33881 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -162,15 +162,13 @@ position: relative; color: $white; border-radius: 0; - height: $header-height + $border-width; + height: $header-height; width: $header-height; - margin-bottom: - $border-width; overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: center; - border-bottom: 1px solid transparent; &:hover, &:active { diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index a0e56658355ac..be8eced71daba 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -125,26 +125,32 @@ html.interface-interface-skeleton__html-container { } .interface-interface-skeleton__sidebar { + border-top: $border-width solid $gray-200; overflow: hidden; @include break-medium() { - border-left: $border-width solid $gray-200; + box-shadow: -$border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. + outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode. } } .interface-interface-skeleton__secondary-sidebar { + border-top: $border-width solid $gray-200; right: 0; + @include break-medium() { - border-right: $border-width solid $gray-200; + box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. + outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode. } } .interface-interface-skeleton__header { flex-shrink: 0; height: auto; // Keep the height flexible. - border-bottom: $border-width solid $gray-200; + box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha. z-index: z-index(".interface-interface-skeleton__header"); color: $gray-900; + outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode. } .interface-interface-skeleton__footer {