React

by Abdul Ahmad

HTML

<div id="app"></div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

.form-row {
  margin-top: 20px;
  &:first-child {
    // margin-top: 0;
  }
}

.input-wrapper {
  display: inline-block;
  // background: red;
  position: relative;
  // padding-top: 24px;
  transition: all 0.15s ease;

  
  label {
    position: absolute;
    top: calc(50%);
    // top: 0;
    font-size: 14px;
    transform: translateY(-50%);
    left: 15px;
    transition: all 0.15s ease;
    background: white;
    padding: 0 3px;
    // left: 0;
  }
  
  &.focused {
    // padding: 20px;
    padding-top: 24px;
    transition: all 0.15s ease;
    
    label {
      top: 0;
      transform: none;
      left: 0;
      transition: all 0.15s ease;
      padding: 0;
    }
  }
}
input {
  padding: 10px;
  width: 200px;
}

React

function App() {
	return (
  	<div>
      <div className='form-row'>
        <FormInput label='Email' />
      </div>
      <div className='form-row'>
        <FormInput label='Password' />
      </div>
  	</div>
  );
}

function FormInput({ label }) {
	const [className, setClassName] = React.useState('');
	return (
    <div className={'input-wrapper ' + className}>
      <label>{ label }</label>
      <input 
        onFocus={() => {
        	setClassName('focused');
        }}
        onBlur={() => {
        	setClassName('');
        }}
      />
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))