neo.mjs 5.1.2 → 5.1.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.
Files changed (16) hide show
  1. package/apps/ServiceWorker.mjs +2 -2
  2. package/apps/website/data/blog.json +1 -1
  3. package/buildScripts/addConfig.mjs +7 -6
  4. package/examples/ServiceWorker.mjs +2 -2
  5. package/package.json +1 -1
  6. package/resources/scss/src/button/Base.scss +187 -70
  7. package/resources/scss/src/component/Carousel.scss +53 -47
  8. package/resources/scss/src/dialog/Base.scss +1 -1
  9. package/resources/scss/theme-dark/button/Base.scss +170 -70
  10. package/resources/scss/theme-light/button/Base.scss +170 -70
  11. package/src/DefaultConfig.mjs +2 -2
  12. package/src/draggable/DragZone.mjs +2 -2
  13. package/src/form/Container.mjs +3 -3
  14. package/src/form/field/Select.mjs +1 -1
  15. package/src/form/field/Text.mjs +4 -6
  16. package/src/manager/Component.mjs +22 -0
package/apps/ServiceWorker.mjs CHANGED
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='5.1.2'
23
+ * @member {String} version='5.1.4'
24
24
  */
25
- version: '5.1.2'
25
+ version: '5.1.4'
26
26
  }
27
27
 
28
28
  /**
package/apps/website/data/blog.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "authorImage" : "author_TorstenDinkheller.jpg",
5
5
  "date" : "Feb 03, 2023",
6
6
  "id" : 57,
7
- "image" : "leveraging-overrides.jpg",
7
+ "image" : "overrides-medium.jpg",
8
8
  "name" : "Leveraging Overrides for Resilient Customizations and Effective Bugfixes in JavaScript Frameworks",
9
9
  "provider" : "Medium",
10
10
  "publisher" : "ITNEXT",
package/buildScripts/addConfig.mjs CHANGED
@@ -74,7 +74,7 @@ function addHook(opts) {
74
74
  name = opts.name,
75
75
  len = contentArray.length,
76
76
  type = opts.type,
77
- j, methodName, nextLine,
77
+ index, j, methodName, nextLine,
78
78
 
79
79
  method = [
80
80
  '',
@@ -125,17 +125,18 @@ function addHook(opts) {
125
125
  );
126
126
 
127
127
  for (; i < len; i++) {
128
- if (contentArray[i].includes('}}')) {
128
+ if (contentArray[i].startsWith(' }')) {
129
129
  break;
130
130
  }
131
131
  }
132
132
 
133
133
  for (; i < len; i++) {
134
134
  if (contentArray[i].includes('*/')) {
135
- nextLine = contentArray[i + 1]
136
- methodName = nextLine.substring(0, nextLine.indexOf('(')).trim();
135
+ nextLine = contentArray[i + 1];
136
+ index = nextLine.indexOf('(');
137
+ methodName = index > -1 && nextLine.substring(0, index).trim();
137
138
 
138
- if (methodName === 'construct') {
139
+ if (!methodName || methodName === 'construct') {
139
140
  continue;
140
141
  }
141
142
 
@@ -324,7 +325,7 @@ if (programOpts.info) {
324
325
  for (; i < len; i++) {
325
326
  codeLine = contentArray[i];
326
327
 
327
- if (codeLine.includes(' }')) {
328
+ if (codeLine.startsWith(' }')) {
328
329
  addComma(contentArray, i - 1);
329
330
  addConfig({
330
331
  configName,
package/examples/ServiceWorker.mjs CHANGED
@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
20
20
  */
21
21
  singleton: true,
22
22
  /**
23
- * @member {String} version='5.1.2'
23
+ * @member {String} version='5.1.4'
24
24
  */
25
- version: '5.1.2'
25
+ version: '5.1.4'
26
26
  }
27
27
 
28
28
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "neo.mjs",
3
- "version": "5.1.2",
3
+ "version": "5.1.4",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
package/resources/scss/src/button/Base.scss CHANGED
@@ -9,24 +9,6 @@
9
9
  }
10
10
  }
11
11
 
12
- .neo-disabled {
13
- .neo-button,
14
- &.neo-button {
15
- background-color: v(button-background-color-disabled);
16
- border-color : v(button-border-color-disabled);
17
- cursor : default;
18
- opacity : v(button-opacity-disabled);
19
-
20
- .neo-button-glyph {
21
- color: v(button-glyph-color-disabled);
22
- }
23
-
24
- .neo-button-text {
25
- color: v(button-text-color-disabled);
26
- }
27
- }
28
- }
29
-
30
12
  .neo-button {
31
13
  align-items : center;
32
14
  background-color : v(button-background-color);
@@ -37,6 +19,7 @@
37
19
  cursor : pointer;
38
20
  display : flex;
39
21
  flex-direction : row;
22
+ height : v(button-height);
40
23
  justify-content : center;
41
24
  margin : v(button-margin);
42
25
  padding : v(button-padding);
@@ -47,58 +30,6 @@
47
30
  white-space : nowrap;
48
31
  -webkit-appearance: button;
49
32
 
50
- &:active {
51
- background-color: v(button-active-background-color) !important;
52
- background-image: none !important;
53
- border-color : v(button-active-border-color);
54
- color : v(button-active-color) !important;
55
- }
56
-
57
- &:focus {
58
- outline: v(button-outline-active);
59
- }
60
-
61
- &:hover {
62
- background-color: v(button-hover-background-color);
63
- background-image: none !important;
64
- border-color : v(button-hover-border-color);
65
- color : v(button-hover-color);
66
- }
67
-
68
- &.neo-button-secondary {
69
- background-color: v(button-text-color);
70
- background-image: none;
71
-
72
- .neo-button-badge {
73
- background-color: v(button-badge-color);
74
- color : v(button-badge-background-color);
75
- }
76
-
77
- .neo-button-glyph {
78
- color: v(button-background-color);
79
- }
80
-
81
- .neo-button-text {
82
- color: v(button-background-color);
83
- }
84
- }
85
-
86
- &.neo-button-tertiary {
87
- background-color: transparent;
88
- background-image: none;
89
- border-width : 0;
90
- }
91
-
92
- &.no-text {
93
- .neo-button-glyph {
94
- margin: 0 !important;
95
- }
96
- }
97
-
98
- &.pressed {
99
- border-color: v(button-pressed-border-color);
100
- }
101
-
102
33
  .neo-button-badge {
103
34
  background-color: v(button-badge-background-color);
104
35
  border-radius : 5px;
@@ -166,6 +97,38 @@
166
97
  z-index : 2;
167
98
  }
168
99
 
100
+ &:active {
101
+ background-color: v(button-background-color-active) !important;
102
+ background-image: none !important;
103
+ border-color : v(button-border-color-active);
104
+
105
+ .neo-button-glyph {
106
+ color: v(button-glyph-color-active);
107
+ }
108
+
109
+ .neo-button-text {
110
+ color: v(button-text-color-active);
111
+ }
112
+ }
113
+
114
+ &:focus {
115
+ outline: v(button-outline-active);
116
+ }
117
+
118
+ &:hover {
119
+ background-color: v(button-background-color-hover);
120
+ background-image: none !important;
121
+ border-color : v(button-border-color-hover);
122
+
123
+ .neo-button-glyph {
124
+ color: v(button-glyph-color-hover);
125
+ }
126
+
127
+ .neo-button-text {
128
+ color: v(button-text-color-hover);
129
+ }
130
+ }
131
+
169
132
  &.icon-bottom {
170
133
  flex-direction: column-reverse;
171
134
 
@@ -189,4 +152,158 @@
189
152
  margin: 0 0 6px 0;
190
153
  }
191
154
  }
155
+
156
+ &.neo-button-secondary {
157
+ background-color: v(button-secondary-background-color);
158
+ background-image: v(button-secondary-background-image);
159
+ border : v(button-secondary-border-width) solid v(button-secondary-border-color);
160
+
161
+ .neo-button-badge {
162
+ background-color: v(button-secondary-badge-background-color);
163
+ color : v(button-secondary-badge-color);
164
+ }
165
+
166
+ .neo-button-glyph {
167
+ color: v(button-secondary-glyph-color);
168
+ }
169
+
170
+ .neo-button-ripple {
171
+ background-color: v(button-secondary-ripple-background-color);
172
+ }
173
+
174
+ .neo-button-text {
175
+ color: v(button-secondary-text-color);
176
+ }
177
+
178
+ &:active {
179
+ background-color: v(button-secondary-background-color-active) !important;
180
+ border-color : v(button-secondary-border-color-active);
181
+
182
+ .neo-button-glyph {
183
+ color: v(button-secondary-glyph-color-active);
184
+ }
185
+
186
+ .neo-button-text {
187
+ color: v(button-secondary-text-color-active);
188
+ }
189
+ }
190
+
191
+ &:hover {
192
+ background-color: v(button-secondary-background-color-hover);
193
+ border-color : v(button-secondary-border-color-hover);
194
+
195
+ .neo-button-glyph {
196
+ color: v(button-secondary-glyph-color-hover);
197
+ }
198
+
199
+ .neo-button-text {
200
+ color: v(button-secondary-text-color-hover);
201
+ }
202
+ }
203
+ }
204
+
205
+ &.neo-button-tertiary {
206
+ background-color: v(button-tertiary-background-color);
207
+ background-image: v(button-tertiary-background-image);
208
+ border : v(button-tertiary-border-width) solid v(button-tertiary-border-color);
209
+
210
+ .neo-button-badge {
211
+ background-color: v(button-tertiary-badge-background-color);
212
+ color : v(button-tertiary-badge-color);
213
+ }
214
+
215
+ .neo-button-glyph {
216
+ color: v(button-tertiary-glyph-color);
217
+ }
218
+
219
+ .neo-button-ripple {
220
+ background-color: v(button-tertiary-ripple-background-color);
221
+ }
222
+
223
+ .neo-button-text {
224
+ color: v(button-tertiary-text-color);
225
+ }
226
+
227
+ &:active {
228
+ background-color: v(button-tertiary-background-color-active) !important;
229
+ border-color : v(button-tertiary-border-color-active);
230
+
231
+ .neo-button-glyph {
232
+ color: v(button-tertiary-glyph-color-active);
233
+ }
234
+
235
+ .neo-button-text {
236
+ color: v(button-tertiary-text-color-active);
237
+ }
238
+ }
239
+
240
+ &:hover {
241
+ background-color: v(button-tertiary-background-color-hover);
242
+ border-color : v(button-tertiary-border-color-hover);
243
+
244
+ .neo-button-glyph {
245
+ color: v(button-tertiary-glyph-color-hover);
246
+ }
247
+
248
+ .neo-button-text {
249
+ color: v(button-tertiary-text-color-hover);
250
+ }
251
+ }
252
+ }
253
+
254
+ &.no-text {
255
+ .neo-button-glyph {
256
+ margin: 0 !important;
257
+ }
258
+ }
259
+
260
+ &.pressed {
261
+ border-color: v(button-border-color-pressed);
262
+ }
263
+ }
264
+
265
+ .neo-disabled {
266
+ .neo-button,
267
+ &.neo-button {
268
+ background-color: v(button-background-color-disabled);
269
+ border-color : v(button-border-color-disabled);
270
+ cursor : default;
271
+ opacity : v(button-opacity-disabled);
272
+
273
+ .neo-button-glyph {
274
+ color: v(button-glyph-color-disabled);
275
+ }
276
+
277
+ .neo-button-text {
278
+ color: v(button-text-color-disabled);
279
+ }
280
+
281
+ &.neo-button-secondary {
282
+ background-color: v(button-secondary-background-color-disabled);
283
+ border-color : v(button-secondary-border-color-disabled);
284
+ opacity : v(button-secondary-opacity-disabled);
285
+
286
+ .neo-button-glyph {
287
+ color: v(button-secondary-glyph-color-disabled);
288
+ }
289
+
290
+ .neo-button-text {
291
+ color: v(button-secondary-text-color-disabled);
292
+ }
293
+ }
294
+
295
+ &.neo-button-tertiary {
296
+ background-color: v(button-tertiary-background-color-disabled);
297
+ border-color : v(button-tertiary-border-color-disabled);
298
+ opacity : v(button-tertiary-opacity-disabled);
299
+
300
+ .neo-button-glyph {
301
+ color: v(button-tertiary-glyph-color-disabled);
302
+ }
303
+
304
+ .neo-button-text {
305
+ color: v(button-tertiary-text-color-disabled);
306
+ }
307
+ }
308
+ }
192
309
  }
package/resources/scss/src/component/Carousel.scss CHANGED
@@ -2,69 +2,75 @@
2
2
  * CAROUSEL TRANSFORM
3
3
  */
4
4
  .neo-carousel {
5
- /**
6
- * VARS
7
- */
8
- --neo-carousel-translate-x: 0;
9
- --neo-carousel-translate-y: 0;
10
- --neo-carousel-transition-timing: cubic-bezier(.4,0,.2,1);
11
- --neo-carousel-duration: .7s;
5
+ /**
6
+ * VARS
7
+ */
8
+ --neo-carousel-duration : .7s;
9
+ --neo-carousel-transition-timing: cubic-bezier(.4, 0, .2, 1);
10
+ --neo-carousel-translate-x : 0;
11
+ --neo-carousel-translate-y : 0;
12
12
 
13
- .neo-carousel-inner {
14
- position: relative;
15
- overflow: hidden;
13
+ .neo-carousel-inner {
14
+ overflow: hidden;
15
+ position: relative;
16
16
 
17
- .neo-carousel-item {
18
- transition-timing-function: var(--neo-carousel-transition-timing);
19
- transition-duration: var(--neo-carousel-duration);
20
- transition-property: all;
21
- z-index: 10;
22
- inset: 0;
23
- position: absolute;
24
- transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
17
+ .neo-carousel-item {
18
+ inset : 0;
19
+ position : absolute;
20
+ transform : translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
21
+ transition-duration : var(--neo-carousel-duration);
22
+ transition-property : all;
23
+ transition-timing-function: var(--neo-carousel-transition-timing);
24
+ z-index : 10;
25
+ }
25
26
  }
26
- }
27
27
  }
28
28
 
29
- .neo-carousel--translate-x-full{
30
- --neo-carousel-translate-x: -100%;
31
- transform: translate(var(--neo-carousel-translate-x),var(--neo-carousel-translate-y));
29
+ .neo-carousel--translate-x-full {
30
+ --neo-carousel-translate-x: -100%;
31
+
32
+ transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
32
33
  }
33
- .neo-carousel-translate-x-0{
34
- --neo-carousel-translate-x: 0;
35
- transform: translate(var(--neo-carousel-translate-x),var(--neo-carousel-translate-y));
34
+
35
+ .neo-carousel-translate-x-0 {
36
+ --neo-carousel-translate-x: 0;
37
+
38
+ transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
36
39
  }
37
- .neo-carousel-translate-x-full{
38
- --neo-carousel-translate-x: 100%;
39
- transform: translate(var(--neo-carousel-translate-x),var(--neo-carousel-translate-y));
40
+
41
+ .neo-carousel-translate-x-full {
42
+ --neo-carousel-translate-x: 100%;
43
+
44
+ transform: translate(var(--neo-carousel-translate-x), var(--neo-carousel-translate-y));
40
45
  }
41
46
 
42
47
  /**
43
48
  * BASE STYLING
44
49
  */
45
50
  .neo-carousel {
46
- padding: 15px;
47
- height: 14rem;
48
- background: var(--container-background-color);
51
+ background: var(--container-background-color);
52
+ height : 14rem;
53
+ padding : 15px;
49
54
 
50
- .neo-carousel-btn-bar {
51
- text-align: end;
55
+ .neo-carousel-btn-bar {
56
+ text-align: end;
52
57
 
53
- .neo-carousel-btn {
54
- padding: 15px;
55
- font-size: 18px;
58
+ .neo-carousel-btn {
59
+ font-size: 18px;
60
+ padding : 15px;
61
+ }
56
62
  }
57
- }
58
- .neo-carousel-inner {
59
- border-radius: 5px;
60
- height: 9rem;
61
- overflow: hidden;
62
- background-color: var(--button-active-color);
63
- color: var(--button-background-color);
64
63
 
65
- .neo-carousel-item {
66
- height: 9rem;
67
- padding: 15px;
64
+ .neo-carousel-inner {
65
+ background-color: var(--button-text-color-active);
66
+ border-radius : 5px;
67
+ color : var(--button-background-color);
68
+ height : 9rem;
69
+ overflow : hidden;
70
+
71
+ .neo-carousel-item {
72
+ height : 9rem;
73
+ padding: 15px;
74
+ }
68
75
  }
69
- }
70
76
  }
package/resources/scss/src/dialog/Base.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  // default styling to match buttons, since this is the most common use case
3
3
  background-color: v(button-background-color);
4
4
  background-image: v(button-background-image);
5
- border : 1px solid v(button-active-border-color);
5
+ border : 1px solid v(button-border-color-active);
6
6
 
7
7
  position: fixed;
8
8
  z-index : 1000;
package/resources/scss/theme-dark/button/Base.scss CHANGED
@@ -1,77 +1,177 @@
1
1
  $neoMap: map-merge($neoMap, (
2
- 'button-active-background-color' : #373a3c,
3
- 'button-active-border-color' : #282828,
4
- 'button-active-color' : #bbb,
5
- 'button-background-color' : #3c3f41,
6
- 'button-background-color-disabled': #3c3f41,
7
- 'button-background-image' : linear-gradient(#434749, #323536),
8
- 'button-background-gradient-end' : #323536,
9
- 'button-background-gradient-start': #434749,
10
- 'button-badge-background-color' : #64b5f6,
11
- 'button-badge-color' : #282828,
12
- 'button-badge-margin-left' : -10px,
13
- 'button-badge-margin-top' : -10px,
14
- 'button-border-color' : #2b2b2b,
15
- 'button-border-color-disabled' : #2b2b2b,
16
- 'button-border-radius' : 0,
17
- 'button-border-width' : 1px,
18
- 'button-glyph-color' : #bbb,
19
- 'button-glyph-color-disabled' : #bbb,
20
- 'button-hover-background-color' : #3a3c3e,
21
- 'button-hover-border-color' : #292929,
22
- 'button-hover-color' : #bbb,
23
- 'button-margin' : 2px,
24
- 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
25
- 'button-outline-active' : none,
26
- 'button-padding' : 5px 12px 5px 12px,
27
- 'button-pressed-border-color' : #5d83a7,
28
- 'button-ripple-background-color' : darken(#5d83a7, 10%),
29
- 'button-text-color' : #bbb,
30
- 'button-text-color-disabled' : #bbb,
31
- 'button-text-font-family' : #{neo(neo-font-family)},
32
- 'button-text-font-size' : 11px,
33
- 'button-text-font-weight' : 600,
34
- 'button-text-line-height' : 11px,
35
- 'button-text-transform' : none,
36
- 'button-use-gradients' : true
2
+ 'button-background-color' : #3c3f41,
3
+ 'button-background-color-active' : #373a3c,
4
+ 'button-background-color-disabled' : #3c3f41,
5
+ 'button-background-color-hover' : #3a3c3e,
6
+ 'button-background-image' : linear-gradient(#434749, #323536),
7
+ 'button-background-gradient-end' : #323536,
8
+ 'button-background-gradient-start' : #434749,
9
+ 'button-badge-background-color' : #64b5f6,
10
+ 'button-badge-color' : #282828,
11
+ 'button-badge-margin-left' : -10px,
12
+ 'button-badge-margin-top' : -10px,
13
+ 'button-border-color' : #2b2b2b,
14
+ 'button-border-color-active' : #282828,
15
+ 'button-border-color-disabled' : #2b2b2b,
16
+ 'button-border-color-hover' : #292929,
17
+ 'button-border-color-pressed' : #5d83a7,
18
+ 'button-border-radius' : 0,
19
+ 'button-border-width' : 1px,
20
+ 'button-glyph-color' : #bbb,
21
+ 'button-glyph-color-active' : #bbb,
22
+ 'button-glyph-color-disabled' : #bbb,
23
+ 'button-glyph-color-hover' : #bbb,
24
+ 'button-height' : inherit,
25
+ 'button-margin' : 2px,
26
+ 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
27
+ 'button-outline-active' : none,
28
+ 'button-padding' : 5px 12px 5px 12px,
29
+ 'button-ripple-background-color' : darken(#5d83a7, 10%),
30
+ 'button-text-color' : #bbb,
31
+ 'button-text-color-active' : #bbb,
32
+ 'button-text-color-disabled' : #bbb,
33
+ 'button-text-color-hover' : #bbb,
34
+ 'button-text-font-family' : #{neo(neo-font-family)},
35
+ 'button-text-font-size' : 11px,
36
+ 'button-text-font-weight' : 600,
37
+ 'button-text-line-height' : 11px,
38
+ 'button-text-transform' : none,
39
+ 'button-use-gradients' : true,
40
+
41
+ // {module: Button, ui: 'secondary'}
42
+ 'button-secondary-background-color' : var(--button-text-color),
43
+ 'button-secondary-background-color-active' : #373a3c,
44
+ 'button-secondary-background-color-disabled': inherit,
45
+ 'button-secondary-background-color-hover' : var(--button-text-color),
46
+ 'button-secondary-background-image' : none,
47
+ 'button-secondary-badge-background-color' : var(--button-badge-color),
48
+ 'button-secondary-badge-color' : var(--button-badge-background-color),
49
+ 'button-secondary-border-color' : var(--button-background-color),
50
+ 'button-secondary-border-color-active' : #282828,
51
+ 'button-secondary-border-color-disabled' : inherit,
52
+ 'button-secondary-border-color-hover' : #292929,
53
+ 'button-secondary-border-width' : var(--button-border-width),
54
+ 'button-secondary-glyph-color' : var(--button-background-color),
55
+ 'button-secondary-glyph-color-active' : var(--button-background-color),
56
+ 'button-secondary-glyph-color-disabled' : inherit,
57
+ 'button-secondary-glyph-color-hover' : var(--button-background-color),
58
+ 'button-secondary-opacity-disabled' : var(--neo-disabled-opacity),
59
+ 'button-secondary-ripple-background-color' : inherit,
60
+ 'button-secondary-text-color' : var(--button-background-color),
61
+ 'button-secondary-text-color-active' : var(--button-background-color),
62
+ 'button-secondary-text-color-disabled' : inherit,
63
+ 'button-secondary-text-color-hover' : var(--button-background-color),
64
+
65
+ // {module: Button, ui: 'tertiary'}
66
+ 'button-tertiary-background-color' : transparent,
67
+ 'button-tertiary-background-color-active' : #373a3c,
68
+ 'button-tertiary-background-color-disabled' : inherit,
69
+ 'button-tertiary-background-color-hover' : var(--button-background-color-hover),
70
+ 'button-tertiary-background-image' : none,
71
+ 'button-tertiary-badge-background-color' : var(--button-badge-background-color),
72
+ 'button-tertiary-badge-color' : var(--button-badge-color),
73
+ 'button-tertiary-border-color' : var(--button-border-color),
74
+ 'button-tertiary-border-color-active' : #282828,
75
+ 'button-tertiary-border-color-disabled' : inherit,
76
+ 'button-tertiary-border-color-hover' : #292929,
77
+ 'button-tertiary-border-width' : 0,
78
+ 'button-tertiary-glyph-color' : var(--button-glyph-color),
79
+ 'button-tertiary-glyph-color-active' : var(--button-glyph-color),
80
+ 'button-tertiary-glyph-color-disabled' : inherit,
81
+ 'button-tertiary-glyph-color-hover' : var(--button-glyph-color),
82
+ 'button-tertiary-opacity-disabled' : var(--neo-disabled-opacity),
83
+ 'button-tertiary-ripple-background-color' : inherit,
84
+ 'button-tertiary-text-color' : var(--button-text-color),
85
+ 'button-tertiary-text-color-active' : var(--button-text-color),
86
+ 'button-tertiary-text-color-disabled' : inherit,
87
+ 'button-tertiary-text-color-hover' : var(--button-text-color)
37
88
  ));
38
89
 
39
90
  @if $useCssVars == true {
40
91
  :root .neo-theme-dark { // .neo-button
41
- --button-active-background-color : #{neo(button-active-background-color)};
42
- --button-active-border-color : #{neo(button-active-border-color)};
43
- --button-active-color : #{neo(button-active-color)};
44
- --button-background-color : #{neo(button-background-color)};
45
- --button-background-color-disabled: #{neo(button-background-color-disabled)};
46
- --button-background-image : #{neo(button-background-image)};
47
- --button-background-gradient-end : #{neo(button-background-gradient-end)};
48
- --button-background-gradient-start: #{neo(button-background-gradient-start)};
49
- --button-badge-background-color : #{neo(button-badge-background-color)};
50
- --button-badge-color : #{neo(button-badge-color)};
51
- --button-badge-margin-left : #{neo(button-badge-margin-left)};
52
- --button-badge-margin-top : #{neo(button-badge-margin-top)};
53
- --button-border-color : #{neo(button-border-color)};
54
- --button-border-color-disabled : #{neo(button-border-color-disabled)};
55
- --button-border-radius : #{neo(button-border-radius)};
56
- --button-border-width : #{neo(button-border-width)};
57
- --button-glyph-color : #{neo(button-glyph-color)};
58
- --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
59
- --button-hover-background-color : #{neo(button-hover-background-color)};
60
- --button-hover-border-color : #{neo(button-hover-border-color)};
61
- --button-hover-color : #{neo(button-hover-color)};
62
- --button-margin : #{neo(button-margin)};
63
- --button-opacity-disabled : #{neo(button-opacity-disabled)};
64
- --button-outline-active : #{neo(button-outline-active)};
65
- --button-padding : #{neo(button-padding)};
66
- --button-pressed-border-color : #{neo(button-pressed-border-color)};
67
- --button-ripple-background-color : #{neo(button-ripple-background-color)};
68
- --button-text-color : #{neo(button-text-color)};
69
- --button-text-color-disabled : #{neo(button-text-color-disabled)};
70
- --button-text-font-family : #{neo(button-text-font-family)};
71
- --button-text-font-size : #{neo(button-text-font-size)};
72
- --button-text-font-weight : #{neo(button-text-font-weight)};
73
- --button-text-line-height : #{neo(button-text-line-height)};
74
- --button-text-transform : #{neo(button-text-transform)};
75
- --button-use-gradients : #{neo(button-use-gradients)};
92
+ --button-background-color : #{neo(button-background-color)};
93
+ --button-background-color-active : #{neo(button-background-color-active)};
94
+ --button-background-color-disabled : #{neo(button-background-color-disabled)};
95
+ --button-background-color-hover : #{neo(button-background-color-hover)};
96
+ --button-background-image : #{neo(button-background-image)};
97
+ --button-background-gradient-end : #{neo(button-background-gradient-end)};
98
+ --button-background-gradient-start : #{neo(button-background-gradient-start)};
99
+ --button-badge-background-color : #{neo(button-badge-background-color)};
100
+ --button-badge-color : #{neo(button-badge-color)};
101
+ --button-badge-margin-left : #{neo(button-badge-margin-left)};
102
+ --button-badge-margin-top : #{neo(button-badge-margin-top)};
103
+ --button-border-color : #{neo(button-border-color)};
104
+ --button-border-color-active : #{neo(button-border-color-active)};
105
+ --button-border-color-disabled : #{neo(button-border-color-disabled)};
106
+ --button-border-color-hover : #{neo(button-border-color-hover)};
107
+ --button-border-color-pressed : #{neo(button-border-color-pressed)};
108
+ --button-border-radius : #{neo(button-border-radius)};
109
+ --button-border-width : #{neo(button-border-width)};
110
+ --button-glyph-color : #{neo(button-glyph-color)};
111
+ --button-glyph-color-active : #{neo(button-glyph-color-active)};
112
+ --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
113
+ --button-glyph-color-hover : #{neo(button-glyph-color-hover)};
114
+ --button-height : #{neo(button-height)};
115
+ --button-margin : #{neo(button-margin)};
116
+ --button-opacity-disabled : #{neo(button-opacity-disabled)};
117
+ --button-outline-active : #{neo(button-outline-active)};
118
+ --button-padding : #{neo(button-padding)};
119
+ --button-ripple-background-color : #{neo(button-ripple-background-color)};
120
+ --button-text-color : #{neo(button-text-color)};
121
+ --button-text-color-active : #{neo(button-text-color-active)};
122
+ --button-text-color-disabled : #{neo(button-text-color-disabled)};
123
+ --button-text-color-hover : #{neo(button-text-color-hover)};
124
+ --button-text-font-family : #{neo(button-text-font-family)};
125
+ --button-text-font-size : #{neo(button-text-font-size)};
126
+ --button-text-font-weight : #{neo(button-text-font-weight)};
127
+ --button-text-line-height : #{neo(button-text-line-height)};
128
+ --button-text-transform : #{neo(button-text-transform)};
129
+ --button-use-gradients : #{neo(button-use-gradients)};
130
+
131
+ --button-secondary-background-color : #{neo(button-secondary-background-color)};
132
+ --button-secondary-background-color-active : #{neo(button-secondary-background-color-active)};
133
+ --button-secondary-background-color-disabled: #{neo(button-secondary-background-color-disabled)};
134
+ --button-secondary-background-color-hover : #{neo(button-secondary-background-color-hover)};
135
+ --button-secondary-background-image : #{neo(button-secondary-background-image)};
136
+ --button-secondary-badge-background-color : #{neo(button-secondary-badge-background-color)};
137
+ --button-secondary-badge-color : #{neo(button-secondary-badge-color)};
138
+ --button-secondary-border-color : #{neo(button-secondary-border-color)};
139
+ --button-secondary-border-color-active : #{neo(button-secondary-border-color-active)};
140
+ --button-secondary-border-color-disabled : #{neo(button-secondary-border-color-disabled)};
141
+ --button-secondary-border-color-hover : #{neo(button-secondary-border-color-hover)};
142
+ --button-secondary-border-width : #{neo(button-secondary-border-width)};
143
+ --button-secondary-glyph-color : #{neo(button-secondary-glyph-color)};
144
+ --button-secondary-glyph-color-active : #{neo(button-secondary-glyph-color-active)};
145
+ --button-secondary-glyph-color-disabled : #{neo(button-secondary-glyph-color-disabled)};
146
+ --button-secondary-glyph-color-hover : #{neo(button-secondary-glyph-color-hover)};
147
+ --button-secondary-opacity-disabled : #{neo(button-secondary-opacity-disabled)};
148
+ --button-secondary-ripple-background-color : #{neo(button-secondary-ripple-background-color)};
149
+ --button-secondary-text-color : #{neo(button-secondary-text-color)};
150
+ --button-secondary-text-color-active : #{neo(button-secondary-text-color-active)};
151
+ --button-secondary-text-color-disabled : #{neo(button-secondary-text-color-disabled)};
152
+ --button-secondary-text-color-hover : #{neo(button-secondary-text-color-hover)};
153
+
154
+ --button-tertiary-background-color : #{neo(button-tertiary-background-color)};
155
+ --button-tertiary-background-color-active : #{neo(button-tertiary-background-color-active)};
156
+ --button-tertiary-background-color-disabled : #{neo(button-tertiary-background-color-hover)};
157
+ --button-tertiary-background-color-hover : #{neo(button-tertiary-background-color-hover)};
158
+ --button-tertiary-background-image : #{neo(button-tertiary-background-image)};
159
+ --button-tertiary-badge-background-color : #{neo(button-tertiary-badge-background-color)};
160
+ --button-tertiary-badge-color : #{neo(button-tertiary-badge-color)};
161
+ --button-tertiary-border-color : #{neo(button-tertiary-border-color)};
162
+ --button-tertiary-border-color-active : #{neo(button-tertiary-border-color-active)};
163
+ --button-tertiary-border-color-disabled : #{neo(button-tertiary-border-color-disabled)};
164
+ --button-tertiary-border-color-hover : #{neo(button-tertiary-border-color-hover)};
165
+ --button-tertiary-border-width : #{neo(button-tertiary-border-width)};
166
+ --button-tertiary-glyph-color : #{neo(button-tertiary-glyph-color)};
167
+ --button-tertiary-glyph-color-active : #{neo(button-tertiary-glyph-color-active)};
168
+ --button-tertiary-glyph-color-disabled : #{neo(button-tertiary-glyph-color-disabled)};
169
+ --button-tertiary-glyph-color-hover : #{neo(button-tertiary-glyph-color-hover)};
170
+ --button-tertiary-opacity-disabled : #{neo(button-tertiary-opacity-disabled)};
171
+ --button-tertiary-ripple-background-color : #{neo(button-tertiary-ripple-background-color)};
172
+ --button-tertiary-text-color : #{neo(button-tertiary-text-color)};
173
+ --button-tertiary-text-color-active : #{neo(button-tertiary-text-color-active)};
174
+ --button-tertiary-text-color-disabled : #{neo(button-tertiary-text-color-disabled)};
175
+ --button-tertiary-text-color-hover : #{neo(button-tertiary-text-color-hover)};
76
176
  }
77
177
  }
package/resources/scss/theme-light/button/Base.scss CHANGED
@@ -1,77 +1,177 @@
1
1
  $neoMap: map-merge($neoMap, (
2
- 'button-active-background-color' : #ddd,
3
- 'button-active-border-color' : #1c60a0,
4
- 'button-active-color' : #1c60a0,
5
- 'button-background-color' : #fff,
6
- 'button-background-color-disabled': #fff,
7
- 'button-background-image' : none,
8
- 'button-background-gradient-end' : #323536,
9
- 'button-background-gradient-start': #434749,
10
- 'button-badge-background-color' : #1c60a0,
11
- 'button-badge-color' : #fff,
12
- 'button-badge-margin-left' : -10px,
13
- 'button-badge-margin-top' : -10px,
14
- 'button-border-color' : #ddd,
15
- 'button-border-color-disabled' : #ddd,
16
- 'button-border-radius' : 3px,
17
- 'button-border-width' : 1px,
18
- 'button-glyph-color' : #1c60a0,
19
- 'button-glyph-color-disabled' : #1c60a0,
20
- 'button-hover-background-color' : #fff,
21
- 'button-hover-border-color' : #1c60a0,
22
- 'button-hover-color' : #bbb,
23
- 'button-margin' : 2px,
24
- 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
25
- 'button-outline-active' : none,
26
- 'button-padding' : 5px 12px 5px 12px,
27
- 'button-pressed-border-color' : #1c60a0,
28
- 'button-ripple-background-color' : lighten(#1c60a0, 50%),
29
- 'button-text-color' : #1c60a0,
30
- 'button-text-color-disabled' : #1c60a0,
31
- 'button-text-font-family' : #{neo(neo-font-family)},
32
- 'button-text-font-size' : 11px,
33
- 'button-text-font-weight' : 600,
34
- 'button-text-line-height' : 11px,
35
- 'button-text-transform' : uppercase,
36
- 'button-use-gradients' : false
2
+ 'button-background-color' : #fff,
3
+ 'button-background-color-active' : #ddd,
4
+ 'button-background-color-disabled' : #fff,
5
+ 'button-background-color-hover' : #fff,
6
+ 'button-background-image' : none,
7
+ 'button-background-gradient-end' : #323536,
8
+ 'button-background-gradient-start' : #434749,
9
+ 'button-badge-background-color' : #1c60a0,
10
+ 'button-badge-color' : #fff,
11
+ 'button-badge-margin-left' : -10px,
12
+ 'button-badge-margin-top' : -10px,
13
+ 'button-border-color' : #ddd,
14
+ 'button-border-color-active' : #1c60a0,
15
+ 'button-border-color-disabled' : #ddd,
16
+ 'button-border-color-hover' : #1c60a0,
17
+ 'button-border-color-pressed' : #1c60a0,
18
+ 'button-border-radius' : 3px,
19
+ 'button-border-width' : 1px,
20
+ 'button-glyph-color' : #1c60a0,
21
+ 'button-glyph-color-active' : #1c60a0,
22
+ 'button-glyph-color-disabled' : #1c60a0,
23
+ 'button-glyph-color-hover' : #1c60a0,
24
+ 'button-height' : inherit,
25
+ 'button-margin' : 2px,
26
+ 'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
27
+ 'button-outline-active' : none,
28
+ 'button-padding' : 5px 12px 5px 12px,
29
+ 'button-ripple-background-color' : lighten(#1c60a0, 50%),
30
+ 'button-text-color' : #1c60a0,
31
+ 'button-text-color-active' : #1c60a0,
32
+ 'button-text-color-disabled' : #1c60a0,
33
+ 'button-text-color-hover' : #bbb,
34
+ 'button-text-font-family' : #{neo(neo-font-family)},
35
+ 'button-text-font-size' : 11px,
36
+ 'button-text-font-weight' : 600,
37
+ 'button-text-line-height' : 11px,
38
+ 'button-text-transform' : uppercase,
39
+ 'button-use-gradients' : false,
40
+
41
+ // {module: Button, ui: 'secondary'}
42
+ 'button-secondary-background-color' : var(--button-text-color),
43
+ 'button-secondary-background-color-active' : #ddd,
44
+ 'button-secondary-background-color-disabled': inherit,
45
+ 'button-secondary-background-color-hover' : var(--button-text-color),
46
+ 'button-secondary-background-image' : none,
47
+ 'button-secondary-badge-background-color' : var(--button-badge-color),
48
+ 'button-secondary-badge-color' : var(--button-badge-background-color),
49
+ 'button-secondary-border-color' : var(--button-background-color),
50
+ 'button-secondary-border-color-active' : #ddd,
51
+ 'button-secondary-border-color-disabled' : inherit,
52
+ 'button-secondary-border-color-hover' : #1c60a0,
53
+ 'button-secondary-border-width' : var(--button-border-width),
54
+ 'button-secondary-glyph-color' : var(--button-background-color),
55
+ 'button-secondary-glyph-color-active' : var(--button-background-color),
56
+ 'button-secondary-glyph-color-disabled' : inherit,
57
+ 'button-secondary-glyph-color-hover' : var(--button-background-color),
58
+ 'button-secondary-opacity-disabled' : var(--neo-disabled-opacity),
59
+ 'button-secondary-ripple-background-color' : inherit,
60
+ 'button-secondary-text-color' : var(--button-background-color),
61
+ 'button-secondary-text-color-active' : var(--button-background-color),
62
+ 'button-secondary-text-color-disabled' : inherit,
63
+ 'button-secondary-text-color-hover' : var(--button-background-color),
64
+
65
+ // {module: Button, ui: 'tertiary'}
66
+ 'button-tertiary-background-color' : transparent,
67
+ 'button-tertiary-background-color-active' : #ddd,
68
+ 'button-tertiary-background-color-disabled' : inherit,
69
+ 'button-tertiary-background-color-hover' : var(--button-background-color-hover),
70
+ 'button-tertiary-background-image' : none,
71
+ 'button-tertiary-badge-background-color' : var(--button-badge-background-color),
72
+ 'button-tertiary-badge-color' : var(--button-badge-color),
73
+ 'button-tertiary-border-color' : var(--button-border-color),
74
+ 'button-tertiary-border-color-active' : #ddd,
75
+ 'button-tertiary-border-color-disabled' : inherit,
76
+ 'button-tertiary-border-color-hover' : #1c60a0,
77
+ 'button-tertiary-border-width' : 0,
78
+ 'button-tertiary-glyph-color' : var(--button-glyph-color),
79
+ 'button-tertiary-glyph-color-active' : var(--button-glyph-color),
80
+ 'button-tertiary-glyph-color-disabled' : inherit,
81
+ 'button-tertiary-glyph-color-hover' : var(--button-glyph-color),
82
+ 'button-tertiary-opacity-disabled' : var(--neo-disabled-opacity),
83
+ 'button-tertiary-ripple-background-color' : inherit,
84
+ 'button-tertiary-text-color' : var(--button-text-color),
85
+ 'button-tertiary-text-color-active' : var(--button-text-color),
86
+ 'button-tertiary-text-color-disabled' : inherit,
87
+ 'button-tertiary-text-color-hover' : var(--button-text-color)
37
88
  ));
38
89
 
39
90
  @if $useCssVars == true {
40
91
  :root .neo-theme-light { // .neo-button
41
- --button-active-background-color : #{neo(button-active-background-color)};
42
- --button-active-border-color : #{neo(button-active-border-color)};
43
- --button-active-color : #{neo(button-active-color)};
44
- --button-background-color : #{neo(button-background-color)};
45
- --button-background-color-disabled: #{neo(button-background-color-disabled)};
46
- --button-background-image : #{neo(button-background-image)};
47
- --button-background-gradient-end : #{neo(button-background-gradient-end)};
48
- --button-background-gradient-start: #{neo(button-background-gradient-start)};
49
- --button-badge-background-color : #{neo(button-badge-background-color)};
50
- --button-badge-color : #{neo(button-badge-color)};
51
- --button-badge-margin-left : #{neo(button-badge-margin-left)};
52
- --button-badge-margin-top : #{neo(button-badge-margin-top)};
53
- --button-border-color : #{neo(button-border-color)};
54
- --button-border-color-disabled : #{neo(button-border-color-disabled)};
55
- --button-border-radius : #{neo(button-border-radius)};
56
- --button-border-width : #{neo(button-border-width)};
57
- --button-glyph-color : #{neo(button-glyph-color)};
58
- --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
59
- --button-hover-background-color : #{neo(button-hover-background-color)};
60
- --button-hover-border-color : #{neo(button-hover-border-color)};
61
- --button-hover-color : #{neo(button-hover-color)};
62
- --button-margin : #{neo(button-margin)};
63
- --button-opacity-disabled : #{neo(button-opacity-disabled)};
64
- --button-outline-active : #{neo(button-outline-active)};
65
- --button-padding : #{neo(button-padding)};
66
- --button-pressed-border-color : #{neo(button-pressed-border-color)};
67
- --button-ripple-background-color : #{neo(button-ripple-background-color)};
68
- --button-text-color : #{neo(button-text-color)};
69
- --button-text-color-disabled : #{neo(button-text-color-disabled)};
70
- --button-text-font-family : #{neo(button-text-font-family)};
71
- --button-text-font-size : #{neo(button-text-font-size)};
72
- --button-text-font-weight : #{neo(button-text-font-weight)};
73
- --button-text-line-height : #{neo(button-text-line-height)};
74
- --button-text-transform : #{neo(button-text-transform)};
75
- --button-use-gradients : #{neo(button-use-gradients)};
92
+ --button-background-color : #{neo(button-background-color)};
93
+ --button-background-color-active : #{neo(button-background-color-active)};
94
+ --button-background-color-disabled : #{neo(button-background-color-disabled)};
95
+ --button-background-color-hover : #{neo(button-background-color-hover)};
96
+ --button-background-image : #{neo(button-background-image)};
97
+ --button-background-gradient-end : #{neo(button-background-gradient-end)};
98
+ --button-background-gradient-start : #{neo(button-background-gradient-start)};
99
+ --button-badge-background-color : #{neo(button-badge-background-color)};
100
+ --button-badge-color : #{neo(button-badge-color)};
101
+ --button-badge-margin-left : #{neo(button-badge-margin-left)};
102
+ --button-badge-margin-top : #{neo(button-badge-margin-top)};
103
+ --button-border-color : #{neo(button-border-color)};
104
+ --button-border-color-active : #{neo(button-border-color-active)};
105
+ --button-border-color-disabled : #{neo(button-border-color-disabled)};
106
+ --button-border-color-hover : #{neo(button-border-color-hover)};
107
+ --button-border-color-pressed : #{neo(button-border-color-pressed)};
108
+ --button-border-radius : #{neo(button-border-radius)};
109
+ --button-border-width : #{neo(button-border-width)};
110
+ --button-glyph-color : #{neo(button-glyph-color)};
111
+ --button-glyph-color-active : #{neo(button-glyph-color-active)};
112
+ --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
113
+ --button-glyph-color-hover : #{neo(button-glyph-color-hover)};
114
+ --button-height : #{neo(button-height)};
115
+ --button-margin : #{neo(button-margin)};
116
+ --button-opacity-disabled : #{neo(button-opacity-disabled)};
117
+ --button-outline-active : #{neo(button-outline-active)};
118
+ --button-padding : #{neo(button-padding)};
119
+ --button-ripple-background-color : #{neo(button-ripple-background-color)};
120
+ --button-text-color : #{neo(button-text-color)};
121
+ --button-text-color-active : #{neo(button-text-color-active)};
122
+ --button-text-color-disabled : #{neo(button-text-color-disabled)};
123
+ --button-text-color-hover : #{neo(button-text-color-hover)};
124
+ --button-text-font-family : #{neo(button-text-font-family)};
125
+ --button-text-font-size : #{neo(button-text-font-size)};
126
+ --button-text-font-weight : #{neo(button-text-font-weight)};
127
+ --button-text-line-height : #{neo(button-text-line-height)};
128
+ --button-text-transform : #{neo(button-text-transform)};
129
+ --button-use-gradients : #{neo(button-use-gradients)};
130
+
131
+ --button-secondary-background-color : #{neo(button-secondary-background-color)};
132
+ --button-secondary-background-color-active : #{neo(button-secondary-background-color-active)};
133
+ --button-secondary-background-color-disabled: #{neo(button-secondary-background-color-disabled)};
134
+ --button-secondary-background-color-hover : #{neo(button-secondary-background-color-hover)};
135
+ --button-secondary-background-image : #{neo(button-secondary-background-image)};
136
+ --button-secondary-badge-background-color : #{neo(button-secondary-badge-background-color)};
137
+ --button-secondary-badge-color : #{neo(button-secondary-badge-color)};
138
+ --button-secondary-border-color : #{neo(button-secondary-border-color)};
139
+ --button-secondary-border-color-active : #{neo(button-secondary-border-color-active)};
140
+ --button-secondary-border-color-disabled : #{neo(button-secondary-border-color-disabled)};
141
+ --button-secondary-border-color-hover : #{neo(button-secondary-border-color-hover)};
142
+ --button-secondary-border-width : #{neo(button-secondary-border-width)};
143
+ --button-secondary-glyph-color : #{neo(button-secondary-glyph-color)};
144
+ --button-secondary-glyph-color-active : #{neo(button-secondary-glyph-color-active)};
145
+ --button-secondary-glyph-color-disabled : #{neo(button-secondary-glyph-color-disabled)};
146
+ --button-secondary-glyph-color-hover : #{neo(button-secondary-glyph-color-hover)};
147
+ --button-secondary-opacity-disabled : #{neo(button-secondary-opacity-disabled)};
148
+ --button-secondary-ripple-background-color : #{neo(button-secondary-ripple-background-color)};
149
+ --button-secondary-text-color : #{neo(button-secondary-text-color)};
150
+ --button-secondary-text-color-active : #{neo(button-secondary-text-color-active)};
151
+ --button-secondary-text-color-disabled : #{neo(button-secondary-text-color-disabled)};
152
+ --button-secondary-text-color-hover : #{neo(button-secondary-text-color-hover)};
153
+
154
+ --button-tertiary-background-color : #{neo(button-tertiary-background-color)};
155
+ --button-tertiary-background-color-active : #{neo(button-tertiary-background-color-active)};
156
+ --button-tertiary-background-color-disabled : #{neo(button-tertiary-background-color-hover)};
157
+ --button-tertiary-background-color-hover : #{neo(button-tertiary-background-color-hover)};
158
+ --button-tertiary-background-image : #{neo(button-tertiary-background-image)};
159
+ --button-tertiary-badge-background-color : #{neo(button-tertiary-badge-background-color)};
160
+ --button-tertiary-badge-color : #{neo(button-tertiary-badge-color)};
161
+ --button-tertiary-border-color : #{neo(button-tertiary-border-color)};
162
+ --button-tertiary-border-color-active : #{neo(button-tertiary-border-color-active)};
163
+ --button-tertiary-border-color-disabled : #{neo(button-tertiary-border-color-disabled)};
164
+ --button-tertiary-border-color-hover : #{neo(button-tertiary-border-color-hover)};
165
+ --button-tertiary-border-width : #{neo(button-tertiary-border-width)};
166
+ --button-tertiary-glyph-color : #{neo(button-tertiary-glyph-color)};
167
+ --button-tertiary-glyph-color-active : #{neo(button-tertiary-glyph-color-active)};
168
+ --button-tertiary-glyph-color-disabled : #{neo(button-tertiary-glyph-color-disabled)};
169
+ --button-tertiary-glyph-color-hover : #{neo(button-tertiary-glyph-color-hover)};
170
+ --button-tertiary-opacity-disabled : #{neo(button-tertiary-opacity-disabled)};
171
+ --button-tertiary-ripple-background-color : #{neo(button-tertiary-ripple-background-color)};
172
+ --button-tertiary-text-color : #{neo(button-tertiary-text-color)};
173
+ --button-tertiary-text-color-active : #{neo(button-tertiary-text-color-active)};
174
+ --button-tertiary-text-color-disabled : #{neo(button-tertiary-text-color-disabled)};
175
+ --button-tertiary-text-color-hover : #{neo(button-tertiary-text-color-hover)};
76
176
  }
77
177
  }
package/src/DefaultConfig.mjs CHANGED
@@ -237,12 +237,12 @@ const DefaultConfig = {
237
237
  useVdomWorker: true,
238
238
  /**
239
239
  * buildScripts/injectPackageVersion.mjs will update this value
240
- * @default '5.1.2'
240
+ * @default '5.1.4'
241
241
  * @memberOf! module:Neo
242
242
  * @name config.version
243
243
  * @type String
244
244
  */
245
- version: '5.1.2'
245
+ version: '5.1.4'
246
246
  };
247
247
 
248
248
  Object.assign(DefaultConfig, {
package/src/draggable/DragZone.mjs CHANGED
@@ -189,9 +189,9 @@ class DragZone extends Base {
189
189
  component = Neo.getComponent(me.getDragElementRoot().id) || me.owner,
190
190
  rect = me.dragElementRect,
191
191
  vdom = me.dragProxyConfig?.vdom,
192
- clone = VDomUtil.clone(vdom ? vdom : me.dragElement);
192
+ clone = VDomUtil.clone(vdom ? vdom : me.dragElement),
193
193
 
194
- const config = {
194
+ config = {
195
195
  module : DragProxyComponent,
196
196
  appName : me.appName,
197
197
  moveInMainThread: me.moveInMainThread,
package/src/form/Container.mjs CHANGED
@@ -36,12 +36,12 @@ class Container extends BaseContainer {
36
36
  * @returns {Neo.form.field.Base|null} fields
37
37
  */
38
38
  getField(name) {
39
- let fields = ComponentManager.getChildren(this),
39
+ let fields = ComponentManager.getChildComponents(this),
40
40
  field;
41
41
 
42
42
  for (field of fields) {
43
43
  if (field instanceof BaseField) {
44
- if (field.id === name || field.name === name) {
44
+ if (field.name === name || field.id === name) {
45
45
  return field;
46
46
  }
47
47
  }
@@ -56,7 +56,7 @@ class Container extends BaseContainer {
56
56
  getFields() {
57
57
  let fields = [];
58
58
 
59
- ComponentManager.getChildren(this).forEach(item => {
59
+ ComponentManager.getChildComponents(this).forEach(item => {
60
60
  item instanceof BaseField && fields.push(item);
61
61
  });
62
62
 
package/src/form/field/Select.mjs CHANGED
@@ -414,7 +414,7 @@ class Select extends Picker {
414
414
  * @protected
415
415
  */
416
416
  onKeyDownEnter(data) {
417
- let me = this;
417
+ let me = this;
418
418
 
419
419
  if (me.pickerIsMounted) {
420
420
  me.selectListItem();
package/src/form/field/Text.mjs CHANGED
@@ -894,17 +894,16 @@ class Text extends Base {
894
894
  * @returns {Object|null}
895
895
  */
896
896
  getCenterBorderEl() {
897
- let el = VDomUtil.findVdomChild(this.vdom, {cls: 'neo-center-border'});
898
- return el?.vdom;
897
+ return VDomUtil.findVdomChild(this.vdom, {cls: 'neo-center-border'})?.vdom || null;
899
898
  }
900
899
 
901
900
  /**
902
901
  * @returns {Object|null}
903
902
  */
904
903
  getInputEl() {
905
- let el = VDomUtil.findVdomChild(this.vdom, {flag: 'neo-real-input'});
906
- return el?.vdom;
904
+ return VDomUtil.findVdomChild(this.vdom, {flag: 'neo-real-input'})?.vdom || null;
907
905
  }
906
+
908
907
  /**
909
908
  * @returns {String}
910
909
  */
@@ -942,8 +941,7 @@ class Text extends Base {
942
941
  * @returns {Object|null}
943
942
  */
944
943
  getLabelEl() {
945
- let el = VDomUtil.findVdomChild(this.vdom, {tag: 'label'});
946
- return el?.vdom;
944
+ return VDomUtil.findVdomChild(this.vdom, {tag: 'label'})?.vdom || null;
947
945
  }
948
946
 
949
947
  /**
package/src/manager/Component.mjs CHANGED
@@ -116,6 +116,28 @@ class Component extends Base {
116
116
  return null;
117
117
  }
118
118
 
119
+ /**
120
+ * Returns all child components which are recursively matched via their parentId
121
+ * @param {Neo.component.Base} component
122
+ * @returns {Neo.component.Base[]} childComponents
123
+ */
124
+ getChildComponents(component) {
125
+ let me = this,
126
+ directChildren = me.find('parentId', component.id) || [],
127
+ components = [],
128
+ childComponents;
129
+
130
+ directChildren.forEach(item => {
131
+ components.push(item);
132
+
133
+ childComponents = me.getChildComponents(item);
134
+
135
+ childComponents && components.push(...childComponents);
136
+ });
137
+
138
+ return components;
139
+ }
140
+
119
141
  /**
120
142
  * todo: replace all calls of this method to calls using the util.VNode class
121
143
  * Get the ids of all child nodes of the given vnode