import * as React from 'react'; import Head from 'next/head'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import { Pattern } from '../../constants/Pattern'; const Details: React.FC<{}> = () => { return (
Type something in the input to see how the label is shown up.
`} css={` .container { position: relative; } /* Show the label at desired position when the placeholder of input isn't shown */ .container__input:not(:placeholder-shown) + .container__label { background: #fff; transform: translate(0, -50%); opacity: 1; } .container__label { /* Position the label */ left: 8px; position: absolute; top: 0; /* Hide it by default */ opacity: 0; transition: all 200ms; } `} >
); }; export default Details;