@progress/kendo-theme-default 5.0.0-alpha.2 → 5.0.0-beta.2

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.
Files changed (152) hide show
  1. package/dist/all.css +8420 -10054
  2. package/dist/all.scss +13531 -13419
  3. package/package.json +2 -2
  4. package/scss/_variables.scss +0 -19
  5. package/scss/action-buttons/_layout.scss +1 -0
  6. package/scss/adaptive/_layout.scss +7 -19
  7. package/scss/all.scss +1 -159
  8. package/scss/autocomplete/_index.scss +1 -0
  9. package/scss/autocomplete/_variables.scss +0 -5
  10. package/scss/avatar/_layout.scss +13 -17
  11. package/scss/avatar/_theme.scss +4 -4
  12. package/scss/avatar/_variables.scss +18 -8
  13. package/scss/avatar/index.md +0 -0
  14. package/scss/breadcrumb/_layout.scss +0 -13
  15. package/scss/button/_index.scss +2 -0
  16. package/scss/button/_layout.scss +23 -62
  17. package/scss/button/_variables.scss +7 -5
  18. package/scss/calendar/_index.scss +1 -0
  19. package/scss/calendar/_theme.scss +1 -2
  20. package/scss/chat/_layout.scss +3 -5
  21. package/scss/chat/_theme.scss +0 -10
  22. package/scss/chat/_variables.scss +0 -8
  23. package/scss/checkbox/_index.scss +2 -0
  24. package/scss/checkbox/_variables.scss +1 -1
  25. package/scss/checkbox/index.md +0 -0
  26. package/scss/chip/_index.scss +1 -0
  27. package/scss/chip/_layout.scss +124 -131
  28. package/scss/chip/_theme.scss +90 -388
  29. package/scss/chip/_variables.scss +127 -191
  30. package/scss/chip/index.md +0 -0
  31. package/scss/color-preview/_layout.scss +47 -9
  32. package/scss/color-preview/_theme.scss +4 -4
  33. package/scss/color-preview/_variables.scss +1 -0
  34. package/scss/colorgradient/_layout.scss +7 -0
  35. package/scss/colorpicker/_index.scss +1 -2
  36. package/scss/colorpicker/_layout.scss +1 -1
  37. package/scss/colorpicker/_theme.scss +1 -1
  38. package/scss/colorpicker/_variables.scss +1 -22
  39. package/scss/combobox/_index.scss +1 -0
  40. package/scss/combobox/_variables.scss +0 -2
  41. package/scss/core/functions/_colors.scss +4 -1
  42. package/scss/core/mixins/_index.scss +1 -0
  43. package/scss/core/mixins/_module-system.scss +149 -0
  44. package/scss/dataviz/_index.scss +1 -0
  45. package/scss/dateinput/_index.scss +0 -4
  46. package/scss/dateinput/_variables.scss +1 -1
  47. package/scss/datepicker/_index.scss +1 -3
  48. package/scss/datetimepicker/_index.scss +5 -3
  49. package/scss/datetimepicker/_layout.scss +2 -2
  50. package/scss/datetimepicker/_theme.scss +2 -2
  51. package/scss/datetimepicker/_variables.scss +2 -1
  52. package/scss/drawer/_index.scss +1 -0
  53. package/scss/drawer/_variables.scss +1 -1
  54. package/scss/dropdowngrid/_layout.scss +5 -4
  55. package/scss/dropdowngrid/_theme.scss +6 -2
  56. package/scss/dropdowngrid/index.md +0 -0
  57. package/scss/dropdownlist/_index.scss +1 -0
  58. package/scss/dropdownlist/_layout.scss +11 -0
  59. package/scss/dropzone/_layout.scss +0 -16
  60. package/scss/editor/_layout.scss +2 -47
  61. package/scss/editor/_variables.scss +1 -1
  62. package/scss/expansion-panel/_index.scss +1 -0
  63. package/scss/expansion-panel/_variables.scss +2 -2
  64. package/scss/filemanager/_theme.scss +1 -1
  65. package/scss/filter/_index.scss +1 -1
  66. package/scss/filter/_layout.scss +9 -2
  67. package/scss/filter/_theme.scss +3 -1
  68. package/scss/forms/_index.scss +1 -1
  69. package/scss/forms/_layout.scss +9 -78
  70. package/scss/gantt/_index.scss +1 -1
  71. package/scss/gantt/_layout.scss +5 -3
  72. package/scss/grid/_index.scss +2 -1
  73. package/scss/grid/_layout.scss +23 -46
  74. package/scss/grid/_theme.scss +12 -12
  75. package/scss/grid/_variables.scss +3 -3
  76. package/scss/icons/_layout.scss +6 -1
  77. package/scss/icons/font/WebComponentsIcons.scss +1 -1
  78. package/scss/icons/font/WebComponentsIcons.ttf +0 -0
  79. package/scss/index.scss +156 -0
  80. package/scss/input/_index.scss +1 -1
  81. package/scss/input/_layout.scss +151 -17
  82. package/scss/input/_theme.scss +13 -2
  83. package/scss/input/_variables.scss +45 -44
  84. package/scss/list/_index.scss +11 -0
  85. package/scss/list/_layout.scss +219 -0
  86. package/scss/list/_theme.scss +91 -0
  87. package/scss/list/_variables.scss +248 -0
  88. package/scss/list/index.md +0 -0
  89. package/scss/listbox/_index.scss +2 -0
  90. package/scss/menu/_index.scss +2 -0
  91. package/scss/menu/_layout.scss +72 -41
  92. package/scss/menu/_theme.scss +27 -24
  93. package/scss/menu/_variables.scss +114 -35
  94. package/scss/multiselect/_index.scss +2 -0
  95. package/scss/multiselect/_layout.scss +0 -180
  96. package/scss/multiselect/_theme.scss +0 -139
  97. package/scss/multiselect/_variables.scss +0 -36
  98. package/scss/notification/_layout.scss +0 -22
  99. package/scss/pager/_index.scss +1 -0
  100. package/scss/pager/_theme.scss +4 -4
  101. package/scss/pager/_variables.scss +5 -5
  102. package/scss/panelbar/_index.scss +1 -0
  103. package/scss/panelbar/_layout.scss +0 -53
  104. package/scss/panelbar/_theme.scss +9 -2
  105. package/scss/panelbar/_variables.scss +6 -2
  106. package/scss/pivotgrid/_index.scss +1 -0
  107. package/scss/pivotgrid/_layout.scss +1 -45
  108. package/scss/pivotgrid/_theme.scss +1 -2
  109. package/scss/pivotgrid/_variables.scss +1 -4
  110. package/scss/popover/_layout.scss +0 -1
  111. package/scss/popup/_index.scss +0 -4
  112. package/scss/popup/_layout.scss +2 -242
  113. package/scss/popup/_theme.scss +2 -159
  114. package/scss/popup/_variables.scss +2 -7
  115. package/scss/radio/_index.scss +2 -0
  116. package/scss/radio/_variables.scss +1 -1
  117. package/scss/radio/index.md +0 -0
  118. package/scss/rating/_layout.scss +0 -8
  119. package/scss/scheduler/_index.scss +1 -1
  120. package/scss/scrollview/_layout.scss +6 -1
  121. package/scss/slider/_layout.scss +2 -18
  122. package/scss/spreadsheet/_index.scss +2 -1
  123. package/scss/spreadsheet/_layout.scss +3 -5
  124. package/scss/spreadsheet/_theme.scss +6 -6
  125. package/scss/switch/_layout.scss +4 -2
  126. package/scss/switch/index.md +0 -0
  127. package/scss/{datetime → table}/_index.scss +5 -2
  128. package/scss/table/_layout.scss +254 -0
  129. package/scss/table/_theme.scss +81 -0
  130. package/scss/table/_variables.scss +141 -0
  131. package/scss/tabstrip/_index.scss +1 -0
  132. package/scss/tabstrip/_layout.scss +10 -0
  133. package/scss/tabstrip/_theme.scss +1 -0
  134. package/scss/tabstrip/_variables.scss +3 -3
  135. package/scss/taskboard/_layout.scss +2 -1
  136. package/scss/taskboard/_variables.scss +0 -2
  137. package/scss/timepicker/_index.scss +3 -3
  138. package/scss/timepicker/_variables.scss +1 -1
  139. package/scss/timeselector/_index.scss +13 -0
  140. package/scss/timeselector/_layout.scss +207 -0
  141. package/scss/{datetime → timeselector}/_theme.scss +21 -21
  142. package/scss/timeselector/_variables.scss +32 -0
  143. package/scss/toolbar/_layout.scss +2 -1
  144. package/scss/treeview/_layout.scss +49 -33
  145. package/scss/treeview/_theme.scss +31 -32
  146. package/scss/treeview/_variables.scss +142 -46
  147. package/scss/upload/_layout.scss +0 -80
  148. package/scss/utils/_border.scss +1 -2
  149. package/scss/utils/_flex.scss +11 -3
  150. package/scss/datetime/_layout.scss +0 -222
  151. package/scss/datetime/_variables.scss +0 -53
  152. package/scss/no-flexbox.scss +0 -38
package/scss/chip/_theme.scss CHANGED
@@ -1,410 +1,112 @@
1
- @include exports("chip/theme") {
2
-
3
- .k-selection-multiple .k-chip-has-icon.k-state-selected .k-selected-icon-wrapper,
4
- .k-selection-multiple .k-chip-has-icon.k-selected .k-selected-icon-wrapper {
5
- @include fill(
6
- $color: $chip-multiple-selected-icon-text,
7
- $bg: $chip-multiple-selected-icon-bg
8
- );
9
- }
1
+ @include exports( "chip/theme" ) {
10
2
 
11
3
  // Solid
12
- .k-chip-solid {
13
- @include fill(
14
- $chip-solid-text,
15
- $chip-solid-bg,
16
- $chip-solid-border
17
- );
18
-
19
- &:hover,
20
- &.k-state-hover,
21
- &.k-hover {
22
- @include fill(
23
- $bg: $chip-solid-hover-bg,
24
- $border: $chip-solid-hover-border
25
- );
26
- }
27
-
28
- &:focus,
29
- &.k-state-focus,
30
- &.k-focus {
31
- @include box-shadow( $chip-solid-focus-shadow );
32
- @include fill( $bg: $chip-solid-focus-bg );
33
- }
34
-
35
- &.k-state-selected,
36
- &.k-selected {
37
- @include fill(
38
- $bg: $chip-solid-selected-bg,
39
- $border: $chip-solid-selected-border
40
- );
41
- }
42
-
43
- &.k-chip-success {
44
- @include fill(
45
- $chip-solid-success-text,
46
- $chip-solid-success-bg,
47
- $chip-solid-success-border
48
- );
49
-
50
- &:hover,
51
- &.k-state-hover,
52
- &.k-hover {
53
- @include fill(
54
- $chip-solid-success-hover-text,
55
- $chip-solid-success-hover-bg,
56
- $chip-solid-success-hover-border
57
- );
58
- }
59
-
60
- &:focus,
61
- &.k-state-focus,
62
- &.k-focus {
63
- @include fill(
64
- $chip-solid-success-focus-text,
65
- $chip-solid-success-focus-bg,
66
- $chip-solid-success-focus-border
67
- );
68
- }
69
-
70
- &.k-state-selected,
71
- &.k-selected {
72
- @include fill(
73
- $chip-solid-success-selected-text,
74
- $chip-solid-success-selected-bg,
75
- $chip-solid-success-selected-border
76
- );
77
- }
78
- }
79
-
80
-
81
- &.k-chip-warning {
82
- @include fill(
83
- $chip-solid-warning-text,
84
- $chip-solid-warning-bg,
85
- $chip-solid-warning-border
86
- );
87
-
88
- &:hover,
89
- &.k-state-hover,
90
- &.k-hover {
91
- @include fill(
92
- $chip-solid-warning-hover-text,
93
- $chip-solid-warning-hover-bg,
94
- $chip-solid-warning-hover-border
95
- );
96
- }
97
-
98
- &:focus,
99
- &.k-state-focus,
100
- &.k-focus {
101
- @include fill(
102
- $chip-solid-warning-focus-text,
103
- $chip-solid-warning-focus-bg,
104
- $chip-solid-warning-focus-border
105
- );
106
- }
4
+ @each $name, $color in $kendo-chip-theme-colors {
5
+ .k-chip-solid-#{$name} {
107
6
 
108
- &.k-state-selected,
109
- &.k-selected {
7
+ @if ($name == "base") {
110
8
  @include fill(
111
- $chip-solid-warning-selected-text,
112
- $chip-solid-warning-selected-bg,
113
- $chip-solid-warning-selected-border
9
+ $kendo-chip-solid-text,
10
+ $kendo-chip-solid-bg,
11
+ $kendo-chip-solid-border
114
12
  );
115
- }
116
- }
117
13
 
118
- &.k-chip-error {
119
- @include fill(
120
- $chip-solid-error-text,
121
- $chip-solid-error-bg,
122
- $chip-solid-error-border
123
- );
14
+ &:focus,
15
+ &.k-focus {
16
+ @include box-shadow( $kendo-chip-solid-shadow );
17
+ @include fill( $bg: $kendo-chip-solid-focus-bg );
18
+ }
124
19
 
125
- &:hover,
126
- &.k-state-hover,
127
- &.k-hover {
128
- @include fill(
129
- $chip-solid-error-hover-text,
130
- $chip-solid-error-hover-bg,
131
- $chip-solid-error-hover-border
132
- );
133
- }
20
+ &:hover,
21
+ &.k-hover {
22
+ @include fill( $bg: $kendo-chip-solid-hover-bg );
23
+ }
134
24
 
135
- &:focus,
136
- &.k-state-focus,
137
- &.k-focus {
25
+ &.k-selected {
26
+ @include fill( $bg: $kendo-chip-solid-selected-bg );
27
+ }
28
+ } @else {
138
29
  @include fill(
139
- $chip-solid-error-focus-text,
140
- $chip-solid-error-focus-bg,
141
- $chip-solid-error-focus-border
30
+ $color,
31
+ try-tint( $color, 92% ),
32
+ try-tint( $color, 70% )
142
33
  );
143
- }
144
34
 
145
- &.k-state-selected,
146
- &.k-selected {
147
- @include fill(
148
- $chip-solid-error-selected-text,
149
- $chip-solid-error-selected-bg,
150
- $chip-solid-error-selected-border
151
- );
152
- }
153
- }
35
+ &:focus,
36
+ &.k-focus {
37
+ @include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
38
+ @include fill( $bg: try-tint( $color, 92% ) );
39
+ }
154
40
 
155
- &.k-chip-info {
156
- @include fill(
157
- $chip-solid-info-text,
158
- $chip-solid-info-bg,
159
- $chip-solid-info-border
160
- );
41
+ &:hover,
42
+ &.k-hover {
43
+ @include fill( $bg: try-tint($color, 84% ) );
44
+ }
161
45
 
162
- &:hover,
163
- &.k-state-hover,
164
- &.k-hover {
165
- @include fill(
166
- $chip-solid-info-hover-text,
167
- $chip-solid-info-hover-bg,
168
- $chip-solid-info-hover-border
169
- );
170
- }
171
-
172
- &:focus,
173
- &.k-state-focus,
174
- &.k-focus {
175
- @include fill(
176
- $chip-solid-info-focus-text,
177
- $chip-solid-info-focus-bg,
178
- $chip-solid-info-focus-border
179
- );
180
- }
181
-
182
- &.k-state-selected,
183
- &.k-selected {
184
- @include fill(
185
- $chip-solid-info-selected-text,
186
- $chip-solid-info-selected-bg,
187
- $chip-solid-info-selected-border
188
- );
46
+ &.k-selected {
47
+ @include fill( $bg: try-tint( $color, 76% ) );
48
+ }
189
49
  }
190
50
  }
191
51
  }
192
52
 
193
- .k-chip-outline {
194
- @include fill(
195
- $chip-outline-text,
196
- $chip-outline-bg,
197
- $chip-outline-border
198
- );
199
-
200
- &:hover,
201
- &.k-state-hover,
202
- &.k-hover {
203
- @include fill(
204
- $chip-outline-hover-text,
205
- $chip-outline-hover-bg,
206
- $chip-outline-hover-border
207
- );
208
- }
209
53
 
210
- &:focus,
211
- &.k-state-focus,
212
- &.k-focus {
213
- @include box-shadow( $chip-outline-focus-shadow );
214
- @include fill(
215
- $chip-outline-focus-text,
216
- $chip-outline-focus-bg,
217
- $chip-outline-focus-border
218
- );
219
- }
220
-
221
- &.k-state-selected,
222
- &.k-selected {
223
- @include fill(
224
- $color: $chip-outline-selected-text,
225
- $bg: $chip-outline-selected-bg
226
- );
227
- }
228
-
229
- &.k-chip-success {
230
- @include fill(
231
- $chip-outline-success-text,
232
- $chip-outline-success-bg,
233
- $chip-outline-success-border
234
- );
235
-
236
- &:hover,
237
- &.k-state-hover,
238
- &.k-hover {
239
- @include fill(
240
- $chip-outline-success-hover-text,
241
- $chip-outline-success-hover-bg,
242
- $chip-outline-success-hover-border
243
- );
54
+ // Outline
55
+ @each $name, $color in $kendo-chip-theme-colors {
56
+ .k-chip-outline-#{$name} {
57
+ @if ($name == "base") {
58
+ @include fill(
59
+ $kendo-chip-outline-text,
60
+ $kendo-chip-outline-bg,
61
+ $kendo-chip-outline-border
62
+ );
63
+
64
+ &:focus,
65
+ &.k-focus {
66
+ @include box-shadow( $kendo-chip-outline-shadow );
67
+ }
68
+
69
+ &:hover,
70
+ &.k-hover {
71
+ @include fill(
72
+ $color: $kendo-chip-outline-hover-text,
73
+ $bg: $kendo-chip-outline-hover-bg
74
+ );
75
+ }
76
+
77
+ &.k-selected {
78
+ @include fill(
79
+ $color: $kendo-chip-outline-selected-text,
80
+ $bg: $kendo-chip-outline-selected-bg
81
+ );
82
+ }
83
+ } @else {
84
+ @include fill(
85
+ $color,
86
+ $white,
87
+ $color
88
+ );
89
+
90
+ &:focus,
91
+ &.k-focus {
92
+ @include box-shadow( 0 0 0 2px rgba( $color, .16 ) );
93
+ }
94
+
95
+ &:hover,
96
+ &.k-hover {
97
+ @include fill(
98
+ $color: contrast-wcag( $color ),
99
+ $bg: $color
100
+ );
101
+ }
102
+
103
+ &.k-selected {
104
+ @include fill(
105
+ $color: contrast-wcag( $color ),
106
+ $bg: $color
107
+ );
108
+ }
244
109
  }
245
-
246
- &:focus,
247
- &.k-state-focus,
248
- &.k-focus {
249
- @include fill(
250
- $chip-outline-success-focus-text,
251
- $chip-outline-success-focus-bg,
252
- $chip-outline-success-focus-border
253
- );
254
- }
255
-
256
- &.k-state-selected,
257
- &.k-selected {
258
- @include fill(
259
- $chip-outline-success-selected-text,
260
- $chip-outline-success-selected-bg,
261
- $chip-outline-success-selected-border
262
- );
263
- }
264
- }
265
-
266
- &.k-chip-warning {
267
- @include fill(
268
- $chip-outline-warning-text,
269
- $chip-outline-warning-bg,
270
- $chip-outline-warning-border
271
- );
272
-
273
- &:hover,
274
- &.k-state-hover,
275
- &.k-hover {
276
- @include fill(
277
- $chip-outline-warning-hover-text,
278
- $chip-outline-warning-hover-bg,
279
- $chip-outline-warning-hover-border
280
- );
281
- }
282
-
283
- &:focus,
284
- &.k-state-focus,
285
- &.k-focus {
286
- @include fill(
287
- $chip-outline-warning-focus-text,
288
- $chip-outline-warning-focus-bg,
289
- $chip-outline-warning-focus-border
290
- );
291
- }
292
-
293
- &.k-state-selected,
294
- &.k-selected {
295
- @include fill(
296
- $chip-outline-warning-selected-text,
297
- $chip-outline-warning-selected-bg,
298
- $chip-outline-warning-selected-border
299
- );
300
- }
301
- }
302
-
303
-
304
- &.k-chip-error {
305
- @include fill(
306
- $chip-outline-error-text,
307
- $chip-outline-error-bg,
308
- $chip-outline-error-border
309
- );
310
-
311
- &:hover,
312
- &.k-state-hover,
313
- &.k-hover {
314
- @include fill(
315
- $chip-outline-error-hover-text,
316
- $chip-outline-error-hover-bg,
317
- $chip-outline-error-hover-border
318
- );
319
- }
320
-
321
- &:focus,
322
- &.k-state-focus,
323
- &.k-focus {
324
- @include fill(
325
- $chip-outline-error-focus-text,
326
- $chip-outline-error-focus-bg,
327
- $chip-outline-error-focus-border
328
- );
329
- }
330
-
331
- &.k-state-selected,
332
- &.k-selected {
333
- @include fill(
334
- $chip-outline-error-selected-text,
335
- $chip-outline-error-selected-bg,
336
- $chip-outline-error-selected-border
337
- );
338
- }
339
- }
340
-
341
-
342
- &.k-chip-info {
343
- @include fill(
344
- $chip-outline-info-text,
345
- $chip-outline-info-bg,
346
- $chip-outline-info-border
347
- );
348
-
349
- &:hover,
350
- &.k-state-hover,
351
- &.k-hover {
352
- @include fill(
353
- $chip-outline-info-hover-text,
354
- $chip-outline-info-hover-bg,
355
- $chip-outline-info-hover-border
356
- );
357
- }
358
-
359
- &:focus,
360
- &.k-state-focus,
361
- &.k-focus {
362
- @include fill(
363
- $chip-outline-info-focus-text,
364
- $chip-outline-info-focus-bg,
365
- $chip-outline-info-focus-border
366
- );
367
- }
368
-
369
- &.k-state-selected,
370
- &.k-selected {
371
- @include fill(
372
- $chip-outline-info-selected-text,
373
- $chip-outline-info-selected-bg,
374
- $chip-outline-info-selected-border
375
- );
376
- }
377
- }
378
- }
379
-
380
-
381
- // Chip colors
382
- .k-chip-info {
383
- &:focus,
384
- &.k-state-focus,
385
- &.k-focus {
386
- @include box-shadow( $chip-info-focus-shadow );
387
- }
388
- }
389
- .k-chip-success {
390
- &:focus,
391
- &.k-state-focus,
392
- &.k-focus {
393
- @include box-shadow( $chip-success-focus-shadow );
394
- }
395
- }
396
- .k-chip-warning {
397
- &:focus,
398
- &.k-state-focus,
399
- &.k-focus {
400
- @include box-shadow( $chip-warning-focus-shadow );
401
- }
402
- }
403
- .k-chip-error {
404
- &:focus,
405
- &.k-state-focus,
406
- &.k-focus {
407
- @include box-shadow( $chip-error-focus-shadow );
408
110
  }
409
111
  }
410
112