react-sortable-tree-theme-material-ui/tree-node-renderer-style.js at next · grovertb/react-sortable-tree-theme-material-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { makeStyles } from '@material-ui/styles'

export default makeStyles({
  lineBlock: {
    display : 'inline-block',
    height  : '100%',
    position: 'relative'
  },
  lineFullVertical: {
  },
  lineHalfHorizontalRight: {
  },
  lineHalfVerticalBottom: {
  },
  lineHalfVerticalTop: {
  },
  root: {
    '& $lineFullVertical::after, & $lineHalfVerticalBottom::after, & $lineHalfVerticalTop::after': {
      height: '100%',
      left  : '50%',
      top   : 0,
      width : 1
    },
    '& $lineHalfHorizontalRight::before': {
      height: 1,
      right : 0,
      top   : '50%',
      width : '50%'
    },
    '& $lineHalfHorizontalRight::before, & $lineFullVertical::after, & $lineHalfVerticalTop::after, & $lineHalfVerticalBottom::after': {
      backgroundColor: '#40A9FF',
      content        : '""',
      position       : 'absolute'
    },
    '& $lineHalfVerticalBottom::after, $lineHalfVerticalTop::after': {
      height: '50%',
      top   : 0
    },
    // eslint-disable-next-line sort-keys-fix/sort-keys-fix
    '& $lineHalfVerticalBottom::after': {
      bottom: 0,
      top   : 'auto'
    },
    display : 'flex',
    minWidth: '100%',
    position: 'relative'
  }
}, { name: 'tree' })