1.dmn-decision-table-container {
2  --allowed-values-placeholder-color: var(--color-grey-225-10-75);
3  --cell-description-editor-border-color: var(--color-grey-225-10-15);
4  --create-inputs-border-color: var(--color-grey-225-10-75);
5  --create-inputs-color: var(--color-grey-225-10-75);
6  --create-inputs-hover-color: var(--color-grey-225-10-15);
7  --context-menu-background-color: var(--color-white);
8  --context-menu-border-color: var(--color-grey-225-10-75);
9  --context-menu-color: var(--color-grey-225-10-15);
10  --context-menu-box-shadow-color: var(--color-black-opacity-10);
11  --context-menu-group-entry-border-color: var(--color-grey-225-10-75);
12  --context-menu-group-entry-disabled-color: var(--color-grey-225-10-75);
13  --context-menu-group-entry-hover-background-color: var(--color-grey-225-10-95);
14  --drag-and-drop-handle-color: var(--color-grey-225-10-55);
15  --drag-and-drop-handle-hover-color: var(--color-grey-225-10-15);
16  --form-control-label-color: var(--color-grey-225-10-55);
17  --hint-color: var(--color-grey-225-10-55);
18}
19
20/* simple string edit */
21.dmn-decision-table-container .simple-string-edit,
22.dmn-decision-table-container .simple-date-edit {
23  width: 250px;
24}
25
26.dmn-decision-table-container .input-expression-edit {
27  width: 300px;
28}
29
30.dmn-decision-table-container .dms-form-control {
31  padding: 9px 0;
32}
33
34.dmn-decision-table-container .allowed-values-edit .dms-form-control {
35  display: flex;
36  flex-direction: column;
37}
38
39.dmn-decision-table-container .allowed-values-edit .values {
40  display: flex;
41  flex-wrap: wrap;
42}
43
44.dmn-decision-table-container .allowed-values-edit .placeholder {
45  color: var(--allowed-values-placeholder-color);
46}
47
48/** create inputs **/
49.dmn-decision-table-container thead .input-cell.create-inputs,
50.dmn-decision-table-container tbody .input-cell.create-inputs {
51  white-space: normal;
52  border-color: var(--create-inputs-border-color);
53  color: var(--create-inputs-color);
54  min-width: 50px;
55  width: 50px;
56}
57
58.dmn-decision-table-container thead .input-cell.create-inputs {
59  text-align: center;
60}
61
62.dmn-decision-table-container .create-inputs .add-input {
63  right: 50%;
64}
65
66.dmn-decision-table-container .create-inputs:hover {
67  border-color: var(--create-inputs-hover-color);
68  color: var(--create-inputs-hover-color);
69}
70
71.dmn-decision-table-container th.create-inputs {
72  vertical-align: top;
73}
74
75/** end create inputs **/
76
77/* TODO(nikku): namespace and refactor context menu styles */
78.dmn-decision-table-container .context-menu {
79  position: absolute;
80  background: var(--context-menu-background-color);
81  border: solid 1px var(--context-menu-border-color);
82  border-radius: 2px;
83  font-size: 14px;
84  color: var(--context-menu-color);
85  z-index: 6;
86  box-shadow: 1px 1px 1px 1px var(--context-menu-box-shadow-color);
87}
88
89.dmn-decision-table-container .context-menu .context-menu-container {
90  margin: 8px;
91}
92
93.dmn-decision-table-container .context-menu .context-menu-flex {
94  display: flex;
95  flex-direction: column;
96}
97
98.dmn-decision-table-container .context-menu .context-menu-group .context-menu-group-entry {
99  display: flex;
100  flex-direction: row;
101  align-items: stretch;
102  width: 100%;
103  padding: 8px 16px;
104  cursor: default;
105  white-space: nowrap;
106}
107
108.dmn-decision-table-container .context-menu-group .context-menu-group-entry:hover {
109  background-color: var(--context-menu-group-entry-hover-background-color);
110}
111
112.dmn-decision-table-container .context-menu .context-menu-group .context-menu-group-entry.disabled {
113  pointer-events: none;
114  color: var(--context-menu-group-entry-disabled-color);
115}
116
117.dmn-decision-table-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon {
118  display: inline-block;
119  text-align: center;
120  width: 14px;
121  margin-right: 6px;
122}
123
124.dmn-decision-table-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon::before {
125  margin: 0;
126}
127
128.dmn-decision-table-container .context-menu-group:not(:last-child)::after {
129  content: '';
130  display: block;
131  margin: 0 8px;
132  border-bottom: 1px solid var(--context-menu-group-entry-border-color);
133  height: 1px;
134}
135
136/* input/output editor */
137
138.dmn-decision-table-container .context-menu .context-menu-container.input-edit,
139.dmn-decision-table-container .context-menu .context-menu-container.output-edit {
140  margin: 34px 10px 10px 10px;
141}
142
143.dmn-decision-table-container .context-menu .context-menu-container.type-ref-edit,
144.dmn-decision-table-container .context-menu .context-menu-container.allowed-values-edit {
145  margin: 10px;
146}
147
148.dmn-decision-table-container .dms-output-label,
149.dmn-decision-table-container .dms-input-label {
150  padding-right: 30px;
151  padding-left: 0;
152  border: none;
153  font-size: 16px;
154  white-space: nowrap;
155}
156
157.dmn-decision-table-container .dms-form-control:first-child {
158  padding-top: 0;
159}
160
161.dmn-decision-table-container .dms-form-control .dms-label {
162  display: block;
163  margin: unset;
164  margin-bottom: 6px;
165  color: var(--form-control-label-color);
166  font-weight: normal;
167}
168
169.dmn-decision-table-container .dms-form-control .dms-input {
170  padding-right: 24px;
171  border-radius: 3px;
172}
173
174.dmn-decision-table-container .dms-form-control .dms-list-component {
175  max-width: 179px;
176}
177
178/* expression language */
179.dmn-decision-table-container .context-menu .context-menu-group .context-menu-entry-set-expression-language {
180  flex-direction: column;
181}
182
183.dmn-decision-table-container .context-menu .context-menu-group .context-menu-entry-set-expression-language:hover {
184  background-color: unset;
185}
186
187.dmn-decision-table-container .context-menu .context-menu-group .context-menu-entry-set-expression-language .expression-language {
188  margin-top: 8px;
189}
190
191/* drag and drop */
192.dmn-icon-drag {
193  color: transparent;
194}
195
196.dmn-icon-drag:hover {
197  color: var(--drag-and-drop-handle-hover-color);
198}
199
200.dmn-decision-table-container th .dmn-icon-drag {
201  position: absolute;
202  left: 4px;
203  top: 10px;
204  transform: translateY(-50%);
205}
206
207.dmn-decision-table-container th:hover .dmn-icon-drag,
208.dmn-decision-table-container td:hover .dmn-icon-drag {
209  color: var(--drag-and-drop-handle-color);
210}
211
212.dmn-decision-table-container .input-cell.input-editor:hover .clause,
213.dmn-decision-table-container .output-cell.output-editor:hover .clause {
214  visibility: hidden;
215}
216
217.dmn-icon-drag.horizontal,
218.dmn-icon-drag.vertical {
219  cursor: grab;
220  cursor: -moz-grab;
221  cursor: -webkit-grab;
222}
223
224/* description editor */
225
226.dmn-decision-table-container .context-menu .description-editor {
227  margin: 0;
228  padding: 5px 0;
229  width: 192px;
230  border-left: solid 3px var(--cell-description-editor-border-color);
231}
232
233.dmn-decision-table-container .description-editor .dms-input {
234  border: none;
235  min-height: 0;
236}
237
238/* end description editor */
239
240.dmn-decision-table-container .resize-column-handle {
241  width: 25px;
242  height: 100%;
243  position: absolute;
244  top: 0;
245  right: -5px;
246  z-index: 1;
247  cursor: col-resize;
248}
249
250.dmn-decision-table-container .resize-column-handle:last-child {
251  width: 20px;
252  right: 0;
253}
254