@progress/kendo-theme-default 5.0.0-next.4 → 5.0.2-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 (286) hide show
  1. package/README.md +5 -8
  2. package/dist/all.css +13661 -14454
  3. package/dist/all.scss +15431 -16146
  4. package/dist/default-dataviz-v4.scss +8 -0
  5. package/dist/default-main-dark.scss +5 -5
  6. package/dist/default-main.scss +5 -5
  7. package/lib/swatches/default-dataviz-v4.json +51 -0
  8. package/lib/swatches/default-main-dark.json +5 -5
  9. package/lib/swatches/default-main.json +5 -5
  10. package/package.json +2 -2
  11. package/scss/_layout.scss +0 -0
  12. package/scss/_variables.scss +2 -19
  13. package/scss/action-buttons/_layout.scss +18 -1
  14. package/scss/action-sheet/_layout.scss +6 -0
  15. package/scss/adaptive/_layout.scss +46 -98
  16. package/scss/adaptive/_theme.scss +0 -9
  17. package/scss/all.scss +1 -150
  18. package/scss/appbar/_layout.scss +28 -3
  19. package/scss/appbar/_variables.scss +1 -1
  20. package/scss/autocomplete/_index.scss +1 -0
  21. package/scss/autocomplete/_layout.scss +1 -54
  22. package/scss/autocomplete/_theme.scss +3 -75
  23. package/scss/autocomplete/_variables.scss +0 -24
  24. package/scss/avatar/_layout.scss +19 -17
  25. package/scss/avatar/_theme.scss +4 -4
  26. package/scss/avatar/_variables.scss +18 -8
  27. package/scss/avatar/index.md +0 -0
  28. package/scss/badge/_layout.scss +6 -0
  29. package/scss/bottom-navigation/_layout.scss +6 -0
  30. package/scss/breadcrumb/_layout.scss +6 -18
  31. package/scss/button/_index.scss +3 -1
  32. package/scss/button/_layout.scss +153 -231
  33. package/scss/button/_theme.scss +220 -236
  34. package/scss/button/_variables.scss +199 -127
  35. package/scss/button/index.md +3 -0
  36. package/scss/calendar/_index.scss +1 -0
  37. package/scss/calendar/_layout.scss +2 -14
  38. package/scss/calendar/_theme.scss +1 -19
  39. package/scss/captcha/_layout.scss +6 -5
  40. package/scss/card/_layout.scss +10 -72
  41. package/scss/card/_theme.scss +2 -1
  42. package/scss/card/_variables.scss +5 -5
  43. package/scss/chat/_layout.scss +35 -32
  44. package/scss/chat/_theme.scss +0 -31
  45. package/scss/chat/_variables.scss +3 -18
  46. package/scss/checkbox/_index.scss +2 -0
  47. package/scss/checkbox/_layout.scss +103 -158
  48. package/scss/checkbox/_theme.scss +37 -41
  49. package/scss/checkbox/_variables.scss +144 -56
  50. package/scss/checkbox/index.md +0 -0
  51. package/scss/chip/_index.scss +1 -0
  52. package/scss/chip/_layout.scss +127 -127
  53. package/scss/chip/_theme.scss +90 -387
  54. package/scss/chip/_variables.scss +142 -191
  55. package/scss/chip/index.md +0 -0
  56. package/scss/color-preview/_index.scss +11 -0
  57. package/scss/color-preview/_layout.scss +77 -0
  58. package/scss/color-preview/_theme.scss +17 -0
  59. package/scss/color-preview/_variables.scss +14 -0
  60. package/scss/coloreditor/_index.scss +15 -0
  61. package/scss/coloreditor/_layout.scss +75 -0
  62. package/scss/coloreditor/_theme.scss +19 -0
  63. package/scss/coloreditor/_variables.scss +27 -0
  64. package/scss/colorgradient/_index.scss +18 -0
  65. package/scss/colorgradient/_layout.scss +193 -0
  66. package/scss/colorgradient/_theme.scss +82 -0
  67. package/scss/colorgradient/_variables.scss +51 -0
  68. package/scss/colorgradient/images/alpha-slider-bgr.png +0 -0
  69. package/scss/colorgradient/images/alpha-slider-bgr.scss +3 -0
  70. package/scss/colorpalette/_index.scss +12 -0
  71. package/scss/colorpalette/_layout.scss +56 -0
  72. package/scss/colorpalette/_theme.scss +25 -0
  73. package/scss/colorpalette/_variables.scss +10 -0
  74. package/scss/colorpicker/_index.scss +3 -6
  75. package/scss/colorpicker/_layout.scss +7 -466
  76. package/scss/colorpicker/_theme.scss +2 -187
  77. package/scss/colorpicker/_variables.scss +1 -40
  78. package/scss/combobox/_index.scss +1 -0
  79. package/scss/combobox/_layout.scss +3 -84
  80. package/scss/combobox/_theme.scss +3 -124
  81. package/scss/combobox/_variables.scss +1 -33
  82. package/scss/common/_base.scss +2 -2
  83. package/scss/common/_loading.scss +15 -13
  84. package/scss/core/functions/_colors.scss +4 -1
  85. package/scss/core/mixins/_index.scss +1 -0
  86. package/scss/core/mixins/_input-ripple.scss +1 -1
  87. package/scss/core/mixins/_module-system.scss +149 -0
  88. package/scss/dataviz/_index.scss +1 -0
  89. package/scss/dataviz/_theme.scss +8 -8
  90. package/scss/dataviz/_variables.scss +6 -6
  91. package/scss/dateinput/_index.scss +11 -0
  92. package/scss/dateinput/_layout.scss +6 -0
  93. package/scss/dateinput/_theme.scss +6 -0
  94. package/scss/dateinput/_variables.scss +1 -0
  95. package/scss/datepicker/_index.scss +13 -0
  96. package/scss/datepicker/_layout.scss +6 -0
  97. package/scss/datepicker/_theme.scss +6 -0
  98. package/scss/datepicker/_variables.scss +1 -0
  99. package/scss/{datetime → daterangepicker}/_index.scss +1 -2
  100. package/scss/daterangepicker/_layout.scss +43 -0
  101. package/scss/daterangepicker/_theme.scss +3 -0
  102. package/scss/daterangepicker/_variables.scss +2 -0
  103. package/scss/datetimepicker/_index.scss +17 -0
  104. package/scss/datetimepicker/_layout.scss +56 -0
  105. package/scss/datetimepicker/_theme.scss +6 -0
  106. package/scss/datetimepicker/_variables.scss +2 -0
  107. package/scss/drawer/_index.scss +1 -0
  108. package/scss/drawer/_layout.scss +6 -0
  109. package/scss/drawer/_variables.scss +1 -1
  110. package/scss/dropdowngrid/_layout.scss +9 -4
  111. package/scss/dropdowngrid/_theme.scss +9 -2
  112. package/scss/dropdowngrid/index.md +0 -0
  113. package/scss/dropdownlist/_index.scss +1 -0
  114. package/scss/dropdownlist/_layout.scss +20 -101
  115. package/scss/dropdownlist/_theme.scss +3 -91
  116. package/scss/dropdownlist/_variables.scss +9 -9
  117. package/scss/dropdowntree/_layout.scss +5 -15
  118. package/scss/dropdowntree/_theme.scss +2 -1
  119. package/scss/dropdowntree/_variables.scss +2 -4
  120. package/scss/dropzone/_layout.scss +0 -16
  121. package/scss/editor/_layout.scss +110 -91
  122. package/scss/editor/_theme.scss +9 -0
  123. package/scss/editor/_variables.scss +10 -2
  124. package/scss/expansion-panel/_index.scss +1 -0
  125. package/scss/expansion-panel/_layout.scss +6 -1
  126. package/scss/expansion-panel/_variables.scss +2 -2
  127. package/scss/fab/_layout.scss +30 -56
  128. package/scss/fab/_theme.scss +56 -68
  129. package/scss/fab/_variables.scss +129 -71
  130. package/scss/fab/index.md +0 -0
  131. package/scss/filemanager/_theme.scss +1 -1
  132. package/scss/filter/_index.scss +1 -1
  133. package/scss/filter/_layout.scss +20 -6
  134. package/scss/filter/_theme.scss +3 -1
  135. package/scss/floating-label/_layout.scss +7 -3
  136. package/scss/floating-label/_theme.scss +0 -2
  137. package/scss/floating-label/_variables.scss +4 -4
  138. package/scss/forms/_index.scss +1 -1
  139. package/scss/forms/_layout.scss +22 -113
  140. package/scss/gantt/_index.scss +1 -1
  141. package/scss/gantt/_layout.scss +9 -7
  142. package/scss/grid/_index.scss +2 -1
  143. package/scss/grid/_layout.scss +157 -195
  144. package/scss/grid/_theme.scss +16 -22
  145. package/scss/grid/_variables.scss +10 -12
  146. package/scss/icons/_layout.scss +7 -1
  147. package/scss/icons/font/WebComponentsIcons.scss +1 -1
  148. package/scss/icons/font/WebComponentsIcons.ttf +0 -0
  149. package/scss/imageeditor/_layout.scss +10 -8
  150. package/scss/imageeditor/_variables.scss +1 -0
  151. package/scss/index.scss +157 -0
  152. package/scss/input/_index.scss +1 -1
  153. package/scss/input/_layout.scss +294 -94
  154. package/scss/input/_theme.scss +111 -16
  155. package/scss/input/_variables.scss +116 -92
  156. package/scss/list/_index.scss +12 -0
  157. package/scss/list/_layout.scss +241 -0
  158. package/scss/list/_theme.scss +91 -0
  159. package/scss/list/_variables.scss +248 -0
  160. package/scss/list/index.md +0 -0
  161. package/scss/listbox/_index.scss +2 -0
  162. package/scss/listbox/_layout.scss +10 -0
  163. package/scss/listbox/_variables.scss +1 -1
  164. package/scss/listview/_layout.scss +2 -9
  165. package/scss/map/_layout.scss +16 -11
  166. package/scss/map/_theme.scss +5 -5
  167. package/scss/map/_variables.scss +1 -1
  168. package/scss/maskedtextbox/_layout.scss +3 -47
  169. package/scss/maskedtextbox/_theme.scss +3 -21
  170. package/scss/mediaplayer/_layout.scss +19 -1
  171. package/scss/menu/_index.scss +2 -0
  172. package/scss/menu/_layout.scss +134 -74
  173. package/scss/menu/_theme.scss +33 -25
  174. package/scss/menu/_variables.scss +124 -35
  175. package/scss/multiselect/_index.scss +2 -0
  176. package/scss/multiselect/_layout.scss +3 -199
  177. package/scss/multiselect/_theme.scss +3 -139
  178. package/scss/multiselect/_variables.scss +0 -36
  179. package/scss/notification/_layout.scss +6 -22
  180. package/scss/numerictextbox/_layout.scss +5 -103
  181. package/scss/numerictextbox/_theme.scss +2 -95
  182. package/scss/numerictextbox/_variables.scss +0 -31
  183. package/scss/orgchart/_layout.scss +6 -0
  184. package/scss/orgchart/_variables.scss +2 -2
  185. package/scss/pager/_index.scss +1 -0
  186. package/scss/pager/_layout.scss +13 -14
  187. package/scss/pager/_theme.scss +4 -4
  188. package/scss/pager/_variables.scss +7 -7
  189. package/scss/panelbar/_index.scss +1 -0
  190. package/scss/panelbar/_layout.scss +6 -54
  191. package/scss/panelbar/_theme.scss +9 -2
  192. package/scss/panelbar/_variables.scss +6 -2
  193. package/scss/pdf-viewer/_layout.scss +20 -29
  194. package/scss/pdf-viewer/_variables.scss +2 -5
  195. package/scss/pivotgrid/_index.scss +1 -0
  196. package/scss/pivotgrid/_layout.scss +77 -108
  197. package/scss/pivotgrid/_theme.scss +39 -73
  198. package/scss/pivotgrid/_variables.scss +1 -4
  199. package/scss/popover/_layout.scss +6 -1
  200. package/scss/popup/_index.scss +0 -4
  201. package/scss/popup/_layout.scss +6 -283
  202. package/scss/popup/_theme.scss +2 -159
  203. package/scss/popup/_variables.scss +2 -7
  204. package/scss/progressbar/_layout.scss +6 -0
  205. package/scss/radio/_index.scss +2 -0
  206. package/scss/radio/_layout.scss +116 -143
  207. package/scss/radio/_theme.scss +25 -25
  208. package/scss/radio/_variables.scss +134 -52
  209. package/scss/radio/index.md +0 -0
  210. package/scss/rating/_layout.scss +6 -9
  211. package/scss/scheduler/_index.scss +1 -1
  212. package/scss/scheduler/_layout.scss +32 -13
  213. package/scss/scheduler/_theme.scss +1 -1
  214. package/scss/scrollview/_layout.scss +6 -1
  215. package/scss/scrollview/_variables.scss +4 -4
  216. package/scss/searchbox/_layout.scss +1 -18
  217. package/scss/searchbox/_theme.scss +1 -46
  218. package/scss/searchbox/_variables.scss +0 -20
  219. package/scss/skeleton/_layout.scss +1 -1
  220. package/scss/slider/_layout.scss +67 -156
  221. package/scss/slider/_theme.scss +0 -10
  222. package/scss/slider/_variables.scss +10 -10
  223. package/scss/spreadsheet/_index.scss +2 -1
  224. package/scss/spreadsheet/_layout.scss +37 -62
  225. package/scss/spreadsheet/_theme.scss +19 -19
  226. package/scss/stepper/_layout.scss +6 -1
  227. package/scss/switch/_index.scss +0 -2
  228. package/scss/switch/_layout.scss +99 -83
  229. package/scss/switch/_theme.scss +91 -93
  230. package/scss/switch/_variables.scss +190 -83
  231. package/scss/switch/index.md +0 -0
  232. package/scss/table/_index.scss +19 -0
  233. package/scss/table/_layout.scss +275 -0
  234. package/scss/table/_theme.scss +82 -0
  235. package/scss/table/_variables.scss +141 -0
  236. package/scss/tabstrip/_index.scss +1 -0
  237. package/scss/tabstrip/_layout.scss +37 -5
  238. package/scss/tabstrip/_theme.scss +1 -0
  239. package/scss/tabstrip/_variables.scss +3 -3
  240. package/scss/taskboard/_layout.scss +8 -7
  241. package/scss/taskboard/_variables.scss +0 -2
  242. package/scss/textarea/_layout.scss +1 -89
  243. package/scss/textarea/_theme.scss +1 -66
  244. package/scss/textarea/_variables.scss +0 -53
  245. package/scss/textbox/_layout.scss +1 -73
  246. package/scss/textbox/_theme.scss +1 -70
  247. package/scss/textbox/_variables.scss +1 -2
  248. package/scss/timeline/_layout.scss +8 -4
  249. package/scss/timeline/_variables.scss +7 -7
  250. package/scss/timepicker/_index.scss +15 -0
  251. package/scss/timepicker/_layout.scss +6 -0
  252. package/scss/timepicker/_theme.scss +6 -0
  253. package/scss/timepicker/_variables.scss +1 -0
  254. package/scss/timeselector/_index.scss +13 -0
  255. package/scss/timeselector/_layout.scss +208 -0
  256. package/scss/timeselector/_theme.scss +70 -0
  257. package/scss/timeselector/_variables.scss +32 -0
  258. package/scss/toolbar/_index.scss +1 -0
  259. package/scss/toolbar/_layout.scss +47 -5
  260. package/scss/toolbar/_theme.scss +41 -7
  261. package/scss/toolbar/_variables.scss +3 -1
  262. package/scss/tooltip/_layout.scss +6 -1
  263. package/scss/treelist/_layout.scss +4 -0
  264. package/scss/treeview/_layout.scss +135 -122
  265. package/scss/treeview/_theme.scss +51 -42
  266. package/scss/treeview/_variables.scss +125 -46
  267. package/scss/typography/_variables.scss +3 -3
  268. package/scss/upload/_layout.scss +6 -81
  269. package/scss/utils/_border.scss +9 -5
  270. package/scss/utils/_flex.scss +11 -3
  271. package/scss/utils/_spacing.scss +24 -0
  272. package/scss/virtual-scroller/_index.scss +10 -0
  273. package/scss/virtual-scroller/_layout.scss +35 -0
  274. package/scss/virtual-scroller/_theme.scss +3 -0
  275. package/scss/virtual-scroller/_variables.scss +1 -0
  276. package/scss/window/_layout.scss +3 -3
  277. package/scss/window/_variables.scss +1 -1
  278. package/scss/wizard/_layout.scss +4 -0
  279. package/scss/colorpicker/images/alpha-slider-bgr-reversed.png +0 -0
  280. package/scss/colorpicker/images/alpha-slider-bgr-reversed.scss +0 -3
  281. package/scss/colorpicker/images/alpha-slider-bgr.png +0 -0
  282. package/scss/colorpicker/images/alpha-slider-bgr.scss +0 -3
  283. package/scss/datetime/_layout.scss +0 -528
  284. package/scss/datetime/_theme.scss +0 -297
  285. package/scss/datetime/_variables.scss +0 -53
  286. package/scss/no-flexbox.scss +0 -72
package/scss/chip/_theme.scss CHANGED
@@ -1,409 +1,112 @@
1
- @include exports("chip/theme") {
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
- }
1
+ @include exports( "chip/theme" ) {
9
2
 
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
+ try-tint( $color, 92% ),
32
+ try-tint( $color, 70% )
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: try-tint( $color, 92% ) );
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: try-tint($color, 84% ) );
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: try-tint( $color, 76% ) );
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
53
 
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
- );
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
+ }
243
109
  }
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
- );
356
- }
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
110
  }
408
111
  }
409
112