Skip to content

Commit

Permalink
Fix flickering when focusing on global style variations (#55267)
Browse files Browse the repository at this point in the history
  • Loading branch information
@t-hamano
t-hamano authored Oct 13, 2023
1 parent 24add08 commit 8c04020
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 9 deletions.
20 changes: 16 additions & 4 deletions packages/edit-site/src/components/global-styles/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,23 +85,35 @@

.edit-site-global-styles-variations_item {
box-sizing: border-box;
// To round the outline in Windows 10 high contrast mode.
border-radius: $radius-block-ui;

.edit-site-global-styles-variations_item-preview {
padding: $border-width * 2;
border-radius: $radius-block-ui;
border: $gray-200 $border-width solid;
box-shadow: 0 0 0 $border-width $gray-200;
// Shown in Windows 10 high contrast mode.
outline: 1px solid transparent;
}

&.is-active .edit-site-global-styles-variations_item-preview {
border: $gray-900 $border-width solid;
box-shadow: 0 0 0 $border-width $gray-900;
// Shown in Windows 10 high contrast mode.
outline-width: 3px;
}

&:hover .edit-site-global-styles-variations_item-preview {
border: var(--wp-admin-theme-color) $border-width solid;
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
}

&:focus .edit-site-global-styles-variations_item-preview {
border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}

&:focus-visible {
// Shown in Windows 10 high contrast mode.
outline: 3px solid transparent;
outline-offset: 0;
}
}

Expand Down
9 changes: 4 additions & 5 deletions packages/edit-site/src/components/sidebar-navigation-screen/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,17 +90,16 @@
}

.edit-site-global-styles-variations_item-preview {
border: $gray-900 $border-width solid;
box-shadow: 0 0 0 $border-width $gray-900;
}
.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
border: $gray-100 $border-width solid;
box-shadow: 0 0 0 $border-width $gray-100;
}
.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
border: var(--wp-admin-theme-color) $border-width solid;
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
}

.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
border: var(--wp-admin-theme-color) var(--wp-admin-border-width-focus) solid;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
}

Expand Down

1 comment on commit 8c04020

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 8c04020.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6507445854
📝 Reported issues:

Please sign in to comment.