Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add focus styles for template card

Browse Source 
[MAILPOET-4676]
This commit is contained in:
Jan Jakes
2023-11-08 15:15:28 +01:00
committed by Aschepikov
parent 4e9f8b6553
commit c5bed279b7
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
mailpoet/assets/css/src/mailpoet-templates.scss
View File

@@ -37,16 +37,21 @@
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
} }
&:hover { &:hover,
background: #fff; &:focus {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15);
color: inherit; color: inherit;
} }
&:focus { // add focus ring in :after pseudo-element to cover badge edge
border-color: #2271b1; &:focus:after {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); border-radius: inherit;
color: inherit; content: '';
inset: 0;
outline: var(--wp-admin-border-width-focus) solid
var(--wp-admin-theme-color);
pointer-events: none;
position: absolute;
} }
} }