Skip to content
Snippets Groups Projects
Commit 9d7f08c8 authored by chris's avatar chris
Browse files

find-component

parent 2fe5b419
No related branches found
No related tags found
1 merge request!268Fixes
...@@ -27,10 +27,11 @@ const Wrapper = styled.div` ...@@ -27,10 +27,11 @@ const Wrapper = styled.div`
const SingleRow = styled.div` const SingleRow = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 100%;
`; `;
const SearchInputWrapper = styled.div` const SearchInputWrapper = styled.div`
width: 75%; width: 266px;
`; `;
const SearchInput = styled.input` const SearchInput = styled.input`
...@@ -40,7 +41,7 @@ const SearchInput = styled.input` ...@@ -40,7 +41,7 @@ const SearchInput = styled.input`
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
padding: ${grid(1)} ${grid(10)} ${grid(1)} ${grid(1)}; padding: ${grid(1)} ${grid(10)} ${grid(1)} ${grid(1)};
width: 78%; width: calc(100% - ${grid(10)});
::placeholder { ::placeholder {
color: #d8dae0; color: #d8dae0;
...@@ -51,10 +52,16 @@ const SearchInput = styled.input` ...@@ -51,10 +52,16 @@ const SearchInput = styled.input`
} }
`; `;
const ControlsWrapper = styled.div`
display: flex;
margin-left: auto;
width: 126px;
`;
const CounterInput = styled.span` const CounterInput = styled.span`
font-size: 12px; font-size: 12px;
position: absolute; position: absolute;
right: 155px; right: 145px;
-webkit-text-fill-color: rgba(27, 43, 75, 0.28); -webkit-text-fill-color: rgba(27, 43, 75, 0.28);
top: 13px; top: 13px;
z-index: 1; z-index: 1;
...@@ -230,34 +237,36 @@ const FindComponent = ({ ...@@ -230,34 +237,36 @@ const FindComponent = ({
/> />
<CounterInput> {counterText} </CounterInput> <CounterInput> {counterText} </CounterInput>
</SearchInputWrapper> </SearchInputWrapper>
<IconWrapper onClick={matchCase} role="button" tabIndex="0"> <ControlsWrapper>
<Svg active={matchCaseSearch} fill="none" viewBox="0 0 24 24"> <IconWrapper onClick={matchCase} role="button" tabIndex="0">
<title> Match Case </title> <Svg active={matchCaseSearch} fill="none" viewBox="0 0 24 24">
<path d="M2.5,4v3h5v12h3V7h5V4H2.5z M21.5,9h-9v3h3v7h3v-7h3V9z" /> <title> Match Case </title>
</Svg> <path d="M2.5,4v3h5v12h3V7h5V4H2.5z M21.5,9h-9v3h3v7h3v-7h3V9z" />
</IconWrapper> </Svg>
<IconWrapper </IconWrapper>
onClick={() => findPreviousMatch(searchValue, matchCaseSearch)} <IconWrapper
role="button" onClick={() => findPreviousMatch(searchValue, matchCaseSearch)}
tabIndex="0" role="button"
> tabIndex="0"
<StyledIcon name="navigatePrevious" /> >
</IconWrapper> <StyledIcon name="navigatePrevious" />
<IconWrapper </IconWrapper>
onClick={() => findNextMatch(searchValue, matchCaseSearch)} <IconWrapper
role="button" onClick={() => findNextMatch(searchValue, matchCaseSearch)}
tabIndex="0" role="button"
> tabIndex="0"
<StyledIcon name="navigateNext" /> >
</IconWrapper> <StyledIcon name="navigateNext" />
</IconWrapper>
<ExpandedWrapper onClick={showExpanded}>
<StyledIcon name="more" /> <ExpandedWrapper onClick={showExpanded}>
</ExpandedWrapper> <StyledIcon name="more" />
</ExpandedWrapper>
<CloseWrapper onClick={closeFind}>
<StyledIcon name="close" /> <CloseWrapper onClick={closeFind}>
</CloseWrapper> <StyledIcon name="close" />
</CloseWrapper>
</ControlsWrapper>
</SingleRow> </SingleRow>
</Wrapper> </Wrapper>
); );
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment