@syncfusion/blazor-themes 22.1.39 → 22.2.5

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 (82) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +44 -22
  2. package/SCSS-Themes/bootstrap.scss +44 -22
  3. package/SCSS-Themes/bootstrap4.scss +44 -22
  4. package/SCSS-Themes/bootstrap5-dark.scss +44 -22
  5. package/SCSS-Themes/bootstrap5.scss +44 -22
  6. package/SCSS-Themes/fabric-dark.scss +44 -22
  7. package/SCSS-Themes/fabric.scss +44 -22
  8. package/SCSS-Themes/fluent-dark.scss +44 -22
  9. package/SCSS-Themes/fluent.scss +44 -22
  10. package/SCSS-Themes/gantt/gantt/bootstrap-dark.scss +0 -1
  11. package/SCSS-Themes/gantt/gantt/bootstrap.scss +0 -1
  12. package/SCSS-Themes/gantt/gantt/bootstrap4.scss +0 -1
  13. package/SCSS-Themes/gantt/gantt/bootstrap5-dark.scss +0 -1
  14. package/SCSS-Themes/gantt/gantt/bootstrap5.scss +0 -1
  15. package/SCSS-Themes/gantt/gantt/fabric-dark.scss +0 -1
  16. package/SCSS-Themes/gantt/gantt/fabric.scss +0 -1
  17. package/SCSS-Themes/gantt/gantt/fluent-dark.scss +0 -1
  18. package/SCSS-Themes/gantt/gantt/fluent.scss +0 -1
  19. package/SCSS-Themes/gantt/gantt/highcontrast.scss +0 -1
  20. package/SCSS-Themes/gantt/gantt/material-dark.scss +0 -1
  21. package/SCSS-Themes/gantt/gantt/material.scss +0 -1
  22. package/SCSS-Themes/gantt/gantt/material3-dark.scss +0 -1
  23. package/SCSS-Themes/gantt/gantt/material3.scss +0 -1
  24. package/SCSS-Themes/gantt/gantt/tailwind-dark.scss +0 -1
  25. package/SCSS-Themes/gantt/gantt/tailwind.scss +0 -1
  26. package/SCSS-Themes/grids/grid/material.scss +2 -2
  27. package/SCSS-Themes/highcontrast.scss +44 -22
  28. package/SCSS-Themes/material-dark.scss +44 -22
  29. package/SCSS-Themes/material.scss +46 -24
  30. package/SCSS-Themes/material3-dark.scss +44 -22
  31. package/SCSS-Themes/material3.scss +44 -22
  32. package/SCSS-Themes/navigations/pager/bootstrap-dark.scss +3 -1
  33. package/SCSS-Themes/navigations/pager/bootstrap.scss +3 -1
  34. package/SCSS-Themes/navigations/pager/bootstrap4.scss +3 -1
  35. package/SCSS-Themes/navigations/pager/bootstrap5-dark.scss +3 -1
  36. package/SCSS-Themes/navigations/pager/bootstrap5.scss +3 -1
  37. package/SCSS-Themes/navigations/pager/fabric-dark.scss +3 -1
  38. package/SCSS-Themes/navigations/pager/fabric.scss +3 -1
  39. package/SCSS-Themes/navigations/pager/fluent-dark.scss +3 -1
  40. package/SCSS-Themes/navigations/pager/fluent.scss +3 -1
  41. package/SCSS-Themes/navigations/pager/highcontrast.scss +3 -1
  42. package/SCSS-Themes/navigations/pager/material-dark.scss +3 -1
  43. package/SCSS-Themes/navigations/pager/material.scss +3 -1
  44. package/SCSS-Themes/navigations/pager/material3-dark.scss +3 -1
  45. package/SCSS-Themes/navigations/pager/material3.scss +3 -1
  46. package/SCSS-Themes/navigations/pager/tailwind-dark.scss +3 -1
  47. package/SCSS-Themes/navigations/pager/tailwind.scss +3 -1
  48. package/SCSS-Themes/pivotview/pivotview/bootstrap-dark.scss +40 -19
  49. package/SCSS-Themes/pivotview/pivotview/bootstrap.scss +40 -19
  50. package/SCSS-Themes/pivotview/pivotview/bootstrap4.scss +40 -19
  51. package/SCSS-Themes/pivotview/pivotview/bootstrap5-dark.scss +40 -19
  52. package/SCSS-Themes/pivotview/pivotview/bootstrap5.scss +40 -19
  53. package/SCSS-Themes/pivotview/pivotview/fabric-dark.scss +40 -19
  54. package/SCSS-Themes/pivotview/pivotview/fabric.scss +40 -19
  55. package/SCSS-Themes/pivotview/pivotview/fluent-dark.scss +40 -19
  56. package/SCSS-Themes/pivotview/pivotview/fluent.scss +40 -19
  57. package/SCSS-Themes/pivotview/pivotview/highcontrast.scss +40 -19
  58. package/SCSS-Themes/pivotview/pivotview/material-dark.scss +40 -19
  59. package/SCSS-Themes/pivotview/pivotview/material.scss +40 -19
  60. package/SCSS-Themes/pivotview/pivotview/material3-dark.scss +40 -19
  61. package/SCSS-Themes/pivotview/pivotview/material3.scss +40 -19
  62. package/SCSS-Themes/pivotview/pivotview/tailwind-dark.scss +40 -19
  63. package/SCSS-Themes/pivotview/pivotview/tailwind.scss +40 -19
  64. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap-dark.scss +1 -1
  65. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap.scss +1 -1
  66. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap4.scss +1 -1
  67. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5-dark.scss +1 -1
  68. package/SCSS-Themes/splitbuttons/drop-down-button/bootstrap5.scss +1 -1
  69. package/SCSS-Themes/splitbuttons/drop-down-button/fabric-dark.scss +1 -1
  70. package/SCSS-Themes/splitbuttons/drop-down-button/fabric.scss +1 -1
  71. package/SCSS-Themes/splitbuttons/drop-down-button/fluent-dark.scss +1 -1
  72. package/SCSS-Themes/splitbuttons/drop-down-button/fluent.scss +1 -1
  73. package/SCSS-Themes/splitbuttons/drop-down-button/highcontrast.scss +1 -1
  74. package/SCSS-Themes/splitbuttons/drop-down-button/material-dark.scss +1 -1
  75. package/SCSS-Themes/splitbuttons/drop-down-button/material.scss +1 -1
  76. package/SCSS-Themes/splitbuttons/drop-down-button/material3-dark.scss +1 -1
  77. package/SCSS-Themes/splitbuttons/drop-down-button/material3.scss +1 -1
  78. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind-dark.scss +1 -1
  79. package/SCSS-Themes/splitbuttons/drop-down-button/tailwind.scss +1 -1
  80. package/SCSS-Themes/tailwind-dark.scss +44 -22
  81. package/SCSS-Themes/tailwind.scss +44 -22
  82. package/package.json +1 -1
@@ -427,7 +427,9 @@ $pager-focus-shadow: 0 0 0 1px $neutral-secondary inset !default;
427
427
  box-sizing: border-box;
428
428
  }
429
429
 
430
- .e-pager-default.e-hide {
430
+ .e-pager-default.e-hide,
431
+ .e-pagesizes.e-hide,
432
+ .e-hide {
431
433
  display: none;
432
434
  }
433
435
 
@@ -432,7 +432,9 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
432
432
  box-sizing: border-box;
433
433
  }
434
434
 
435
- .e-pager-default.e-hide {
435
+ .e-pager-default.e-hide,
436
+ .e-pagesizes.e-hide,
437
+ .e-hide {
436
438
  display: none;
437
439
  }
438
440
 
@@ -432,7 +432,9 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
432
432
  box-sizing: border-box;
433
433
  }
434
434
 
435
- .e-pager-default.e-hide {
435
+ .e-pager-default.e-hide,
436
+ .e-pagesizes.e-hide,
437
+ .e-hide {
436
438
  display: none;
437
439
  }
438
440
 
@@ -427,7 +427,9 @@ $pager-focus-shadow: 0 0 0 1px $border-default inset !default;
427
427
  box-sizing: border-box;
428
428
  }
429
429
 
430
- .e-pager-default.e-hide {
430
+ .e-pager-default.e-hide,
431
+ .e-pagesizes.e-hide,
432
+ .e-hide {
431
433
  display: none;
432
434
  }
433
435
 
@@ -431,7 +431,9 @@ $pager-focus-shadow: 0 0 0 1px rgba($grey-white, .5) inset !default;
431
431
  box-sizing: border-box;
432
432
  }
433
433
 
434
- .e-pager-default.e-hide {
434
+ .e-pager-default.e-hide,
435
+ .e-pagesizes.e-hide,
436
+ .e-hide {
435
437
  display: none;
436
438
  }
437
439
 
@@ -429,7 +429,9 @@ $pager-focus-shadow: 0 0 0 1px $grey-500 inset !default;
429
429
  box-sizing: border-box;
430
430
  }
431
431
 
432
- .e-pager-default.e-hide {
432
+ .e-pager-default.e-hide,
433
+ .e-pagesizes.e-hide,
434
+ .e-hide {
433
435
  display: none;
434
436
  }
435
437
 
@@ -445,7 +445,9 @@ $pager-focus-shadow: 0 0 0 1px rgba($primary) inset !default;
445
445
  box-sizing: border-box;
446
446
  }
447
447
 
448
- .e-pager-default.e-hide {
448
+ .e-pager-default.e-hide,
449
+ .e-pagesizes.e-hide,
450
+ .e-hide {
449
451
  display: none;
450
452
  }
451
453
 
@@ -445,7 +445,9 @@ $pager-focus-shadow: 0 0 0 1px rgba($primary) inset !default;
445
445
  box-sizing: border-box;
446
446
  }
447
447
 
448
- .e-pager-default.e-hide {
448
+ .e-pager-default.e-hide,
449
+ .e-pagesizes.e-hide,
450
+ .e-hide {
449
451
  display: none;
450
452
  }
451
453
 
@@ -431,7 +431,9 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
431
431
  box-sizing: border-box;
432
432
  }
433
433
 
434
- .e-pager-default.e-hide {
434
+ .e-pager-default.e-hide,
435
+ .e-pagesizes.e-hide,
436
+ .e-hide {
435
437
  display: none;
436
438
  }
437
439
 
@@ -431,7 +431,9 @@ $pager-focus-shadow: 0 0 0 1px $primary inset !default;
431
431
  box-sizing: border-box;
432
432
  }
433
433
 
434
- .e-pager-default.e-hide {
434
+ .e-pager-default.e-hide,
435
+ .e-pagesizes.e-hide,
436
+ .e-hide {
435
437
  display: none;
436
438
  }
437
439
 
@@ -168,6 +168,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
168
168
  $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
169
169
  $pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
170
170
  $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
171
+ $pivotgrid-cell-value-margin-top: 5px !default;
171
172
 
172
173
  //enddefault
173
174
 
@@ -873,6 +874,12 @@ $pivotpager-single-size-title-padding: 8px !default;
873
874
  }
874
875
  }
875
876
 
877
+ &.sf-pivotview {
878
+ .e-pivot-toolbar {
879
+ box-sizing: border-box;
880
+ }
881
+ }
882
+
876
883
  .e-pivot-toolbar {
877
884
  background: $pivotgrid-grp-bg-color;
878
885
  border-bottom: 0;
@@ -1382,6 +1389,32 @@ $pivotpager-single-size-title-padding: 8px !default;
1382
1389
 
1383
1390
  /*! PivotView theme */
1384
1391
  .e-pivotview {
1392
+ .e-pivotcell-container {
1393
+ display: flex;
1394
+
1395
+ .e-stackedheadertext,
1396
+ .e-headertext {
1397
+ &.e-cellvalue {
1398
+ overflow: hidden;
1399
+ text-overflow: ellipsis;
1400
+ }
1401
+ }
1402
+
1403
+ .e-sortfilterdiv.e-value-sort-icon {
1404
+ align-items: center;
1405
+ display: flex;
1406
+ }
1407
+ }
1408
+
1409
+ .e-gridclip .e-pivotcell-container {
1410
+ .e-stackedheadertext,
1411
+ .e-headertext {
1412
+ &.e-cellvalue {
1413
+ text-overflow: clip;
1414
+ }
1415
+ }
1416
+ }
1417
+
1385
1418
  .e-nextspan {
1386
1419
  display: inline-block;
1387
1420
  width: $pivotview-indent-space-size;
@@ -1530,19 +1563,7 @@ $pivotpager-single-size-title-padding: 8px !default;
1530
1563
 
1531
1564
  div {
1532
1565
  &.e-cellvalue {
1533
- margin-top: 5px;
1534
-
1535
- @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
1536
- margin-top: 0;
1537
- }
1538
-
1539
- @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
1540
- margin-top: 2px;
1541
- }
1542
-
1543
- @if ($skin-name == 'FluentUI') {
1544
- margin-top: 1px;
1545
- }
1566
+ margin-top: $pivotgrid-cell-value-margin-top;
1546
1567
  }
1547
1568
 
1548
1569
  div span.e-value-sort-icon {
@@ -1576,12 +1597,12 @@ $pivotpager-single-size-title-padding: 8px !default;
1576
1597
  }
1577
1598
  }
1578
1599
 
1579
- .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
1580
- margin: $pivotgrid-vsort-column-margin !important;
1581
- }
1582
-
1583
- .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1584
- margin: $pivotgrid-vsort-column-parent-margin !important;
1600
+ .e-stackedheadercelldiv, .e-headercelldiv {
1601
+ .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
1602
+ margin: $pivotgrid-vsort-column-parent-margin !important;
1603
+ margin-left: auto !important;
1604
+ margin-top: $pivotgrid-cell-value-margin-top !important;
1605
+ }
1585
1606
  }
1586
1607
 
1587
1608
  .e-rowsheader .e-sortfilterdiv {
@@ -167,6 +167,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
167
167
  $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
168
168
  $pivotgrid-excelfilter-member-editor-node-limit-height: 100px !default;
169
169
  $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
170
+ $pivotgrid-cell-value-margin-top: 5px !default;
170
171
 
171
172
  /*! component's common definitions and variables */
172
173
  $pivotgrid-grouping-height: 28px !default;
@@ -870,6 +871,12 @@ $pivotpager-single-size-title-padding: 8px !default;
870
871
  }
871
872
  }
872
873
 
874
+ &.sf-pivotview {
875
+ .e-pivot-toolbar {
876
+ box-sizing: border-box;
877
+ }
878
+ }
879
+
873
880
  .e-pivot-toolbar {
874
881
  background: $pivotgrid-grp-bg-color;
875
882
  border-bottom: 0;
@@ -1379,6 +1386,32 @@ $pivotpager-single-size-title-padding: 8px !default;
1379
1386
 
1380
1387
  /*! PivotView theme */
1381
1388
  .e-pivotview {
1389
+ .e-pivotcell-container {
1390
+ display: flex;
1391
+
1392
+ .e-stackedheadertext,
1393
+ .e-headertext {
1394
+ &.e-cellvalue {
1395
+ overflow: hidden;
1396
+ text-overflow: ellipsis;
1397
+ }
1398
+ }
1399
+
1400
+ .e-sortfilterdiv.e-value-sort-icon {
1401
+ align-items: center;
1402
+ display: flex;
1403
+ }
1404
+ }
1405
+
1406
+ .e-gridclip .e-pivotcell-container {
1407
+ .e-stackedheadertext,
1408
+ .e-headertext {
1409
+ &.e-cellvalue {
1410
+ text-overflow: clip;
1411
+ }
1412
+ }
1413
+ }
1414
+
1382
1415
  .e-nextspan {
1383
1416
  display: inline-block;
1384
1417
  width: $pivotview-indent-space-size;
@@ -1527,19 +1560,7 @@ $pivotpager-single-size-title-padding: 8px !default;
1527
1560
 
1528
1561
  div {
1529
1562
  &.e-cellvalue {
1530
- margin-top: 5px;
1531
-
1532
- @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
1533
- margin-top: 0;
1534
- }
1535
-
1536
- @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
1537
- margin-top: 2px;
1538
- }
1539
-
1540
- @if ($skin-name == 'FluentUI') {
1541
- margin-top: 1px;
1542
- }
1563
+ margin-top: $pivotgrid-cell-value-margin-top;
1543
1564
  }
1544
1565
 
1545
1566
  div span.e-value-sort-icon {
@@ -1573,12 +1594,12 @@ $pivotpager-single-size-title-padding: 8px !default;
1573
1594
  }
1574
1595
  }
1575
1596
 
1576
- .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
1577
- margin: $pivotgrid-vsort-column-margin !important;
1578
- }
1579
-
1580
- .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1581
- margin: $pivotgrid-vsort-column-parent-margin !important;
1597
+ .e-stackedheadercelldiv, .e-headercelldiv {
1598
+ .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
1599
+ margin: $pivotgrid-vsort-column-parent-margin !important;
1600
+ margin-left: auto !important;
1601
+ margin-top: $pivotgrid-cell-value-margin-top !important;
1602
+ }
1582
1603
  }
1583
1604
 
1584
1605
  .e-rowsheader .e-sortfilterdiv {
@@ -167,6 +167,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
167
167
  $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
168
168
  $pivotgrid-excelfilter-member-editor-node-limit-height: 115px !default;
169
169
  $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
170
+ $pivotgrid-cell-value-margin-top: 5px !default;
170
171
 
171
172
  /*! component's common definitions and variables */
172
173
  $pivotgrid-grouping-height: 30px !default;
@@ -870,6 +871,12 @@ $pivotpager-single-size-title-padding: 8px !default;
870
871
  }
871
872
  }
872
873
 
874
+ &.sf-pivotview {
875
+ .e-pivot-toolbar {
876
+ box-sizing: border-box;
877
+ }
878
+ }
879
+
873
880
  .e-pivot-toolbar {
874
881
  background: $pivotgrid-grp-bg-color;
875
882
  border-bottom: 0;
@@ -1379,6 +1386,32 @@ $pivotpager-single-size-title-padding: 8px !default;
1379
1386
 
1380
1387
  /*! PivotView theme */
1381
1388
  .e-pivotview {
1389
+ .e-pivotcell-container {
1390
+ display: flex;
1391
+
1392
+ .e-stackedheadertext,
1393
+ .e-headertext {
1394
+ &.e-cellvalue {
1395
+ overflow: hidden;
1396
+ text-overflow: ellipsis;
1397
+ }
1398
+ }
1399
+
1400
+ .e-sortfilterdiv.e-value-sort-icon {
1401
+ align-items: center;
1402
+ display: flex;
1403
+ }
1404
+ }
1405
+
1406
+ .e-gridclip .e-pivotcell-container {
1407
+ .e-stackedheadertext,
1408
+ .e-headertext {
1409
+ &.e-cellvalue {
1410
+ text-overflow: clip;
1411
+ }
1412
+ }
1413
+ }
1414
+
1382
1415
  .e-nextspan {
1383
1416
  display: inline-block;
1384
1417
  width: $pivotview-indent-space-size;
@@ -1527,19 +1560,7 @@ $pivotpager-single-size-title-padding: 8px !default;
1527
1560
 
1528
1561
  div {
1529
1562
  &.e-cellvalue {
1530
- margin-top: 5px;
1531
-
1532
- @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
1533
- margin-top: 0;
1534
- }
1535
-
1536
- @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
1537
- margin-top: 2px;
1538
- }
1539
-
1540
- @if ($skin-name == 'FluentUI') {
1541
- margin-top: 1px;
1542
- }
1563
+ margin-top: $pivotgrid-cell-value-margin-top;
1543
1564
  }
1544
1565
 
1545
1566
  div span.e-value-sort-icon {
@@ -1573,12 +1594,12 @@ $pivotpager-single-size-title-padding: 8px !default;
1573
1594
  }
1574
1595
  }
1575
1596
 
1576
- .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
1577
- margin: $pivotgrid-vsort-column-margin !important;
1578
- }
1579
-
1580
- .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1581
- margin: $pivotgrid-vsort-column-parent-margin !important;
1597
+ .e-stackedheadercelldiv, .e-headercelldiv {
1598
+ .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
1599
+ margin: $pivotgrid-vsort-column-parent-margin !important;
1600
+ margin-left: auto !important;
1601
+ margin-top: $pivotgrid-cell-value-margin-top !important;
1602
+ }
1582
1603
  }
1583
1604
 
1584
1605
  .e-rowsheader .e-sortfilterdiv {
@@ -119,6 +119,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
119
119
  $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
120
120
  $pivotgrid-excelfilter-member-editor-node-limit-height: 115px !default;
121
121
  $pivotgrid-member-editor-node-limit-bigger-height: 440px !default;
122
+ $pivotgrid-cell-value-margin-top: 2px !default;
122
123
 
123
124
  // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
124
125
  $pivotview-filter-toolbar-items-margin-left: 20px !default;
@@ -875,6 +876,12 @@ $pivotpager-single-size-title-padding: 8px !default;
875
876
  }
876
877
  }
877
878
 
879
+ &.sf-pivotview {
880
+ .e-pivot-toolbar {
881
+ box-sizing: border-box;
882
+ }
883
+ }
884
+
878
885
  .e-pivot-toolbar {
879
886
  background: $pivotgrid-grp-bg-color;
880
887
  border-bottom: 0;
@@ -1384,6 +1391,32 @@ $pivotpager-single-size-title-padding: 8px !default;
1384
1391
 
1385
1392
  /*! PivotView theme */
1386
1393
  .e-pivotview {
1394
+ .e-pivotcell-container {
1395
+ display: flex;
1396
+
1397
+ .e-stackedheadertext,
1398
+ .e-headertext {
1399
+ &.e-cellvalue {
1400
+ overflow: hidden;
1401
+ text-overflow: ellipsis;
1402
+ }
1403
+ }
1404
+
1405
+ .e-sortfilterdiv.e-value-sort-icon {
1406
+ align-items: center;
1407
+ display: flex;
1408
+ }
1409
+ }
1410
+
1411
+ .e-gridclip .e-pivotcell-container {
1412
+ .e-stackedheadertext,
1413
+ .e-headertext {
1414
+ &.e-cellvalue {
1415
+ text-overflow: clip;
1416
+ }
1417
+ }
1418
+ }
1419
+
1387
1420
  .e-nextspan {
1388
1421
  display: inline-block;
1389
1422
  width: $pivotview-indent-space-size;
@@ -1532,19 +1565,7 @@ $pivotpager-single-size-title-padding: 8px !default;
1532
1565
 
1533
1566
  div {
1534
1567
  &.e-cellvalue {
1535
- margin-top: 5px;
1536
-
1537
- @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
1538
- margin-top: 0;
1539
- }
1540
-
1541
- @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
1542
- margin-top: 2px;
1543
- }
1544
-
1545
- @if ($skin-name == 'FluentUI') {
1546
- margin-top: 1px;
1547
- }
1568
+ margin-top: $pivotgrid-cell-value-margin-top;
1548
1569
  }
1549
1570
 
1550
1571
  div span.e-value-sort-icon {
@@ -1578,12 +1599,12 @@ $pivotpager-single-size-title-padding: 8px !default;
1578
1599
  }
1579
1600
  }
1580
1601
 
1581
- .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
1582
- margin: $pivotgrid-vsort-column-margin !important;
1583
- }
1584
-
1585
- .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1586
- margin: $pivotgrid-vsort-column-parent-margin !important;
1602
+ .e-stackedheadercelldiv, .e-headercelldiv {
1603
+ .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
1604
+ margin: $pivotgrid-vsort-column-parent-margin !important;
1605
+ margin-left: auto !important;
1606
+ margin-top: $pivotgrid-cell-value-margin-top !important;
1607
+ }
1587
1608
  }
1588
1609
 
1589
1610
  .e-rowsheader .e-sortfilterdiv {
@@ -119,6 +119,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
119
119
  $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
120
120
  $pivotgrid-excelfilter-member-editor-node-limit-height: 115px !default;
121
121
  $pivotgrid-member-editor-node-limit-bigger-height: 440px !default;
122
+ $pivotgrid-cell-value-margin-top: 2px !default;
122
123
 
123
124
  // $pivotview-filter-toolbar-indicator-margin-left: 20px !default;
124
125
  $pivotview-filter-toolbar-items-margin-left: 20px !default;
@@ -875,6 +876,12 @@ $pivotpager-single-size-title-padding: 8px !default;
875
876
  }
876
877
  }
877
878
 
879
+ &.sf-pivotview {
880
+ .e-pivot-toolbar {
881
+ box-sizing: border-box;
882
+ }
883
+ }
884
+
878
885
  .e-pivot-toolbar {
879
886
  background: $pivotgrid-grp-bg-color;
880
887
  border-bottom: 0;
@@ -1384,6 +1391,32 @@ $pivotpager-single-size-title-padding: 8px !default;
1384
1391
 
1385
1392
  /*! PivotView theme */
1386
1393
  .e-pivotview {
1394
+ .e-pivotcell-container {
1395
+ display: flex;
1396
+
1397
+ .e-stackedheadertext,
1398
+ .e-headertext {
1399
+ &.e-cellvalue {
1400
+ overflow: hidden;
1401
+ text-overflow: ellipsis;
1402
+ }
1403
+ }
1404
+
1405
+ .e-sortfilterdiv.e-value-sort-icon {
1406
+ align-items: center;
1407
+ display: flex;
1408
+ }
1409
+ }
1410
+
1411
+ .e-gridclip .e-pivotcell-container {
1412
+ .e-stackedheadertext,
1413
+ .e-headertext {
1414
+ &.e-cellvalue {
1415
+ text-overflow: clip;
1416
+ }
1417
+ }
1418
+ }
1419
+
1387
1420
  .e-nextspan {
1388
1421
  display: inline-block;
1389
1422
  width: $pivotview-indent-space-size;
@@ -1532,19 +1565,7 @@ $pivotpager-single-size-title-padding: 8px !default;
1532
1565
 
1533
1566
  div {
1534
1567
  &.e-cellvalue {
1535
- margin-top: 5px;
1536
-
1537
- @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
1538
- margin-top: 0;
1539
- }
1540
-
1541
- @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
1542
- margin-top: 2px;
1543
- }
1544
-
1545
- @if ($skin-name == 'FluentUI') {
1546
- margin-top: 1px;
1547
- }
1568
+ margin-top: $pivotgrid-cell-value-margin-top;
1548
1569
  }
1549
1570
 
1550
1571
  div span.e-value-sort-icon {
@@ -1578,12 +1599,12 @@ $pivotpager-single-size-title-padding: 8px !default;
1578
1599
  }
1579
1600
  }
1580
1601
 
1581
- .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
1582
- margin: $pivotgrid-vsort-column-margin !important;
1583
- }
1584
-
1585
- .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1586
- margin: $pivotgrid-vsort-column-parent-margin !important;
1602
+ .e-stackedheadercelldiv, .e-headercelldiv {
1603
+ .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
1604
+ margin: $pivotgrid-vsort-column-parent-margin !important;
1605
+ margin-left: auto !important;
1606
+ margin-top: $pivotgrid-cell-value-margin-top !important;
1607
+ }
1587
1608
  }
1588
1609
 
1589
1610
  .e-rowsheader .e-sortfilterdiv {
@@ -167,6 +167,7 @@ $pivotgrid-rowsheader-cellvalue-margin-left: 8px !default;
167
167
  $pivotgrid-rowsheader-cellvalue-margin-top: 5px !default;
168
168
  $pivotgrid-excelfilter-member-editor-node-limit-height: 75px !default;
169
169
  $pivotgrid-member-editor-node-limit-bigger-height: 450px !default;
170
+ $pivotgrid-cell-value-margin-top: 5px !default;
170
171
 
171
172
  //enddefault
172
173
 
@@ -872,6 +873,12 @@ $pivotpager-single-size-title-padding: 4px !default;
872
873
  }
873
874
  }
874
875
 
876
+ &.sf-pivotview {
877
+ .e-pivot-toolbar {
878
+ box-sizing: border-box;
879
+ }
880
+ }
881
+
875
882
  .e-pivot-toolbar {
876
883
  background: $pivotgrid-grp-bg-color;
877
884
  border-bottom: 0;
@@ -1381,6 +1388,32 @@ $pivotpager-single-size-title-padding: 4px !default;
1381
1388
 
1382
1389
  /*! PivotView theme */
1383
1390
  .e-pivotview {
1391
+ .e-pivotcell-container {
1392
+ display: flex;
1393
+
1394
+ .e-stackedheadertext,
1395
+ .e-headertext {
1396
+ &.e-cellvalue {
1397
+ overflow: hidden;
1398
+ text-overflow: ellipsis;
1399
+ }
1400
+ }
1401
+
1402
+ .e-sortfilterdiv.e-value-sort-icon {
1403
+ align-items: center;
1404
+ display: flex;
1405
+ }
1406
+ }
1407
+
1408
+ .e-gridclip .e-pivotcell-container {
1409
+ .e-stackedheadertext,
1410
+ .e-headertext {
1411
+ &.e-cellvalue {
1412
+ text-overflow: clip;
1413
+ }
1414
+ }
1415
+ }
1416
+
1384
1417
  .e-nextspan {
1385
1418
  display: inline-block;
1386
1419
  width: $pivotview-indent-space-size;
@@ -1529,19 +1562,7 @@ $pivotpager-single-size-title-padding: 4px !default;
1529
1562
 
1530
1563
  div {
1531
1564
  &.e-cellvalue {
1532
- margin-top: 5px;
1533
-
1534
- @if ($pivotgrid-skin == 'highcontrast-light') or ($pivotgrid-skin == 'highcontrast') or ($skin-name == 'Material3') {
1535
- margin-top: 0;
1536
- }
1537
-
1538
- @if ($skin-name == 'tailwind') or ($skin-name == 'bootstrap5') {
1539
- margin-top: 2px;
1540
- }
1541
-
1542
- @if ($skin-name == 'FluentUI') {
1543
- margin-top: 1px;
1544
- }
1565
+ margin-top: $pivotgrid-cell-value-margin-top;
1545
1566
  }
1546
1567
 
1547
1568
  div span.e-value-sort-icon {
@@ -1575,12 +1596,12 @@ $pivotpager-single-size-title-padding: 4px !default;
1575
1596
  }
1576
1597
  }
1577
1598
 
1578
- .e-stackedheadercelldiv .e-sortfilterdiv, .e-headercelldiv .e-sortfilterdiv {
1579
- margin: $pivotgrid-vsort-column-margin !important;
1580
- }
1581
-
1582
- .e-stackedheadercelldiv .e-sortfilterdiv.e-value-sort-align, .e-headercelldiv .e-sortfilterdiv.e-value-sort-align {
1583
- margin: $pivotgrid-vsort-column-parent-margin !important;
1599
+ .e-stackedheadercelldiv, .e-headercelldiv {
1600
+ .e-sortfilterdiv, .e-sortfilterdiv.e-value-sort-align {
1601
+ margin: $pivotgrid-vsort-column-parent-margin !important;
1602
+ margin-left: auto !important;
1603
+ margin-top: $pivotgrid-cell-value-margin-top !important;
1604
+ }
1584
1605
  }
1585
1606
 
1586
1607
  .e-rowsheader .e-sortfilterdiv {