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 | 1x 1x 1x | import React from 'react'; import PropTypes from 'prop-types'; import Atom from '../../../atoms/Atom'; import Paper from '../../../atoms/Paper'; import withStyle from '../../../Theme/withStyle'; const InputOutline = ({ children, css, labelIsActive, labelWidth, ...rest }) => ( <Paper {...rest} element="fieldset" css={css}> <Atom element="legend" css={{ position: 'relative', zIndex: 2, marginLeft: '10px', paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, height: '1px', // transform: `scaleX(${labelIsActive ? 1 : 0})`, transform: 'scaleX(0)', transition: 'width 0.16s ease', width: `${labelIsActive ? labelWidth + 8 : 0}px`, willChange: 'width', }} /> {children} </Paper> ); InputOutline.displayName = 'InputOutline'; InputOutline.propTypes = { children: PropTypes.node.isRequired, css: PropTypes.shape().isRequired, labelIsActive: PropTypes.bool.isRequired, labelWidth: PropTypes.number.isRequired, }; export default withStyle(InputOutline); |