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

[DOP-3497]: Add condition for hover state

Browse Source
This commit is contained in:
branberry 2023-02-13 16:09:53 -06:00
parent 2d61688fcc
commit 1931d13c0c
1 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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