neo.mjs 5.1.9 → 5.1.10

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 (18) hide show
  1. package/apps/ServiceWorker.mjs +2 -2
  2. package/buildScripts/buildAll.mjs +27 -9
  3. package/buildScripts/createApp.mjs +5 -3
  4. package/buildScripts/webpack/buildMyApps.mjs +7 -3
  5. package/buildScripts/webpack/buildThreads.mjs +28 -7
  6. package/examples/ServiceWorker.mjs +2 -2
  7. package/package.json +3 -3
  8. package/resources/scss/src/button/Base.scss +74 -13
  9. package/resources/scss/src/dialog/Base.scss +1 -1
  10. package/resources/scss/src/form/field/CheckBox.scss +1 -1
  11. package/resources/scss/src/tab/header/Button.scss +40 -23
  12. package/resources/scss/src/tab/header/Toolbar.scss +50 -27
  13. package/resources/scss/theme-dark/button/Base.scss +93 -41
  14. package/resources/scss/theme-dark/tab/header/Button.scss +18 -2
  15. package/resources/scss/theme-light/button/Base.scss +99 -48
  16. package/resources/scss/theme-light/tab/header/Button.scss +22 -6
  17. package/src/DefaultConfig.mjs +2 -2
  18. package/src/calendar/view/month/Component.mjs +9 -6
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.9'
23
+ * @member {String} version='5.1.10'
24
24
  */
25
- version: '5.1.9'
25
+ version: '5.1.10'
26
26
  }
27
27
 
28
28
  /**
package/buildScripts/buildAll.mjs CHANGED
@@ -119,28 +119,46 @@ if (programOpts.info) {
119
119
  insideNeo = !!programOpts.framework || false,
120
120
  cpArgs = ['-e', env],
121
121
  startDate = new Date();
122
+ let childProcess,
123
+ status = 0;
122
124
 
123
125
  programOpts.noquestions && cpArgs.push('-n');
124
126
  insideNeo && cpArgs.push('-f');
125
127
 
126
- npminstall === 'yes' && spawnSync(npmCmd, ['i'], cpOpts);
127
- themes === 'yes' && spawnSync('node', [`${neoPath}/buildScripts/buildThemes.mjs`].concat(cpArgs), cpOpts);
128
- threads === 'yes' && spawnSync('node', [`${webpackPath}/buildThreads.mjs`] .concat(cpArgs), cpOpts);
129
- parsedocs === 'yes' && spawnSync(npmCmd, ['run', 'generate-docs-json'], cpOpts);
128
+ if (npminstall === 'yes') {
129
+ childProcess = spawnSync(npmCmd, ['i'], cpOpts);
130
+ status = status | childProcess.status;
131
+ }
132
+ if (themes === 'yes') {
133
+ childProcess = spawnSync('node', [`${neoPath}/buildScripts/buildThemes.mjs`].concat(cpArgs), cpOpts);
134
+ status = status | childProcess.status;
135
+ }
136
+ if (threads === 'yes') {
137
+ childProcess = spawnSync('node', [`${webpackPath}/buildThreads.mjs`].concat(cpArgs), cpOpts);
138
+ status = status | childProcess.status;
139
+ }
140
+ if (parsedocs === 'yes') {
141
+ childProcess = spawnSync(npmCmd, ['run', 'generate-docs-json'], cpOpts);
142
+ status = status | childProcess.status;
143
+ };
130
144
 
131
145
  if (env === 'all' || env === 'dev') {
132
- spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/output') } -t ${path.resolve(cwd, 'dist/development/docs/output')}`], cpOpts);
133
- spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/resources')} -t ${path.resolve(cwd, 'dist/development/docs/resources')}`], cpOpts);
146
+ childProcess = spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/output') } -t ${path.resolve(cwd, 'dist/development/docs/output')}`], cpOpts);
147
+ status = status | childProcess.status;
148
+ childProcess = spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/resources')} -t ${path.resolve(cwd, 'dist/development/docs/resources')}`], cpOpts);
149
+ status = status | childProcess.status;
134
150
  }
135
151
 
136
152
  if (env === 'all' || env === 'prod') {
137
- spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/output') } -t ${path.resolve(cwd, 'dist/production/docs/output')}`], cpOpts);
138
- spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/resources')} -t ${path.resolve(cwd, 'dist/production/docs/resources')}`], cpOpts);
153
+ childProcess = spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/output') } -t ${path.resolve(cwd, 'dist/production/docs/output')}`], cpOpts);
154
+ status = status | childProcess.status;
155
+ childProcess = spawnSync('node', [`${neoPath}/buildScripts/copyFolder.mjs -s ${path.resolve(cwd, 'docs/resources')} -t ${path.resolve(cwd, 'dist/production/docs/resources')}`], cpOpts);
156
+ status = status | childProcess.status;
139
157
  }
140
158
 
141
159
  const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
142
160
  console.log(`\nTotal time for ${programName}: ${processTime}s`);
143
161
 
144
- process.exit(0);
162
+ process.exit(status);
145
163
  });
146
164
  }
package/buildScripts/createApp.mjs CHANGED
@@ -126,7 +126,8 @@ if (programOpts.info) {
126
126
  appPath = 'apps/' + lAppName + '/',
127
127
  dir = 'apps/' + lAppName,
128
128
  folder = path.resolve(cwd, dir),
129
- startDate = new Date();
129
+ startDate = new Date(),
130
+ status = 0;
130
131
 
131
132
  if (!Array.isArray(themes)) {
132
133
  themes = [themes];
@@ -296,19 +297,20 @@ if (programOpts.info) {
296
297
  fs.writeFileSync(appJsonPath, JSON.stringify(appJson, null, 4));
297
298
 
298
299
  if (mainThreadAddons.includes('HighlightJS')) {
299
- spawnSync('node', [
300
+ const childProcess = spawnSync('node', [
300
301
  './buildScripts/copyFolder.mjs',
301
302
  '-s',
302
303
  path.resolve(neoPath, 'docs/resources'),
303
304
  '-t',
304
305
  path.resolve(folder, 'resources'),
305
306
  ], { env: process.env, cwd: process.cwd(), stdio: 'inherit' });
307
+ status = childProcess.status;
306
308
  }
307
309
 
308
310
  const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
309
311
  console.log(`\nTotal time for ${programName}: ${processTime}s`);
310
312
 
311
- process.exit();
313
+ process.exit(status);
312
314
  });
313
315
  });
314
316
  }
package/buildScripts/webpack/buildMyApps.mjs CHANGED
@@ -100,6 +100,8 @@ if (programOpts.info) {
100
100
  env = answers.env || programOpts.env || ['all'],
101
101
  insideNeo = !!programOpts.framework || false,
102
102
  startDate = new Date();
103
+ let childProcess,
104
+ status = 0;
103
105
 
104
106
  if (os.platform().startsWith('win')) {
105
107
  webpack = path.resolve(webpack).replace(/\\/g,'/');
@@ -108,18 +110,20 @@ if (programOpts.info) {
108
110
  // dist/development
109
111
  if (env === 'all' || env === 'dev') {
110
112
  console.log(chalk.blue(`${programName} starting dist/development`));
111
- spawnSync(webpack, ['--config', `${webpackPath}/development/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
113
+ childProcess = spawnSync(webpack, ['--config', `${webpackPath}/development/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
114
+ status = status | childProcess.status;
112
115
  }
113
116
 
114
117
  // dist/production
115
118
  if (env === 'all' || env === 'prod') {
116
119
  console.log(chalk.blue(`${programName} starting dist/production`));
117
- spawnSync(webpack, ['--config', `${webpackPath}/production/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
120
+ childProcess = spawnSync(webpack, ['--config', `${webpackPath}/production/webpack.config.myapps.mjs`, `--env apps=${apps}`, `--env insideNeo=${insideNeo}`], cpOpts);
121
+ status = status | childProcess.status;
118
122
  }
119
123
 
120
124
  const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
121
125
  console.log(`\nTotal time for ${programName}: ${processTime}s`);
122
126
 
123
- process.exit();
127
+ process.exit(status);
124
128
  });
125
129
  }
package/buildScripts/webpack/buildThreads.mjs CHANGED
@@ -82,18 +82,39 @@ if (programOpts.info) {
82
82
  threads = answers.threads || programOpts.threads || 'all',
83
83
  insideNeo = programOpts.framework || false,
84
84
  startDate = new Date();
85
+ let status = 0;
85
86
 
86
87
  if (path.sep === '\\') {
87
88
  webpack = path.resolve(webpack).replace(/\\/g,'/');
88
89
  }
89
90
 
90
91
  function parseThreads(tPath) {
91
- (threads === 'all' || threads === 'main') && spawnSync(webpack, ['--config', `${tPath}.main.mjs`], cpOpts);
92
- (threads === 'all' || threads === 'app') && spawnSync(webpack, ['--config', `${tPath}.appworker.mjs`, `--env insideNeo=${insideNeo}`], cpOpts);
93
- (threads === 'all' || threads === 'canvas') && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=canvas`], cpOpts);
94
- (threads === 'all' || threads === 'data') && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=data`], cpOpts);
95
- (threads === 'all' || threads === 'service') && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=service`], cpOpts);
96
- (threads === 'all' || threads === 'vdom') && spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=vdom`], cpOpts);
92
+ let childProcess;
93
+
94
+ if (threads === 'all' || threads === 'main') {
95
+ childProcess = spawnSync(webpack, ['--config', `${tPath}.main.mjs`], cpOpts);
96
+ status = status | childProcess.status;
97
+ }
98
+ if (threads === 'all' || threads === 'app') {
99
+ childProcess = spawnSync(webpack, ['--config', `${tPath}.appworker.mjs`, `--env insideNeo=${insideNeo}`], cpOpts);
100
+ status = status | childProcess.status;
101
+ }
102
+ if (threads === 'all' || threads === 'canvas') {
103
+ childProcess = spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=canvas`], cpOpts);
104
+ status = status | childProcess.status;
105
+ }
106
+ if (threads === 'all' || threads === 'data') {
107
+ childProcess = spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=data`], cpOpts);
108
+ status = status | childProcess.status;
109
+ }
110
+ if (threads === 'all' || threads === 'service') {
111
+ childProcess = spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=service`], cpOpts);
112
+ status = status | childProcess.status;
113
+ }
114
+ if (threads === 'all' || threads === 'vdom') {
115
+ childProcess = spawnSync(webpack, ['--config', `${tPath}.worker.mjs`, `--env insideNeo=${insideNeo} worker=vdom`], cpOpts);
116
+ status = status | childProcess.status;
117
+ }
97
118
  }
98
119
 
99
120
  // dist/development
@@ -111,6 +132,6 @@ if (programOpts.info) {
111
132
  const processTime = (Math.round((new Date - startDate) * 100) / 100000).toFixed(2);
112
133
  console.log(`\nTotal time for ${programName}: ${processTime}s`);
113
134
 
114
- process.exit();
135
+ process.exit(status);
115
136
  });
116
137
  }
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.9'
23
+ * @member {String} version='5.1.10'
24
24
  */
25
- version: '5.1.9'
25
+ version: '5.1.10'
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.9",
3
+ "version": "5.1.10",
4
4
  "description": "The webworkers driven UI framework",
5
5
  "type": "module",
6
6
  "repository": {
@@ -48,7 +48,7 @@
48
48
  "chalk": "^5.2.0",
49
49
  "clean-webpack-plugin": "^4.0.0",
50
50
  "commander": "^10.0.0",
51
- "cssnano": "^5.1.14",
51
+ "cssnano": "^5.1.15",
52
52
  "envinfo": "^7.8.1",
53
53
  "fs-extra": "^11.1.0",
54
54
  "highlightjs-line-numbers.js": "^2.8.0",
@@ -56,7 +56,7 @@
56
56
  "neo-jsdoc": "^1.0.1",
57
57
  "neo-jsdoc-x": "^1.0.5",
58
58
  "postcss": "^8.4.21",
59
- "sass": "^1.58.0",
59
+ "sass": "^1.58.1",
60
60
  "webpack": "^5.75.0",
61
61
  "webpack-cli": "^5.0.1",
62
62
  "webpack-dev-server": "4.11.1",
package/resources/scss/src/button/Base.scss CHANGED
@@ -13,7 +13,7 @@
13
13
  align-items : center;
14
14
  background-color : v(button-background-color);
15
15
  background-image : v(button-background-image);
16
- border : v(button-border-width) solid v(button-border-color);
16
+ border : v(button-border);
17
17
  border-radius : v(button-border-radius);
18
18
  box-sizing : border-box;
19
19
  cursor : pointer;
@@ -100,7 +100,7 @@
100
100
  &:active {
101
101
  background-color: v(button-background-color-active) !important;
102
102
  background-image: none !important;
103
- border-color : v(button-border-color-active);
103
+ border : v(button-border-active);
104
104
 
105
105
  .neo-button-glyph {
106
106
  color: v(button-glyph-color-active);
@@ -118,7 +118,7 @@
118
118
  &:hover {
119
119
  background-color: v(button-background-color-hover);
120
120
  background-image: none !important;
121
- border-color : v(button-border-color-hover);
121
+ border : v(button-border-hover);
122
122
 
123
123
  .neo-button-glyph {
124
124
  color: v(button-glyph-color-hover);
@@ -153,10 +153,63 @@
153
153
  }
154
154
  }
155
155
 
156
+ &.neo-button-ghost {
157
+ background-color: v(button-ghost-background-color);
158
+ background-image: v(button-ghost-background-image);
159
+ border : v(button-ghost-border);
160
+
161
+ .neo-button-badge {
162
+ background-color: v(button-ghost-badge-background-color);
163
+ color : v(button-ghost-badge-color);
164
+ }
165
+
166
+ .neo-button-glyph {
167
+ color: v(button-ghost-glyph-color);
168
+ }
169
+
170
+ .neo-button-ripple {
171
+ background-color: v(button-ghost-ripple-background-color);
172
+ }
173
+
174
+ .neo-button-text {
175
+ color: v(button-ghost-text-color);
176
+ }
177
+
178
+ &:active {
179
+ background-color: v(button-ghost-background-color-active) !important;
180
+ border : v(button-ghost-border-active);
181
+
182
+ .neo-button-glyph {
183
+ color: v(button-ghost-glyph-color-active);
184
+ }
185
+
186
+ .neo-button-text {
187
+ color: v(button-ghost-text-color-active);
188
+ }
189
+ }
190
+
191
+ &:hover {
192
+ background-color: v(button-ghost-background-color-hover);
193
+ border : v(button-ghost-border-hover);
194
+
195
+ .neo-button-glyph {
196
+ color: v(button-ghost-glyph-color-hover);
197
+ }
198
+
199
+ .neo-button-text {
200
+ color: v(button-ghost-text-color-hover);
201
+ }
202
+ }
203
+
204
+ &.pressed {
205
+ border: v(button-ghost-border-pressed);
206
+ }
207
+ }
208
+
156
209
  &.neo-button-secondary {
157
210
  background-color: v(button-secondary-background-color);
158
211
  background-image: v(button-secondary-background-image);
159
- border : v(button-secondary-border-width) solid v(button-secondary-border-color);
212
+ border : v(button-secondary-border);
160
213
 
161
214
  .neo-button-badge {
162
215
  background-color: v(button-secondary-badge-background-color);
@@ -177,7 +230,7 @@
177
230
 
178
231
  &:active {
179
232
  background-color: v(button-secondary-background-color-active) !important;
180
- border-color : v(button-secondary-border-color-active);
233
+ border : v(button-secondary-border-active);
181
234
 
182
235
  .neo-button-glyph {
183
236
  color: v(button-secondary-glyph-color-active);
@@ -190,7 +243,7 @@
190
243
 
191
244
  &:hover {
192
245
  background-color: v(button-secondary-background-color-hover);
193
- border-color : v(button-secondary-border-color-hover);
246
+ border : v(button-secondary-border-hover);
194
247
 
195
248
  .neo-button-glyph {
196
249
  color: v(button-secondary-glyph-color-hover);
@@ -200,12 +253,16 @@
200
253
  color: v(button-secondary-text-color-hover);
201
254
  }
202
255
  }
256
+
257
+ &.pressed {
258
+ border: v(button-secondary-border-pressed);
259
+ }
203
260
  }
204
261
 
205
262
  &.neo-button-tertiary {
206
263
  background-color: v(button-tertiary-background-color);
207
264
  background-image: v(button-tertiary-background-image);
208
- border : v(button-tertiary-border-width) solid v(button-tertiary-border-color);
265
+ border : v(button-tertiary-border);
209
266
 
210
267
  .neo-button-badge {
211
268
  background-color: v(button-tertiary-badge-background-color);
@@ -226,7 +283,7 @@
226
283
 
227
284
  &:active {
228
285
  background-color: v(button-tertiary-background-color-active) !important;
229
- border-color : v(button-tertiary-border-color-active);
286
+ border : v(button-tertiary-border-active);
230
287
 
231
288
  .neo-button-glyph {
232
289
  color: v(button-tertiary-glyph-color-active);
@@ -239,7 +296,7 @@
239
296
 
240
297
  &:hover {
241
298
  background-color: v(button-tertiary-background-color-hover);
242
- border-color : v(button-tertiary-border-color-hover);
299
+ border : v(button-tertiary-border-hover);
243
300
 
244
301
  .neo-button-glyph {
245
302
  color: v(button-tertiary-glyph-color-hover);
@@ -249,6 +306,10 @@
249
306
  color: v(button-tertiary-text-color-hover);
250
307
  }
251
308
  }
309
+
310
+ &.pressed {
311
+ border: v(button-tertiary-border-pressed);
312
+ }
252
313
  }
253
314
 
254
315
  &.no-text {
@@ -258,7 +319,7 @@
258
319
  }
259
320
 
260
321
  &.pressed {
261
- border-color: v(button-border-color-pressed);
322
+ border: v(button-border-pressed);
262
323
  }
263
324
  }
264
325
 
@@ -266,7 +327,7 @@
266
327
  .neo-button,
267
328
  &.neo-button {
268
329
  background-color: v(button-background-color-disabled);
269
- border-color : v(button-border-color-disabled);
330
+ border : v(button-border-disabled);
270
331
  cursor : default;
271
332
  opacity : v(button-opacity-disabled);
272
333
 
@@ -280,7 +341,7 @@
280
341
 
281
342
  &.neo-button-secondary {
282
343
  background-color: v(button-secondary-background-color-disabled);
283
- border-color : v(button-secondary-border-color-disabled);
344
+ border : v(button-secondary-border-disabled);
284
345
  opacity : v(button-secondary-opacity-disabled);
285
346
 
286
347
  .neo-button-glyph {
@@ -294,7 +355,7 @@
294
355
 
295
356
  &.neo-button-tertiary {
296
357
  background-color: v(button-tertiary-background-color-disabled);
297
- border-color : v(button-tertiary-border-color-disabled);
358
+ border : v(button-tertiary-border-disabled);
298
359
  opacity : v(button-tertiary-opacity-disabled);
299
360
 
300
361
  .neo-button-glyph {
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-border-color-active);
5
+ border : v(button-border-active);
6
6
 
7
7
  position: fixed;
8
8
  z-index : 1000;
package/resources/scss/src/form/field/CheckBox.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .neo-checkboxfield {
2
2
  .neo-checkbox-input {
3
- display: none;
3
+ width: 0; // using display: none would break the keynav
4
4
 
5
5
  &:checked {
6
6
  +.neo-checkbox-icon {
package/resources/scss/src/tab/header/Button.scss CHANGED
@@ -4,32 +4,61 @@
4
4
  100% {background-color: v(tab-indicator-background-color-active);}
5
5
  }
6
6
 
7
- .neo-tab-header-button {
7
+ .neo-tab-header-button.neo-button {
8
+ align-self : end;
9
+ background-color: v(tab-button-background-color);
8
10
  background-image: v(tab-button-background-image);
9
11
  border-radius : v(tab-button-border-radius);
10
12
  border-width : 0;
11
- height : 25px;
13
+ height : v(tab-button-height);
12
14
  margin : 0;
13
- padding : 7px 12px 6px 12px;
15
+ padding : v(tab-button-padding);
14
16
  text-transform : v(tab-button-text-transform);
15
17
 
18
+ .neo-button-badge {
19
+ font-size : 10px;
20
+ text-transform: none;
21
+ }
22
+
23
+ .neo-button-glyph {
24
+ color: v(tab-button-glyph-color);
25
+ }
26
+
27
+ .neo-button-text {
28
+ color: v(tab-button-text-color);
29
+ }
30
+
31
+ .neo-tab-button-indicator {
32
+ background-color: transparent;
33
+ bottom : calcVar(tab-strip-height, '*', -1);
34
+ height : v(tab-strip-height);
35
+ pointer-events : none;
36
+ position : absolute;
37
+ width : 100%;
38
+ z-index : 2;
39
+ }
40
+
16
41
  &:active {
42
+ background-color: v(tab-button-background-color-active) !important;
43
+
17
44
  .neo-button-glyph {
18
45
  color: v(tab-button-glyph-color-active);
19
46
  }
20
47
  }
21
48
 
22
49
  &:hover {
50
+ background-color: v(tab-button-background-color-hover);
23
51
  background-image: none;
24
52
 
25
53
  .neo-button-glyph {
26
- color: v(tab-button-glyph-color-over);
54
+ color: v(tab-button-glyph-color-hover);
27
55
  }
28
56
  }
29
57
 
30
58
  &.pressed {
31
59
  background-image: v(tab-button-background-image-pressed) !important;
32
60
  cursor : default;
61
+ height : v(tab-button-height-pressed);
33
62
 
34
63
  .neo-button-glyph {
35
64
  color: v(tab-button-glyph-color-pressed);
@@ -42,26 +71,14 @@
42
71
  }
43
72
  }
44
73
 
45
- .neo-button-badge {
46
- font-size : 10px;
47
- text-transform: none;
48
- }
49
-
50
- .neo-button-glyph {
51
- color: v(tab-button-glyph-color);
52
- }
53
-
54
- .neo-button-text {
55
- color: v(tab-button-text-color);
74
+ &:not(:last-child) {
75
+ margin-right: v(tab-button-gap);
56
76
  }
77
+ }
57
78
 
58
- .neo-tab-button-indicator {
59
- background-color: transparent;
60
- bottom : calcVar(tab-strip-height, '*', -1);
61
- height : v(tab-strip-height);
62
- pointer-events : none;
63
- position : absolute;
64
- width : 100%;
65
- z-index : 2;
79
+ .neo-disabled {
80
+ .neo-tab-header-button.neo-button,
81
+ &.neo-tab-header-button.neo-button {
82
+ background-color: v(tab-button-background-color-disabled);
66
83
  }
67
84
  }
package/resources/scss/src/tab/header/Toolbar.scss CHANGED
@@ -1,65 +1,88 @@
1
1
  .neo-tab-header-toolbar {
2
2
  background-color: transparent;
3
+ height : v(tab-button-height-pressed);
3
4
  padding : 0;
4
5
 
5
6
  &.neo-dock-bottom {
6
- .neo-tab-header-button {
7
+ .neo-tab-header-button.neo-button {
8
+ align-self : start;
7
9
  background-image: v(tab-button-background-image-bottom);
8
10
 
11
+ .neo-tab-button-indicator {
12
+ bottom: unset;
13
+ height: v(tab-strip-height);
14
+ top : calcVar(tab-strip-height, '*', -1);
15
+ width : 100%;
16
+ }
17
+
9
18
  &.pressed {
10
19
  background-image: v(tab-button-background-image-pressed-bottom) !important;
11
20
  }
12
21
  }
13
-
14
- .neo-tab-button-indicator {
15
- bottom: unset;
16
- height: v(tab-strip-height);
17
- top : calcVar(tab-strip-height, '*', -1);
18
- width : 100%;
19
- }
20
22
  }
21
23
 
22
24
  &.neo-dock-left {
23
- .neo-tab-header-button {
25
+ height: unset;
26
+ width : v(tab-button-height-pressed);
27
+
28
+ .neo-tab-header-button.neo-button {
24
29
  background-image: v(tab-button-background-image-left);
25
30
  height : unset;
26
- width : 25px;
31
+ width : v(tab-button-height);
32
+
33
+ .neo-tab-button-indicator {
34
+ bottom: unset;
35
+ height: 100%;
36
+ right : calcVar(tab-strip-height, '*', -1);
37
+ width : v(tab-strip-height);
38
+ }
27
39
 
28
40
  &.pressed {
29
41
  background-image: v(tab-button-background-image-pressed-left) !important;
42
+ width : v(tab-button-height-pressed);
30
43
  }
31
- }
32
44
 
33
- .neo-tab-button-indicator {
34
- bottom: unset;
35
- height: 100%;
36
- right : calcVar(tab-strip-height, '*', -1);
37
- width : v(tab-strip-height);
45
+ &:not(:last-child) {
46
+ margin-right: unset;
47
+ margin-top : v(tab-button-gap);
48
+ }
38
49
  }
39
50
  }
40
51
 
41
52
  &.neo-dock-right {
42
- .neo-tab-header-button {
53
+ height: unset;
54
+ width : v(tab-button-height-pressed);
55
+
56
+ .neo-tab-header-button.neo-button {
57
+ align-self : start;
43
58
  background-image: v(tab-button-background-image-right);
44
- height: unset;
45
- width : 25px;
59
+ height : unset;
60
+ width : v(tab-button-height);
61
+
62
+ .neo-tab-button-indicator {
63
+ bottom: unset;
64
+ height: 100%;
65
+ left : calcVar(tab-strip-height, '*', -1);
66
+ width : v(tab-strip-height);
67
+ }
46
68
 
47
69
  &.pressed {
48
70
  background-image: v(tab-button-background-image-pressed-right) !important;
71
+ width : v(tab-button-height-pressed);
49
72
  }
50
- }
51
73
 
52
- .neo-tab-button-indicator {
53
- bottom: unset;
54
- height: 100%;
55
- left : calcVar(tab-strip-height, '*', -1);
56
- width : v(tab-strip-height);
74
+ &:not(:last-child) {
75
+ margin-bottom: v(tab-button-gap);
76
+ margin-right : unset;
77
+ }
57
78
  }
58
79
  }
59
80
 
60
81
  &.neo-no-animation {
61
- .neo-tab-button-indicator {
62
- animation-duration: 0ms !important;
82
+ .neo-tab-header-button.neo-button {
83
+ .neo-tab-button-indicator {
84
+ animation-duration: 0ms !important;
85
+ }
63
86
  }
64
87
  }
65
88
  }
package/resources/scss/theme-dark/button/Base.scss CHANGED
@@ -1,7 +1,13 @@
1
+ $background-color: #3c3f41;
2
+ $border-color : #2b2b2b;
3
+ $border-style : solid;
4
+ $border-width : 1px;
5
+ $text-color : #bbb;
6
+
1
7
  $neoMap: map-merge($neoMap, (
2
- 'button-background-color' : #3c3f41,
8
+ 'button-background-color' : $background-color,
3
9
  'button-background-color-active' : #373a3c,
4
- 'button-background-color-disabled' : #3c3f41,
10
+ 'button-background-color-disabled' : $background-color,
5
11
  'button-background-color-hover' : #3a3c3e,
6
12
  'button-background-image' : linear-gradient(#434749, #323536),
7
13
  'button-background-gradient-end' : #323536,
@@ -10,27 +16,27 @@ $neoMap: map-merge($neoMap, (
10
16
  'button-badge-color' : #282828,
11
17
  'button-badge-margin-left' : -10px,
12
18
  '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,
19
+ 'button-border' : 1px $border-style $border-color,
20
+ 'button-border-active' : 1px $border-style #282828,
21
+ 'button-border-disabled' : 1px $border-style $border-color,
22
+ 'button-border-hover' : 1px $border-style #292929,
23
+ 'button-border-pressed' : 1px $border-style #5d83a7,
18
24
  'button-border-radius' : 0,
19
25
  '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,
26
+ 'button-glyph-color' : $text-color,
27
+ 'button-glyph-color-active' : $text-color,
28
+ 'button-glyph-color-disabled' : $text-color,
29
+ 'button-glyph-color-hover' : $text-color,
24
30
  'button-height' : inherit,
25
31
  'button-margin' : 2px,
26
32
  'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
27
33
  'button-outline-active' : none,
28
34
  'button-padding' : 5px 12px 5px 12px,
29
35
  '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,
36
+ 'button-text-color' : $text-color,
37
+ 'button-text-color-active' : $text-color,
38
+ 'button-text-color-disabled' : $text-color,
39
+ 'button-text-color-hover' : $text-color,
34
40
  'button-text-font-family' : #{neo(neo-font-family)},
35
41
  'button-text-font-size' : 11px,
36
42
  'button-text-font-weight' : 600,
@@ -38,6 +44,30 @@ $neoMap: map-merge($neoMap, (
38
44
  'button-text-transform' : none,
39
45
  'button-use-gradients' : true,
40
46
 
47
+ // {module: Button, ui: 'ghost'}
48
+ 'button-ghost-background-color' : var(--button-text-color),
49
+ 'button-ghost-background-color-active' : #373a3c,
50
+ 'button-ghost-background-color-disabled' : inherit,
51
+ 'button-ghost-background-color-hover' : var(--button-text-color),
52
+ 'button-ghost-background-image' : none,
53
+ 'button-ghost-badge-background-color' : var(--button-badge-color),
54
+ 'button-ghost-badge-color' : var(--button-badge-background-color),
55
+ 'button-ghost-border' : 1px $border-style var(--button-background-color),
56
+ 'button-ghost-border-active' : 1px $border-style #282828,
57
+ 'button-ghost-border-disabled' : inherit,
58
+ 'button-ghost-border-hover' : 1px $border-style #282828,
59
+ 'button-ghost-border-pressed' : 1px $border-style #5d83a7,
60
+ 'button-ghost-glyph-color' : var(--button-background-color),
61
+ 'button-ghost-glyph-color-active' : var(--button-background-color),
62
+ 'button-ghost-glyph-color-disabled' : inherit,
63
+ 'button-ghost-glyph-color-hover' : var(--button-background-color),
64
+ 'button-ghost-opacity-disabled' : var(--neo-disabled-opacity),
65
+ 'button-ghost-ripple-background-color' : inherit,
66
+ 'button-ghost-text-color' : var(--button-background-color),
67
+ 'button-ghost-text-color-active' : var(--button-background-color),
68
+ 'button-ghost-text-color-disabled' : inherit,
69
+ 'button-ghost-text-color-hover' : var(--button-background-color),
70
+
41
71
  // {module: Button, ui: 'secondary'}
42
72
  'button-secondary-background-color' : var(--button-text-color),
43
73
  'button-secondary-background-color-active' : #373a3c,
@@ -46,11 +76,11 @@ $neoMap: map-merge($neoMap, (
46
76
  'button-secondary-background-image' : none,
47
77
  'button-secondary-badge-background-color' : var(--button-badge-color),
48
78
  '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),
79
+ 'button-secondary-border' : 1px $border-style var(--button-background-color),
80
+ 'button-secondary-border-active' : 1px $border-style #282828,
81
+ 'button-secondary-border-disabled' : inherit,
82
+ 'button-secondary-border-hover' : 1px $border-style #292929,
83
+ 'button-secondary-border-pressed' : 1px $border-style #5d83a7,
54
84
  'button-secondary-glyph-color' : var(--button-background-color),
55
85
  'button-secondary-glyph-color-active' : var(--button-background-color),
56
86
  'button-secondary-glyph-color-disabled' : inherit,
@@ -70,11 +100,11 @@ $neoMap: map-merge($neoMap, (
70
100
  'button-tertiary-background-image' : none,
71
101
  'button-tertiary-badge-background-color' : var(--button-badge-background-color),
72
102
  '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,
103
+ 'button-tertiary-border' : 1px $border-style transparent,
104
+ 'button-tertiary-border-active' : 1px $border-style #282828,
105
+ 'button-tertiary-border-disabled' : inherit,
106
+ 'button-tertiary-border-hover' : 1px $border-style #292929,
107
+ 'button-tertiary-border-pressed' : 1px $border-style #5d83a7,
78
108
  'button-tertiary-glyph-color' : var(--button-glyph-color),
79
109
  'button-tertiary-glyph-color-active' : var(--button-glyph-color),
80
110
  'button-tertiary-glyph-color-disabled' : inherit,
@@ -100,13 +130,12 @@ $neoMap: map-merge($neoMap, (
100
130
  --button-badge-color : #{neo(button-badge-color)};
101
131
  --button-badge-margin-left : #{neo(button-badge-margin-left)};
102
132
  --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)};
133
+ --button-border : #{neo(button-border)};
134
+ --button-border-active : #{neo(button-border-active)};
135
+ --button-border-disabled : #{neo(button-border-disabled)};
136
+ --button-border-hover : #{neo(button-border-hover)};
137
+ --button-border-pressed : #{neo(button-border-pressed)};
108
138
  --button-border-radius : #{neo(button-border-radius)};
109
- --button-border-width : #{neo(button-border-width)};
110
139
  --button-glyph-color : #{neo(button-glyph-color)};
111
140
  --button-glyph-color-active : #{neo(button-glyph-color-active)};
112
141
  --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
@@ -128,6 +157,29 @@ $neoMap: map-merge($neoMap, (
128
157
  --button-text-transform : #{neo(button-text-transform)};
129
158
  --button-use-gradients : #{neo(button-use-gradients)};
130
159
 
160
+ --button-ghost-background-color : #{neo(button-ghost-background-color)};
161
+ --button-ghost-background-color-active : #{neo(button-ghost-background-color-active)};
162
+ --button-ghost-background-color-disabled : #{neo(button-ghost-background-color-disabled)};
163
+ --button-ghost-background-color-hover : #{neo(button-ghost-background-color-hover)};
164
+ --button-ghost-background-image : #{neo(button-ghost-background-image)};
165
+ --button-ghost-badge-background-color : #{neo(button-ghost-badge-background-color)};
166
+ --button-ghost-badge-color : #{neo(button-ghost-badge-color)};
167
+ --button-ghost-border : #{neo(button-ghost-border)};
168
+ --button-ghost-border-active : #{neo(button-ghost-border-active)};
169
+ --button-ghost-border-disabled : #{neo(button-ghost-border-disabled)};
170
+ --button-ghost-border-hover : #{neo(button-ghost-border-hover)};
171
+ --button-ghost-border-pressed : #{neo(button-ghost-border-pressed)};
172
+ --button-ghost-glyph-color : #{neo(button-ghost-glyph-color)};
173
+ --button-ghost-glyph-color-active : #{neo(button-ghost-glyph-color-active)};
174
+ --button-ghost-glyph-color-disabled : #{neo(button-ghost-glyph-color-disabled)};
175
+ --button-ghost-glyph-color-hover : #{neo(button-ghost-glyph-color-hover)};
176
+ --button-ghost-opacity-disabled : #{neo(button-ghost-opacity-disabled)};
177
+ --button-ghost-ripple-background-color : #{neo(button-ghost-ripple-background-color)};
178
+ --button-ghost-text-color : #{neo(button-ghost-text-color)};
179
+ --button-ghost-text-color-active : #{neo(button-ghost-text-color-active)};
180
+ --button-ghost-text-color-disabled : #{neo(button-ghost-text-color-disabled)};
181
+ --button-ghost-text-color-hover : #{neo(button-ghost-text-color-hover)};
182
+
131
183
  --button-secondary-background-color : #{neo(button-secondary-background-color)};
132
184
  --button-secondary-background-color-active : #{neo(button-secondary-background-color-active)};
133
185
  --button-secondary-background-color-disabled: #{neo(button-secondary-background-color-disabled)};
@@ -135,11 +187,11 @@ $neoMap: map-merge($neoMap, (
135
187
  --button-secondary-background-image : #{neo(button-secondary-background-image)};
136
188
  --button-secondary-badge-background-color : #{neo(button-secondary-badge-background-color)};
137
189
  --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)};
190
+ --button-secondary-border : #{neo(button-secondary-border)};
191
+ --button-secondary-border-active : #{neo(button-secondary-border-active)};
192
+ --button-secondary-border-disabled : #{neo(button-secondary-border-disabled)};
193
+ --button-secondary-border-hover : #{neo(button-secondary-border-hover)};
194
+ --button-secondary-border-pressed : #{neo(button-secondary-border-pressed)};
143
195
  --button-secondary-glyph-color : #{neo(button-secondary-glyph-color)};
144
196
  --button-secondary-glyph-color-active : #{neo(button-secondary-glyph-color-active)};
145
197
  --button-secondary-glyph-color-disabled : #{neo(button-secondary-glyph-color-disabled)};
@@ -158,11 +210,11 @@ $neoMap: map-merge($neoMap, (
158
210
  --button-tertiary-background-image : #{neo(button-tertiary-background-image)};
159
211
  --button-tertiary-badge-background-color : #{neo(button-tertiary-badge-background-color)};
160
212
  --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)};
213
+ --button-tertiary-border : #{neo(button-tertiary-border)};
214
+ --button-tertiary-border-active : #{neo(button-tertiary-border-active)};
215
+ --button-tertiary-border-disabled : #{neo(button-tertiary-border-disabled)};
216
+ --button-tertiary-border-hover : #{neo(button-tertiary-border-hover)};
217
+ --button-tertiary-border-pressed : #{neo(button-tertiary-border-pressed)};
166
218
  --button-tertiary-glyph-color : #{neo(button-tertiary-glyph-color)};
167
219
  --button-tertiary-glyph-color-active : #{neo(button-tertiary-glyph-color-active)};
168
220
  --button-tertiary-glyph-color-disabled : #{neo(button-tertiary-glyph-color-disabled)};
package/resources/scss/theme-dark/tab/header/Button.scss CHANGED
@@ -1,4 +1,8 @@
1
1
  $neoMap: map-merge($neoMap, (
2
+ 'tab-button-background-color' : #282b2b,
3
+ 'tab-button-background-color-active' : #373a3c,
4
+ 'tab-button-background-color-disabled' : #282b2b,
5
+ 'tab-button-background-color-hover' : #3a3c3e,
2
6
  'tab-button-background-image' : linear-gradient(#393d3e, #282b2b),
3
7
  'tab-button-background-image-bottom' : linear-gradient(to top, #393d3e, #282b2b),
4
8
  'tab-button-background-image-left' : linear-gradient(to right, #393d3e, #282b2b),
@@ -8,16 +12,24 @@ $neoMap: map-merge($neoMap, (
8
12
  'tab-button-background-image-pressed-right' : linear-gradient(to left, #434749, #323536),
9
13
  'tab-button-background-image-right' : linear-gradient(to left, #393d3e, #282b2b),
10
14
  'tab-button-border-radius' : 0,
15
+ 'tab-button-gap' : 0,
11
16
  'tab-button-glyph-color' : #bbb,
12
17
  'tab-button-glyph-color-active' : #bbb,
13
- 'tab-button-glyph-color-over' : #bbb,
18
+ 'tab-button-glyph-color-hover' : #bbb,
14
19
  'tab-button-glyph-color-pressed' : #bbb,
20
+ 'tab-button-height' : 25px,
21
+ 'tab-button-height-pressed' : 25px,
22
+ 'tab-button-padding' : 7px 12px 6px 12px,
15
23
  'tab-button-text-color' : #bbb,
16
24
  'tab-button-text-transform' : none
17
25
  ));
18
26
 
19
27
  @if $useCssVars == true {
20
28
  :root .neo-theme-dark { // .neo-tab-header-button
29
+ --tab-button-background-color : #{neo(tab-button-background-color)};
30
+ --tab-button-background-color-active : #{neo(tab-button-background-color-active)};
31
+ --tab-button-background-color-disabled : #{neo(tab-button-background-color-disabled)};
32
+ --tab-button-background-color-hover : #{neo(tab-button-background-color-hover)};
21
33
  --tab-button-background-image : #{neo(tab-button-background-image)};
22
34
  --tab-button-background-image-bottom : #{neo(tab-button-background-image-bottom)};
23
35
  --tab-button-background-image-left : #{neo(tab-button-background-image-left)};
@@ -27,10 +39,14 @@ $neoMap: map-merge($neoMap, (
27
39
  --tab-button-background-image-pressed-right : #{neo(tab-button-background-image-pressed-right)};
28
40
  --tab-button-background-image-right : #{neo(tab-button-background-image-right)};
29
41
  --tab-button-border-radius : #{neo(tab-button-border-radius)};
42
+ --tab-button-gap : #{neo(tab-button-gap)};
30
43
  --tab-button-glyph-color : #{neo(tab-button-glyph-color)};
31
44
  --tab-button-glyph-color-active : #{neo(tab-button-glyph-color-active)};
32
- --tab-button-glyph-color-over : #{neo(tab-button-glyph-color-over)};
45
+ --tab-button-glyph-color-hover : #{neo(tab-button-glyph-color-hover)};
33
46
  --tab-button-glyph-color-pressed : #{neo(tab-button-glyph-color-pressed)};
47
+ --tab-button-height : #{neo(tab-button-height)};
48
+ --tab-button-height-pressed : #{neo(tab-button-height-pressed)};
49
+ --tab-button-padding : #{neo(tab-button-padding)};
34
50
  --tab-button-text-color : #{neo(tab-button-text-color)};
35
51
  --tab-button-text-transform : #{neo(tab-button-text-transform)};
36
52
  }
package/resources/scss/theme-light/button/Base.scss CHANGED
@@ -1,36 +1,41 @@
1
+ $background-color: #fff;
2
+ $border-color : #ddd;
3
+ $border-style : solid;
4
+ $border-width : 1px;
5
+ $text-color : #1c60a0;
6
+
1
7
  $neoMap: map-merge($neoMap, (
2
- 'button-background-color' : #fff,
8
+ 'button-background-color' : $background-color,
3
9
  'button-background-color-active' : #ddd,
4
- 'button-background-color-disabled' : #fff,
5
- 'button-background-color-hover' : #fff,
10
+ 'button-background-color-disabled' : $background-color,
11
+ 'button-background-color-hover' : $background-color,
6
12
  'button-background-image' : none,
7
13
  'button-background-gradient-end' : #323536,
8
14
  'button-background-gradient-start' : #434749,
9
- 'button-badge-background-color' : #1c60a0,
10
- 'button-badge-color' : #fff,
15
+ 'button-badge-background-color' : $text-color,
16
+ 'button-badge-color' : $background-color,
11
17
  'button-badge-margin-left' : -10px,
12
18
  '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,
19
+ 'button-border' : $border-width $border-style $border-color,
20
+ 'button-border-active' : $border-width $border-style $text-color,
21
+ 'button-border-disabled' : $border-width $border-style $border-color,
22
+ 'button-border-hover' : $border-width $border-style $text-color,
23
+ 'button-border-pressed' : $border-width $border-style $text-color,
18
24
  '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,
25
+ 'button-glyph-color' : $text-color,
26
+ 'button-glyph-color-active' : $text-color,
27
+ 'button-glyph-color-disabled' : $text-color,
28
+ 'button-glyph-color-hover' : $text-color,
24
29
  'button-height' : inherit,
25
30
  'button-margin' : 2px,
26
31
  'button-opacity-disabled' : #{neo(neo-disabled-opacity)},
27
32
  'button-outline-active' : none,
28
33
  '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' : #1c60a0,
34
+ 'button-ripple-background-color' : lighten($text-color, 50%),
35
+ 'button-text-color' : $text-color,
36
+ 'button-text-color-active' : $text-color,
37
+ 'button-text-color-disabled' : $text-color,
38
+ 'button-text-color-hover' : $text-color,
34
39
  'button-text-font-family' : #{neo(neo-font-family)},
35
40
  'button-text-font-size' : 11px,
36
41
  'button-text-font-weight' : 600,
@@ -38,19 +43,43 @@ $neoMap: map-merge($neoMap, (
38
43
  'button-text-transform' : uppercase,
39
44
  'button-use-gradients' : false,
40
45
 
46
+ // {module: Button, ui: 'ghost'}
47
+ 'button-ghost-background-color' : var(--button-text-color),
48
+ 'button-ghost-background-color-active' : $border-color,
49
+ 'button-ghost-background-color-disabled' : inherit,
50
+ 'button-ghost-background-color-hover' : var(--button-text-color),
51
+ 'button-ghost-background-image' : none,
52
+ 'button-ghost-badge-background-color' : var(--button-badge-color),
53
+ 'button-ghost-badge-color' : var(--button-badge-background-color),
54
+ 'button-ghost-border' : $border-width $border-style var(--button-background-color),
55
+ 'button-ghost-border-active' : $border-width $border-style $border-color,
56
+ 'button-ghost-border-disabled' : inherit,
57
+ 'button-ghost-border-hover' : $border-width $border-style $text-color,
58
+ 'button-ghost-border-pressed' : $border-width $border-style $text-color,
59
+ 'button-ghost-glyph-color' : var(--button-background-color),
60
+ 'button-ghost-glyph-color-active' : var(--button-background-color),
61
+ 'button-ghost-glyph-color-disabled' : inherit,
62
+ 'button-ghost-glyph-color-hover' : var(--button-background-color),
63
+ 'button-ghost-opacity-disabled' : var(--neo-disabled-opacity),
64
+ 'button-ghost-ripple-background-color' : inherit,
65
+ 'button-ghost-text-color' : var(--button-background-color),
66
+ 'button-ghost-text-color-active' : var(--button-background-color),
67
+ 'button-ghost-text-color-disabled' : inherit,
68
+ 'button-ghost-text-color-hover' : var(--button-background-color),
69
+
41
70
  // {module: Button, ui: 'secondary'}
42
71
  'button-secondary-background-color' : var(--button-text-color),
43
- 'button-secondary-background-color-active' : #ddd,
72
+ 'button-secondary-background-color-active' : $border-color,
44
73
  'button-secondary-background-color-disabled': inherit,
45
74
  'button-secondary-background-color-hover' : var(--button-text-color),
46
75
  'button-secondary-background-image' : none,
47
76
  'button-secondary-badge-background-color' : var(--button-badge-color),
48
77
  '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),
78
+ 'button-secondary-border' : $border-width $border-style var(--button-background-color),
79
+ 'button-secondary-border-active' : $border-width $border-style $border-color,
80
+ 'button-secondary-border-disabled' : inherit,
81
+ 'button-secondary-border-hover' : $border-width $border-style $text-color,
82
+ 'button-secondary-border-pressed' : $border-width $border-style $text-color,
54
83
  'button-secondary-glyph-color' : var(--button-background-color),
55
84
  'button-secondary-glyph-color-active' : var(--button-background-color),
56
85
  'button-secondary-glyph-color-disabled' : inherit,
@@ -64,17 +93,17 @@ $neoMap: map-merge($neoMap, (
64
93
 
65
94
  // {module: Button, ui: 'tertiary'}
66
95
  'button-tertiary-background-color' : transparent,
67
- 'button-tertiary-background-color-active' : #ddd,
96
+ 'button-tertiary-background-color-active' : $border-color,
68
97
  'button-tertiary-background-color-disabled' : inherit,
69
98
  'button-tertiary-background-color-hover' : var(--button-background-color-hover),
70
99
  'button-tertiary-background-image' : none,
71
100
  'button-tertiary-badge-background-color' : var(--button-badge-background-color),
72
101
  '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,
102
+ 'button-tertiary-border' : $border-width $border-style transparent,
103
+ 'button-tertiary-border-active' : $border-width $border-style $border-color,
104
+ 'button-tertiary-border-disabled' : inherit,
105
+ 'button-tertiary-border-hover' : $border-width $border-style $text-color,
106
+ 'button-tertiary-border-pressed' : $border-width $border-style $text-color,
78
107
  'button-tertiary-glyph-color' : var(--button-glyph-color),
79
108
  'button-tertiary-glyph-color-active' : var(--button-glyph-color),
80
109
  'button-tertiary-glyph-color-disabled' : inherit,
@@ -100,13 +129,12 @@ $neoMap: map-merge($neoMap, (
100
129
  --button-badge-color : #{neo(button-badge-color)};
101
130
  --button-badge-margin-left : #{neo(button-badge-margin-left)};
102
131
  --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)};
132
+ --button-border : #{neo(button-border)};
133
+ --button-border-active : #{neo(button-border-active)};
134
+ --button-border-disabled : #{neo(button-border-disabled)};
135
+ --button-border-hover : #{neo(button-border-hover)};
136
+ --button-border-pressed : #{neo(button-border-pressed)};
108
137
  --button-border-radius : #{neo(button-border-radius)};
109
- --button-border-width : #{neo(button-border-width)};
110
138
  --button-glyph-color : #{neo(button-glyph-color)};
111
139
  --button-glyph-color-active : #{neo(button-glyph-color-active)};
112
140
  --button-glyph-color-disabled : #{neo(button-glyph-color-disabled)};
@@ -128,6 +156,29 @@ $neoMap: map-merge($neoMap, (
128
156
  --button-text-transform : #{neo(button-text-transform)};
129
157
  --button-use-gradients : #{neo(button-use-gradients)};
130
158
 
159
+ --button-ghost-background-color : #{neo(button-ghost-background-color)};
160
+ --button-ghost-background-color-active : #{neo(button-ghost-background-color-active)};
161
+ --button-ghost-background-color-disabled : #{neo(button-ghost-background-color-disabled)};
162
+ --button-ghost-background-color-hover : #{neo(button-ghost-background-color-hover)};
163
+ --button-ghost-background-image : #{neo(button-ghost-background-image)};
164
+ --button-ghost-badge-background-color : #{neo(button-ghost-badge-background-color)};
165
+ --button-ghost-badge-color : #{neo(button-ghost-badge-color)};
166
+ --button-ghost-border : #{neo(button-ghost-border)};
167
+ --button-ghost-border-active : #{neo(button-ghost-border-active)};
168
+ --button-ghost-border-disabled : #{neo(button-ghost-border-disabled)};
169
+ --button-ghost-border-hover : #{neo(button-ghost-border-hover)};
170
+ --button-ghost-border-pressed : #{neo(button-ghost-border-pressed)};
171
+ --button-ghost-glyph-color : #{neo(button-ghost-glyph-color)};
172
+ --button-ghost-glyph-color-active : #{neo(button-ghost-glyph-color-active)};
173
+ --button-ghost-glyph-color-disabled : #{neo(button-ghost-glyph-color-disabled)};
174
+ --button-ghost-glyph-color-hover : #{neo(button-ghost-glyph-color-hover)};
175
+ --button-ghost-opacity-disabled : #{neo(button-ghost-opacity-disabled)};
176
+ --button-ghost-ripple-background-color : #{neo(button-ghost-ripple-background-color)};
177
+ --button-ghost-text-color : #{neo(button-ghost-text-color)};
178
+ --button-ghost-text-color-active : #{neo(button-ghost-text-color-active)};
179
+ --button-ghost-text-color-disabled : #{neo(button-ghost-text-color-disabled)};
180
+ --button-ghost-text-color-hover : #{neo(button-ghost-text-color-hover)};
181
+
131
182
  --button-secondary-background-color : #{neo(button-secondary-background-color)};
132
183
  --button-secondary-background-color-active : #{neo(button-secondary-background-color-active)};
133
184
  --button-secondary-background-color-disabled: #{neo(button-secondary-background-color-disabled)};
@@ -135,11 +186,11 @@ $neoMap: map-merge($neoMap, (
135
186
  --button-secondary-background-image : #{neo(button-secondary-background-image)};
136
187
  --button-secondary-badge-background-color : #{neo(button-secondary-badge-background-color)};
137
188
  --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)};
189
+ --button-secondary-border : #{neo(button-secondary-border)};
190
+ --button-secondary-border-active : #{neo(button-secondary-border-active)};
191
+ --button-secondary-border-disabled : #{neo(button-secondary-border-disabled)};
192
+ --button-secondary-border-hover : #{neo(button-secondary-border-hover)};
193
+ --button-secondary-border-pressed : #{neo(button-secondary-border-pressed)};
143
194
  --button-secondary-glyph-color : #{neo(button-secondary-glyph-color)};
144
195
  --button-secondary-glyph-color-active : #{neo(button-secondary-glyph-color-active)};
145
196
  --button-secondary-glyph-color-disabled : #{neo(button-secondary-glyph-color-disabled)};
@@ -158,11 +209,11 @@ $neoMap: map-merge($neoMap, (
158
209
  --button-tertiary-background-image : #{neo(button-tertiary-background-image)};
159
210
  --button-tertiary-badge-background-color : #{neo(button-tertiary-badge-background-color)};
160
211
  --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)};
212
+ --button-tertiary-border : #{neo(button-tertiary-border)};
213
+ --button-tertiary-border-active : #{neo(button-tertiary-border-active)};
214
+ --button-tertiary-border-disabled : #{neo(button-tertiary-border-disabled)};
215
+ --button-tertiary-border-hover : #{neo(button-tertiary-border-hover)};
216
+ --button-tertiary-border-pressed : #{neo(button-tertiary-border-pressed)};
166
217
  --button-tertiary-glyph-color : #{neo(button-tertiary-glyph-color)};
167
218
  --button-tertiary-glyph-color-active : #{neo(button-tertiary-glyph-color-active)};
168
219
  --button-tertiary-glyph-color-disabled : #{neo(button-tertiary-glyph-color-disabled)};
package/resources/scss/theme-light/tab/header/Button.scss CHANGED
@@ -1,4 +1,8 @@
1
1
  $neoMap: map-merge($neoMap, (
2
+ 'tab-button-background-color' : #fff,
3
+ 'tab-button-background-color-active' : #ddd,
4
+ 'tab-button-background-color-disabled' : #fff,
5
+ 'tab-button-background-color-hover' : #fff,
2
6
  'tab-button-background-image' : none,
3
7
  'tab-button-background-image-bottom' : none,
4
8
  'tab-button-background-image-left' : none,
@@ -8,16 +12,24 @@ $neoMap: map-merge($neoMap, (
8
12
  'tab-button-background-image-pressed-right' : none,
9
13
  'tab-button-background-image-right' : none,
10
14
  'tab-button-border-radius' : 0,
15
+ 'tab-button-gap' : 0,
11
16
  'tab-button-glyph-color' : #bbb,
12
17
  'tab-button-glyph-color-active' : #1c60a0,
13
- 'tab-button-glyph-color-over' : #1c60a0,
14
- 'tab-button-glyph-color-pressed' : #1c60a0,
15
- 'tab-button-text-color' : #2b2b2b,
16
- 'tab-button-text-transform' : uppercase
18
+ 'tab-button-glyph-color-hover' : #1c60a0,
19
+ 'tab-button-glyph-color-pressed' : #1c60a0,
20
+ 'tab-button-height' : 25px,
21
+ 'tab-button-height-pressed' : 25px,
22
+ 'tab-button-padding' : 7px 12px 6px 12px,
23
+ 'tab-button-text-color' : #2b2b2b,
24
+ 'tab-button-text-transform' : uppercase
17
25
  ));
18
26
 
19
27
  @if $useCssVars == true {
20
28
  :root .neo-theme-light { // .neo-tab-header-button
29
+ --tab-button-background-color : #{neo(tab-button-background-color)};
30
+ --tab-button-background-color-active : #{neo(tab-button-background-color-active)};
31
+ --tab-button-background-color-disabled : #{neo(tab-button-background-color-disabled)};
32
+ --tab-button-background-color-hover : #{neo(tab-button-background-color-hover)};
21
33
  --tab-button-background-image : #{neo(tab-button-background-image)};
22
34
  --tab-button-background-image-bottom : #{neo(tab-button-background-image-bottom)};
23
35
  --tab-button-background-image-left : #{neo(tab-button-background-image-left)};
@@ -27,11 +39,15 @@ $neoMap: map-merge($neoMap, (
27
39
  --tab-button-background-image-pressed-right : #{neo(tab-button-background-image-pressed-right)};
28
40
  --tab-button-background-image-right : #{neo(tab-button-background-image-right)};
29
41
  --tab-button-border-radius : #{neo(tab-button-border-radius)};
42
+ --tab-button-gap : #{neo(tab-button-gap)};
30
43
  --tab-button-glyph-color : #{neo(tab-button-glyph-color)};
31
44
  --tab-button-glyph-color-active : #{neo(tab-button-glyph-color-active)};
32
- --tab-button-glyph-color-over : #{neo(tab-button-glyph-color-over)};
45
+ --tab-button-glyph-color-hover : #{neo(tab-button-glyph-color-hover)};
33
46
  --tab-button-glyph-color-pressed : #{neo(tab-button-glyph-color-pressed)};
47
+ --tab-button-height : #{neo(tab-button-height)};
48
+ --tab-button-height-pressed : #{neo(tab-button-height-pressed)};
49
+ --tab-button-padding : #{neo(tab-button-padding)};
34
50
  --tab-button-text-color : #{neo(tab-button-text-color)};
35
51
  --tab-button-text-transform : #{neo(tab-button-text-transform)};
36
52
  }
37
- }
53
+ }
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.9'
240
+ * @default '5.1.10'
241
241
  * @memberOf! module:Neo
242
242
  * @name config.version
243
243
  * @type String
244
244
  */
245
- version: '5.1.9'
245
+ version: '5.1.10'
246
246
  };
247
247
 
248
248
  Object.assign(DefaultConfig, {
package/src/calendar/view/month/Component.mjs CHANGED
@@ -775,12 +775,15 @@ class Component extends BaseComponent {
775
775
  } else {
776
776
  node = vdom.cn[0].cn[i];
777
777
 
778
- node.html = me.intlFormat_day.format(date);
779
-
780
- if (!me.showWeekends && (day === 0 || day === 6)) {
781
- node.removeDom = true;
782
- } else {
783
- delete node.removeDom;
778
+ // the method could be called before the header content got created
779
+ if (node) {
780
+ node.html = me.intlFormat_day.format(date);
781
+
782
+ if (!me.showWeekends && (day === 0 || day === 6)) {
783
+ node.removeDom = true;
784
+ } else {
785
+ delete node.removeDom;
786
+ }
784
787
  }
785
788
  }
786
789