@syncfusion/ej2-layouts 25.2.3 → 26.1.38

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 (177) hide show
  1. package/.eslintrc.json +3 -2
  2. package/dist/ej2-layouts.min.js +2 -2
  3. package/dist/ej2-layouts.umd.min.js +2 -2
  4. package/dist/ej2-layouts.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-layouts.es2015.js +215 -140
  6. package/dist/es6/ej2-layouts.es2015.js.map +1 -1
  7. package/dist/es6/ej2-layouts.es5.js +243 -167
  8. package/dist/es6/ej2-layouts.es5.js.map +1 -1
  9. package/dist/global/ej2-layouts.min.js +2 -2
  10. package/dist/global/ej2-layouts.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +7 -7
  13. package/src/dashboard-layout/dashboard-layout.d.ts +2 -2
  14. package/src/dashboard-layout/dashboard-layout.js +55 -76
  15. package/src/splitter/splitter.js +81 -41
  16. package/src/timeline/timeline-model.d.ts +5 -5
  17. package/src/timeline/timeline.d.ts +6 -3
  18. package/src/timeline/timeline.js +107 -33
  19. package/styles/avatar/_bootstrap5.3-definition.scss +26 -0
  20. package/styles/avatar/_fluent2-definition.scss +28 -0
  21. package/styles/avatar/_layout.scss +22 -18
  22. package/styles/avatar/_material3-definition.scss +0 -7
  23. package/styles/avatar/bootstrap-dark.css +7 -4
  24. package/styles/avatar/bootstrap.css +7 -4
  25. package/styles/avatar/bootstrap4.css +7 -4
  26. package/styles/avatar/bootstrap5-dark.css +13 -10
  27. package/styles/avatar/bootstrap5.css +13 -10
  28. package/styles/avatar/fabric-dark.css +7 -4
  29. package/styles/avatar/fabric.css +7 -4
  30. package/styles/avatar/fluent-dark.css +11 -8
  31. package/styles/avatar/fluent.css +11 -8
  32. package/styles/avatar/fluent2.css +1097 -0
  33. package/styles/avatar/fluent2.scss +3 -0
  34. package/styles/avatar/highcontrast-light.css +7 -4
  35. package/styles/avatar/highcontrast.css +7 -4
  36. package/styles/avatar/material-dark.css +7 -4
  37. package/styles/avatar/material.css +7 -4
  38. package/styles/avatar/material3-dark.css +12 -9
  39. package/styles/avatar/material3.css +12 -9
  40. package/styles/avatar/tailwind-dark.css +11 -8
  41. package/styles/avatar/tailwind.css +11 -8
  42. package/styles/bootstrap-dark.css +359 -197
  43. package/styles/bootstrap-dark.scss +14 -5
  44. package/styles/bootstrap.css +359 -197
  45. package/styles/bootstrap.scss +14 -5
  46. package/styles/bootstrap4.css +357 -196
  47. package/styles/bootstrap4.scss +14 -5
  48. package/styles/bootstrap5-dark.css +370 -207
  49. package/styles/bootstrap5-dark.scss +14 -5
  50. package/styles/bootstrap5.css +370 -207
  51. package/styles/bootstrap5.scss +14 -5
  52. package/styles/card/_bootstrap5.3-definition.scss +125 -0
  53. package/styles/card/_fluent2-definition.scss +123 -0
  54. package/styles/card/_layout.scss +13 -4
  55. package/styles/card/_material3-definition.scss +0 -13
  56. package/styles/card/_theme.scss +4 -16
  57. package/styles/card/bootstrap-dark.css +95 -52
  58. package/styles/card/bootstrap.css +95 -52
  59. package/styles/card/bootstrap4.css +95 -52
  60. package/styles/card/bootstrap5-dark.css +95 -52
  61. package/styles/card/bootstrap5.css +95 -52
  62. package/styles/card/fabric-dark.css +95 -52
  63. package/styles/card/fabric.css +95 -52
  64. package/styles/card/fluent-dark.css +99 -54
  65. package/styles/card/fluent.css +99 -54
  66. package/styles/card/fluent2.css +1593 -0
  67. package/styles/card/fluent2.scss +3 -0
  68. package/styles/card/highcontrast-light.css +95 -52
  69. package/styles/card/highcontrast.css +95 -52
  70. package/styles/card/material-dark.css +95 -52
  71. package/styles/card/material.css +97 -53
  72. package/styles/card/material3-dark.css +99 -53
  73. package/styles/card/material3.css +99 -53
  74. package/styles/card/tailwind-dark.css +95 -52
  75. package/styles/card/tailwind.css +95 -52
  76. package/styles/dashboard-layout/_bootstrap5.3-definition.scss +108 -0
  77. package/styles/dashboard-layout/_fluent2-definition.scss +111 -0
  78. package/styles/dashboard-layout/_highcontrast-definition.scss +1 -1
  79. package/styles/dashboard-layout/_layout.scss +62 -60
  80. package/styles/dashboard-layout/_material3-definition.scss +0 -47
  81. package/styles/dashboard-layout/_theme.scss +19 -32
  82. package/styles/dashboard-layout/bootstrap-dark.css +41 -42
  83. package/styles/dashboard-layout/bootstrap.css +41 -42
  84. package/styles/dashboard-layout/bootstrap4.css +41 -42
  85. package/styles/dashboard-layout/bootstrap5-dark.css +48 -47
  86. package/styles/dashboard-layout/bootstrap5.css +48 -47
  87. package/styles/dashboard-layout/fabric-dark.css +41 -42
  88. package/styles/dashboard-layout/fabric.css +41 -42
  89. package/styles/dashboard-layout/fluent-dark.css +46 -46
  90. package/styles/dashboard-layout/fluent.css +46 -46
  91. package/styles/dashboard-layout/fluent2.css +1336 -0
  92. package/styles/dashboard-layout/fluent2.scss +4 -0
  93. package/styles/dashboard-layout/highcontrast-light.css +39 -41
  94. package/styles/dashboard-layout/highcontrast.css +43 -42
  95. package/styles/dashboard-layout/icons/_bootstrap5.3.scss +80 -0
  96. package/styles/dashboard-layout/icons/_fluent2.scss +80 -0
  97. package/styles/dashboard-layout/material-dark.css +41 -42
  98. package/styles/dashboard-layout/material.css +41 -42
  99. package/styles/dashboard-layout/material3-dark.css +48 -47
  100. package/styles/dashboard-layout/material3.css +48 -47
  101. package/styles/dashboard-layout/tailwind-dark.css +57 -55
  102. package/styles/dashboard-layout/tailwind.css +57 -55
  103. package/styles/fabric-dark.css +359 -197
  104. package/styles/fabric-dark.scss +14 -5
  105. package/styles/fabric.css +359 -197
  106. package/styles/fabric.scss +14 -5
  107. package/styles/fluent-dark.css +370 -206
  108. package/styles/fluent-dark.scss +14 -5
  109. package/styles/fluent.css +370 -206
  110. package/styles/fluent.scss +14 -5
  111. package/styles/fluent2.css +2803 -0
  112. package/styles/fluent2.scss +14 -0
  113. package/styles/highcontrast-light.css +357 -196
  114. package/styles/highcontrast-light.scss +13 -5
  115. package/styles/highcontrast.css +361 -197
  116. package/styles/highcontrast.scss +14 -5
  117. package/styles/material-dark.css +357 -196
  118. package/styles/material-dark.scss +14 -5
  119. package/styles/material.css +359 -197
  120. package/styles/material.scss +14 -5
  121. package/styles/material3-dark.css +370 -204
  122. package/styles/material3-dark.scss +14 -5
  123. package/styles/material3.css +370 -204
  124. package/styles/material3.scss +14 -5
  125. package/styles/splitter/_bootstrap5.3-definition.scss +31 -0
  126. package/styles/splitter/_fluent2-definition.scss +31 -0
  127. package/styles/splitter/_layout.scss +0 -4
  128. package/styles/splitter/_material3-definition.scss +0 -7
  129. package/styles/splitter/_theme.scss +0 -4
  130. package/styles/splitter/bootstrap-dark.css +115 -59
  131. package/styles/splitter/bootstrap.css +115 -59
  132. package/styles/splitter/bootstrap4.css +113 -58
  133. package/styles/splitter/bootstrap5-dark.css +113 -58
  134. package/styles/splitter/bootstrap5.css +113 -58
  135. package/styles/splitter/fabric-dark.css +115 -59
  136. package/styles/splitter/fabric.css +115 -59
  137. package/styles/splitter/fluent-dark.css +113 -58
  138. package/styles/splitter/fluent.css +113 -58
  139. package/styles/splitter/fluent2.css +1578 -0
  140. package/styles/splitter/fluent2.scss +4 -0
  141. package/styles/splitter/highcontrast-light.css +115 -59
  142. package/styles/splitter/highcontrast.css +115 -59
  143. package/styles/splitter/icons/_bootstrap5.3.scss +39 -0
  144. package/styles/splitter/icons/_fluent2.scss +39 -0
  145. package/styles/splitter/material-dark.css +113 -58
  146. package/styles/splitter/material.css +113 -58
  147. package/styles/splitter/material3-dark.css +114 -59
  148. package/styles/splitter/material3.css +114 -59
  149. package/styles/splitter/tailwind-dark.css +113 -58
  150. package/styles/splitter/tailwind.css +113 -58
  151. package/styles/tailwind-dark.css +377 -213
  152. package/styles/tailwind-dark.scss +14 -5
  153. package/styles/tailwind.css +377 -213
  154. package/styles/tailwind.scss +14 -5
  155. package/styles/timeline/_bootstrap5.3-definition.scss +18 -0
  156. package/styles/timeline/_fluent2-definition.scss +18 -0
  157. package/styles/timeline/_layout.scss +46 -7
  158. package/styles/timeline/bootstrap-dark.css +99 -39
  159. package/styles/timeline/bootstrap.css +99 -39
  160. package/styles/timeline/bootstrap4.css +99 -39
  161. package/styles/timeline/bootstrap5-dark.css +99 -39
  162. package/styles/timeline/bootstrap5.css +99 -39
  163. package/styles/timeline/fabric-dark.css +99 -39
  164. package/styles/timeline/fabric.css +99 -39
  165. package/styles/timeline/fluent-dark.css +99 -39
  166. package/styles/timeline/fluent.css +99 -39
  167. package/styles/timeline/fluent2.css +1332 -0
  168. package/styles/timeline/fluent2.scss +3 -0
  169. package/styles/timeline/highcontrast-light.css +99 -39
  170. package/styles/timeline/highcontrast.css +99 -39
  171. package/styles/timeline/material-dark.css +99 -39
  172. package/styles/timeline/material.css +99 -39
  173. package/styles/timeline/material3-dark.css +100 -40
  174. package/styles/timeline/material3.css +100 -40
  175. package/styles/timeline/tailwind-dark.css +99 -39
  176. package/styles/timeline/tailwind.css +99 -39
  177. package/CHANGELOG.md +0 -601
@@ -0,0 +1,4 @@
1
+ @import 'ej2-base/styles/definition/fluent2.scss';
2
+ @import 'fluent2-definition.scss';
3
+ @import 'icons/fluent2.scss';
4
+ @import 'all.scss';
@@ -6,7 +6,7 @@
6
6
  height: 100%;
7
7
  width: 100%;
8
8
  }
9
- .e-dashboardlayout.e-control .e-dashboard-gridline-table tbody tr td.e-dashboard-gridline {
9
+ .e-dashboardlayout.e-control .e-dashboard-gridline-table td.e-dashboard-gridline {
10
10
  border: 1px dotted #757575;
11
11
  position: absolute;
12
12
  }
@@ -15,10 +15,21 @@
15
15
  }
16
16
  .e-dashboardlayout.e-control.e-prevent {
17
17
  -webkit-user-select: none;
18
+ -moz-user-select: none;
18
19
  -ms-user-select: none;
19
20
  user-select: none;
20
21
  }
22
+ .e-dashboardlayout.e-control .e-panel.e-ssr {
23
+ position: relative;
24
+ }
21
25
  .e-dashboardlayout.e-control .e-panel {
26
+ border: 1px #757575 solid;
27
+ height: 100%;
28
+ -webkit-user-select: none;
29
+ -moz-user-select: none;
30
+ -ms-user-select: none;
31
+ user-select: none;
32
+ width: 100%;
22
33
  border-radius: 2px;
23
34
  }
24
35
  .e-dashboardlayout.e-control .e-panel:hover {
@@ -30,10 +41,19 @@
30
41
  .e-dashboardlayout.e-control .e-panel:active {
31
42
  border: 1px #400074 solid;
32
43
  }
44
+ .e-dashboardlayout.e-control .e-panel .e-panel-container {
45
+ height: 100%;
46
+ width: 100%;
47
+ }
48
+ .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content .e-blazor-template {
49
+ height: inherit;
50
+ width: inherit;
51
+ }
33
52
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-dl-icon {
34
53
  display: none;
35
54
  }
36
55
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
56
+ -webkit-transition: top 0.5s, left 0.5s;
37
57
  transition: top 0.5s, left 0.5s;
38
58
  }
39
59
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
@@ -56,22 +76,6 @@
56
76
  .e-dashboardlayout.e-control .e-panel .e-panel-header .e-header-template {
57
77
  float: right;
58
78
  }
59
- .e-dashboardlayout.e-control .e-panel .e-panel-container {
60
- height: 100%;
61
- width: 100%;
62
- }
63
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content .e-blazor-template {
64
- height: inherit;
65
- width: inherit;
66
- }
67
- .e-dashboardlayout.e-control .e-panel {
68
- border: 1px #757575 solid;
69
- height: 100%;
70
- -webkit-user-select: none;
71
- -ms-user-select: none;
72
- user-select: none;
73
- width: 100%;
74
- }
75
79
  .e-dashboardlayout.e-control .e-panel .e-resize.e-single, .e-dashboardlayout.e-control .e-panel .e-resize.e-double {
76
80
  position: absolute;
77
81
  -ms-touch-action: none;
@@ -108,13 +112,6 @@
108
112
  font-family: "e-icons";
109
113
  position: absolute;
110
114
  }
111
- .e-dashboardlayout.e-control .e-drag:hover {
112
- cursor: move;
113
- }
114
- .e-dashboardlayout.e-control .e-drag-restrict.e-drag:hover,
115
- .e-dashboardlayout.e-control .e-drag-restrict .e-drag:hover {
116
- cursor: default;
117
- }
118
115
  .e-dashboardlayout.e-control .e-panel.e-dragging, .e-dashboardlayout.e-control .e-panel.e-item-moving {
119
116
  cursor: move;
120
117
  z-index: 1111 !important;
@@ -122,6 +119,19 @@
122
119
  .e-dashboardlayout.e-control .e-panel.e-rtl .e-panel-header .e-header-template {
123
120
  float: left;
124
121
  }
122
+ .e-dashboardlayout.e-control .e-panel.e-bigger .e-panel-header {
123
+ font-size: 14px;
124
+ font-weight: 500;
125
+ height: 30px;
126
+ padding: 0 12px;
127
+ }
128
+ .e-dashboardlayout.e-control .e-drag:hover {
129
+ cursor: move;
130
+ }
131
+ .e-dashboardlayout.e-control .e-drag-restrict.e-drag:hover,
132
+ .e-dashboardlayout.e-control .e-drag-restrict .e-drag:hover {
133
+ cursor: default;
134
+ }
125
135
  .e-dashboardlayout.e-control .e-holder {
126
136
  background: #400074;
127
137
  border: 2px #400074 dotted;
@@ -130,14 +140,9 @@
130
140
  border-radius: 2px;
131
141
  }
132
142
  .e-dashboardlayout.e-control .e-holder.e-holder-transition {
143
+ -webkit-transition: top 0.3s, left 0.3s;
133
144
  transition: top 0.3s, left 0.3s;
134
145
  }
135
- .e-dashboardlayout.e-control .e-panel.e-bigger .e-panel-header {
136
- font-size: 14px;
137
- font-weight: 500;
138
- height: 30px;
139
- padding: 0 12px;
140
- }
141
146
 
142
147
  .e-bigger .e-dashboardlayout.e-control .e-panel .e-panel-header {
143
148
  font-size: 14px;
@@ -156,17 +161,10 @@
156
161
  }
157
162
  .e-dashboardlayout.e-control .e-panel {
158
163
  background: #fff;
159
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
160
- box-sizing: border-box;
161
- position: absolute;
162
- }
163
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
164
- color: #000;
165
- }
166
- .e-dashboardlayout.e-control .e-panel {
167
- background: #fff;
168
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
169
- box-sizing: border-box;
164
+ -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
165
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
166
+ -webkit-box-sizing: border-box;
167
+ box-sizing: border-box;
170
168
  position: absolute;
171
169
  }
172
170
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
@@ -59,7 +59,8 @@
59
59
  font-size: 12px;
60
60
  left: 0;
61
61
  position: absolute;
62
- transform: rotateY(180deg);
62
+ -webkit-transform: rotateY(180deg);
63
+ transform: rotateY(180deg);
63
64
  }
64
65
 
65
66
  .e-dashboardlayout.e-control .e-dashboard-gridline-table {
@@ -68,7 +69,7 @@
68
69
  height: 100%;
69
70
  width: 100%;
70
71
  }
71
- .e-dashboardlayout.e-control .e-dashboard-gridline-table tbody tr td.e-dashboard-gridline {
72
+ .e-dashboardlayout.e-control .e-dashboard-gridline-table td.e-dashboard-gridline {
72
73
  border: 1px dotted #969696;
73
74
  position: absolute;
74
75
  }
@@ -77,9 +78,22 @@
77
78
  }
78
79
  .e-dashboardlayout.e-control.e-prevent {
79
80
  -webkit-user-select: none;
81
+ -moz-user-select: none;
80
82
  -ms-user-select: none;
81
83
  user-select: none;
82
84
  }
85
+ .e-dashboardlayout.e-control .e-panel.e-ssr {
86
+ position: relative;
87
+ }
88
+ .e-dashboardlayout.e-control .e-panel {
89
+ border: 1px #969696 solid;
90
+ height: 100%;
91
+ -webkit-user-select: none;
92
+ -moz-user-select: none;
93
+ -ms-user-select: none;
94
+ user-select: none;
95
+ width: 100%;
96
+ }
83
97
  .e-dashboardlayout.e-control .e-panel:hover {
84
98
  border: 1px #fff solid;
85
99
  }
@@ -89,10 +103,19 @@
89
103
  .e-dashboardlayout.e-control .e-panel:active {
90
104
  border: 1px #ffd939 solid;
91
105
  }
106
+ .e-dashboardlayout.e-control .e-panel .e-panel-container {
107
+ height: 100%;
108
+ width: 100%;
109
+ }
110
+ .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content .e-blazor-template {
111
+ height: inherit;
112
+ width: inherit;
113
+ }
92
114
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-dl-icon {
93
115
  display: none;
94
116
  }
95
117
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
118
+ -webkit-transition: top 0.5s, left 0.5s;
96
119
  transition: top 0.5s, left 0.5s;
97
120
  }
98
121
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
@@ -115,22 +138,6 @@
115
138
  .e-dashboardlayout.e-control .e-panel .e-panel-header .e-header-template {
116
139
  float: right;
117
140
  }
118
- .e-dashboardlayout.e-control .e-panel .e-panel-container {
119
- height: 100%;
120
- width: 100%;
121
- }
122
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content .e-blazor-template {
123
- height: inherit;
124
- width: inherit;
125
- }
126
- .e-dashboardlayout.e-control .e-panel {
127
- border: 1px #969696 solid;
128
- height: 100%;
129
- -webkit-user-select: none;
130
- -ms-user-select: none;
131
- user-select: none;
132
- width: 100%;
133
- }
134
141
  .e-dashboardlayout.e-control .e-panel .e-resize.e-single, .e-dashboardlayout.e-control .e-panel .e-resize.e-double {
135
142
  position: absolute;
136
143
  -ms-touch-action: none;
@@ -167,13 +174,6 @@
167
174
  font-family: "e-icons";
168
175
  position: absolute;
169
176
  }
170
- .e-dashboardlayout.e-control .e-drag:hover {
171
- cursor: move;
172
- }
173
- .e-dashboardlayout.e-control .e-drag-restrict.e-drag:hover,
174
- .e-dashboardlayout.e-control .e-drag-restrict .e-drag:hover {
175
- cursor: default;
176
- }
177
177
  .e-dashboardlayout.e-control .e-panel.e-dragging, .e-dashboardlayout.e-control .e-panel.e-item-moving {
178
178
  cursor: move;
179
179
  z-index: 1111 !important;
@@ -181,6 +181,19 @@
181
181
  .e-dashboardlayout.e-control .e-panel.e-rtl .e-panel-header .e-header-template {
182
182
  float: left;
183
183
  }
184
+ .e-dashboardlayout.e-control .e-panel.e-bigger .e-panel-header {
185
+ font-size: 14px;
186
+ font-weight: 500;
187
+ height: 30px;
188
+ padding: 0 12px;
189
+ }
190
+ .e-dashboardlayout.e-control .e-drag:hover {
191
+ cursor: move;
192
+ }
193
+ .e-dashboardlayout.e-control .e-drag-restrict.e-drag:hover,
194
+ .e-dashboardlayout.e-control .e-drag-restrict .e-drag:hover {
195
+ cursor: default;
196
+ }
184
197
  .e-dashboardlayout.e-control .e-holder {
185
198
  background: rgba(255, 217, 57, 0.3);
186
199
  border: 1px #ffd939 dotted;
@@ -188,14 +201,9 @@
188
201
  position: absolute;
189
202
  }
190
203
  .e-dashboardlayout.e-control .e-holder.e-holder-transition {
204
+ -webkit-transition: top 0.3s, left 0.3s;
191
205
  transition: top 0.3s, left 0.3s;
192
206
  }
193
- .e-dashboardlayout.e-control .e-panel.e-bigger .e-panel-header {
194
- font-size: 14px;
195
- font-weight: 500;
196
- height: 30px;
197
- padding: 0 12px;
198
- }
199
207
 
200
208
  .e-bigger .e-dashboardlayout.e-control .e-panel .e-panel-header {
201
209
  font-size: 14px;
@@ -214,17 +222,10 @@
214
222
  }
215
223
  .e-dashboardlayout.e-control .e-panel {
216
224
  background: #000;
217
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
218
- box-sizing: border-box;
219
- position: absolute;
220
- }
221
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
222
- color: #fff;
223
- }
224
- .e-dashboardlayout.e-control .e-panel {
225
- background: #000;
226
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
227
- box-sizing: border-box;
225
+ -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
226
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
227
+ -webkit-box-sizing: border-box;
228
+ box-sizing: border-box;
228
229
  position: absolute;
229
230
  }
230
231
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
@@ -0,0 +1,80 @@
1
+ @include export-module('dashboardlayout-bootstrap5-icons') {
2
+ .e-dashboardlayout.e-control {
3
+ & .e-panel {
4
+
5
+ & .e-resize.e-single,
6
+ & .e-resize.e-double {
7
+ &.e-east {
8
+ height: 100%;
9
+ padding: 20px 0;
10
+ right: 1px;
11
+ top: 0;
12
+ width: 12px;
13
+ }
14
+
15
+ &.e-west {
16
+ height: 100%;
17
+ left: 0;
18
+ padding: 20px 0;
19
+ top: 0;
20
+ width: 12px;
21
+ }
22
+
23
+ &.e-north {
24
+ height: 12px;
25
+ padding: 0 20px;
26
+ top: 1px;
27
+ width: 100%;
28
+ }
29
+
30
+ &.e-south {
31
+ bottom: 1px;
32
+ height: 12px;
33
+ padding: 0 20px;
34
+ width: 100%;
35
+ }
36
+
37
+ &.e-south-east {
38
+ bottom: 0;
39
+ right: 1px;
40
+ z-index: 10;
41
+ }
42
+
43
+ &.e-north-west {
44
+ left: 2px;
45
+ top: 2px;
46
+ z-index: 10;
47
+ }
48
+
49
+ &.e-north-east {
50
+ right: 2px;
51
+ top: 2px;
52
+ z-index: 10;
53
+ }
54
+
55
+ &.e-south-west {
56
+ bottom: 1px;
57
+ left: 1px;
58
+ z-index: 10;
59
+ }
60
+
61
+ &.e-south-east::before {
62
+ bottom: 4px;
63
+ content: '\e761';
64
+ font-size: 12px;
65
+ position: absolute;
66
+ right: 4px;
67
+ }
68
+
69
+ &.e-south-west::before {
70
+ bottom: 4px;
71
+ content: '\e761';
72
+ font-size: 12px;
73
+ left: 4px;
74
+ position: absolute;
75
+ transform: rotateY(180deg);
76
+ }
77
+ }
78
+ }
79
+ }
80
+ }
@@ -0,0 +1,80 @@
1
+ @include export-module('dashboardlayout-fluent2-icons') {
2
+ .e-dashboardlayout.e-control {
3
+ & .e-panel {
4
+
5
+ & .e-resize.e-single,
6
+ & .e-resize.e-double {
7
+ &.e-east {
8
+ height: 100%;
9
+ padding: 20px 0;
10
+ right: 1px;
11
+ top: 0;
12
+ width: 12px;
13
+ }
14
+
15
+ &.e-west {
16
+ height: 100%;
17
+ left: 0;
18
+ padding: 20px 0;
19
+ top: 0;
20
+ width: 12px;
21
+ }
22
+
23
+ &.e-north {
24
+ height: 12px;
25
+ padding: 0 20px;
26
+ top: 1px;
27
+ width: 100%;
28
+ }
29
+
30
+ &.e-south {
31
+ bottom: 1px;
32
+ height: 12px;
33
+ padding: 0 20px;
34
+ width: 100%;
35
+ }
36
+
37
+ &.e-south-east {
38
+ bottom: 0;
39
+ right: 1px;
40
+ z-index: 10;
41
+ }
42
+
43
+ &.e-north-west {
44
+ left: 2px;
45
+ top: 2px;
46
+ z-index: 10;
47
+ }
48
+
49
+ &.e-north-east {
50
+ right: 2px;
51
+ top: 2px;
52
+ z-index: 10;
53
+ }
54
+
55
+ &.e-south-west {
56
+ bottom: 1px;
57
+ left: 1px;
58
+ z-index: 10;
59
+ }
60
+
61
+ &.e-south-east::before {
62
+ bottom: 4px;
63
+ content: '\e761';
64
+ font-size: 12px;
65
+ position: absolute;
66
+ right: 4px;
67
+ }
68
+
69
+ &.e-south-west::before {
70
+ bottom: 4px;
71
+ content: '\e761';
72
+ font-size: 12px;
73
+ left: 4px;
74
+ position: absolute;
75
+ transform: rotateY(180deg);
76
+ }
77
+ }
78
+ }
79
+ }
80
+ }
@@ -59,7 +59,8 @@
59
59
  font-size: 12px;
60
60
  left: 0;
61
61
  position: absolute;
62
- transform: rotateY(180deg);
62
+ -webkit-transform: rotateY(180deg);
63
+ transform: rotateY(180deg);
63
64
  }
64
65
 
65
66
  .e-dashboardlayout.e-control .e-dashboard-gridline-table {
@@ -68,7 +69,7 @@
68
69
  height: 100%;
69
70
  width: 100%;
70
71
  }
71
- .e-dashboardlayout.e-control .e-dashboard-gridline-table tbody tr td.e-dashboard-gridline {
72
+ .e-dashboardlayout.e-control .e-dashboard-gridline-table td.e-dashboard-gridline {
72
73
  border: 1px dotted #424242;
73
74
  position: absolute;
74
75
  }
@@ -77,10 +78,21 @@
77
78
  }
78
79
  .e-dashboardlayout.e-control.e-prevent {
79
80
  -webkit-user-select: none;
81
+ -moz-user-select: none;
80
82
  -ms-user-select: none;
81
83
  user-select: none;
82
84
  }
85
+ .e-dashboardlayout.e-control .e-panel.e-ssr {
86
+ position: relative;
87
+ }
83
88
  .e-dashboardlayout.e-control .e-panel {
89
+ border: 1px #616161 solid;
90
+ height: 100%;
91
+ -webkit-user-select: none;
92
+ -moz-user-select: none;
93
+ -ms-user-select: none;
94
+ user-select: none;
95
+ width: 100%;
84
96
  border-radius: 2px;
85
97
  }
86
98
  .e-dashboardlayout.e-control .e-panel:hover {
@@ -92,10 +104,19 @@
92
104
  .e-dashboardlayout.e-control .e-panel:active {
93
105
  border: 1px #00b0ff solid;
94
106
  }
107
+ .e-dashboardlayout.e-control .e-panel .e-panel-container {
108
+ height: 100%;
109
+ width: 100%;
110
+ }
111
+ .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content .e-blazor-template {
112
+ height: inherit;
113
+ width: inherit;
114
+ }
95
115
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-resize.e-dl-icon {
96
116
  display: none;
97
117
  }
98
118
  .e-dashboardlayout.e-control .e-panel.e-panel-transition {
119
+ -webkit-transition: top 0.5s, left 0.5s;
99
120
  transition: top 0.5s, left 0.5s;
100
121
  }
101
122
  .e-dashboardlayout.e-control .e-panel .e-panel-header {
@@ -118,22 +139,6 @@
118
139
  .e-dashboardlayout.e-control .e-panel .e-panel-header .e-header-template {
119
140
  float: right;
120
141
  }
121
- .e-dashboardlayout.e-control .e-panel .e-panel-container {
122
- height: 100%;
123
- width: 100%;
124
- }
125
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content .e-blazor-template {
126
- height: inherit;
127
- width: inherit;
128
- }
129
- .e-dashboardlayout.e-control .e-panel {
130
- border: 1px #616161 solid;
131
- height: 100%;
132
- -webkit-user-select: none;
133
- -ms-user-select: none;
134
- user-select: none;
135
- width: 100%;
136
- }
137
142
  .e-dashboardlayout.e-control .e-panel .e-resize.e-single, .e-dashboardlayout.e-control .e-panel .e-resize.e-double {
138
143
  position: absolute;
139
144
  -ms-touch-action: none;
@@ -170,13 +175,6 @@
170
175
  font-family: "e-icons";
171
176
  position: absolute;
172
177
  }
173
- .e-dashboardlayout.e-control .e-drag:hover {
174
- cursor: move;
175
- }
176
- .e-dashboardlayout.e-control .e-drag-restrict.e-drag:hover,
177
- .e-dashboardlayout.e-control .e-drag-restrict .e-drag:hover {
178
- cursor: default;
179
- }
180
178
  .e-dashboardlayout.e-control .e-panel.e-dragging, .e-dashboardlayout.e-control .e-panel.e-item-moving {
181
179
  cursor: move;
182
180
  z-index: 1111 !important;
@@ -184,6 +182,19 @@
184
182
  .e-dashboardlayout.e-control .e-panel.e-rtl .e-panel-header .e-header-template {
185
183
  float: left;
186
184
  }
185
+ .e-dashboardlayout.e-control .e-panel.e-bigger .e-panel-header {
186
+ font-size: 13px;
187
+ font-weight: 500;
188
+ height: 30px;
189
+ padding: 0 12px;
190
+ }
191
+ .e-dashboardlayout.e-control .e-drag:hover {
192
+ cursor: move;
193
+ }
194
+ .e-dashboardlayout.e-control .e-drag-restrict.e-drag:hover,
195
+ .e-dashboardlayout.e-control .e-drag-restrict .e-drag:hover {
196
+ cursor: default;
197
+ }
187
198
  .e-dashboardlayout.e-control .e-holder {
188
199
  background: rgba(0, 176, 255, 0.25);
189
200
  border: 2px rgba(0, 176, 255, 0.25) dotted;
@@ -192,14 +203,9 @@
192
203
  border-radius: 2px;
193
204
  }
194
205
  .e-dashboardlayout.e-control .e-holder.e-holder-transition {
206
+ -webkit-transition: top 0.3s, left 0.3s;
195
207
  transition: top 0.3s, left 0.3s;
196
208
  }
197
- .e-dashboardlayout.e-control .e-panel.e-bigger .e-panel-header {
198
- font-size: 13px;
199
- font-weight: 500;
200
- height: 30px;
201
- padding: 0 12px;
202
- }
203
209
 
204
210
  .e-bigger .e-dashboardlayout.e-control .e-panel .e-panel-header {
205
211
  font-size: 13px;
@@ -218,17 +224,10 @@
218
224
  }
219
225
  .e-dashboardlayout.e-control .e-panel {
220
226
  background: #303030;
221
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
222
- box-sizing: border-box;
223
- position: absolute;
224
- }
225
- .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {
226
- color: rgba(255, 255, 255, 0.7);
227
- }
228
- .e-dashboardlayout.e-control .e-panel {
229
- background: #303030;
230
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
231
- box-sizing: border-box;
227
+ -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
228
+ box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
229
+ -webkit-box-sizing: border-box;
230
+ box-sizing: border-box;
232
231
  position: absolute;
233
232
  }
234
233
  .e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {