1 | @import "./_variables";
|
2 | @import "./_mixins";
|
3 |
|
4 | @font-face {
|
5 | font-family: 'bpmn-js-pp';
|
6 | src: url(@font-eot);
|
7 | src: url(@font-eot) format('embedded-opentype'),
|
8 | url(@font-woff) format('woff'),
|
9 | url(@font-ttf) format('truetype'),
|
10 | url(@bpp-font-svg) format('svg');
|
11 | font-weight: normal;
|
12 | font-style: normal;
|
13 | }
|
14 |
|
15 |
|
16 | .bpp-properties-panel {
|
17 | .overlay();
|
18 | position: relative;
|
19 |
|
20 | &:empty {
|
21 | display: none;
|
22 | }
|
23 |
|
24 | label,
|
25 | input {
|
26 | vertical-align: middle;
|
27 | }
|
28 |
|
29 | button,
|
30 | input,
|
31 | select,
|
32 | textarea,
|
33 | [contenteditable] {
|
34 | font-size: 14px;
|
35 | padding: 3px 6px;
|
36 | border: 1px solid @bpp-input-border-color;
|
37 |
|
38 | &:focus {
|
39 | .focus();
|
40 | }
|
41 |
|
42 | &.invalid {
|
43 | .invalid();
|
44 | &:focus {
|
45 | box-shadow: 0 0 0 2px @bpp-error-shadow-color, 0 0 0 1px @bpp-error-shadow-inset-color inset;
|
46 | }
|
47 | }
|
48 | }
|
49 |
|
50 | [type=text],
|
51 | [contenteditable],
|
52 | textarea,
|
53 | select {
|
54 | width: 100%;
|
55 | }
|
56 |
|
57 | [contenteditable],
|
58 | textarea {
|
59 | resize: vertical;
|
60 | }
|
61 |
|
62 | [contenteditable] {
|
63 | min-height: 24px;
|
64 |
|
65 | outline: 0px solid transparent;
|
66 | background-color: @bpp-input-background-color;
|
67 |
|
68 | overflow-y: auto;
|
69 |
|
70 | white-space: pre-wrap;
|
71 | white-space: -moz-pre-wrap;
|
72 | white-space: -pre-wrap;
|
73 | white-space: -o-pre-wrap;
|
74 | word-wrap: break-word;
|
75 |
|
76 | &:before {
|
77 | content: "\feff";
|
78 | }
|
79 | }
|
80 |
|
81 | [disabled] {
|
82 | color: @bpp-input-disabled-color;
|
83 | }
|
84 |
|
85 | label {
|
86 | .label();
|
87 |
|
88 | margin-bottom: 3px;
|
89 | }
|
90 |
|
91 | .entry-label {
|
92 | .label();
|
93 | font-size: 16px;
|
94 | margin-top: 5px;
|
95 | margin-bottom: 10px;
|
96 |
|
97 | &.divider {
|
98 | border-top: 1px dotted @bpp-divider-color;
|
99 | padding-top: 8px;
|
100 | margin-top: 16px;
|
101 | width: 100%;
|
102 | }
|
103 | }
|
104 |
|
105 | .action-button {
|
106 | .action-button();
|
107 | }
|
108 |
|
109 | .bpp-checkbox {
|
110 | display: flex;
|
111 | flex-wrap: wrap;
|
112 | flex-direction: row;
|
113 | align-items: center;
|
114 |
|
115 | > .bpp-error-message {
|
116 | order: 1;
|
117 | width: 100%;
|
118 | }
|
119 | }
|
120 |
|
121 | }
|
122 |
|
123 | .bpp-error-message,
|
124 | .bpp-error-message.bpp-entry-link {
|
125 | margin-top: 5px;
|
126 | color: @bpp-error-color;
|
127 | }
|
128 |
|
129 | .bpp-row {
|
130 | margin-top: 10px;
|
131 | margin-bottom: 10px;
|
132 | &:first-of-type {
|
133 | margin-top: 0;
|
134 | }
|
135 | &:last-of-type {
|
136 | margin-bottom: 0;
|
137 | }
|
138 | }
|
139 |
|
140 | .bpp-textfield,
|
141 | .bpp-textbox,
|
142 | .bpp-autosuggest-textbox {
|
143 | margin-bottom: 3px;
|
144 | }
|
145 |
|
146 | .bpp-autosuggest-list {
|
147 | position: fixed;
|
148 | min-width: 100px;
|
149 | box-shadow: 0 2px 4px 0 @bpp-autosuggest-shadow-color;
|
150 | border: solid 1px @bpp-autosuggest-border-color;
|
151 | background-color: @bpp-color-ffffff;
|
152 | z-index: 1;
|
153 |
|
154 | display: none;
|
155 |
|
156 | overflow-y: auto;
|
157 | max-height: 200px;
|
158 |
|
159 | &.active {
|
160 | display: block;
|
161 | }
|
162 | }
|
163 |
|
164 | .bpp-autosuggest-item {
|
165 | padding: 6px 3px;
|
166 |
|
167 | &:hover {
|
168 | background: @blue-base-65;
|
169 | color: @bpp-color-ffffff;
|
170 | }
|
171 | }
|
172 |
|
173 | .bpp-radios-group {
|
174 | list-style: none;
|
175 | padding: 0;
|
176 | margin: 0 0 9px 0;
|
177 |
|
178 | .bpp-radio-wrapper {
|
179 | margin: 6px 0;
|
180 | }
|
181 |
|
182 | input,
|
183 | label {
|
184 | vertical-align: middle;
|
185 | }
|
186 |
|
187 | input {
|
188 | margin-top: 0;
|
189 | margin-left: 0;
|
190 | }
|
191 | }
|
192 |
|
193 | .bpp-radios-group,
|
194 | .bpp-checkbox {
|
195 | input {
|
196 | margin-left: 0;
|
197 | }
|
198 |
|
199 | label {
|
200 | &:after {
|
201 | display: none;
|
202 | }
|
203 | }
|
204 | }
|
205 |
|
206 | .bpp-textfield {
|
207 | input {
|
208 | padding-right: 28px;
|
209 | }
|
210 |
|
211 | .clear {
|
212 | background: transparent;
|
213 | border: none;
|
214 | top: 0;
|
215 | right: 0;
|
216 | }
|
217 | }
|
218 |
|
219 | .bpp-combo-input {
|
220 | margin-top: 7px;
|
221 | }
|
222 |
|
223 | .bpp-select {
|
224 | select {
|
225 | height: 23px;
|
226 | }
|
227 | .action-button.add {
|
228 | top: -22px;
|
229 | right: 0;
|
230 | }
|
231 | }
|
232 |
|
233 | .bpp-select,
|
234 | .bpp-element-list {
|
235 |
|
236 | .action-button {
|
237 | &.add,
|
238 | &.clear {
|
239 | top: -23px;
|
240 | border-bottom: none;
|
241 | }
|
242 | }
|
243 |
|
244 | .action-button.add {
|
245 | right: 0px;
|
246 | }
|
247 |
|
248 | .action-button.clear {
|
249 | right: 23px;
|
250 | }
|
251 | }
|
252 |
|
253 | .bpp-properties-entry {
|
254 | margin-bottom: 9px;
|
255 |
|
256 | .bpp-field-wrapper {
|
257 | position: relative;
|
258 |
|
259 | input[readonly] + .clear {
|
260 | display: none;
|
261 | }
|
262 |
|
263 | select {
|
264 | resize: vertical;
|
265 | }
|
266 | }
|
267 |
|
268 | &.bpp-entry--warning {
|
269 | background-color: @bpp-entry-warning-background-color;
|
270 | border-top: solid 1px @bpp-entry-warning-border-color;
|
271 | border-bottom: solid 1px @bpp-entry-warning-border-color;
|
272 | }
|
273 | }
|
274 |
|
275 | .bpp-hidden {
|
276 | display: none;
|
277 | }
|
278 |
|
279 | label.bpp-hidden {
|
280 | .bpp-hidden;
|
281 | }
|
282 |
|
283 | .bpp-table-add-row {
|
284 | > .action-button {
|
285 | position: relative;
|
286 | margin-left: 10px;
|
287 | }
|
288 | }
|
289 |
|
290 | .bpp-table {
|
291 | margin-top: 10px;
|
292 | }
|
293 |
|
294 | .bpp-table-row {
|
295 | margin-bottom: 2px;
|
296 | overflow: hidden;
|
297 |
|
298 | > input,
|
299 | > .action-button {
|
300 | float: left;
|
301 | }
|
302 |
|
303 | > label {
|
304 | padding-left: 5px;
|
305 | }
|
306 |
|
307 | > label,
|
308 | > input {
|
309 |
|
310 | &.bpp-table-row-columns-1 {
|
311 | width: 100%;
|
312 | &.bpp-table-row-removable {
|
313 | width: ~"calc(100% - 24px)";
|
314 | }
|
315 | }
|
316 |
|
317 | &.bpp-table-row-columns-2 {
|
318 | width: 50%;
|
319 | box-sizing: border-box;
|
320 | &.bpp-table-row-removable {
|
321 | width: ~"calc(50% - 12px)";
|
322 | }
|
323 | &:nth-child(2) {
|
324 | border-left: none;
|
325 | }
|
326 | }
|
327 |
|
328 | &.bpp-table-row-columns-3 {
|
329 | width: 33%;
|
330 | box-sizing: border-box;
|
331 | &.bpp-table-row-removable {
|
332 | width: ~"calc(33% - 8px)";
|
333 | }
|
334 | &:not(:first-child) {
|
335 | border-left: none;
|
336 | }
|
337 | }
|
338 | }
|
339 |
|
340 | > .action-button {
|
341 | border-left: none;
|
342 | position: static;
|
343 | }
|
344 | }
|
345 |
|
346 | .bpp-properties-static {
|
347 | margin-bottom: 0;
|
348 | margin-top: 0;
|
349 | border: 1px solid @bpp-properties-static-border-color;
|
350 | background-color: @bpp-properties-static-background-color;
|
351 | padding: 3px 6px;
|
352 | font: 13.3333px Arial;
|
353 | width: 100%;
|
354 | }
|
355 |
|
356 | .bpp-entry-link {
|
357 | color: @bpp-primary-color;
|
358 | text-decoration: underline;
|
359 |
|
360 | &.bpp-entry-link-button {
|
361 | display: inline-block;
|
362 | padding: 3px 13px;
|
363 | background: @blue-base-65;
|
364 | color: @bpp-color-ffffff;
|
365 | border: solid 1px @blue-darken-62;
|
366 | border-radius: 100px;
|
367 | text-decoration: none;
|
368 | }
|
369 | }
|
370 |
|
371 | .bpp-icon-warning:before {
|
372 | .icon-font();
|
373 | content: '\E806';
|
374 | }
|
375 |
|
376 | .bpp-field-description {
|
377 | margin-top: 5px;
|
378 | color: @bpp-input-description-color;
|
379 |
|
380 | a {
|
381 | color: darken(@bpp-primary-color, 10%);
|
382 | text-decoration: none;
|
383 |
|
384 | &:hover {
|
385 | color: @bpp-primary-color;
|
386 | }
|
387 | }
|
388 | }
|
389 |
|
390 | .bpp-description {
|
391 | color: @bpp-input-description-color;
|
392 | }
|
393 |
|
394 | .bpp-collapsible {
|
395 | height: 19px;
|
396 |
|
397 | .bpp-field-wrapper {
|
398 | display: flex;
|
399 | flex-direction: row;
|
400 | align-items: center;
|
401 | }
|
402 |
|
403 | .bpp-collapsible__icon {
|
404 | display: block;
|
405 |
|
406 | padding-right: 2px;
|
407 | }
|
408 |
|
409 | .bpp-collapsible__icon:before {
|
410 | display: block;
|
411 |
|
412 | height: 16px;
|
413 | width: 16px;
|
414 |
|
415 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23666666' fill-rule='evenodd' points='5 4.414 6.414 3 11.364 7.95 6.414 12.899 5 11.485 8.534 7.95'/%3E%3C/svg%3E%0A");
|
416 | transform: rotate(90deg);
|
417 | }
|
418 |
|
419 | &.bpp-collapsible--collapsed .bpp-collapsible__icon:before {
|
420 | transform: none;
|
421 | }
|
422 |
|
423 | .bpp-collapsible__title {
|
424 | display: block;
|
425 | margin: 0;
|
426 | padding-right: 6px;
|
427 | white-space: nowrap;
|
428 | overflow: hidden;
|
429 | text-overflow: ellipsis;
|
430 | }
|
431 |
|
432 | &:not(.bpp-collapsible--collapsed) .bpp-collapsible__title {
|
433 | padding-right: 0;
|
434 | }
|
435 |
|
436 |
|
437 | &:not(.bpp-collapsible--collapsed) .bpp-collapsible__title:nth-last-child(3) {
|
438 | padding-right: 24px;
|
439 | }
|
440 |
|
441 | .bpp-collapsible__description {
|
442 | display: none;
|
443 |
|
444 | margin: 0;
|
445 |
|
446 | white-space: nowrap;
|
447 | color: @bpp-collapsible-description-color;
|
448 | font-weight: normal;
|
449 | overflow: hidden;
|
450 | text-overflow: ellipsis;
|
451 | }
|
452 |
|
453 | .bpp-collapsible__description {
|
454 | overflow: hidden;
|
455 | text-overflow: ellipsis;
|
456 | }
|
457 |
|
458 | &.bpp-collapsible--collapsed .bpp-collapsible__description {
|
459 | display: block;
|
460 | }
|
461 |
|
462 | .bpp-collapsible__remove {
|
463 | height: 24px;
|
464 | top: -4px;
|
465 | right: 0;
|
466 | }
|
467 |
|
468 | &.bpp-collapsible--collapsed .bpp-collapsible__remove {
|
469 | display: none;
|
470 | }
|
471 | }
|
472 |
|
473 | .bpp-collapsible ~ .bpp-properties-entry:not(.bpp-collapsible):not(.bpp-collapsible-break) {
|
474 | margin-left: 18px;
|
475 | }
|
476 |
|
477 | .bpp-process-variables {
|
478 |
|
479 | &.bpp-process-variables__description {
|
480 | margin-bottom: 16px;
|
481 | }
|
482 |
|
483 | &.bpp-process-variables__scope-title {
|
484 | font-size: 13px;
|
485 | font-weight: 600;
|
486 | color: @bpp-color-666666;
|
487 | margin-bottom: 16px;
|
488 | }
|
489 |
|
490 | &.bpp-process-variables__created-in {
|
491 | .bpp-process-variables__created-in-item {
|
492 | margin-bottom: 4px;
|
493 | margin-top: 4px;
|
494 | }
|
495 | }
|
496 | }
|
497 |
|
498 | .bpp-collapsible ~ .bpp-properties-entry.bpp-input-output {
|
499 | margin-left: 0;
|
500 | }
|
501 |
|
502 | .bpp-collapsible--with-mapping .bpp-collapsible__description:not(:empty) {
|
503 | position: relative;
|
504 |
|
505 |
|
506 | text-indent: 24px;
|
507 | padding-right: 24px;
|
508 | }
|
509 |
|
510 | .bpp-collapsible--with-mapping .bpp-collapsible__description:not(:empty):before {
|
511 | position: absolute;
|
512 | top: -1px;
|
513 | left: -24px;
|
514 |
|
515 | display: block;
|
516 | width: 16px;
|
517 | height: 16px;
|
518 |
|
519 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23909090' fill-rule='evenodd' points='8 3 8 7 15 7 15 9 8 9 8 13 2 8'/%3E%3C/svg%3E");
|
520 | opacity: 0.7;
|
521 | }
|
522 |
|
523 | .bpp-input-output {
|
524 | .bpp-input-output__add {
|
525 | top: -28px;
|
526 | right: 0;
|
527 | }
|
528 | }
|
529 |
|
530 | .bpp-input-output-placeholder {
|
531 | padding-bottom: 3px;
|
532 | font-size: 14px;
|
533 | }
|
534 |
|
535 | .bpp-collapsible--with-template-out .bpp-collapsible__description:not(:empty):before {
|
536 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpolygon fill='%23909090' fill-rule='evenodd' points='15 8 9 13 9 9 2 9 2 7 9 7 9 3'/%3E%3C/svg%3E");
|
537 | }
|
538 |
|
539 | .bpp-toggle-switch {
|
540 |
|
541 | .bpp-field-wrapper {
|
542 | display: flex;
|
543 | flex-direction: row;
|
544 | align-items: center;
|
545 | }
|
546 |
|
547 | .bpp-field-wrapper.bpp-hidden {
|
548 | .bpp-hidden;
|
549 | }
|
550 |
|
551 | .bpp-toggle-switch__label {
|
552 | margin: 0;
|
553 | margin-left: 6px;
|
554 | }
|
555 |
|
556 | .bpp-toggle-switch__switcher {
|
557 | position: relative;
|
558 | width: 48px;
|
559 | height: 20px;
|
560 |
|
561 | input[type='checkbox'] {
|
562 | opacity: 0;
|
563 | width: 0;
|
564 | height: 0;
|
565 | }
|
566 |
|
567 | .bpp-toggle-switch__slider {
|
568 | position: absolute;
|
569 | top: 0;
|
570 | left: 0;
|
571 | right: 0;
|
572 | bottom: 0;
|
573 | background-color: @silver-darken-80;
|
574 | -webkit-transition: 0.4s;
|
575 | transition: 0.4s;
|
576 | border-radius: 34px;
|
577 |
|
578 | &:before {
|
579 | position: absolute;
|
580 | content: "";
|
581 | height: 16px;
|
582 | width: 16px;
|
583 | left: 2px;
|
584 | bottom: 2px;
|
585 | background-color: white;
|
586 | -webkit-transition: 0.4s;
|
587 | transition: 0.4s;
|
588 | border-radius: 50%;
|
589 | }
|
590 | }
|
591 |
|
592 | input[type='checkbox']:checked + .bpp-toggle-switch__slider {
|
593 | background-color: @blue-base-65;
|
594 | box-shadow: 0 0 1px @blue-base-65;
|
595 |
|
596 | &:before {
|
597 | -webkit-transform: translateX(28px);
|
598 | -ms-transform: translateX(28px);
|
599 | transform: translateX(28px);
|
600 | }
|
601 | }
|
602 | }
|
603 | }
|
604 |
|
605 | @import "./header";
|
606 | @import "./groups";
|
607 | @import "./listeners";
|
608 | @import "./tabs";
|