overmind/packages/overmind-devtools-client/src/components/Chart/styles.ts at patch-3 · hipertracker/overmind · 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import { css } from 'emotion'

import { colors } from '../../theme'

export const outerWrapper = css({
  overflowY: 'scroll',
  boxSizing: 'border-box',
  margin: '1rem',
  height: '100%',
  border: '1px solid ' + colors.foreground,
  borderRadius: 3,
})

export const wrapper = css({
  position: 'relative',
  display: 'table',
  margin: '1rem',
  borderSpacing: '0 0.25rem',
})

export const id = css({
  display: 'flex',
  alignItems: 'center',
  cursor: 'pointer',
  padding: '0.25rem 0.5rem',
  backgroundColor: colors.foreground,
  borderRadius: 3,
  margin: '0 0 0.25rem 0',
  svg: {
    width: 10,
    marginRight: '0.5rem',
  },
})

export const stateItem = css({
  display: 'table-row',
})

export const stateNameCell = css({
  display: 'table-cell',
  padding: '0.5rem 0 ',
})

export const stateLineCell = css({
  position: 'relative',
  display: 'table-cell',
  width: '1rem',
})

export const transitionCell = css({
  display: 'table-cell',
  verticalAlign: 'center',
  fontSize: 12,
  paddingLeft: '0.25rem',
})

export const stateName = css({
  borderRadius: 3,
  padding: '0.5rem',
  boxSizing: 'border-box',
  width: '100%',
  textAlign: 'center',
  backgroundColor: colors.foreground,
})

export const stateAction = css({
  borderRadius: 3,
  border: '2px solid ' + colors.foreground,
  padding: '0.5rem',
  boxSizing: 'border-box',
  width: '100%',
  textAlign: 'center',
})

export const selectedLine = css({
  position: 'absolute',
  height: 2,
  backgroundColor: colors.foreground,
  width: '100%',
  top: '2rem',
})

export const transitionLine = css({
  position: 'absolute',
  height: 2,
  backgroundColor: colors.foreground,
  width: '100%',
  top: '1.25rem',
})

export const entryCell = css({
  position: 'relative',
  display: 'table-cell',
  width: '1rem',
})

export const onName = css({
  borderRadius: 3,
  border: '1px solid transparent',
  padding: '0.5rem',
  margin: '0.25rem 0',
  boxSizing: 'border-box',
  textAlign: 'center',
  backgroundColor: colors.foreground,
  opacity: 0.5,
})

export const activeAction = css({
  opacity: 1,
  cursor: 'pointer',
  ':hover': {
    opacity: 0.9,
  },
})

export const onCell = css({
  display: 'table-cell',
  padding: '0.5rem ',
  border: '2px solid ' + colors.foreground,
  borderRadius: 3,
})

export const selectedAction = css({
  border: '1px dashed ' + colors.highlight,
})

export const nestedRoomCell = css({
  display: 'table-cell',
})

export const nestedChart = css({
  width: '100%',
})