@syncfusion/ej2-layouts 27.2.2 → 28.1.33

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 (136) hide show
  1. package/README.md +3 -3
  2. package/dist/ej2-layouts.min.js +3 -3
  3. package/dist/ej2-layouts.umd.min.js +3 -3
  4. package/dist/ej2-layouts.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-layouts.es2015.js +25 -1
  6. package/dist/es6/ej2-layouts.es2015.js.map +1 -1
  7. package/dist/es6/ej2-layouts.es5.js +25 -1
  8. package/dist/es6/ej2-layouts.es5.js.map +1 -1
  9. package/dist/global/ej2-layouts.min.js +3 -3
  10. package/dist/global/ej2-layouts.min.js.map +1 -1
  11. package/dist/global/index.d.ts +2 -2
  12. package/package.json +7 -7
  13. package/src/splitter/splitter.js +25 -1
  14. package/styles/avatar/_layout.scss +5 -5
  15. package/styles/avatar/_tailwind3-definition.scss +26 -0
  16. package/styles/avatar/bds.css +69 -0
  17. package/styles/avatar/bds.scss +3 -0
  18. package/styles/avatar/fluent2.css +1 -1
  19. package/styles/avatar/tailwind3.css +65 -0
  20. package/styles/avatar/tailwind3.scss +3 -0
  21. package/styles/bds-lite.css +1557 -0
  22. package/styles/bds-lite.scss +14 -0
  23. package/styles/bds.css +1796 -0
  24. package/styles/bds.scss +18 -0
  25. package/styles/bootstrap-dark-lite.css +3 -3
  26. package/styles/bootstrap-dark.css +3 -3
  27. package/styles/bootstrap-lite.css +3 -3
  28. package/styles/bootstrap.css +3 -3
  29. package/styles/bootstrap4-lite.css +3 -3
  30. package/styles/bootstrap4.css +3 -3
  31. package/styles/bootstrap5-dark-lite.css +3 -3
  32. package/styles/bootstrap5-dark.css +3 -3
  33. package/styles/bootstrap5-lite.css +3 -3
  34. package/styles/bootstrap5.3-lite.css +3 -3
  35. package/styles/bootstrap5.3.css +3 -3
  36. package/styles/bootstrap5.css +3 -3
  37. package/styles/card/_bigger.scss +8 -2
  38. package/styles/card/_layout.scss +15 -4
  39. package/styles/card/_tailwind3-definition.scss +126 -0
  40. package/styles/card/bds.css +561 -0
  41. package/styles/card/bds.scss +4 -0
  42. package/styles/card/fabric.css +0 -1
  43. package/styles/card/fluent2.css +2 -3
  44. package/styles/card/highcontrast.css +0 -1
  45. package/styles/card/tailwind3.css +551 -0
  46. package/styles/card/tailwind3.scss +4 -0
  47. package/styles/dashboard-layout/_bigger.scss +1 -1
  48. package/styles/dashboard-layout/_layout.scss +4 -4
  49. package/styles/dashboard-layout/_tailwind3-definition.scss +108 -0
  50. package/styles/dashboard-layout/_theme.scss +8 -1
  51. package/styles/dashboard-layout/bds.css +328 -0
  52. package/styles/dashboard-layout/bds.scss +5 -0
  53. package/styles/dashboard-layout/bootstrap-dark.css +2 -2
  54. package/styles/dashboard-layout/bootstrap.css +2 -2
  55. package/styles/dashboard-layout/bootstrap4.css +2 -2
  56. package/styles/dashboard-layout/bootstrap5-dark.css +2 -2
  57. package/styles/dashboard-layout/bootstrap5.3.css +2 -2
  58. package/styles/dashboard-layout/bootstrap5.css +2 -2
  59. package/styles/dashboard-layout/fabric-dark.css +2 -2
  60. package/styles/dashboard-layout/fabric.css +2 -2
  61. package/styles/dashboard-layout/fluent-dark.css +2 -2
  62. package/styles/dashboard-layout/fluent.css +2 -2
  63. package/styles/dashboard-layout/fluent2.css +3 -3
  64. package/styles/dashboard-layout/highcontrast-light.css +2 -2
  65. package/styles/dashboard-layout/highcontrast.css +2 -2
  66. package/styles/dashboard-layout/icons/_tailwind3.scss +80 -0
  67. package/styles/dashboard-layout/material-dark.css +2 -2
  68. package/styles/dashboard-layout/material.css +2 -2
  69. package/styles/dashboard-layout/material3-dark.css +2 -2
  70. package/styles/dashboard-layout/material3.css +2 -2
  71. package/styles/dashboard-layout/tailwind-dark.css +5 -2
  72. package/styles/dashboard-layout/tailwind.css +5 -2
  73. package/styles/dashboard-layout/tailwind3.css +314 -0
  74. package/styles/dashboard-layout/tailwind3.scss +5 -0
  75. package/styles/fabric-dark-lite.css +3 -3
  76. package/styles/fabric-dark.css +3 -3
  77. package/styles/fabric-lite.css +3 -4
  78. package/styles/fabric.css +3 -4
  79. package/styles/fluent-dark-lite.css +3 -3
  80. package/styles/fluent-dark.css +3 -3
  81. package/styles/fluent-lite.css +3 -3
  82. package/styles/fluent.css +3 -3
  83. package/styles/fluent2-lite.css +8 -9
  84. package/styles/fluent2.css +8 -9
  85. package/styles/highcontrast-light-lite.css +3 -3
  86. package/styles/highcontrast-light.css +3 -3
  87. package/styles/highcontrast-lite.css +3 -4
  88. package/styles/highcontrast.css +3 -4
  89. package/styles/material-dark-lite.css +3 -3
  90. package/styles/material-dark.css +3 -3
  91. package/styles/material-lite.css +3 -3
  92. package/styles/material.css +3 -3
  93. package/styles/material3-dark-lite.css +3 -3
  94. package/styles/material3-dark.css +3 -3
  95. package/styles/material3-lite.css +3 -3
  96. package/styles/material3.css +3 -3
  97. package/styles/splitter/_tailwind3-definition.scss +31 -0
  98. package/styles/splitter/bds.css +547 -0
  99. package/styles/splitter/bds.scss +5 -0
  100. package/styles/splitter/fluent2.css +1 -1
  101. package/styles/splitter/icons/_tailwind3.scss +21 -0
  102. package/styles/splitter/tailwind3.css +547 -0
  103. package/styles/splitter/tailwind3.scss +5 -0
  104. package/styles/tailwind-dark-lite.css +6 -3
  105. package/styles/tailwind-dark.css +6 -3
  106. package/styles/tailwind-lite.css +6 -3
  107. package/styles/tailwind.css +6 -3
  108. package/styles/tailwind3-lite.css +1538 -0
  109. package/styles/tailwind3-lite.scss +14 -0
  110. package/styles/tailwind3.css +1767 -0
  111. package/styles/tailwind3.scss +18 -0
  112. package/styles/timeline/_layout.scss +1 -1
  113. package/styles/timeline/_tailwind3-definition.scss +18 -0
  114. package/styles/timeline/bds.css +303 -0
  115. package/styles/timeline/bds.scss +4 -0
  116. package/styles/timeline/bootstrap-dark.css +1 -1
  117. package/styles/timeline/bootstrap.css +1 -1
  118. package/styles/timeline/bootstrap4.css +1 -1
  119. package/styles/timeline/bootstrap5-dark.css +1 -1
  120. package/styles/timeline/bootstrap5.3.css +1 -1
  121. package/styles/timeline/bootstrap5.css +1 -1
  122. package/styles/timeline/fabric-dark.css +1 -1
  123. package/styles/timeline/fabric.css +1 -1
  124. package/styles/timeline/fluent-dark.css +1 -1
  125. package/styles/timeline/fluent.css +1 -1
  126. package/styles/timeline/fluent2.css +1 -1
  127. package/styles/timeline/highcontrast-light.css +1 -1
  128. package/styles/timeline/highcontrast.css +1 -1
  129. package/styles/timeline/material-dark.css +1 -1
  130. package/styles/timeline/material.css +1 -1
  131. package/styles/timeline/material3-dark.css +1 -1
  132. package/styles/timeline/material3.css +1 -1
  133. package/styles/timeline/tailwind-dark.css +1 -1
  134. package/styles/timeline/tailwind.css +1 -1
  135. package/styles/timeline/tailwind3.css +303 -0
  136. package/styles/timeline/tailwind3.scss +4 -0
package/styles/highcontrast-light.css CHANGED
@@ -1211,8 +1211,8 @@
1211
1211
  display: none;
1212
1212
  }
1213
1213
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1214
- -webkit-transition: top 0.5s, left 0.5s;
1215
- transition: top 0.5s, left 0.5s;
1214
+ -webkit-transition: top 0.1s, left 0.1s;
1215
+ transition: top 0.1s, left 0.1s;
1216
1216
  }
1217
1217
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1218
1218
  border-bottom: none;
@@ -1574,7 +1574,7 @@
1574
1574
  left: auto;
1575
1575
  }
1576
1576
  .e-timeline.e-horizontal .e-dot-item {
1577
- margin: calc(var(--dot-size) * 2 / 2) 0;
1577
+ margin: var(--dot-size);
1578
1578
  }
1579
1579
  .e-timeline.e-horizontal .e-opposite-content,
1580
1580
  .e-timeline.e-horizontal .e-content {
package/styles/highcontrast-lite.css CHANGED
@@ -249,7 +249,6 @@
249
249
  }
250
250
  .e-card .e-card-header .e-card-header-caption .e-card-header-title {
251
251
  font-size: 14px;
252
- font-weight: normal;
253
252
  font-weight: 600;
254
253
  line-height: normal;
255
254
  }
@@ -1109,8 +1108,8 @@
1109
1108
  display: none;
1110
1109
  }
1111
1110
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1112
- -webkit-transition: top 0.5s, left 0.5s;
1113
- transition: top 0.5s, left 0.5s;
1111
+ -webkit-transition: top 0.1s, left 0.1s;
1112
+ transition: top 0.1s, left 0.1s;
1114
1113
  }
1115
1114
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1116
1115
  border-bottom: none;
@@ -1454,7 +1453,7 @@
1454
1453
  left: auto;
1455
1454
  }
1456
1455
  .e-timeline.e-horizontal .e-dot-item {
1457
- margin: calc(var(--dot-size) * 2 / 2) 0;
1456
+ margin: var(--dot-size);
1458
1457
  }
1459
1458
  .e-timeline.e-horizontal .e-opposite-content,
1460
1459
  .e-timeline.e-horizontal .e-content {
package/styles/highcontrast.css CHANGED
@@ -249,7 +249,6 @@
249
249
  }
250
250
  .e-card .e-card-header .e-card-header-caption .e-card-header-title {
251
251
  font-size: 14px;
252
- font-weight: normal;
253
252
  font-weight: 600;
254
253
  line-height: normal;
255
254
  }
@@ -1285,8 +1284,8 @@
1285
1284
  display: none;
1286
1285
  }
1287
1286
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1288
- -webkit-transition: top 0.5s, left 0.5s;
1289
- transition: top 0.5s, left 0.5s;
1287
+ -webkit-transition: top 0.1s, left 0.1s;
1288
+ transition: top 0.1s, left 0.1s;
1290
1289
  }
1291
1290
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1292
1291
  border-bottom: none;
@@ -1647,7 +1646,7 @@
1647
1646
  left: auto;
1648
1647
  }
1649
1648
  .e-timeline.e-horizontal .e-dot-item {
1650
- margin: calc(var(--dot-size) * 2 / 2) 0;
1649
+ margin: var(--dot-size);
1651
1650
  }
1652
1651
  .e-timeline.e-horizontal .e-opposite-content,
1653
1652
  .e-timeline.e-horizontal .e-content {
package/styles/material-dark-lite.css CHANGED
@@ -1097,8 +1097,8 @@
1097
1097
  display: none;
1098
1098
  }
1099
1099
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1100
- -webkit-transition: top 0.5s, left 0.5s;
1101
- transition: top 0.5s, left 0.5s;
1100
+ -webkit-transition: top 0.1s, left 0.1s;
1101
+ transition: top 0.1s, left 0.1s;
1102
1102
  }
1103
1103
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1104
1104
  border-bottom: none;
@@ -1443,7 +1443,7 @@
1443
1443
  left: auto;
1444
1444
  }
1445
1445
  .e-timeline.e-horizontal .e-dot-item {
1446
- margin: calc(var(--dot-size) * 2 / 2) 0;
1446
+ margin: var(--dot-size);
1447
1447
  }
1448
1448
  .e-timeline.e-horizontal .e-opposite-content,
1449
1449
  .e-timeline.e-horizontal .e-content {
package/styles/material-dark.css CHANGED
@@ -1272,8 +1272,8 @@
1272
1272
  display: none;
1273
1273
  }
1274
1274
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1275
- -webkit-transition: top 0.5s, left 0.5s;
1276
- transition: top 0.5s, left 0.5s;
1275
+ -webkit-transition: top 0.1s, left 0.1s;
1276
+ transition: top 0.1s, left 0.1s;
1277
1277
  }
1278
1278
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1279
1279
  border-bottom: none;
@@ -1635,7 +1635,7 @@
1635
1635
  left: auto;
1636
1636
  }
1637
1637
  .e-timeline.e-horizontal .e-dot-item {
1638
- margin: calc(var(--dot-size) * 2 / 2) 0;
1638
+ margin: var(--dot-size);
1639
1639
  }
1640
1640
  .e-timeline.e-horizontal .e-opposite-content,
1641
1641
  .e-timeline.e-horizontal .e-content {
package/styles/material-lite.css CHANGED
@@ -1099,8 +1099,8 @@
1099
1099
  display: none;
1100
1100
  }
1101
1101
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1102
- -webkit-transition: top 0.5s, left 0.5s;
1103
- transition: top 0.5s, left 0.5s;
1102
+ -webkit-transition: top 0.1s, left 0.1s;
1103
+ transition: top 0.1s, left 0.1s;
1104
1104
  }
1105
1105
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1106
1106
  border-bottom: none;
@@ -1445,7 +1445,7 @@
1445
1445
  left: auto;
1446
1446
  }
1447
1447
  .e-timeline.e-horizontal .e-dot-item {
1448
- margin: calc(var(--dot-size) * 2 / 2) 0;
1448
+ margin: var(--dot-size);
1449
1449
  }
1450
1450
  .e-timeline.e-horizontal .e-opposite-content,
1451
1451
  .e-timeline.e-horizontal .e-content {
package/styles/material.css CHANGED
@@ -1274,8 +1274,8 @@
1274
1274
  display: none;
1275
1275
  }
1276
1276
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1277
- -webkit-transition: top 0.5s, left 0.5s;
1278
- transition: top 0.5s, left 0.5s;
1277
+ -webkit-transition: top 0.1s, left 0.1s;
1278
+ transition: top 0.1s, left 0.1s;
1279
1279
  }
1280
1280
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1281
1281
  border-bottom: none;
@@ -1637,7 +1637,7 @@
1637
1637
  left: auto;
1638
1638
  }
1639
1639
  .e-timeline.e-horizontal .e-dot-item {
1640
- margin: calc(var(--dot-size) * 2 / 2) 0;
1640
+ margin: var(--dot-size);
1641
1641
  }
1642
1642
  .e-timeline.e-horizontal .e-opposite-content,
1643
1643
  .e-timeline.e-horizontal .e-content {
package/styles/material3-dark-lite.css CHANGED
@@ -1108,8 +1108,8 @@
1108
1108
  display: none;
1109
1109
  }
1110
1110
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1111
- -webkit-transition: top 0.5s, left 0.5s;
1112
- transition: top 0.5s, left 0.5s;
1111
+ -webkit-transition: top 0.1s, left 0.1s;
1112
+ transition: top 0.1s, left 0.1s;
1113
1113
  }
1114
1114
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1115
1115
  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
@@ -1460,7 +1460,7 @@
1460
1460
  left: auto;
1461
1461
  }
1462
1462
  .e-timeline.e-horizontal .e-dot-item {
1463
- margin: calc(var(--dot-size) * 2 / 2) 0;
1463
+ margin: var(--dot-size);
1464
1464
  }
1465
1465
  .e-timeline.e-horizontal .e-opposite-content,
1466
1466
  .e-timeline.e-horizontal .e-content {
package/styles/material3-dark.css CHANGED
@@ -1283,8 +1283,8 @@
1283
1283
  display: none;
1284
1284
  }
1285
1285
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1286
- -webkit-transition: top 0.5s, left 0.5s;
1287
- transition: top 0.5s, left 0.5s;
1286
+ -webkit-transition: top 0.1s, left 0.1s;
1287
+ transition: top 0.1s, left 0.1s;
1288
1288
  }
1289
1289
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1290
1290
  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
@@ -1652,7 +1652,7 @@
1652
1652
  left: auto;
1653
1653
  }
1654
1654
  .e-timeline.e-horizontal .e-dot-item {
1655
- margin: calc(var(--dot-size) * 2 / 2) 0;
1655
+ margin: var(--dot-size);
1656
1656
  }
1657
1657
  .e-timeline.e-horizontal .e-opposite-content,
1658
1658
  .e-timeline.e-horizontal .e-content {
package/styles/material3-lite.css CHANGED
@@ -1110,8 +1110,8 @@
1110
1110
  display: none;
1111
1111
  }
1112
1112
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1113
- -webkit-transition: top 0.5s, left 0.5s;
1114
- transition: top 0.5s, left 0.5s;
1113
+ -webkit-transition: top 0.1s, left 0.1s;
1114
+ transition: top 0.1s, left 0.1s;
1115
1115
  }
1116
1116
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1117
1117
  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
@@ -1462,7 +1462,7 @@
1462
1462
  left: auto;
1463
1463
  }
1464
1464
  .e-timeline.e-horizontal .e-dot-item {
1465
- margin: calc(var(--dot-size) * 2 / 2) 0;
1465
+ margin: var(--dot-size);
1466
1466
  }
1467
1467
  .e-timeline.e-horizontal .e-opposite-content,
1468
1468
  .e-timeline.e-horizontal .e-content {
package/styles/material3.css CHANGED
@@ -1285,8 +1285,8 @@
1285
1285
  display: none;
1286
1286
  }
1287
1287
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
1288
- -webkit-transition: top 0.5s, left 0.5s;
1289
- transition: top 0.5s, left 0.5s;
1288
+ -webkit-transition: top 0.1s, left 0.1s;
1289
+ transition: top 0.1s, left 0.1s;
1290
1290
  }
1291
1291
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
1292
1292
  border-bottom: 1px solid rgba(var(--color-sf-outline-variant));
@@ -1654,7 +1654,7 @@
1654
1654
  left: auto;
1655
1655
  }
1656
1656
  .e-timeline.e-horizontal .e-dot-item {
1657
- margin: calc(var(--dot-size) * 2 / 2) 0;
1657
+ margin: var(--dot-size);
1658
1658
  }
1659
1659
  .e-timeline.e-horizontal .e-opposite-content,
1660
1660
  .e-timeline.e-horizontal .e-content {
package/styles/splitter/_tailwind3-definition.scss ADDED
@@ -0,0 +1,31 @@
1
+ //Layout Variables Start
2
+ $splitpane-font-size: $text-sm !default;
3
+ $splitpane-font-weight: $font-weight-normal !default;
4
+ $splitpane-font-family: $font-family !default;
5
+ $splitbar-icon-size: 14px !default;
6
+ $splitbar-icon-gap: 18px !default;
7
+ $bigger-splitbar-icon-gap: 20px !default;
8
+ $bigger-splitpane-font-size: $text-base !default;
9
+ $bigger-splitbar-icon-size: 16px !default;
10
+
11
+ //Layout Variables End
12
+
13
+ //Theme Variables Start
14
+ $navigation-arrow-background: $transparent !default;
15
+ $navigation-icon-background-hover: $primary !default;
16
+ $navigation-icon-border-hover: $primary !default;
17
+ $splitter-border-color: $border-light !default;
18
+ $splitter-background-color: $primary-text-color !default;
19
+ $splitpane-font-color: $content-text-color !default;
20
+ $splitbar-border-color: $border-light !default;
21
+ $splitbar-hover-border-color: $primary !default;
22
+ $resize-icon-hover-color: $splitbar-hover-border-color !default;
23
+ $splitbar-icon-color: $icon-color !default;
24
+ $collapse-icon-bg-color: $primary-text-color !default;
25
+ $resize-icon-bg-color: $content-bg-color !default;
26
+ $split-bar-border-left: none !default;
27
+ $split-bar-border-right: none !default;
28
+ $split-bar-hover-border-left: none !default;
29
+ $split-bar-hover-border-right: none !default;
30
+
31
+ //Theme Variables End