@bpmn-io/form-js-editor 0.8.0-alpha.0 → 0.8.0-alpha.1

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.
@@ -8,14 +8,6 @@
8
8
  --color-context-pad-item-fill: var(--color-grey-225-10-35);
9
9
  --color-context-pad-item-hover-fill: var(--color-black);
10
10
 
11
- --color-palette-container-background: var(--color-grey-225-10-97);
12
- --color-palette-container-border: var(--color-grey-225-10-80);
13
- --color-palette-header-color: var(--color-text);
14
- --color-palette-header-background: var(--color-grey-225-10-95);
15
- --color-palette-header-border: var(--color-grey-225-10-80);
16
- --color-palette-field-border: var(--color-grey-225-10-80);
17
- --color-palette-field-hover-background: var(--color-grey-225-10-95);
18
-
19
11
  --color-properties-container-background: var(--color-white);
20
12
  --color-properties-container-border: var(--color-grey-225-10-80);
21
13
 
@@ -25,6 +17,16 @@
25
17
  --color-dragula-mirror-border: var(--color-grey-225-10-80);
26
18
  }
27
19
 
20
+ .fjs-palette-container {
21
+ --color-palette-container-background: var(--color-grey-225-10-97);
22
+ --color-palette-container-border: var(--color-grey-225-10-80);
23
+ --color-palette-header-color: var(--color-text);
24
+ --color-palette-header-background: var(--color-grey-225-10-95);
25
+ --color-palette-header-border: var(--color-grey-225-10-80);
26
+ --color-palette-field-border: var(--color-grey-225-10-80);
27
+ --color-palette-field-hover-background: var(--color-grey-225-10-95);
28
+ }
29
+
28
30
  .fjs-editor-container {
29
31
  height: 100%;
30
32
  width: 100%;
@@ -38,7 +40,7 @@
38
40
  }
39
41
 
40
42
  .fjs-editor-container .fjs-form-container,
41
- .fjs-editor-container .fjs-palette-container,
43
+ .fjs-editor-container .fjs-editor-palette-container,
42
44
  .fjs-editor-container .fjs-properties-container {
43
45
  overflow-y: auto;
44
46
  position: relative;
@@ -142,13 +144,17 @@
142
144
  * Palette
143
145
  */
144
146
  .fjs-editor-container .fjs-palette-container {
147
+ height: 100%;
148
+ }
149
+
150
+ .fjs-palette-container {
145
151
  width: 200px;
146
152
  background-color: var(--color-palette-container-background);
147
153
  border-right: solid 1px var(--color-palette-container-border);
148
154
  font-family: var(--font-family);
149
155
  }
150
156
 
151
- .fjs-editor-container .fjs-palette-header {
157
+ .fjs-palette-container .fjs-palette-header {
152
158
  font-size: 12px;
153
159
  font-weight: bold;
154
160
  color: var(--color-palette-header-color);
@@ -157,7 +163,7 @@
157
163
  background-color: var(--color-palette-header-background);
158
164
  }
159
165
 
160
- .fjs-editor-container .fjs-palette-field {
166
+ .fjs-palette-container .fjs-palette-field {
161
167
  padding: 10px;
162
168
  display: flex;
163
169
  white-space: pre;
@@ -169,11 +175,11 @@
169
175
  color: var(--color-text);
170
176
  }
171
177
 
172
- .fjs-editor-container .fjs-palette-field-icon {
178
+ .fjs-palette-container .fjs-palette-field-icon {
173
179
  margin-right: 10px;
174
180
  }
175
181
 
176
- .fjs-editor-container .fjs-palette-field:hover {
182
+ .fjs-palette-container .fjs-palette-field:hover {
177
183
  background-color: var(--color-palette-field-hover-background);
178
184
  cursor: default;
179
185
  }