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