Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-03 20:00:20 +03:00
Code Issues Packages Projects Releases Wiki Activity

[DOP-3497]: use focus instead of focus-visible

Browse Source
This commit is contained in:
branberry 2023-02-15 15:44:11 -06:00
parent 1931d13c0c
commit 85273262b1
1 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/VersionSelector/styled.elements.ts
View File

@ -117,7 +117,7 @@ export const enabledOptionStyle = css`
background-color: ${palette.gray.light2}; background-color: ${palette.gray.light2};
} }
&:focus-visible { &:focus {
color: ${palette.blue.dark2}; color: ${palette.blue.dark2};
background-color: ${palette.blue.light3}; background-color: ${palette.blue.light3};
@ -131,13 +131,13 @@ export const enabledOptionStyle = css`
export const StyledLi = styled.li.attrs<{ export const StyledLi = styled.li.attrs<{
selected: boolean; selected: boolean;
hovered?: boolean;
disabled?: boolean; disabled?: boolean;
focused?: boolean;
}>(({ selected }) => ({ }>(({ selected }) => ({
role: 'option', role: 'option',
'aria-selected': selected, 'aria-selected': selected,
tabIndex: '0', tabIndex: '0',
}))<{ selected: boolean; hovered?: boolean; disabled?: boolean }>` }))<{ selected: boolean; disabled?: boolean }>`
display: flex; display: flex;
width: 100%; width: 100%;
outline: none; outline: none;
@ -149,24 +149,20 @@ export const StyledLi = styled.li.attrs<{
color: ${palette.gray.dark3}; color: ${palette.gray.dark3};
font-weight: ${props => (props.selected ? `bold` : `normal`)}; font-weight: ${props => (props.selected ? `bold` : `normal`)};
${props =>
props.hovered && &:before {
` content: '';
color: #083C90; position: absolute;
backgroundColor: #E1F7FF transform: scaleY(0.3);
&:before { top: 7px;
content: ''; bottom: 7px;
position: absolute; left: 0;
transform: scaleY(0.3); right: 0;
top: 7px; width: 4px;
bottom: 7px; border-radius: 0px 4px 4px 0px;
left: 0; opacity: 0;
right: 0; transition: all ${transitionDuration.default}ms ease-in-out;
width: 4px; }
border-radius: 0px 4px 4px 0px;
opacity: 0;
transition: all ${transitionDuration.default}ms ease-in-out;
}`}
${props => (props.disabled ? disabledOptionStyle : enabledOptionStyle)} ${props => (props.disabled ? disabledOptionStyle : enabledOptionStyle)}
`; `;