Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-07 21:54:53 +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'] { &[aria-selected='true'] {
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
} }
&:hover,
&:hover { &.focused {
background-color: rgba(38, 50, 56, 0.12); 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 styled from '../../styled-components';
import { InvertedSimpleDropdown } from '../PayloadSamples/styled.elements'; import { InvertedSimpleDropdown } from '../PayloadSamples/styled.elements';
import { darken } from 'polished'; import { darken, lighten } from 'polished';
export const Flex = styled.div` export const Flex = styled.div`
display: flex; display: flex;
@ -14,13 +14,15 @@ export const SamplesDropdown = styled(InvertedSimpleDropdown)`
padding: 6px 10px; padding: 6px 10px;
border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)}; border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)};
border-radius: 5px; border-radius: 5px;
&:hover, &:hover {
&:focus-within {
border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)}; border: 1px solid ${({ theme }) => darken(0.05, theme.codeBlock.backgroundColor)};
box-shadow: none; box-shadow: none;
} }
&:focus-within { &:focus-within {
background-color: ${({ theme }) => theme.codeBlock.backgroundColor}; background-color: ${({ theme }) => theme.codeBlock.backgroundColor};
border: 1px solid ${({ theme }) => lighten(0.25, theme.codeBlock.backgroundColor)};
box-shadow: none;
} }
} }
`; `;