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

fix: add styles to dropdown for focus state

Browse Source
This commit is contained in:
Anya Stasiuk 2020-10-07 14:03:03 +03:00
parent b80ab2b1c6
commit cdca7e6ccd
2 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common-elements/dropdown.ts
View File

@ -99,8 +99,8 @@ export const StyledDropdown = styled(Dropdown)`
&[aria-selected='true'] {
background-color: rgba(0, 0, 0, 0.05);
}
&:hover {
&:hover,
&.focused {
background-color: rgba(38, 50, 56, 0.12);
}
}

8
src/components/RequestSamples/styled.elements.ts
View File

@ -1,6 +1,6 @@
import styled from '../../styled-components';
import { InvertedSimpleDropdown } from '../PayloadSamples/styled.elements';
import { darken } from 'polished';
import { darken, lighten } from 'polished';
export const Flex = styled.div`
display: flex;
@ -14,13 +14,15 @@ export const SamplesDropdown = styled(InvertedSimpleDropdown)`
padding: 6px 10px;
border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)};
border-radius: 5px;
&:hover,
&:focus-within {
&:hover {
border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)};
box-shadow: none;
}
&:focus-within {
background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
border: 1px solid ${({ theme }) => lighten(0.25, theme.codeBlock.backgroundColor)};
box-shadow: none;
}
}
`;