@progress/kendo-theme-fluent 6.0.3 → 6.0.4-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 +49 -15
- package/lib/swatches/all.json +1 -1
- package/lib/swatches/fluent-main.json +1 -1
- package/package.json +4 -4
- package/scss/calendar/_layout.scss +31 -13
- package/scss/calendar/_theme.scss +53 -0
- package/scss/calendar/_variables.scss +9 -0
package/dist/all.css
CHANGED
|
@@ -32520,26 +32520,36 @@ textarea.k-input-inner {
|
|
|
32520
32520
|
position: absolute;
|
|
32521
32521
|
inset: 0px;
|
|
32522
32522
|
border-style: solid;
|
|
32523
|
-
|
|
32523
|
+
}
|
|
32524
|
+
.k-calendar-range .k-range-start:hover .k-link, .k-calendar-range .k-range-start.k-hover .k-link,
|
|
32525
|
+
.k-calendar-range .k-range-end:hover .k-link,
|
|
32526
|
+
.k-calendar-range .k-range-end.k-hover .k-link,
|
|
32527
|
+
.k-calendar-range .k-range-mid:hover .k-link,
|
|
32528
|
+
.k-calendar-range .k-range-mid.k-hover .k-link {
|
|
32529
|
+
border-radius: 0;
|
|
32530
|
+
}
|
|
32531
|
+
.k-calendar-range .k-range-mid::before {
|
|
32532
|
+
border-width: var(--INTERNAL--kendo-calendar-range-border-width, 1px);
|
|
32533
|
+
border-inline-width: 0;
|
|
32534
|
+
border-radius: 0;
|
|
32524
32535
|
}
|
|
32525
32536
|
.k-calendar-range .k-range-start::before,
|
|
32526
|
-
.k-calendar-range .k-range-mid:
|
|
32527
|
-
|
|
32528
|
-
|
|
32529
|
-
border-
|
|
32537
|
+
.k-calendar-range .k-range-mid:not(.k-range-start + .k-range-mid,
|
|
32538
|
+
.k-range-mid + .k-range-mid,
|
|
32539
|
+
:last-child)::before {
|
|
32540
|
+
border-width: var(--INTERNAL--kendo-calendar-range-border-width, 1px);
|
|
32541
|
+
border-inline-end-width: 0;
|
|
32542
|
+
border-radius: 0;
|
|
32543
|
+
border-start-start-radius: var(--kendo-calendar-cell-border-radius, var(--kendo-border-radius-md, 0));
|
|
32544
|
+
border-end-start-radius: var(--kendo-calendar-cell-border-radius, var(--kendo-border-radius-md, 0));
|
|
32530
32545
|
}
|
|
32531
32546
|
.k-calendar-range .k-range-end::before,
|
|
32532
32547
|
.k-calendar-range .k-range-mid:last-child::before {
|
|
32533
|
-
--INTERNAL--kendo-calendar-range-border-width
|
|
32534
|
-
border-
|
|
32535
|
-
border-
|
|
32536
|
-
|
|
32537
|
-
|
|
32538
|
-
--INTERNAL--kendo-calendar-range-border-width: 1px 0;
|
|
32539
|
-
}
|
|
32540
|
-
.k-calendar-range .k-range-start:last-child::before,
|
|
32541
|
-
.k-calendar-range .k-range-end:first-child::before {
|
|
32542
|
-
--INTERNAL--kendo-calendar-range-border-width: 1px;
|
|
32548
|
+
border-width: var(--INTERNAL--kendo-calendar-range-border-width, 1px);
|
|
32549
|
+
border-inline-start-width: 0;
|
|
32550
|
+
border-radius: 0;
|
|
32551
|
+
border-start-end-radius: var(--kendo-calendar-cell-border-radius, var(--kendo-border-radius-md, 0));
|
|
32552
|
+
border-end-end-radius: var(--kendo-calendar-cell-border-radius, var(--kendo-border-radius-md, 0));
|
|
32543
32553
|
}
|
|
32544
32554
|
|
|
32545
32555
|
.k-calendar-sm {
|
|
@@ -32714,6 +32724,15 @@ textarea.k-input-inner {
|
|
|
32714
32724
|
.k-calendar[dir=rtl] .k-calendar-navigation, .k-rtl .k-calendar .k-calendar-navigation {
|
|
32715
32725
|
box-shadow: inset 1px 0 var(--kendo-calendar-navigation-border, var(--kendo-component-border, initial));
|
|
32716
32726
|
}
|
|
32727
|
+
.k-calendar[dir=rtl] .k-calendar-td.k-range-start:hover .k-link, .k-calendar[dir=rtl] .k-calendar-td.k-range-start.k-hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-range-start:hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-range-start.k-hover .k-link {
|
|
32728
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, inset -1px -1px 0 0 var(--kendo-neutral-130, inherit), inset 0 1px 0 0 var(--kendo-neutral-130, inherit) );
|
|
32729
|
+
}
|
|
32730
|
+
.k-calendar[dir=rtl] .k-calendar-td.k-range-mid:last-child:hover .k-link, .k-calendar[dir=rtl] .k-calendar-td.k-range-mid:last-child.k-hover .k-link, .k-calendar[dir=rtl] .k-calendar-td.k-range-end:hover .k-link, .k-calendar[dir=rtl] .k-calendar-td.k-range-end.k-hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-range-mid:last-child:hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-range-mid:last-child.k-hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-range-end:hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-range-end.k-hover .k-link {
|
|
32731
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, inset 1px -1px 0 0 var(--kendo-neutral-130, inherit), inset 0 1px 0 0 var(--kendo-neutral-130, inherit) );
|
|
32732
|
+
}
|
|
32733
|
+
.k-calendar[dir=rtl] .k-calendar-td.k-range-mid:first-child:hover .k-link, .k-calendar[dir=rtl] .k-calendar-td.k-range-mid:first-child.k-hover .k-link, .k-calendar[dir=rtl] .k-calendar-td.k-alt + .k-range-mid:hover .k-link, .k-calendar[dir=rtl] .k-calendar-td.k-alt + .k-range-mid.k-hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-range-mid:first-child:hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-range-mid:first-child.k-hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-alt + .k-range-mid:hover .k-link, .k-rtl .k-calendar .k-calendar-td.k-alt + .k-range-mid.k-hover .k-link {
|
|
32734
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, inset -1px -1px 0 0 var(--kendo-neutral-130, inherit), inset 0 1px 0 0 var(--kendo-neutral-130, inherit) );
|
|
32735
|
+
}
|
|
32717
32736
|
.k-calendar.k-invalid, .k-calendar.k-invalid:hover, .k-calendar.ng-invalid.ng-touched, .k-calendar.ng-invalid.ng-dirty {
|
|
32718
32737
|
border-color: var(--kendo-invalid-border, inherit);
|
|
32719
32738
|
}
|
|
@@ -32736,6 +32755,21 @@ textarea.k-input-inner {
|
|
|
32736
32755
|
.k-calendar .k-calendar-td.k-range-start.k-disabled, .k-calendar .k-calendar-td.k-range-end.k-disabled, .k-calendar .k-calendar-td.k-range-mid.k-disabled {
|
|
32737
32756
|
--kendo-calendar-cell-text: var( --kendo-disabled-text, inherit );
|
|
32738
32757
|
}
|
|
32758
|
+
.k-calendar .k-calendar-td.k-range-start:hover .k-link, .k-calendar .k-calendar-td.k-range-start.k-hover .k-link, .k-calendar .k-calendar-td.k-range-end:hover .k-link, .k-calendar .k-calendar-td.k-range-end.k-hover .k-link, .k-calendar .k-calendar-td.k-range-mid:hover .k-link, .k-calendar .k-calendar-td.k-range-mid.k-hover .k-link {
|
|
32759
|
+
background-color: var(--kendo-calendar-cell-selected-hover-bg, var(--kendo-selected-hover-bg, inherit));
|
|
32760
|
+
}
|
|
32761
|
+
.k-calendar .k-calendar-td.k-range-start:hover .k-link, .k-calendar .k-calendar-td.k-range-start.k-hover .k-link {
|
|
32762
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, inset 1px -1px 0 0 var(--kendo-neutral-130, inherit), inset 0 1px 0 0 var(--kendo-neutral-130, inherit) );
|
|
32763
|
+
}
|
|
32764
|
+
.k-calendar .k-calendar-td.k-range-mid:hover .k-link, .k-calendar .k-calendar-td.k-range-mid.k-hover .k-link {
|
|
32765
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-mid-range-hover-shadow, inset 0 -1px 0 0 var(--kendo-neutral-130, inherit), inset 0 1px 0 0 var(--kendo-neutral-130, inherit) );
|
|
32766
|
+
}
|
|
32767
|
+
.k-calendar .k-calendar-td.k-range-mid:last-child:hover .k-link, .k-calendar .k-calendar-td.k-range-mid:last-child.k-hover .k-link, .k-calendar .k-calendar-td.k-range-end:hover .k-link, .k-calendar .k-calendar-td.k-range-end.k-hover .k-link {
|
|
32768
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, inset -1px -1px 0 0 var(--kendo-neutral-130, inherit), inset 0 1px 0 0 var(--kendo-neutral-130, inherit) );
|
|
32769
|
+
}
|
|
32770
|
+
.k-calendar .k-calendar-td.k-range-mid:first-child:hover .k-link, .k-calendar .k-calendar-td.k-range-mid:first-child.k-hover .k-link, .k-calendar .k-calendar-td.k-alt + .k-range-mid:hover .k-link, .k-calendar .k-calendar-td.k-alt + .k-range-mid.k-hover .k-link {
|
|
32771
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, inset 1px -1px 0 0 var(--kendo-neutral-130, inherit), inset 0 1px 0 0 var(--kendo-neutral-130, inherit) );
|
|
32772
|
+
}
|
|
32739
32773
|
|
|
32740
32774
|
.k-out-of-range {
|
|
32741
32775
|
pointer-events: none;
|
package/lib/swatches/all.json
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-theme-fluent",
|
|
3
3
|
"description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
|
|
4
|
-
"version": "6.0.
|
|
4
|
+
"version": "6.0.4-dev.1",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@progress/kendo-font-icons": "1.2.0",
|
|
53
|
-
"@progress/kendo-theme-core": "^6.0.
|
|
54
|
-
"@progress/kendo-theme-utils": "^6.0.
|
|
53
|
+
"@progress/kendo-theme-core": "^6.0.4-dev.1",
|
|
54
|
+
"@progress/kendo-theme-utils": "^6.0.4-dev.1"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "06ad9ba31573c1384dad684f03b818ee245247a5"
|
|
57
57
|
}
|
|
@@ -427,30 +427,48 @@
|
|
|
427
427
|
position: absolute;
|
|
428
428
|
inset: 0px;
|
|
429
429
|
border-style: solid;
|
|
430
|
-
border-width: var( --INTERNAL--kendo-calendar-range-border-width, 0 );
|
|
431
430
|
}
|
|
431
|
+
|
|
432
|
+
&:hover .k-link,
|
|
433
|
+
&.k-hover .k-link {
|
|
434
|
+
border-radius: 0;
|
|
435
|
+
}
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
.k-range-mid::before {
|
|
439
|
+
border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
|
|
440
|
+
border-inline-width: 0;
|
|
441
|
+
border-radius: 0;
|
|
432
442
|
}
|
|
433
443
|
|
|
434
444
|
.k-range-start::before,
|
|
435
|
-
.k-range-mid:
|
|
436
|
-
|
|
437
|
-
|
|
445
|
+
.k-range-mid:not(
|
|
446
|
+
.k-range-start + .k-range-mid,
|
|
447
|
+
.k-range-mid + .k-range-mid,
|
|
448
|
+
:last-child
|
|
449
|
+
)::before {
|
|
450
|
+
border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
|
|
451
|
+
border-inline-end-width: 0;
|
|
452
|
+
border-radius: 0;
|
|
453
|
+
|
|
454
|
+
@if ( $kendo-enable-rounded ) {
|
|
455
|
+
border-start-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
|
|
456
|
+
border-end-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
|
|
457
|
+
}
|
|
438
458
|
}
|
|
439
459
|
|
|
440
460
|
.k-range-end::before,
|
|
441
461
|
.k-range-mid:last-child::before {
|
|
442
|
-
--INTERNAL--kendo-calendar-range-border-width
|
|
443
|
-
|
|
444
|
-
|
|
462
|
+
border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
|
|
463
|
+
border-inline-start-width: 0;
|
|
464
|
+
border-radius: 0;
|
|
445
465
|
|
|
446
|
-
|
|
447
|
-
|
|
466
|
+
@if ( $kendo-enable-rounded ) {
|
|
467
|
+
border-start-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
|
|
468
|
+
border-end-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
|
|
469
|
+
}
|
|
448
470
|
}
|
|
449
471
|
|
|
450
|
-
.k-range-start:last-child::before,
|
|
451
|
-
.k-range-end:first-child::before {
|
|
452
|
-
--INTERNAL--kendo-calendar-range-border-width: 1px;
|
|
453
|
-
}
|
|
454
472
|
}
|
|
455
473
|
|
|
456
474
|
|
|
@@ -141,6 +141,29 @@
|
|
|
141
141
|
.k-calendar-navigation {
|
|
142
142
|
box-shadow: inset 1px 0 var( --kendo-calendar-navigation-border, #{$kendo-calendar-navigation-border} );
|
|
143
143
|
}
|
|
144
|
+
|
|
145
|
+
.k-calendar-td {
|
|
146
|
+
|
|
147
|
+
&.k-range-start:hover .k-link,
|
|
148
|
+
&.k-range-start.k-hover .k-link {
|
|
149
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
|
|
150
|
+
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
&.k-range-mid:last-child:hover .k-link,
|
|
154
|
+
&.k-range-mid:last-child.k-hover .k-link,
|
|
155
|
+
&.k-range-end:hover .k-link,
|
|
156
|
+
&.k-range-end.k-hover .k-link {
|
|
157
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
&.k-range-mid:first-child:hover .k-link,
|
|
161
|
+
&.k-range-mid:first-child.k-hover .k-link,
|
|
162
|
+
&.k-alt + .k-range-mid:hover .k-link,
|
|
163
|
+
&.k-alt + .k-range-mid.k-hover .k-link {
|
|
164
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
|
|
165
|
+
}
|
|
166
|
+
}
|
|
144
167
|
}
|
|
145
168
|
|
|
146
169
|
// Invalid
|
|
@@ -181,6 +204,36 @@
|
|
|
181
204
|
&.k-disabled {
|
|
182
205
|
--kendo-calendar-cell-text: var( --kendo-disabled-text, inherit );
|
|
183
206
|
}
|
|
207
|
+
|
|
208
|
+
&:hover .k-link,
|
|
209
|
+
&.k-hover .k-link {
|
|
210
|
+
background-color: var( --kendo-calendar-cell-selected-hover-bg, #{$kendo-calendar-cell-selected-hover-bg} );
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
&.k-range-start:hover .k-link,
|
|
215
|
+
&.k-range-start.k-hover .k-link {
|
|
216
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
|
|
217
|
+
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
&.k-range-mid:hover .k-link,
|
|
221
|
+
&.k-range-mid.k-hover .k-link {
|
|
222
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-mid-range-hover-shadow, #{$kendo-calendar-mid-range-hover-shadow} );
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
&.k-range-mid:last-child:hover .k-link,
|
|
226
|
+
&.k-range-mid:last-child.k-hover .k-link,
|
|
227
|
+
&.k-range-end:hover .k-link,
|
|
228
|
+
&.k-range-end.k-hover .k-link {
|
|
229
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-end-range-hover-shadow, #{$kendo-calendar-end-range-hover-shadow} );
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
&.k-range-mid:first-child:hover .k-link,
|
|
233
|
+
&.k-range-mid:first-child.k-hover .k-link,
|
|
234
|
+
&.k-alt + .k-range-mid:hover .k-link,
|
|
235
|
+
&.k-alt + .k-range-mid.k-hover .k-link {
|
|
236
|
+
--INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
|
|
184
237
|
}
|
|
185
238
|
}
|
|
186
239
|
|
|
@@ -260,6 +260,15 @@ $kendo-calendar-range-text: inherit !default;
|
|
|
260
260
|
/// Border color of the range selection in the calendar.
|
|
261
261
|
/// @group calendar
|
|
262
262
|
$kendo-calendar-range-border: get-theme-color-var( neutral-130 ) !default;
|
|
263
|
+
/// Hover shadow of the start range selection in the calendar.
|
|
264
|
+
/// @group calendar
|
|
265
|
+
$kendo-calendar-start-range-hover-shadow: inset 1px -1px 0 0 get-theme-color-var( neutral-130 ), inset 0 1px 0 0 get-theme-color-var( neutral-130 ) !default;
|
|
266
|
+
/// Hover shadow of the mid range selection in the calendar.
|
|
267
|
+
/// @group calendar
|
|
268
|
+
$kendo-calendar-mid-range-hover-shadow: inset 0 -1px 0 0 get-theme-color-var( neutral-130 ), inset 0 1px 0 0 get-theme-color-var( neutral-130 ) !default;
|
|
269
|
+
/// Hover shadow of the end range selection in the calendar.
|
|
270
|
+
/// @group calendar
|
|
271
|
+
$kendo-calendar-end-range-hover-shadow: inset -1px -1px 0 0 get-theme-color-var( neutral-130 ), inset 0 1px 0 0 get-theme-color-var( neutral-130 ) !default;
|
|
263
272
|
|
|
264
273
|
|
|
265
274
|
// Calendar sizes
|