@progress/kendo-theme-core 12.3.1-dev.8 → 13.0.0-dev.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 (99) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/meta/sassdoc-data.json +2911 -446
  3. package/dist/meta/sassdoc-raw-data.json +1143 -2
  4. package/package.json +2 -2
  5. package/scss/border-radii/index.scss +0 -8
  6. package/scss/components/action-sheet/_layout.scss +1 -1
  7. package/scss/components/appbar/_theme.scss +20 -18
  8. package/scss/components/appbar/_variables.scss +4 -1
  9. package/scss/components/avatar/_layout.scss +22 -9
  10. package/scss/components/avatar/_theme.scss +36 -14
  11. package/scss/components/avatar/_variables.scss +23 -2
  12. package/scss/components/badge/_layout.scss +33 -22
  13. package/scss/components/badge/_theme.scss +36 -16
  14. package/scss/components/badge/_variables.scss +36 -3
  15. package/scss/components/bottom-navigation/_theme.scss +45 -40
  16. package/scss/components/bottom-navigation/_variables.scss +6 -1
  17. package/scss/components/breadcrumb/_layout.scss +29 -27
  18. package/scss/components/breadcrumb/_variables.scss +30 -1
  19. package/scss/components/button/_layout.scss +110 -123
  20. package/scss/components/button/_theme.scss +298 -242
  21. package/scss/components/button/_variables.scss +34 -4
  22. package/scss/components/calendar/_layout.scss +44 -46
  23. package/scss/components/calendar/_variables.scss +27 -1
  24. package/scss/components/card/_theme.scss +16 -15
  25. package/scss/components/card/_variables.scss +5 -1
  26. package/scss/components/checkbox/_layout.scss +35 -20
  27. package/scss/components/checkbox/_variables.scss +23 -2
  28. package/scss/components/chip/_layout.scss +42 -34
  29. package/scss/components/chip/_theme.scss +125 -113
  30. package/scss/components/chip/_variables.scss +46 -2
  31. package/scss/components/coloreditor/_layout.scss +37 -36
  32. package/scss/components/coloreditor/_variables.scss +37 -1
  33. package/scss/components/colorgradient/_layout.scss +47 -46
  34. package/scss/components/colorgradient/_variables.scss +36 -1
  35. package/scss/components/colorpalette/_layout.scss +15 -13
  36. package/scss/components/colorpalette/_variables.scss +18 -1
  37. package/scss/components/column-menu/_layout.scss +31 -20
  38. package/scss/components/column-menu/_variables.scss +7 -3
  39. package/scss/components/datetimepicker/_layout.scss +11 -7
  40. package/scss/components/datetimepicker/_variables.scss +16 -1
  41. package/scss/components/dialog/_theme.scss +12 -9
  42. package/scss/components/dialog/_variables.scss +5 -1
  43. package/scss/components/fab/_layout.scss +22 -12
  44. package/scss/components/fab/_theme.scss +79 -73
  45. package/scss/components/fab/_variables.scss +29 -4
  46. package/scss/components/forms/_layout.scss +8 -4
  47. package/scss/components/forms/_variables.scss +15 -1
  48. package/scss/components/gantt/_layout.scss +1 -1
  49. package/scss/components/grid/_layout.scss +112 -105
  50. package/scss/components/grid/_variables.scss +43 -4
  51. package/scss/components/icons/_layout.scss +2 -1
  52. package/scss/components/icons/_variables.scss +1 -0
  53. package/scss/components/input/_layout.scss +162 -94
  54. package/scss/components/input/_theme.scss +431 -418
  55. package/scss/components/input/_variables.scss +40 -1
  56. package/scss/components/list/_layout.scss +68 -66
  57. package/scss/components/list/_variables.scss +72 -1
  58. package/scss/components/loader/_layout.scss +75 -61
  59. package/scss/components/loader/_theme.scss +10 -10
  60. package/scss/components/loader/_variables.scss +7 -1
  61. package/scss/components/menu/_layout.scss +36 -70
  62. package/scss/components/menu/_variables.scss +34 -0
  63. package/scss/components/messagebox/_theme.scss +17 -14
  64. package/scss/components/messagebox/_variables.scss +6 -1
  65. package/scss/components/notification/_theme.scss +10 -8
  66. package/scss/components/notification/_variables.scss +3 -16
  67. package/scss/components/otp/_layout.scss +16 -13
  68. package/scss/components/otp/_variables.scss +19 -1
  69. package/scss/components/overlay/_theme.scss +12 -4
  70. package/scss/components/overlay/_variables.scss +5 -1
  71. package/scss/components/pager/_layout.scss +32 -26
  72. package/scss/components/pager/_variables.scss +24 -1
  73. package/scss/components/radio/_layout.scss +27 -18
  74. package/scss/components/radio/_variables.scss +21 -1
  75. package/scss/components/scheduler/_layout.scss +0 -1
  76. package/scss/components/signature/_layout.scss +26 -21
  77. package/scss/components/signature/_variables.scss +19 -1
  78. package/scss/components/split-button/_layout.scss +8 -2
  79. package/scss/components/suggestion/_theme.scss +34 -60
  80. package/scss/components/suggestion/_variables.scss +5 -12
  81. package/scss/components/switch/_layout.scss +60 -41
  82. package/scss/components/switch/_variables.scss +38 -1
  83. package/scss/components/table/_layout.scss +31 -26
  84. package/scss/components/table/_variables.scss +24 -1
  85. package/scss/components/tabstrip/_layout.scss +27 -23
  86. package/scss/components/tabstrip/_variables.scss +23 -1
  87. package/scss/components/timeselector/_layout.scss +34 -34
  88. package/scss/components/timeselector/_variables.scss +24 -1
  89. package/scss/components/toolbar/_layout.scss +63 -65
  90. package/scss/components/toolbar/_theme.scss +80 -70
  91. package/scss/components/toolbar/_variables.scss +25 -1
  92. package/scss/components/tooltip/_variables.scss +0 -14
  93. package/scss/components/treeview/_layout.scss +29 -26
  94. package/scss/components/treeview/_variables.scss +30 -1
  95. package/scss/components/window/_layout.scss +8 -12
  96. package/scss/components/window/_theme.scss +12 -8
  97. package/scss/components/window/_variables.scss +15 -3
  98. package/scss/functions/_default.scss +16 -0
  99. package/scss/functions/index.scss +1 -0
package/scss/components/input/_theme.scss CHANGED
@@ -1,519 +1,532 @@
1
1
  @use "../../mixins/index.scss" as *;
2
2
  @use "../../color-system/_functions.scss" as *;
3
+ @use "../../functions/index.scss" as *;
3
4
  @use "./_variables.scss" as *;
4
5
 
5
6
  @mixin kendo-input--theme-base() {
6
7
 
7
- // Solid input
8
- .k-input-solid {
9
- @include fill(
10
- $kendo-input-text,
11
- $kendo-input-bg,
12
- $kendo-input-border
13
- );
14
- @include box-shadow( $kendo-input-shadow );
15
-
16
- // Hover
17
- &:hover,
18
- &.k-hover {
8
+ .k-input {
9
+ // Solid input
10
+ #{k-when-default($kendo-input-default-fill-mode, "solid")}
11
+ &.k-input-solid {
19
12
  @include fill(
20
- $kendo-input-hover-text,
21
- $kendo-input-hover-bg,
22
- $kendo-input-hover-border
13
+ $kendo-input-text,
14
+ $kendo-input-bg,
15
+ $kendo-input-border
23
16
  );
24
- @include box-shadow( $kendo-input-hover-shadow );
25
- }
26
-
27
- // Focus
28
- &:focus,
29
- &.k-focus {
30
- @include fill (
31
- $kendo-input-focus-text,
32
- $kendo-input-focus-bg,
33
- $kendo-input-focus-border
34
- );
35
- @include focus-indicator( $kendo-input-focus-shadow );
36
- }
37
- &:focus-within {
38
- @include fill (
39
- $kendo-input-focus-text,
40
- $kendo-input-focus-bg,
41
- $kendo-input-focus-border
42
- );
43
- @include focus-indicator( $kendo-input-focus-shadow );
44
- }
45
-
46
- // Disabled
47
- &:disabled,
48
- &[disabled],
49
- &.k-disabled {
50
- @include fill(
51
- $kendo-input-disabled-text,
52
- $kendo-input-disabled-bg,
53
- $kendo-input-disabled-border,
54
- $kendo-input-disabled-gradient
55
- );
56
- @include box-shadow( $kendo-input-disabled-shadow );
57
- }
58
-
59
- // Invalid
60
- &.k-invalid,
61
- &.ng-invalid.ng-touched,
62
- &.ng-invalid.ng-dirty {
63
- @include fill( $border: $kendo-input-invalid-border );
64
-
65
- .k-input-validation-icon {
66
- color: k-color(error);
17
+ @include box-shadow( $kendo-input-shadow );
18
+
19
+ // Hover
20
+ &:hover,
21
+ &.k-hover {
22
+ @include fill(
23
+ $kendo-input-hover-text,
24
+ $kendo-input-hover-bg,
25
+ $kendo-input-hover-border
26
+ );
27
+ @include box-shadow( $kendo-input-hover-shadow );
67
28
  }
68
29
 
30
+ // Focus
69
31
  &:focus,
70
32
  &.k-focus {
71
- @include focus-indicator( $kendo-input-invalid-shadow );
33
+ @include fill (
34
+ $kendo-input-focus-text,
35
+ $kendo-input-focus-bg,
36
+ $kendo-input-focus-border
37
+ );
38
+ @include focus-indicator( $kendo-input-focus-shadow );
72
39
  }
73
40
  &:focus-within {
74
- @include focus-indicator( $kendo-input-invalid-shadow );
41
+ @include fill (
42
+ $kendo-input-focus-text,
43
+ $kendo-input-focus-bg,
44
+ $kendo-input-focus-border
45
+ );
46
+ @include focus-indicator( $kendo-input-focus-shadow );
75
47
  }
76
- }
77
-
78
- // Prefix & Suffix
79
- .k-input-prefix {
80
- @include fill(
81
- $kendo-input-prefix-text,
82
- $kendo-input-prefix-bg,
83
- );
84
- }
85
48
 
86
- .k-input-suffix {
87
- @include fill(
88
- $kendo-input-suffix-text,
89
- $kendo-input-suffix-bg,
90
- );
91
- }
49
+ // Disabled
50
+ &:disabled,
51
+ &[disabled],
52
+ &.k-disabled {
53
+ @include fill(
54
+ $kendo-input-disabled-text,
55
+ $kendo-input-disabled-bg,
56
+ $kendo-input-disabled-border,
57
+ $kendo-input-disabled-gradient
58
+ );
59
+ @include box-shadow( $kendo-input-disabled-shadow );
60
+ }
92
61
 
93
- .k-input-separator {
94
- border-color: $kendo-input-separator-text;
95
- }
96
- }
62
+ // Invalid
63
+ &.k-invalid,
64
+ &.ng-invalid.ng-touched,
65
+ &.ng-invalid.ng-dirty {
66
+ @include fill( $border: $kendo-input-invalid-border );
67
+
68
+ .k-input-validation-icon {
69
+ color: k-color(error);
70
+ }
71
+
72
+ &:focus,
73
+ &.k-focus {
74
+ @include focus-indicator( $kendo-input-invalid-shadow );
75
+ }
76
+ &:focus-within {
77
+ @include focus-indicator( $kendo-input-invalid-shadow );
78
+ }
79
+ }
97
80
 
81
+ // Prefix & Suffix
82
+ .k-input-prefix {
83
+ @include fill(
84
+ $kendo-input-prefix-text,
85
+ $kendo-input-prefix-bg,
86
+ );
87
+ }
98
88
 
99
- // Solid picker
100
- .k-picker-solid {
101
- @include fill(
102
- $kendo-picker-text,
103
- $kendo-picker-bg,
104
- $kendo-picker-border,
105
- $kendo-picker-gradient
106
- );
89
+ .k-input-suffix {
90
+ @include fill(
91
+ $kendo-input-suffix-text,
92
+ $kendo-input-suffix-bg,
93
+ );
94
+ }
107
95
 
108
- // Hover
109
- &:hover,
110
- &.k-hover {
111
- @include fill(
112
- $kendo-picker-hover-text,
113
- $kendo-picker-hover-bg,
114
- $kendo-picker-hover-border,
115
- $kendo-picker-hover-gradient
116
- );
117
- @include box-shadow( $kendo-picker-hover-shadow );
96
+ .k-input-separator {
97
+ border-color: $kendo-input-separator-text;
98
+ }
118
99
  }
119
100
 
120
- // Focus
121
- &:focus,
122
- &.k-focus {
123
- @include fill (
124
- $kendo-picker-focus-text,
125
- $kendo-picker-focus-bg,
126
- $kendo-picker-focus-border,
127
- $kendo-picker-focus-gradient
128
- );
129
- @include focus-indicator( $kendo-picker-focus-shadow );
130
- }
131
- &:focus-within {
101
+ // Outline input
102
+ #{k-when-default($kendo-input-default-fill-mode, "outline")}
103
+ &.k-input-outline {
104
+ background: none !important; // stylelint-disable-line declaration-no-important
105
+
132
106
  @include fill (
133
- $kendo-picker-focus-text,
134
- $kendo-picker-focus-bg,
135
- $kendo-picker-focus-border,
136
- $kendo-picker-focus-gradient
107
+ $kendo-input-outline-text,
108
+ $kendo-input-outline-bg,
109
+ $kendo-input-outline-border
137
110
  );
138
- @include focus-indicator( $kendo-picker-focus-shadow );
139
- }
140
111
 
141
- // Disabled
142
- &:disabled,
143
- &[disabled],
144
- &.k-disabled {
145
- @include fill(
146
- $kendo-picker-disabled-text,
147
- $kendo-picker-disabled-bg,
148
- $kendo-picker-disabled-border,
149
- $kendo-picker-disabled-gradient
150
- );
151
- @include box-shadow( $kendo-picker-disabled-shadow );
152
- }
112
+ & > .k-input-button {
113
+ border-color: inherit;
114
+ }
153
115
 
154
- // Invalid
155
- &.k-invalid,
156
- &.ng-invalid.ng-touched,
157
- &.ng-invalid.ng-dirty {
158
- @include fill( $border: $kendo-input-invalid-border );
116
+ & > .k-input-spinner {
117
+ border-color: inherit;
118
+
119
+ & > .k-spinner-increase,
120
+ & > .k-spinner-decrease {
121
+ border-color: inherit;
122
+ }
123
+ }
159
124
 
160
- .k-input-validation-icon {
161
- color: k-color(error);
125
+ // Hover
126
+ &:hover,
127
+ &.k-hover {
128
+ @include fill (
129
+ $kendo-input-outline-hover-text,
130
+ $kendo-input-outline-hover-bg,
131
+ $kendo-input-outline-hover-border
132
+ );
162
133
  }
163
134
 
135
+ // Focus
164
136
  &:focus,
165
137
  &.k-focus {
166
- @include focus-indicator( $kendo-input-invalid-shadow );
138
+ @include fill (
139
+ $kendo-input-outline-focus-text,
140
+ $kendo-input-outline-focus-bg,
141
+ $kendo-input-outline-focus-border
142
+ );
143
+ @include focus-indicator( $kendo-input-outline-focus-shadow );
167
144
  }
168
145
  &:focus-within {
169
- @include focus-indicator( $kendo-input-invalid-shadow );
146
+ @include fill (
147
+ $kendo-input-outline-focus-text,
148
+ $kendo-input-outline-focus-bg,
149
+ $kendo-input-outline-focus-border
150
+ );
151
+ @include focus-indicator( $kendo-input-outline-focus-shadow );
170
152
  }
171
- }
172
- }
173
-
174
153
 
175
- // Outline input
176
- .k-input-outline {
177
- @include fill (
178
- $kendo-input-outline-text,
179
- $kendo-input-outline-bg,
180
- $kendo-input-outline-border
181
- );
154
+ // Disabled
155
+ &:disabled,
156
+ &[disabled],
157
+ &.k-disabled {
158
+ @include fill(
159
+ $kendo-input-disabled-text,
160
+ $kendo-input-disabled-bg,
161
+ $kendo-input-disabled-border,
162
+ $kendo-input-disabled-gradient
163
+ );
164
+ @include box-shadow( $kendo-input-disabled-shadow );
165
+ }
182
166
 
183
- & > .k-input-button {
184
- border-color: inherit;
185
- }
167
+ // Invalid
168
+ &.k-invalid,
169
+ &.ng-invalid.ng-touched,
170
+ &.ng-invalid.ng-dirty {
171
+ @include fill( $border: $kendo-input-invalid-border );
172
+
173
+ .k-input-validation-icon {
174
+ color: k-color(error);
175
+ }
176
+
177
+ &:focus,
178
+ &.k-focus {
179
+ @include focus-indicator( $kendo-input-invalid-shadow );
180
+ }
181
+ &:focus-within {
182
+ @include focus-indicator( $kendo-input-invalid-shadow );
183
+ }
184
+ }
186
185
 
187
- & > .k-input-spinner {
188
- border-color: inherit;
186
+ // Prefix & Suffix
187
+ .k-input-prefix {
188
+ color: $kendo-input-prefix-text;
189
+ background-color: transparent;
190
+ }
189
191
 
190
- & > .k-spinner-increase,
191
- & > .k-spinner-decrease {
192
- border-color: inherit;
193
- }
194
- }
192
+ .k-input-suffix {
193
+ color: $kendo-input-suffix-text;
194
+ background-color: transparent;
195
+ }
195
196
 
196
- // Hover
197
- &:hover,
198
- &.k-hover {
199
- @include fill (
200
- $kendo-input-outline-hover-text,
201
- $kendo-input-outline-hover-bg,
202
- $kendo-input-outline-hover-border
203
- );
197
+ .k-input-separator {
198
+ border-color: $kendo-input-separator-text;
199
+ }
204
200
  }
205
201
 
206
- // Focus
207
- &:focus,
208
- &.k-focus {
202
+ // Flat input
203
+ #{k-when-default($kendo-input-default-fill-mode, "flat")}
204
+ &.k-input-flat {
209
205
  @include fill (
210
- $kendo-input-outline-focus-text,
211
- $kendo-input-outline-focus-bg,
212
- $kendo-input-outline-focus-border
213
- );
214
- @include focus-indicator( $kendo-input-outline-focus-shadow );
215
- }
216
- &:focus-within {
217
- @include fill (
218
- $kendo-input-outline-focus-text,
219
- $kendo-input-outline-focus-bg,
220
- $kendo-input-outline-focus-border
221
- );
222
- @include focus-indicator( $kendo-input-outline-focus-shadow );
223
- }
224
-
225
- // Disabled
226
- &:disabled,
227
- &[disabled],
228
- &.k-disabled {
229
- @include fill(
230
- $kendo-input-disabled-text,
231
- $kendo-input-disabled-bg,
232
- $kendo-input-disabled-border,
233
- $kendo-input-disabled-gradient
206
+ $kendo-input-flat-text,
207
+ $kendo-input-flat-bg,
208
+ $kendo-input-flat-border
234
209
  );
235
- @include box-shadow( $kendo-input-disabled-shadow );
236
- }
237
-
238
- // Invalid
239
- &.k-invalid,
240
- &.ng-invalid.ng-touched,
241
- &.ng-invalid.ng-dirty {
242
- @include fill( $border: $kendo-input-invalid-border );
243
210
 
244
- .k-input-validation-icon {
245
- color: k-color(error);
211
+ // Hover
212
+ &:hover,
213
+ &.k-hover {
214
+ @include fill (
215
+ $kendo-input-flat-hover-text,
216
+ $kendo-input-flat-hover-bg,
217
+ $kendo-input-flat-hover-border
218
+ );
246
219
  }
247
220
 
221
+ // Focus
248
222
  &:focus,
249
223
  &.k-focus {
250
- @include focus-indicator( $kendo-input-invalid-shadow );
224
+ @include fill (
225
+ $kendo-input-flat-focus-text,
226
+ $kendo-input-flat-focus-bg,
227
+ $kendo-input-flat-focus-border
228
+ );
229
+ @include focus-indicator( $kendo-input-flat-focus-shadow );
251
230
  }
252
231
  &:focus-within {
253
- @include focus-indicator( $kendo-input-invalid-shadow );
232
+ @include fill (
233
+ $kendo-input-flat-focus-text,
234
+ $kendo-input-flat-focus-bg,
235
+ $kendo-input-flat-focus-border
236
+ );
237
+ @include focus-indicator( $kendo-input-flat-focus-shadow );
254
238
  }
255
- }
256
-
257
- // Prefix & Suffix
258
- .k-input-prefix {
259
- color: $kendo-input-prefix-text;
260
- }
261
-
262
- .k-input-suffix {
263
- color: $kendo-input-suffix-text;
264
- }
265
-
266
- .k-input-separator {
267
- border-color: $kendo-input-separator-text;
268
- }
269
- }
270
239
 
240
+ // Disabled
241
+ &:disabled,
242
+ &[disabled],
243
+ &.k-disabled {
244
+ @include fill(
245
+ $kendo-input-disabled-text,
246
+ $kendo-input-disabled-bg,
247
+ $kendo-input-disabled-border,
248
+ $kendo-input-disabled-gradient
249
+ );
250
+ @include box-shadow( $kendo-input-disabled-shadow );
251
+ }
271
252
 
272
- // Outline picker
273
- .k-picker-outline {
274
- @include fill (
275
- $kendo-picker-outline-text,
276
- $kendo-picker-outline-bg,
277
- $kendo-picker-outline-border
278
- );
253
+ // Invalid
254
+ &.k-invalid,
255
+ &.ng-invalid.ng-touched,
256
+ &.ng-invalid.ng-dirty {
257
+ @include fill( $border: $kendo-input-invalid-border );
258
+
259
+ .k-input-validation-icon {
260
+ color: k-color(error);
261
+ }
262
+
263
+ &:focus,
264
+ &.k-focus {
265
+ @include focus-indicator( $kendo-input-invalid-shadow );
266
+ }
267
+ &:focus-within {
268
+ @include focus-indicator( $kendo-input-invalid-shadow );
269
+ }
270
+ }
279
271
 
280
- // Hover
281
- &:hover,
282
- &.k-hover {
283
- @include fill (
284
- $kendo-picker-outline-hover-text,
285
- $kendo-picker-outline-hover-bg,
286
- $kendo-picker-outline-hover-border
287
- );
288
- }
272
+ // Prefix & Suffix
273
+ .k-input-prefix {
274
+ color: $kendo-input-prefix-text;
275
+ background-color: transparent;
276
+ }
289
277
 
290
- // Focus
291
- &:focus,
292
- &.k-focus {
293
- @include fill (
294
- $kendo-picker-outline-focus-text,
295
- $kendo-picker-outline-focus-bg,
296
- $kendo-picker-outline-focus-border
297
- );
298
- @include focus-indicator( $kendo-picker-outline-focus-shadow );
299
- }
300
- &:focus-within {
301
- @include fill (
302
- $kendo-picker-outline-focus-text,
303
- $kendo-picker-outline-focus-bg,
304
- $kendo-picker-outline-focus-border
305
- );
306
- @include focus-indicator( $kendo-picker-outline-focus-shadow );
307
- }
278
+ .k-input-suffix {
279
+ color: $kendo-input-suffix-text;
280
+ background-color: transparent;
281
+ }
308
282
 
309
- &:focus:hover,
310
- &:focus.k-hover,
311
- &.k-focus:hover,
312
- &.k-focus.k-hover {
313
- @include fill (
314
- $kendo-picker-outline-hover-focus-text,
315
- $kendo-picker-outline-hover-focus-bg,
316
- $kendo-picker-outline-hover-focus-border
317
- );
283
+ .k-input-separator {
284
+ border-color: $kendo-input-separator-text;
285
+ }
318
286
  }
287
+ }
319
288
 
320
- // Disabled
321
- &:disabled,
322
- &[disabled],
323
- &.k-disabled {
289
+ .k-picker {
290
+ // Solid picker
291
+ #{k-when-default($kendo-picker-default-fill-mode, "solid")}
292
+ &.k-picker-solid {
324
293
  @include fill(
325
- $kendo-picker-disabled-text,
326
- $kendo-picker-disabled-bg,
327
- $kendo-picker-disabled-border,
328
- $kendo-picker-disabled-gradient
294
+ $kendo-picker-text,
295
+ $kendo-picker-bg,
296
+ $kendo-picker-border,
297
+ $kendo-picker-gradient
329
298
  );
330
- @include box-shadow( $kendo-picker-disabled-shadow );
331
- }
332
-
333
- // Invalid
334
- &.k-invalid,
335
- &.ng-invalid.ng-touched,
336
- &.ng-invalid.ng-dirty {
337
- @include fill( $border: $kendo-input-invalid-border );
338
299
 
339
- .k-input-validation-icon {
340
- color: k-color(error);
300
+ // Hover
301
+ &:hover,
302
+ &.k-hover {
303
+ @include fill(
304
+ $kendo-picker-hover-text,
305
+ $kendo-picker-hover-bg,
306
+ $kendo-picker-hover-border,
307
+ $kendo-picker-hover-gradient
308
+ );
309
+ @include box-shadow( $kendo-picker-hover-shadow );
341
310
  }
342
311
 
312
+ // Focus
343
313
  &:focus,
344
314
  &.k-focus {
345
- @include focus-indicator( $kendo-input-invalid-shadow );
315
+ @include fill (
316
+ $kendo-picker-focus-text,
317
+ $kendo-picker-focus-bg,
318
+ $kendo-picker-focus-border,
319
+ $kendo-picker-focus-gradient
320
+ );
321
+ @include focus-indicator( $kendo-picker-focus-shadow );
346
322
  }
347
323
  &:focus-within {
348
- @include focus-indicator( $kendo-input-invalid-shadow );
324
+ @include fill (
325
+ $kendo-picker-focus-text,
326
+ $kendo-picker-focus-bg,
327
+ $kendo-picker-focus-border,
328
+ $kendo-picker-focus-gradient
329
+ );
330
+ @include focus-indicator( $kendo-picker-focus-shadow );
349
331
  }
350
- }
351
- }
352
332
 
333
+ // Disabled
334
+ &:disabled,
335
+ &[disabled],
336
+ &.k-disabled {
337
+ @include fill(
338
+ $kendo-picker-disabled-text,
339
+ $kendo-picker-disabled-bg,
340
+ $kendo-picker-disabled-border,
341
+ $kendo-picker-disabled-gradient
342
+ );
343
+ @include box-shadow( $kendo-picker-disabled-shadow );
344
+ }
353
345
 
354
- // Flat input
355
- .k-input-flat {
356
- @include fill (
357
- $kendo-input-flat-text,
358
- $kendo-input-flat-bg,
359
- $kendo-input-flat-border
360
- );
361
-
362
- // Hover
363
- &:hover,
364
- &.k-hover {
365
- @include fill (
366
- $kendo-input-flat-hover-text,
367
- $kendo-input-flat-hover-bg,
368
- $kendo-input-flat-hover-border
369
- );
346
+ // Invalid
347
+ &.k-invalid,
348
+ &.ng-invalid.ng-touched,
349
+ &.ng-invalid.ng-dirty {
350
+ @include fill( $border: $kendo-input-invalid-border );
351
+
352
+ .k-input-validation-icon {
353
+ color: k-color(error);
354
+ }
355
+
356
+ &:focus,
357
+ &.k-focus {
358
+ @include focus-indicator( $kendo-input-invalid-shadow );
359
+ }
360
+ &:focus-within {
361
+ @include focus-indicator( $kendo-input-invalid-shadow );
362
+ }
363
+ }
370
364
  }
371
365
 
372
- // Focus
373
- &:focus,
374
- &.k-focus {
375
- @include fill (
376
- $kendo-input-flat-focus-text,
377
- $kendo-input-flat-focus-bg,
378
- $kendo-input-flat-focus-border
379
- );
380
- @include focus-indicator( $kendo-input-flat-focus-shadow );
381
- }
382
- &:focus-within {
366
+ // Outline picker
367
+ #{k-when-default($kendo-picker-default-fill-mode, "outline")}
368
+ &.k-picker-outline {
383
369
  @include fill (
384
- $kendo-input-flat-focus-text,
385
- $kendo-input-flat-focus-bg,
386
- $kendo-input-flat-focus-border
387
- );
388
- @include focus-indicator( $kendo-input-flat-focus-shadow );
389
- }
390
-
391
- // Disabled
392
- &:disabled,
393
- &[disabled],
394
- &.k-disabled {
395
- @include fill(
396
- $kendo-input-disabled-text,
397
- $kendo-input-disabled-bg,
398
- $kendo-input-disabled-border,
399
- $kendo-input-disabled-gradient
370
+ $kendo-picker-outline-text,
371
+ $kendo-picker-outline-bg,
372
+ $kendo-picker-outline-border
400
373
  );
401
- @include box-shadow( $kendo-input-disabled-shadow );
402
- }
403
-
404
- // Invalid
405
- &.k-invalid,
406
- &.ng-invalid.ng-touched,
407
- &.ng-invalid.ng-dirty {
408
- @include fill( $border: $kendo-input-invalid-border );
409
374
 
410
- .k-input-validation-icon {
411
- color: k-color(error);
375
+ // Hover
376
+ &:hover,
377
+ &.k-hover {
378
+ @include fill (
379
+ $kendo-picker-outline-hover-text,
380
+ $kendo-picker-outline-hover-bg,
381
+ $kendo-picker-outline-hover-border
382
+ );
412
383
  }
413
384
 
385
+ // Focus
414
386
  &:focus,
415
387
  &.k-focus {
416
- @include focus-indicator( $kendo-input-invalid-shadow );
388
+ @include fill (
389
+ $kendo-picker-outline-focus-text,
390
+ $kendo-picker-outline-focus-bg,
391
+ $kendo-picker-outline-focus-border
392
+ );
393
+ @include focus-indicator( $kendo-picker-outline-focus-shadow );
417
394
  }
418
395
  &:focus-within {
419
- @include focus-indicator( $kendo-input-invalid-shadow );
396
+ @include fill (
397
+ $kendo-picker-outline-focus-text,
398
+ $kendo-picker-outline-focus-bg,
399
+ $kendo-picker-outline-focus-border
400
+ );
401
+ @include focus-indicator( $kendo-picker-outline-focus-shadow );
420
402
  }
421
- }
422
-
423
- // Prefix & Suffix
424
- .k-input-prefix {
425
- color: $kendo-input-prefix-text;
426
- }
427
-
428
- .k-input-suffix {
429
- color: $kendo-input-suffix-text;
430
- }
431
-
432
- .k-input-separator {
433
- border-color: $kendo-input-separator-text;
434
- }
435
- }
436
-
437
403
 
438
- // Flat picker
439
- .k-picker-flat {
440
- @include fill (
441
- $kendo-picker-flat-text,
442
- $kendo-picker-flat-bg,
443
- $kendo-picker-flat-border
444
- );
404
+ &:focus:hover,
405
+ &:focus.k-hover,
406
+ &.k-focus:hover,
407
+ &.k-focus.k-hover {
408
+ @include fill (
409
+ $kendo-picker-outline-hover-focus-text,
410
+ $kendo-picker-outline-hover-focus-bg,
411
+ $kendo-picker-outline-hover-focus-border
412
+ );
413
+ }
445
414
 
446
- // Hover
447
- &:hover,
448
- &.k-hover {
449
- @include fill (
450
- $kendo-picker-flat-hover-text,
451
- $kendo-picker-flat-hover-bg,
452
- $kendo-picker-flat-hover-border
453
- );
454
- }
415
+ // Disabled
416
+ &:disabled,
417
+ &[disabled],
418
+ &.k-disabled {
419
+ @include fill(
420
+ $kendo-picker-disabled-text,
421
+ $kendo-picker-disabled-bg,
422
+ $kendo-picker-disabled-border,
423
+ $kendo-picker-disabled-gradient
424
+ );
425
+ @include box-shadow( $kendo-picker-disabled-shadow );
426
+ }
455
427
 
456
- // Focus
457
- &:focus,
458
- &.k-focus {
459
- @include fill (
460
- $kendo-picker-flat-focus-text,
461
- $kendo-picker-flat-focus-bg,
462
- $kendo-picker-flat-focus-border
463
- );
464
- @include focus-indicator( $kendo-picker-flat-focus-shadow );
465
- }
466
- &:focus-within {
467
- @include fill (
468
- $kendo-picker-flat-focus-text,
469
- $kendo-picker-flat-focus-bg,
470
- $kendo-picker-flat-focus-border
471
- );
472
- @include focus-indicator( $kendo-picker-flat-focus-shadow );
428
+ // Invalid
429
+ &.k-invalid,
430
+ &.ng-invalid.ng-touched,
431
+ &.ng-invalid.ng-dirty {
432
+ @include fill( $border: $kendo-input-invalid-border );
433
+
434
+ .k-input-validation-icon {
435
+ color: k-color(error);
436
+ }
437
+
438
+ &:focus,
439
+ &.k-focus {
440
+ @include focus-indicator( $kendo-input-invalid-shadow );
441
+ }
442
+ &:focus-within {
443
+ @include focus-indicator( $kendo-input-invalid-shadow );
444
+ }
445
+ }
473
446
  }
474
447
 
475
- &:focus:hover,
476
- &:focus.k-hover,
477
- &.k-focus:hover,
478
- &.k-focus.k-hover {
448
+ // Flat picker
449
+ #{k-when-default($kendo-picker-default-fill-mode, "flat")}
450
+ &.k-picker-flat {
479
451
  @include fill (
480
- $kendo-picker-flat-hover-focus-text,
481
- $kendo-picker-flat-hover-focus-bg,
482
- $kendo-picker-flat-hover-focus-border
452
+ $kendo-picker-flat-text,
453
+ $kendo-picker-flat-bg,
454
+ $kendo-picker-flat-border
483
455
  );
484
- }
485
-
486
- // Disabled
487
- &:disabled,
488
- &[disabled],
489
- &.k-disabled {
490
- @include fill(
491
- $kendo-picker-disabled-text,
492
- $kendo-picker-disabled-bg,
493
- $kendo-picker-disabled-border,
494
- $kendo-picker-disabled-gradient
495
- );
496
- @include box-shadow( $kendo-picker-disabled-shadow );
497
- }
498
456
 
499
- // Invalid
500
- &.k-invalid,
501
- &.ng-invalid.ng-touched,
502
- &.ng-invalid.ng-dirty {
503
- @include fill( $border: $kendo-input-invalid-border );
504
-
505
- .k-input-validation-icon {
506
- color: k-color(error);
457
+ // Hover
458
+ &:hover,
459
+ &.k-hover {
460
+ @include fill (
461
+ $kendo-picker-flat-hover-text,
462
+ $kendo-picker-flat-hover-bg,
463
+ $kendo-picker-flat-hover-border
464
+ );
507
465
  }
508
466
 
467
+ // Focus
509
468
  &:focus,
510
469
  &.k-focus {
511
- @include focus-indicator( $kendo-input-invalid-shadow );
470
+ @include fill (
471
+ $kendo-picker-flat-focus-text,
472
+ $kendo-picker-flat-focus-bg,
473
+ $kendo-picker-flat-focus-border
474
+ );
475
+ @include focus-indicator( $kendo-picker-flat-focus-shadow );
512
476
  }
513
477
  &:focus-within {
514
- @include focus-indicator( $kendo-input-invalid-shadow );
478
+ @include fill (
479
+ $kendo-picker-flat-focus-text,
480
+ $kendo-picker-flat-focus-bg,
481
+ $kendo-picker-flat-focus-border
482
+ );
483
+ @include focus-indicator( $kendo-picker-flat-focus-shadow );
484
+ }
485
+
486
+ &:focus:hover,
487
+ &:focus.k-hover,
488
+ &.k-focus:hover,
489
+ &.k-focus.k-hover {
490
+ @include fill (
491
+ $kendo-picker-flat-hover-focus-text,
492
+ $kendo-picker-flat-hover-focus-bg,
493
+ $kendo-picker-flat-hover-focus-border
494
+ );
495
+ }
496
+
497
+ // Disabled
498
+ &:disabled,
499
+ &[disabled],
500
+ &.k-disabled {
501
+ @include fill(
502
+ $kendo-picker-disabled-text,
503
+ $kendo-picker-disabled-bg,
504
+ $kendo-picker-disabled-border,
505
+ $kendo-picker-disabled-gradient
506
+ );
507
+ @include box-shadow( $kendo-picker-disabled-shadow );
508
+ }
509
+
510
+ // Invalid
511
+ &.k-invalid,
512
+ &.ng-invalid.ng-touched,
513
+ &.ng-invalid.ng-dirty {
514
+ @include fill( $border: $kendo-input-invalid-border );
515
+
516
+ .k-input-validation-icon {
517
+ color: k-color(error);
518
+ }
519
+
520
+ &:focus,
521
+ &.k-focus {
522
+ @include focus-indicator( $kendo-input-invalid-shadow );
523
+ }
524
+ &:focus-within {
525
+ @include focus-indicator( $kendo-input-invalid-shadow );
526
+ }
515
527
  }
516
528
  }
517
529
  }
518
530
 
531
+
519
532
  }