-
Notifications
You must be signed in to change notification settings - Fork 6
/
process_diagram.css
103 lines (86 loc) · 4.33 KB
/
process_diagram.css
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
/* All parameters */
:root {
--linethick: 3px;
--linewidth: 1.8em;
}
/* node style */
.process_diagram li > div { background-color:#eef; color:#666; border-style:solid; border-color:#900; text-align:left; }
/* connecting lines between nodes */
.process_diagram li:before,
.process_diagram li:after,
.process_diagram ul:before,
.process_diagram ul:after,
.process_diagram div:before,
.process_diagram div:after {border-style:solid; border-color:#000;}
/* debug connecting lines * /
.process_diagram div:before,
.process_diagram div:after {border-color:green;}
.process_diagram ul:before,
.process_diagram ul:after {border-color:red;}
/**/
/************************************************************/
/* positioning for the diagram */
.process_diagram,
.process_diagram ol,
.process_diagram ul,
.process_diagram li {margin:0 auto; padding:0; display:block; list-style:none; text-align:center; vertical-align:middle;}
.process_diagram li {position:relative;}
.process_diagram,
.process_diagram ol {display:table; width:100%; border-collapse:collapse; }
.process_diagram > li,
.process_diagram ol > li {display:table-cell; }
.process_diagram > li,
.process_diagram ol > li,
.process_diagram ul > li {padding:.5em 0}
/* a dash before and behind all uls */
.process_diagram ul {position:relative; padding:0 var(--linewidth);}
.process_diagram ul:before,
.process_diagram ul:after {position:absolute; content:""; top:50%; width: var(--linewidth); display:block; border-width:var(--linethick) 0 0; }
.process_diagram ul:before {left:0;}
.process_diagram ul:after {right:0;}
/* put connecting vertical lines */
.process_diagram ul > li:after,
.process_diagram ul > li:before {position:absolute; content:""; top:0; bottom:0; width:var(--linewidth); height:100%; display:block;}
.process_diagram ul > li:before {left:0; border-width:0 0 0 var(--linethick);}
.process_diagram ul > li:after {right:0; border-width:0 var(--linethick) 0 0;}
/* correct length and position of dashes for first and last li-item in ul */
.process_diagram ul > li:first-child:before,
.process_diagram ul > li:first-child:after {top:50%; bottom:auto; height:50%; }
.process_diagram ul > li:last-child:before,
.process_diagram ul > li:last-child:after {top:0; bottom:auto; height:50%;}
.process_diagram ul > li:first-child:last-child:before,
.process_diagram ul > li:first-child:last-child:after {top:0; bottom:auto; height:50%;}
/* put left and right dashes */
.process_diagram li > div {position:relative; margin:0 var(--linewidth); padding: 1em; border-width:var(--linethick); }
.process_diagram li > div:before,
.process_diagram li > div:after {content:""; top:50%; width:var(--linewidth); position:absolute; border-width:var(--linethick) 0 0; height:50%;}
.process_diagram li > div:after {right: calc(0em - var(--linewidth)); margin-right: calc(0px - var(--linethick));}
.process_diagram li > div:before {left: calc(0em - var(--linewidth)); margin-left: calc(0px - var(--linethick));}
.process_diagram li:last-child > div:after,
.process_diagram li:last-child > div:before {top:0; border-width: 0 0 var(--linethick);}
/* remove dash for the very first/last nodes keeping margin and padding */
.process_diagram > li:first-child > div:before,
.process_diagram > li:first-child > ul:before,
.process_diagram > li:first-child > ul > li:before,
.process_diagram > li:first-child > ul > li > div:first-child:before,
.process_diagram > li:first-child > ul > li > ol > li:first-child > div:before,
.process_diagram > li:last-child > div:after,
.process_diagram > li:last-child > ul:after {border:0;}
/* remove double dashes */
ol.process_diagram > li > div:after,
.process_diagram ol > li > div:after,
ol.process_diagram > li > ul:after,
.process_diagram ol > li > ul:after {display:none}
ol.process_diagram > li > div,
.process_diagram ol > li > div {margin-right: 0;}
ol.process_diagram > li > ul,
.process_diagram ol > li > ul {padding-right: 0;}
/* last dashes are not double and need to be recovered */
ol.process_diagram > li:last-child > div:after,
.process_diagram ol > li:last-child > div:after,
ol.process_diagram > li:last-child > ul:after,
.process_diagram ol > li:last-child > ul:after {display:block;}
ol.process_diagram > li:last-child > div,
.process_diagram ol > li:last-child > div {margin-right: var(--linewidth);}
ol.process_diagram > li:last-child > ul,
.process_diagram ol > li:last-child > ul {padding-right: var(--linewidth); }