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