chosen-awesome-rails 1.0.3 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -68,6 +68,13 @@ class Chosen.Parser
68
68
  @order()
69
69
  return @
70
70
 
71
+ sync: ->
72
+ for option in @all_options
73
+ if option.$option[0].selected and @selected_options.indexOf(option) < 0
74
+ @chosen.select(option, false)
75
+ else if not option.$option[0].selected and @selected_options.indexOf(option) >= 0
76
+ @chosen.deselect(option, false)
77
+
71
78
  update: (data) ->
72
79
  parser = @chosen.option_parser || @default_parser
73
80
  selected_options = []
@@ -172,8 +179,9 @@ class Chosen.Parser
172
179
  option.$choice.addClass("selected")
173
180
  option.selected = true
174
181
 
175
- index = @selectable_options.indexOf(option)
176
- @selectable_options.splice(index, 1) unless index is -1
182
+ if (index = @selectable_options.indexOf(option)) >= 0
183
+ @selectable_options.splice(index, 1)
184
+
177
185
  @selected_options.push(option)
178
186
 
179
187
  return @
@@ -186,8 +194,9 @@ class Chosen.Parser
186
194
  option.$choice.removeClass("selected")
187
195
  option.selected = false
188
196
 
189
- index = @selected_options.indexOf(option)
190
- @selected_options.splice(index, 1) unless index is -1
197
+ if (index = @selected_options.indexOf(option)) >= 0
198
+ @selected_options.splice(index, 1)
199
+
191
200
  @selectable_options.push(option)
192
201
 
193
202
  return @
@@ -56,16 +56,16 @@ class Chosen.Single extends Chosen
56
56
 
57
57
  return
58
58
 
59
- deselect: (option) ->
59
+ deselect: (option, trigger_event = true) ->
60
60
  @parser.deselect(option || @parser.selected()[0])
61
61
 
62
62
  @set_default_value()
63
63
  @close()
64
64
 
65
- @$target.trigger("change")
65
+ @$target.trigger("change", [{ chosen: true }]) if trigger_event
66
66
  return @
67
67
 
68
- select: (option) ->
68
+ select: (option, trigger_event = true) ->
69
69
  return @ if not option or option.disabled or option.selected
70
70
 
71
71
  @parser.deselect(@parser.selected()[0])
@@ -74,7 +74,7 @@ class Chosen.Single extends Chosen
74
74
  @set_default_value()
75
75
  @close()
76
76
 
77
- @$target.trigger("change")
77
+ @$target.trigger("change", [{ chosen: true }]) if trigger_event
78
78
  return @
79
79
 
80
80
  deselect_all: ->
@@ -0,0 +1,101 @@
1
+ .chosen-container {
2
+ border: 1px solid #cccccc;
3
+ -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
4
+ -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
5
+ -o-transition: border linear 0.2s, box-shadow linear 0.2s;
6
+ transition: border linear 0.2s, box-shadow linear 0.2s;
7
+ -webkit-border-radius: 4px;
8
+ -moz-border-radius: 4px;
9
+ border-radius: 4px;
10
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
11
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
12
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
13
+ box-sizing: border-box;
14
+
15
+ ul.chosen-choices {
16
+ color: #555555;
17
+ }
18
+
19
+ &.loading {
20
+ background-image: -webkit-linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
21
+ background-image: -moz-linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
22
+ background-image: -ms-linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
23
+ background-image: -o-linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
24
+ background-image: linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
25
+
26
+ ul.chosen-choices {
27
+ background-color: transparent;
28
+ }
29
+ }
30
+
31
+ &.disabled {
32
+ background-color: #eee;
33
+ }
34
+
35
+ &.focus {
36
+ border-color: rgba(82, 168, 236, 0.8);
37
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
38
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
39
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
40
+ }
41
+
42
+ &.opened {
43
+ &.downside {
44
+ -webkit-border-bottom-left-radius: 0;
45
+ -webkit-border-bottom-right-radius: 0;
46
+ -moz-border-bottom-left-radius: 0;
47
+ -moz-border-bottom-right-radius: 0;
48
+ border-bottom-left-radius: 0;
49
+ border-bottom-right-radius: 0;
50
+ }
51
+
52
+ &.upside {
53
+ -webkit-border-top-left-radius: 0;
54
+ -webkit-border-top-right-radius: 0;
55
+ -moz-border-top-left-radius: 0;
56
+ -moz-border-top-right-radius: 0;
57
+ border-top-left-radius: 0;
58
+ border-top-right-radius: 0;
59
+ }
60
+ }
61
+ }
62
+
63
+ .chosen-dropdown {
64
+ border-color: #cccccc;
65
+ -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
66
+ -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
67
+ -o-transition: border linear 0.2s, box-shadow linear 0.2s;
68
+ transition: border linear 0.2s, box-shadow linear 0.2s;
69
+
70
+ &.downside {
71
+ -webkit-border-bottom-left-radius: 4px;
72
+ -webkit-border-bottom-right-radius: 4px;
73
+ -moz-border-bottom-left-radius: 4px;
74
+ -moz-border-bottom-right-radius: 4px;
75
+ border-bottom-left-radius: 4px;
76
+ border-bottom-right-radius: 4px;
77
+
78
+ &.opened {
79
+ border-color: rgba(82, 168, 236, 0.8);
80
+ -webkit-box-shadow: -3px 2px 6px -2px rgba(82, 168, 236, 0.5), 3px 2px 6px -2px rgba(82, 168, 236, 0.5);
81
+ -moz-box-shadow: -3px 2px 6px -2px rgba(82, 168, 236, 0.5), 3px 2px 6px -2px rgba(82, 168, 236, 0.5);
82
+ box-shadow: -3px 2px 6px -2px rgba(82, 168, 236, 0.5), 3px 2px 6px -2px rgba(82, 168, 236, 0.5);
83
+ }
84
+ }
85
+
86
+ &.upside {
87
+ -webkit-border-top-left-radius: 4px;
88
+ -webkit-border-top-right-radius: 4px;
89
+ -moz-border-top-left-radius: 4px;
90
+ -moz-border-top-right-radius: 4px;
91
+ border-top-left-radius: 4px;
92
+ border-top-right-radius: 4px;
93
+
94
+ &.opened {
95
+ border-color: rgba(82, 168, 236, 0.8);
96
+ -webkit-box-shadow: -3px -2px 6px -2px rgba(82, 168, 236, 0.5), 3px -2px 6px -2px rgba(82, 168, 236, 0.5);
97
+ -moz-box-shadow: -3px -2px 6px -2px rgba(82, 168, 236, 0.5), 3px -2px 6px -2px rgba(82, 168, 236, 0.5);
98
+ box-shadow: -3px -2px 6px -2px rgba(82, 168, 236, 0.5), 3px -2px 6px -2px rgba(82, 168, 236, 0.5);
99
+ }
100
+ }
101
+ }
@@ -0,0 +1,86 @@
1
+ .chosen-container {
2
+ > a.chosen-delete {
3
+ right: 22px;
4
+ }
5
+
6
+ ul.chosen-choices {
7
+ li.chosen-search-field {
8
+ input {
9
+ padding: 0;
10
+ height: 100%;
11
+ }
12
+ }
13
+ }
14
+
15
+ &.loading {
16
+ background-image: -webkit-linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
17
+ background-image: -moz-linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
18
+ background-image: -ms-linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
19
+ background-image: -o-linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
20
+ background-image: linear-gradient(-45deg, rgba(52, 194, 227, .10) 25%, transparent 25%, transparent 50%, rgba(52, 194, 227, .10) 50%, rgba(52, 194, 227, .10) 75%, transparent 75%, transparent);
21
+
22
+ ul.chosen-choices {
23
+ background-color: transparent;
24
+ }
25
+ }
26
+
27
+ &.disabled {
28
+ background-color: $input-bg-disabled;
29
+ }
30
+
31
+ &.focus {
32
+ border-color: $input-border-focus;
33
+ @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6));
34
+ }
35
+
36
+ &.opened {
37
+ &.downside {
38
+ -webkit-border-bottom-left-radius: 0;
39
+ -webkit-border-bottom-right-radius: 0;
40
+ -moz-border-bottom-left-radius: 0;
41
+ -moz-border-bottom-right-radius: 0;
42
+ border-bottom-left-radius: 0;
43
+ border-bottom-right-radius: 0;
44
+ }
45
+
46
+ &.upside {
47
+ -webkit-border-top-left-radius: 0;
48
+ -webkit-border-top-right-radius: 0;
49
+ -moz-border-top-left-radius: 0;
50
+ -moz-border-top-right-radius: 0;
51
+ border-top-left-radius: 0;
52
+ border-top-right-radius: 0;
53
+ }
54
+ }
55
+ }
56
+
57
+ .chosen-dropdown {
58
+ border-color: $input-border-focus;
59
+ @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
60
+
61
+ &.downside {
62
+ -webkit-border-bottom-left-radius: $border-radius-base;
63
+ -webkit-border-bottom-right-radius: $border-radius-base;
64
+ -moz-border-bottom-left-radius: $border-radius-base;
65
+ -moz-border-bottom-right-radius: $border-radius-base;
66
+ border-bottom-left-radius: $border-radius-base;
67
+ border-bottom-right-radius: $border-radius-base;
68
+
69
+ &.opened {
70
+ @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), -3px 2px 6px -2px rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6), 3px 2px 6px -2px rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6));
71
+ }
72
+ }
73
+
74
+ &.upside {
75
+ -webkit-border-top-left-radius: $border-radius-base;
76
+ -webkit-border-top-right-radius: $border-radius-base;
77
+ -moz-border-top-left-radius: $border-radius-base;
78
+ -moz-border-top-right-radius: $border-radius-base;
79
+ border-top-left-radius: $border-radius-base;
80
+ border-top-right-radius: $border-radius-base;
81
+
82
+ &.opened {
83
+ @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), -3px -2px 6px -2px rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6), 3px -2px 6px -2px rgba(red($input-border-focus), green($input-border-focus), blue($input-border-focus), .6));
84
+ }
85
+ }
86
+ }
@@ -0,0 +1,334 @@
1
+ $arrow_image_path: image_path('chosen-arrow.gif') !default;
2
+
3
+ $border_width: 1px !default;
4
+ $border_style: solid !default;
5
+ $border_color_default: #ccc !default;
6
+ $border_color_active: rgba(82, 168, 236, 1) !default;
7
+ $border_color_disabled: #ccc !default;
8
+
9
+ $background_color_default: #fff !default;
10
+ $background_color_active: rgba(82, 168, 236, 1) !default;
11
+ $background_color_disabled: #efefef !default;
12
+
13
+ $color_active: #fff !default;
14
+ $color_disabled: #989898 !default;
15
+ $color_selected: #989898 !default;
16
+
17
+ $group_color: #a0a0a0 !default;
18
+ $placeholder_color: #989898 !default;
19
+
20
+ $icon_delete_color: #777 !default;
21
+ $icon_delete_color_hover: #333 !default;
22
+
23
+ .chosen {
24
+ display: none !important;
25
+ }
26
+
27
+ .chosen-container {
28
+ position: relative;
29
+ display: flex !important;
30
+ align-items: center !important;
31
+ outline: none;
32
+ cursor: default;
33
+ border-width: $border_width;
34
+ border-style: $border_style;
35
+ border-color: $border_color_default;
36
+ background-color: $background_color_default;
37
+ zoom: 1;
38
+
39
+ a.chosen-delete {
40
+ padding: 0 5px;
41
+ margin: 0;
42
+ color: $icon_delete_color;
43
+ font-weight: bold;
44
+ cursor: pointer;
45
+ text-decoration: none;
46
+ }
47
+
48
+ a.chosen-delete:hover {
49
+ color: $icon_delete_color_hover;
50
+ text-decoration: none;
51
+ }
52
+
53
+ > a.chosen-delete {
54
+ position: absolute;
55
+ right: 10px;
56
+ top: 50%;
57
+ width: 10px;
58
+ height: 15px;
59
+ padding: 0;
60
+ margin: -8px auto 0 auto;
61
+ text-align: center;
62
+ font-size: 15px;
63
+ line-height: 1;
64
+ }
65
+
66
+ ul.chosen-choices {
67
+ position: relative;
68
+ display: block;
69
+ padding: 0 24px 0 0;
70
+ margin: 0;
71
+ width: 100%;
72
+ background-repeat: no-repeat;
73
+ background-position: right center;
74
+ background-image: url($arrow_image_path);
75
+
76
+ li {
77
+ position: relative;
78
+ display: block;
79
+ float: left;
80
+ list-style: none;
81
+ word-wrap: break-word;
82
+ }
83
+
84
+ li.chosen-search-field {
85
+ width: 100%;
86
+
87
+ input {
88
+ position: relative;
89
+ float: left;
90
+ width: 100%;
91
+ margin: 0;
92
+ outline: none;
93
+ cursor: text;
94
+ border: none;
95
+ -webkit-border-radius: 0;
96
+ -moz-border-radius: 0;
97
+ border-radius: 0;
98
+ -webkit-box-shadow: none;
99
+ -moz-box-shadow: none;
100
+ box-shadow: none;
101
+ background: transparent;
102
+ }
103
+
104
+ input::-webkit-input-placeholder {
105
+ color: $placeholder_color; text-overflow: ellipsis;
106
+ }
107
+
108
+ input:-moz-placeholder {
109
+ color: $placeholder_color !important; text-overflow: ellipsis;
110
+ }
111
+
112
+ input::-moz-placeholder {
113
+ color: $placeholder_color !important; text-overflow: ellipsis;
114
+ }
115
+
116
+ input:-ms-input-placeholder {
117
+ color: $placeholder_color !important; text-overflow: ellipsis;
118
+ }
119
+
120
+ input::-ms-clear {
121
+ display: none;
122
+ width: 0;
123
+ height: 0;
124
+ }
125
+ }
126
+ }
127
+
128
+ &.single { }
129
+
130
+ &.multiple {
131
+ height: auto !important;
132
+
133
+ ul.chosen-choices {
134
+ li.chosen-option {
135
+ padding: 0 3px 0 0;
136
+ margin: 0 3px 3px 0;
137
+ border: 1px solid #aaa;
138
+ border-radius: 3px;
139
+ background-color: #e4e4e4;
140
+ background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
141
+ background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
142
+ background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
143
+ background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
144
+ background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
145
+ background-clip: padding-box;
146
+ box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05);
147
+ color: #333;
148
+
149
+ > a.chosen-delete {
150
+ position: relative;
151
+ float: left;
152
+ }
153
+ }
154
+
155
+ li.chosen-option.active {
156
+ background-color: #d0d0d0;
157
+ background-image: none;
158
+ }
159
+ }
160
+ }
161
+
162
+ &.focus {
163
+ ul.chosen-choices {
164
+ border-color: $border_color_active;
165
+ }
166
+ }
167
+
168
+ &.opened { }
169
+
170
+ &.disabled {
171
+ ul {
172
+ border-color: $border_color_disabled;
173
+ background-color: $background_color_disabled;
174
+ }
175
+
176
+ * {
177
+ color: $color_disabled !important;
178
+ cursor: default !important;
179
+ }
180
+
181
+ > li, a {
182
+ opacity: 0.6;
183
+ }
184
+
185
+ a:hover {
186
+ background-position: 0 0;
187
+ }
188
+ }
189
+
190
+ &.placeholder {
191
+ > a.chosen-delete {
192
+ display: none;
193
+ }
194
+ }
195
+
196
+ &.rtl { }
197
+
198
+ &.loading {
199
+ -webkit-background-size: 50px 50px;
200
+ -moz-background-size: 50px 50px;
201
+ background-size: 50px 50px;
202
+ background-image: -webkit-linear-gradient(-45deg, rgba(255, 154, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 154, 26, .10) 50%, rgba(255, 154, 26, .10) 75%, transparent 75%, transparent);
203
+ background-image: -moz-linear-gradient(-45deg, rgba(255, 154, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 154, 26, .10) 50%, rgba(255, 154, 26, .10) 75%, transparent 75%, transparent);
204
+ background-image: -ms-linear-gradient(-45deg, rgba(255, 154, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 154, 26, .10) 50%, rgba(255, 154, 26, .10) 75%, transparent 75%, transparent);
205
+ background-image: -o-linear-gradient(-45deg, rgba(255, 154, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 154, 26, .10) 50%, rgba(255, 154, 26, .10) 75%, transparent 75%, transparent);
206
+ background-image: linear-gradient(-45deg, rgba(255, 154, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 154, 26, .10) 50%, rgba(255, 154, 26, .10) 75%, transparent 75%, transparent);
207
+ -webkit-animation: chosen-animate-stripes 3s linear infinite;
208
+ -moz-animation: chosen-animate-stripes 3s linear infinite;
209
+ -ms-animation: chosen-animate-stripes 3s linear infinite;
210
+ animation: chosen-animate-stripes 3s linear infinite;
211
+
212
+ ul.chosen-choices {
213
+ background-color: transparent;
214
+ }
215
+ }
216
+
217
+ &.error {
218
+ -webkit-background-size: 50px 50px;
219
+ -moz-background-size: 50px 50px;
220
+ background-size: 50px 50px;
221
+ background-image: -webkit-linear-gradient(-45deg, rgba(255, 68, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 68, 26, .10) 50%, rgba(255, 68, 26, .10) 75%, transparent 75%, transparent);
222
+ background-image: -moz-linear-gradient(-45deg, rgba(255, 68, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 68, 26, .10) 50%, rgba(255, 68, 26, .10) 75%, transparent 75%, transparent);
223
+ background-image: -ms-linear-gradient(-45deg, rgba(255, 68, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 68, 26, .10) 50%, rgba(255, 68, 26, .10) 75%, transparent 75%, transparent);
224
+ background-image: -o-linear-gradient(-45deg, rgba(255, 68, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 68, 26, .10) 50%, rgba(255, 68, 26, .10) 75%, transparent 75%, transparent);
225
+ background-image: linear-gradient(-45deg, rgba(255, 68, 26, .10) 25%, transparent 25%, transparent 50%, rgba(255, 68, 26, .10) 50%, rgba(255, 68, 26, .10) 75%, transparent 75%, transparent);
226
+
227
+ ul.chosen-choices {
228
+ background-color: transparent;
229
+ }
230
+ }
231
+ }
232
+
233
+ .chosen-dropdown {
234
+ position: absolute;
235
+ overflow-x: hidden;
236
+ overflow-y: auto;
237
+ cursor: default;
238
+ border-width: $border_width;
239
+ border-style: $border_style;
240
+ border-color: $border_color_active;
241
+ background: $background_color_default;
242
+ z-index: 10000;
243
+ zoom: 1;
244
+
245
+ &.downside {
246
+ border-top: none;
247
+ }
248
+
249
+ &.upside {
250
+ border-bottom: none;
251
+ }
252
+
253
+ ul {
254
+ position: relative;
255
+ display: block;
256
+ width: 100%;
257
+ height: auto;
258
+ margin: 0;
259
+ padding: 0;
260
+
261
+ li {
262
+ position: relative;
263
+ display: block;
264
+ list-style: none;
265
+ margin: 0;
266
+ padding: 2px 6px;
267
+ word-wrap: break-word;
268
+ }
269
+
270
+ li.chosen-noresults {
271
+ color: $color_active;
272
+ background-color: $background_color_active;
273
+ }
274
+
275
+ li.chosen-group {
276
+ font-weight: bold;
277
+ color: $group_color;
278
+ text-transform: uppercase;
279
+ }
280
+
281
+ li.chosen-option {
282
+ }
283
+
284
+ li.chosen-option.group {
285
+ padding-left: 20px;
286
+ }
287
+
288
+ li.chosen-option.selected {
289
+ color: $color_selected;
290
+ }
291
+
292
+ li.chosen-option.disabled {
293
+ color: $color_disabled;
294
+ }
295
+
296
+ li.chosen-option.active {
297
+ color: $color_active;
298
+ background-color: $background_color_active;
299
+ }
300
+
301
+ li.chosen-option.active.selected {
302
+ color: $color_selected;
303
+ }
304
+
305
+ li.chosen-option.active.disabled {
306
+ color: $color_disabled;
307
+ }
308
+
309
+ li.chosen-option.disabled.active,
310
+ li.chosen-option.selected.active {
311
+ background-color: $background_color_disabled;
312
+ }
313
+ }
314
+ }
315
+
316
+ @-webkit-keyframes chosen-animate-stripes {
317
+ 0% { background-position: 50px 50px; }
318
+ 100% { background-position: 0 0; }
319
+ }
320
+
321
+ @-moz-keyframes chosen-animate-stripes {
322
+ 0% { background-position: 50px 50px; }
323
+ 100% { background-position: 0 0; }
324
+ }
325
+
326
+ @-ms-keyframes chosen-animate-stripes {
327
+ 0% { background-position: 50px 50px; }
328
+ 100% { background-position: 0 0; }
329
+ }
330
+
331
+ @keyframes chosen-animate-stripes {
332
+ 0% { background-position: 50px 50px; }
333
+ 100% { background-position: 0 0; }
334
+ }