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