components UncontrolledInput.tsx

100% Statements 6/6

100% Branches 0/0

100% Functions 5/5

100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24  
 
1x
1756x
 
 
1756x
 
 
 
 
 
 
 
1756x
1756x
 
 
 
 
1756x
 
 
  import styled from "styled-components";
 
export const UncontrolledInput = styled.input`
  border: 1px solid ${(props) => props.theme.borderInactive};
  box-sizing: border-box;
  border-radius: 6px;
  color: ${(props) => props.theme.textMain};
  height: 34px;
  padding: 0 0 0 8px;
  margin-right: 8px;
  width: 100%;
 
  &:focus {
    /* Negative outline offset keeps the focus ring inside the element so it doesn't widen on focus */
    border-color: ${(props) => props.theme.inputBorderFocus};
    outline: 2px solid ${(props) => props.theme.inputBorderFocus};
    outline-offset: -2px;
  }
 
  &::placeholder {
    color: ${(props) => props.theme.inputTextPlaceholder};
  }
`;