1.dmn-decision-table-container { 2 width: 100%; 3 height: 100%; 4 position: relative; 5} 6 7.dmn-decision-table-container .input-cell .input-label, 8.dmn-decision-table-container .input-cell .input-expression, 9.dmn-decision-table-container .input-cell .output-label, 10.dmn-decision-table-container .input-cell .output-name { 11 display: block; 12} 13 14.dmn-decision-table-container * { 15 box-sizing: border-box; 16} 17 18/** actionable icon */ 19.dmn-decision-table-container .action-icon { 20 border-radius: 2px; 21 color: #52b415; 22 margin-left: 5px; 23} 24 25.dmn-decision-table-container .action-icon:before { 26 margin-left: .1em; 27 margin-right: .1em; 28} 29 30.dmn-decision-table-container .actionable:hover .action-icon { 31 background-color: #52b415; 32 color: white; 33} 34 35/** end actionable icon */ 36 37 38/* basic styles */ 39 40.dmn-decision-table-container { 41 color: #444; 42 43 max-height: 100%; 44} 45 46.dmn-decision-table-container .tjs-table { 47 min-width: 100%; 48} 49 50/* end basic styles */ 51 52 53/* basic table styles */ 54 55.dmn-decision-table-container { 56 font-family: 'Arial', sans-serif; 57 font-size: 14px; 58} 59 60.dmn-decision-table-container .tjs-table { 61 table-layout: fixed; 62 border-collapse: collapse; 63 64 border: solid 1px #444; 65} 66 67.dmn-decision-table-container table thead { 68 border-bottom: 3px double #444; 69} 70 71.dmn-decision-table-container td, 72.dmn-decision-table-container th { 73 border: solid 1px #444; 74 padding: 4px; 75} 76 77.dmn-decision-table-container .tjs-table tr .output-cell { 78 border-left: 3px double #444; 79} 80 81.dmn-decision-table-container .tjs-table tr .output-cell + .output-cell { 82 border-left: 1px solid #444; 83} 84 85.dmn-decision-table-container th { 86 min-width: 192px; 87} 88 89.dmn-decision-table-container th, 90.dmn-decision-table-container td { 91 white-space: pre; 92} 93 94.dmn-decision-table-container th.hit-policy { 95 width: 40px; 96 min-width: 40px; 97 98 vertical-align: top; 99} 100 101.dmn-decision-table-container th { 102 font-weight: normal; 103} 104 105.dmn-decision-table-container th.header { 106 text-align: center; 107 font-weight: bold; 108} 109 110.dmn-decision-table-container th.annotation.header { 111 vertical-align: bottom; 112} 113 114.dmn-decision-table-container td.rule-index { 115 text-align: right; 116 padding-right: 8px; 117} 118 119.dmn-decision-table-container thead .input-expression, 120.dmn-decision-table-container thead .input-variable, 121.dmn-decision-table-container thead .output-name, 122.dmn-decision-table-container thead .type-ref, 123.dmn-decision-table-container .script-editor { 124 font-family: monospace; 125} 126 127/* end basic table styles */ 128 129 130/* selection styles */ 131 132.dmn-decision-table-container th, 133.dmn-decision-table-container td, 134.dmn-decision-table-container h3, 135.dmn-decision-table-container h5 { 136 position: relative; 137} 138 139.dmn-decision-table-container .selected:after { 140 content: ''; 141 display: block; 142 position: absolute; 143 top: -1px; 144 left: -1px; 145 bottom: -1px; 146 right: -1px; 147 border: solid 2px #4285f4; 148 z-index: 1; 149 pointer-events: none; 150} 151 152.dmn-decision-table-container th.selected:not(.focussed) { 153 background: #e9f1ff; 154} 155 156/* end selection styles */ 157 158 159/* footer styles */ 160 161.dmn-decision-table-container tfoot.add-rule td.add-rule-add { 162 text-align: right; 163} 164 165.dmn-decision-table-container tfoot.add-rule td { 166 border-color: #AAA; 167 color: #AAA; 168} 169 170.dmn-decision-table-container tfoot.add-rule:hover td { 171 border-color: #444; 172 color: #444; 173} 174 175 176/* end footer styles */ 177 178 179/* content editable styles */ 180 181.dmn-decision-table-container [contenteditable], 182.dmn-decision-table-container [tabindex] { 183 outline: none; 184} 185 186/* end content editable styles */ 187 188 189/* context menu styles */ 190 191.dmn-decision-table-container { 192 overflow: auto; 193 position: relative; 194} 195 196/* decision table properties */ 197.dmn-decision-table-container .decision-table-properties { 198 color: #444; 199 background-color: #fff; 200 display: inline-block; 201 border: solid 1px #444; 202 margin-bottom: -1px; 203 position: relative; 204 min-width: 100px; 205 max-width: 50%; 206} 207 208.dmn-decision-table-container .decision-table-name, 209.dmn-decision-table-container .decision-table-id { 210 margin: 0; 211 padding: 3px 6px; 212 text-align: center; 213 white-space: pre; 214} 215 216.dmn-decision-table-container .decision-table-id.invalid { 217 background: #f4cecd; 218 color: #c9302c; 219} 220 221.dmn-decision-table-container .decision-table-name { 222 font-size: 24px; 223 line-height: 30px; 224 padding: .3em; 225 font-weight: bold; 226} 227 228.dmn-decision-table-container .decision-table-id { 229 border-top: 1px solid #444; 230 font-family: monospace; 231 font-size: 18px; 232} 233 234/* end decision table properties */ 235 236/* view drd */ 237.dmn-decision-table-container .view-drd { 238 float: right; 239 240 margin-right: 10px; 241} 242 243.dmn-decision-table-container .view-drd .view-drd-button { 244 background: #fff; 245 padding: 8px; 246 border: solid 1px #CCC; 247 border-radius: 2px; 248 font-size: 14px; 249 color: #444; 250 font-weight: bold; 251 cursor: pointer; 252 outline: none; 253} 254 255.dmn-decision-table-container .view-drd .view-drd-button:hover { 256 background: #f6f6f6; 257} 258 259/* end view drd */ 260 261 262/* powered by */ 263.dmn-decision-table-container .powered-by-logo { 264 float: right; 265 width: 38px; 266 z-index: 10; 267 cursor: pointer; 268} 269 270.dmn-decision-table-container .powered-by-logo .logo { 271 width: 100%; 272} 273 274.dmn-decision-table-container .powered-by-overlay { 275 position: fixed; 276 top: 0; 277 right: 0; 278 bottom: 0; 279 left: 0; 280 background: rgba(0,0,0,0.2); 281 display: flex; 282 justify-content: center; 283 align-items: center; 284 z-index: 10000; 285} 286 287.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content { 288 background: #fff; 289 padding: 8px; 290 border: solid 1px #CCC; 291 border-radius: 2px; 292 font-size: 14px; 293 color: #444; 294 display: flex; 295 flex-direction: row; 296 max-width: 260px; 297} 298 299.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content div:first-child { 300 margin-right: 8px; 301} 302 303/* end powered by */ 304 305 306/* simple mode */ 307 308.dmn-decision-table-container .simple-mode-button { 309 color: #444; 310 background-color: #f6f6f6; 311 position: absolute; 312 background: #fff; 313 padding: 4px; 314 border-radius: 2px; 315 border: solid 1px #CCC; 316 cursor: pointer; 317 font-size: 14px; 318 z-index: 2; 319 opacity: .8; 320 box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1); 321} 322 323.dmn-decision-table-container .simple-mode-button:hover { 324 opacity: 1; 325} 326 327.dmn-decision-table-container .simple-mode-button.disabled, 328.dmn-decision-table-container .simple-mode-button.disabled:hover { 329 color: #CCC; 330} 331 332/* end simple mode */ 333 334/** 335 * badges 336 */ 337.dms-badge { 338 border-radius: 2px; 339 padding: 3px 6px; 340 font-size: .8em; 341 height: 19px; 342} 343 344.dms-badge-icon + .dms-badge-label { 345 margin-left: 3px; 346} 347 348.dms-badge.dmn-variable-name { 349 background: #9e9e9e; 350 color: white; 351} 352 353.dms-badge.dmn-expression-language { 354 background: rgba(84, 146, 250, 0.3); 355 color: white; 356} 357 358.dms-badge + .dms-badge { 359 margin-left: 3px; 360} 361 362.dmn-decision-table-container .dmn-expression-language .dms-badge-label { 363 display: none; 364} 365 366.dmn-decision-table-container .input-cell:hover .dmn-expression-language .dms-badge-label, 367.dmn-decision-table-container .output-cell:hover .dmn-expression-language .dms-badge-label { 368 display: inline-block; 369} 370 371.dmn-decision-table-container .input-editor .dmn-variable-name, 372.dmn-decision-table-container .input-editor .dmn-expression-language { 373 margin-top: 4px; 374 display: inline-block; 375} 376 377.dmn-decision-table-container .cell:hover .dms-badge.dmn-expression-language { 378 background: #92b9fc; 379 z-index: 1; 380} 381 382.dmn-decision-table-container .cell .dms-badge.dmn-expression-language { 383 z-index: -1; 384} 385 386/* cell expression language */ 387 388.dmn-decision-table-container .cell .dmn-expression-language { 389 display: flex; 390 align-items: center; 391 position: absolute; 392 top: 2px; 393 right: 2px; 394 pointer-events: none; 395} 396 397/* end cell expression language */ 398 399/* drag and drop */ 400.dmn-decision-table-container .dragover:before { 401 content: ''; 402 display: block; 403 position: absolute; 404 background-color: #666; 405 border-radius: 5px; 406 z-index: 2; 407 pointer-events: none; 408} 409 410.dmn-decision-table-container .dragover.top:before { 411 left: -6px; 412 right: -6px; 413 height: 5px; 414 415 top: -3px; 416} 417 418.dmn-decision-table-container .dragover.right:before { 419 top: -6px; 420 bottom: -6px; 421 width: 5px; 422 423 right: -3px; 424} 425 426.dmn-decision-table-container .dragover.bottom:before { 427 left: -6px; 428 right: -6px; 429 height: 5px; 430 431 bottom: -3px; 432} 433 434.dmn-decision-table-container .dragover.left:before { 435 top: -6px; 436 bottom: -6px; 437 width: 5px; 438 439 left: -3px; 440} 441 442.dmn-decision-table-container .dragged { 443 color: #999; 444} 445 446/* cell description */ 447 448.dmn-decision-table-container .description-indicator { 449 position: absolute; 450 top: 0; 451 right: -4px; 452 border-left: 4px solid transparent; 453 border-right: 4px solid transparent; 454 border-bottom: 4px solid black; 455 transform: rotate(45deg); 456 transform-origin: top; 457} 458 459/* end cell description */