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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | 13x 13x 2x 13x | import { bool } from 'prop-types'; import styled, { css } from 'styled-components'; import { getInlineInputCommonStyle, getInlineInputStyle, } from '../formSelectors'; import { rem } from '../../Typography'; const propTypes = { invalid: bool.isRequired, submitting: bool.isRequired, }; const StyledInlineInput = styled.input` -webkit-appearance: none; box-sizing: border-box; max-width: 100%; width: 100%; border-width: 1px; border-style: solid; border-color: transparent; background-color: transparent; transition: 0.2s ease-in-out; transition-property: color, background-color, border; overflow: visible; vertical-align: middle; display: inline-block; border-radius: ${rem(6)}; height: ${rem(40)}; padding: 0 ${rem(10)}; &:focus { outline: none; } &::placeholder { color: inherit; } ${({ theme, invalid, submitting }) => css` ${getInlineInputCommonStyle(theme)} ${getInlineInputStyle(theme, invalid, 'normal')} ${submitting && `padding-right : ${rem(36)};`} &:hover { ${getInlineInputStyle(theme, invalid, 'hover')} } &:focus { outline: none; ${getInlineInputStyle(theme, invalid, 'active')} } &:disabled { ${getInlineInputStyle(theme, invalid, 'disabled')} } `} `; StyledInlineInput.propTypes = propTypes; export default StyledInlineInput; |