@syncfusion/ej2-layouts 20.2.45 → 20.3.47
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.
- package/CHANGELOG.md +8 -0
- package/dist/ej2-layouts.min.js +10 -0
- package/dist/ej2-layouts.umd.min.js +2 -2
- package/dist/ej2-layouts.umd.min.js.map +1 -1
- package/dist/es6/ej2-layouts.es2015.js +3 -3
- package/dist/es6/ej2-layouts.es2015.js.map +1 -1
- package/dist/es6/ej2-layouts.es5.js +5 -4
- package/dist/es6/ej2-layouts.es5.js.map +1 -1
- package/dist/global/ej2-layouts.min.js +2 -2
- package/dist/global/ej2-layouts.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +7 -7
- package/src/dashboard-layout/dashboard-layout.js +2 -3
- package/src/splitter/splitter.d.ts +1 -0
- package/src/splitter/splitter.js +3 -1
- package/styles/avatar/_bootstrap-dark-definition.scss +0 -1
- package/styles/avatar/_fabric-dark-definition.scss +0 -1
- package/styles/avatar/_highcontrast-light-definition.scss +0 -1
- package/styles/avatar/_material-dark-definition.scss +0 -1
- package/styles/avatar/_theme.scss +1 -0
- package/styles/bootstrap-dark.css +11 -9
- package/styles/bootstrap.css +11 -9
- package/styles/bootstrap4.css +11 -9
- package/styles/bootstrap5-dark.css +11 -9
- package/styles/bootstrap5.css +11 -9
- package/styles/card/_all.scss +1 -1
- package/styles/card/_bootstrap-dark-definition.scss +6 -9
- package/styles/card/_bootstrap-definition.scss +2 -4
- package/styles/card/_bootstrap4-definition.scss +2 -4
- package/styles/card/_bootstrap5-definition.scss +8 -2
- package/styles/card/_fabric-dark-definition.scss +6 -9
- package/styles/card/_fabric-definition.scss +2 -4
- package/styles/card/_fluent-definition.scss +8 -2
- package/styles/card/_fusionnew-definition.scss +8 -2
- package/styles/card/_highcontrast-definition.scss +2 -4
- package/styles/card/_highcontrast-light-definition.scss +6 -9
- package/styles/card/_layout.scss +7 -8
- package/styles/card/_material-dark-definition.scss +7 -8
- package/styles/card/_material-definition.scss +4 -5
- package/styles/card/_material3-definition.scss +8 -2
- package/styles/card/_tailwind-definition.scss +7 -2
- package/styles/card/_theme.scss +3 -3
- package/styles/card/bootstrap-dark.css +5 -4
- package/styles/card/bootstrap.css +5 -4
- package/styles/card/bootstrap4.css +5 -4
- package/styles/card/bootstrap5-dark.css +5 -4
- package/styles/card/bootstrap5.css +5 -4
- package/styles/card/fabric-dark.css +5 -4
- package/styles/card/fabric.css +5 -4
- package/styles/card/fluent-dark.css +5 -4
- package/styles/card/fluent.css +5 -4
- package/styles/card/highcontrast-light.css +5 -4
- package/styles/card/highcontrast.css +5 -4
- package/styles/card/material-dark.css +5 -4
- package/styles/card/material.css +5 -4
- package/styles/card/tailwind-dark.css +3 -6
- package/styles/card/tailwind.css +3 -6
- package/styles/dashboard-layout/_bootstrap-dark-definition.scss +1 -3
- package/styles/dashboard-layout/_bootstrap-definition.scss +1 -3
- package/styles/dashboard-layout/_bootstrap4-definition.scss +2 -3
- package/styles/dashboard-layout/_bootstrap5-definition.scss +1 -2
- package/styles/dashboard-layout/_fabric-dark-definition.scss +1 -3
- package/styles/dashboard-layout/_fabric-definition.scss +1 -3
- package/styles/dashboard-layout/_fluent-definition.scss +1 -2
- package/styles/dashboard-layout/_fusionnew-definition.scss +1 -2
- package/styles/dashboard-layout/_highcontrast-definition.scss +1 -3
- package/styles/dashboard-layout/_highcontrast-light-definition.scss +1 -3
- package/styles/dashboard-layout/_layout.scss +0 -5
- package/styles/dashboard-layout/_material-dark-definition.scss +1 -3
- package/styles/dashboard-layout/_material-definition.scss +1 -3
- package/styles/dashboard-layout/_material3-definition.scss +1 -2
- package/styles/dashboard-layout/_tailwind-definition.scss +1 -2
- package/styles/dashboard-layout/bootstrap-dark.css +1 -0
- package/styles/dashboard-layout/bootstrap.css +1 -0
- package/styles/dashboard-layout/bootstrap4.css +1 -0
- package/styles/dashboard-layout/bootstrap5-dark.css +1 -0
- package/styles/dashboard-layout/bootstrap5.css +1 -0
- package/styles/dashboard-layout/fabric-dark.css +1 -0
- package/styles/dashboard-layout/fabric.css +1 -0
- package/styles/dashboard-layout/fluent-dark.css +1 -0
- package/styles/dashboard-layout/fluent.css +1 -0
- package/styles/dashboard-layout/highcontrast-light.css +1 -0
- package/styles/dashboard-layout/highcontrast.css +1 -0
- package/styles/dashboard-layout/icons/_bootstrap-dark.scss +0 -1
- package/styles/dashboard-layout/icons/_bootstrap.scss +0 -1
- package/styles/dashboard-layout/icons/_bootstrap4.scss +0 -1
- package/styles/dashboard-layout/icons/_bootstrap5.scss +0 -1
- package/styles/dashboard-layout/icons/_fabric-dark.scss +0 -2
- package/styles/dashboard-layout/icons/_fabric.scss +0 -2
- package/styles/dashboard-layout/icons/_fluent.scss +0 -1
- package/styles/dashboard-layout/icons/_fusionnew.scss +0 -1
- package/styles/dashboard-layout/icons/_highcontrast.scss +0 -1
- package/styles/dashboard-layout/icons/_material-dark.scss +0 -1
- package/styles/dashboard-layout/icons/_material.scss +0 -1
- package/styles/dashboard-layout/icons/_material3.scss +0 -1
- package/styles/dashboard-layout/icons/_tailwind-dark.scss +0 -1
- package/styles/dashboard-layout/icons/_tailwind.scss +0 -1
- package/styles/dashboard-layout/material-dark.css +1 -0
- package/styles/dashboard-layout/material.css +1 -0
- package/styles/dashboard-layout/tailwind-dark.css +1 -0
- package/styles/dashboard-layout/tailwind.css +1 -0
- package/styles/fabric-dark.css +11 -9
- package/styles/fabric.css +11 -9
- package/styles/fluent-dark.css +11 -9
- package/styles/fluent.css +11 -9
- package/styles/highcontrast-light.css +11 -9
- package/styles/highcontrast.css +11 -9
- package/styles/material-dark.css +11 -9
- package/styles/material.css +11 -9
- package/styles/splitter/_all.scss +1 -1
- package/styles/splitter/_bootstrap-dark-definition.scss +1 -0
- package/styles/splitter/_bootstrap-definition.scss +1 -0
- package/styles/splitter/_bootstrap4-definition.scss +1 -0
- package/styles/splitter/_bootstrap5-definition.scss +4 -1
- package/styles/splitter/_definition.scss +1 -0
- package/styles/splitter/_fabric-dark-definition.scss +1 -0
- package/styles/splitter/_fabric-definition.scss +1 -0
- package/styles/splitter/_fluent-definition.scss +2 -0
- package/styles/splitter/_fusionnew-definition.scss +4 -1
- package/styles/splitter/_highcontrast-definition.scss +1 -0
- package/styles/splitter/_highcontrast-light-definition.scss +1 -0
- package/styles/splitter/_layout.scss +8 -9
- package/styles/splitter/_material-dark-definition.scss +1 -0
- package/styles/splitter/_material-definition.scss +1 -0
- package/styles/splitter/_material3-definition.scss +4 -1
- package/styles/splitter/_responsive.scss +1 -0
- package/styles/splitter/_tailwind-definition.scss +4 -1
- package/styles/splitter/_theme.scss +2 -2
- package/styles/splitter/bootstrap-dark.css +7 -5
- package/styles/splitter/bootstrap.css +7 -5
- package/styles/splitter/bootstrap4.css +7 -5
- package/styles/splitter/bootstrap5-dark.css +7 -5
- package/styles/splitter/bootstrap5.css +7 -5
- package/styles/splitter/fabric-dark.css +7 -5
- package/styles/splitter/fabric.css +7 -5
- package/styles/splitter/fluent-dark.css +7 -5
- package/styles/splitter/fluent.css +7 -5
- package/styles/splitter/highcontrast-light.css +7 -5
- package/styles/splitter/highcontrast.css +7 -5
- package/styles/splitter/material-dark.css +7 -5
- package/styles/splitter/material.css +7 -5
- package/styles/splitter/tailwind-dark.css +7 -5
- package/styles/splitter/tailwind.css +7 -5
- package/styles/tailwind-dark.css +9 -11
- package/styles/tailwind.css +9 -11
@@ -1,10 +1,9 @@
|
|
1
|
-
|
2
1
|
/*! component's default definitions and variables */
|
3
2
|
$skin-name: 'material' !default;
|
4
3
|
$card-img-brdr-radious: 50% !default;
|
5
4
|
$card-brdr-radious: $border-radius !default;
|
6
5
|
$card-box-shadow: none !default;
|
7
|
-
$card-action-btn-txt-transform: none !default
|
6
|
+
$card-action-btn-txt-transform: none !default;
|
8
7
|
$card-bg-color: $default-bg-color !default;
|
9
8
|
$card-focus-bg-color: $default-bg-color !default;
|
10
9
|
$card-hover-bg-color: $default-bg-color !default;
|
@@ -95,14 +94,13 @@ $card-image-title-bigger-font: 24px !default;
|
|
95
94
|
$card-action-btn-bigger-icon-width: 24px !default;
|
96
95
|
$card-action-btn-bigger-icon-height: 24px !default;
|
97
96
|
|
98
|
-
|
99
97
|
//color
|
100
98
|
|
101
|
-
$card-brdr-size: 1px
|
99
|
+
$card-brdr-size: 1px !default;
|
102
100
|
$card-brdr-type: solid !default;
|
103
101
|
$card-brdr-color: $neutral-secondary !default;
|
104
102
|
$card-sep-margin: 16px 0 !default;
|
105
|
-
$card-sep-brdr-size: 1px
|
103
|
+
$card-sep-brdr-size: 1px !default;
|
106
104
|
$card-sep-brdr-type: solid !default;
|
107
105
|
$card-sep-brdr-color: $default-border-color !default;
|
108
106
|
$card-image-title-color: $default-font-color !default;
|
@@ -111,6 +109,7 @@ $card-font-color: $default-font-color !default;
|
|
111
109
|
$card-header-txt-title-color: $default-font-color !default;
|
112
110
|
$card-header-txt-subtitle-color: $default-font-color !default;
|
113
111
|
$card-action-btn-icon-color: $default-font-color !default;
|
112
|
+
|
114
113
|
/*! component's theme wise override material-definitions and variables */
|
115
114
|
$skin-name: 'fabric' !default;
|
116
115
|
$card-img-brdr-radious: 50% !default;
|
@@ -160,7 +159,6 @@ $card-image-title-font: 17px !default;
|
|
160
159
|
$card-action-btn-icon-width: 24px !default;
|
161
160
|
$card-action-btn-icon-height: 24px !default;
|
162
161
|
|
163
|
-
|
164
162
|
// Touch
|
165
163
|
|
166
164
|
$card-bigger-lheight: 45px !default;
|
@@ -196,14 +194,13 @@ $card-image-title-bigger-font: 17px !default;
|
|
196
194
|
$card-action-btn-bigger-icon-width: 24px !default;
|
197
195
|
$card-action-btn-bigger-icon-height: 24px !default;
|
198
196
|
|
199
|
-
|
200
197
|
// color
|
201
198
|
|
202
199
|
$card-bg-color: $neutral-white !default;
|
203
|
-
$card-brdr-size: 1px
|
200
|
+
$card-brdr-size: 1px !default;
|
204
201
|
$card-brdr-type: solid !default;
|
205
202
|
$card-brdr-color: $neutral-light !default;
|
206
|
-
$card-sep-brdr-size: 1px
|
203
|
+
$card-sep-brdr-size: 1px !default;
|
207
204
|
$card-sep-brdr-type: solid !default;
|
208
205
|
$card-sep-brdr-color: $neutral-light !default;
|
209
206
|
$card-image-title-color: $grey-dark-font !default;
|
@@ -49,7 +49,6 @@ $card-image-title-font: 17px !default;
|
|
49
49
|
$card-action-btn-icon-width: 24px !default;
|
50
50
|
$card-action-btn-icon-height: 24px !default;
|
51
51
|
|
52
|
-
|
53
52
|
// Touch
|
54
53
|
$card-content-line-height: normal !default;
|
55
54
|
$card-bigger-lheight: 45px !default;
|
@@ -85,14 +84,13 @@ $card-image-title-bigger-font: 17px !default;
|
|
85
84
|
$card-action-btn-bigger-icon-width: 24px !default;
|
86
85
|
$card-action-btn-bigger-icon-height: 24px !default;
|
87
86
|
|
88
|
-
|
89
87
|
// color
|
90
88
|
|
91
89
|
$card-bg-color: $neutral-white !default;
|
92
|
-
$card-brdr-size: 1px
|
90
|
+
$card-brdr-size: 1px !default;
|
93
91
|
$card-brdr-type: solid !default;
|
94
92
|
$card-brdr-color: $neutral-light !default;
|
95
|
-
$card-sep-brdr-size: 1px
|
93
|
+
$card-sep-brdr-size: 1px !default;
|
96
94
|
$card-sep-brdr-type: solid !default;
|
97
95
|
$card-sep-brdr-color: $neutral-light !default;
|
98
96
|
$card-image-title-color: $grey-dark-font !default;
|
@@ -1,8 +1,10 @@
|
|
1
1
|
$skin-name: 'FluentUI' !default;
|
2
|
+
|
2
3
|
//Layout Variables Start
|
3
4
|
$card-img-brdr-radious: 50% !default;
|
4
5
|
$card-brdr-radious: $model-radius !default;
|
5
6
|
$card-action-btn-txt-transform: none !default;
|
7
|
+
|
6
8
|
// Font
|
7
9
|
$card-header-font: $text-base !default;
|
8
10
|
$card-title-font: $text-lg !default;
|
@@ -12,6 +14,7 @@ $card-content-font-size: $text-sm !default;
|
|
12
14
|
$card-content-bigger-font-size: $text-base !default;
|
13
15
|
$card-header-title-font: $text-base !default;
|
14
16
|
$card-header-sub-title-font: $text-xs !default;
|
17
|
+
|
15
18
|
// Mouse
|
16
19
|
$card-content-line-height: $leading-normal !default;
|
17
20
|
$card-nrml-lheight: 36px !default;
|
@@ -44,6 +47,7 @@ $card-header-txt-nrml-subtitle-font: $text-xs !default;
|
|
44
47
|
$card-image-title-font: $text-base !default;
|
45
48
|
$card-action-btn-icon-width: 24px !default;
|
46
49
|
$card-action-btn-icon-height: 24px !default;
|
50
|
+
|
47
51
|
// Touch
|
48
52
|
$card-bigger-lheight: 48px !default;
|
49
53
|
$card-bigger-mheight: 48px !default;
|
@@ -81,6 +85,7 @@ $card-action-nrml-padding: 16px !default;
|
|
81
85
|
$card-action-bigger-padding: 20px !default;
|
82
86
|
$card-header-bigger-whole-padding: 20px !default;
|
83
87
|
$card-header-whole-padding: 16px !default;
|
88
|
+
|
84
89
|
//Layout Variables End
|
85
90
|
|
86
91
|
//Theme Variables Start
|
@@ -92,10 +97,10 @@ $card-active-bg-color: $flyout-bg-color !default;
|
|
92
97
|
$card-focus-brdr-color: $border-light !default;
|
93
98
|
$card-hover-brdr-color: $border-dark !default;
|
94
99
|
$card-active-brdr-color: $primary !default;
|
95
|
-
$card-brdr-size: 0
|
100
|
+
$card-brdr-size: 0 !default;
|
96
101
|
$card-brdr-type: solid !default;
|
97
102
|
$card-brdr-color: $border-light !default;
|
98
|
-
$card-sep-brdr-size: 1px
|
103
|
+
$card-sep-brdr-size: 1px !default;
|
99
104
|
$card-sep-brdr-type: solid !default;
|
100
105
|
$card-sep-brdr-color: $border-light !default;
|
101
106
|
$card-image-title-color: $white !default;
|
@@ -119,6 +124,7 @@ $card-content-font-color: $content-text-color-alt1 !default;
|
|
119
124
|
$card-box-shadow: $shadow-sm !default;
|
120
125
|
$card-action-btn-icon-color: $primary !default;
|
121
126
|
$card-hover-box-shadow: $shadow-lg !default;
|
127
|
+
|
122
128
|
//Theme Variables End
|
123
129
|
|
124
130
|
$card-hover-class-box-shadow: $shadow-lg !default;
|
@@ -1,8 +1,10 @@
|
|
1
1
|
$skin-name: 'bootstrap5' !default;
|
2
|
+
|
2
3
|
//Layout Variables Start
|
3
4
|
$card-img-brdr-radious: 50% !default;
|
4
5
|
$card-brdr-radious: 4px !default;
|
5
6
|
$card-action-btn-txt-transform: none !default;
|
7
|
+
|
6
8
|
// Font
|
7
9
|
$card-header-font: $text-base !default;
|
8
10
|
$card-title-font: $text-lg !default;
|
@@ -12,6 +14,7 @@ $card-content-font-size: $text-sm !default;
|
|
12
14
|
$card-content-bigger-font-size: $text-base !default;
|
13
15
|
$card-header-title-font: $text-base !default;
|
14
16
|
$card-header-sub-title-font: $text-sm !default;
|
17
|
+
|
15
18
|
// Mouse
|
16
19
|
$card-content-line-height: $leading-normal !default;
|
17
20
|
$card-nrml-lheight: 36px !default;
|
@@ -45,6 +48,7 @@ $card-header-txt-nrml-subtitle-font: $text-sm !default;
|
|
45
48
|
$card-image-title-font: $text-base !default;
|
46
49
|
$card-action-btn-icon-width: 24px !default;
|
47
50
|
$card-action-btn-icon-height: 24px !default;
|
51
|
+
|
48
52
|
// Touch
|
49
53
|
$card-bigger-lheight: 48px !default;
|
50
54
|
$card-bigger-mheight: 48px !default;
|
@@ -80,6 +84,7 @@ $card-action-btn-bigger-icon-width: 24px !default;
|
|
80
84
|
$card-action-btn-bigger-icon-height: 24px !default;
|
81
85
|
$card-image-title-nrml-padding: 12px 16px !default;
|
82
86
|
$card-action-nrml-padding: 12px !default;
|
87
|
+
|
83
88
|
//Layout Variables End
|
84
89
|
|
85
90
|
//Theme Variables Start
|
@@ -91,10 +96,10 @@ $card-active-bg-color: $content-bg-color !default;
|
|
91
96
|
$card-focus-brdr-color: $border-light !default;
|
92
97
|
$card-hover-brdr-color: $border-dark !default;
|
93
98
|
$card-active-brdr-color: $primary !default;
|
94
|
-
$card-brdr-size: 1px
|
99
|
+
$card-brdr-size: 1px !default;
|
95
100
|
$card-brdr-type: solid !default;
|
96
101
|
$card-brdr-color: $border-light !default;
|
97
|
-
$card-sep-brdr-size: 1px
|
102
|
+
$card-sep-brdr-size: 1px !default;
|
98
103
|
$card-sep-brdr-type: solid !default;
|
99
104
|
$card-sep-brdr-color: $border-light !default;
|
100
105
|
$card-image-title-color: $white !default;
|
@@ -118,4 +123,5 @@ $card-content-font-color: $content-text-color-alt1 !default;
|
|
118
123
|
$card-box-shadow: none !default;
|
119
124
|
$card-action-btn-icon-color: $primary !default;
|
120
125
|
$card-hover-box-shadow: none !default;
|
126
|
+
|
121
127
|
//Theme Variables End
|
@@ -50,7 +50,6 @@ $card-image-title-font: 17px !default;
|
|
50
50
|
$card-action-btn-icon-width: 24px !default;
|
51
51
|
$card-action-btn-icon-height: 24px !default;
|
52
52
|
|
53
|
-
|
54
53
|
// Touch
|
55
54
|
|
56
55
|
$card-bigger-lheight: 45px !default;
|
@@ -86,14 +85,13 @@ $card-image-title-bigger-font: 17px !default;
|
|
86
85
|
$card-action-btn-bigger-icon-width: 24px !default;
|
87
86
|
$card-action-btn-bigger-icon-height: 24px !default;
|
88
87
|
|
89
|
-
|
90
88
|
// color
|
91
89
|
|
92
90
|
$card-bg-color: $bg-base-0 !default;
|
93
|
-
$card-brdr-size: 1px
|
91
|
+
$card-brdr-size: 1px !default;
|
94
92
|
$card-brdr-type: solid !default;
|
95
93
|
$card-brdr-color: $border-default !default;
|
96
|
-
$card-sep-brdr-size: 1px
|
94
|
+
$card-sep-brdr-size: 1px !default;
|
97
95
|
$card-sep-brdr-type: solid !default;
|
98
96
|
$card-sep-brdr-color: $border-default !default;
|
99
97
|
$card-image-title-color: $content-font !default;
|
@@ -1,10 +1,9 @@
|
|
1
|
-
|
2
1
|
/*! component's default definitions and variables */
|
3
2
|
$skin-name: 'material' !default;
|
4
3
|
$card-img-brdr-radious: 50% !default;
|
5
4
|
$card-brdr-radious: $border-radius !default;
|
6
5
|
$card-box-shadow: none !default;
|
7
|
-
$card-action-btn-txt-transform: none !default
|
6
|
+
$card-action-btn-txt-transform: none !default;
|
8
7
|
$card-bg-color: $default-bg-color !default;
|
9
8
|
$card-focus-bg-color: $default-bg-color !default;
|
10
9
|
$card-hover-bg-color: $default-bg-color !default;
|
@@ -95,14 +94,13 @@ $card-image-title-bigger-font: 24px !default;
|
|
95
94
|
$card-action-btn-bigger-icon-width: 24px !default;
|
96
95
|
$card-action-btn-bigger-icon-height: 24px !default;
|
97
96
|
|
98
|
-
|
99
97
|
//color
|
100
98
|
|
101
|
-
$card-brdr-size: 1px
|
99
|
+
$card-brdr-size: 1px !default;
|
102
100
|
$card-brdr-type: solid !default;
|
103
101
|
$card-brdr-color: $default-border-color !default;
|
104
102
|
$card-sep-margin: 16px 0 !default;
|
105
|
-
$card-sep-brdr-size: 1px
|
103
|
+
$card-sep-brdr-size: 1px !default;
|
106
104
|
$card-sep-brdr-type: solid !default;
|
107
105
|
$card-sep-brdr-color: $default-border-color !default;
|
108
106
|
$card-image-title-color: $default-font-color !default;
|
@@ -124,6 +122,7 @@ $card-header-txt-title-color: $default-font-color !default;
|
|
124
122
|
$card-header-txt-subtitle-color: $default-font-color !default;
|
125
123
|
$card-content-font-color: $card-header-txt-subtitle-color !default;
|
126
124
|
$card-action-btn-icon-color: $default-font-color !default;
|
125
|
+
|
127
126
|
/*! component's theme wise override material-definitions and variables */
|
128
127
|
$skin-name: 'highcontrast' !default;
|
129
128
|
$card-img-brdr-radious: 50% !default;
|
@@ -173,7 +172,6 @@ $card-image-title-font: 17px !default;
|
|
173
172
|
$card-action-btn-icon-width: 24px !default;
|
174
173
|
$card-action-btn-icon-height: 24px !default;
|
175
174
|
|
176
|
-
|
177
175
|
// Touch
|
178
176
|
|
179
177
|
$card-bigger-lheight: 45px !default;
|
@@ -209,14 +207,13 @@ $card-image-title-bigger-font: 17px !default;
|
|
209
207
|
$card-action-btn-bigger-icon-width: 24px !default;
|
210
208
|
$card-action-btn-bigger-icon-height: 24px !default;
|
211
209
|
|
212
|
-
|
213
210
|
// color
|
214
211
|
|
215
212
|
$card-bg-color: $bg-base-0 !default;
|
216
|
-
$card-brdr-size: 1px
|
213
|
+
$card-brdr-size: 1px !default;
|
217
214
|
$card-brdr-type: solid !default;
|
218
215
|
$card-brdr-color: $border-default !default;
|
219
|
-
$card-sep-brdr-size: 1px
|
216
|
+
$card-sep-brdr-size: 1px !default;
|
220
217
|
$card-sep-brdr-type: solid !default;
|
221
218
|
$card-sep-brdr-color: $border-default !default;
|
222
219
|
$card-image-title-color: $content-font !default;
|
package/styles/card/_layout.scss
CHANGED
@@ -1,4 +1,5 @@
|
|
1
|
-
|
1
|
+
@include export-module('card-layout') {
|
2
|
+
|
2
3
|
/*! card layout */
|
3
4
|
.e-bigger .e-card,
|
4
5
|
.e-bigger.e-card {
|
@@ -134,7 +135,7 @@
|
|
134
135
|
|
135
136
|
&:first-child {
|
136
137
|
margin-left: 0;
|
137
|
-
|
138
|
+
}
|
138
139
|
}
|
139
140
|
}
|
140
141
|
|
@@ -155,7 +156,6 @@
|
|
155
156
|
}
|
156
157
|
}
|
157
158
|
|
158
|
-
|
159
159
|
.e-card {
|
160
160
|
border-radius: $card-brdr-radious;
|
161
161
|
box-sizing: border-box;
|
@@ -340,7 +340,7 @@
|
|
340
340
|
|
341
341
|
.e-card-header-title {
|
342
342
|
font-size: $card-header-txt-nrml-title-font;
|
343
|
-
font-weight:
|
343
|
+
font-weight: normal;
|
344
344
|
@if $skin-name == 'fabric' or $skin-name == 'highcontrast' {
|
345
345
|
font-weight: 600;
|
346
346
|
}
|
@@ -349,7 +349,7 @@
|
|
349
349
|
|
350
350
|
.e-card-sub-title {
|
351
351
|
font-size: $card-header-txt-nrml-subtitle-font;
|
352
|
-
font-weight:
|
352
|
+
font-weight: normal;
|
353
353
|
line-height: $card-header-txt-subtitle-lheight;
|
354
354
|
padding: $card-header-txt-title-nrml-padding;
|
355
355
|
}
|
@@ -472,14 +472,13 @@
|
|
472
472
|
border-radius: 4px;
|
473
473
|
}
|
474
474
|
|
475
|
-
else {
|
475
|
+
@else {
|
476
476
|
border-radius: 2px;
|
477
477
|
}
|
478
478
|
}
|
479
479
|
|
480
480
|
.e-card-btn,
|
481
481
|
a {
|
482
|
-
|
483
482
|
font-family: $font-family;
|
484
483
|
font-size: $card-action-btn-font;
|
485
484
|
line-height: $card-action-btn-nrml-height;
|
@@ -524,5 +523,5 @@
|
|
524
523
|
overflow: hidden;
|
525
524
|
text-overflow: ellipsis;
|
526
525
|
}
|
527
|
-
|
526
|
+
}
|
528
527
|
}
|
@@ -90,14 +90,13 @@ $card-image-title-bigger-font: 24px !default;
|
|
90
90
|
$card-action-btn-bigger-icon-width: 24px !default;
|
91
91
|
$card-action-btn-bigger-icon-height: 24px !default;
|
92
92
|
|
93
|
-
|
94
93
|
//color
|
95
94
|
|
96
|
-
$card-brdr-size: 1px
|
95
|
+
$card-brdr-size: 1px !default;
|
97
96
|
$card-brdr-type: solid !default;
|
98
97
|
$card-brdr-color: $default-border-color !default;
|
99
98
|
$card-sep-margin: 16px 0 !default;
|
100
|
-
$card-sep-brdr-size: 1px
|
99
|
+
$card-sep-brdr-size: 1px !default;
|
101
100
|
$card-sep-brdr-type: solid !default;
|
102
101
|
$card-sep-brdr-color: $default-border-color !default;
|
103
102
|
$card-image-title-color: $default-font-color !default;
|
@@ -116,6 +115,7 @@ $card-action-btn-pressed-border: 0 !default;
|
|
116
115
|
$card-action-btn-pressed-font: $default-font-color !default;
|
117
116
|
$card-font-color: $default-font-color !default;
|
118
117
|
$card-action-btn-icon-color: $default-font-color !default;
|
118
|
+
|
119
119
|
/*! component's theme wise override material-definitions and variables */
|
120
120
|
$skin-name: 'material' !default;
|
121
121
|
$card-img-brdr-radious: 50% !default;
|
@@ -201,7 +201,6 @@ $card-image-title-bigger-font: 24px !default;
|
|
201
201
|
$card-action-btn-bigger-icon-width: 24px !default;
|
202
202
|
$card-action-btn-bigger-icon-height: 24px !default;
|
203
203
|
|
204
|
-
|
205
204
|
// color
|
206
205
|
|
207
206
|
$card-bg-color: $grey-dark !default;
|
@@ -211,10 +210,10 @@ $card-active-bg-color: $grey-dark !default;
|
|
211
210
|
$card-focus-brdr-color: $default-border-color !default;
|
212
211
|
$card-hover-brdr-color: $default-border-color !default;
|
213
212
|
$card-active-brdr-color: $default-border-color !default;
|
214
|
-
$card-brdr-size: 1px
|
213
|
+
$card-brdr-size: 1px !default;
|
215
214
|
$card-brdr-type: none !default;
|
216
215
|
$card-brdr-color: $default-border-color !default;
|
217
|
-
$card-sep-brdr-size: 1px
|
216
|
+
$card-sep-brdr-size: 1px !default;
|
218
217
|
$card-sep-brdr-type: solid !default;
|
219
218
|
$card-sep-brdr-color: rgba($grey-light-font, .12) !default;
|
220
219
|
$card-image-title-color: $grey-dark-font !default;
|
@@ -227,10 +226,10 @@ $card-action-btn-hover-border: 0 !default;
|
|
227
226
|
$card-action-btn-hover-font: $accent !default;
|
228
227
|
$card-action-btn-focus-bg: rgba($grey-black, .12) !default;
|
229
228
|
$card-action-btn-focus-border: 0 !default;
|
230
|
-
$card-action-btn-focus-font: $accent
|
229
|
+
$card-action-btn-focus-font: $accent !default;
|
231
230
|
$card-action-btn-pressed-bg: rgba($grey-black, .12) !default;
|
232
231
|
$card-action-btn-pressed-border: 0 !default;
|
233
|
-
$card-action-btn-pressed-font: $accent
|
232
|
+
$card-action-btn-pressed-font: $accent !default;
|
234
233
|
$card-font-color: rgba($grey-light-font, .87) !default;
|
235
234
|
$card-header-txt-title-color: $grey-dark-font !default;
|
236
235
|
$card-header-txt-subtitle-color: rgba($grey-dark-font, .7) !default;
|
@@ -84,7 +84,6 @@ $card-image-title-bigger-font: 24px !default;
|
|
84
84
|
$card-action-btn-bigger-icon-width: 24px !default;
|
85
85
|
$card-action-btn-bigger-icon-height: 24px !default;
|
86
86
|
|
87
|
-
|
88
87
|
// color
|
89
88
|
|
90
89
|
$card-bg-color: $grey-white !default;
|
@@ -94,10 +93,10 @@ $card-active-bg-color: $grey-white !default;
|
|
94
93
|
$card-focus-brdr-color: $default-border-color !default;
|
95
94
|
$card-hover-brdr-color: $default-border-color !default;
|
96
95
|
$card-active-brdr-color: $default-border-color !default;
|
97
|
-
$card-brdr-size: 1px
|
96
|
+
$card-brdr-size: 1px !default;
|
98
97
|
$card-brdr-type: none !default;
|
99
98
|
$card-brdr-color: $default-border-color !default;
|
100
|
-
$card-sep-brdr-size: 1px
|
99
|
+
$card-sep-brdr-size: 1px !default;
|
101
100
|
$card-sep-brdr-type: solid !default;
|
102
101
|
$card-sep-brdr-color: rgba($grey-light-font, .12) !default;
|
103
102
|
$card-image-title-color: $grey-dark-font !default;
|
@@ -110,10 +109,10 @@ $card-action-btn-hover-border: 0 !default;
|
|
110
109
|
$card-action-btn-hover-font: $accent !default;
|
111
110
|
$card-action-btn-focus-bg: rgba($grey-black, .12) !default;
|
112
111
|
$card-action-btn-focus-border: 0 !default;
|
113
|
-
$card-action-btn-focus-font: $accent
|
112
|
+
$card-action-btn-focus-font: $accent !default;
|
114
113
|
$card-action-btn-pressed-bg: rgba($grey-black, .12) !default;
|
115
114
|
$card-action-btn-pressed-border: 0 !default;
|
116
|
-
$card-action-btn-pressed-font: $accent
|
115
|
+
$card-action-btn-pressed-font: $accent !default;
|
117
116
|
$card-font-color: rgba($grey-light-font, .87) !default;
|
118
117
|
$card-header-txt-title-color: rgba($grey-light-font, .87) !default;
|
119
118
|
$card-header-txt-subtitle-color: rgba($grey-light-font, .54) !default;
|
@@ -1,8 +1,10 @@
|
|
1
1
|
$skin-name: 'bootstrap5' !default;
|
2
|
+
|
2
3
|
//Layout Variables Start
|
3
4
|
$card-img-brdr-radious: 50% !default;
|
4
5
|
$card-brdr-radious: 4px !default;
|
5
6
|
$card-action-btn-txt-transform: none !default;
|
7
|
+
|
6
8
|
// Font
|
7
9
|
$card-header-font: $text-base !default;
|
8
10
|
$card-title-font: $text-lg !default;
|
@@ -12,6 +14,7 @@ $card-content-font-size: $text-sm !default;
|
|
12
14
|
$card-content-bigger-font-size: $text-base !default;
|
13
15
|
$card-header-title-font: $text-base !default;
|
14
16
|
$card-header-sub-title-font: $text-sm !default;
|
17
|
+
|
15
18
|
// Mouse
|
16
19
|
$card-content-line-height: $leading-normal !default;
|
17
20
|
$card-nrml-lheight: 36px !default;
|
@@ -45,6 +48,7 @@ $card-header-txt-nrml-subtitle-font: $text-sm !default;
|
|
45
48
|
$card-image-title-font: $text-base !default;
|
46
49
|
$card-action-btn-icon-width: 24px !default;
|
47
50
|
$card-action-btn-icon-height: 24px !default;
|
51
|
+
|
48
52
|
// Touch
|
49
53
|
$card-bigger-lheight: 48px !default;
|
50
54
|
$card-bigger-mheight: 48px !default;
|
@@ -80,6 +84,7 @@ $card-action-btn-bigger-icon-width: 24px !default;
|
|
80
84
|
$card-action-btn-bigger-icon-height: 24px !default;
|
81
85
|
$card-image-title-nrml-padding: 12px 16px !default;
|
82
86
|
$card-action-nrml-padding: 12px !default;
|
87
|
+
|
83
88
|
//Layout Variables End
|
84
89
|
|
85
90
|
//Theme Variables Start
|
@@ -91,10 +96,10 @@ $card-active-bg-color: $content-bg-color !default;
|
|
91
96
|
$card-focus-brdr-color: $border-light !default;
|
92
97
|
$card-hover-brdr-color: $border-dark !default;
|
93
98
|
$card-active-brdr-color: $primary !default;
|
94
|
-
$card-brdr-size: 1px
|
99
|
+
$card-brdr-size: 1px !default;
|
95
100
|
$card-brdr-type: solid !default;
|
96
101
|
$card-brdr-color: $border-light !default;
|
97
|
-
$card-sep-brdr-size: 1px
|
102
|
+
$card-sep-brdr-size: 1px !default;
|
98
103
|
$card-sep-brdr-type: solid !default;
|
99
104
|
$card-sep-brdr-color: $border-light !default;
|
100
105
|
$card-image-title-color: $white !default;
|
@@ -118,4 +123,5 @@ $card-content-font-color: $content-text-color-alt1 !default;
|
|
118
123
|
$card-box-shadow: none !default;
|
119
124
|
$card-action-btn-icon-color: $primary !default;
|
120
125
|
$card-hover-box-shadow: none !default;
|
126
|
+
|
121
127
|
//Theme Variables End
|
@@ -1,8 +1,10 @@
|
|
1
1
|
$skin-name: 'tailwind' !default;
|
2
|
+
|
2
3
|
//Layout Variables Start
|
3
4
|
$card-img-brdr-radious: 50% !default;
|
4
5
|
$card-brdr-radious: 6px !default;
|
5
6
|
$card-action-btn-txt-transform: none !default;
|
7
|
+
|
6
8
|
// Font
|
7
9
|
$card-header-font: $text-sm !default;
|
8
10
|
$card-title-font: 16px !default;
|
@@ -12,6 +14,7 @@ $card-content-font-size: $text-sm !default;
|
|
12
14
|
$card-content-bigger-font-size: $text-base !default;
|
13
15
|
$card-header-title-font: $text-sm !default;
|
14
16
|
$card-header-sub-title-font: $text-sm !default;
|
17
|
+
|
15
18
|
// Mouse
|
16
19
|
$card-content-line-height: $leading-normal !default;
|
17
20
|
$card-nrml-lheight: 24px !default;
|
@@ -80,6 +83,7 @@ $card-action-btn-bigger-icon-height: 24px !default; //Need to check UI
|
|
80
83
|
$card-image-title-nrml-padding: 8px 16px !default;
|
81
84
|
$card-action-nrml-padding: 18px 18px !default;
|
82
85
|
$card-highlight-color: $primary !default;
|
86
|
+
|
83
87
|
//Layout Variables End
|
84
88
|
|
85
89
|
//Theme Variables Start
|
@@ -90,10 +94,10 @@ $card-active-bg-color: $content-bg-color-alt2 !default;
|
|
90
94
|
$card-focus-brdr-color: $border-light !default;
|
91
95
|
$card-hover-brdr-color: $border-light !default;
|
92
96
|
$card-active-brdr-color: $border-light !default;
|
93
|
-
$card-brdr-size: 1px
|
97
|
+
$card-brdr-size: 1px !default;
|
94
98
|
$card-brdr-type: solid !default;
|
95
99
|
$card-brdr-color: $border-light !default;
|
96
|
-
$card-sep-brdr-size: 1px
|
100
|
+
$card-sep-brdr-size: 1px !default;
|
97
101
|
$card-sep-brdr-type: solid !default;
|
98
102
|
$card-sep-brdr-color: $border-light !default;
|
99
103
|
$card-image-title-color: $content-text-color !default;
|
@@ -117,4 +121,5 @@ $card-content-font-color: $content-text-color-alt1 !default;
|
|
117
121
|
$card-box-shadow: $shadow !default;
|
118
122
|
$card-action-btn-icon-color: $primary !default; //Doubt
|
119
123
|
$card-hover-box-shadow: $shadow !default;
|
124
|
+
|
120
125
|
//Theme Variables End
|
package/styles/card/_theme.scss
CHANGED
@@ -1,6 +1,7 @@
|
|
1
|
-
|
1
|
+
@include export-module('card-theme') {
|
2
|
+
|
2
3
|
/*! card theme */
|
3
|
-
|
4
|
+
/* stylelint-disable property-no-vendor-prefix */
|
4
5
|
|
5
6
|
.e-card {
|
6
7
|
-webkit-tap-highlight-color: $card-highlight-color;
|
@@ -49,7 +50,6 @@
|
|
49
50
|
background-color: $card-image-title-bg;
|
50
51
|
color: $card-image-title-color;
|
51
52
|
}
|
52
|
-
|
53
53
|
}
|
54
54
|
|
55
55
|
.e-card-actions {
|
@@ -294,12 +294,12 @@
|
|
294
294
|
}
|
295
295
|
.e-card .e-card-header .e-card-header-caption .e-card-header-title {
|
296
296
|
font-size: 13px;
|
297
|
-
font-weight:
|
297
|
+
font-weight: normal;
|
298
298
|
line-height: 18px;
|
299
299
|
}
|
300
300
|
.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
|
301
301
|
font-size: 12px;
|
302
|
-
font-weight:
|
302
|
+
font-weight: normal;
|
303
303
|
line-height: 14px;
|
304
304
|
padding: 0 0 8px;
|
305
305
|
}
|
@@ -407,8 +407,8 @@
|
|
407
407
|
text-overflow: ellipsis;
|
408
408
|
width: inherit;
|
409
409
|
}
|
410
|
-
.e-card .e-card-actions .e-card-btn
|
411
|
-
.e-card .e-card-actions a
|
410
|
+
.e-card .e-card-actions .e-card-btn,
|
411
|
+
.e-card .e-card-actions a {
|
412
412
|
border-radius: 2px;
|
413
413
|
}
|
414
414
|
.e-card .e-card-actions .e-card-btn,
|
@@ -444,6 +444,7 @@
|
|
444
444
|
}
|
445
445
|
|
446
446
|
/*! card theme */
|
447
|
+
/* stylelint-disable property-no-vendor-prefix */
|
447
448
|
.e-card {
|
448
449
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
449
450
|
background-color: #6e6e6e;
|
@@ -295,12 +295,12 @@
|
|
295
295
|
}
|
296
296
|
.e-card .e-card-header .e-card-header-caption .e-card-header-title {
|
297
297
|
font-size: 14px;
|
298
|
-
font-weight:
|
298
|
+
font-weight: normal;
|
299
299
|
line-height: normal;
|
300
300
|
}
|
301
301
|
.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
|
302
302
|
font-size: 14px;
|
303
|
-
font-weight:
|
303
|
+
font-weight: normal;
|
304
304
|
line-height: normal;
|
305
305
|
padding: 6px 0 0;
|
306
306
|
}
|
@@ -408,8 +408,8 @@
|
|
408
408
|
text-overflow: ellipsis;
|
409
409
|
width: inherit;
|
410
410
|
}
|
411
|
-
.e-card .e-card-actions .e-card-btn
|
412
|
-
.e-card .e-card-actions a
|
411
|
+
.e-card .e-card-actions .e-card-btn,
|
412
|
+
.e-card .e-card-actions a {
|
413
413
|
border-radius: 2px;
|
414
414
|
}
|
415
415
|
.e-card .e-card-actions .e-card-btn,
|
@@ -445,6 +445,7 @@
|
|
445
445
|
}
|
446
446
|
|
447
447
|
/*! card theme */
|
448
|
+
/* stylelint-disable property-no-vendor-prefix */
|
448
449
|
.e-card {
|
449
450
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
450
451
|
background-color: #fff;
|
@@ -300,12 +300,12 @@
|
|
300
300
|
}
|
301
301
|
.e-card .e-card-header .e-card-header-caption .e-card-header-title {
|
302
302
|
font-size: 14px;
|
303
|
-
font-weight:
|
303
|
+
font-weight: normal;
|
304
304
|
line-height: 21px;
|
305
305
|
}
|
306
306
|
.e-card .e-card-header .e-card-header-caption .e-card-sub-title {
|
307
307
|
font-size: 14px;
|
308
|
-
font-weight:
|
308
|
+
font-weight: normal;
|
309
309
|
line-height: 16px;
|
310
310
|
padding: 10px 0 0;
|
311
311
|
}
|
@@ -413,8 +413,8 @@
|
|
413
413
|
text-overflow: ellipsis;
|
414
414
|
width: inherit;
|
415
415
|
}
|
416
|
-
.e-card .e-card-actions .e-card-btn
|
417
|
-
.e-card .e-card-actions a
|
416
|
+
.e-card .e-card-actions .e-card-btn,
|
417
|
+
.e-card .e-card-actions a {
|
418
418
|
border-radius: 2px;
|
419
419
|
}
|
420
420
|
.e-card .e-card-actions .e-card-btn,
|
@@ -450,6 +450,7 @@
|
|
450
450
|
}
|
451
451
|
|
452
452
|
/*! card theme */
|
453
|
+
/* stylelint-disable property-no-vendor-prefix */
|
453
454
|
.e-card {
|
454
455
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
455
456
|
background-color: #fff;
|