sequential-workflow-designer 0.14.2 → 0.15.3

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.
Files changed (14) hide show
  1. package/README.md +15 -11
  2. package/css/.gitkeep +0 -0
  3. package/css/designer-dark.css +132 -102
  4. package/css/designer-light.css +130 -99
  5. package/css/designer-theme.css +1 -0
  6. package/css/designer.css +197 -199
  7. package/dist/index.umd.js +1 -1
  8. package/lib/cjs/index.cjs +1 -1
  9. package/lib/esm/index.js +1 -1
  10. package/package.json +22 -6
  11. package/sass/designer-dark.scss +68 -0
  12. package/sass/designer-light.scss +20 -0
  13. package/sass/designer-theme.scss +378 -0
  14. package/sass/designer.scss +257 -0
package/README.md CHANGED
@@ -4,21 +4,23 @@
4
4
 
5
5
  [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fb4rtaz%2Fsequential-workflow-designer%2Fbadge%3Fref%3Dmain&style=flat-square)](https://actions-badge.atrox.dev/b4rtaz/sequential-workflow-designer/goto?ref=main) [![License: MIT](https://img.shields.io/badge/license-MIT-green?style=flat-square)](/LICENSE) [![View this project on NPM](https://img.shields.io/npm/v/sequential-workflow-designer.svg?style=flat-square)](https://npmjs.org/package/sequential-workflow-designer)
6
6
 
7
- Sequential workflow designer with 0 external dependencies for web. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow builders.
7
+ > 🚨 **Have you noticed the "package not found" error?** 🚨<br />
8
+ > Check [this comment](https://github.com/nocode-js/sequential-workflow-designer/issues/82#issuecomment-1712958636) for instructions on how to resolve the problem.
9
+
10
+ Sequential workflow designer with 0 external dependencies for web applications. It's written in pure TypeScript and uses SVG for rendering. This designer is not associated with any workflow engine. It's full generic. You may create any kind application by this, from graphical programming languages to workflow builders.
8
11
 
9
12
  Features:
10
13
 
11
14
  * 0 external dependencies,
12
- * full generic & configurable,
13
- * light/dark themes,
14
- * works on modern browsers,
15
- * works on mobile,
15
+ * fully generic and configurable,
16
+ * use light/dark themes or customize easily,
17
+ * compatible with modern browsers and mobile devices,
16
18
  * the definition is stored as JSON,
17
- * has support for [React](./react/) and [Angular](./angular/designer/).
19
+ * supports [React](./react/) and [Angular](./angular/designer/).
18
20
 
19
21
  📝 Check the [documentation](https://nocode-js.com/docs/category/sequential-workflow-designer) for more details.
20
22
 
21
- 🤩 Don't miss [the pro version](https://github.com/nocode-js/sequential-workflow-designer-pro-demo).
23
+ 🤩 Don't miss [the pro version](https://nocode-js.com/sequential-workflow-designer-pro-pricing).
22
24
 
23
25
  ## 👀 Examples
24
26
 
@@ -40,6 +42,8 @@ Features:
40
42
  Pro:
41
43
 
42
44
  * [🤩 Pro Components](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/pro-components.html)
45
+ * [🍬 Custom Theme Flat](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-theme-flat.html)
46
+ * [🌹 Custom Step Types](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/custom-step-types.html)
43
47
  * [👈 Goto](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/goto.html)
44
48
  * [📁 Folders](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/folders.html)
45
49
  * [⭕ Wheel Mode](https://nocode-js.github.io/sequential-workflow-designer-pro-demo/demos/webpack-pro-app/public/wheel-mode.html)
@@ -94,10 +98,10 @@ Add the below code to your head section in HTML document.
94
98
  ```html
95
99
  <head>
96
100
  ...
97
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.14.2/css/designer.css" rel="stylesheet">
98
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.14.2/css/designer-light.css" rel="stylesheet">
99
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.14.2/css/designer-dark.css" rel="stylesheet">
100
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.14.2/dist/index.umd.js"></script>
101
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.3/css/designer.css" rel="stylesheet">
102
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.3/css/designer-light.css" rel="stylesheet">
103
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.3/css/designer-dark.css" rel="stylesheet">
104
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.15.3/dist/index.umd.js"></script>
101
105
  ```
102
106
 
103
107
  Call the designer by:
package/css/.gitkeep ADDED
File without changes
package/css/designer-dark.css CHANGED
@@ -1,162 +1,192 @@
1
-
2
- /********* dark *********/
3
-
4
- .sqd-theme-dark.sqd-designer {
5
- background: #1F1F1F;
6
- }
7
-
8
- /* dark > .sqd-toolbox */
9
-
1
+ /* internal */
10
2
  .sqd-theme-dark .sqd-toolbox {
11
- background: #3F3F3F;
3
+ background: #3f3f3f;
4
+ box-shadow: none;
12
5
  }
13
6
  .sqd-theme-dark .sqd-toolbox-header-title {
14
- color: #FFF;
15
-
7
+ color: #fff;
16
8
  }
17
9
  .sqd-theme-dark .sqd-toolbox-filter {
18
- border: 0;
19
- background: #242424;
20
- color: #FFF;
10
+ background: #242424;
11
+ color: #fff;
12
+ border: none;
13
+ }
14
+ .sqd-theme-dark .sqd-toolbox-filter:focus {
15
+ border-color: #939393;
21
16
  }
22
17
  .sqd-theme-dark .sqd-toolbox-group-title {
23
- background: #242424;
24
- color: #FFF;
18
+ color: #fff;
19
+ background: #242424;
25
20
  }
21
+
26
22
  .sqd-theme-dark .sqd-toolbox-item {
27
- border: none;
28
- background: #C6C6C6;
23
+ color: #000;
24
+ border: none;
25
+ box-shadow: none;
26
+ background: #c6c6c6;
29
27
  }
30
28
  .sqd-theme-dark .sqd-toolbox-item:hover {
31
- background: #D3D3D3;
32
- }
33
- .sqd-theme-dark .sqd-toolbox-item-icon.sqd-no-icon {
34
- background: #C6C6C6;
29
+ border-color: none;
30
+ background: #d3d3d3;
35
31
  }
36
- .sqd-theme-dark .sqd-control-bar-button.sqd-delete .sqd-icon-path {
37
- fill: #E01A24;
32
+ .sqd-theme-dark .sqd-toolbox-item .sqd-toolbox-item-icon.sqd-no-icon {
33
+ background: #c6c6c6;
38
34
  }
39
35
 
40
- /* dark > .sqd-control-bar */
41
-
42
36
  .sqd-theme-dark .sqd-control-bar {
43
- background: #3F3F3F;
37
+ background: #3f3f3f;
38
+ box-shadow: none;
44
39
  }
45
40
  .sqd-theme-dark .sqd-control-bar-button {
46
- background: #C6C6C6;
41
+ border: none;
42
+ background: #c6c6c6;
47
43
  }
48
44
  .sqd-theme-dark .sqd-control-bar-button:hover {
49
- background: #D3D3D3;
45
+ border-color: #939393;
46
+ background: #d3d3d3;
50
47
  }
51
-
52
- /* dark > .sqd-workspace */
53
-
54
- .sqd-theme-dark .sqd-grid-path {
55
- stroke: #2A2A2A;
56
- }
57
- .sqd-theme-dark .sqd-join {
58
- stroke: #707070;
48
+ .sqd-theme-dark .sqd-control-bar-button .sqd-icon-path {
49
+ fill: #000;
59
50
  }
60
-
61
- /* dark > .sqd-context-menu */
62
-
63
- .sqd-theme-dark.sqd-context-menu {
64
- box-shadow: 0 0 8px rgba(0, 0, 0, .2);
65
- background: #3F3F3F;
66
- color: #FFF;
67
- }
68
- .sqd-theme-dark .sqd-context-menu-group {
69
- color: #CCC;
70
- }
71
- .sqd-theme-dark .sqd-context-menu-item:hover {
72
- background: #525252;
51
+ .sqd-theme-dark .sqd-control-bar-button.sqd-delete .sqd-icon-path {
52
+ fill: #e01a24;
73
53
  }
74
54
 
75
- /* dark > .sqd-smart-editor */
76
-
77
55
  .sqd-theme-dark .sqd-smart-editor {
78
- background: #3F3F3F;
56
+ background: #3f3f3f;
57
+ box-shadow: none;
79
58
  }
80
59
  .sqd-theme-dark .sqd-smart-editor-toggle {
81
- background: #6F6F6F;
60
+ background: #6f6f6f;
61
+ box-shadow: none;
82
62
  }
83
63
 
84
- /* dark > .sqd-step-task */
85
-
86
- .sqd-theme-dark .sqd-step-task-rect {
87
- fill: #C6C6C6;
88
- stroke: none;
89
- filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .15));
90
- }
91
- .sqd-theme-dark .sqd-step-task-rect.sqd-selected {
92
- stroke: #FFF;
64
+ .sqd-theme-dark.sqd-context-menu {
65
+ background: #3f3f3f;
66
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
93
67
  }
94
- .sqd-theme-dark .sqd-step-task-text {
95
- fill: #000;
68
+
69
+ .sqd-theme-dark .sqd-context-menu-group {
70
+ color: #ccc;
96
71
  }
97
- .sqd-theme-dark .sqd-step-task-empty-icon {
98
- fill: #C6C6C6;
72
+
73
+ .sqd-theme-dark .sqd-context-menu-item {
74
+ color: #fff;
99
75
  }
100
76
 
101
- /* dark > .sqd-input + .sqd-output */
77
+ .sqd-theme-dark .sqd-context-menu-item:hover {
78
+ background: #525252;
79
+ }
102
80
 
103
- .sqd-theme-dark .sqd-input {
104
- fill: #C6C6C6;
105
- stroke: #707070;
81
+ .sqd-theme-dark.sqd-designer {
82
+ background: #1f1f1f;
106
83
  }
107
84
 
108
- .sqd-theme-dark .sqd-output {
109
- fill: #707070;
85
+ .sqd-theme-dark .sqd-line-grid-path {
86
+ stroke: #2a2a2a;
87
+ stroke-width: 1;
110
88
  }
111
89
 
112
- /* dark > .sqd-region */
90
+ .sqd-theme-dark .sqd-join {
91
+ stroke-width: 2;
92
+ stroke: #707070;
93
+ }
113
94
 
114
95
  .sqd-theme-dark .sqd-region {
115
- stroke: #434343;
96
+ stroke: #434343;
97
+ stroke-width: 2;
98
+ stroke-dasharray: 3;
116
99
  }
117
100
  .sqd-theme-dark .sqd-region.sqd-selected {
118
- stroke: #FFF;
101
+ stroke: #fff;
102
+ stroke-width: 2;
103
+ stroke-dasharray: 0;
119
104
  }
120
- .sqd-theme-dark .sqd-label-primary .sqd-label-rect {
121
- fill: #2411DB;
105
+
106
+ .sqd-theme-dark .sqd-placeholder .sqd-placeholder-rect {
107
+ fill: #0e0e0e;
108
+ stroke: #6a6a6a;
109
+ stroke-width: 1;
110
+ stroke-dasharray: 3;
122
111
  }
123
- .sqd-theme-dark .sqd-label-secondary .sqd-label-rect {
124
- fill: #0E0E0E;
112
+ .sqd-theme-dark .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
113
+ fill: #ed4800;
125
114
  }
126
- .sqd-theme-dark .sqd-label-text {
127
- fill: #FFF;
115
+ .sqd-theme-dark .sqd-placeholder-icon-path {
116
+ fill: #2b2b2b;
117
+ }
118
+ .sqd-theme-dark .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
119
+ fill: #fff;
128
120
  }
129
121
 
130
- /* dark > .sqd-root-start-stop */
122
+ .sqd-theme-dark .sqd-validation-error {
123
+ fill: #ffa200;
124
+ }
125
+ .sqd-theme-dark .sqd-validation-error-icon-path {
126
+ fill: #000;
127
+ }
131
128
 
132
129
  .sqd-theme-dark .sqd-root-start-stop-circle {
133
- fill: #2C18DF;
130
+ fill: #2c18df;
134
131
  }
135
132
  .sqd-theme-dark .sqd-root-start-stop-icon {
136
- fill: #FFF;
133
+ fill: #fff;
137
134
  }
138
135
 
139
- /* dark > .sqd-placeholder */
140
-
141
- .sqd-theme-dark .sqd-placeholder .sqd-placeholder-rect {
142
- fill: #0E0E0E;
143
- stroke: #6A6A6A;
136
+ .sqd-theme-dark .sqd-step-task .sqd-step-task-rect {
137
+ fill: #c6c6c6;
138
+ stroke-width: 1;
139
+ stroke: none;
140
+ filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.15));
144
141
  }
145
- .sqd-theme-dark .sqd-placeholder-icon-path {
146
- fill: #FFF;
142
+ .sqd-theme-dark .sqd-step-task .sqd-step-task-rect.sqd-selected {
143
+ stroke: #fff;
144
+ stroke-width: 2;
147
145
  }
148
- .sqd-theme-dark .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
149
- fill: #ED4800;
146
+ .sqd-theme-dark .sqd-step-task .sqd-step-task-text {
147
+ fill: #000;
150
148
  }
151
- .sqd-theme-dark .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
152
- fill: #FFF;
149
+ .sqd-theme-dark .sqd-step-task .sqd-step-task-empty-icon {
150
+ fill: #c6c6c6;
151
+ }
152
+ .sqd-theme-dark .sqd-step-task .sqd-input {
153
+ fill: #c6c6c6;
154
+ stroke-width: 2;
155
+ stroke: #707070;
156
+ }
157
+ .sqd-theme-dark .sqd-step-task .sqd-output {
158
+ fill: #707070;
159
+ stroke-width: 0;
153
160
  }
154
161
 
155
- /* dark > .sqd-validation-error */
162
+ .sqd-theme-dark .sqd-step-switch > .sqd-label-primary > .sqd-label-text {
163
+ fill: #fff;
164
+ }
165
+ .sqd-theme-dark .sqd-step-switch > .sqd-label-primary > .sqd-label-rect {
166
+ fill: #2411db;
167
+ stroke-width: 0;
168
+ }
169
+ .sqd-theme-dark .sqd-step-switch > .sqd-label-secondary > .sqd-label-rect {
170
+ fill: #000;
171
+ stroke-width: 0;
172
+ }
173
+ .sqd-theme-dark .sqd-step-switch > .sqd-label-secondary > .sqd-label-text {
174
+ fill: #fff;
175
+ }
176
+ .sqd-theme-dark .sqd-step-switch > g > .sqd-input {
177
+ fill: #c6c6c6;
178
+ stroke-width: 2;
179
+ stroke: #707070;
180
+ }
156
181
 
157
- .sqd-theme-dark .sqd-validation-error {
158
- fill: #FFA200;
182
+ .sqd-theme-dark .sqd-step-container > .sqd-label > .sqd-label-text {
183
+ fill: #fff;
159
184
  }
160
- .sqd-theme-dark .sqd-validation-error-icon-path {
161
- fill: #000;
185
+ .sqd-theme-dark .sqd-step-container > .sqd-label > .sqd-label-rect {
186
+ fill: #2411db;
187
+ }
188
+ .sqd-theme-dark .sqd-step-container > g > .sqd-input {
189
+ fill: #c6c6c6;
190
+ stroke-width: 2;
191
+ stroke: #707070;
162
192
  }
package/css/designer-light.css CHANGED
@@ -1,161 +1,192 @@
1
-
2
- /********* light *********/
3
-
4
- .sqd-theme-light.sqd-designer {
5
- background: #F9F9F9;
6
- }
7
-
8
- /* light > .sqd-toolbox */
9
-
1
+ /* internal */
10
2
  .sqd-theme-light .sqd-toolbox {
11
- background: #FFF;
12
- box-shadow: 0 0 8px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .15);
3
+ background: #fff;
4
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
5
+ }
6
+ .sqd-theme-light .sqd-toolbox-header-title {
7
+ color: #000;
13
8
  }
14
9
  .sqd-theme-light .sqd-toolbox-filter {
15
- border: 1px solid #C3C3C3;
10
+ background: #fff;
11
+ color: #000;
12
+ border: 1px solid #c3c3c3;
16
13
  }
17
14
  .sqd-theme-light .sqd-toolbox-filter:focus {
18
- border-color: #939393;
15
+ border-color: #939393;
19
16
  }
20
17
  .sqd-theme-light .sqd-toolbox-group-title {
21
- background: #E5E5E5;
18
+ color: #000;
19
+ background: #e5e5e5;
22
20
  }
21
+
23
22
  .sqd-theme-light .sqd-toolbox-item {
24
- border: 1px solid #C3C3C3;
25
- box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
23
+ color: #000;
24
+ border: 1px solid #c3c3c3;
25
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
26
+ background: #fff;
26
27
  }
27
28
  .sqd-theme-light .sqd-toolbox-item:hover {
28
- border: 1px solid #939393;
29
+ border-color: #939393;
30
+ background: #fff;
29
31
  }
30
- .sqd-theme-light .sqd-toolbox-item-icon.sqd-no-icon {
31
- background: #C6C6C6;
32
+ .sqd-theme-light .sqd-toolbox-item .sqd-toolbox-item-icon.sqd-no-icon {
33
+ background: #c6c6c6;
32
34
  }
33
35
 
34
- /* light > .sqd-control-bar */
35
-
36
36
  .sqd-theme-light .sqd-control-bar {
37
- background: #FFF;
38
- box-shadow: 0 0 8px rgba(0, 0, 0, .15), 0 2px 4px rgba(0, 0, 0, .15);
37
+ background: #fff;
38
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15);
39
39
  }
40
40
  .sqd-theme-light .sqd-control-bar-button {
41
- border: 1px solid #C3C3C3;
41
+ border: 1px solid #c3c3c3;
42
+ background: #fff;
42
43
  }
43
44
  .sqd-theme-light .sqd-control-bar-button:hover {
44
- border-color: #939393;
45
+ border-color: #939393;
46
+ background: #fff;
47
+ }
48
+ .sqd-theme-light .sqd-control-bar-button .sqd-icon-path {
49
+ fill: #000;
45
50
  }
46
51
  .sqd-theme-light .sqd-control-bar-button.sqd-delete .sqd-icon-path {
47
- fill: #E01A24;
52
+ fill: #e01a24;
48
53
  }
49
54
 
50
- /* light > .sqd-workspace */
51
-
52
- .sqd-theme-light .sqd-grid-path {
53
- stroke: #E3E3E3;
55
+ .sqd-theme-light .sqd-smart-editor {
56
+ background: #fff;
57
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
54
58
  }
55
- .sqd-theme-light .sqd-join {
56
- stroke: #000;
59
+ .sqd-theme-light .sqd-smart-editor-toggle {
60
+ background: #fff;
61
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
57
62
  }
58
63
 
59
- /* light > .sqd-context-menu */
60
-
61
64
  .sqd-theme-light.sqd-context-menu {
62
- box-shadow: 0 0 8px rgba(0, 0, 0, .2);
63
- background: #FFF;
65
+ background: #fff;
66
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
64
67
  }
68
+
65
69
  .sqd-theme-light .sqd-context-menu-group {
66
- color: #888;
67
- }
68
- .sqd-theme-light .sqd-context-menu-item:hover {
69
- background: #EEE;
70
+ color: #888;
70
71
  }
71
72
 
72
- /* light > .sqd-smart-editor */
73
-
74
- .sqd-theme-light .sqd-smart-editor {
75
- background: #FFF;
76
- box-shadow: 0 0 8px rgba(0, 0, 0, .15);
77
- }
78
- .sqd-theme-light .sqd-smart-editor-toggle {
79
- background: #FFF;
80
- box-shadow: 0 0 8px rgba(0, 0, 0, .15);
73
+ .sqd-theme-light .sqd-context-menu-item {
74
+ color: #000;
81
75
  }
82
76
 
83
- /* light > .sqd-step-task */
84
-
85
- .sqd-theme-light .sqd-step-task-rect {
86
- fill: #FFF;
87
- stroke: #C3C3C3;
88
- filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .15));
89
- }
90
- .sqd-theme-light .sqd-step-task-rect.sqd-selected {
91
- stroke: #ED4800;
92
- }
93
- .sqd-theme-light .sqd-step-task-text {
94
- fill: #000;
95
- }
96
- .sqd-theme-light .sqd-step-task-empty-icon {
97
- fill: #C6C6C6;
77
+ .sqd-theme-light .sqd-context-menu-item:hover {
78
+ background: #eee;
98
79
  }
99
80
 
100
- /* light > .sqd-input + .sqd-output */
101
-
102
- .sqd-theme-light .sqd-input {
103
- fill: #FFF;
104
- stroke: #000;
81
+ .sqd-theme-light.sqd-designer {
82
+ background: #f9f9f9;
105
83
  }
106
84
 
107
- .sqd-theme-light .sqd-output {
108
- fill: #000;
85
+ .sqd-theme-light .sqd-line-grid-path {
86
+ stroke: #e3e3e3;
87
+ stroke-width: 1;
109
88
  }
110
89
 
111
- /* light > .sqd-region */
90
+ .sqd-theme-light .sqd-join {
91
+ stroke-width: 2;
92
+ stroke: #000;
93
+ }
112
94
 
113
95
  .sqd-theme-light .sqd-region {
114
- stroke: #CECECE;
96
+ stroke: #cecece;
97
+ stroke-width: 2;
98
+ stroke-dasharray: 3;
115
99
  }
116
100
  .sqd-theme-light .sqd-region.sqd-selected {
117
- stroke: #ED4800;
101
+ stroke: #ed4800;
102
+ stroke-width: 2;
103
+ stroke-dasharray: 0;
118
104
  }
119
- .sqd-theme-light .sqd-label-primary .sqd-label-rect {
120
- fill: #2411DB;
105
+
106
+ .sqd-theme-light .sqd-placeholder .sqd-placeholder-rect {
107
+ fill: #d8d8d8;
108
+ stroke: #6a6a6a;
109
+ stroke-width: 1;
110
+ stroke-dasharray: 3;
111
+ }
112
+ .sqd-theme-light .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
113
+ fill: #ed4800;
121
114
  }
122
- .sqd-theme-light .sqd-label-secondary .sqd-label-rect {
123
- fill: #000;
115
+ .sqd-theme-light .sqd-placeholder-icon-path {
116
+ fill: #2b2b2b;
124
117
  }
125
- .sqd-theme-light .sqd-label-text {
126
- fill: #FFF;
118
+ .sqd-theme-light .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
119
+ fill: #fff;
127
120
  }
128
121
 
129
- /* light > .sqd-root-start-stop */
122
+ .sqd-theme-light .sqd-validation-error {
123
+ fill: #ffa200;
124
+ }
125
+ .sqd-theme-light .sqd-validation-error-icon-path {
126
+ fill: #000;
127
+ }
130
128
 
131
129
  .sqd-theme-light .sqd-root-start-stop-circle {
132
- fill: #2C18DF;
130
+ fill: #2c18df;
133
131
  }
134
132
  .sqd-theme-light .sqd-root-start-stop-icon {
135
- fill: #FFF;
133
+ fill: #fff;
136
134
  }
137
135
 
138
- /* light > .sqd-placeholder */
139
-
140
- .sqd-theme-light .sqd-placeholder .sqd-placeholder-rect {
141
- fill: #D8D8D8;
142
- stroke: #6A6A6A;
136
+ .sqd-theme-light .sqd-step-task .sqd-step-task-rect {
137
+ fill: #fff;
138
+ stroke-width: 1;
139
+ stroke: #c3c3c3;
140
+ filter: drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, 0.15));
143
141
  }
144
- .sqd-theme-light .sqd-placeholder-icon-path {
145
- fill: #2B2B2B;
142
+ .sqd-theme-light .sqd-step-task .sqd-step-task-rect.sqd-selected {
143
+ stroke: #ed4800;
144
+ stroke-width: 2;
146
145
  }
147
- .sqd-theme-light .sqd-placeholder.sqd-hover .sqd-placeholder-rect {
148
- fill: #ED4800;
146
+ .sqd-theme-light .sqd-step-task .sqd-step-task-text {
147
+ fill: #000;
149
148
  }
150
- .sqd-theme-light .sqd-placeholder.sqd-hover .sqd-placeholder-icon-path {
151
- fill: #FFF;
149
+ .sqd-theme-light .sqd-step-task .sqd-step-task-empty-icon {
150
+ fill: #c6c6c6;
151
+ }
152
+ .sqd-theme-light .sqd-step-task .sqd-input {
153
+ fill: #fff;
154
+ stroke-width: 2;
155
+ stroke: #000;
156
+ }
157
+ .sqd-theme-light .sqd-step-task .sqd-output {
158
+ fill: #000;
159
+ stroke-width: 0;
152
160
  }
153
161
 
154
- /* light > .sqd-validation-error */
162
+ .sqd-theme-light .sqd-step-switch > .sqd-label-primary > .sqd-label-text {
163
+ fill: #fff;
164
+ }
165
+ .sqd-theme-light .sqd-step-switch > .sqd-label-primary > .sqd-label-rect {
166
+ fill: #2411db;
167
+ stroke-width: 0;
168
+ }
169
+ .sqd-theme-light .sqd-step-switch > .sqd-label-secondary > .sqd-label-rect {
170
+ fill: #000;
171
+ stroke-width: 0;
172
+ }
173
+ .sqd-theme-light .sqd-step-switch > .sqd-label-secondary > .sqd-label-text {
174
+ fill: #fff;
175
+ }
176
+ .sqd-theme-light .sqd-step-switch > g > .sqd-input {
177
+ fill: #fff;
178
+ stroke-width: 2;
179
+ stroke: #000;
180
+ }
155
181
 
156
- .sqd-theme-light .sqd-validation-error {
157
- fill: #FFA200;
182
+ .sqd-theme-light .sqd-step-container > .sqd-label > .sqd-label-text {
183
+ fill: #fff;
158
184
  }
159
- .sqd-theme-light .sqd-validation-error-icon-path {
160
- fill: #000;
185
+ .sqd-theme-light .sqd-step-container > .sqd-label > .sqd-label-rect {
186
+ fill: #2411db;
187
+ }
188
+ .sqd-theme-light .sqd-step-container > g > .sqd-input {
189
+ fill: #fff;
190
+ stroke-width: 2;
191
+ stroke: #000;
161
192
  }
package/css/designer-theme.css ADDED
@@ -0,0 +1 @@
1
+ /* internal */