@bpmn-io/form-js-playground 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.
- package/dist/assets/form-js-playground.css +47 -13
- package/dist/form-playground.umd.js +33708 -33457
- package/dist/index.cjs +111 -104
- package/dist/index.cjs.map +1 -1
- package/dist/index.es.js +111 -104
- package/dist/index.es.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
.fjs-pgl-root {
|
|
2
|
-
--color-
|
|
3
|
-
|
|
4
|
-
--color-
|
|
2
|
+
--color-button-hover: var(--color-grey-225-10-95);
|
|
3
|
+
|
|
4
|
+
--color-section-border: var(--color-grey-225-10-55);
|
|
5
|
+
--color-section-header-background: var(--color-grey-225-10-95);
|
|
6
|
+
--color-section-header-border-bottom: var(--color-grey-225-10-75);
|
|
7
|
+
|
|
8
|
+
--color-palette-container-background: var(--color-grey-225-10-97);
|
|
9
|
+
--color-palette-container-border: var(--color-grey-225-10-80);
|
|
10
|
+
|
|
11
|
+
--color-text: var(--color-grey-225-10-15);
|
|
12
|
+
|
|
5
13
|
--font-family: 'IBM Plex Sans', sans-serif;
|
|
6
14
|
}
|
|
7
15
|
|
|
@@ -10,6 +18,7 @@
|
|
|
10
18
|
height: 100%;
|
|
11
19
|
|
|
12
20
|
position: relative;
|
|
21
|
+
display: flex;
|
|
13
22
|
|
|
14
23
|
font-family: var(--font-family);
|
|
15
24
|
}
|
|
@@ -23,6 +32,33 @@
|
|
|
23
32
|
grid-template-rows: 70% 30%;
|
|
24
33
|
}
|
|
25
34
|
|
|
35
|
+
/**
|
|
36
|
+
* Palette
|
|
37
|
+
*/
|
|
38
|
+
.fjs-pgl-palette-container {
|
|
39
|
+
height: 100%;
|
|
40
|
+
width: auto;
|
|
41
|
+
background-color: var(--color-palette-container-background);
|
|
42
|
+
border-right: solid 1px var(--color-palette-container-border);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.fjs-pgl-palette-container .fjs-palette-container {
|
|
46
|
+
border-right: none;
|
|
47
|
+
width: auto;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.fjs-pgl-palette-container .fjs-hide-compact {
|
|
51
|
+
display: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.fjs-pgl-palette-container .fjs-palette-container .fjs-palette-field {
|
|
55
|
+
justify-content: center;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.fjs-pgl-palette-container .fjs-palette-container .fjs-palette-field-icon {
|
|
59
|
+
margin: 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
26
62
|
/**
|
|
27
63
|
* Section
|
|
28
64
|
*/
|
|
@@ -34,21 +70,21 @@
|
|
|
34
70
|
|
|
35
71
|
.fjs-pgl-section:nth-child(1),
|
|
36
72
|
.fjs-pgl-section:nth-child(2) {
|
|
37
|
-
border-bottom: double 3px var(--color-
|
|
73
|
+
border-bottom: double 3px var(--color-section-border);
|
|
38
74
|
}
|
|
39
75
|
|
|
40
76
|
.fjs-pgl-section:nth-child(1),
|
|
41
77
|
.fjs-pgl-section:nth-child(3) {
|
|
42
|
-
border-right: double 3px var(--color-
|
|
78
|
+
border-right: double 3px var(--color-section-border);
|
|
43
79
|
}
|
|
44
80
|
|
|
45
81
|
.fjs-pgl-section .header {
|
|
46
|
-
background: var(--color-
|
|
82
|
+
background: var(--color-section-header-background);
|
|
47
83
|
font-size: 1rem;
|
|
48
84
|
margin: 0;
|
|
49
85
|
line-height: 2em;
|
|
50
|
-
padding:
|
|
51
|
-
border-bottom: solid 1px var(--color-
|
|
86
|
+
padding: .1em .5em;
|
|
87
|
+
border-bottom: solid 1px var(--color-section-header-border-bottom);
|
|
52
88
|
}
|
|
53
89
|
|
|
54
90
|
.fjs-pgl-section .header-items {
|
|
@@ -89,7 +125,7 @@
|
|
|
89
125
|
|
|
90
126
|
padding: 20px;
|
|
91
127
|
|
|
92
|
-
background: white;
|
|
128
|
+
background: var(--color-white);
|
|
93
129
|
}
|
|
94
130
|
|
|
95
131
|
.fjs-pgl-modal-content textarea {
|
|
@@ -128,14 +164,12 @@
|
|
|
128
164
|
}
|
|
129
165
|
|
|
130
166
|
.fjs-pgl-button {
|
|
131
|
-
|
|
132
167
|
color: var(--color-text);
|
|
133
|
-
background-color:
|
|
168
|
+
background-color: var(--color-white);
|
|
134
169
|
|
|
135
170
|
border-width: 1px;
|
|
136
171
|
border-style: solid;
|
|
137
172
|
border-radius: 3px;
|
|
138
|
-
border-color: var(--color-lighter-gray);
|
|
139
173
|
|
|
140
174
|
font-family: var(--font-family);
|
|
141
175
|
}
|
|
@@ -145,7 +179,7 @@
|
|
|
145
179
|
}
|
|
146
180
|
|
|
147
181
|
.fjs-pgl-button:hover {
|
|
148
|
-
background-color: var(--color-
|
|
182
|
+
background-color: var(--color-button-hover);
|
|
149
183
|
}
|
|
150
184
|
|
|
151
185
|
.fjs-pgl-button + .fjs-pgl-button {
|