@progress/kendo-theme-fluent 5.8.2-dev.5 → 5.9.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 +306 -61
- package/package.json +4 -4
- package/scss/action-sheet/_layout.scss +150 -15
- package/scss/action-sheet/_theme.scss +10 -2
- package/scss/action-sheet/_variables.scss +48 -1
- package/scss/action-sheet/index.scss +1 -0
- package/scss/calendar/_layout.scss +97 -32
- package/scss/calendar/_variables.scss +51 -1
- package/scss/coloreditor/_layout.scss +7 -0
- package/scss/coloreditor/_theme.scss +5 -0
- package/scss/coloreditor/_variables.scss +10 -0
- package/scss/core/module-system/_components.scss +1 -0
- package/scss/gantt/_theme.scss +12 -4
- package/scss/gantt/_variables.scss +3 -0
- package/scss/index.scss +2 -0
- package/scss/list/_layout.scss +11 -0
- package/scss/signature/_layout.scss +6 -0
- package/scss/signature/_theme.scss +8 -0
- package/scss/signature/_variables.scss +8 -1
- package/scss/skeleton/_theme.scss +2 -2
- package/scss/timedurationpicker/_layout.scss +6 -0
- package/scss/timedurationpicker/_theme.scss +6 -0
- package/scss/timedurationpicker/_variables.scss +1 -0
- package/scss/timedurationpicker/index.scss +29 -0
- package/scss/timepicker/index.scss +1 -0
- package/scss/timeselector/_layout.scss +2 -1
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": "5.
|
|
4
|
+
"version": "5.9.0",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"keywords": [
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
"postpublish": "echo 'no postpublish for the Fluent theme'"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@progress/kendo-font-icons": "^0.
|
|
48
|
-
"@progress/kendo-theme-utils": "^5.
|
|
47
|
+
"@progress/kendo-font-icons": "^0.6.0",
|
|
48
|
+
"@progress/kendo-theme-utils": "^5.9.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"sass-build": "^1.0.0"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "ac592f3dc96e799eb8a5da3513542a68a7984458"
|
|
54
54
|
}
|
|
@@ -3,13 +3,54 @@
|
|
|
3
3
|
|
|
4
4
|
@mixin kendo-action-sheet--layout() {
|
|
5
5
|
.k-actionsheet-container {
|
|
6
|
-
width:
|
|
7
|
-
height:
|
|
6
|
+
width: 100%;
|
|
7
|
+
height: 100%;
|
|
8
|
+
max-width: unquote("max(100%, 100vw)");
|
|
9
|
+
max-height: unquote("max(100%, 100vh)");
|
|
8
10
|
position: fixed;
|
|
9
11
|
top: 0;
|
|
10
12
|
left: 0;
|
|
11
13
|
z-index: 9999;
|
|
12
14
|
overflow: hidden;
|
|
15
|
+
transform: translateZ(0);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// Animation container
|
|
19
|
+
.k-actionsheet-container {
|
|
20
|
+
|
|
21
|
+
// Overlay
|
|
22
|
+
> .k-overlay {
|
|
23
|
+
position: absolute;
|
|
24
|
+
z-index: 1;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// Nested animation container
|
|
28
|
+
> .k-animation-container {
|
|
29
|
+
width: 100%;
|
|
30
|
+
height: 100%;
|
|
31
|
+
border-radius: 0;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
position: absolute;
|
|
34
|
+
z-index: 2;
|
|
35
|
+
top: 0;
|
|
36
|
+
left: 0;
|
|
37
|
+
pointer-events: none;
|
|
38
|
+
|
|
39
|
+
> .k-child-animation-container {
|
|
40
|
+
position: absolute;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// No animation container
|
|
45
|
+
> .k-actionsheet {
|
|
46
|
+
position: absolute;
|
|
47
|
+
z-index: 2;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Enable mouse events for action sheet
|
|
51
|
+
.k-actionsheet {
|
|
52
|
+
pointer-events: all;
|
|
53
|
+
}
|
|
13
54
|
}
|
|
14
55
|
|
|
15
56
|
// Actionsheet
|
|
@@ -18,6 +59,7 @@
|
|
|
18
59
|
padding-block: var( --kendo-actionsheet-padding-y, #{$kendo-actionsheet-padding-y} );
|
|
19
60
|
width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} );
|
|
20
61
|
max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} );
|
|
62
|
+
height: var( --kendo-actionsheet-height, #{$kendo-actionsheet-height} );
|
|
21
63
|
max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} );
|
|
22
64
|
border-width: 0;
|
|
23
65
|
border-style: solid;
|
|
@@ -26,10 +68,8 @@
|
|
|
26
68
|
font-size: var( --kendo-actionsheet-font-size, #{$kendo-actionsheet-font-size} );
|
|
27
69
|
font-family: var( --kendo-actionsheet-font-family, #{$kendo-actionsheet-font-family} );
|
|
28
70
|
line-height: var( --kendo-actionsheet-line-height, #{$kendo-actionsheet-line-height} );
|
|
29
|
-
overflow
|
|
30
|
-
|
|
31
|
-
position: fixed;
|
|
32
|
-
z-index: 10002;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
position: relative;
|
|
33
73
|
|
|
34
74
|
*,
|
|
35
75
|
*::before,
|
|
@@ -39,6 +79,8 @@
|
|
|
39
79
|
}
|
|
40
80
|
|
|
41
81
|
.k-actionsheet-fullscreen {
|
|
82
|
+
width: 100%;
|
|
83
|
+
max-width: 100%;
|
|
42
84
|
max-height: 100%;
|
|
43
85
|
height: 100%;
|
|
44
86
|
}
|
|
@@ -57,21 +99,34 @@
|
|
|
57
99
|
font-family: var( --kendo-actionsheet-header-font-family, #{$kendo-actionsheet-header-font-family} );
|
|
58
100
|
line-height: var( --kendo-actionsheet-header-line-height, #{$kendo-actionsheet-header-line-height} );
|
|
59
101
|
flex: none;
|
|
102
|
+
gap: var( --kendo-actionsheet-header-gap, #{$kendo-actionsheet-header-gap} );
|
|
60
103
|
}
|
|
61
104
|
|
|
62
105
|
|
|
63
106
|
// Actionsheet titlebar
|
|
64
107
|
.k-actionsheet-titlebar {
|
|
65
108
|
@extend .k-actionsheet-header !optional;
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-flow: column nowrap;
|
|
111
|
+
align-items: center;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.k-actionsheet-titlebar-group {
|
|
66
115
|
display: flex;
|
|
67
116
|
flex-flow: row nowrap;
|
|
68
117
|
align-items: center;
|
|
118
|
+
width: 100%;
|
|
69
119
|
}
|
|
70
120
|
|
|
71
121
|
.k-actionsheet-title {
|
|
72
122
|
flex: 1;
|
|
73
123
|
}
|
|
74
124
|
|
|
125
|
+
.k-actionsheet-subtitle {
|
|
126
|
+
font-size: var( --kendo-actionsheet-subtitle-font-size, #{$kendo-actionsheet-subtitle-font-size} );
|
|
127
|
+
line-height: var( --kendo-actionsheet-subtitle-line-height, #{$kendo-actionsheet-subtitle-line-height} );
|
|
128
|
+
}
|
|
129
|
+
|
|
75
130
|
.k-actionsheet-actions {
|
|
76
131
|
flex: none;
|
|
77
132
|
}
|
|
@@ -81,6 +136,7 @@
|
|
|
81
136
|
.k-actionsheet-content {
|
|
82
137
|
flex: 1;
|
|
83
138
|
overflow: auto;
|
|
139
|
+
position: relative;
|
|
84
140
|
}
|
|
85
141
|
|
|
86
142
|
|
|
@@ -95,6 +151,7 @@
|
|
|
95
151
|
margin: 0;
|
|
96
152
|
padding: 0;
|
|
97
153
|
list-style: none;
|
|
154
|
+
flex: none;
|
|
98
155
|
}
|
|
99
156
|
|
|
100
157
|
|
|
@@ -102,6 +159,13 @@
|
|
|
102
159
|
.k-actionsheet-item {
|
|
103
160
|
padding: 0;
|
|
104
161
|
box-sizing: border-box;
|
|
162
|
+
|
|
163
|
+
&:focus,
|
|
164
|
+
&.k-focus {
|
|
165
|
+
outline-width: var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} );
|
|
166
|
+
outline-style: solid;
|
|
167
|
+
outline-offset: calc( -1 * var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} ) );
|
|
168
|
+
}
|
|
105
169
|
}
|
|
106
170
|
|
|
107
171
|
.k-actionsheet-action {
|
|
@@ -115,16 +179,8 @@
|
|
|
115
179
|
outline: 0;
|
|
116
180
|
display: flex;
|
|
117
181
|
flex-flow: row nowrap;
|
|
118
|
-
align-items:
|
|
182
|
+
align-items: flex-start;
|
|
119
183
|
gap: var( --kendo-actionsheet-item-spacing, #{$kendo-actionsheet-item-spacing} );
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
&:focus,
|
|
123
|
-
&.k-focus {
|
|
124
|
-
outline-width: var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} );
|
|
125
|
-
outline-style: solid;
|
|
126
|
-
outline-offset: calc( -1 * var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} ) );
|
|
127
|
-
}
|
|
128
184
|
}
|
|
129
185
|
|
|
130
186
|
.k-actionsheet-item-icon {
|
|
@@ -150,6 +206,7 @@
|
|
|
150
206
|
.k-actionsheet > .k-hr {
|
|
151
207
|
margin: 0;
|
|
152
208
|
border-color: inherit;
|
|
209
|
+
flex: none;
|
|
153
210
|
}
|
|
154
211
|
|
|
155
212
|
|
|
@@ -210,6 +267,31 @@
|
|
|
210
267
|
display: flex;
|
|
211
268
|
flex-flow: column nowrap;
|
|
212
269
|
|
|
270
|
+
.k-actionsheet-titlebar {
|
|
271
|
+
padding-inline: var( --kendo-adaptive-actionsheet-header-padding-x, #{$kendo-adaptive-actionsheet-header-padding-x} );
|
|
272
|
+
padding-block: var( --kendo-adaptive-actionsheet-header-padding-y, #{$kendo-adaptive-actionsheet-header-padding-y} );
|
|
273
|
+
border-bottom-width: var( --kendo-adaptive-actionsheet-header-border-width, #{$kendo-adaptive-actionsheet-header-border-width} );
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.k-actionsheet-content {
|
|
277
|
+
padding-inline: var( --kendo-adaptive-actionsheet-content-padding-x, #{$kendo-adaptive-actionsheet-content-padding-x} );
|
|
278
|
+
padding-block: var( --kendo-adaptive-actionsheet-content-padding-y, #{$kendo-adaptive-actionsheet-content-padding-y} );
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
.k-actionsheet-footer {
|
|
282
|
+
padding-inline: var( --kendo-adaptive-actionsheet-footer-padding-x, #{$kendo-adaptive-actionsheet-footer-padding-x} );
|
|
283
|
+
padding-block: var( --kendo-adaptive-actionsheet-footer-padding-y, #{$kendo-adaptive-actionsheet-footer-padding-y} );
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.k-list-container,
|
|
287
|
+
.k-treeview {
|
|
288
|
+
height: 100%;
|
|
289
|
+
}
|
|
290
|
+
.k-list-filter {
|
|
291
|
+
width: 100%;
|
|
292
|
+
padding-inline: 0;
|
|
293
|
+
}
|
|
294
|
+
|
|
213
295
|
.k-calendar {
|
|
214
296
|
margin-inline: auto;
|
|
215
297
|
border-width: 0;
|
|
@@ -229,5 +311,58 @@
|
|
|
229
311
|
height: 100%;
|
|
230
312
|
}
|
|
231
313
|
}
|
|
314
|
+
|
|
315
|
+
.k-datetime-wrap {
|
|
316
|
+
width: 100%;
|
|
317
|
+
height: 100%;
|
|
318
|
+
display: flex;
|
|
319
|
+
flex-flow: column nowrap;
|
|
320
|
+
}
|
|
321
|
+
.k-datetime-selector {
|
|
322
|
+
flex: 1 1 auto;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.k-datetime-calendar-wrap {
|
|
326
|
+
width: 100%;
|
|
327
|
+
position: absolute;
|
|
328
|
+
top: 0;
|
|
329
|
+
left: 0;
|
|
330
|
+
bottom: 0;
|
|
331
|
+
flex: 0 0 100%;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.k-datetime-time-wrap {
|
|
335
|
+
width: 100%;
|
|
336
|
+
position: absolute;
|
|
337
|
+
top: 0;
|
|
338
|
+
left: 100%;
|
|
339
|
+
bottom: 0;
|
|
340
|
+
flex: 0 0 100%;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.k-scrollable-wrap {
|
|
344
|
+
height: 100%;
|
|
345
|
+
overflow-y: auto;
|
|
346
|
+
}
|
|
232
347
|
}
|
|
233
348
|
}
|
|
349
|
+
|
|
350
|
+
@mixin kendo-action-sheet--layout-jq() {
|
|
351
|
+
|
|
352
|
+
.k-actionsheet-jq {
|
|
353
|
+
&.k-actionsheet {
|
|
354
|
+
height: auto;
|
|
355
|
+
position: relative;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.k-actionsheet-header {
|
|
359
|
+
@extend .k-actionsheet-titlebar !optional;
|
|
360
|
+
align-items: flex-start;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.k-actionsheet-action {
|
|
364
|
+
align-items: center;
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
}
|
|
@@ -19,7 +19,9 @@
|
|
|
19
19
|
border-color: var( --kendo-actionsheet-header-border, #{$kendo-actionsheet-header-border} );
|
|
20
20
|
@include box-shadow( var( --kendo-actionsheet-header-shadow, #{$kendo-actionsheet-header-shadow} ) );
|
|
21
21
|
}
|
|
22
|
-
|
|
22
|
+
.k-actionsheet-subtitle-text {
|
|
23
|
+
color: var( --kendo-actionsheet-subtitle-text, #{$kendo-actionsheet-subtitle-text} );
|
|
24
|
+
}
|
|
23
25
|
|
|
24
26
|
// Actionsheet items
|
|
25
27
|
.k-actionsheet-items {}
|
|
@@ -40,7 +42,7 @@
|
|
|
40
42
|
|
|
41
43
|
|
|
42
44
|
// Actionsheet action
|
|
43
|
-
.k-actionsheet-
|
|
45
|
+
.k-actionsheet-item {
|
|
44
46
|
|
|
45
47
|
color: var( --INTERNAL--kendo-actionsheet-item-text, inherit );
|
|
46
48
|
background-color: var( --INTERNAL--kendo-actionsheet-item-bg, inherit );
|
|
@@ -86,4 +88,10 @@
|
|
|
86
88
|
}
|
|
87
89
|
}
|
|
88
90
|
}
|
|
91
|
+
|
|
92
|
+
// Adaptive Actionsheet
|
|
93
|
+
.k-adaptive-actionsheet .k-actionsheet-titlebar {
|
|
94
|
+
border-color: var( --kendo-adaptive-actionsheet-header-border, #{$kendo-adaptive-actionsheet-header-border} );
|
|
95
|
+
}
|
|
96
|
+
|
|
89
97
|
}
|
|
@@ -13,9 +13,12 @@ $kendo-actionsheet-width: 360px !default;
|
|
|
13
13
|
/// Maximum width of the action sheet.
|
|
14
14
|
/// @group action-sheet
|
|
15
15
|
$kendo-actionsheet-max-width: 100% !default;
|
|
16
|
+
/// Height of the action sheet.
|
|
17
|
+
/// @group action-sheet
|
|
18
|
+
$kendo-actionsheet-height: 60vh !default;
|
|
16
19
|
/// Maximum height of the action sheet.
|
|
17
20
|
/// @group action-sheet
|
|
18
|
-
$kendo-actionsheet-max-height:
|
|
21
|
+
$kendo-actionsheet-max-height: 60vh !default;
|
|
19
22
|
|
|
20
23
|
/// Border width around the action sheet.
|
|
21
24
|
/// @group action-sheet
|
|
@@ -65,6 +68,10 @@ $kendo-actionsheet-header-font-family: inherit !default;
|
|
|
65
68
|
/// Line height of the action sheet header.
|
|
66
69
|
/// @group action-sheet
|
|
67
70
|
$kendo-actionsheet-header-line-height: inherit !default;
|
|
71
|
+
/// Spacing between the action sheet header groups.
|
|
72
|
+
/// @group action-sheet
|
|
73
|
+
$kendo-actionsheet-header-gap: map-get( $kendo-spacing, 4 ) !default;
|
|
74
|
+
|
|
68
75
|
|
|
69
76
|
/// Background color of the action sheet header.
|
|
70
77
|
/// @group action-sheet
|
|
@@ -79,6 +86,16 @@ $kendo-actionsheet-header-border: inherit !default;
|
|
|
79
86
|
/// @group action-sheet
|
|
80
87
|
$kendo-actionsheet-header-shadow: none !default;
|
|
81
88
|
|
|
89
|
+
/// Font size of the action sheet subtitle.
|
|
90
|
+
/// @group action-sheet
|
|
91
|
+
$kendo-actionsheet-subtitle-font-size: var( --kendo-font-size-sm, inherit ) !default;
|
|
92
|
+
/// Line height of the action sheet subtitle.
|
|
93
|
+
/// @group action-sheet
|
|
94
|
+
$kendo-actionsheet-subtitle-line-height: var( --kendo-line-height-sm, inherit ) !default;
|
|
95
|
+
/// Text color of the action sheet subtitle.
|
|
96
|
+
/// @group action-sheet
|
|
97
|
+
$kendo-actionsheet-subtitle-text: var( --kendo-subtle-text, inherit ) !default;
|
|
98
|
+
|
|
82
99
|
/// Minimum height of the action sheet item.
|
|
83
100
|
/// @group action-sheet
|
|
84
101
|
$kendo-actionsheet-item-min-height: 40px !default;
|
|
@@ -161,3 +178,33 @@ $kendo-actionsheet-item-disabled-text: var( --kendo-disabled-text, inherit ) !de
|
|
|
161
178
|
/// Disabled border color of the action sheet item.
|
|
162
179
|
/// @group action-sheet
|
|
163
180
|
$kendo-actionsheet-item-disabled-border: var( --kendo-disabled-border, inherit ) !default;
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
// Adaptive Actionsheet
|
|
184
|
+
|
|
185
|
+
/// Border width of the adaptive action sheet titlebar.
|
|
186
|
+
/// @group action-sheet
|
|
187
|
+
$kendo-adaptive-actionsheet-header-border-width: 1px !default;
|
|
188
|
+
/// Vertical padding of the adaptive action sheet titlebar.
|
|
189
|
+
/// @group action-sheet
|
|
190
|
+
$kendo-adaptive-actionsheet-header-padding-y: map-get( $kendo-spacing, 4 ) !default;
|
|
191
|
+
/// Horizontal padding of the adaptive action sheet titlebar.
|
|
192
|
+
/// @group action-sheet
|
|
193
|
+
$kendo-adaptive-actionsheet-header-padding-x: $kendo-adaptive-actionsheet-header-padding-y !default;
|
|
194
|
+
/// Text color of the adaptive action sheet titlebar.
|
|
195
|
+
/// @group action-sheet
|
|
196
|
+
$kendo-adaptive-actionsheet-header-border: var( --kendo-component-border, initial ) !default;
|
|
197
|
+
|
|
198
|
+
/// Vertical padding of the adaptive action sheet content.
|
|
199
|
+
/// @group action-sheet
|
|
200
|
+
$kendo-adaptive-actionsheet-content-padding-y: map-get( $kendo-spacing, 2 ) !default;
|
|
201
|
+
/// Horizontal padding of the adaptive action sheet content.
|
|
202
|
+
/// @group action-sheet
|
|
203
|
+
$kendo-adaptive-actionsheet-content-padding-x: map-get( $kendo-spacing, 4 ) !default;
|
|
204
|
+
|
|
205
|
+
/// Vertical padding of the adaptive action sheet footer.
|
|
206
|
+
/// @group action-sheet
|
|
207
|
+
$kendo-adaptive-actionsheet-footer-padding-y: map-get( $kendo-spacing, 2 ) !default;
|
|
208
|
+
/// Horizontal padding of the adaptive action sheet footer.
|
|
209
|
+
/// @group action-sheet
|
|
210
|
+
$kendo-adaptive-actionsheet-footer-padding-x: map-get( $kendo-spacing, 4 ) !default;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
@use "sass:math";
|
|
2
1
|
@use "../core/color-system" as *;
|
|
3
2
|
@use "../core/mixins" as *;
|
|
4
3
|
@use "_variables.scss" as *;
|
|
@@ -9,6 +8,8 @@
|
|
|
9
8
|
|
|
10
9
|
// Base
|
|
11
10
|
.k-calendar {
|
|
11
|
+
inline-size: var( --INTERNAL--kendo-calendar-width, min-content );
|
|
12
|
+
block-size: var( --INTERNAL--kendo-calendar-height, min-content );
|
|
12
13
|
border-width: var( --kendo-calendar-border-width, #{$kendo-calendar-border-width} );
|
|
13
14
|
border-style: solid;
|
|
14
15
|
box-sizing: border-box;
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
|
|
42
43
|
// Calendar table
|
|
43
44
|
.k-calendar-table {
|
|
44
|
-
margin: 0;
|
|
45
|
+
margin: 0 auto;
|
|
45
46
|
border-width: 0;
|
|
46
47
|
border-color: inherit;
|
|
47
48
|
border-spacing: 0;
|
|
@@ -49,8 +50,7 @@
|
|
|
49
50
|
table-layout: fixed;
|
|
50
51
|
text-align: center;
|
|
51
52
|
outline: 0;
|
|
52
|
-
display:
|
|
53
|
-
vertical-align: top;
|
|
53
|
+
display: table;
|
|
54
54
|
position: relative;
|
|
55
55
|
z-index: 1;
|
|
56
56
|
}
|
|
@@ -94,8 +94,29 @@
|
|
|
94
94
|
|
|
95
95
|
.k-calendar-td {
|
|
96
96
|
@include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ));
|
|
97
|
+
inline-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
|
|
98
|
+
block-size: var( --INTERNAL--kendo-calendar-cell-size, min-content );
|
|
97
99
|
border-color: transparent;
|
|
98
|
-
font-size: var( --kendo-calendar-cell-font-size,
|
|
100
|
+
font-size: var( --INTERNAL--kendo-calendar-cell-font-size, inherit );
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
// Calendar cell inner
|
|
105
|
+
// Remove .k-calendar once we remove k-link
|
|
106
|
+
.k-calendar .k-calendar-cell-inner {
|
|
107
|
+
@include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
|
|
108
|
+
padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, 0 );
|
|
109
|
+
padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, 0 );
|
|
110
|
+
width: 100%;
|
|
111
|
+
height: 100%;
|
|
112
|
+
box-sizing: border-box;
|
|
113
|
+
display: flex;
|
|
114
|
+
flex-direction: row;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
white-space: normal;
|
|
118
|
+
position: relative;
|
|
119
|
+
overflow: hidden;
|
|
99
120
|
}
|
|
100
121
|
|
|
101
122
|
|
|
@@ -163,7 +184,7 @@
|
|
|
163
184
|
padding-inline: var( --kendo-calendar-header-padding-x, #{$kendo-calendar-header-padding-x} );
|
|
164
185
|
padding-block-end: var( --kendo-calendar-view-padding-block-end, #{$kendo-calendar-view-padding-block-end} );
|
|
165
186
|
// setting width / height prevents layout changes in meta views
|
|
166
|
-
|
|
187
|
+
inline-size: var( --INTERNAL--kendo-calendar-view-width, #{$kendo-calendar-view-width});
|
|
167
188
|
min-height: $kendo-calendar-view-height;
|
|
168
189
|
box-sizing: content-box;
|
|
169
190
|
gap: var( --kendo-calendar-view-gap, #{$kendo-calendar-view-gap} );
|
|
@@ -173,81 +194,80 @@
|
|
|
173
194
|
|
|
174
195
|
.k-link {
|
|
175
196
|
@include border-radius( var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) );
|
|
176
|
-
padding-inline: var( --kendo-calendar-cell-padding-x,
|
|
177
|
-
padding-block: var( --kendo-calendar-cell-padding-y,
|
|
197
|
+
padding-inline: var( --INTERNAL--kendo-calendar-cell-padding-x, 0 );
|
|
198
|
+
padding-block: var( --INTERNAL--kendo-calendar-cell-padding-y, 0 );
|
|
199
|
+
width: 100%;
|
|
200
|
+
height: 100%;
|
|
178
201
|
box-sizing: border-box;
|
|
179
202
|
display: flex;
|
|
180
203
|
flex-direction: row;
|
|
181
204
|
align-items: center;
|
|
182
205
|
justify-content: center;
|
|
183
|
-
|
|
206
|
+
white-space: normal;
|
|
207
|
+
position: relative;
|
|
208
|
+
overflow: hidden;
|
|
184
209
|
}
|
|
185
210
|
|
|
186
211
|
.k-today .k-link {
|
|
187
212
|
@include border-radius( var( --kendo-calendar-today-border-radius, #{$kendo-calendar-today-border-radius} ) );
|
|
188
213
|
}
|
|
189
214
|
}
|
|
190
|
-
.k-week-number .k-calendar-view {
|
|
191
|
-
width: calc( 8 * var( --kendo-calendar-cell-size, #{$kendo-calendar-cell-size} ));
|
|
192
|
-
}
|
|
193
215
|
|
|
194
216
|
|
|
195
217
|
// Month view
|
|
218
|
+
.k-month-calendar,
|
|
196
219
|
.k-calendar-monthview {
|
|
197
|
-
$_month-cell-size:
|
|
220
|
+
$_month-cell-size: $kendo-calendar-cell-size;
|
|
198
221
|
|
|
199
222
|
.k-calendar-td {
|
|
200
223
|
width: $_month-cell-size;
|
|
201
224
|
height: $_month-cell-size;
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
width: $_month-cell-size;
|
|
205
|
-
height: $_month-cell-size;
|
|
225
|
+
inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
|
|
226
|
+
block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_month-cell-size} );
|
|
206
227
|
}
|
|
207
228
|
}
|
|
208
229
|
|
|
209
230
|
|
|
210
231
|
// Year view
|
|
232
|
+
.k-year-calendar,
|
|
211
233
|
.k-calendar-yearview {
|
|
212
|
-
$_year-cell-size:
|
|
234
|
+
$_year-cell-size: ( 2 * $kendo-calendar-cell-size );
|
|
213
235
|
|
|
214
236
|
.k-calendar-td {
|
|
215
|
-
width: auto;
|
|
216
|
-
height: auto;
|
|
217
|
-
}
|
|
218
|
-
.k-link {
|
|
219
237
|
width: $_year-cell-size;
|
|
220
238
|
height: $_year-cell-size;
|
|
239
|
+
inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
|
|
240
|
+
block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_year-cell-size} );
|
|
221
241
|
}
|
|
222
242
|
}
|
|
223
243
|
|
|
224
244
|
|
|
225
245
|
// Decade view
|
|
246
|
+
.k-decade-calendar,
|
|
226
247
|
.k-calendar-decadeview {
|
|
227
|
-
$_decade-cell-size:
|
|
248
|
+
$_decade-cell-size: ( 2 * $kendo-calendar-cell-size );
|
|
228
249
|
|
|
229
250
|
.k-calendar-td {
|
|
230
|
-
width: auto;
|
|
231
|
-
height: auto;
|
|
232
|
-
}
|
|
233
|
-
.k-link {
|
|
234
251
|
width: $_decade-cell-size;
|
|
235
252
|
height: $_decade-cell-size;
|
|
253
|
+
inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
|
|
254
|
+
block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_decade-cell-size} );
|
|
236
255
|
}
|
|
237
256
|
}
|
|
238
257
|
|
|
239
258
|
|
|
240
259
|
// Century view
|
|
260
|
+
.k-century-calendar,
|
|
241
261
|
.k-calendar-centuryview {
|
|
242
|
-
$_century-cell-size:
|
|
262
|
+
$_century-cell-size: ( 2 * $kendo-calendar-cell-size );
|
|
243
263
|
|
|
244
264
|
.k-calendar-td {
|
|
245
|
-
width: auto;
|
|
246
|
-
height: auto;
|
|
247
|
-
}
|
|
248
|
-
.k-link {
|
|
249
265
|
width: $_century-cell-size;
|
|
250
266
|
height: $_century-cell-size;
|
|
267
|
+
inline-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
|
|
268
|
+
block-size: var( --INTERNAL--kendo-calendar-cell-size, #{$_century-cell-size} );
|
|
269
|
+
}
|
|
270
|
+
.k-link {
|
|
251
271
|
text-align: left;
|
|
252
272
|
}
|
|
253
273
|
}
|
|
@@ -441,6 +461,51 @@
|
|
|
441
461
|
}
|
|
442
462
|
|
|
443
463
|
|
|
464
|
+
|
|
465
|
+
|
|
466
|
+
// Calendar sizes
|
|
467
|
+
@each $size, $size-props in $kendo-calendar-sizes {
|
|
468
|
+
$_font-size: map-get( $size-props, font-size );
|
|
469
|
+
$_line-height: map-get( $size-props, line-height );
|
|
470
|
+
$_cell-size: map-get( $size-props, cell-size );
|
|
471
|
+
$_cell-padding-x: map-get( $size-props, cell-padding-x );
|
|
472
|
+
$_cell-padding-y: map-get( $size-props, cell-padding-y );
|
|
473
|
+
$_cell-font-size: map-get( $size-props, cell-font-size );
|
|
474
|
+
|
|
475
|
+
$_month-cell-size: $_cell-size;
|
|
476
|
+
$_year-cell-size: ( 2 * $_cell-size );
|
|
477
|
+
$_decade-cell-size: ( 2 * $_cell-size );
|
|
478
|
+
$_century-cell-size: ( 2 * $_cell-size );
|
|
479
|
+
|
|
480
|
+
.k-calendar-#{$size} {
|
|
481
|
+
--INTERNAL--kendo-calendar-view-width: #{8 * $_cell-size};
|
|
482
|
+
--INTERNAL--kendo-calendar-cell-padding-x: var( --kendo-calendar-#{$size}-cell-padding-x, #{$_cell-padding-x} );
|
|
483
|
+
--INTERNAL--kendo-calendar-cell-padding-y: var( --kendo-calendar-#{$size}-cell-padding-y, #{$_cell-padding-y} );
|
|
484
|
+
--INTERNAL--kendo-calendar-cell-font-size: var( --kendo-calendar-#{$size}-cell-font-size, #{$_cell-font-size} );
|
|
485
|
+
font-size: $_font-size;
|
|
486
|
+
line-height: $_line-height;
|
|
487
|
+
|
|
488
|
+
&.k-month-calendar,
|
|
489
|
+
.k-calendar-monthview {
|
|
490
|
+
--INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-month-cell-size, #{$_month-cell-size} );
|
|
491
|
+
}
|
|
492
|
+
&.k-year-calendar,
|
|
493
|
+
.k-calendar-yearview {
|
|
494
|
+
--INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-year-cell-size, #{$_year-cell-size} );
|
|
495
|
+
}
|
|
496
|
+
&.k-decade-calendar,
|
|
497
|
+
.k-calendar-decadeview {
|
|
498
|
+
--INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-decade-cell-size, #{$_decade-cell-size} );
|
|
499
|
+
}
|
|
500
|
+
&.k-century-calendar,
|
|
501
|
+
.k-calendar-centuryview {
|
|
502
|
+
--INTERNAL--kendo-calendar-cell-size: var( --kendo-calendar-#{$size}-century-cell-size, #{$_century-cell-size} );
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
// RTL
|
|
444
509
|
.k-rtl .k-calendar,
|
|
445
510
|
.k-calendar[dir="rtl"] {
|
|
446
511
|
|
|
@@ -264,4 +264,54 @@ $kendo-calendar-range-bg: get-theme-color-var( neutral-30 ) !default;
|
|
|
264
264
|
$kendo-calendar-range-text: inherit !default;
|
|
265
265
|
/// Border color of the range selection in the calendar.
|
|
266
266
|
/// @group calendar
|
|
267
|
-
$kendo-calendar-range-border: get-theme-color-var( neutral-130 )
|
|
267
|
+
$kendo-calendar-range-border: get-theme-color-var( neutral-130 ) !default;
|
|
268
|
+
|
|
269
|
+
|
|
270
|
+
// Calendar sizes
|
|
271
|
+
$kendo-calendar-sm-font-size: $kendo-font-size-sm !default;
|
|
272
|
+
$kendo-calendar-sm-line-height: $kendo-line-height-sm !default;
|
|
273
|
+
$kendo-calendar-sm-cell-size: 24px !default;
|
|
274
|
+
$kendo-calendar-sm-cell-padding-x: map-get( $kendo-spacing, thin) !default;
|
|
275
|
+
$kendo-calendar-sm-cell-padding-y: map-get( $kendo-spacing, thin) !default;
|
|
276
|
+
$kendo-calendar-sm-cell-font-size: $kendo-font-size-sm !default;
|
|
277
|
+
|
|
278
|
+
$kendo-calendar-md-font-size: $kendo-font-size-md !default;
|
|
279
|
+
$kendo-calendar-md-line-height: $kendo-line-height-md !default;
|
|
280
|
+
$kendo-calendar-md-cell-size: 28px !default;
|
|
281
|
+
$kendo-calendar-md-cell-padding-x: map-get( $kendo-spacing, 1 ) !default;
|
|
282
|
+
$kendo-calendar-md-cell-padding-y: map-get( $kendo-spacing, 1 ) !default;
|
|
283
|
+
$kendo-calendar-md-cell-font-size: $kendo-font-size-sm !default;
|
|
284
|
+
|
|
285
|
+
$kendo-calendar-lg-font-size: $kendo-font-size-md !default;
|
|
286
|
+
$kendo-calendar-lg-line-height: $kendo-line-height-md !default;
|
|
287
|
+
$kendo-calendar-lg-cell-size: 32px !default;
|
|
288
|
+
$kendo-calendar-lg-cell-padding-x: map-get( $kendo-spacing, 1 ) !default;
|
|
289
|
+
$kendo-calendar-lg-cell-padding-y: map-get( $kendo-spacing, 1 ) !default;
|
|
290
|
+
$kendo-calendar-lg-cell-font-size: $kendo-font-size-md !default;
|
|
291
|
+
|
|
292
|
+
$kendo-calendar-sizes: (
|
|
293
|
+
sm: (
|
|
294
|
+
font-size: $kendo-calendar-sm-font-size,
|
|
295
|
+
line-height: $kendo-calendar-sm-line-height,
|
|
296
|
+
cell-size: $kendo-calendar-sm-cell-size,
|
|
297
|
+
cell-padding-x: $kendo-calendar-sm-cell-padding-y,
|
|
298
|
+
cell-padding-y: $kendo-calendar-sm-cell-padding-x,
|
|
299
|
+
cell-font-size: $kendo-calendar-sm-cell-font-size
|
|
300
|
+
),
|
|
301
|
+
md: (
|
|
302
|
+
font-size: $kendo-calendar-md-font-size,
|
|
303
|
+
line-height: $kendo-calendar-md-line-height,
|
|
304
|
+
cell-size: $kendo-calendar-md-cell-size,
|
|
305
|
+
cell-padding-x: $kendo-calendar-md-cell-padding-y,
|
|
306
|
+
cell-padding-y: $kendo-calendar-md-cell-padding-x,
|
|
307
|
+
cell-font-size: $kendo-calendar-md-cell-font-size
|
|
308
|
+
),
|
|
309
|
+
lg: (
|
|
310
|
+
font-size: $kendo-calendar-lg-font-size,
|
|
311
|
+
line-height: $kendo-calendar-lg-line-height,
|
|
312
|
+
cell-size: $kendo-calendar-lg-cell-size,
|
|
313
|
+
cell-padding-x: $kendo-calendar-lg-cell-padding-y,
|
|
314
|
+
cell-padding-y: $kendo-calendar-lg-cell-padding-x,
|
|
315
|
+
cell-font-size: $kendo-calendar-lg-cell-font-size
|
|
316
|
+
)
|
|
317
|
+
) !default;
|