@5minds/node-red-dashboard-2-processcube-dynamic-form 2.0.3 → 2.0.4

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.
@@ -1,159 +1,155 @@
1
1
  .dynamic-form-wrapper {
2
- padding: 10px;
3
- margin: 10px;
4
- border: 1px solid black;
2
+ padding: 10px;
3
+ margin: 10px;
4
+ border: 1px solid black;
5
5
  }
6
6
 
7
7
  .dynamic-form-class {
8
- color: green;
9
- font-weight: bold;
8
+ color: green;
9
+ font-weight: bold;
10
10
  }
11
11
 
12
12
  h1 {
13
- margin-bottom: 10px;
13
+ margin-bottom: 10px;
14
14
  }
15
15
 
16
16
  h2 {
17
- margin-top: 1.5rem;
18
- margin-bottom: 0.75rem;
17
+ margin-top: 1.5rem;
18
+ margin-bottom: 0.75rem;
19
19
  }
20
20
 
21
21
  h3 {
22
- margin-top: 1rem;
22
+ margin-top: 1rem;
23
23
  }
24
24
 
25
25
  p {
26
- margin-bottom: 5px;
26
+ margin-bottom: 5px;
27
27
  }
28
28
 
29
29
  ul li {
30
- list-style-type: circle;
31
- list-style-position: inside;
32
- margin-left: 15px;
30
+ list-style-type: circle;
31
+ list-style-position: inside;
32
+ margin-left: 15px;
33
33
  }
34
34
 
35
35
  pre {
36
- padding: 12px;
37
- margin: 12px;
38
- background-color: #eee;
36
+ padding: 12px;
37
+ margin: 12px;
38
+ background-color: #eee;
39
39
  }
40
40
 
41
41
  code {
42
- font-size: 0.825rem;
43
- color: #ae0000;
42
+ font-size: 0.825rem;
43
+ color: #ae0000;
44
44
  }
45
45
 
46
46
  .ui-dynamic-form-common {
47
- border-radius: 8px;
47
+ border-radius: 8px;
48
48
  }
49
49
 
50
50
  .ui-dynamic-form-light {
51
- box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.5);
51
+ box-shadow: 0 4px 16px -3px rgba(0, 0, 0, 0.5);
52
52
  }
53
53
 
54
54
  .ui-dynamic-form-dark {
55
- box-shadow: 0 4px 16px -3px rgba(255, 255, 255, 0.9);
56
- background-color: rgba(44, 44, 44, 255);
57
- color: rgba(165, 165, 165, 255);
58
- color-scheme: dark;
55
+ box-shadow: 0 4px 16px -3px rgba(255, 255, 255, 0.9);
56
+ background-color: rgba(44, 44, 44, 255);
57
+ color: rgba(165, 165, 165, 255);
58
+ color-scheme: dark;
59
59
  }
60
60
 
61
61
  .ui-dynamic-form-default {
62
- border-bottom: 4px solid rgb(var(--v-theme-primary));
63
- box-shadow: 0px 0px 32px 0px #BABABA;
64
- background-color: #FFF;
65
- color: rgb(var(--v-theme-on-group-background));
62
+ border-bottom: 4px solid rgb(var(--v-theme-primary));
63
+ box-shadow: 0px 0px 32px 0px #bababa;
64
+ background-color: #fff;
65
+ color: rgb(var(--v-theme-on-group-background));
66
66
  }
67
67
 
68
68
  .ui-dynamic-form-title-default {
69
- background: linear-gradient(131deg, #18181A 26.76%, #242326 100.16%);
70
- padding: 32px;
71
- color: #ffffff;
72
- font-size: 36px;
73
- font-weight: 700;
74
- border-radius: 8px 8px 0px 0px;
75
- margin-top: 0px;
76
- border: 2px solid #F6F5FA;
77
- border-bottom: none;
69
+ background: linear-gradient(131deg, #18181a 26.76%, #242326 100.16%);
70
+ padding: 32px;
71
+ color: #ffffff;
72
+ font-size: 36px;
73
+ font-weight: 700;
74
+ border-radius: 8px 8px 0px 0px;
75
+ margin-top: 0px;
76
+ border: 2px solid #f6f5fa;
77
+ border-bottom: none;
78
78
  }
79
79
 
80
80
  .ui-dynamic-form-title-default hr {
81
- border: 4px solid rgb(var(--v-theme-primary));
81
+ border: 4px solid rgb(var(--v-theme-primary));
82
82
  }
83
83
 
84
84
  .ui-dynamic-form-title-minimal {
85
- padding: 16px;
86
- margin-top: 0px;
87
- border: 2px solid #F6F5FA;
88
- border-bottom: none;
85
+ padding: 16px;
86
+ margin-top: 0px;
87
+ border: 2px solid #f6f5fa;
88
+ border-bottom: none;
89
89
  }
90
90
 
91
91
  .ui-dynamic-form-title-outside {
92
- padding-bottom: 24px;
93
- padding-top: 24px;
94
- font-size: 24px;
95
- font-weight: 700;
92
+ padding-bottom: 24px;
93
+ padding-top: 24px;
94
+ font-size: 24px;
95
+ font-weight: 700;
96
96
  }
97
97
 
98
98
  .ui-dynamic-form-footer-common {
99
- display: flex;
100
- flex-direction: column;
101
- gap: 8px;
102
- margin: 0;
103
- border-bottom-left-radius: 8px;
104
- border-bottom-right-radius: 8px;
99
+ display: flex;
100
+ flex-direction: column;
101
+ gap: 8px;
102
+ margin: 0;
103
+ border-bottom-left-radius: 8px;
104
+ border-bottom-right-radius: 8px;
105
105
  }
106
106
 
107
- .ui-dynamic-form-footer-default {}
108
-
109
107
  .ui-dynamic-form-footer-light {
110
- background-color: rgba(249, 250, 251, 1);
108
+ background-color: rgba(249, 250, 251, 1);
111
109
  }
112
110
 
113
111
  .ui-dynamic-form-footer-dark {
114
- background-color: rgba(35, 35, 35, 255);
112
+ background-color: rgba(35, 35, 35, 255);
115
113
  }
116
114
 
117
115
  .ui-dynamic-form-footer-action-primary {
118
- border-radius: 8px;
119
- background-color: rgb(var(--v-theme-primary));
120
- padding: 8px;
116
+ border-radius: 8px;
117
+ background-color: rgb(var(--v-theme-primary));
118
+ padding: 8px;
121
119
  }
122
120
 
123
121
  .ui-dynamic-form-footer-action-secondary {
124
- border-radius: 8px;
125
- background-color: transparent !important;
126
- border-color: rgb(var(--v-theme-primary));
127
- border: 2px solid;
128
- color: rgb(var(--v-theme-primary));
129
- padding: 8px;
122
+ border-radius: 8px;
123
+ background-color: transparent !important;
124
+ border-color: rgb(var(--v-theme-primary));
125
+ border: 2px solid;
126
+ color: rgb(var(--v-theme-primary));
127
+ padding: 8px;
130
128
  }
131
129
 
132
130
  .ui-dynamic-form-wrapper {
133
- --fk-color-primary: rgb(var(--v-theme-primary)) !important;
134
- --fk-color-border: rgb(var(--v-theme-group-outline)); /* Does not work somehow */
135
- --fk-bg-input: #FFF;
136
- --fk-color-input: rgb(var(--v-theme-on-group-background));
137
- --fk-color-help: rgb(var(--v-theme-on-group-background));
138
- --fk-color-border-focus: rgb(var(--v-theme-primary));
139
- }
140
-
141
- @media only screen and (min-width: 600px) {
142
- .ui-dynamic-form-external-sizing-wrapper {
143
- margin-left: 92px;
144
- margin-right: 92px;
145
- max-width: none;
146
- max-height: 90%;
147
- }
148
- }
131
+ --fk-color-primary: rgb(var(--v-theme-primary)) !important;
132
+ --fk-color-border: rgb(var(--v-theme-group-outline)); /* Does not work somehow */
133
+ --fk-bg-input: #fff;
134
+ --fk-color-input: rgb(var(--v-theme-on-group-background));
135
+ --fk-color-help: rgb(var(--v-theme-on-group-background));
136
+ --fk-color-border-focus: rgb(var(--v-theme-primary));
137
+ }
138
+
139
+ @media only screen and (min-width: 600px) {
140
+ .ui-dynamic-form-external-sizing-wrapper {
141
+ max-width: none;
142
+ max-height: 90%;
143
+ }
144
+ }
149
145
 
150
146
  .cardCollapse-leave-active {
151
- transition: max-height .5s ease, opacity .2s ease;
147
+ transition: max-height 0.5s ease, opacity 0.2s ease;
152
148
  max-height: 100vh;
153
149
  }
154
150
 
155
151
  .cardCollapse-enter-active {
156
- transition: max-height .2s ease, opacity .5s ease;
152
+ transition: max-height 0.2s ease, opacity 0.5s ease;
157
153
  max-height: 100vh;
158
154
  }
159
155
 
@@ -164,37 +160,43 @@ code {
164
160
  }
165
161
 
166
162
  .ui-dynamic-form-formfield-positioner {
167
- padding: 32px;
168
- padding-top: 0px;
169
- max-height: 550px;
170
- overflow-y: auto;
171
- display: flex;
172
- flex-wrap: wrap;
173
- flex-direction: row;
174
- column-gap: 20px;
175
- border-left: 2px solid #F6F5FA;
176
- border-right: 2px solid #F6F5FA;
177
- border-radius: 0px 0px 6px 6px;
178
- }
179
-
180
- .ui-dynamic-form-formfield-positioner h1, .ui-dynamic-form-formfield-positioner h2, .ui-dynamic-form-formfield-positioner h3 {
163
+ padding: 32px;
164
+ padding-top: 0px;
165
+ max-height: 550px;
166
+ overflow-y: auto;
167
+ display: flex;
168
+ flex-wrap: wrap;
169
+ flex-direction: row;
170
+ column-gap: 20px;
171
+ border-left: 2px solid #f6f5fa;
172
+ border-right: 2px solid #f6f5fa;
173
+ border-radius: 0px 0px 6px 6px;
174
+ }
175
+
176
+ .ui-dynamic-form-formfield-positioner h1,
177
+ .ui-dynamic-form-formfield-positioner h2,
178
+ .ui-dynamic-form-formfield-positioner h3 {
181
179
  margin: 0px;
182
180
  }
183
181
 
184
- .reset-background {
185
- --fk-bg-input: none; /*maybe none or (revert)*/
182
+ .reset-background,
183
+ .reset-background .formkit-input:focus {
184
+ --fk-bg-input: none !important; /*maybe none or (revert)*/
185
+ background-color: var(--fk-bg-input) !important;
186
186
  }
187
187
 
188
188
  .custom-fieldset {
189
- max-width: none !important;
189
+ max-width: none !important;
190
190
  }
191
191
 
192
192
  .input-dark {
193
- background-color: rgba(85, 85, 85, 255);
194
- color: white !important;
195
- }
193
+ background-color: rgba(85, 85, 85, 255);
194
+ color: white !important;
195
+ }
196
196
 
197
- .input-light, .input-default, .input-dark {
197
+ .input-light,
198
+ .input-default,
199
+ .input-dark {
198
200
  border-radius: 0px 0px 0px 8px;
199
201
  font-size: 18px;
200
202
  font-weight: 400;
@@ -202,8 +204,10 @@ code {
202
204
  padding: 4px 8px;
203
205
  }
204
206
 
205
- .input-light:focus, .input-dark:focus, .input-default:focus {
206
- background-color: #F6F5FA;
207
+ .input-light:focus,
208
+ .input-dark:focus,
209
+ .input-default:focus {
210
+ background-color: #f6f5fa;
207
211
  border-radius: 0 8px 0px 5px;
208
212
  }
209
213