1.dmn-decision-table-container {
2  --action-icon-color: var(--color-blue-205-100-50);
3  --action-icon-hover-background-color: var(--color-blue-205-100-45);
4  --action-icon-hover-color: var(--color-white);
5  --add-column-icon-color: var(--color-white);
6  --add-column-icon-background-color: var(--color-grey-225-10-35);
7  --decision-table-color: var(--color-grey-225-10-15);
8  --decision-table-background-color: var(--color-white);
9  --decision-table-properties-color: var(--color-grey-225-10-15);
10  --dmn-expression-language-background-color: var(--color-blue-205-100-45-opacity-30);
11  --dmn-expression-language-color: var(--color-white);
12  --dmn-expression-language-hover-background-color: var(--color-blue-205-100-50);
13  --drag-and-drop-drag-color: var(--color-grey-225-10-55);
14  --drag-and-drop-drop-marker-color: var(--color-grey-225-10-35);
15  --hit-policy-explanation-color: var(--color-grey-225-10-35);
16  --powered-by-overlay-background-color: var(--color-black-opacity-20);
17  --powered-by-overlay-content-background-color: var(--color-white);
18  --powered-by-overlay-content-color: var(--color-grey-225-10-15);
19  --powered-by-overlay-content-border-color: var(--color-grey-225-10-75);
20  --simple-mode-button-color: var(--color-grey-225-10-15);
21  --simple-mode-button-background-color: var(--color-grey-225-10-97);
22  --simple-mode-button-border-color: var(--color-grey-225-10-75);
23  --simple-mode-button-box-shadow-color: var(--color-black-opacity-10);
24  --simple-mode-button-disabled-color: var(--color-grey-225-10-75);
25  --table-cell-color: var(--color-grey-225-10-15);
26  --table-cell-border-color: var(--color-grey-225-10-15);
27  --table-cell-selected-outline-color: var(--color-blue-205-100-45);
28  --table-foot-add-rule-border-color: var(--color-grey-225-10-75);
29  --table-foot-add-rule-color: var(--color-grey-225-10-75);
30  --table-foot-add-rule-hover-border-color: var(--color-grey-225-10-15);
31  --table-foot-add-rule-hover-color: var(--color-grey-225-10-15);
32  --table-head-border-color: var(--color-grey-225-10-15);
33  --table-head-clause-color: var(--color-grey-225-10-35);
34  --table-head-separator-color: var(--color-grey-225-10-75);
35  --table-head-variable-color: var(--color-grey-225-10-35);
36  --table-row-alternative-background-color: var(--color-grey-225-10-97);
37  --view-drd-button-background-color: var(--color-white);
38  --view-drd-button-border-color: var(--color-grey-225-10-75);
39  --view-drd-button-color: var(--color-grey-225-10-15);
40  --view-drd-button-hover-background-color: var(--color-grey-225-10-97);
41  --decision-table-font-family: 'Arial', sans-serif;
42
43  width: 100%;
44  height: 100%;
45  overflow: hidden;
46  position: relative;
47  font-family: var(--decision-table-font-family);
48  font-size: 14px;
49  color: var(--table-color);
50  max-height: 100%;
51}
52
53/* basic styles */
54
55.dmn-decision-table-container * {
56  box-sizing: border-box;
57}
58
59.dmn-decision-table-container .tjs-container {
60  display: flex;
61  flex-direction: column;
62  position: relative;
63  width: min-content;
64  max-width: 100%;
65  height: 100%;
66}
67
68/* end basic styles */
69
70/* basic table styles */
71
72.dmn-decision-table-container .tjs-table-container {
73  overflow: auto;
74  border: solid 1px var(--table-cell-border-color);
75  border-top: none;
76}
77
78.dmn-decision-table-container .tjs-table {
79  max-width: 100%;
80  max-height: 100%;
81  position: relative;
82  width: 100%; /* Fallback for legacy Edge */
83  width: min-content;
84  table-layout: fixed;
85  border-collapse: separate;
86  border-spacing: 0;
87}
88
89.dmn-decision-table-container th,
90.dmn-decision-table-container td {
91  position: relative;
92  white-space: pre-wrap;
93  overflow-wrap: break-word;
94  background-clip: padding-box;
95}
96
97.dmn-decision-table-container thead th {
98  text-align: center;
99  width: 192px;
100  font-weight: normal;
101  position: sticky;
102  top: 0;
103  z-index: 1;
104  background-color: var(--decision-table-background-color);
105  border-bottom: 3px double var(--table-head-border-color);
106}
107
108.dmn-decision-table-container thead th.output-editor {
109  z-index: 2;
110}
111
112.dmn-decision-table-container thead th.create-inputs,
113.dmn-decision-table-container thead th.input-editor {
114  z-index: 3;
115}
116
117.dmn-decision-table-container tbody td {
118  border-top: solid 1px var(--table-cell-border-color);
119}
120
121.dmn-decision-table-container th.input-cell,
122.dmn-decision-table-container td.input-cell,
123.dmn-decision-table-container th.output-cell,
124.dmn-decision-table-container td.output-cell,
125.dmn-decision-table-container th.annotation,
126.dmn-decision-table-container td.annotation {
127  color: var(--table-cell-color);
128}
129
130.dmn-decision-table-container th.input-cell + th.output-cell,
131.dmn-decision-table-container td.input-cell + td.output-cell {
132  border-left: 3px double var(--table-cell-border-color);
133}
134
135.dmn-decision-table-container th:not(:first-child),
136.dmn-decision-table-container td:not(:first-child) {
137  padding: 4px;
138  border-left: solid 1px var(--table-cell-border-color);
139}
140
141.dmn-decision-table-container thead {
142  background-color: var(--decision-table-background-color);
143}
144
145.dmn-decision-table-container thead th:first-child {
146  left: 0;
147  z-index: 4;
148}
149
150.dmn-decision-table-container tfoot td:first-child {
151  border-right: solid 1px var(--table-foot-add-rule-border-color);
152}
153
154.dmn-decision-table-container tbody td:first-child,
155.dmn-decision-table-container tfoot td:first-child {
156  position: sticky;
157  left: 0;
158  background-color: var(--decision-table-background-color);
159  z-index: 1;
160}
161
162.dmn-decision-table-container tbody:empty {
163  display: none;
164}
165
166.dmn-decision-table-container thead th:first-child,
167.dmn-decision-table-container tbody td:first-child {
168  border-right: solid 1px var(--table-cell-border-color);
169}
170
171.dmn-decision-table-container thead th:nth-child(2),
172.dmn-decision-table-container tbody td:nth-child(2),
173.dmn-decision-table-container tfoot td:nth-child(2) {
174  border-left: none;
175}
176
177.dmn-decision-table-container tbody tr:last-child td {
178  border-bottom: solid 1px var(--table-cell-border-color);
179}
180
181.dmn-decision-table-container tbody tr:first-child td {
182  border-top: none;
183}
184
185.dmn-decision-table-container th.index-column {
186  width: 56px;
187}
188
189.dmn-decision-table-container td.rule-index {
190  text-align: right;
191  padding-right: 8px;
192}
193
194.dmn-decision-table-container tbody tr:nth-child(2n) {
195  background-color: var(--table-row-alternative-background-color);
196}
197
198.dmn-decision-table-container td.input-cell.add-rule,
199.dmn-decision-table-container td.input-cell:not(.focussed).empty {
200  text-align: center;
201}
202
203/* end basic table styles */
204
205/* selection styles */
206
207.dmn-decision-table-container h3,
208.dmn-decision-table-container h5 {
209  position: relative;
210}
211
212.dmn-decision-table-container .selected {
213  outline: var(--table-cell-selected-outline-color);
214  outline-offset: -1px;
215}
216
217.dmn-decision-table-container th.selected:not(.focussed) {
218  background: var(--selected-not-focused-border-color);
219}
220
221/* end selection styles */
222
223/* footer styles */
224
225.dmn-decision-table-container tfoot td.input-cell + td.output-cell {
226  border-left: 3px double var(--table-foot-add-rule-border-color);
227}
228
229.dmn-decision-table-container tfoot.add-rule td.add-rule-add {
230  text-align: right;
231  padding-right: 4px;
232}
233
234.dmn-decision-table-container tfoot.add-rule tr td {
235  border-color: var(--table-foot-add-rule-border-color);
236  color: var(--table-foot-add-rule-color);
237}
238
239.dmn-decision-table-container tfoot.add-rule:hover td.input-cell + td.output-cell {
240  border-left-color: var(--table-cell-border-color);
241}
242
243.dmn-decision-table-container tfoot.add-rule:hover td {
244  border-color: var(--table-foot-add-rule-hover-border-color);
245  color: var(--table-foot-add-rule-hover-color);
246}
247
248/* end footer styles */
249
250/* content editable styles */
251
252.dmn-decision-table-container [contenteditable],
253.dmn-decision-table-container [tabindex] {
254  outline: none;
255}
256
257/* end content editable styles */
258
259/* decision table header */
260.dmn-decision-table-container .decision-table-header {
261  text-align: left;
262  padding: 10px;
263}
264
265.dmn-decision-table-container .decision-table-header * {
266  vertical-align: middle;
267}
268
269/* decision table properties */
270.dmn-decision-table-container .decision-table-properties {
271  display: flex;
272  color: var(--decision-table-properties-color);
273  border: 1px solid var(--table-cell-border-color);
274  background-color: var(--decision-table-background-color);
275  padding: 10px;
276  align-items: center;
277}
278
279.dmn-decision-table-container .decision-table-name {
280  position: relative;
281  display: block;
282  flex-grow: 1;
283  margin: 0;
284  width: 0;
285  min-width: 100px;
286  max-width: min-content;
287  font-size: 21px;
288  font-weight: normal;
289}
290
291.dmn-decision-table-container .decision-table-name:not(.editable),
292.dmn-decision-table-container .decision-table-name .content-editable {
293  text-overflow: ellipsis;
294  white-space: nowrap;
295  overflow: hidden;
296}
297
298.dmn-decision-table-container .decision-table-name.focussed .content-editable {
299  text-overflow: unset;
300}
301
302.dmn-decision-table-container .decision-table-header-separator {
303  display: block;
304  height: 32px;
305  border-left: 2px solid var(--table-head-separator-color);
306  margin: 0 10px;
307}
308
309.dmn-decision-table-container .hit-policy {
310  display: block;
311}
312
313.dmn-decision-table-container .hit-policy-explanation {
314  margin-left: 5px;
315  color: var(--hit-policy-explanation-color);
316}
317
318/* end decision table properties */
319
320.dmn-decision-table-container thead .input-label,
321.dmn-decision-table-container thead .input-expression,
322.dmn-decision-table-container thead .output-label,
323.dmn-decision-table-container thead .output-name {
324  display: -webkit-box;
325  margin: 16px 6px;
326  font-size: 16px;
327  overflow: hidden;
328  text-overflow: ellipsis;
329  -webkit-line-clamp: 3;
330  -webkit-box-orient: vertical;
331}
332
333.dmn-decision-table-container thead .input-expression:empty::before {
334  content: 'Input';
335  opacity: 0.5;
336}
337
338.dmn-decision-table-container thead .output-name:empty::before {
339  content: 'Output';
340  opacity: 0.5;
341}
342
343.dmn-decision-table-container thead .input-variable,
344.dmn-decision-table-container thead .output-variable {
345  white-space: nowrap;
346  overflow: hidden;
347  text-overflow: ellipsis;
348  text-align: right;
349}
350
351.dmn-decision-table-container thead .input-cell .clause,
352.dmn-decision-table-container thead .output-cell .clause {
353  font-size: 12px;
354  text-align: left;
355  color: var(--table-head-clause-color);
356}
357
358.dmn-decision-table-container thead .input-cell .input-variable,
359.dmn-decision-table-container thead .output-cell .output-variable {
360  font-size: 12px;
361  color: var(--table-head-variable-color);
362}
363
364/* actionable icon */
365
366.dmn-decision-table-container .action-icon {
367  border-radius: 2px;
368  box-shadow: 0 0 0 2px var(--decision-table-background-color);
369  color: var(--action-icon-color);
370}
371
372.dmn-decision-table-container .create-inputs .action-icon,
373.dmn-decision-table-container .add-input .action-icon,
374.dmn-decision-table-container .add-output .action-icon {
375  display: flex;
376  align-items: center;
377  justify-content: center;
378  width: 16px;
379  height: 16px;
380  margin: 0;
381  border-radius: 50%;
382  color: var(--add-column-icon-color);
383  background-color: var(--add-column-icon-background-color);
384}
385
386.dmn-decision-table-container .actionable:hover .action-icon {
387  background-color: var(--action-icon-hover-background-color);
388  color: var(--action-icon-hover-color);
389}
390
391.dmn-decision-table-container .action-icon::before {
392  margin-left: 0.1em;
393  margin-right: 0.1em;
394}
395
396.dmn-decision-table-container .add-input,
397.dmn-decision-table-container .add-output {
398  position: absolute;
399  top: 50%;
400  right: -1px;
401  transform: translate(50%, -50%);
402  z-index: 2;
403  border-radius: 100%;
404  padding: 6px;
405}
406
407/* end actionable icon */
408
409/* view drd */
410.dmn-decision-table-container .view-drd {
411  margin-bottom: 10px;
412}
413
414.dmn-decision-table-container .view-drd .view-drd-button {
415  background: var(--view-drd-button-background-color);
416  padding: 8px;
417  border: solid 1px var(--view-drd-button-border-color);
418  border-radius: 2px;
419  font-size: 14px;
420  color: var(--view-drd-button-color);
421  font-weight: bold;
422  cursor: pointer;
423  outline: none;
424}
425
426.dmn-decision-table-container .view-drd .view-drd-button:hover {
427  background: var(--view-drd-button-hover-background-color);
428}
429
430/* end view drd */
431
432/* powered by */
433.dmn-js-parent {
434  /* required to apply position: fixed correctly */
435  transform: translate(0);
436}
437
438.dmn-decision-table-container .powered-by {
439  position: fixed;
440  bottom: 10px;
441  right: 10px;
442  z-index: 9999;
443  display: flex;
444  align-items: center;
445  flex-direction: row-reverse;
446  margin: 10px;
447  background-color: var(--color-white);
448}
449
450.dmn-decision-table-container .powered-by-overlay {
451  position: fixed;
452  top: 0;
453  right: 0;
454  bottom: 0;
455  left: 0;
456  background: var(--powered-by-overlay-background-color);
457  display: flex;
458  justify-content: center;
459  align-items: center;
460  z-index: 10000;
461}
462
463.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content {
464  display: flex;
465  flex-direction: row;
466  align-items: center;
467  padding: 10px;
468  max-width: 260px;
469  background: var(--powered-by-overlay-content-background-color);
470  color: var(--powered-by-overlay-content-color);
471  border: solid 1px var(--powered-by-overlay-content-border-color);
472  border-radius: 2px;
473  font-size: 14px;
474}
475
476.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content .logo {
477  margin: 15px 20px 15px 10px;
478}
479
480/* end powered by */
481
482/* simple mode */
483
484.dmn-decision-table-container .simple-mode-button {
485  color: var(--simple-mode-button-color);
486  background-color: var(--simple-mode-button-background-color);
487  position: absolute;
488  padding: 4px;
489  border-radius: 2px;
490  border: solid 1px var(--simple-mode-button-border-color);
491  cursor: pointer;
492  font-size: 14px;
493  z-index: 5;
494  opacity: 0.8;
495  box-shadow: 1px 1px 1px 1px var(--simple-mode-button-box-shadow-color);
496}
497
498.dmn-decision-table-container .simple-mode-button:hover {
499  opacity: 1;
500}
501
502.dmn-decision-table-container .simple-mode-button.disabled,
503.dmn-decision-table-container .simple-mode-button.disabled:hover {
504  color: var(--simple-mode-button-disabled-olor);
505}
506
507.dmn-decision-table-container .dms-input-duration-edit-row {
508  align-items: flex-start;
509}
510
511/* end simple mode  */
512
513/* badges */
514
515.dms-badge {
516  border-radius: 2px;
517  padding: 3px 6px;
518  font-size: 0.8em;
519  height: 19px;
520}
521
522.dms-badge-icon + .dms-badge-label {
523  margin-left: 3px;
524}
525
526.dms-badge.dmn-expression-language {
527  background: var(--dmn-expression-language-background-color);
528  color: var(--dmn-expression-language-color);
529}
530
531.dms-badge + .dms-badge {
532  margin-left: 3px;
533}
534
535.dmn-decision-table-container .dmn-expression-language .dms-badge-label {
536  display: none;
537}
538
539.dmn-decision-table-container .input-cell:hover .dmn-expression-language .dms-badge-label,
540.dmn-decision-table-container .output-cell:hover .dmn-expression-language .dms-badge-label {
541  display: inline-block;
542}
543
544.dmn-decision-table-container .input-editor .dmn-expression-language {
545  margin-top: 4px;
546  display: inline-block;
547}
548
549.dmn-decision-table-container .cell .dms-badge.dmn-expression-language {
550  z-index: -1;
551}
552
553.dmn-decision-table-container .cell:hover .dms-badge.dmn-expression-language {
554  background: var(--dmn-expression-language-hover-background-color);
555  z-index: 1;
556}
557
558/* cell expression language */
559
560.dmn-decision-table-container .cell .dmn-expression-language {
561  display: flex;
562  align-items: center;
563  position: absolute;
564  top: 2px;
565  right: 2px;
566  pointer-events: none;
567}
568
569/* end cell expression language */
570
571/* drag and drop */
572
573.dmn-decision-table-container .dragover::before {
574  content: '';
575  display: block;
576  position: absolute;
577  background-color: var(--drag-and-drop-drop-marker-color);
578  z-index: 2;
579  pointer-events: none;
580}
581
582.dmn-decision-table-container .dragover.top::before {
583  left: 0;
584  right: 0;
585  height: 5px;
586  top: 0;
587}
588
589.dmn-decision-table-container .dragover.right::before {
590  top: 0;
591  bottom: 0;
592  width: 5px;
593  right: 0;
594}
595
596.dmn-decision-table-container .dragover.bottom::before {
597  left: 0;
598  right: 0;
599  height: 5px;
600  bottom: 0;
601}
602
603.dmn-decision-table-container .dragover.left::before {
604  top: 0;
605  bottom: 0;
606  width: 5px;
607  left: 0;
608}
609
610.dmn-decision-table-container .dragged {
611  color: var(--drag-and-drop-drag-color);
612}
613
614/* cell description */
615
616.dmn-decision-table-container .description-indicator {
617  position: absolute;
618  top: 0;
619  right: -4px;
620  border-left: 4px solid transparent;
621  border-right: 4px solid transparent;
622  border-bottom: 4px solid var(--color-black);
623  transform: rotate(45deg);
624  transform-origin: top;
625}
626
627/* end cell description */
628