1 | import React from 'react' |
2 | import styled from 'styled-components' |
3 | |
4 | const StyledListTree = styled.i` |
5 | & { |
6 | box-sizing: border-box; |
7 | position: relative; |
8 | display: block; |
9 | width: 22px; |
10 | height: 22px; |
11 | transform: scale(var(--ggs, 1)); |
12 | background: linear-gradient(to left, currentcolor 8px, transparent 0) no-repeat left top/8px 8px, |
13 | linear-gradient(to left, currentcolor 8px, transparent 0) no-repeat center 3px/8px 2px, |
14 | linear-gradient(to left, currentcolor 8px, transparent 0) no-repeat 10px 17px/6px 2px, |
15 | linear-gradient(to left, currentcolor 8px, transparent 0) no-repeat 10px 3px/2px 16px; |
16 | } |
17 | &::after, |
18 | &::before { |
19 | content: ''; |
20 | display: block; |
21 | box-sizing: border-box; |
22 | position: absolute; |
23 | width: 8px; |
24 | height: 8px; |
25 | border: 2px solid; |
26 | right: 0; |
27 | } |
28 | &::after { |
29 | bottom: 0; |
30 | } |
31 | ` |
32 | |
33 | export const ListTree = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( |
34 | (props, ref) => { |
35 | return ( |
36 | <> |
37 | <StyledListTree {...props} ref={ref} icon-role="list-tree" /> |
38 | </> |
39 | ) |
40 | }, |
41 | ) |
42 | |