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

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 (177) hide show
  1. package/README.md +5 -8
  2. package/dist/all.css +5698 -7009
  3. package/dist/all.scss +9311 -8857
  4. package/package.json +2 -2
  5. package/scss/_layout.scss +0 -0
  6. package/scss/_variables.scss +0 -19
  7. package/scss/action-buttons/_layout.scss +1 -0
  8. package/scss/adaptive/_layout.scss +7 -22
  9. package/scss/appbar/_layout.scss +19 -3
  10. package/scss/autocomplete/_index.scss +1 -0
  11. package/scss/autocomplete/_variables.scss +0 -5
  12. package/scss/avatar/_layout.scss +13 -17
  13. package/scss/avatar/_theme.scss +4 -4
  14. package/scss/avatar/_variables.scss +18 -8
  15. package/scss/avatar/index.md +0 -0
  16. package/scss/button/_index.scss +2 -0
  17. package/scss/button/_layout.scss +24 -88
  18. package/scss/button/_variables.scss +7 -5
  19. package/scss/calendar/_index.scss +1 -0
  20. package/scss/card/_variables.scss +4 -4
  21. package/scss/chat/_layout.scss +4 -8
  22. package/scss/chat/_theme.scss +0 -18
  23. package/scss/chat/_variables.scss +0 -10
  24. package/scss/checkbox/_index.scss +2 -0
  25. package/scss/checkbox/_layout.scss +44 -27
  26. package/scss/checkbox/_variables.scss +3 -9
  27. package/scss/checkbox/index.md +0 -0
  28. package/scss/chip/_index.scss +1 -0
  29. package/scss/chip/_layout.scss +124 -131
  30. package/scss/chip/_theme.scss +90 -388
  31. package/scss/chip/_variables.scss +127 -191
  32. package/scss/chip/index.md +0 -0
  33. package/scss/color-preview/_layout.scss +45 -8
  34. package/scss/color-preview/_theme.scss +1 -15
  35. package/scss/color-preview/_variables.scss +1 -0
  36. package/scss/coloreditor/_layout.scss +5 -1
  37. package/scss/coloreditor/_variables.scss +3 -3
  38. package/scss/colorgradient/_layout.scss +7 -0
  39. package/scss/colorpicker/_index.scss +1 -2
  40. package/scss/colorpicker/_layout.scss +1 -1
  41. package/scss/colorpicker/_theme.scss +1 -1
  42. package/scss/colorpicker/_variables.scss +1 -22
  43. package/scss/combobox/_index.scss +1 -0
  44. package/scss/combobox/_layout.scss +1 -1
  45. package/scss/combobox/_theme.scss +1 -1
  46. package/scss/combobox/_variables.scss +1 -33
  47. package/scss/core/functions/_colors.scss +4 -1
  48. package/scss/dataviz/_index.scss +1 -0
  49. package/scss/dateinput/_index.scss +0 -4
  50. package/scss/dateinput/_variables.scss +1 -1
  51. package/scss/datepicker/_index.scss +1 -3
  52. package/scss/daterangepicker/_layout.scss +16 -1
  53. package/scss/datetimepicker/_index.scss +5 -3
  54. package/scss/datetimepicker/_layout.scss +40 -3
  55. package/scss/datetimepicker/_theme.scss +2 -2
  56. package/scss/datetimepicker/_variables.scss +2 -1
  57. package/scss/drawer/_index.scss +1 -0
  58. package/scss/drawer/_variables.scss +1 -1
  59. package/scss/dropdowngrid/_layout.scss +5 -4
  60. package/scss/dropdowngrid/_theme.scss +6 -2
  61. package/scss/dropdowngrid/index.md +0 -0
  62. package/scss/dropdownlist/_index.scss +1 -0
  63. package/scss/dropdownlist/_layout.scss +11 -0
  64. package/scss/editor/_layout.scss +23 -51
  65. package/scss/editor/_variables.scss +1 -1
  66. package/scss/expansion-panel/_index.scss +1 -0
  67. package/scss/expansion-panel/_variables.scss +2 -2
  68. package/scss/fab/_layout.scss +24 -58
  69. package/scss/fab/_theme.scss +43 -48
  70. package/scss/fab/_variables.scss +129 -72
  71. package/scss/fab/index.md +0 -0
  72. package/scss/filter/_index.scss +1 -1
  73. package/scss/filter/_layout.scss +9 -2
  74. package/scss/filter/_theme.scss +3 -1
  75. package/scss/forms/_index.scss +1 -1
  76. package/scss/forms/_layout.scss +12 -79
  77. package/scss/gantt/_index.scss +1 -1
  78. package/scss/gantt/_layout.scss +5 -3
  79. package/scss/grid/_index.scss +2 -1
  80. package/scss/grid/_layout.scss +106 -132
  81. package/scss/grid/_theme.scss +12 -12
  82. package/scss/grid/_variables.scss +10 -10
  83. package/scss/icons/_layout.scss +6 -0
  84. package/scss/icons/font/WebComponentsIcons.scss +1 -1
  85. package/scss/icons/font/WebComponentsIcons.ttf +0 -0
  86. package/scss/imageeditor/_layout.scss +4 -8
  87. package/scss/imageeditor/_variables.scss +1 -0
  88. package/scss/index.scss +4 -3
  89. package/scss/input/_index.scss +1 -1
  90. package/scss/input/_layout.scss +168 -17
  91. package/scss/input/_theme.scss +13 -2
  92. package/scss/input/_variables.scss +45 -44
  93. package/scss/list/_index.scss +12 -0
  94. package/scss/list/_layout.scss +227 -0
  95. package/scss/list/_theme.scss +91 -0
  96. package/scss/list/_variables.scss +248 -0
  97. package/scss/list/index.md +0 -0
  98. package/scss/listbox/_index.scss +2 -0
  99. package/scss/listbox/_variables.scss +1 -1
  100. package/scss/listview/_layout.scss +2 -9
  101. package/scss/map/_layout.scss +17 -0
  102. package/scss/maskedtextbox/_layout.scss +1 -1
  103. package/scss/maskedtextbox/_theme.scss +1 -1
  104. package/scss/mediaplayer/_layout.scss +5 -0
  105. package/scss/menu/_index.scss +2 -0
  106. package/scss/menu/_layout.scss +123 -63
  107. package/scss/menu/_theme.scss +27 -24
  108. package/scss/menu/_variables.scss +126 -35
  109. package/scss/multiselect/_index.scss +2 -0
  110. package/scss/multiselect/_layout.scss +3 -180
  111. package/scss/multiselect/_theme.scss +3 -139
  112. package/scss/multiselect/_variables.scss +0 -36
  113. package/scss/numerictextbox/_layout.scss +12 -2
  114. package/scss/numerictextbox/_theme.scss +1 -1
  115. package/scss/orgchart/_variables.scss +2 -2
  116. package/scss/pager/_index.scss +1 -0
  117. package/scss/pager/_theme.scss +4 -4
  118. package/scss/pager/_variables.scss +6 -6
  119. package/scss/panelbar/_index.scss +1 -0
  120. package/scss/panelbar/_theme.scss +9 -2
  121. package/scss/panelbar/_variables.scss +6 -2
  122. package/scss/pdf-viewer/_layout.scss +23 -16
  123. package/scss/pdf-viewer/_variables.scss +2 -5
  124. package/scss/pivotgrid/_index.scss +1 -0
  125. package/scss/pivotgrid/_layout.scss +1 -45
  126. package/scss/pivotgrid/_theme.scss +1 -2
  127. package/scss/pivotgrid/_variables.scss +1 -4
  128. package/scss/popover/_layout.scss +0 -1
  129. package/scss/popup/_index.scss +0 -4
  130. package/scss/popup/_layout.scss +2 -242
  131. package/scss/popup/_theme.scss +2 -159
  132. package/scss/popup/_variables.scss +2 -7
  133. package/scss/radio/_index.scss +2 -0
  134. package/scss/radio/_layout.scss +43 -27
  135. package/scss/radio/_variables.scss +3 -9
  136. package/scss/radio/index.md +0 -0
  137. package/scss/scheduler/_index.scss +1 -1
  138. package/scss/scheduler/_layout.scss +1 -1
  139. package/scss/scrollview/_layout.scss +6 -1
  140. package/scss/slider/_layout.scss +2 -0
  141. package/scss/spreadsheet/_index.scss +2 -1
  142. package/scss/spreadsheet/_layout.scss +32 -25
  143. package/scss/spreadsheet/_theme.scss +6 -6
  144. package/scss/switch/_layout.scss +4 -2
  145. package/scss/switch/index.md +0 -0
  146. package/scss/{datetime → table}/_index.scss +5 -2
  147. package/scss/table/_layout.scss +275 -0
  148. package/scss/table/_theme.scss +82 -0
  149. package/scss/table/_variables.scss +141 -0
  150. package/scss/tabstrip/_index.scss +1 -0
  151. package/scss/tabstrip/_layout.scss +11 -1
  152. package/scss/tabstrip/_theme.scss +1 -0
  153. package/scss/tabstrip/_variables.scss +3 -3
  154. package/scss/taskboard/_layout.scss +2 -1
  155. package/scss/taskboard/_variables.scss +0 -2
  156. package/scss/timepicker/_index.scss +3 -3
  157. package/scss/timepicker/_variables.scss +1 -1
  158. package/scss/timeselector/_index.scss +13 -0
  159. package/scss/timeselector/_layout.scss +207 -0
  160. package/scss/{datetime → timeselector}/_theme.scss +21 -21
  161. package/scss/timeselector/_variables.scss +32 -0
  162. package/scss/toolbar/_layout.scss +29 -2
  163. package/scss/toolbar/_theme.scss +35 -7
  164. package/scss/toolbar/_variables.scss +2 -0
  165. package/scss/treeview/_layout.scss +128 -117
  166. package/scss/treeview/_theme.scss +51 -43
  167. package/scss/treeview/_variables.scss +126 -46
  168. package/scss/typography/_variables.scss +3 -3
  169. package/scss/utils/_border.scss +1 -2
  170. package/scss/utils/_flex.scss +11 -3
  171. package/scss/virtual-scroller/_index.scss +10 -0
  172. package/scss/virtual-scroller/_layout.scss +35 -0
  173. package/scss/virtual-scroller/_theme.scss +3 -0
  174. package/scss/virtual-scroller/_variables.scss +1 -0
  175. package/scss/window/_variables.scss +1 -1
  176. package/scss/datetime/_layout.scss +0 -222
  177. package/scss/datetime/_variables.scss +0 -53
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