camunda-bpmn-js 0.15.3 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,6 +12,7 @@
12
12
  --color-grey-225-10-95: hsl(225, 10%, 95%);
13
13
  --color-grey-225-10-97: hsl(225, 10%, 97%);
14
14
 
15
+ --color-blue-205-100-35: hsl(205, 100%, 35%);
15
16
  --color-blue-205-100-45: hsl(205, 100%, 45%);
16
17
  --color-blue-205-100-50: hsl(205, 100%, 50%);
17
18
  --color-blue-205-100-95: hsl(205, 100%, 95%);
@@ -98,6 +99,11 @@
98
99
  --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
99
100
  --dropdown-separator-background-color: var(--color-grey-225-10-75);
100
101
 
102
+ --feel-active-color: var(--color-blue-205-100-35);
103
+ --feel-inactive-color: var(--color-grey-225-10-35);
104
+
105
+ --feel-indicator-background-color: var(--color-grey-225-10-90);
106
+
101
107
  --text-size-base: 14px;
102
108
  --text-size-small: 13px;
103
109
  --text-size-smallest: 12px;
@@ -114,8 +120,11 @@
114
120
  overflow: hidden;
115
121
  }
116
122
 
117
- .bio-properties-panel * {
123
+ .bio-properties-panel {
118
124
  color: var(--text-base-color);
125
+ }
126
+
127
+ .bio-properties-panel * {
119
128
  font-size: var(--text-size-base);
120
129
  line-height: var(--text-line-height);
121
130
  font-weight: 400;
@@ -167,7 +176,7 @@
167
176
  background-color: var(--header-background-color);
168
177
  border-bottom: 1px solid var(--header-bottom-border-color);
169
178
  width: 100%;
170
- z-index: 1;
179
+ z-index: 10;
171
180
  max-height: 64px;
172
181
  overflow: hidden;
173
182
  }
@@ -240,7 +249,7 @@
240
249
  position: -webkit-sticky; /* for safari */
241
250
  position: sticky;
242
251
  top: 0;
243
- z-index: 1;
252
+ z-index: 10;
244
253
  }
245
254
 
246
255
  .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
@@ -446,12 +455,19 @@ textarea.bio-properties-panel-input,
446
455
  width: 100%;
447
456
  }
448
457
 
449
- .bio-properties-panel-input:focus {
458
+ .bio-properties-panel-input:focus,
459
+ .bio-properties-panel-input:focus-within {
450
460
  outline: none;
451
461
  background-color: var(--input-focus-background-color);
452
462
  border: 1px solid var(--input-focus-border-color);
453
463
  }
454
464
 
465
+ .bio-properties-panel-textfield:focus-within,
466
+ .bio-properties-panel-feel-entry:focus-within {
467
+ --input-background-color: var(--input-focus-background-color);
468
+ --input-border-color: var(--input-focus-border-color);
469
+ }
470
+
455
471
  .bio-properties-panel-input:disabled {
456
472
  border-color: var(--input-disabled-border-color);
457
473
  background-color: var(--input-disabled-background-color);
@@ -920,11 +936,76 @@ textarea.bio-properties-panel-input {
920
936
  .bio-properties-panel-feel-icon {
921
937
  display: inline-block;
922
938
  height: 16px;
939
+ border-radius: 8px;
923
940
  vertical-align: text-bottom;
924
- padding: 0 3px;
941
+ padding: 0;
942
+ margin: 0 3px;
943
+ align-items: center;
944
+ align-self: center;
945
+ border: none;
946
+ background: none;
947
+ }
948
+
949
+ .bio-properties-panel-feel-icon.optional {
950
+ cursor: pointer;
951
+ }
952
+
953
+ .bio-properties-panel-feel-icon svg * {
954
+ color: var(--feel-inactive-color);
955
+ }
956
+
957
+ .bio-properties-panel-feel-icon.active svg * {
958
+ color: var(--feel-active-color);
925
959
  }
926
960
 
927
961
  .bio-properties-panel-feel-icon svg {
928
962
  width: 16px;
929
963
  height: 16px;
930
- }
964
+ }
965
+
966
+ .bio-properties-panel-feel-editor-container {
967
+ position: relative;
968
+ }
969
+
970
+ .bio-properties-panel-feel-editor-container.active {
971
+ font-family: var(--font-family-monospace);
972
+ }
973
+
974
+ .bio-properties-panel-feel-container {
975
+ position: relative;
976
+ }
977
+
978
+ .bio-properties-panel-feel-container .bio-properties-panel-feel-editor-container>div {
979
+ position: static;
980
+ padding-left: 2.4em !important;
981
+ min-height: 28px;
982
+ }
983
+
984
+ .cm-scroller {
985
+ overflow: hidden !important;
986
+ }
987
+
988
+ .bio-properties-panel-feel-indicator {
989
+ position: absolute;
990
+ border: 1px solid var(--input-border-color);
991
+ background-color: var(--feel-indicator-background-color);
992
+ border-right: 0px;
993
+ border-radius: 2px 0 0 2px;
994
+ z-index: 1;
995
+ height: 100%;
996
+ width: 2em;
997
+ text-align: center;
998
+ padding: 2px 6px;
999
+ }
1000
+
1001
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
1002
+ resize: vertical;
1003
+ overflow: hidden;
1004
+ overflow-y: auto;
1005
+ }
1006
+
1007
+ .bio-properties-panel-feel-editor-container,
1008
+ .bio-properties-panel-feel-editor-container .bio-properties-panel-input,
1009
+ .cm-editor {
1010
+ min-height: 100%;
1011
+ }