chosen.scss 1.0.8 → 1.0.9
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +14 -14
- data/stylesheets/_chosen.scss +3 -1
- data/stylesheets/chosen/_chosen-base.scss +9 -9
- data/stylesheets/chosen/_chosen-multi.scss +11 -11
- data/stylesheets/chosen/_chosen-rtl.scss +8 -8
- data/stylesheets/chosen/_chosen-single.scss +12 -12
- metadata +11 -6
data/README.md
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
Chosen.scss
|
2
2
|
===========
|
3
3
|
Chosen.scss is a compass implementation of [Chosen](http://harvesthq.github.com/chosen/). It is currently based on Chosen `0.9.8`
|
4
|
-
This is currently in version [`1.0.8`](https://rubygems.org/gems/chosen.scss)
|
4
|
+
This is currently in version [`1.0.8`](https://rubygems.org/gems/chosen.scss) and *is* __production ready__.
|
5
5
|
|
6
6
|
Installation
|
7
7
|
------------
|
8
8
|
Install the gem:
|
9
9
|
|
10
|
-
gem install
|
10
|
+
gem install chosen.scss
|
11
11
|
|
12
12
|
Add the following line to the top of your `config.rb`:
|
13
13
|
|
@@ -26,7 +26,7 @@ Either import all of the Chosen css:
|
|
26
26
|
Or import the bits you need:
|
27
27
|
|
28
28
|
//ALWAYS import base styles:
|
29
|
-
@import "chosen/chosen-base"; //Which will import chosen/chosen-mixins -> see
|
29
|
+
@import "chosen/chosen-base"; //Which will import chosen/chosen-mixins -> see mixins beneath
|
30
30
|
|
31
31
|
//Then import any of these as needed:
|
32
32
|
@import "chosen/chosen-single";
|
@@ -42,10 +42,10 @@ They are as follows:
|
|
42
42
|
|
43
43
|
####`linear-gradient($colorStops, $direction: top, $legacyColorStop: 1, $ieColorStops: '')`
|
44
44
|
#####Params:
|
45
|
-
* `$colorStops`: A list of color stops and their position
|
46
|
-
* `$direction`: `top|bottom|left|right
|
47
|
-
* `$legacyColorStop`: index in the list that will be used as background-color
|
48
|
-
* `$ieColorStops`: The two color stops from the list that will be used for IE. Default is first and last. Other Example:
|
45
|
+
* `$colorStops`: A list of color stops and their position.
|
46
|
+
* `$direction`: `top|bottom|left|right`.
|
47
|
+
* `$legacyColorStop`: index in the list that will be used as `background-color`.
|
48
|
+
* `$ieColorStops`: The two color stops from the list that will be used for IE. Default is first and last. Other Example: `2 4`. This should be a SASS list.
|
49
49
|
|
50
50
|
#####Example:
|
51
51
|
|
@@ -55,7 +55,7 @@ They are as follows:
|
|
55
55
|
|
56
56
|
####`dimensions($dimensions)`
|
57
57
|
#####Params:
|
58
|
-
* `$dimensions`: A list with width and then height
|
58
|
+
* `$dimensions`: A list with `width` and then `height`.
|
59
59
|
|
60
60
|
#####Example:
|
61
61
|
|
@@ -64,17 +64,17 @@ They are as follows:
|
|
64
64
|
* * *
|
65
65
|
|
66
66
|
####`block($dimensions)`
|
67
|
-
Adds display:block;` to above mixin. Made for ease of reading scss styles.
|
67
|
+
Adds `display:block;` to above mixin. Made for ease of reading scss styles.
|
68
68
|
#####Params:
|
69
|
-
|
69
|
+
* See dimensions mixin.
|
70
70
|
|
71
71
|
* * *
|
72
72
|
|
73
73
|
####`pos($type, $position)`
|
74
|
-
Inspired by Stylus Compass equivilant nib
|
74
|
+
Inspired by Stylus' Compass equivilant, nib, pos mixin.
|
75
75
|
#####Params:
|
76
|
-
* `$type`: `absolute|fixed|relative|static|inherit
|
77
|
-
* `$position`: List of positions. See examples for `absolute()`, `fixed()`, `relative()
|
76
|
+
* `$type`: `absolute|fixed|relative|static|inherit`.
|
77
|
+
* `$position`: List of positions. See examples for `absolute()`, `fixed()`, `relative()`.
|
78
78
|
|
79
79
|
* * *
|
80
80
|
|
@@ -84,4 +84,4 @@ All 'child' mixins of `pos()`. Made for ease of reading scss styles.
|
|
84
84
|
|
85
85
|
@include absolute(top right); //Absolutely positions an element in the top right corner
|
86
86
|
@include relative(top 15px left -20px); //Relativly positions an element 15px down and 20px left
|
87
|
-
@include fixed(top left 20px); //Fixes a postion at coordinates (0, 20), which is in the top and 20 px in from the left
|
87
|
+
@include fixed(top left 20px); //Fixes a postion at coordinates (0, 20), which is in the top and 20 px in from the left
|
data/stylesheets/_chosen.scss
CHANGED
@@ -2,12 +2,12 @@
|
|
2
2
|
@import "compass/css3/box-shadow";
|
3
3
|
@import "chosen-mixins";
|
4
4
|
|
5
|
-
|
5
|
+
.#{$base-class}-container {
|
6
6
|
font-size: 13px;
|
7
7
|
position: relative;
|
8
8
|
@include inline-block;
|
9
9
|
|
10
|
-
|
10
|
+
.#{$base-class}-drop {
|
11
11
|
background: #fff;
|
12
12
|
border: 1px solid #aaa;
|
13
13
|
border-top: 0;
|
@@ -16,7 +16,7 @@
|
|
16
16
|
z-index: 999;
|
17
17
|
}
|
18
18
|
|
19
|
-
|
19
|
+
.#{$base-class}-results {
|
20
20
|
margin: 0 4px 4px 0;
|
21
21
|
max-height: 240px;
|
22
22
|
padding: 0 0 0 4px;
|
@@ -29,7 +29,7 @@
|
|
29
29
|
padding: 5px 6px;
|
30
30
|
margin: 0;
|
31
31
|
list-style: none;
|
32
|
-
|
32
|
+
|
33
33
|
em {
|
34
34
|
background: #feffde;
|
35
35
|
font-style: normal;
|
@@ -61,7 +61,7 @@
|
|
61
61
|
}
|
62
62
|
}
|
63
63
|
|
64
|
-
|
64
|
+
.#{$base-class}-results-scroll {
|
65
65
|
background: #fff;
|
66
66
|
margin: 0 4px;
|
67
67
|
position: absolute;
|
@@ -77,7 +77,7 @@
|
|
77
77
|
|
78
78
|
}
|
79
79
|
|
80
|
-
|
80
|
+
.#{$base-class}-results-scroll-down {
|
81
81
|
bottom: 0;
|
82
82
|
|
83
83
|
span {
|
@@ -85,14 +85,14 @@
|
|
85
85
|
}
|
86
86
|
}
|
87
87
|
|
88
|
-
|
88
|
+
.#{$base-class}-results-scroll-up {
|
89
89
|
span {
|
90
90
|
background: image-url('chosen/chosen-sprite.png') -22px -3px no-repeat;
|
91
91
|
}
|
92
92
|
}
|
93
93
|
}
|
94
94
|
|
95
|
-
|
95
|
+
.#{$base-class}-disabled {
|
96
96
|
cursor: default;
|
97
97
|
opacity: 0.5 !important;
|
98
|
-
}
|
98
|
+
}
|
@@ -1,5 +1,5 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
.#{$base-class}-container-multi {
|
2
|
+
.#{$base-class}-choices {
|
3
3
|
@include linear-gradient((#eee 1%, #fff 15%));
|
4
4
|
border: 1px solid #aaa;
|
5
5
|
margin: 0;
|
@@ -9,7 +9,7 @@
|
|
9
9
|
height: auto !important;
|
10
10
|
height: 1%;
|
11
11
|
position: relative;
|
12
|
-
|
12
|
+
|
13
13
|
li {
|
14
14
|
float: left;
|
15
15
|
list-style: none;
|
@@ -63,27 +63,27 @@
|
|
63
63
|
}
|
64
64
|
.search-choice-focus {
|
65
65
|
background: #d4d4d4;
|
66
|
-
|
66
|
+
|
67
67
|
.search-choice-close {
|
68
68
|
background-position: right -11px;
|
69
69
|
}
|
70
70
|
}
|
71
71
|
}
|
72
72
|
|
73
|
-
|
73
|
+
.#{$base-class}-drop {
|
74
74
|
.result-selected {
|
75
75
|
display: none;
|
76
76
|
}
|
77
77
|
}
|
78
78
|
|
79
|
-
|
79
|
+
.#{$base-class}-results {
|
80
80
|
margin: -1px 0 0;
|
81
81
|
padding: 0;
|
82
82
|
}
|
83
83
|
}
|
84
84
|
|
85
|
-
|
86
|
-
|
85
|
+
.#{$base-class}-container-active {
|
86
|
+
.#{$base-class}-choices {
|
87
87
|
@include box-shadow(0 0 5px rgba(0,0,0,.3));
|
88
88
|
border: 1px solid #5897fb;
|
89
89
|
|
@@ -93,8 +93,8 @@
|
|
93
93
|
}
|
94
94
|
}
|
95
95
|
|
96
|
-
|
97
|
-
|
96
|
+
.#{$base-class}-disabled {
|
97
|
+
.#{$base-class}-choices .search-choice .search-choice-close {
|
98
98
|
cursor: default;
|
99
99
|
}
|
100
|
-
}
|
100
|
+
}
|
@@ -1,7 +1,7 @@
|
|
1
|
-
|
1
|
+
.#{$base-class}-rtl {
|
2
2
|
text-align: right;
|
3
3
|
|
4
|
-
|
4
|
+
.#{$base-class}-single {
|
5
5
|
padding: 0 8px 0 0;
|
6
6
|
overflow: visible;
|
7
7
|
|
@@ -20,7 +20,7 @@
|
|
20
20
|
}
|
21
21
|
}
|
22
22
|
|
23
|
-
|
23
|
+
.#{$base-class}-choices {
|
24
24
|
.search-field input {
|
25
25
|
direction: rtl;
|
26
26
|
}
|
@@ -38,21 +38,21 @@
|
|
38
38
|
}
|
39
39
|
}
|
40
40
|
|
41
|
-
|
41
|
+
&.#{$base-class}-container-single .#{$base-class}-results {
|
42
42
|
margin: 0 0 4px 4px;
|
43
43
|
padding: 0 4px 0 0;
|
44
44
|
}
|
45
45
|
|
46
|
-
|
46
|
+
.#{$base-class}-results .group-option {
|
47
47
|
padding-left: 0;
|
48
48
|
padding-right: 15px;
|
49
49
|
}
|
50
50
|
|
51
|
-
|
51
|
+
&.#{$base-class}-container-active .#{$base-class}-single-with-drop div { border-right: none;}
|
52
52
|
|
53
|
-
|
53
|
+
.#{$base-class}-search input {
|
54
54
|
padding: 4px 5px 4px 20px;
|
55
55
|
direction: rtl;
|
56
56
|
@include background(image-url('chosen/chosen-sprite.png') -38 -22px no-repeat, linear-gradient(top, #eee 1%, #fff 15%));
|
57
57
|
}
|
58
|
-
}
|
58
|
+
}
|
@@ -9,8 +9,8 @@ $use-mozilla-ellipsis-binding: true;
|
|
9
9
|
|
10
10
|
@import "compass/typography/text/ellipsis";
|
11
11
|
|
12
|
-
|
13
|
-
|
12
|
+
.#{$base-class}-container-single {
|
13
|
+
.#{$base-class}-single {
|
14
14
|
@include linear-gradient((#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%), top, 1, 1 3);
|
15
15
|
@include border-radius(5px);
|
16
16
|
@include background-clip;
|
@@ -52,7 +52,7 @@ $use-mozilla-ellipsis-binding: true;
|
|
52
52
|
}
|
53
53
|
}
|
54
54
|
|
55
|
-
|
55
|
+
.#{$base-class}-search {
|
56
56
|
padding: 3px 4px;
|
57
57
|
position: relative;
|
58
58
|
margin: 0;
|
@@ -62,7 +62,7 @@ $use-mozilla-ellipsis-binding: true;
|
|
62
62
|
input {
|
63
63
|
background: #fff image-url('chosen/chosen-sprite.png') 100% -22px no-repeat;
|
64
64
|
@include background(
|
65
|
-
image-url('chosen/chosen-sprite.png') 100% -22px no-repeat,
|
65
|
+
image-url('chosen/chosen-sprite.png') 100% -22px no-repeat,
|
66
66
|
linear-gradient(top, #eee 1%, #fff 15%));
|
67
67
|
margin: 1px 0;
|
68
68
|
padding: 4px 20px 4px 5px;
|
@@ -76,22 +76,22 @@ $use-mozilla-ellipsis-binding: true;
|
|
76
76
|
}
|
77
77
|
}
|
78
78
|
|
79
|
-
|
79
|
+
.#{$base-class}-drop {
|
80
80
|
@include border-radius(0 0 4px 4px);
|
81
81
|
@include background-clip;
|
82
82
|
}
|
83
83
|
}
|
84
84
|
|
85
|
-
|
85
|
+
.#{$base-class}-container-single-nosearch .#{$base-class}-search input {
|
86
86
|
@include absolute(left -9000px);
|
87
87
|
}
|
88
88
|
|
89
|
-
|
90
|
-
|
89
|
+
.#{$base-class}-container-active {
|
90
|
+
.#{$base-class}-single {
|
91
91
|
@include box-shadow(0 0 5px rgba(0,0,0, .3));
|
92
92
|
border: 1px solid #5897fb;
|
93
93
|
}
|
94
|
-
|
94
|
+
.#{$base-class}-single-with-drop {
|
95
95
|
border: 1px solid #aaa;
|
96
96
|
@include box-shadow(0 1px 0 #fff inset);
|
97
97
|
@include linear-gradient((#eee 20%, #fff 80%));
|
@@ -109,8 +109,8 @@ $use-mozilla-ellipsis-binding: true;
|
|
109
109
|
}
|
110
110
|
}
|
111
111
|
|
112
|
-
|
113
|
-
|
112
|
+
.#{$base-class}-disabled {
|
113
|
+
.#{$base-class}-single {
|
114
114
|
cursor: default;
|
115
115
|
}
|
116
|
-
}
|
116
|
+
}
|
metadata
CHANGED
@@ -1,19 +1,19 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: chosen.scss
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.9
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
8
|
-
- Emil
|
8
|
+
- Emil Bay
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2013-02-11 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: compass
|
16
|
-
requirement:
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,7 +21,12 @@ dependencies:
|
|
21
21
|
version: '0.11'
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
|
-
version_requirements:
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '0.11'
|
25
30
|
description: ! 'Read more over at github: https://github.com/tixz/chosen.scss'
|
26
31
|
email: compass@tixz.dk
|
27
32
|
executables: []
|
@@ -60,7 +65,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
60
65
|
version: '0'
|
61
66
|
requirements: []
|
62
67
|
rubyforge_project:
|
63
|
-
rubygems_version: 1.8.
|
68
|
+
rubygems_version: 1.8.24
|
64
69
|
signing_key:
|
65
70
|
specification_version: 3
|
66
71
|
summary: Chosen.scss is a compass implementation of Chosen
|