@syncfusion/ej2-layouts 20.1.58 → 20.2.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 (34) hide show
  1. package/CHANGELOG.md +16 -0
  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 +15 -16
  5. package/dist/es6/ej2-layouts.es2015.js.map +1 -1
  6. package/dist/es6/ej2-layouts.es5.js +15 -16
  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/helpers/e2e/dashboardHelper.js +112 -96
  12. package/helpers/e2e/index.js +9 -7
  13. package/helpers/e2e/splitter-helper.js +74 -58
  14. package/package.json +6 -6
  15. package/src/dashboard-layout/dashboard-layout.js +8 -2
  16. package/src/splitter/splitter.js +7 -14
  17. package/styles/avatar/_fusionnew-definition.scss +26 -0
  18. package/styles/avatar/_material3-definition.scss +26 -0
  19. package/styles/card/_fluent-definition.scss +2 -0
  20. package/styles/card/_fusionnew-definition.scss +121 -0
  21. package/styles/card/_layout.scss +22 -0
  22. package/styles/card/_material3-definition.scss +121 -0
  23. package/styles/card/fluent-dark.css +14 -0
  24. package/styles/card/fluent.css +14 -0
  25. package/styles/dashboard-layout/_fusionnew-definition.scss +109 -0
  26. package/styles/dashboard-layout/_material3-definition.scss +109 -0
  27. package/styles/dashboard-layout/icons/_fusionnew.scss +81 -0
  28. package/styles/dashboard-layout/icons/_material3.scss +81 -0
  29. package/styles/fluent-dark.css +14 -0
  30. package/styles/fluent.css +14 -0
  31. package/styles/splitter/_fusionnew-definition.scss +30 -0
  32. package/styles/splitter/_material3-definition.scss +30 -0
  33. package/styles/splitter/icons/_fusionnew.scss +39 -0
  34. package/styles/splitter/icons/_material3.scss +39 -0
package/styles/card/_fusionnew-definition.scss ADDED
@@ -0,0 +1,121 @@
1
+ $skin-name: 'bootstrap5' !default;
2
+ //Layout Variables Start
3
+ $card-img-brdr-radious: 50% !default;
4
+ $card-brdr-radious: 4px !default;
5
+ $card-action-btn-txt-transform: none !default;
6
+ // Font
7
+ $card-header-font: $text-base !default;
8
+ $card-title-font: $text-lg !default;
9
+ $card-action-btn-icon-font: $text-sm !default;
10
+ $card-action-btn-font: $text-sm !default;
11
+ $card-content-font-size: $text-sm !default;
12
+ $card-content-bigger-font-size: $text-base !default;
13
+ $card-header-title-font: $text-base !default;
14
+ $card-header-sub-title-font: $text-sm !default;
15
+ // Mouse
16
+ $card-content-line-height: $leading-normal !default;
17
+ $card-nrml-lheight: 36px !default;
18
+ $card-nrml-mheight: 36px !default;
19
+ $card-header-padding: 12px !default;
20
+ $card-header-lheight: $leading-tight !default;
21
+ $card-title-nrml-padding: 12px !default;
22
+ $card-title-nrml-lheight: $leading-normal !default;
23
+ $card-hor-image-margin: 2px !default;
24
+ $card-sep-margin: 12px 0 !default;
25
+ $card-header-minheight: 22.5px !default;
26
+ $card-header-nrml-padding: 12px !default;
27
+ $card-header-nrml-padding-bottom: 0 !default;
28
+ $card-header-txt-nrml-padding: 0 0 0 12px !default;
29
+ $card-header-txt-title-lheight: $leading-normal !default;
30
+ $card-header-txt-title-nrml-padding: 4px 0 0 !default;
31
+ $card-header-txt-subtitle-lheight: $leading-normal !default;
32
+ $card-header-image-width: 52px !default;
33
+ $card-header-image-height: 50px !default;
34
+ $card-image-mheight: 112.5px !default;
35
+ $card-image-title-lheight: 30px !default;
36
+ $card-image-title-mheight: 30px !default;
37
+ $card-action-nrml-vertical-padding: 12px !default;
38
+ $card-action-nrml-btn-vertical-margin: 0 0 0 8px !default;
39
+ $card-action-btn-nrml-height: 30px !default;
40
+ $card-action-btn-nrml-margin: 0 0 0 8px !default;
41
+ $card-action-btn-nrml-padding: 0 6px !default;
42
+ $card-nrml-content-padding: 12px !default;
43
+ $card-header-txt-nrml-title-font: $text-base !default;
44
+ $card-header-txt-nrml-subtitle-font: $text-sm !default;
45
+ $card-image-title-font: $text-base !default;
46
+ $card-action-btn-icon-width: 24px !default;
47
+ $card-action-btn-icon-height: 24px !default;
48
+ // Touch
49
+ $card-bigger-lheight: 48px !default;
50
+ $card-bigger-mheight: 48px !default;
51
+ $card-header-bigger-padding: 16px !default;
52
+ $card-header-bigger-padding-bottom: 0 !default;
53
+ $card-header-bigger-lheight: $leading-normal !default;
54
+ $card-title-bigger-margin: 16px !default;
55
+ $card-title-bigger-lheight: $leading-normal !default;
56
+ $card-hor-image-bigger-margin: 2px !default;
57
+ $card-sep-bigger-margin: 16px 0 !default;
58
+ $card-header-bigger-minheight: 30px !default;
59
+ $card-header-txt-bigger-padding: 0 0 0 16px !default;
60
+ $card-header-txt-title-bigger-lheight: $leading-normal !default;
61
+ $card-header-txt-title-bigger-padding: 8px 0 0 !default;
62
+ $card-header-txt-subtitle-bigger-lheight: $leading-normal !default;
63
+ $card-header-image-bigger-width: 55px !default;
64
+ $card-header-image-bigger-height: 60px !default;
65
+ $card-image-bigger-mheight: 150px !default;
66
+ $card-image-title-bigger-lheight: $leading-tight !default;
67
+ $card-image-title-bigger-mheight: 40px !default;
68
+ $card-img-title-bigger-padding: 12px 16px !default;
69
+ $card-action-bigger-padding: 16px !default;
70
+ $card-action-bigger-vertical-padding: 16px 20px !default;
71
+ $card-action-bigger-btn-vertical-margin: 0 0 7px 0 !default;
72
+ $card-action-btn-bigger-height: 38px !default;
73
+ $card-action-btn-bigger-margin: 0 0 0 13px !default;
74
+ $card-action-btn-bigger-padding: 0 8px !default;
75
+ $card-bigger-content-padding: 16px !default;
76
+ $card-header-txt-bigger-title-font: $text-xl !default;
77
+ $card-header-txt-bigger-subtitle-font: $text-base !default;
78
+ $card-image-title-bigger-font: 18px !default;
79
+ $card-action-btn-bigger-icon-width: 24px !default;
80
+ $card-action-btn-bigger-icon-height: 24px !default;
81
+ $card-image-title-nrml-padding: 12px 16px !default;
82
+ $card-action-nrml-padding: 12px !default;
83
+ //Layout Variables End
84
+
85
+ //Theme Variables Start
86
+ $card-highlight-color: $primary !default;
87
+ $card-bg-color: $content-bg-color !default;
88
+ $card-focus-bg-color: $content-bg-color !default;
89
+ $card-hover-bg-color: $content-bg-color !default;
90
+ $card-active-bg-color: $content-bg-color !default;
91
+ $card-focus-brdr-color: $border-light !default;
92
+ $card-hover-brdr-color: $border-dark !default;
93
+ $card-active-brdr-color: $primary !default;
94
+ $card-brdr-size: 1px !default;
95
+ $card-brdr-type: solid !default;
96
+ $card-brdr-color: $border-light !default;
97
+ $card-sep-brdr-size: 1px !default;
98
+ $card-sep-brdr-type: solid !default;
99
+ $card-sep-brdr-color: $border-light !default;
100
+ $card-image-title-color: $white !default;
101
+ $card-image-title-bg: $overlay-bg-color !default;
102
+ $card-action-btn-bg-color: $transparent !default;
103
+ $card-action-btn-font-color: $primary !default;
104
+ $card-action-btn-border: 1px solid $primary !default;
105
+ $card-action-btn-hover-bg: $primary !default;
106
+ $card-action-btn-hover-border: 1px solid $secondary-border-color-hover !default;
107
+ $card-action-btn-hover-font: $white !default;
108
+ $card-action-btn-focus-bg: $secondary-bg-color-focus !default;
109
+ $card-action-btn-focus-border: 1px solid !default;
110
+ $card-action-btn-focus-font: $secondary-text-color-focus !default;
111
+ $card-action-btn-pressed-bg: $secondary-bg-color-pressed !default;
112
+ $card-action-btn-pressed-border: 1px solid $secondary-border-color-pressed !default;
113
+ $card-action-btn-pressed-font: $secondary-text-color-pressed !default;
114
+ $card-font-color: $content-text-color !default;
115
+ $card-header-txt-title-color: $content-text-color !default;
116
+ $card-header-txt-subtitle-color: $content-text-color-alt2 !default;
117
+ $card-content-font-color: $content-text-color-alt1 !default;
118
+ $card-box-shadow: none !default;
119
+ $card-action-btn-icon-color: $primary !default;
120
+ $card-hover-box-shadow: none !default;
121
+ //Theme Variables End
package/styles/card/_layout.scss CHANGED
@@ -84,6 +84,12 @@
84
84
  height: $card-header-image-bigger-height;
85
85
  width: $card-header-image-bigger-width;
86
86
  }
87
+
88
+ @if $skin-name == 'FluentUI' {
89
+ + .e-card-header {
90
+ padding: $card-header-bigger-whole-padding;
91
+ }
92
+ }
87
93
  }
88
94
 
89
95
  .e-card-image {
@@ -139,8 +145,14 @@
139
145
  + .e-card-actions.e-card-vertical {
140
146
  margin-top: 0;
141
147
  padding-top: 0;
148
+ }
149
+
150
+ @if $skin-name == 'FluentUI' {
151
+ + .e-card-header {
152
+ padding: $card-header-bigger-whole-padding;
142
153
  }
143
154
  }
155
+ }
144
156
  }
145
157
 
146
158
 
@@ -354,6 +366,11 @@
354
366
  border-radius: $card-img-brdr-radious;
355
367
  }
356
368
 
369
+ @if $skin-name == 'FluentUI' {
370
+ + .e-card-header {
371
+ padding: $card-header-whole-padding;
372
+ }
373
+ }
357
374
  }
358
375
 
359
376
  .e-card-image {
@@ -488,6 +505,11 @@
488
505
  margin-top: 0;
489
506
  padding-top: 0;
490
507
  }
508
+ @if $skin-name == 'FluentUI' {
509
+ + .e-card-header {
510
+ padding: $card-header-whole-padding;
511
+ }
512
+ }
491
513
  }
492
514
 
493
515
  @if $skin-name == 'tailwind' {
package/styles/card/_material3-definition.scss ADDED
@@ -0,0 +1,121 @@
1
+ $skin-name: 'bootstrap5' !default;
2
+ //Layout Variables Start
3
+ $card-img-brdr-radious: 50% !default;
4
+ $card-brdr-radious: 4px !default;
5
+ $card-action-btn-txt-transform: none !default;
6
+ // Font
7
+ $card-header-font: $text-base !default;
8
+ $card-title-font: $text-lg !default;
9
+ $card-action-btn-icon-font: $text-sm !default;
10
+ $card-action-btn-font: $text-sm !default;
11
+ $card-content-font-size: $text-sm !default;
12
+ $card-content-bigger-font-size: $text-base !default;
13
+ $card-header-title-font: $text-base !default;
14
+ $card-header-sub-title-font: $text-sm !default;
15
+ // Mouse
16
+ $card-content-line-height: $leading-normal !default;
17
+ $card-nrml-lheight: 36px !default;
18
+ $card-nrml-mheight: 36px !default;
19
+ $card-header-padding: 12px !default;
20
+ $card-header-lheight: $leading-tight !default;
21
+ $card-title-nrml-padding: 12px !default;
22
+ $card-title-nrml-lheight: $leading-normal !default;
23
+ $card-hor-image-margin: 2px !default;
24
+ $card-sep-margin: 12px 0 !default;
25
+ $card-header-minheight: 22.5px !default;
26
+ $card-header-nrml-padding: 12px !default;
27
+ $card-header-nrml-padding-bottom: 0 !default;
28
+ $card-header-txt-nrml-padding: 0 0 0 12px !default;
29
+ $card-header-txt-title-lheight: $leading-normal !default;
30
+ $card-header-txt-title-nrml-padding: 4px 0 0 !default;
31
+ $card-header-txt-subtitle-lheight: $leading-normal !default;
32
+ $card-header-image-width: 52px !default;
33
+ $card-header-image-height: 50px !default;
34
+ $card-image-mheight: 112.5px !default;
35
+ $card-image-title-lheight: 30px !default;
36
+ $card-image-title-mheight: 30px !default;
37
+ $card-action-nrml-vertical-padding: 12px !default;
38
+ $card-action-nrml-btn-vertical-margin: 0 0 0 8px !default;
39
+ $card-action-btn-nrml-height: 30px !default;
40
+ $card-action-btn-nrml-margin: 0 0 0 8px !default;
41
+ $card-action-btn-nrml-padding: 0 6px !default;
42
+ $card-nrml-content-padding: 12px !default;
43
+ $card-header-txt-nrml-title-font: $text-base !default;
44
+ $card-header-txt-nrml-subtitle-font: $text-sm !default;
45
+ $card-image-title-font: $text-base !default;
46
+ $card-action-btn-icon-width: 24px !default;
47
+ $card-action-btn-icon-height: 24px !default;
48
+ // Touch
49
+ $card-bigger-lheight: 48px !default;
50
+ $card-bigger-mheight: 48px !default;
51
+ $card-header-bigger-padding: 16px !default;
52
+ $card-header-bigger-padding-bottom: 0 !default;
53
+ $card-header-bigger-lheight: $leading-normal !default;
54
+ $card-title-bigger-margin: 16px !default;
55
+ $card-title-bigger-lheight: $leading-normal !default;
56
+ $card-hor-image-bigger-margin: 2px !default;
57
+ $card-sep-bigger-margin: 16px 0 !default;
58
+ $card-header-bigger-minheight: 30px !default;
59
+ $card-header-txt-bigger-padding: 0 0 0 16px !default;
60
+ $card-header-txt-title-bigger-lheight: $leading-normal !default;
61
+ $card-header-txt-title-bigger-padding: 8px 0 0 !default;
62
+ $card-header-txt-subtitle-bigger-lheight: $leading-normal !default;
63
+ $card-header-image-bigger-width: 55px !default;
64
+ $card-header-image-bigger-height: 60px !default;
65
+ $card-image-bigger-mheight: 150px !default;
66
+ $card-image-title-bigger-lheight: $leading-tight !default;
67
+ $card-image-title-bigger-mheight: 40px !default;
68
+ $card-img-title-bigger-padding: 12px 16px !default;
69
+ $card-action-bigger-padding: 16px !default;
70
+ $card-action-bigger-vertical-padding: 16px 20px !default;
71
+ $card-action-bigger-btn-vertical-margin: 0 0 7px 0 !default;
72
+ $card-action-btn-bigger-height: 38px !default;
73
+ $card-action-btn-bigger-margin: 0 0 0 13px !default;
74
+ $card-action-btn-bigger-padding: 0 8px !default;
75
+ $card-bigger-content-padding: 16px !default;
76
+ $card-header-txt-bigger-title-font: $text-xl !default;
77
+ $card-header-txt-bigger-subtitle-font: $text-base !default;
78
+ $card-image-title-bigger-font: 18px !default;
79
+ $card-action-btn-bigger-icon-width: 24px !default;
80
+ $card-action-btn-bigger-icon-height: 24px !default;
81
+ $card-image-title-nrml-padding: 12px 16px !default;
82
+ $card-action-nrml-padding: 12px !default;
83
+ //Layout Variables End
84
+
85
+ //Theme Variables Start
86
+ $card-highlight-color: $primary !default;
87
+ $card-bg-color: $content-bg-color !default;
88
+ $card-focus-bg-color: $content-bg-color !default;
89
+ $card-hover-bg-color: $content-bg-color !default;
90
+ $card-active-bg-color: $content-bg-color !default;
91
+ $card-focus-brdr-color: $border-light !default;
92
+ $card-hover-brdr-color: $border-dark !default;
93
+ $card-active-brdr-color: $primary !default;
94
+ $card-brdr-size: 1px !default;
95
+ $card-brdr-type: solid !default;
96
+ $card-brdr-color: $border-light !default;
97
+ $card-sep-brdr-size: 1px !default;
98
+ $card-sep-brdr-type: solid !default;
99
+ $card-sep-brdr-color: $border-light !default;
100
+ $card-image-title-color: $white !default;
101
+ $card-image-title-bg: $overlay-bg-color !default;
102
+ $card-action-btn-bg-color: $transparent !default;
103
+ $card-action-btn-font-color: $primary !default;
104
+ $card-action-btn-border: 1px solid $primary !default;
105
+ $card-action-btn-hover-bg: $primary !default;
106
+ $card-action-btn-hover-border: 1px solid $secondary-border-color-hover !default;
107
+ $card-action-btn-hover-font: $white !default;
108
+ $card-action-btn-focus-bg: $secondary-bg-color-focus !default;
109
+ $card-action-btn-focus-border: 1px solid !default;
110
+ $card-action-btn-focus-font: $secondary-text-color-focus !default;
111
+ $card-action-btn-pressed-bg: $secondary-bg-color-pressed !default;
112
+ $card-action-btn-pressed-border: 1px solid $secondary-border-color-pressed !default;
113
+ $card-action-btn-pressed-font: $secondary-text-color-pressed !default;
114
+ $card-font-color: $content-text-color !default;
115
+ $card-header-txt-title-color: $content-text-color !default;
116
+ $card-header-txt-subtitle-color: $content-text-color-alt2 !default;
117
+ $card-content-font-color: $content-text-color-alt1 !default;
118
+ $card-box-shadow: none !default;
119
+ $card-action-btn-icon-color: $primary !default;
120
+ $card-hover-box-shadow: none !default;
121
+ //Theme Variables End
package/styles/card/fluent-dark.css CHANGED
@@ -69,6 +69,10 @@
69
69
  height: 40px;
70
70
  width: 40px;
71
71
  }
72
+ .e-bigger .e-card .e-card-header + .e-card-header,
73
+ .e-bigger.e-card .e-card-header + .e-card-header {
74
+ padding: 20px;
75
+ }
72
76
  .e-bigger .e-card .e-card-image,
73
77
  .e-bigger.e-card .e-card-image {
74
78
  min-height: 150px;
@@ -133,6 +137,10 @@
133
137
  margin-top: 0;
134
138
  padding-top: 0;
135
139
  }
140
+ .e-bigger .e-card .e-card-content + .e-card-header,
141
+ .e-bigger.e-card .e-card-content + .e-card-header {
142
+ padding: 20px;
143
+ }
136
144
 
137
145
  .e-card {
138
146
  border-radius: 2px;
@@ -310,6 +318,9 @@
310
318
  .e-card .e-card-header .e-card-corner {
311
319
  border-radius: 50%;
312
320
  }
321
+ .e-card .e-card-header + .e-card-header {
322
+ padding: 16px;
323
+ }
313
324
  .e-card .e-card-image {
314
325
  background-size: cover;
315
326
  min-height: 112.5px;
@@ -434,6 +445,9 @@
434
445
  margin-top: 0;
435
446
  padding-top: 0;
436
447
  }
448
+ .e-card .e-card-content + .e-card-header {
449
+ padding: 16px;
450
+ }
437
451
  .e-card .e-card-content,
438
452
  .e-card .e-card-content p {
439
453
  line-height: 1.5;
package/styles/card/fluent.css CHANGED
@@ -69,6 +69,10 @@
69
69
  height: 40px;
70
70
  width: 40px;
71
71
  }
72
+ .e-bigger .e-card .e-card-header + .e-card-header,
73
+ .e-bigger.e-card .e-card-header + .e-card-header {
74
+ padding: 20px;
75
+ }
72
76
  .e-bigger .e-card .e-card-image,
73
77
  .e-bigger.e-card .e-card-image {
74
78
  min-height: 150px;
@@ -133,6 +137,10 @@
133
137
  margin-top: 0;
134
138
  padding-top: 0;
135
139
  }
140
+ .e-bigger .e-card .e-card-content + .e-card-header,
141
+ .e-bigger.e-card .e-card-content + .e-card-header {
142
+ padding: 20px;
143
+ }
136
144
 
137
145
  .e-card {
138
146
  border-radius: 2px;
@@ -310,6 +318,9 @@
310
318
  .e-card .e-card-header .e-card-corner {
311
319
  border-radius: 50%;
312
320
  }
321
+ .e-card .e-card-header + .e-card-header {
322
+ padding: 16px;
323
+ }
313
324
  .e-card .e-card-image {
314
325
  background-size: cover;
315
326
  min-height: 112.5px;
@@ -434,6 +445,9 @@
434
445
  margin-top: 0;
435
446
  padding-top: 0;
436
447
  }
448
+ .e-card .e-card-content + .e-card-header {
449
+ padding: 16px;
450
+ }
437
451
  .e-card .e-card-content,
438
452
  .e-card .e-card-content p {
439
453
  line-height: 1.5;
package/styles/dashboard-layout/_fusionnew-definition.scss ADDED
@@ -0,0 +1,109 @@
1
+ /*! component's theme wise override tailwind-definitions and variables */
2
+
3
+ // Generic
4
+ $icon-zero: 0 !default;
5
+ $icon-border-radius: 50% !default;
6
+ $grid-layout-position: relative !default;
7
+ $panel-position: absolute !default;
8
+ $panel-box-sizing: border-box !default;
9
+
10
+ // Header styles
11
+
12
+ // Mouse
13
+ $panel-header-height: 38px !default;
14
+ $panel-header-padding: 8px 18px !default;
15
+ $panel-header-line-height: 22px !default;
16
+ $panel-header-border-radius: 4px !default;
17
+ $panel-header-color: $content-text-color !default;
18
+ $panel-header-font-size: $text-sm !default;
19
+ $panel-header-bg-color: $content-bg-color-alt1 !default;
20
+ $panel-header-font-weight: $font-weight-medium !default;
21
+ $panel-header-border-bottom: 1px solid $border-light !default;
22
+ $panel-header-font-family: $font-family !default;
23
+ $panel-header-white-space: nowrap !default;
24
+ $panel-header-overflow: hidden !default;
25
+ $panel-header-text-overflow: ellipsis !default;
26
+
27
+ // Touch
28
+ $panel-bigger-header-height: 40px !default;
29
+ $panel-bigger-header-padding: 8px 18px !default;
30
+ $panel-bigger-header-line-height: 24px !default;
31
+ $panel-bigger-header-color: $content-text-color !default;
32
+ $panel-bigger-header-font-size: $text-base !default;
33
+ $panel-bigger-header-font-weight: $font-weight-medium !default;
34
+
35
+ // Panel styles
36
+ $panel-border: 1px solid $border-light !default;
37
+ $panel-border-radius: 4px !default;
38
+ $panel-full-height: 100% !default;
39
+ $panel-full-width: 100% !default;
40
+ $panel-hover-border: 1px solid $border-dark !default;
41
+ $panel-active-border: 1px solid $primary-border-color !default;
42
+
43
+ // icons styles
44
+ $panel-resize-one-dimensional-icon-height: 8px !default;
45
+ $panel-resize-one-dimensional-icon-width: 8px !default;
46
+ $panel-resize-one-dimensional-icon-background: none !default;
47
+ $panel-resize-one-dimensional-icon-border: none !default;
48
+ $panel-resize-one-dimensional-icon-shadow: none !default;
49
+
50
+ $panel-resize-two-dimensional-icon-height: 8px !default;
51
+ $panel-resize-two-dimensional-icon-width: 8px !default;
52
+ $panel-resize-two-dimensional-inner-icon-height: 8px !default;
53
+ $panel-resize-two-dimensional-inner-icon-width: 8px !default;
54
+ $panel-resize-two-dimensional-icon-background: none !default;
55
+ $panel-resize-two-dimensional-icon-color: $icon-color-disabled !default;
56
+ $panel-resize-two-dimensional-icon-border: none !default;
57
+ $panel-resize-two-dimensional-icon-shadow: none !default;
58
+
59
+ // south-east-icon-styles
60
+ $panel-south-east-icon-right: 2px !default;
61
+ $panel-south-east-icon-bottom: 2px !default;
62
+
63
+ // south-west-icon-style
64
+ $panel-south-west-icon-left: 2px !default;
65
+ $panel-south-west-icon-bottom: 2px !default;
66
+
67
+ // north-east-icon-styles
68
+ $panel-north-east-icon-right: 2px !default;
69
+ $panel-north-east-icon-top: 2px !default;
70
+
71
+ // north-west-icon-styles
72
+ $panel-north-west-icon-left: 2px !default;
73
+ $panel-north-west-icon-top: 2px !default;
74
+
75
+ // droppable area border
76
+ $panel-drop-border-radius: 4px !default;
77
+
78
+ // dragging element style
79
+ $panel-dragging-cursor: move !default;
80
+ $panel-drag-prevent: none !default;
81
+
82
+ // Blazor ContentTemplate styles
83
+ $panel-content-template-height: inherit !default;
84
+ $panel-content-template-width: inherit !default;
85
+
86
+ // sass-lint:disable-all
87
+ $panel-dragging-zindex: 1111 !important !default;
88
+ $panel-drag-prevent: none !default;
89
+
90
+ // sass-lint:disable-all
91
+ $element-width-complete: 100% !important !default;
92
+
93
+ // colors
94
+
95
+ // Panel styles
96
+ $panel-active-background: $flyout-bg-color !default;
97
+ $panel-hover-box-shadow: $shadow !default;
98
+ $panel-active-drag-box-shadow: $shadow !default;
99
+ $panel-background: $flyout-bg-color !default;
100
+ $panel-box-shadow: $shadow-sm;
101
+
102
+ // droppable area border
103
+ $panel-drop-background: $primary-lighter !default;
104
+ $panel-drop-border: 1px $primary-border-color dashed !default;
105
+
106
+ //gridlines
107
+ $gridline-background: $content-bg-color-alt1 !default;
108
+ $gridline-border: $border-dark !default;
109
+ $gridline-border-radius: 6px !default;
package/styles/dashboard-layout/_material3-definition.scss ADDED
@@ -0,0 +1,109 @@
1
+ /*! component's theme wise override tailwind-definitions and variables */
2
+
3
+ // Generic
4
+ $icon-zero: 0 !default;
5
+ $icon-border-radius: 50% !default;
6
+ $grid-layout-position: relative !default;
7
+ $panel-position: absolute !default;
8
+ $panel-box-sizing: border-box !default;
9
+
10
+ // Header styles
11
+
12
+ // Mouse
13
+ $panel-header-height: 38px !default;
14
+ $panel-header-padding: 8px 18px !default;
15
+ $panel-header-line-height: 22px !default;
16
+ $panel-header-border-radius: 4px !default;
17
+ $panel-header-color: $content-text-color !default;
18
+ $panel-header-font-size: $text-sm !default;
19
+ $panel-header-bg-color: $content-bg-color-alt1 !default;
20
+ $panel-header-font-weight: $font-weight-medium !default;
21
+ $panel-header-border-bottom: 1px solid $border-light !default;
22
+ $panel-header-font-family: $font-family !default;
23
+ $panel-header-white-space: nowrap !default;
24
+ $panel-header-overflow: hidden !default;
25
+ $panel-header-text-overflow: ellipsis !default;
26
+
27
+ // Touch
28
+ $panel-bigger-header-height: 40px !default;
29
+ $panel-bigger-header-padding: 8px 18px !default;
30
+ $panel-bigger-header-line-height: 24px !default;
31
+ $panel-bigger-header-color: $content-text-color !default;
32
+ $panel-bigger-header-font-size: $text-base !default;
33
+ $panel-bigger-header-font-weight: $font-weight-medium !default;
34
+
35
+ // Panel styles
36
+ $panel-border: 1px solid $border-light !default;
37
+ $panel-border-radius: 4px !default;
38
+ $panel-full-height: 100% !default;
39
+ $panel-full-width: 100% !default;
40
+ $panel-hover-border: 1px solid $border-dark !default;
41
+ $panel-active-border: 1px solid $primary-border-color !default;
42
+
43
+ // icons styles
44
+ $panel-resize-one-dimensional-icon-height: 8px !default;
45
+ $panel-resize-one-dimensional-icon-width: 8px !default;
46
+ $panel-resize-one-dimensional-icon-background: none !default;
47
+ $panel-resize-one-dimensional-icon-border: none !default;
48
+ $panel-resize-one-dimensional-icon-shadow: none !default;
49
+
50
+ $panel-resize-two-dimensional-icon-height: 8px !default;
51
+ $panel-resize-two-dimensional-icon-width: 8px !default;
52
+ $panel-resize-two-dimensional-inner-icon-height: 8px !default;
53
+ $panel-resize-two-dimensional-inner-icon-width: 8px !default;
54
+ $panel-resize-two-dimensional-icon-background: none !default;
55
+ $panel-resize-two-dimensional-icon-color: $icon-color-disabled !default;
56
+ $panel-resize-two-dimensional-icon-border: none !default;
57
+ $panel-resize-two-dimensional-icon-shadow: none !default;
58
+
59
+ // south-east-icon-styles
60
+ $panel-south-east-icon-right: 2px !default;
61
+ $panel-south-east-icon-bottom: 2px !default;
62
+
63
+ // south-west-icon-style
64
+ $panel-south-west-icon-left: 2px !default;
65
+ $panel-south-west-icon-bottom: 2px !default;
66
+
67
+ // north-east-icon-styles
68
+ $panel-north-east-icon-right: 2px !default;
69
+ $panel-north-east-icon-top: 2px !default;
70
+
71
+ // north-west-icon-styles
72
+ $panel-north-west-icon-left: 2px !default;
73
+ $panel-north-west-icon-top: 2px !default;
74
+
75
+ // droppable area border
76
+ $panel-drop-border-radius: 4px !default;
77
+
78
+ // dragging element style
79
+ $panel-dragging-cursor: move !default;
80
+ $panel-drag-prevent: none !default;
81
+
82
+ // Blazor ContentTemplate styles
83
+ $panel-content-template-height: inherit !default;
84
+ $panel-content-template-width: inherit !default;
85
+
86
+ // sass-lint:disable-all
87
+ $panel-dragging-zindex: 1111 !important !default;
88
+ $panel-drag-prevent: none !default;
89
+
90
+ // sass-lint:disable-all
91
+ $element-width-complete: 100% !important !default;
92
+
93
+ // colors
94
+
95
+ // Panel styles
96
+ $panel-active-background: $flyout-bg-color !default;
97
+ $panel-hover-box-shadow: $shadow !default;
98
+ $panel-active-drag-box-shadow: $shadow !default;
99
+ $panel-background: $flyout-bg-color !default;
100
+ $panel-box-shadow: $shadow-sm;
101
+
102
+ // droppable area border
103
+ $panel-drop-background: $primary-lighter !default;
104
+ $panel-drop-border: 1px $primary-border-color dashed !default;
105
+
106
+ //gridlines
107
+ $gridline-background: $content-bg-color-alt1 !default;
108
+ $gridline-border: $border-dark !default;
109
+ $gridline-border-radius: 6px !default;
package/styles/dashboard-layout/icons/_fusionnew.scss ADDED
@@ -0,0 +1,81 @@
1
+ @include export-module('dashboardlayout-fusionnew-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
+
16
+ &.e-west {
17
+ height: 100%;
18
+ left: 0;
19
+ padding: 20px 0;
20
+ top: 0;
21
+ width: 12px;
22
+ }
23
+
24
+ &.e-north {
25
+ height: 12px;
26
+ padding: 0 20px;
27
+ top: 1px;
28
+ width: 100%;
29
+ }
30
+
31
+ &.e-south {
32
+ bottom: 1px;
33
+ height: 12px;
34
+ padding: 0 20px;
35
+ width: 100%;
36
+ }
37
+
38
+ &.e-south-east {
39
+ bottom: 0;
40
+ right: 1px;
41
+ z-index: 10;
42
+ }
43
+
44
+ &.e-north-west {
45
+ left: 2px;
46
+ top: 2px;
47
+ z-index: 10;
48
+ }
49
+
50
+ &.e-north-east {
51
+ right: 2px;
52
+ top: 2px;
53
+ z-index: 10;
54
+ }
55
+
56
+ &.e-south-west {
57
+ bottom: 1px;
58
+ left: 1px;
59
+ z-index: 10;
60
+ }
61
+
62
+ &.e-south-east::before {
63
+ bottom: 4px;
64
+ content: '\e761';
65
+ font-size: 12px;
66
+ position: absolute;
67
+ right: 4px;
68
+ }
69
+
70
+ &.e-south-west::before {
71
+ bottom: 4px;
72
+ content: '\e761';
73
+ font-size: 12px;
74
+ left: 4px;
75
+ position: absolute;
76
+ transform: rotateY(180deg);
77
+ }
78
+ }
79
+ }
80
+ }
81
+ }