@syncfusion/ej2-layouts 26.1.35 → 26.2.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 (25) hide show
  1. package/dist/ej2-layouts.min.js +2 -2
  2. package/dist/ej2-layouts.umd.min.js +2 -2
  3. package/dist/ej2-layouts.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-layouts.es2015.js +14 -7
  5. package/dist/es6/ej2-layouts.es2015.js.map +1 -1
  6. package/dist/es6/ej2-layouts.es5.js +14 -7
  7. package/dist/es6/ej2-layouts.es5.js.map +1 -1
  8. package/dist/global/ej2-layouts.min.js +2 -2
  9. package/dist/global/ej2-layouts.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/hotfix/26.1.35_Vol2.txt +1 -0
  12. package/package.json +6 -6
  13. package/src/dashboard-layout/dashboard-layout.d.ts +1 -1
  14. package/src/splitter/splitter.js +1 -0
  15. package/src/timeline/timeline.js +13 -7
  16. package/styles/avatar/_fluent2-definition.scss +1 -2
  17. package/styles/avatar/_layout.scss +6 -0
  18. package/styles/avatar/fluent2.css +48 -45
  19. package/styles/card/_fluent2-definition.scss +4 -4
  20. package/styles/card/_layout.scss +13 -1
  21. package/styles/card/fluent2.css +54 -49
  22. package/styles/dashboard-layout/fluent2.css +45 -45
  23. package/styles/fluent2.css +57 -49
  24. package/styles/splitter/fluent2.css +45 -45
  25. package/styles/timeline/fluent2.css +45 -45
package/dist/global/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 26.1.35
3
+ * version : 26.2.4
4
4
  * Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/hotfix/26.1.35_Vol2.txt ADDED
@@ -0,0 +1 @@
1
+ hotfix/26.1.35_Vol2
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "_from": "@syncfusion/ej2-layouts@*",
3
- "_id": "@syncfusion/ej2-layouts@21.4.6",
3
+ "_id": "@syncfusion/ej2-layouts@26.1.38",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-HG2jVi5v6l7yze8+wV9L1KlaN3jQ53crA9NS0dCXrnQpN5cRqyQeKgIkmS2u8poz9z3Lpcj6Y5AabS9/uxs71Q==",
5
+ "_integrity": "sha512-C7KHBTivwwIApZzslXmS4otpLMml/3S3dTw9LHl+knija3PuaibL7C4n/UsU0tw9wzITN2F3H2sHBhIHyNYYig==",
6
6
  "_location": "/@syncfusion/ej2-layouts",
7
7
  "_phantomChildren": {},
8
8
  "_requested": {
@@ -26,8 +26,8 @@
26
26
  "/@syncfusion/ej2-react-layouts",
27
27
  "/@syncfusion/ej2-vue-layouts"
28
28
  ],
29
- "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-layouts/-/ej2-layouts-21.4.6.tgz",
30
- "_shasum": "7bad9e4b98150a970d06b0ae688a88feb54ba639",
29
+ "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-layouts/-/ej2-layouts-26.1.38.tgz",
30
+ "_shasum": "4c3dfcffeb657d31e07dfb79102b5f9acbc08837",
31
31
  "_spec": "@syncfusion/ej2-layouts@*",
32
32
  "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
33
33
  "author": {
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "bundleDependencies": false,
37
37
  "dependencies": {
38
- "@syncfusion/ej2-base": "~26.1.35"
38
+ "@syncfusion/ej2-base": "~26.2.4"
39
39
  },
40
40
  "deprecated": false,
41
41
  "description": "A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.",
@@ -75,7 +75,7 @@
75
75
  "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/layouts"
76
76
  },
77
77
  "typings": "index.d.ts",
78
- "version": "26.1.35",
78
+ "version": "26.2.4",
79
79
  "sideEffects": false,
80
80
  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
81
81
  }
package/src/dashboard-layout/dashboard-layout.d.ts CHANGED
@@ -508,7 +508,7 @@ export declare class DashboardLayout extends Component<HTMLElement> implements I
508
508
  * @returns void
509
509
  */
510
510
  removePanel(id: string): void;
511
- constructor(options?: DashboardLayoutModel, element?: string | HTMLInputElement);
511
+ constructor(options?: DashboardLayoutModel, element?: string | HTMLElement);
512
512
  /**
513
513
  *Moves the panel in the DashboardLayout.
514
514
  *
package/src/splitter/splitter.js CHANGED
@@ -2219,6 +2219,7 @@ var Splitter = /** @class */ (function (_super) {
2219
2219
  if (!this.isDestroyed) {
2220
2220
  _super.prototype.destroy.call(this);
2221
2221
  EventHandler.remove(document, 'touchstart click', this.onDocumentClick);
2222
+ EventHandler.remove(this.element, 'keydown', this.onMove);
2222
2223
  this.element.ownerDocument.defaultView.removeEventListener('resize', this.onReportWindowSize, true);
2223
2224
  while (this.element.attributes.length > 0) {
2224
2225
  this.element.removeAttribute(this.element.attributes[0].name);
package/src/timeline/timeline.js CHANGED
@@ -361,7 +361,9 @@ var Timeline = /** @class */ (function (_super) {
361
361
  if (oldPropItems.dotCss !== '') {
362
362
  (_a = dotEle.classList).remove.apply(_a, oldPropItems.dotCss.trim().split(' '));
363
363
  }
364
- (_b = dotEle.classList).add.apply(_b, this.items[parseInt(index.toString(), 10)].dotCss.trim().split(' '));
364
+ if (item.dotCss !== '') {
365
+ (_b = dotEle.classList).add.apply(_b, this.items[parseInt(index.toString(), 10)].dotCss.trim().split(' '));
366
+ }
365
367
  break;
366
368
  case 'content':
367
369
  contentEle = timelineItemElements[parseInt(index.toString(), 10)].querySelector('.' + CONTENT);
@@ -382,7 +384,9 @@ var Timeline = /** @class */ (function (_super) {
382
384
  if (oldPropItems.cssClass !== '') {
383
385
  (_c = timelineItemElements[parseInt(index.toString(), 10)].classList).remove.apply(_c, oldPropItems.cssClass.trim().split(' '));
384
386
  }
385
- (_d = timelineItemElements[parseInt(index.toString(), 10)].classList).add.apply(_d, item.cssClass.trim().split(' '));
387
+ if (item.cssClass !== '') {
388
+ (_d = timelineItemElements[parseInt(index.toString(), 10)].classList).add.apply(_d, item.cssClass.trim().split(' '));
389
+ }
386
390
  break;
387
391
  }
388
392
  };
@@ -404,11 +408,13 @@ var Timeline = /** @class */ (function (_super) {
404
408
  this.renderItems();
405
409
  }
406
410
  else {
407
- var itemObject = Object.keys(newProp.items);
408
- for (var i = 0; i < itemObject.length; i++) {
409
- var index = parseInt(Object.keys(newProp.items)[i], 10);
410
- var property = Object.keys(newProp.items[index])[0];
411
- this.updateItems(property, oldProp.items[index], index, newProp.items[index]);
411
+ var itemLength = Object.keys(newProp.items).length;
412
+ for (var i = 0; i < itemLength; i++) {
413
+ var itemPropLength = parseInt(Object.keys(newProp.items)[i], 10);
414
+ for (var j = 0; j < Object.keys(newProp.items[itemPropLength]).length; j++) {
415
+ var property = Object.keys(newProp.items[itemPropLength])[j];
416
+ this.updateItems(property, oldProp.items[itemPropLength], itemPropLength, newProp.items[itemPropLength]);
417
+ }
412
418
  }
413
419
  }
414
420
  break;
package/styles/avatar/_fluent2-definition.scss CHANGED
@@ -8,7 +8,6 @@ $avatar-base-line-height: 22px !default;
8
8
  $avatar-base-text-color: $content-text-color-alt2 !default;
9
9
  $avatar-base-font-weight: $font-weight-normal !default;
10
10
  $avatar-base-img-height: 100% !default;
11
- $avatar-border-color: $black;
12
11
 
13
12
  // Circle Avatar
14
13
  $avatar-circle-border-radius: 50% !default;
@@ -26,4 +25,4 @@ $avatar-base-large-line-height: 28px !default;
26
25
  $avatar-base-xlarge-line-height: 28px !default;
27
26
 
28
27
  //border
29
- $avatar-border: $avatar-border-color !default;
28
+ $avatar-border: $dialog-border !default;
package/styles/avatar/_layout.scss CHANGED
@@ -27,6 +27,12 @@
27
27
  line-height: $avatar-base-line-height;
28
28
  }
29
29
 
30
+ @if $skin-name == 'fluent2' {
31
+ &:has(:not(img)) {
32
+ border: 1px solid $avatar-border;
33
+ }
34
+ }
35
+
30
36
  img {
31
37
  height: $avatar-base-img-height;
32
38
  width: auto;
package/styles/avatar/fluent2.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --color-sf-success: #0e700e;
11
11
  --color-sf-info: #008aa9;
12
12
  --color-sf-warning: #bc4b09;
13
- --color-sf-danger: #b10e1c;
13
+ --color-sf-danger: #d13438;
14
14
  --color-sf-success-light: #54b054;
15
15
  --color-sf-info-light: #56bfd7;
16
16
  --color-sf-warning-light: #fee5d7;
@@ -47,7 +47,7 @@
47
47
  --color-sf-flyout-bg-color-pressed: #e0e0e0;
48
48
  --color-sf-flyout-bg-color-selected: #ebebeb;
49
49
  --color-sf-flyout-bg-color-focus: #f5f5f5;
50
- --color-sf-overlay-bg-color: #000;
50
+ --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
51
51
  --color-sf-table-bg-color-hover: #f5f5f5;
52
52
  --color-sf-table-bg-color-pressed: #e0e0e0;
53
53
  --color-sf-table-bg-color-selected: #ebf3fc;
@@ -207,7 +207,7 @@
207
207
  --color-sf-info-outline: var(--color-sf-info-border-color);
208
208
  --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
209
209
  --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
210
- --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
210
+ --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
211
211
  --color-sf-toast-text-color: var(--color-sf-content-text-color);
212
212
  --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
213
213
  --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -221,7 +221,7 @@
221
221
  --color-sf-diagram-palette-background: var(--color-sf-content-bg-color-alt1);
222
222
  --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
223
223
  --color-sf-diagram-palette-selected-background: var(--color-sf-content-bg-color-selected);
224
- --color-sf-rating-selected-color: var(--color-sf-content-text-color);
224
+ --color-sf-rating-selected-color: #242424;
225
225
  --color-sf-rating-unrated-color: var(--color-sf-content-text-color);
226
226
  --color-sf-rating-selected-disabled-color: #b3b3b3;
227
227
  --color-sf-rating-unrated-disabled-color: #b3b3b3;
@@ -246,7 +246,7 @@
246
246
  --color-sf-msg-success-color: var(--color-sf-content-text-color);
247
247
  --color-sf-msg-success-bg-color: #f1faf1;
248
248
  --color-sf-msg-success-border-color: #9fd89f;
249
- --color-sf-msg-success-color-alt1: var(--color-sf-success);
249
+ --color-sf-msg-success-color-alt1: #0e700e;
250
250
  --color-sf-msg-success-bg-color-alt1: transparent;
251
251
  --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-border-color);
252
252
  --color-sf-msg-success-color-alt2: #fff;
@@ -261,7 +261,7 @@
261
261
  --color-sf-msg-danger-color: var(--color-sf-content-text-color);
262
262
  --color-sf-msg-danger-bg-color: #fdf3f4;
263
263
  --color-sf-msg-danger-border-color: #eeacb2;
264
- --color-sf-msg-danger-color-alt1: var(--color-sf-danger);
264
+ --color-sf-msg-danger-color-alt1: #b10e1c;
265
265
  --color-sf-msg-danger-bg-color-alt1: transparent;
266
266
  --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
267
267
  --color-sf-msg-danger-color-alt2: #fff;
@@ -276,7 +276,7 @@
276
276
  --color-sf-msg-info-color: var(--color-sf-content-text-color);
277
277
  --color-sf-msg-info-bg-color: #f2fafc;
278
278
  --color-sf-msg-info-border-color: #a4deeb;
279
- --color-sf-msg-info-color-alt1: var(--color-sf-info);
279
+ --color-sf-msg-info-color-alt1: #00748f;
280
280
  --color-sf-msg-info-bg-color-alt1: transparent;
281
281
  --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
282
282
  --color-sf-msg-info-color-alt2: #fff;
@@ -291,7 +291,7 @@
291
291
  --color-sf-msg-warning-color: var(--color-sf-content-text-color);
292
292
  --color-sf-msg-warning-bg-color: #fdf6f3;
293
293
  --color-sf-msg-warning-border-color: #f4bfab;
294
- --color-sf-msg-warning-color-alt1: var(--color-sf-warning);
294
+ --color-sf-msg-warning-color-alt1: #c43501;
295
295
  --color-sf-msg-warning-bg-color-alt1: transparent;
296
296
  --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
297
297
  --color-sf-msg-warning-color-alt2: #fff;
@@ -317,7 +317,7 @@
317
317
  --color-sf-link-button-focus: #0f6cbd;
318
318
  --color-sf-link-button-border-focus: #242424;
319
319
  --color-sf-chip-bg-color: #f5f5f5;
320
- --color-sf-chip-border-color: rgba(0, 0, 0, 0);
320
+ --color-sf-chip-border-color: #f5f5f5;
321
321
  --color-sf-chip-bg-disabled: #f0f0f0;
322
322
  --color-sf-chip-border-disabled: #fff;
323
323
  --color-sf-secondary-outline-button-text-color-hover: #242424;
@@ -369,7 +369,7 @@
369
369
  --color-sf-flyout-bg-color-pressed: var(--color-sf-black);
370
370
  --color-sf-flyout-bg-color-selected: #383838;
371
371
  --color-sf-flyout-bg-color-focus: var(--color-sf-flyout-bg-color-hover);
372
- --color-sf-overlay-bg-color: rgba($black, .4);
372
+ --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
373
373
  --color-sf-table-bg-color-hover: #383838;
374
374
  --color-sf-table-bg-color-pressed: #2e2e2e;
375
375
  --color-sf-table-bg-color-selected: #082338;
@@ -406,7 +406,7 @@
406
406
  --color-sf-border-focus: var(--color-sf-border);
407
407
  --color-sf-border-selected: #6b6b6b;
408
408
  --color-sf-border-dragged: var(--color-sf-primary);
409
- --color-sf-border-disabled: #08233b;
409
+ --color-sf-border-disabled: #424242;
410
410
  --color-sf-border-warning: #bc4b09;
411
411
  --color-sf-border-error: #dc626d;
412
412
  --color-sf-border-success: #9fd89f;
@@ -478,7 +478,7 @@
478
478
  --color-sf-success-bg-color: #218c21;
479
479
  --color-sf-success-border-color: var(--color-sf-success-bg-color);
480
480
  --color-sf-success-text: var(--color-sf-primary-text-color);
481
- --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
481
+ --color-sf-success-bg-color-hover: #0e700e;
482
482
  --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
483
483
  --color-sf-success-text-hover: var(--color-sf-primary-text-color);
484
484
  --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
496
496
  --color-sf-warning-bg-color: #f87528;
497
497
  --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
498
498
  --color-sf-warning-text: #242424;
499
- --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
499
+ --color-sf-warning-bg-color-hover: #de590b;
500
500
  --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
501
501
  --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
502
502
  --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
555
555
  --color-sf-info-outline: #0099bc;
556
556
  --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
557
557
  --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
558
- --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
558
+ --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
559
559
  --color-sf-toast-text-color: var(--color-sf-content-text-color);
560
560
  --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
561
561
  --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -569,7 +569,7 @@
569
569
  --color-sf-diagram-palette-background: #e0e0e0;
570
570
  --color-sf-diagram-palette-hover-background: #bdbdbd;
571
571
  --color-sf-diagram-palette-selected-background: var(--color-sf-diagram-palette-hover-background);
572
- --color-sf-rating-selected-color: var(--color-sf-content-text-color);
572
+ --color-sf-rating-selected-color: #fff;
573
573
  --color-sf-rating-unrated-color: var(--color-sf-content-text-color);
574
574
  --color-sf-rating-selected-disabled-color: #575757;
575
575
  --color-sf-rating-unrated-disabled-color: #4d4d4d;
@@ -581,9 +581,9 @@
581
581
  --color-sf-msg-border-color: var(--color-sf-border);
582
582
  --color-sf-msg-color-alt1: var(--color-sf-content-text-color);
583
583
  --color-sf-msg-bg-color-alt1: transparent;
584
- --color-sf-msg-border-color-alt1: var(--color-sf-msg-bg-color);
584
+ --color-sf-msg-border-color-alt1: #666666;
585
585
  --color-sf-msg-color-alt2: #242424;
586
- --color-sf-msg-bg-color-alt2: #adadad;
586
+ --color-sf-msg-bg-color-alt2: #c2c2c2;
587
587
  --color-sf-msg-border-color-alt2: var(--color-sf-msg-bg-color-alt2);
588
588
  --color-sf-msg-icon-color: var(--color-sf-msg-bg-color-alt2);
589
589
  --color-sf-msg-icon-color-alt1: var(--color-sf-msg-icon-color);
@@ -594,9 +594,9 @@
594
594
  --color-sf-msg-success-color: var(--color-sf-content-text-color);
595
595
  --color-sf-msg-success-bg-color: #052505;
596
596
  --color-sf-msg-success-border-color: #107c10;
597
- --color-sf-msg-success-color-alt1: var(--color-sf-success);
597
+ --color-sf-msg-success-color-alt1: #54b054;
598
598
  --color-sf-msg-success-bg-color-alt1: transparent;
599
- --color-sf-msg-success-border-color-alt1: var(--color-sf-msg-success-color);
599
+ --color-sf-msg-success-border-color-alt1: #218c21;
600
600
  --color-sf-msg-success-color-alt2: #fff;
601
601
  --color-sf-msg-success-bg-color-alt2: #107c10;
602
602
  --color-sf-msg-success-border-color-alt2: var(--color-sf-msg-success-bg-color-alt2);
@@ -609,9 +609,9 @@
609
609
  --color-sf-msg-danger-color: var(--color-sf-content-text-color);
610
610
  --color-sf-msg-danger-bg-color: #3b0509;
611
611
  --color-sf-msg-danger-border-color: #c50f1f;
612
- --color-sf-msg-danger-color-alt1: var(--color-sf-danger);
612
+ --color-sf-msg-danger-color-alt1: #dc626d;
613
613
  --color-sf-msg-danger-bg-color-alt1: transparent;
614
- --color-sf-msg-danger-border-color-alt1: var(--color-sf-msg-danger-border-color);
614
+ --color-sf-msg-danger-border-color-alt1: #d33f4c;
615
615
  --color-sf-msg-danger-color-alt2: #fff;
616
616
  --color-sf-msg-danger-bg-color-alt2: #c50f1f;
617
617
  --color-sf-msg-danger-border-color-alt2: var(--color-sf-msg-danger-bg-color-alt2);
@@ -624,9 +624,9 @@
624
624
  --color-sf-msg-info-color: var(--color-sf-content-text-color);
625
625
  --color-sf-msg-info-bg-color: #002e38;
626
626
  --color-sf-msg-info-border-color: #0099bc;
627
- --color-sf-msg-info-color-alt1: var(--color-sf-info);
627
+ --color-sf-msg-info-color-alt1: #56bfd7;
628
628
  --color-sf-msg-info-bg-color-alt1: transparent;
629
- --color-sf-msg-info-border-color-alt1: var(--color-sf-msg-info-border-color);
629
+ --color-sf-msg-info-border-color-alt1: #31afdd;
630
630
  --color-sf-msg-info-color-alt2: #fff;
631
631
  --color-sf-msg-info-bg-color-alt2: #0099bc;
632
632
  --color-sf-msg-info-border-color-alt2: var(--color-sf-msg-info-bg-color-alt2);
@@ -639,9 +639,9 @@
639
639
  --color-sf-msg-warning-color: var(--color-sf-content-text-color);
640
640
  --color-sf-msg-warning-bg-color: #411200;
641
641
  --color-sf-msg-warning-border-color: #da3b01;
642
- --color-sf-msg-warning-color-alt1: var(--color-sf-warning);
642
+ --color-sf-msg-warning-color-alt1: #e9835e;
643
643
  --color-sf-msg-warning-bg-color-alt1: transparent;
644
- --color-sf-msg-warning-border-color-alt1: var(--color-sf-msg-warning-border-color);
644
+ --color-sf-msg-warning-border-color-alt1: #e36537;
645
645
  --color-sf-msg-warning-color-alt2: #fff;
646
646
  --color-sf-msg-warning-bg-color-alt2: #da3b01;
647
647
  --color-sf-msg-warning-border-color-alt2: var(--color-sf-msg-warning-bg-color-alt2);
@@ -659,7 +659,7 @@
659
659
  --color-sf-link-button-focus: #115ea3;
660
660
  --color-sf-link-button-border-focus: #fff;
661
661
  --color-sf-chip-bg-color: #141414;
662
- --color-sf-chip-border-color: rgba(0, 0, 0, 0);
662
+ --color-sf-chip-border-color: #141414;
663
663
  --color-sf-chip-bg-disabled: #141414;
664
664
  --color-sf-chip-border-disabled: rgba(0, 0, 0, 0);
665
665
  --color-sf-secondary-outline-button-text-color-hover: #fff;
@@ -711,10 +711,10 @@
711
711
  --color-sf-flyout-bg-color-pressed: var(--color-sf-content-bg-color-hover);
712
712
  --color-sf-flyout-bg-color-selected: var(--color-sf-content-bg-color-hover);
713
713
  --color-sf-flyout-bg-color-focus: var(--color-sf-content-bg-color-hover);
714
- --color-sf-overlay-bg-color: rgba($black, .4);
715
- --color-sf-table-bg-color-hover: var(--color-sf-black);
716
- --color-sf-table-bg-color-pressed: var(--color-sf-black);
717
- --color-sf-table-bg-color-selected: var(--color-sf-black);
714
+ --color-sf-overlay-bg-color: rgba(0, 0, 0, .4);
715
+ --color-sf-table-bg-color-hover: #1a3bff;
716
+ --color-sf-table-bg-color-pressed: #1a3bff;
717
+ --color-sf-table-bg-color-selected: #1a3bff;
718
718
  --color-sf-content-text-color: #fff;
719
719
  --color-sf-content-text-color-alt1: var(--color-sf-content-text-color);
720
720
  --color-sf-content-text-color-alt2: var(--color-sf-content-text-color);
@@ -724,7 +724,7 @@
724
724
  --color-sf-content-text-color-focus: var(--color-sf-content-text-color-hover);
725
725
  --color-sf-content-text-color-selected: var(--color-sf-content-text-color-hover);
726
726
  --color-sf-content-text-color-dragged: #000;
727
- --color-sf-content-text-color-disabled: var(--color-sf-content-bg-color-disabled);
727
+ --color-sf-content-text-color-disabled: #3ff23f;
728
728
  --color-sf-placeholder-text-color: var(--color-sf-content-text-color);
729
729
  --color-sf-flyout-text-color: var(--color-sf-content-text-color);
730
730
  --color-sf-flyout-text-color-hover: var(--color-sf-content-text-color-hover);
@@ -732,12 +732,12 @@
732
732
  --color-sf-flyout-text-color-selected: var(--color-sf-content-text-color-hover);
733
733
  --color-sf-flyout-text-color-focus: var(--color-sf-content-text-color-hover);
734
734
  --color-sf-flyout-text-color-disabled: var(--color-sf-content-text-color-disabled);
735
- --color-sf-table-text-color-hover: var(--color-sf-content-text-color-hover);
736
- --color-sf-table-text-color-pressed: var(--color-sf-content-text-color-hover);
737
- --color-sf-table-text-color-selected: var(--color-sf-content-text-color-hover);
735
+ --color-sf-table-text-color-hover: #000;
736
+ --color-sf-table-text-color-pressed: #000;
737
+ --color-sf-table-text-color-selected: #000;
738
738
  --color-sf-icon-color: #fff;
739
- --color-sf-icon-color-hover: var(--color-sf-content-text-color-hover);
740
- --color-sf-icon-color-pressed: var(--color-sf-content-text-color-hover);
739
+ --color-sf-icon-color-hover: #000;
740
+ --color-sf-icon-color-pressed: #000;
741
741
  --color-sf-icon-color-disabled: var(--color-sf-content-text-color-disabled);
742
742
  --color-sf-border-light: #fff;
743
743
  --color-sf-border: var(--color-sf-border-light);
@@ -748,12 +748,12 @@
748
748
  --color-sf-border-focus: var(--color-sf-border-hover);
749
749
  --color-sf-border-selected: var(--color-sf-border-hover);
750
750
  --color-sf-border-dragged: var(--color-sf-border-light);
751
- --color-sf-border-disabled: #fff;
751
+ --color-sf-border-disabled: #3ff23f;
752
752
  --color-sf-border-warning: #f7630c;
753
753
  --color-sf-border-error: #c50f1f;
754
754
  --color-sf-border-success: #107c10;
755
755
  --color-sf-border-info: #0099bc;
756
- --color-sf-spreadsheet-gridline: var(--color-sf-border-light);
756
+ --color-sf-spreadsheet-gridline: #e6e6e6;
757
757
  --color-sf-flyout-border: var(--color-sf-border-light);
758
758
  --color-sf-primary: #1aebff;
759
759
  --color-sf-primary-text-color: #000;
@@ -897,7 +897,7 @@
897
897
  --color-sf-info-outline: #0099bc;
898
898
  --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
899
899
  --color-sf-tooltip-border: var(--color-sf-border-light);
900
- --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
900
+ --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
901
901
  --color-sf-toast-text-color: var(--color-sf-content-text-color);
902
902
  --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
903
903
  --color-sf-appbar-bg-color-alt1: #fff;
@@ -911,7 +911,7 @@
911
911
  --color-sf-diagram-palette-background: #000;
912
912
  --color-sf-diagram-palette-hover-background: var(--color-sf-content-bg-color-hover);
913
913
  --color-sf-diagram-palette-selected-background: var(--color-sf-diagram-palette-hover-background);
914
- --color-sf-rating-selected-color: var(--color-sf-content-text-color);
914
+ --color-sf-rating-selected-color: #fff;
915
915
  --color-sf-rating-unrated-color: var(--color-sf-content-text-color);
916
916
  --color-sf-rating-selected-disabled-color: var(--color-sf-content-text-color-disabled);
917
917
  --color-sf-rating-unrated-disabled-color: var(--color-sf-content-text-color-disabled);
@@ -936,7 +936,7 @@
936
936
  --color-sf-msg-success-color: #107c10;
937
937
  --color-sf-msg-success-bg-color: #000;
938
938
  --color-sf-msg-success-border-color: var(--color-sf-msg-success-color);
939
- --color-sf-msg-success-color-alt1: var(--color-sf-success);
939
+ --color-sf-msg-success-color-alt1: #107c10;
940
940
  --color-sf-msg-success-bg-color-alt1: var(--color-sf-msg-success-bg-color);
941
941
  --color-sf-msg-success-border-color-alt1: #fff;
942
942
  --color-sf-msg-success-color-alt2: var(--color-sf-msg-success-bg-color);
@@ -951,7 +951,7 @@
951
951
  --color-sf-msg-danger-color: #c50f1f;
952
952
  --color-sf-msg-danger-bg-color: #000;
953
953
  --color-sf-msg-danger-border-color: var(--color-sf-msg-danger-color);
954
- --color-sf-msg-danger-color-alt1: var(--color-sf-danger);
954
+ --color-sf-msg-danger-color-alt1: #c50f1f;
955
955
  --color-sf-msg-danger-bg-color-alt1: var(--color-sf-msg-danger-bg-color);
956
956
  --color-sf-msg-danger-border-color-alt1: #fff;
957
957
  --color-sf-msg-danger-color-alt2: var(--color-sf-msg-danger-bg-color);
@@ -966,7 +966,7 @@
966
966
  --color-sf-msg-info-color: #0099bc;
967
967
  --color-sf-msg-info-bg-color: #000;
968
968
  --color-sf-msg-info-border-color: var(--color-sf-msg-info-color);
969
- --color-sf-msg-info-color-alt1: var(--color-sf-info);
969
+ --color-sf-msg-info-color-alt1: #0099bc;
970
970
  --color-sf-msg-info-bg-color-alt1: var(--color-sf-msg-info-bg-color);
971
971
  --color-sf-msg-info-border-color-alt1: #fff;
972
972
  --color-sf-msg-info-color-alt2: var(--color-sf-msg-info-bg-color);
@@ -981,7 +981,7 @@
981
981
  --color-sf-msg-warning-color: #f7630c;
982
982
  --color-sf-msg-warning-bg-color: #000;
983
983
  --color-sf-msg-warning-border-color: #da3b01;
984
- --color-sf-msg-warning-color-alt1: var(--color-sf-warning);
984
+ --color-sf-msg-warning-color-alt1: #f7630c;
985
985
  --color-sf-msg-warning-bg-color-alt1: var(--color-sf-msg-warning-bg-color);
986
986
  --color-sf-msg-warning-border-color-alt1: #fff;
987
987
  --color-sf-msg-warning-color-alt2: var(--color-sf-msg-warning-bg-color);
@@ -1022,7 +1022,7 @@
1022
1022
  --color-sf-secondary-badge-border-color: #fff;
1023
1023
  --color-sf-secondary-badge-bg-color: #000;
1024
1024
  --color-sf-secondary-badge-bg-color-focus: #fff;
1025
- --color-sf-skeleton-bg-color: #ffffff;
1025
+ --color-sf-skeleton-bg-color: #fff;
1026
1026
  --color-sf-tab-selected-bg-color-disabled: #000;
1027
1027
  --color-sf-tab-selected-text-color-disabled: #3ff23f;
1028
1028
  --color-sf-ribbon-border-color: #fff;
@@ -1058,6 +1058,9 @@
1058
1058
  position: relative;
1059
1059
  width: 40px;
1060
1060
  }
1061
+ .e-avatar:has(:not(img)) {
1062
+ border: 1px solid var(--color-sf-dialog-border);
1063
+ }
1061
1064
  .e-avatar img {
1062
1065
  height: 100%;
1063
1066
  width: auto;
package/styles/card/_fluent2-definition.scss CHANGED
@@ -40,9 +40,9 @@ $card-action-btn-nrml-height: 30px !default;
40
40
  $card-action-btn-nrml-margin: 0 0 0 6px !default;
41
41
  $card-action-btn-nrml-padding: 0 6px !default;
42
42
  $card-nrml-content-padding: 0 12px 12px !default;
43
- $card-header-txt-nrml-title-font: $text-sm !default;
44
- $card-header-txt-nrml-subtitle-font: $text-sm !default;
45
- $card-image-title-font: $text-base !default;
43
+ $card-header-txt-nrml-title-font: 14px !default;
44
+ $card-header-txt-nrml-subtitle-font: 12px !default;
45
+ $card-image-title-font: 14px !default;
46
46
  $card-action-btn-icon-width: 24px !default; //Need to check UI
47
47
  $card-action-btn-icon-height: 24px !default; //Need to check UI
48
48
  // Touch
@@ -74,7 +74,7 @@ $card-action-btn-bigger-margin: 0 0 0 8px !default;
74
74
  $card-action-btn-bigger-padding: 0 6px !default;
75
75
  $card-bigger-content-padding: 0 16px 16px 16px !default;
76
76
  $card-header-txt-bigger-title-font: $text-base !default;
77
- $card-header-txt-bigger-subtitle-font: $text-base !default;
77
+ $card-header-txt-bigger-subtitle-font: 14px !default;
78
78
  $card-image-title-bigger-font: 16px !default;
79
79
  $card-action-btn-bigger-icon-width: 24px !default; //Need to chek UI
80
80
  $card-action-btn-bigger-icon-height: 24px !default; //Need to check UI
package/styles/card/_layout.scss CHANGED
@@ -68,6 +68,9 @@
68
68
  .e-card-header-title {
69
69
  font-size: $card-header-txt-bigger-title-font;
70
70
  line-height: $card-header-txt-title-bigger-lheight;
71
+ @if $skin-name == 'fluent2' {
72
+ font-weight: 600;
73
+ }
71
74
  }
72
75
 
73
76
  .e-card-sub-title {
@@ -98,6 +101,9 @@
98
101
  line-height: $card-image-title-bigger-lheight;
99
102
  min-height: $card-image-title-bigger-mheight;
100
103
  padding: $card-img-title-bigger-padding;
104
+ @if $skin-name == 'fluent2' {
105
+ font-weight: 600;
106
+ }
101
107
  }
102
108
  }
103
109
 
@@ -138,6 +144,9 @@
138
144
 
139
145
  .e-card-content {
140
146
  padding: $card-bigger-content-padding;
147
+ @if $skin-name == 'fluent2' {
148
+ font-size: 16px;
149
+ }
141
150
 
142
151
  + :not(.e-card-content),
143
152
  + .e-card-actions.e-card-vertical {
@@ -338,7 +347,7 @@
338
347
  .e-card-header-title {
339
348
  font-size: $card-header-txt-nrml-title-font;
340
349
  font-weight: normal;
341
- @if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
350
+ @if $skin-name == 'fabric' or $skin-name == 'highcontrast' or $skin-name == 'fluent2' {
342
351
  font-weight: 600;
343
352
  }
344
353
  line-height: $card-header-txt-title-lheight;
@@ -387,6 +396,9 @@
387
396
  position: absolute;
388
397
  text-overflow: ellipsis;
389
398
  width: inherit;
399
+ @if $skin-name == 'fluent2' {
400
+ font-weight: 600;
401
+ }
390
402
 
391
403
  &.e-card-top-left,
392
404
  &.e-card-top-right {