SHARE
TWEET

Untitled

a guest Apr 20th, 2019 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react'
  2. import styled from 'styled-components'
  3.  
  4. const Wrapper = styled.div`
  5.   position: relative;
  6.   width: 100%;
  7.   padding-bottom: 2rem;
  8.  
  9.   input:focus ~ label,
  10.   input:valid ~ label {
  11.     font-size: 0.8rem;
  12.     color: #1976d2;
  13.     top: -0.5rem;
  14.   }
  15. `
  16. const Error = styled.div`
  17.   position: absolute;
  18.   left: 0.7rem;
  19.   right: auto;
  20.   font-size: 95%;
  21.   color: #ff9c9c;
  22. `
  23.  
  24. const FieldLabel = styled.label`
  25.   position: absolute;
  26.   display: block;
  27.   pointer-events: none;
  28.   color: rgba(0, 0, 0, 0.54);
  29.   top: 0.75rem;
  30.   -webkit-transition: 0.2s ease-in;
  31.   transition: 0.2s ease-in;
  32.   z-index: 1;
  33.   color: #999;
  34. `
  35. const InputField = styled.input`
  36.   line-height: 2em;
  37.   background: transparent;
  38.   border: none;
  39.   border-bottom: 1px solid rgba(0, 0, 0, 0.42);
  40.   -webkit-transition: 0.2s ease-in;
  41.   transition: 0.2s ease-in;
  42.   width: 100%;
  43.  
  44.   :focus {
  45.     outline: none;
  46.     border-bottom: 1px solid #1976d2;
  47.   }
  48. `
  49.  
  50. const Input = ({ label, error, ...rest }) => (
  51.   <Wrapper>
  52.     <InputField required {...rest} />
  53.     <FieldLabel>{label}</FieldLabel>
  54.     {error && <Error>{error}</Error>}
  55.   </Wrapper>
  56. )
  57.  
  58. export default Input
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top