@progress/kendo-theme-material 5.6.1-dev.7 → 5.8.1-dev.0
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/dist/all.css +274 -649
- package/dist/all.scss +136 -501
- package/lib/swatches/material-aqua-dark.json +1 -1
- package/lib/swatches/material-arctic.json +1 -1
- package/lib/swatches/material-burnt-teal.json +1 -1
- package/lib/swatches/material-dataviz-v4.json +1 -1
- package/lib/swatches/material-eggplant.json +1 -1
- package/lib/swatches/material-lime-dark.json +1 -1
- package/lib/swatches/material-lime.json +1 -1
- package/lib/swatches/material-main-dark.json +1 -1
- package/lib/swatches/material-main.json +1 -1
- package/lib/swatches/material-nova.json +1 -1
- package/lib/swatches/material-pacific-dark.json +1 -1
- package/lib/swatches/material-pacific.json +1 -1
- package/lib/swatches/material-sky-dark.json +1 -1
- package/lib/swatches/material-sky.json +1 -1
- package/lib/swatches/material-smoke.json +1 -1
- package/package.json +3 -3
- package/scss/button/_layout.scss +1 -2
- package/scss/calendar/_theme.scss +0 -2
- package/scss/drawer/_theme.scss +2 -2
- package/scss/editor/_theme.scss +2 -3
- package/scss/floating-label/_theme.scss +0 -3
- package/scss/forms/_variables.scss +1 -1
- package/scss/grid/_theme.scss +6 -22
- package/scss/input/_layout.scss +2 -4
- package/scss/listview/_theme.scss +1 -2
- package/scss/pivotgrid/_theme.scss +1 -2
- package/scss/scheduler/_layout.scss +0 -1
- package/scss/signature/_variables.scss +23 -21
- package/scss/slider/_theme.scss +0 -1
- package/scss/spreadsheet/_theme.scss +0 -8
- package/scss/timeline/_layout.scss +0 -2
- package/scss/typography/_variables.scss +1 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-theme-material",
|
|
3
3
|
"description": "Material theme for Kendo UI",
|
|
4
|
-
"version": "5.
|
|
4
|
+
"version": "5.8.1-dev.0",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"postpublish": "echo 'no postpublish for material theme'"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@progress/kendo-theme-default": "^5.
|
|
47
|
+
"@progress/kendo-theme-default": "^5.8.1-dev.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"sass-build": "^1.0.0"
|
|
51
51
|
},
|
|
52
|
-
"gitHead": "
|
|
52
|
+
"gitHead": "0194cfa203a1bb7b85bcef2bb57b91dc84833c9d"
|
|
53
53
|
}
|
package/scss/button/_layout.scss
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
.k-calendar {
|
|
6
6
|
|
|
7
|
-
.k-state-focused .k-link,
|
|
8
7
|
.k-focus .k-link {
|
|
9
8
|
@include fill(
|
|
10
9
|
$calendar-cell-hover-text,
|
|
@@ -12,7 +11,6 @@
|
|
|
12
11
|
$calendar-cell-hover-border
|
|
13
12
|
);
|
|
14
13
|
}
|
|
15
|
-
.k-state-selected.k-state-focused .k-link,
|
|
16
14
|
.k-selected.k-focus .k-link {
|
|
17
15
|
@include fill(
|
|
18
16
|
$calendar-cell-selected-text,
|
package/scss/drawer/_theme.scss
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
@import "~@progress/kendo-theme-default/scss/drawer/_theme.scss";
|
|
2
2
|
|
|
3
3
|
@include exports( "drawer/theme/material" ) {
|
|
4
|
+
|
|
4
5
|
.k-drawer-item {
|
|
5
|
-
&.k-state-selected,
|
|
6
6
|
&.k-selected {
|
|
7
7
|
|
|
8
8
|
&:focus,
|
|
9
|
-
&.k-state-focused,
|
|
10
9
|
&.k-focus {
|
|
11
10
|
background-color: $drawer-focused-bg;
|
|
12
11
|
box-shadow: $drawer-focused-shadow;
|
|
13
12
|
}
|
|
14
13
|
}
|
|
15
14
|
}
|
|
15
|
+
|
|
16
16
|
}
|
package/scss/editor/_theme.scss
CHANGED
|
@@ -42,9 +42,9 @@
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
// Hover &
|
|
45
|
+
// Hover & Active state
|
|
46
46
|
&:hover,
|
|
47
|
-
&.k-
|
|
47
|
+
&.k-hover
|
|
48
48
|
&.k-active {
|
|
49
49
|
border-color: $panel-border;
|
|
50
50
|
}
|
|
@@ -62,7 +62,6 @@
|
|
|
62
62
|
|
|
63
63
|
// Insert table
|
|
64
64
|
.k-ct-popup {
|
|
65
|
-
.k-state-selected,
|
|
66
65
|
.k-selected {
|
|
67
66
|
@include fill( $selected-text, $selected-bg, $selected-border, none );
|
|
68
67
|
}
|
|
@@ -3,7 +3,7 @@ $form-spacer: $padding-x * 2 !default;
|
|
|
3
3
|
|
|
4
4
|
$form-font-size: $font-size !default;
|
|
5
5
|
$form-line-height: $line-height !default;
|
|
6
|
-
$form-line-height-em: $form-line-height * 1em !default;
|
|
6
|
+
$form-line-height-em: calc( #{$form-line-height} * 1em ) !default;
|
|
7
7
|
$form-line-height-sm: $line-height-sm !default;
|
|
8
8
|
$form-line-height-lg: $line-height-lg !default;
|
|
9
9
|
|
package/scss/grid/_theme.scss
CHANGED
|
@@ -6,14 +6,11 @@
|
|
|
6
6
|
.k-grid {
|
|
7
7
|
|
|
8
8
|
// Selected state
|
|
9
|
-
td.k-state-selected,
|
|
10
9
|
td.k-selected,
|
|
11
|
-
tr.k-state-selected,
|
|
12
10
|
tr.k-selected {
|
|
13
11
|
color: $grid-selected-text;
|
|
14
12
|
background-color: $grid-selected-bg;
|
|
15
13
|
}
|
|
16
|
-
tr.k-state-selected > td,
|
|
17
14
|
tr.k-selected > td {
|
|
18
15
|
color: inherit;
|
|
19
16
|
background-color: transparent;
|
|
@@ -21,14 +18,12 @@
|
|
|
21
18
|
|
|
22
19
|
// Hover, Focused state
|
|
23
20
|
table {
|
|
24
|
-
>tr:not(.k-detail-row):hover,
|
|
25
|
-
>tr:not(.k-detail-row).k-
|
|
26
|
-
|
|
27
|
-
td.k-state-focused,
|
|
21
|
+
> tr:not(.k-detail-row):hover,
|
|
22
|
+
> tr:not(.k-detail-row).k-hover,
|
|
23
|
+
td:focus,
|
|
28
24
|
td.k-focus,
|
|
29
|
-
th.k-state-focused,
|
|
30
|
-
th.k-focus,
|
|
31
25
|
th:focus,
|
|
26
|
+
th.k-focus,
|
|
32
27
|
.k-master-row > td:focus,
|
|
33
28
|
.k-grouping-row > td:focus,
|
|
34
29
|
.k-detail-row > td:focus,
|
|
@@ -38,7 +33,6 @@
|
|
|
38
33
|
}
|
|
39
34
|
|
|
40
35
|
tr:hover,
|
|
41
|
-
tr.k-state-hover,
|
|
42
36
|
tr.k-hover {
|
|
43
37
|
.k-grid-header-sticky,
|
|
44
38
|
.k-grid-footer-sticky {
|
|
@@ -47,9 +41,8 @@
|
|
|
47
41
|
}
|
|
48
42
|
}
|
|
49
43
|
|
|
50
|
-
td
|
|
44
|
+
td:focus,
|
|
51
45
|
td.k-focus,
|
|
52
|
-
th.k-state-focused,
|
|
53
46
|
th.k-focus,
|
|
54
47
|
th:focus,
|
|
55
48
|
.k-master-row > td:focus,
|
|
@@ -66,7 +59,6 @@
|
|
|
66
59
|
|
|
67
60
|
}
|
|
68
61
|
.k-grid-pager:focus,
|
|
69
|
-
.k-grid-pager.k-state-focused,
|
|
70
62
|
.k-grid-pager.k-focus {
|
|
71
63
|
color: inherit;
|
|
72
64
|
}
|
|
@@ -120,7 +112,6 @@
|
|
|
120
112
|
|
|
121
113
|
.k-group-footer {
|
|
122
114
|
&:hover td,
|
|
123
|
-
&.k-state-hover td,
|
|
124
115
|
&.k-hover td {
|
|
125
116
|
color: inherit;
|
|
126
117
|
@include fill( $bg: $grid-sticky-footer-hovered-bg );
|
|
@@ -171,15 +162,12 @@
|
|
|
171
162
|
}
|
|
172
163
|
|
|
173
164
|
&:focus,
|
|
174
|
-
&.k-
|
|
175
|
-
&.k-focus,
|
|
176
|
-
&.k-state-border-down {
|
|
165
|
+
&.k-focus {
|
|
177
166
|
color: $grid-text;
|
|
178
167
|
background-color: $grid-filter-button-focus;
|
|
179
168
|
box-shadow: none;
|
|
180
169
|
}
|
|
181
170
|
|
|
182
|
-
&.k-state-active,
|
|
183
171
|
&.k-active {
|
|
184
172
|
color: $primary-contrast;
|
|
185
173
|
background-color: $primary;
|
|
@@ -220,7 +208,6 @@
|
|
|
220
208
|
}
|
|
221
209
|
|
|
222
210
|
&:hover td,
|
|
223
|
-
&.k-state-hover td,
|
|
224
211
|
&.k-hover td {
|
|
225
212
|
@include fill( $bg: $grid-sticky-footer-hovered-bg );
|
|
226
213
|
}
|
|
@@ -253,7 +240,6 @@
|
|
|
253
240
|
}
|
|
254
241
|
|
|
255
242
|
.k-columnmenu-item {
|
|
256
|
-
&.k-state-selected,
|
|
257
243
|
&.k-selected {
|
|
258
244
|
@include fill(
|
|
259
245
|
$kendo-list-item-selected-text,
|
|
@@ -262,7 +248,6 @@
|
|
|
262
248
|
}
|
|
263
249
|
}
|
|
264
250
|
.k-columnmenu-item:focus,
|
|
265
|
-
.k-columnmenu-item.k-state-focus,
|
|
266
251
|
.k-columnmenu-item.k-focus {
|
|
267
252
|
background: $kendo-list-item-hover-bg;
|
|
268
253
|
}
|
|
@@ -271,7 +256,6 @@
|
|
|
271
256
|
|
|
272
257
|
.k-item {
|
|
273
258
|
// Selected state
|
|
274
|
-
&.k-state-selected,
|
|
275
259
|
&.k-selected {
|
|
276
260
|
background: $kendo-list-item-hover-bg;
|
|
277
261
|
}
|
package/scss/input/_layout.scss
CHANGED
|
@@ -83,8 +83,7 @@
|
|
|
83
83
|
pointer-events: none;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
&.k-focus::after
|
|
87
|
-
&.k-state-focused::after {
|
|
86
|
+
&.k-focus::after {
|
|
88
87
|
opacity: 1;
|
|
89
88
|
transform: scaleX(1);
|
|
90
89
|
}
|
|
@@ -102,8 +101,7 @@
|
|
|
102
101
|
transform: none;
|
|
103
102
|
}
|
|
104
103
|
|
|
105
|
-
&.k-focus::after
|
|
106
|
-
&.k-state-focused::after {
|
|
104
|
+
&.k-focus::after {
|
|
107
105
|
transform: none;
|
|
108
106
|
}
|
|
109
107
|
&:focus-within::after {
|
|
@@ -8,8 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
// Listview content
|
|
10
10
|
.k-listview-content {}
|
|
11
|
-
.k-listview-content > .k-
|
|
12
|
-
.k-listview-content > .k-selected.k-focused {
|
|
11
|
+
.k-listview-content > .k-selected.k-focus {
|
|
13
12
|
background-color: rgba( contrast-wcag( $listview-bg ), .12 );
|
|
14
13
|
}
|
|
15
14
|
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
@include exports("pivotgrid/theme/material") {
|
|
4
4
|
|
|
5
5
|
// Hover and Focus state have the same bg color
|
|
6
|
-
.k-pivotgrid-cell.k-state-focus,
|
|
7
|
-
.k-pivotgrid-cell.k-focus,
|
|
8
6
|
.k-pivotgrid-cell:focus,
|
|
7
|
+
.k-pivotgrid-cell.k-focus,
|
|
9
8
|
.k-master-row > .k-pivotgrid-cell:focus,
|
|
10
9
|
.k-grouping-row > .k-pivotgrid-cell:focus,
|
|
11
10
|
.k-detail-row > .k-pivotgrid-cell:focus,
|
|
@@ -4,40 +4,42 @@ $kendo-signature-height: 108px !default;
|
|
|
4
4
|
$kendo-signature-maximized-width: 750px !default;
|
|
5
5
|
$kendo-signature-maximized-height: 252px !default;
|
|
6
6
|
|
|
7
|
-
$kendo-signature-padding: map-get( $spacing,
|
|
8
|
-
$kendo-signature-padding-sm: map-get( $spacing,
|
|
9
|
-
$kendo-signature-padding-md: $kendo-signature-padding !default;
|
|
10
|
-
$kendo-signature-padding-lg: map-get( $spacing,
|
|
7
|
+
$kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
|
|
8
|
+
$kendo-signature-padding-x-sm: map-get( $spacing, thin ) !default;
|
|
9
|
+
$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
|
|
10
|
+
$kendo-signature-padding-x-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
|
|
11
|
+
|
|
12
|
+
$kendo-signature-padding-y: $kendo-signature-padding-x !default;
|
|
13
|
+
$kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
|
|
14
|
+
$kendo-signature-padding-y-md: $kendo-signature-padding-y !default;
|
|
15
|
+
$kendo-signature-padding-y-lg: $kendo-signature-padding-x-lg !default;
|
|
11
16
|
|
|
12
17
|
$kendo-signature-line-width: 1px !default;
|
|
13
18
|
$kendo-signature-line-style: dashed !default;
|
|
14
19
|
$kendo-signature-line-color: rgba( $info, .24 ) !default;
|
|
15
20
|
|
|
16
|
-
$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding} ) !default;
|
|
17
|
-
$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-sm} ) !default;
|
|
18
|
-
$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-md} ) !default;
|
|
19
|
-
$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-lg} ) !default;
|
|
21
|
+
$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
|
|
22
|
+
$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
|
|
23
|
+
$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-x-md} ) !default;
|
|
24
|
+
$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-x-lg} ) !default;
|
|
20
25
|
|
|
21
|
-
$kendo-signature-line-bottom-offset:
|
|
22
|
-
$kendo-signature-line-bottom-offset-sm: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-sm} ) !default;
|
|
23
|
-
$kendo-signature-line-bottom-offset-md: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-md} ) !default;
|
|
24
|
-
$kendo-signature-line-bottom-offset-lg: calc( #{$kendo-button-calc-size} + #{$kendo-signature-padding-lg} ) !default;
|
|
26
|
+
$kendo-signature-line-bottom-offset: 33% !default;
|
|
25
27
|
|
|
26
28
|
$kendo-signature-sizes: (
|
|
27
29
|
sm: (
|
|
28
|
-
padding: $kendo-signature-padding-sm,
|
|
29
|
-
|
|
30
|
-
line-
|
|
30
|
+
padding-x: $kendo-signature-padding-x-sm,
|
|
31
|
+
padding-y: $kendo-signature-padding-y-sm,
|
|
32
|
+
line-size: $kendo-signature-line-size-sm
|
|
31
33
|
),
|
|
32
34
|
md: (
|
|
33
|
-
padding: $kendo-signature-padding-md,
|
|
34
|
-
|
|
35
|
-
line-
|
|
35
|
+
padding-x: $kendo-signature-padding-x-md,
|
|
36
|
+
padding-y: $kendo-signature-padding-y-md,
|
|
37
|
+
line-size: $kendo-signature-line-size-md
|
|
36
38
|
),
|
|
37
39
|
lg: (
|
|
38
|
-
padding: $kendo-signature-padding-lg,
|
|
39
|
-
|
|
40
|
-
line-
|
|
40
|
+
padding-x: $kendo-signature-padding-x-lg,
|
|
41
|
+
padding-y: $kendo-signature-padding-y-lg,
|
|
42
|
+
line-size: $kendo-signature-line-size-lg
|
|
41
43
|
)
|
|
42
44
|
) !default;
|
|
43
45
|
|
package/scss/slider/_theme.scss
CHANGED
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
.k-tabstrip-items .k-item {
|
|
21
21
|
color: inherit;
|
|
22
22
|
}
|
|
23
|
-
.k-tabstrip-items .k-item.k-state-active::after,
|
|
24
23
|
.k-tabstrip-items .k-item.k-active::after {
|
|
25
24
|
border-color: $primary-contrast;
|
|
26
25
|
}
|
|
@@ -43,7 +42,6 @@
|
|
|
43
42
|
$toolbar-gradient
|
|
44
43
|
);
|
|
45
44
|
|
|
46
|
-
.k-tabstrip-items .k-item.k-state-active,
|
|
47
45
|
.k-tabstrip-items .k-item.k-active {
|
|
48
46
|
border-color: $secondary;
|
|
49
47
|
}
|
|
@@ -165,7 +163,6 @@
|
|
|
165
163
|
);
|
|
166
164
|
box-shadow: inset 0 0 0 1px $kendo-button-border;
|
|
167
165
|
|
|
168
|
-
&.k-state-active,
|
|
169
166
|
&.k-active {
|
|
170
167
|
@include fill(
|
|
171
168
|
$kendo-button-active-text,
|
|
@@ -211,13 +208,11 @@
|
|
|
211
208
|
|
|
212
209
|
.k-spreadsheet-has-image {
|
|
213
210
|
&:hover,
|
|
214
|
-
&.k-state-hovered,
|
|
215
211
|
&.k-hover {
|
|
216
212
|
box-shadow: $spreadsheet-insert-image-dialog-preview-overlay-shadow;
|
|
217
213
|
}
|
|
218
214
|
|
|
219
215
|
&:hover div,
|
|
220
|
-
&.k-state-hovered div,
|
|
221
216
|
&.k-hover div {
|
|
222
217
|
color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
|
|
223
218
|
}
|
|
@@ -252,7 +247,6 @@
|
|
|
252
247
|
.k-button {}
|
|
253
248
|
|
|
254
249
|
.k-button:hover,
|
|
255
|
-
.k-button.k-state-hover,
|
|
256
250
|
.k-button.k-hover {
|
|
257
251
|
@include fill(
|
|
258
252
|
$kendo-list-item-hover-text,
|
|
@@ -260,9 +254,7 @@
|
|
|
260
254
|
);
|
|
261
255
|
}
|
|
262
256
|
.k-button:active,
|
|
263
|
-
.k-button.k-state-active,
|
|
264
257
|
.k-button.k-active,
|
|
265
|
-
.k-button.k-state-selected,
|
|
266
258
|
.k-button.k-selected {
|
|
267
259
|
@include fill(
|
|
268
260
|
$kendo-list-item-selected-text,
|
|
@@ -10,12 +10,10 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.k-timeline-track-item:hover .k-timeline-circle::before,
|
|
13
|
-
.k-timeline-track-item.k-state-hover .k-timeline-circle::before,
|
|
14
13
|
.k-timeline-track-item.k-hover .k-timeline-circle::before {
|
|
15
14
|
opacity: $kendo-flat-button-hover-opacity;
|
|
16
15
|
}
|
|
17
16
|
|
|
18
|
-
.k-timeline-track-item.k-state-focus .k-timeline-circle::before,
|
|
19
17
|
.k-timeline-track-item.k-focus .k-timeline-circle::before {
|
|
20
18
|
opacity: $kendo-flat-button-focus-opacity;
|
|
21
19
|
}
|
|
@@ -28,7 +28,7 @@ $line-height-xs: 1 !default;
|
|
|
28
28
|
$line-height-sm: 1.2 !default;
|
|
29
29
|
$line-height-md: $line-height !default;
|
|
30
30
|
$line-height-lg: 1.5 !default;
|
|
31
|
-
$line-height-em: $line-height * 1em !default;
|
|
31
|
+
$line-height-em: calc( #{$line-height} * 1em ) !default;
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
// Font weight
|