1.dmn-literal-expression-container { 2 --decision-properties-background-color: var(--color-white); 3 --decision-properties-border-color: var(--color-grey-225-10-15); 4 --decision-properties-color: var(--color-grey-225-10-15); 5 --literal-expression-color: var(--color-grey-225-10-15); 6 --literal-expression-properties-border-color: var(--color-grey-225-10-15); 7 --literal-expression-properties-color: var(--color-grey-225-10-15); 8 --powered-by-overlay-background-color: var(--color-black-opacity-20); 9 --powered-by-overlay-content-background-color: var(--color-white); 10 --powered-by-overlay-content-border-color: var(--color-grey-225-10-75); 11 --powered-by-overlay-content-color: var(--color-grey-225-10-15); 12 --textarea-border-color: var(--color-grey-225-10-15); 13 --textarea-color: var(--color-grey-225-10-15); 14 --view-drd-button-background-color: var(--color-white); 15 --view-drd-button-border-color: var(--color-grey-225-10-75); 16 --view-drd-button-color: var(--color-grey-225-10-15); 17 --view-drd-button-hover-background-color: var(--color-grey-225-10-97); 18 --literal-expression-font-family: 'Arial', sans-serif; 19 --literal-expression-font-family-monospace: monospace; 20 21 font-family: var(--literal-expression-font-family); 22 color: var(--literal-expression-color); 23 width: 100%; 24 height: 100%; 25} 26 27.dmn-literal-expression-container .viewer-container { 28 width: 100%; 29 height: 100%; 30 overflow: auto; 31 display: flex; 32 flex-direction: column; 33} 34 35.dmn-literal-expression-container * { 36 box-sizing: border-box; 37} 38 39/* decision properties */ 40.dmn-literal-expression-container .decision-properties { 41 border: 1px solid var(--decision-properties-border-color); 42 border-bottom: none; 43 padding: 10px; 44 padding-right: 75px; 45 color: var(--decision-properties-color); 46 background-color: var(--decision-properties-background-color); 47 position: relative; 48 min-width: 192px; 49} 50 51.dmn-literal-expression-container .decision-name { 52 margin: 0; 53 font-size: 21px; 54 font-weight: normal; 55 white-space: pre; 56} 57 58.dmn-literal-expression-container .decision-name:not(.editor) { 59 cursor: default; 60} 61 62.dmn-literal-expression-container .decision-name.editor { 63 cursor: text; 64} 65 66.dmn-literal-expression-container .decision-name div { 67 outline: none; 68} 69 70.dmn-literal-expression-container .decision-name:not(.editable), 71.dmn-literal-expression-container .decision-name [contenteditable="true"] { 72 text-overflow: ellipsis; 73 white-space: nowrap; 74 overflow: hidden; 75} 76 77.dmn-literal-expression-container .textarea .content-editable { 78 height: 100%; 79 box-sizing: border-box; 80} 81 82.dmn-literal-expression-container .decision-name.editor:not(.focussed):hover { 83 cursor: text; 84} 85 86.dmn-literal-expression-container .decision-name.focussed .content-editable { 87 text-overflow: unset; 88} 89 90/* textarea */ 91.dmn-literal-expression-container .textarea { 92 box-sizing: border-box; 93 width: 100%; 94 padding: 12px; 95 font-family: var(--literal-expression-font-family-monospace); 96 line-height: 1.4; 97 border: 1px solid var(--textarea-border-color); 98 border-bottom-width: 1px; 99 white-space: pre; 100 font-size: 14px; 101 color: var(--textarea-color); 102 min-height: 250px; 103 overflow: auto; 104} 105 106.dmn-literal-expression-container .textarea div:focus { 107 outline: none; 108} 109 110.dmn-literal-expression-container .textarea.editor { 111 cursor: text; 112} 113 114.dmn-literal-expression-container .textarea:not(.editor) { 115 cursor: default; 116} 117 118/* literal expression properties */ 119.dmn-literal-expression-container .literal-expression-properties { 120 box-sizing: border-box; 121 width: 100%; 122 padding: 0; 123 border: 1px solid var(--literal-expression-properties-border-color); 124 border-top: none; 125 font-size: 14px; 126 color: var(--literal-expression-properties-color); 127} 128 129.dmn-literal-expression-container .literal-expression-properties .variables-table { 130 border-spacing: 8px; 131 border-collapse: separate; 132} 133 134.dmn-literal-expression-container .literal-expression-properties .variables-table tr td:first-child { 135 font-weight: bold; 136} 137 138.dmn-literal-expression-container .literal-expression-properties .variables-table tr td:last-child { 139 min-width: 100px; 140} 141 142.dmn-literal-expression-container .literal-expression-properties .variable-name-input { 143 width: 100%; 144} 145 146/* view drd */ 147.dmn-literal-expression-container .view-drd { 148 margin-right: 10px; 149 padding-bottom: 10px; 150} 151 152.dmn-literal-expression-container .view-drd .view-drd-button { 153 background: var(--view-drd-button-background-color); 154 padding: 8px; 155 border: solid 1px var(--view-drd-button-border-color); 156 border-radius: 2px; 157 font-size: 14px; 158 color: var(--view-drd-button-color); 159 font-weight: bold; 160 cursor: pointer; 161} 162 163.dmn-literal-expression-container .view-drd .view-drd-button:hover { 164 background: var(--view-drd-button-hover-background-color); 165} 166