1.dmn-boxed-expression-container { 2 --element-properties-background-color: var(--color-white); 3 --element-properties-border-color: var(--color-grey-225-10-15); 4 --element-properties-color: var(--color-grey-225-10-15); 5 --boxed-expression-color: var(--color-grey-225-10-15); 6 --boxed-expression-properties-border-color: var(--color-grey-225-10-15); 7 --boxed-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 --boxed-expression-font-family: 'Arial', sans-serif; 19 --boxed-expression-font-family-monospace: monospace; 20 --section-padding: 20px; 21 --padding: 12px; 22 --font-size: 14px; 23 --font-size-big: 16px; 24 --font-size-bigger: 21px; 25 26 font-family: var(--boxed-expression-font-family); 27 color: var(--boxed-expression-color); 28 width: 100%; 29 height: 100%; 30} 31 32.dmn-boxed-expression-container .viewer-container { 33 width: 100%; 34 height: 100%; 35 overflow: auto; 36 display: flex; 37 flex-direction: column; 38 font-size: var(--font-size); 39} 40 41.dmn-boxed-expression-container * { 42 box-sizing: border-box; 43} 44 45.dmn-boxed-expression-container .dmn-boxed-expression-section { 46 border: 1px solid var(--element-properties-border-color); 47 48 & + .dmn-boxed-expression-section { 49 border-top: none; 50 } 51} 52 53.dmn-boxed-expression-container h2 { 54 margin: 0; 55 font-size: var(--font-size-big); 56} 57 58/* element properties */ 59.dmn-boxed-expression-container .element-properties { 60 padding: var(--section-padding); 61 color: var(--element-properties-color); 62 position: relative; 63 min-width: 192px; 64} 65 66.dmn-boxed-expression-container .element-name { 67 margin: 0; 68 font-size: var(--font-size-bigger); 69 font-weight: normal; 70 white-space: pre; 71 text-overflow: ellipsis; 72 overflow: hidden; 73} 74 75.dmn-boxed-expression-container .textarea .content-editable { 76 height: 100%; 77 box-sizing: border-box; 78} 79 80.dmn-boxed-expression-container .element-name.editor:not(.focussed):hover { 81 cursor: text; 82} 83 84.dmn-boxed-expression-container .element-name.focussed .content-editable { 85 text-overflow: unset; 86} 87 88/* textarea */ 89.dmn-boxed-expression-container .textarea { 90 box-sizing: border-box; 91 width: 100%; 92 padding: var(--padding); 93 font-family: var(--boxed-expression-font-family-monospace); 94 line-height: 1.4; 95 white-space: pre; 96 font-size: var(--font-size); 97 color: var(--textarea-color); 98 min-height: 250px; 99 overflow: auto; 100} 101 102.dmn-boxed-expression-container .textarea div:focus { 103 outline: none; 104} 105 106.dmn-boxed-expression-container .textarea.editor { 107 height: 100%; 108 cursor: text; 109} 110 111.dmn-boxed-expression-container .textarea:not(.editor) { 112 cursor: default; 113} 114 115/* view drd */ 116.dmn-boxed-expression-container .view-drd { 117 margin-right: 10px; 118 padding-bottom: 10px; 119} 120 121.dmn-boxed-expression-container .view-drd .view-drd-button { 122 background: var(--view-drd-button-background-color); 123 padding: 8px; 124 border: solid 1px var(--view-drd-button-border-color); 125 border-radius: 2px; 126 font-size: 14px; 127 color: var(--view-drd-button-color); 128 font-weight: bold; 129 cursor: pointer; 130} 131 132.dmn-boxed-expression-container .view-drd .view-drd-button:hover { 133 background: var(--view-drd-button-hover-background-color); 134} 135 136/* function definition */ 137.dmn-boxed-expression-container .function-definition { 138 display: grid; 139 grid-template-columns: 50px auto; 140 grid-template-rows: 50px auto; 141 142 & .function-definition-kind, & .function-definition-parameters { 143 position: relative; 144 } 145} 146 147.dmn-boxed-expression-container .function-definition .function-definition-kind { 148 display: flex; 149 justify-content: center; 150 align-items: center; 151 height: 100%; 152 width: 100%; 153 font-size: var(--font-size-bigger); 154} 155 156.dmn-boxed-expression-container .function-definition .function-definition-parameters { 157 display: flex; 158 align-items: center; 159 padding-left: var(--padding); 160 border-left: 1px solid var(--element-properties-border-color); 161 font-size: var(--font-size-big); 162} 163 164.dmn-boxed-expression-container .function-definition .function-definition-body { 165 grid-column: span 2; 166 border-top: 1px solid var(--element-properties-border-color); 167} 168 169/* element-variable */ 170 171.dmn-boxed-expression-container .element-variable { 172 padding: var(--section-padding); 173 display: inline-grid; 174 grid: auto / 1fr 1fr; 175 gap: 10px 20px; 176 177 & > h2 { 178 grid-column: span 2; 179 } 180 181 & .element-variable-name-label, & .element-variable-type-label { 182 display: block; 183 padding-bottom: 7px; 184 color: var(--color-grey-225-10-35) 185 } 186} 187