@progress/kendo-theme-fluent 11.0.3-dev.3 → 11.1.0-dev.1
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 +1 -1
- package/dist/fluent-main-dark.css +1 -1
- package/dist/fluent-main.css +1 -1
- package/dist/meta/sassdoc-data.json +1492 -1114
- package/dist/meta/sassdoc-raw-data.json +724 -549
- package/dist/meta/variables.json +40 -12
- package/lib/swatches/all.json +1 -1
- package/lib/swatches/fluent-main-dark.json +1 -1
- package/lib/swatches/fluent-main.json +1 -1
- package/package.json +4 -4
- package/scss/action-sheet/_theme.scss +17 -17
- package/scss/appbar/_theme.scss +3 -7
- package/scss/badge/_layout.scss +12 -12
- package/scss/badge/_theme.scss +3 -7
- package/scss/bottom-navigation/_theme.scss +15 -23
- package/scss/breadcrumb/_layout.scss +12 -12
- package/scss/button/_layout.scss +10 -14
- package/scss/button/_theme.scss +33 -35
- package/scss/calendar/_layout.scss +41 -41
- package/scss/calendar/_theme.scss +25 -28
- package/scss/card/_theme.scss +9 -14
- package/scss/checkbox/_layout.scss +18 -18
- package/scss/chip/_layout.scss +8 -8
- package/scss/chip/_theme.scss +15 -19
- package/scss/colorgradient/_layout.scss +3 -2
- package/scss/editor/_theme.scss +1 -1
- package/scss/fab/_layout.scss +4 -4
- package/scss/fab/_theme.scss +41 -51
- package/scss/grid/_layout.scss +58 -50
- package/scss/grid/_theme.scss +102 -94
- package/scss/grid/_variables.scss +17 -10
- package/scss/imageeditor/_layout.scss +6 -4
- package/scss/input/_layout.scss +25 -25
- package/scss/input/_theme.scss +34 -42
- package/scss/list/_layout.scss +34 -34
- package/scss/list/_theme.scss +12 -15
- package/scss/loader/_layout.scss +21 -18
- package/scss/menu/_layout.scss +14 -14
- package/scss/messagebox/_theme.scss +3 -7
- package/scss/notification/_theme.scss +4 -9
- package/scss/otp/_layout.scss +2 -2
- package/scss/pager/_layout.scss +7 -7
- package/scss/pager/_theme.scss +6 -10
- package/scss/panelbar/_layout.scss +4 -4
- package/scss/panelbar/_theme.scss +64 -64
- package/scss/radio/_layout.scss +14 -14
- package/scss/slider/_theme.scss +23 -31
- package/scss/switch/_layout.scss +18 -18
- package/scss/switch/_theme.scss +42 -58
- package/scss/table/_layout.scss +18 -18
- package/scss/table/_variables.scss +17 -0
- package/scss/timeselector/_layout.scss +9 -6
- package/scss/toolbar/_layout.scss +16 -16
- package/scss/tooltip/_theme.scss +4 -8
- package/scss/treeview/_layout.scss +8 -8
- package/scss/treeview/_theme.scss +24 -31
package/scss/fab/_theme.scss
CHANGED
|
@@ -5,32 +5,26 @@
|
|
|
5
5
|
@mixin kendo-fab--theme() {
|
|
6
6
|
|
|
7
7
|
.k-fab {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
--INTERNAL--kendo-fab-gradient: var( --kendo-fab-gradient );
|
|
12
|
-
--INTERNAL--kendo-fab-shadow: var( --kendo-fab-shadow );
|
|
13
|
-
|
|
14
|
-
border-color: var( --INTERNAL--kendo-fab-border, initial );
|
|
15
|
-
color: var( --INTERNAL--kendo-fab-text, inherit );
|
|
16
|
-
background-color: var( --INTERNAL--kendo-fab-bg, initial );
|
|
8
|
+
border-color: var( --kendo-fab-border, initial );
|
|
9
|
+
color: var( --kendo-fab-text, inherit );
|
|
10
|
+
background-color: var( --kendo-fab-bg, initial );
|
|
17
11
|
background-image: linear-gradient(
|
|
18
|
-
var( --
|
|
12
|
+
var( --kendo-fab-gradient, transparent, transparent )
|
|
19
13
|
);
|
|
20
|
-
box-shadow: var( --
|
|
14
|
+
box-shadow: var( --kendo-fab-shadow, none );
|
|
21
15
|
|
|
22
16
|
&:hover,
|
|
23
17
|
&.k-hover {
|
|
24
|
-
--
|
|
25
|
-
--
|
|
26
|
-
--
|
|
18
|
+
--kendo-fab-text: var( --kendo-fab-hover-text );
|
|
19
|
+
--kendo-fab-bg: var( --kendo-fab-hover-bg );
|
|
20
|
+
--kendo-fab-border: var( --kendo-fab-hover-border );
|
|
27
21
|
}
|
|
28
22
|
|
|
29
23
|
&:focus,
|
|
30
24
|
&.k-focus {
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
25
|
+
--kendo-fab-text: var( --kendo-fab-focus-text );
|
|
26
|
+
--kendo-fab-bg: var( --kendo-fab-focus-bg );
|
|
27
|
+
--kendo-fab-border: var( --kendo-fab-focus-border );
|
|
34
28
|
}
|
|
35
29
|
&:focus::after,
|
|
36
30
|
&.k-focus::after {
|
|
@@ -39,22 +33,22 @@
|
|
|
39
33
|
|
|
40
34
|
&:active,
|
|
41
35
|
&.k-active {
|
|
42
|
-
--
|
|
43
|
-
--
|
|
44
|
-
--
|
|
36
|
+
--kendo-fab-text: var( --kendo-fab-active-text );
|
|
37
|
+
--kendo-fab-bg: var( --kendo-fab-active-bg );
|
|
38
|
+
--kendo-fab-border: var( --kendo-fab-active-border );
|
|
45
39
|
}
|
|
46
40
|
|
|
47
41
|
&.k-selected {
|
|
48
|
-
--
|
|
49
|
-
--
|
|
50
|
-
--
|
|
42
|
+
--kendo-fab-text: var( --kendo-fab-selected-text );
|
|
43
|
+
--kendo-fab-bg: var( --kendo-fab-selected-bg );
|
|
44
|
+
--kendo-fab-border: var( --kendo-fab-selected-border );
|
|
51
45
|
}
|
|
52
46
|
|
|
53
47
|
&:disabled,
|
|
54
48
|
&.k-disabled {
|
|
55
|
-
--
|
|
56
|
-
--
|
|
57
|
-
--
|
|
49
|
+
--kendo-fab-text: var( --kendo-fab-disabled-text );
|
|
50
|
+
--kendo-fab-bg: var( --kendo-fab-disabled-bg );
|
|
51
|
+
--kendo-fab-border: var( --kendo-fab-disabled-border );
|
|
58
52
|
}
|
|
59
53
|
}
|
|
60
54
|
|
|
@@ -114,14 +108,10 @@
|
|
|
114
108
|
// Items
|
|
115
109
|
.k-fab-item-text,
|
|
116
110
|
.k-fab-item-icon {
|
|
117
|
-
--INTERNAL--kendo-fab-item-text: var( --kendo-fab-item-text, #{$kendo-fab-item-text} );
|
|
118
|
-
--INTERNAL--kendo-fab-item-bg: var( --kendo-fab-item-bg, #{$kendo-fab-item-bg} );
|
|
119
|
-
--INTERNAL--kendo-fab-item-border: var( --kendo-fab-item-border, #{$kendo-fab-item-border} );
|
|
120
|
-
|
|
121
111
|
@include fill(
|
|
122
|
-
var( --
|
|
123
|
-
var( --
|
|
124
|
-
var( --
|
|
112
|
+
var( --kendo-fab-item-text, #{$kendo-fab-item-text} ),
|
|
113
|
+
var( --kendo-fab-item-bg, #{$kendo-fab-item-bg} ),
|
|
114
|
+
var( --kendo-fab-item-border, #{$kendo-fab-item-border} )
|
|
125
115
|
);
|
|
126
116
|
}
|
|
127
117
|
|
|
@@ -131,15 +121,15 @@
|
|
|
131
121
|
&:hover,
|
|
132
122
|
&.k-hover {
|
|
133
123
|
.k-fab-item-icon {
|
|
134
|
-
--
|
|
135
|
-
--
|
|
136
|
-
--
|
|
124
|
+
--kendo-fab-item-text: var( --kendo-fab-item-icon-hover-text, #{$kendo-fab-item-hover-text} );
|
|
125
|
+
--kendo-fab-item-bg: var( --kendo-fab-item-icon-hover-bg, #{$kendo-fab-item-hover-bg} );
|
|
126
|
+
--kendo-fab-item-border: var( --kendo-fab-item-icon-hover-border, #{$kendo-fab-item-hover-border} );
|
|
137
127
|
}
|
|
138
128
|
|
|
139
129
|
.k-fab-item-text {
|
|
140
|
-
--
|
|
141
|
-
--
|
|
142
|
-
--
|
|
130
|
+
--kendo-fab-item-text: var( --kendo-fab-item-hover-text, #{$kendo-fab-item-hover-text} );
|
|
131
|
+
--kendo-fab-item-bg: var( --kendo-fab-item-hover-bg, #{$kendo-fab-item-hover-bg} );
|
|
132
|
+
--kendo-fab-item-border: var( --kendo-fab-item-hover-border, #{$kendo-fab-item-hover-border} );
|
|
143
133
|
}
|
|
144
134
|
}
|
|
145
135
|
|
|
@@ -147,15 +137,15 @@
|
|
|
147
137
|
&:focus,
|
|
148
138
|
&.k-focus {
|
|
149
139
|
.k-fab-item-icon {
|
|
150
|
-
--
|
|
151
|
-
--
|
|
152
|
-
--
|
|
140
|
+
--kendo-fab-item-text: var( --kendo-fab-item-icon-focus-text, #{$kendo-fab-item-focus-text} );
|
|
141
|
+
--kendo-fab-item-bg: var( --kendo-fab-item-icon-focus-bg, #{$kendo-fab-item-focus-bg} );
|
|
142
|
+
--kendo-fab-item-border: var( --kendo-fab-item-icon-focus-border, #{$kendo-fab-item-focus-border} );
|
|
153
143
|
}
|
|
154
144
|
|
|
155
145
|
.k-fab-item-text {
|
|
156
|
-
--
|
|
157
|
-
--
|
|
158
|
-
--
|
|
146
|
+
--kendo-fab-item-text: var( --kendo-fab-item-focus-text, #{$kendo-fab-item-focus-text} );
|
|
147
|
+
--kendo-fab-item-bg: var( --kendo-fab-item-focus-bg, #{$kendo-fab-item-focus-bg} );
|
|
148
|
+
--kendo-fab-item-border: var( --kendo-fab-item-focus-border, #{$kendo-fab-item-focus-border} );
|
|
159
149
|
}
|
|
160
150
|
}
|
|
161
151
|
|
|
@@ -163,15 +153,15 @@
|
|
|
163
153
|
&:active,
|
|
164
154
|
&.k-active {
|
|
165
155
|
.k-fab-item-icon {
|
|
166
|
-
--
|
|
167
|
-
--
|
|
168
|
-
--
|
|
156
|
+
--kendo-fab-item-text: var( --kendo-fab-item-icon-active-text, #{$kendo-fab-item-active-text} );
|
|
157
|
+
--kendo-fab-item-bg: var( --kendo-fab-item-icon-active-bg, #{$kendo-fab-item-active-bg} );
|
|
158
|
+
--kendo-fab-item-border: var( --kendo-fab-item-icon-active-border, #{$kendo-fab-item-active-border} );
|
|
169
159
|
}
|
|
170
160
|
|
|
171
161
|
.k-fab-item-text {
|
|
172
|
-
--
|
|
173
|
-
--
|
|
174
|
-
--
|
|
162
|
+
--kendo-fab-item-text: var( --kendo-fab-item-active-text, #{$kendo-fab-item-active-text} );
|
|
163
|
+
--kendo-fab-item-bg: var( --kendo-fab-item-active-bg, #{$kendo-fab-item-active-bg} );
|
|
164
|
+
--kendo-fab-item-border: var( --kendo-fab-item-active-border, #{$kendo-fab-item-active-border} );
|
|
175
165
|
}
|
|
176
166
|
}
|
|
177
167
|
|
package/scss/grid/_layout.scss
CHANGED
|
@@ -72,8 +72,8 @@
|
|
|
72
72
|
td,
|
|
73
73
|
.k-table-td {
|
|
74
74
|
border-width: 0;
|
|
75
|
-
padding-inline: var( --
|
|
76
|
-
padding-block: var( --
|
|
75
|
+
padding-inline: var( --kendo-grid-cell-padding-x, 0 );
|
|
76
|
+
padding-block: var( --kendo-grid-cell-padding-y, 0 );
|
|
77
77
|
border-style: solid;
|
|
78
78
|
border-color: inherit;
|
|
79
79
|
outline: 0;
|
|
@@ -101,8 +101,8 @@
|
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
.k-table-th {
|
|
104
|
-
padding-inline: var( --
|
|
105
|
-
padding-block: var( --
|
|
104
|
+
padding-inline: var( --kendo-grid-header-padding-x, 0 );
|
|
105
|
+
padding-block: var( --kendo-grid-header-padding-y, 0 );
|
|
106
106
|
border-block-end-width: var( --kendo-grid-header-border-width-y, #{$kendo-grid-header-border-width-y} );
|
|
107
107
|
border-inline-start-width: var( --kendo-grid-header-border-width-x, #{$kendo-grid-header-border-width-x} );
|
|
108
108
|
white-space: nowrap;
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
.k-grouping-row .k-icon {
|
|
163
|
-
margin-inline-start: calc( ( var( --kendo-icon-size, 1rem ) / 2 ) - var( --
|
|
163
|
+
margin-inline-start: calc( ( var( --kendo-icon-size, 1rem ) / 2 ) - var( --kendo-grid-cell-padding-x, 0 ) );
|
|
164
164
|
margin-inline-end: calc( var( --kendo-icon-size, 1rem ) / 2 );
|
|
165
165
|
text-decoration: none;
|
|
166
166
|
}
|
|
@@ -185,7 +185,7 @@
|
|
|
185
185
|
|
|
186
186
|
> .k-icon {
|
|
187
187
|
padding-inline: 0;
|
|
188
|
-
padding-block: var( --
|
|
188
|
+
padding-block: var( --kendo-grid-cell-padding-y, 0 );
|
|
189
189
|
display: inline-block;
|
|
190
190
|
outline: 0;
|
|
191
191
|
}
|
|
@@ -253,6 +253,14 @@
|
|
|
253
253
|
.k-drag-cell {
|
|
254
254
|
cursor: move;
|
|
255
255
|
}
|
|
256
|
+
|
|
257
|
+
// Highlighted state
|
|
258
|
+
td.k-highlighted,
|
|
259
|
+
.k-table-row.k-highlighted > td,
|
|
260
|
+
.k-table-td.k-highlighted,
|
|
261
|
+
.k-table-row.k-highlighted > .k-table-td {
|
|
262
|
+
font-weight: var( --kendo-grid-highlighted-font-weight, #{$kendo-grid-highlighted-font-weight} );
|
|
263
|
+
}
|
|
256
264
|
}
|
|
257
265
|
|
|
258
266
|
.k-grid-resizable {
|
|
@@ -272,15 +280,15 @@
|
|
|
272
280
|
|
|
273
281
|
// Grouping header
|
|
274
282
|
.k-grouping-header {
|
|
275
|
-
padding-inline: var( --
|
|
276
|
-
padding-block: var( --
|
|
283
|
+
padding-inline: var( --kendo-grid-grouping-header-padding-x, 0 );
|
|
284
|
+
padding-block: var( --kendo-grid-grouping-header-padding-y, 0 );
|
|
277
285
|
border-width: 0 0 1px;
|
|
278
286
|
border-style: solid;
|
|
279
287
|
border-color: inherit;
|
|
280
288
|
white-space: normal;
|
|
281
289
|
display: flex;
|
|
282
290
|
align-items: center;
|
|
283
|
-
gap: var( --
|
|
291
|
+
gap: var( --kendo-grid-grouping-header-padding-y, 0 );
|
|
284
292
|
position: relative;
|
|
285
293
|
flex-wrap: wrap;
|
|
286
294
|
|
|
@@ -289,7 +297,7 @@
|
|
|
289
297
|
height: $kendo-chip-calc-size;
|
|
290
298
|
display: inline-block;
|
|
291
299
|
vertical-align: middle;
|
|
292
|
-
margin-left: calc( var( --
|
|
300
|
+
margin-left: calc( var( --kendo-grid-grouping-header-padding-y, 0 ) * -1 );
|
|
293
301
|
}
|
|
294
302
|
|
|
295
303
|
.k-chip-list {
|
|
@@ -309,7 +317,7 @@
|
|
|
309
317
|
|
|
310
318
|
.k-grouping-dropclue {
|
|
311
319
|
width: calc( var( --kendo-grid-group-drop-hint-size, #{$kendo-grid-group-drop-hint-size} ) * 2 );
|
|
312
|
-
height: var( --
|
|
320
|
+
height: var( --kendo-grid-group-drop-hint-height, 1rem );
|
|
313
321
|
position: absolute;
|
|
314
322
|
top: var( --kendo-grid-group-drop-hint-top, #{$kendo-grid-group-drop-hint-top} );
|
|
315
323
|
box-sizing: content-box;
|
|
@@ -411,10 +419,10 @@
|
|
|
411
419
|
}
|
|
412
420
|
|
|
413
421
|
.k-table-th > .k-link {
|
|
414
|
-
margin-block: calc( var( --
|
|
415
|
-
margin-inline: calc( var( --
|
|
416
|
-
padding-block: var( --
|
|
417
|
-
padding-inline: var( --
|
|
422
|
+
margin-block: calc( var( --kendo-grid-header-padding-y, 0 ) * -1 );
|
|
423
|
+
margin-inline: calc( var( --kendo-grid-header-padding-x, 0 ) * -1 );
|
|
424
|
+
padding-block: var( --kendo-grid-header-padding-y, 0 );
|
|
425
|
+
padding-inline: var( --kendo-grid-header-padding-x, 0 );
|
|
418
426
|
line-height: inherit;
|
|
419
427
|
display: block;
|
|
420
428
|
overflow: hidden;
|
|
@@ -434,20 +442,20 @@
|
|
|
434
442
|
.k-grid-filter,
|
|
435
443
|
.k-header-column-menu,
|
|
436
444
|
.k-grid-header-menu {
|
|
437
|
-
padding-block: var(--
|
|
438
|
-
padding-inline: var(--
|
|
439
|
-
width: var(--
|
|
440
|
-
height: var(--
|
|
445
|
+
padding-block: var(--kendo-button-padding-y, 0 );
|
|
446
|
+
padding-inline: var(--kendo-button-padding-y, 0 );
|
|
447
|
+
width: var(--kendo-button-calc-size, auto );
|
|
448
|
+
height: var(--kendo-button-calc-size, auto );
|
|
441
449
|
box-sizing: border-box;
|
|
442
450
|
outline: 0;
|
|
443
|
-
line-height: var(--
|
|
451
|
+
line-height: var(--kendo-button-line-height, normal );
|
|
444
452
|
display: flex;
|
|
445
453
|
align-items: center;
|
|
446
454
|
align-content: center;
|
|
447
455
|
justify-content: center;
|
|
448
456
|
position: absolute;
|
|
449
457
|
inset-inline-end: var( --kendo-grid-header-menu-spacing, #{$kendo-grid-header-menu-spacing} );
|
|
450
|
-
inset-block-end: calc( var( --
|
|
458
|
+
inset-block-end: calc( var( --kendo-grid-header-padding-y, 0 ) + ( #{$kendo-line-height-em} / 2 ) - ( #{$kendo-button-inner-calc-size} / 2 ) );
|
|
451
459
|
z-index: 1;
|
|
452
460
|
|
|
453
461
|
&:hover {
|
|
@@ -482,8 +490,8 @@
|
|
|
482
490
|
.k-resizer-wrap {
|
|
483
491
|
display: block;
|
|
484
492
|
width: 100%;
|
|
485
|
-
padding-block-start: calc( var( --
|
|
486
|
-
padding-block-end: var( --
|
|
493
|
+
padding-block-start: calc( var( --kendo-grid-edit-cell-padding-x, 0 ) - #{$kendo-grid-row-resizer-height} );
|
|
494
|
+
padding-block-end: var( --kendo-grid-edit-cell-padding-x, 0 );
|
|
487
495
|
position: absolute;
|
|
488
496
|
background: none;
|
|
489
497
|
cursor: row-resize;
|
|
@@ -539,8 +547,8 @@
|
|
|
539
547
|
td,
|
|
540
548
|
.k-table-td,
|
|
541
549
|
.k-table-th {
|
|
542
|
-
padding-inline: var( --
|
|
543
|
-
padding-block: var( --
|
|
550
|
+
padding-inline: var( --kendo-grid-filter-cell-padding-x, 0 );
|
|
551
|
+
padding-block: var( --kendo-grid-filter-cell-padding-y, 0 );
|
|
544
552
|
border-width: 0 0 var( --kendo-grid-cell-border-width-y, #{$kendo-grid-cell-border-width-y} ) var( --kendo-grid-cell-border-width-x, #{$kendo-grid-cell-border-width-x} );
|
|
545
553
|
white-space: nowrap;
|
|
546
554
|
}
|
|
@@ -567,7 +575,7 @@
|
|
|
567
575
|
display: flex;
|
|
568
576
|
flex-flow: row nowrap;
|
|
569
577
|
align-items: center;
|
|
570
|
-
gap: calc( var( --
|
|
578
|
+
gap: calc( var( --kendo-grid-cell-padding-y, 0 ) / 2 );
|
|
571
579
|
flex: 1 1 auto;
|
|
572
580
|
|
|
573
581
|
> .k-button {
|
|
@@ -632,8 +640,8 @@
|
|
|
632
640
|
.k-grid .k-command-cell,
|
|
633
641
|
.k-grid .k-grid-edit-row td,
|
|
634
642
|
.k-grid .k-grid-edit-row .k-table-td {
|
|
635
|
-
padding-inline: var( --
|
|
636
|
-
padding-block: var( --
|
|
643
|
+
padding-inline: var( --kendo-grid-edit-cell-padding-x, 0 );
|
|
644
|
+
padding-block: var( --kendo-grid-edit-cell-padding-y, 0 );
|
|
637
645
|
text-overflow: clip;
|
|
638
646
|
}
|
|
639
647
|
|
|
@@ -678,8 +686,8 @@
|
|
|
678
686
|
|
|
679
687
|
// Selection Aggregates
|
|
680
688
|
.k-selection-aggregates {
|
|
681
|
-
padding-inline: var( --
|
|
682
|
-
padding-block: var( --
|
|
689
|
+
padding-inline: var( --kendo-grid-selection-aggregates-padding-x, 0 );
|
|
690
|
+
padding-block: var( --kendo-grid-selection-aggregates-padding-y, 0 );
|
|
683
691
|
border-width: var( --kendo-grid-selection-aggregates-border-width, #{$kendo-grid-selection-aggregates-border-width} ) 0 0;
|
|
684
692
|
border-style: solid;
|
|
685
693
|
line-height: var( --kendo-grid-selection-aggregates-line-height, #{$kendo-grid-selection-aggregates-line-height} );
|
|
@@ -934,8 +942,8 @@
|
|
|
934
942
|
}
|
|
935
943
|
|
|
936
944
|
.k-table-th > .k-cell-inner {
|
|
937
|
-
margin-block: calc( var( --
|
|
938
|
-
margin-inline: calc( var( --
|
|
945
|
+
margin-block: calc( var( --kendo-grid-header-padding-y, 0 ) * -1 );
|
|
946
|
+
margin-inline: calc( var( --kendo-grid-header-padding-x, 0 ) * -1 );
|
|
939
947
|
}
|
|
940
948
|
|
|
941
949
|
.k-filterable {
|
|
@@ -954,8 +962,8 @@
|
|
|
954
962
|
overflow: hidden;
|
|
955
963
|
|
|
956
964
|
> .k-link {
|
|
957
|
-
padding-inline: var( --
|
|
958
|
-
padding-block: var( --
|
|
965
|
+
padding-inline: var( --kendo-grid-header-padding-x, 0 );
|
|
966
|
+
padding-block: var( --kendo-grid-header-padding-y, 0 );
|
|
959
967
|
width: auto;
|
|
960
968
|
display: flex;
|
|
961
969
|
flex-flow: row nowrap;
|
|
@@ -1023,22 +1031,22 @@
|
|
|
1023
1031
|
|
|
1024
1032
|
.k-grid .k-grid-#{$size},
|
|
1025
1033
|
.k-grid-#{$size} {
|
|
1026
|
-
--
|
|
1027
|
-
--
|
|
1028
|
-
--
|
|
1029
|
-
--
|
|
1030
|
-
--
|
|
1031
|
-
--
|
|
1032
|
-
--
|
|
1033
|
-
--
|
|
1034
|
-
--
|
|
1035
|
-
--
|
|
1036
|
-
--
|
|
1037
|
-
--
|
|
1038
|
-
--
|
|
1039
|
-
--
|
|
1040
|
-
--
|
|
1041
|
-
--
|
|
1034
|
+
--kendo-grid-header-padding-x: var( --kendo-grid-header-padding-x-#{$size}, #{$_header-padding-x} );
|
|
1035
|
+
--kendo-grid-header-padding-y: var( --kendo-grid-header-padding-y-#{$size}, #{$_header-padding-y} );
|
|
1036
|
+
--kendo-grid-grouping-header-padding-x: var( --kendo-grid-grouping-header-padding-x-#{$size}, #{$_grouping-header-padding-x} );
|
|
1037
|
+
--kendo-grid-grouping-header-padding-y: var( --kendo-grid-grouping-header-padding-y-#{$size}, #{$_grouping-header-padding-y} );
|
|
1038
|
+
--kendo-grid-cell-padding-x: var( --kendo-grid-cell-padding-x-#{$size}, #{$_cell-padding-x} );
|
|
1039
|
+
--kendo-grid-cell-padding-y: var( --kendo-grid-cell-padding-y-#{$size}, #{$_cell-padding-y} );
|
|
1040
|
+
--kendo-grid-filter-cell-padding-x: var( --kendo-grid-filter-cell-padding-x-#{$size}, #{$_filter-cell-padding-x} );
|
|
1041
|
+
--kendo-grid-filter-cell-padding-y: var( --kendo-grid-filter-cell-padding-y-#{$size}, #{$_filter-cell-padding-y} );
|
|
1042
|
+
--kendo-grid-edit-cell-padding-x: var( --kendo-grid-edit-cell-padding-x-#{$size}, #{$_edit-cell-padding-x} );
|
|
1043
|
+
--kendo-grid-edit-cell-padding-y: var( --kendo-grid-edit-cell-padding-y-#{$size}, #{$_edit-cell-padding-y} );
|
|
1044
|
+
--kendo-button-padding-y: var( --kendo-button-padding-y-#{$size}, #{$_button-padding-y} );
|
|
1045
|
+
--kendo-button-calc-size: var( --kendo-button-calc-size-#{$size}, #{$_button-calc-size} );
|
|
1046
|
+
--kendo-button-line-height: var( --kendo-button-line-height-#{$size}, #{$_button-line-height} );
|
|
1047
|
+
--kendo-grid-group-drop-hint-height: var( --kendo-group-dropclue-height-#{$size}, #{$_group-dropclue-height} );
|
|
1048
|
+
--kendo-grid-selection-aggregates-padding-x: var( --kendo-grid-selection-aggregates-padding-x-#{$size}, #{$_selection-aggregates-padding-x} );
|
|
1049
|
+
--kendo-grid-selection-aggregates-padding-y: var( --kendo-grid-selection-aggregates-padding-y-#{$size}, #{$_selection-aggregates-padding-y} );
|
|
1042
1050
|
}
|
|
1043
1051
|
}
|
|
1044
1052
|
|
package/scss/grid/_theme.scss
CHANGED
|
@@ -100,6 +100,24 @@
|
|
|
100
100
|
border-block-color: var( --kendo-grid-selected-border, #{$kendo-grid-selected-border} );
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
+
// Highlighted state
|
|
104
|
+
td.k-highlighted,
|
|
105
|
+
.k-table-row.k-highlighted > td,
|
|
106
|
+
.k-table-td.k-highlighted,
|
|
107
|
+
.k-table-row.k-highlighted > .k-table-td {
|
|
108
|
+
@include fill( $bg: var( --kendo-grid-highlighted-bg, #{$kendo-grid-highlighted-bg} ));
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Highlighted Selected state
|
|
112
|
+
td.k-highlighted.k-selected,
|
|
113
|
+
.k-table-row.k-highlighted.k-selected > td,
|
|
114
|
+
.k-table-td.k-highlighted.k-selected,
|
|
115
|
+
.k-table-row.k-highlighted.k-selected > .k-table-td,
|
|
116
|
+
.k-table-row.k-highlighted > .k-table-td.k-selected,
|
|
117
|
+
.k-table-row.k-selected > .k-table-td.k-highlighted {
|
|
118
|
+
@include fill( $bg: var( --kendo-grid-selected-highlighted-bg, #{$kendo-grid-selected-highlighted-bg} ));
|
|
119
|
+
}
|
|
120
|
+
|
|
103
121
|
// Focused state
|
|
104
122
|
td:focus,
|
|
105
123
|
td.k-focus,
|
|
@@ -165,29 +183,97 @@
|
|
|
165
183
|
.k-grouping-row + .k-table-row .k-table-td {
|
|
166
184
|
border-top-color: var( --kendo-grid-header-border, #{$kendo-grid-header-border} );
|
|
167
185
|
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.k-grid-header-locked .k-table-th {
|
|
189
|
+
border-bottom-color: var( --kendo-grid-header-border, #{$kendo-grid-header-border} );
|
|
190
|
+
}
|
|
168
191
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
.k-
|
|
172
|
-
|
|
192
|
+
// Sticky columns
|
|
193
|
+
.k-master-row {
|
|
194
|
+
.k-grid-content-sticky {
|
|
195
|
+
border-inline-color: var( --kendo-grid-sticky-border, #{$kendo-grid-sticky-border} );
|
|
196
|
+
border-block-start-color: var( --kendo-grid-header-border, #{$kendo-grid-header-border} );
|
|
197
|
+
@include fill( $bg: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} ) );
|
|
173
198
|
}
|
|
174
199
|
|
|
175
|
-
.k-
|
|
176
|
-
|
|
177
|
-
|
|
200
|
+
.k-grid-row-sticky,
|
|
201
|
+
&.k-grid-row-sticky > .k-table-td {
|
|
202
|
+
border-block-color: var( --kendo-grid-sticky-border, #{$kendo-grid-sticky-border} );
|
|
203
|
+
@include fill( $bg: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} ) );
|
|
178
204
|
}
|
|
179
205
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
206
|
+
&.k-table-alt-row {
|
|
207
|
+
.k-grid-content-sticky,
|
|
208
|
+
&.k-grid-row-sticky > .k-table-td,
|
|
209
|
+
.k-grid-row-sticky {
|
|
210
|
+
@include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
|
|
211
|
+
}
|
|
186
212
|
}
|
|
187
|
-
}
|
|
188
213
|
|
|
189
|
-
|
|
190
|
-
|
|
214
|
+
// Sticky
|
|
215
|
+
&.k-table-row td.k-grid-content-sticky,
|
|
216
|
+
&.k-table-row.k-grid-row-sticky > .k-table-td,
|
|
217
|
+
&.k-table-row .k-table-td.k-grid-row-sticky,
|
|
218
|
+
&.k-table-row td.k-grid-content-sticky,
|
|
219
|
+
&.k-table-row .k-table-td.k-grid-content-sticky {
|
|
220
|
+
@include fill( $bg: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} ) );
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// Sticky Alt
|
|
224
|
+
&.k-table-alt-row td.k-grid-content-sticky,
|
|
225
|
+
&.k-table-alt-row.k-grid-row-sticky > .k-table-td,
|
|
226
|
+
&.k-table-alt-row .k-table-td.k-grid-row-sticky,
|
|
227
|
+
&.k-table-alt-row td.k-grid-content-sticky,
|
|
228
|
+
&.k-table-alt-row .k-table-td.k-grid-content-sticky {
|
|
229
|
+
@include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
// Sticky Hover
|
|
233
|
+
&.k-table-row:hover .k-grid-content-sticky,
|
|
234
|
+
&.k-table-row:hover .k-grid-row-sticky,
|
|
235
|
+
&.k-table-row:hover.k-grid-row-sticky > .k-table-td,
|
|
236
|
+
&.k-table-row.k-hover .k-grid-content-sticky,
|
|
237
|
+
&.k-table-row.k-hover .k-grid-row-sticky,
|
|
238
|
+
&.k-table-row.k-hover.k-grid-row-sticky > .k-table-td {
|
|
239
|
+
@include fill( $bg: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} ) );
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
// Sticky Selected state
|
|
243
|
+
&.k-table-row.k-selected td.k-grid-content-sticky,
|
|
244
|
+
&.k-table-row.k-selected.k-grid-row-sticky > .k-table-td,
|
|
245
|
+
&.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
|
|
246
|
+
&.k-table-row td.k-grid-content-sticky.k-selected,
|
|
247
|
+
&.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
|
|
248
|
+
&::before {
|
|
249
|
+
@include fill( $bg: var( --kendo-grid-selected-bg, #{$kendo-grid-selected-bg} ) );
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
// Sticky Highlighted state
|
|
254
|
+
&.k-table-row.k-highlighted td.k-grid-content-sticky,
|
|
255
|
+
&.k-table-row.k-highlighted.k-grid-row-sticky > .k-table-td,
|
|
256
|
+
&.k-table-row.k-highlighted .k-table-td.k-grid-row-sticky,
|
|
257
|
+
&.k-table-row td.k-grid-content-sticky.k-highlighted,
|
|
258
|
+
&.k-table-row .k-table-td.k-grid-content-sticky.k-highlighted {
|
|
259
|
+
&::before {
|
|
260
|
+
@include fill( $bg: var( --kendo-grid-highlighted-bg, #{$kendo-grid-highlighted-bg} ) );
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// Sticky Selected Highlighted state
|
|
265
|
+
&.k-table-row.k-selected.k-highlighted td.k-grid-content-sticky,
|
|
266
|
+
&.k-table-row.k-selected.k-highlighted.k-grid-row-sticky > .k-table-td,
|
|
267
|
+
&.k-table-row.k-selected.k-highlighted .k-table-td.k-grid-row-sticky,
|
|
268
|
+
&.k-selected.k-table-row .k-table-td.k-grid-content-sticky.k-highlighted,
|
|
269
|
+
&.k-highlighted.k-table-row .k-table-td.k-grid-content-sticky.k-selected,
|
|
270
|
+
&.k-table-row td.k-grid-content-sticky.k-selected.k-highlighted,
|
|
271
|
+
&.k-table-row .k-table-td.k-grid-content-sticky.k-selected.k-highlighted {
|
|
272
|
+
&::before {
|
|
273
|
+
@include fill( $bg: var( --kendo-grid-selected-highlighted-bg, #{$kendo-grid-selected-highlighted-bg} ) );
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
}
|
|
191
277
|
}
|
|
192
278
|
}
|
|
193
279
|
|
|
@@ -269,84 +355,6 @@
|
|
|
269
355
|
);
|
|
270
356
|
}
|
|
271
357
|
|
|
272
|
-
// Content
|
|
273
|
-
.k-master-row {
|
|
274
|
-
.k-grid-content-sticky {
|
|
275
|
-
border-inline-color: var( --kendo-grid-sticky-border, #{$kendo-grid-sticky-border} );
|
|
276
|
-
border-block-start-color: var( --kendo-grid-header-border, #{$kendo-grid-header-border} );
|
|
277
|
-
background-color: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} );
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
.k-grid-row-sticky,
|
|
281
|
-
&.k-grid-row-sticky > .k-table-td {
|
|
282
|
-
border-block-color: var( --kendo-grid-sticky-border, #{$kendo-grid-sticky-border} );
|
|
283
|
-
background-color: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} );
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
&.k-table-alt-row {
|
|
287
|
-
.k-grid-content-sticky,
|
|
288
|
-
&.k-grid-row-sticky > .k-table-td,
|
|
289
|
-
.k-grid-row-sticky {
|
|
290
|
-
@include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
|
|
291
|
-
}
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
// Selected state
|
|
295
|
-
&.k-table-row.k-selected td.k-grid-content-sticky,
|
|
296
|
-
&.k-table-row.k-selected.k-grid-row-sticky > .k-table-td,
|
|
297
|
-
&.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
|
|
298
|
-
&.k-table-row td.k-grid-content-sticky.k-selected,
|
|
299
|
-
&.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
|
|
300
|
-
@include fill( $bg: var( --kendo-grid-sticky-bg, #{$kendo-grid-sticky-bg} ) );
|
|
301
|
-
|
|
302
|
-
&::before {
|
|
303
|
-
@include fill( $bg: var( --kendo-grid-sticky-selected-bg, #{$kendo-grid-sticky-selected-bg} ) );
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
&.k-selected.k-table-alt-row td.k-grid-content-sticky,
|
|
308
|
-
&.k-selected.k-table-alt-row.k-grid-row-sticky > .k-table-td,
|
|
309
|
-
&.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
|
|
310
|
-
&.k-table-alt-row td.k-grid-content-sticky.k-selected,
|
|
311
|
-
&.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
|
|
312
|
-
@include fill( $bg: var( --kendo-grid-sticky-alt-bg, #{$kendo-grid-sticky-alt-bg} ) );
|
|
313
|
-
|
|
314
|
-
&::before {
|
|
315
|
-
@include fill( $bg: var( --kendo-grid-sticky-selected-alt-bg, #{$kendo-grid-sticky-selected-alt-bg} ) );
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
// Hover
|
|
321
|
-
&:hover .k-grid-content-sticky,
|
|
322
|
-
&:hover .k-grid-row-sticky,
|
|
323
|
-
&:hover.k-grid-row-sticky > .k-table-td,
|
|
324
|
-
&.k-hover .k-grid-content-sticky,
|
|
325
|
-
&.k-hover .k-grid-row-sticky,
|
|
326
|
-
&.k-hover.k-grid-row-sticky > .k-table-td {
|
|
327
|
-
@include fill( $bg: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} ) );
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
// Selected hover
|
|
332
|
-
&.k-selected:hover td.k-grid-content-sticky,
|
|
333
|
-
&.k-selected:hover .k-table-td.k-grid-row-sticky,
|
|
334
|
-
&.k-selected:hover.k-grid-row-sticky > .k-table-td,
|
|
335
|
-
&.k-selected.k-hover td.k-grid-content-sticky,
|
|
336
|
-
&.k-selected.k-hover .k-table-td.k-grid-row-sticky,
|
|
337
|
-
&.k-selected.k-hover.k-grid-row-sticky > .k-table-td,
|
|
338
|
-
&:hover td.k-grid-content-sticky.k-selected,
|
|
339
|
-
&.k-hover td.k-grid-content-sticky.k-selected,
|
|
340
|
-
&:hover .k-table-td.k-grid-content-sticky.k-selected,
|
|
341
|
-
&.k-hover .k-table-td.k-grid-content-sticky.k-selected {
|
|
342
|
-
background-color: var( --kendo-grid-sticky-hover-bg, #{$kendo-grid-sticky-hover-bg} );
|
|
343
|
-
|
|
344
|
-
&::before {
|
|
345
|
-
@include fill( $bg: var( --kendo-grid-sticky-selected-hover-bg, #{$kendo-grid-sticky-selected-hover-bg} ) );
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
|
|
350
358
|
.k-grouping-row {
|
|
351
359
|
.k-grid-content-sticky {
|
|
352
360
|
@include fill( $bg: var( --kendo-grid-sticky-header-bg, #{$kendo-grid-sticky-header-bg} ) );
|