@progress/kendo-theme-default 4.41.3-dev.1 → 4.41.3-dev.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 (12) hide show
  1. package/dist/all.css +414 -91
  2. package/dist/all.scss +502 -191
  3. package/package.json +2 -2
  4. package/scss/chip/_layout.scss +9 -15
  5. package/scss/chip/_theme.scss +302 -85
  6. package/scss/chip/_variables.scss +139 -50
  7. package/scss/core/mixins/_index.scss +1 -1
  8. package/scss/scheduler/_layout.scss +3 -0
  9. package/scss/styling/_index.scss +1 -1
  10. package/scss/utils/_border.scss +11 -2
  11. package/scss/utils/_index.scss +1 -0
  12. package/scss/{common/_decoration.scss → utils/_theme-colors.scss} +15 -19
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-default",
3
3
  "description": "SASS resources for the default Kendo UI theme",
4
- "version": "4.41.3-dev.1",
4
+ "version": "4.41.3-dev.2",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -47,5 +47,5 @@
47
47
  "dart:flat": "gulp dart:flat",
48
48
  "prepublishOnly": "echo 'no prebublish for default theme'"
49
49
  },
50
- "gitHead": "17e8e18bbe2c47b1f86efebea9b2b2d3f4cd55ce"
50
+ "gitHead": "dac8c87fd7d383c2f551aad1075492fe8422b173"
51
51
  }
package/scss/chip/_layout.scss CHANGED
@@ -35,11 +35,9 @@
35
35
  font-size: $chip-selected-icon-font-size;
36
36
  }
37
37
 
38
- .k-chip-selected {
39
- .k-selected-icon-wrapper {
40
- width: $chip-selected-icon-size;
41
- visibility: visible;
42
- }
38
+ .k-chip.k-selected .k-selected-icon-wrapper {
39
+ width: $chip-selected-icon-size;
40
+ visibility: visible;
43
41
  }
44
42
 
45
43
  > .k-chip-has-icon {
@@ -56,10 +54,8 @@
56
54
  transition: width .2s, opacity .2s;
57
55
  }
58
56
 
59
- &.k-chip-selected {
60
- .k-selected-icon-wrapper {
61
- opacity: 1;
62
- }
57
+ &.k-selected .k-selected-icon-wrapper {
58
+ opacity: 1;
63
59
  }
64
60
  }
65
61
  }
@@ -84,10 +80,6 @@
84
80
  &.k-chip-focus {
85
81
  outline: 0;
86
82
  }
87
-
88
- &.k-chip-disabled {
89
- @include disabled( $disabled-styling );
90
- }
91
83
  }
92
84
 
93
85
  .k-chip-content {
@@ -133,7 +125,8 @@
133
125
 
134
126
  .k-chip-list {
135
127
  &[dir="rtl"],
136
- .k-rtl & {
128
+ .k-rtl &,
129
+ &.k-rtl {
137
130
  > * {
138
131
  margin-right: 0;
139
132
  margin-left: $chips-margin;
@@ -147,7 +140,8 @@
147
140
 
148
141
  .k-chip {
149
142
  &[dir="rtl"],
150
- .k-rtl & {
143
+ .k-rtl &,
144
+ &.k-rtl {
151
145
  .k-chip-icon {
152
146
  margin-left: 0;
153
147
  margin-right: $chip-icon-margin;
package/scss/chip/_theme.scss CHANGED
@@ -1,90 +1,191 @@
1
1
  @include exports("chip/theme") {
2
2
 
3
- .k-selection-single {
4
- .k-chip-selected {
5
- &.k-chip-filled {
6
- @include fill(
7
- $chip-filled-single-selected-text,
8
- $chip-filled-single-selected-bg,
9
- $chip-filled-single-selected-border
10
- );
11
- }
12
-
13
- &.k-chip-outline {
14
- @include fill(
15
- $chip-outline-single-selected-text,
16
- $chip-outline-single-selected-bg,
17
- $chip-outline-single-selected-border
18
- );
19
- }
20
- }
21
- }
22
-
23
- .k-selection-multiple {
24
- > .k-chip-has-icon {
25
- &.k-chip-selected {
26
- .k-selected-icon-wrapper {
27
- color: $chip-multiple-selected-icon-text;
28
- background-color: $chip-multiple-selected-icon-bg;
29
- }
30
- }
31
- }
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
+ );
32
8
  }
33
9
 
34
- .k-chip-filled {
10
+ // Solid
11
+ .k-chip-solid {
35
12
  @include fill(
36
- $chip-filled-text,
37
- $chip-filled-bg,
38
- $chip-filled-border
13
+ $chip-solid-text,
14
+ $chip-solid-bg,
15
+ $chip-solid-border
39
16
  );
40
17
 
41
18
  &:hover,
42
- &.k-chip-hover {
43
- background-color: $chip-filled-hovered-bg;
44
- border-color: $chip-filled-hovered-border;
19
+ &.k-state-hover,
20
+ &.k-hover {
21
+ @include fill(
22
+ $bg: $chip-solid-hover-bg,
23
+ $border: $chip-solid-hover-border
24
+ );
45
25
  }
46
26
 
47
27
  &:focus,
48
- &.k-chip-focused {
49
- background-color: $chip-filled-focused-bg;
50
- box-shadow: $chip-filled-focused-shadow;
28
+ &.k-state-focus,
29
+ &.k-focus {
30
+ @include box-shadow( $chip-solid-focus-shadow );
31
+ @include fill( $bg: $chip-solid-focus-bg );
51
32
  }
52
33
 
53
- &.k-chip-selected {
54
- background-color: $chip-filled-selected-bg;
55
- border-color: $chip-filled-selected-border;
34
+ &.k-state-selected,
35
+ &.k-selected {
36
+ @include fill(
37
+ $bg: $chip-solid-selected-bg,
38
+ $border: $chip-solid-selected-border
39
+ );
56
40
  }
57
41
 
58
42
  &.k-chip-success {
59
43
  @include fill(
60
- $chip-filled-success-text,
61
- $chip-filled-success-bg,
62
- $chip-filled-success-border
44
+ $chip-solid-success-text,
45
+ $chip-solid-success-bg,
46
+ $chip-solid-success-border
63
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
+ }
64
77
  }
65
78
 
79
+
66
80
  &.k-chip-warning {
67
81
  @include fill(
68
- $chip-filled-warning-text,
69
- $chip-filled-warning-bg,
70
- $chip-filled-warning-border
82
+ $chip-solid-warning-text,
83
+ $chip-solid-warning-bg,
84
+ $chip-solid-warning-border
71
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
+ }
106
+
107
+ &.k-state-selected,
108
+ &.k-selected {
109
+ @include fill(
110
+ $chip-solid-warning-selected-text,
111
+ $chip-solid-warning-selected-bg,
112
+ $chip-solid-warning-selected-border
113
+ );
114
+ }
72
115
  }
73
116
 
74
117
  &.k-chip-error {
75
118
  @include fill(
76
- $chip-filled-error-text,
77
- $chip-filled-error-bg,
78
- $chip-filled-error-border
119
+ $chip-solid-error-text,
120
+ $chip-solid-error-bg,
121
+ $chip-solid-error-border
79
122
  );
123
+
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
+ }
133
+
134
+ &:focus,
135
+ &.k-state-focus,
136
+ &.k-focus {
137
+ @include fill(
138
+ $chip-solid-error-focus-text,
139
+ $chip-solid-error-focus-bg,
140
+ $chip-solid-error-focus-border
141
+ );
142
+ }
143
+
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
+ }
80
152
  }
81
153
 
82
154
  &.k-chip-info {
83
155
  @include fill(
84
- $chip-filled-info-text,
85
- $chip-filled-info-bg,
86
- $chip-filled-info-border
156
+ $chip-solid-info-text,
157
+ $chip-solid-info-bg,
158
+ $chip-solid-info-border
87
159
  );
160
+
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
+ );
188
+ }
88
189
  }
89
190
  }
90
191
 
@@ -96,27 +197,32 @@
96
197
  );
97
198
 
98
199
  &:hover,
99
- &.k-chip-hover {
200
+ &.k-state-hover,
201
+ &.k-hover {
100
202
  @include fill(
101
- $chip-outline-hovered-text,
102
- $chip-outline-hovered-bg,
103
- $chip-outline-hovered-border
203
+ $chip-outline-hover-text,
204
+ $chip-outline-hover-bg,
205
+ $chip-outline-hover-border
104
206
  );
105
207
  }
106
208
 
107
209
  &:focus,
108
- &.k-chip-focused {
210
+ &.k-state-focus,
211
+ &.k-focus {
212
+ @include box-shadow( $chip-outline-focus-shadow );
109
213
  @include fill(
110
- $chip-outline-focused-text,
111
- $chip-outline-focused-bg,
112
- $chip-outline-focused-border
214
+ $chip-outline-focus-text,
215
+ $chip-outline-focus-bg,
216
+ $chip-outline-focus-border
113
217
  );
114
- box-shadow: $chip-outline-focused-shadow;
115
218
  }
116
219
 
117
- &.k-chip-selected {
118
- color: $chip-outline-selected-text;
119
- background-color: $chip-outline-selected-bg;
220
+ &.k-state-selected,
221
+ &.k-selected {
222
+ @include fill(
223
+ $color: $chip-outline-selected-text,
224
+ $bg: $chip-outline-selected-bg
225
+ );
120
226
  }
121
227
 
122
228
  &.k-chip-success {
@@ -125,6 +231,35 @@
125
231
  $chip-outline-success-bg,
126
232
  $chip-outline-success-border
127
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
+ }
128
263
  }
129
264
 
130
265
  &.k-chip-warning {
@@ -133,60 +268,142 @@
133
268
  $chip-outline-warning-bg,
134
269
  $chip-outline-warning-border
135
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
+ }
136
300
  }
137
301
 
302
+
138
303
  &.k-chip-error {
139
304
  @include fill(
140
305
  $chip-outline-error-text,
141
306
  $chip-outline-error-bg,
142
307
  $chip-outline-error-border
143
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
+ }
144
338
  }
145
339
 
340
+
146
341
  &.k-chip-info {
147
342
  @include fill(
148
343
  $chip-outline-info-text,
149
344
  $chip-outline-info-bg,
150
345
  $chip-outline-info-border
151
346
  );
152
- }
153
- }
154
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
+ );
356
+ }
155
357
 
156
- // Chip colors
157
- .k-chip-primary {
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
+ }
158
367
 
159
- &:focus,
160
- &.k-chip-focus {
161
- box-shadow: $chip-primary-focus-shadow;
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
+ }
162
376
  }
163
377
  }
164
- .k-chip-info {
165
378
 
379
+
380
+ // Chip colors
381
+ .k-chip-info {
166
382
  &:focus,
167
- &.k-chip-focus {
168
- box-shadow: $chip-info-focus-shadow;
383
+ &.k-state-focus,
384
+ &.k-focus {
385
+ @include box-shadow( $chip-info-focus-shadow );
169
386
  }
170
387
  }
171
388
  .k-chip-success {
172
-
173
389
  &:focus,
174
- &.k-chip-focus {
175
- box-shadow: $chip-success-focus-shadow;
390
+ &.k-state-focus,
391
+ &.k-focus {
392
+ @include box-shadow( $chip-success-focus-shadow );
176
393
  }
177
394
  }
178
395
  .k-chip-warning {
179
-
180
396
  &:focus,
181
- &.k-chip-focus {
182
- box-shadow: $chip-warning-focus-shadow;
397
+ &.k-state-focus,
398
+ &.k-focus {
399
+ @include box-shadow( $chip-warning-focus-shadow );
183
400
  }
184
401
  }
185
402
  .k-chip-error {
186
-
187
403
  &:focus,
188
- &.k-chip-focus {
189
- box-shadow: $chip-error-focus-shadow;
404
+ &.k-state-focus,
405
+ &.k-focus {
406
+ @include box-shadow( $chip-error-focus-shadow );
190
407
  }
191
408
  }
192
409