diff options
Diffstat (limited to 'frontend/src/components/decorators')
| -rw-r--r-- | frontend/src/components/decorators/FloatingLabel.js | 44 |
1 files changed, 17 insertions, 27 deletions
diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js index 1e5a427..ddd963d 100644 --- a/frontend/src/components/decorators/FloatingLabel.js +++ b/frontend/src/components/decorators/FloatingLabel.js @@ -1,32 +1,22 @@ import React from 'react'; -import styled, { css } from 'styled-components' +import styled from 'styled-components' const StyledLabel = styled.label` - & > span { - position: absolute; - top: 0.5em; - font-weight: 700; - font-size: 1em; - opacity: 0.5; - transition: all 0.5s cubic-bezier(.25,.8,.25,1); - - ${props => - (props.value?.length > 0) && - css` - opacity: 1 - `}; - } + position: relative; + & > span { + position: absolute; + transform: translateY(-0.2em); + font-weight: 700; + font-size: 1em; + opacity: 0.5; + transition: opacity 0.5s cubic-bezier(.25,.8,.25,1); + } + + &:hover > span { + opacity: 1; + } ` -const FloatingLabel = (props) => { - return ( - <StyledLabel - label={props.label} - value={props.value} - > - {props.children} - </StyledLabel> - ); -} - -export default FloatingLabel
\ No newline at end of file +export default (props) => <StyledLabel label={props.label}> + {props.children} +</StyledLabel> |