import * as React from 'react'; import Head from 'next/head'; import { Spacer } from '@1milligram/design'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; import Square from '../../placeholders/Square'; import './folder-structure.css'; const Details: React.FC<{}> = () => { return (

...
- ...
  - ...
  - ...
- ...

`} css={` :root { --folder-structure-item-height: 1rem; --folder-structure-item-margin-left: 2rem; --folder-structure-item-padding-top: 1rem; } .folder-structure ul { /* Reset */ list-style-type: none; margin: 0; } .folder-structure li { padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem; position: relative; } .folder-structure li::before { border-left: 1px solid rgba(0, 0, 0, 0.3); content: ''; /* Position */ left: 0; position: absolute; top: 0; transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0); /* Size */ height: 100%; } .folder-structure li::after { border-bottom: 1px solid rgba(0, 0, 0, 0.3); content: ''; /* Position */ left: 0; position: absolute; top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2); transform: translate(-100%, 0); /* Size */ width: var(--folder-structure-item-margin-left); } /* Remove the border from the last item */ .folder-structure li:last-child::before { height: calc( var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2 ); } `} >

); }; export default Details;