ios-checkboxes 0.1.2 → 0.1.3

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.
data/HISTORY.md CHANGED
@@ -1,3 +1,8 @@
1
+ 0.1.3 - Tue 22 Nov 2011
2
+ ========================================
3
+ - Ability to customise using SASS mixins as hooks
4
+ - Allow to remove the variable value altoether by giving it an empty string (`$iphone-style-images-path: ''`)
5
+
1
6
  0.1.2 - Mon 21 Nov 2011
2
7
  ========================================
3
8
  - Customise the images, sizes etc via SASS
data/README.md CHANGED
@@ -9,7 +9,7 @@ Install
9
9
  Add `gem 'ios-checkboxes'` to your Gemfile and run `bundle install`
10
10
 
11
11
 
12
- Usage
12
+ Using with Rails 3.1
13
13
  ========================================
14
14
 
15
15
  Add `//=require ios-checkboxes` to your `app/assets/javascripts/application.js`.
@@ -48,15 +48,19 @@ The use of the "digest" appended to the end of file ensures that your users will
48
48
  Customisation
49
49
  ========================================
50
50
 
51
+ Basic
52
+ ----------------------------------------
53
+
51
54
  If the defaut stylesheet doesn't fit your design, you can customize it.
52
55
 
53
- First, add a `.css.sass` file to your application:
56
+ Add a `.css.sass` file to your application and requer it.
57
+ The basic example may look like this:
54
58
 
55
59
  ```sass
56
60
  // app/assets/stylesheets/iphone.css.sass
57
- @import "./ios-checkboxes/mixins"
61
+ @import "ios-checkboxes/mixins"
58
62
 
59
- // This will change the default for everything
63
+ // This will change the defaults for everything
60
64
  $iphone-style-height: 33px // Default = 27px
61
65
  $iphone-style-font-size: 30px // Default = 17px
62
66
  $iphone-style-images-path: 'custom-path-to-images' // Default = ios-checkboxes
@@ -71,6 +75,7 @@ $iphone-style-images-path: 'custom-path-to-images' // Default = ios-checkboxes
71
75
  +iphone-style
72
76
  ```
73
77
 
78
+
74
79
  If you modify the `$iphone-style-images-path` then you have to provide a (Sprockets) directory with the following files:
75
80
 
76
81
  ```
@@ -82,6 +87,87 @@ slider_left.png
82
87
  slider_right.png
83
88
  ```
84
89
 
90
+ Advanced
91
+ ----------------------------------------
92
+
93
+ If overriding existing variables doesn't work for you and you don't want to write everything from scratch,
94
+ then you can customise using the hooks provided.
95
+ For example, this creates the iOS 5 On/Off buttons (round ones) and uses no images whatsoever.
96
+
97
+ ```sass
98
+ @import "compass/css3/images"
99
+ @import "compass/css3/border-radius"
100
+ @import "compass/css3/box-shadow"
101
+ @import "ios-checkboxes/mixins"
102
+
103
+
104
+ // Override the ios-checboxes defaults
105
+ // Empty string disables the property (can't be applied to height)
106
+ $iphone-style-font: ''
107
+ $iphone-style-height: 1.8em
108
+ $iphone-style-font-size: ''
109
+ $iphone-style-images-path: ''
110
+
111
+ // Define additional variables
112
+ $onoff-active: #136785
113
+ $onoff-active-alt: #1c94bf
114
+ $onoff-back: #bfbfbf
115
+
116
+ $onoff-radius: $iphone-style-height / 2
117
+
118
+ =iphone-style-visual-container
119
+ width: 6 * $onoff-radius
120
+ // We add borders inside, so need to increse the padding
121
+ padding: 1px
122
+
123
+
124
+ =iphone-style-label
125
+ +border-radius($onoff-radius)
126
+ text-align: center
127
+ text-transform: uppercase
128
+
129
+ =iphone-style-label-on
130
+ left: 0
131
+ padding-right: $onoff-radius
132
+ border: 1px solid $onoff-active
133
+ color: white
134
+ background: $onoff-active
135
+ +background-image(linear-gradient(top, $onoff-active, $onoff-active-alt))
136
+ +box-shadow($onoff-back 0 0 2px inset)
137
+ // Don't squeeze the On button too much to make sure the handle overlaps fully with it
138
+ // this way it can interset with handler
139
+ min-width: $onoff-radius*0.9
140
+
141
+
142
+ =iphone-style-label-off
143
+ left: $onoff-radius
144
+ margin-left: -$onoff-radius
145
+ text-align: right
146
+ border: 1px solid $onoff-back
147
+ color: #666666
148
+ background: $onoff-back
149
+ +background-image(linear-gradient(top, $onoff-back, white))
150
+ span
151
+ padding-right: $onoff-radius
152
+
153
+
154
+ =iphone-style-visual-handle
155
+ width: $onoff-radius * 2
156
+ height: $onoff-radius * 2
157
+ +border-radius($onoff-radius)
158
+ background: $onoff-back
159
+ border: 1px solid $onoff-back
160
+ +background-image(linear-gradient(top, $onoff-back, white))
161
+
162
+ // Additional hooks that you can override are:
163
+ // =iphone-style-visual-handle-right
164
+ // =iphone-style-visual-handle-center
165
+
166
+
167
+ // And finally emit the stylesheet
168
+ +iphone-style
169
+ ```
170
+
85
171
 
86
172
 
87
173
  Development
@@ -1,9 +1,10 @@
1
1
  @import "compass/css3/opacity"
2
2
 
3
+
3
4
  $iphone-style-mode: "cross-browser"
4
5
  $iphone-style-font: "Helvetica Neue", Arial, Helvetica, sans-serif
5
6
  $iphone-style-height: 27px
6
- $iphone-style-font-size: 17x
7
+ $iphone-style-font-size: 17px
7
8
  $iphone-style-images-path: 'ios-checkboxes'
8
9
 
9
10
  =iphone-style($selector-prefix: "iPhoneCheck")
@@ -38,6 +39,12 @@ $iphone-style-images-path: 'ios-checkboxes'
38
39
  =iphone-style-disabled
39
40
  +opacity(0.5)
40
41
 
42
+ =iphone-style-label
43
+ padding-top: 5px
44
+ font-weight: bold
45
+
46
+ =iphone-style-visual-container
47
+
41
48
  =iphone-style-container
42
49
  position: relative
43
50
  height: $iphone-style-height
@@ -50,22 +57,25 @@ $iphone-style-images-path: 'ios-checkboxes'
50
57
  +opacity(0)
51
58
  label
52
59
  white-space: nowrap
53
- font-size: $iphone-style-font-size
54
- line-height: $iphone-style-font-size
55
- font-weight: bold
56
- font-family: $iphone-style-font
60
+ @if $iphone-style-font-size != ''
61
+ font-size: $iphone-style-font-size
62
+ line-height: $iphone-style-font-size
63
+ @if $iphone-style-font != ''
64
+ font-family: $iphone-style-font
57
65
  cursor: pointer
58
66
  display: block
59
67
  height: $iphone-style-height
60
68
  position: absolute
61
69
  width: auto
62
70
  top: 0
63
- padding-top: 5px
64
71
  overflow: hidden
72
+ +iphone-style-label
73
+ +iphone-style-visual-container
65
74
 
66
75
  =iphone-style-label-on
67
76
  color: #fff
68
- background: image-url("#{$iphone-style-images-path}/on.png") no-repeat
77
+ @if $iphone-style-images-path != ''
78
+ background: image-url("#{$iphone-style-images-path}/on.png") no-repeat
69
79
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6)
70
80
  left: 0
71
81
  padding-top: 5px
@@ -74,13 +84,19 @@ $iphone-style-images-path: 'ios-checkboxes'
74
84
 
75
85
  =iphone-style-label-off
76
86
  color: #8B8B8B
77
- background: image-url("#{$iphone-style-images-path}/off.png") no-repeat right 0
87
+ @if $iphone-style-images-path != ''
88
+ background: image-url("#{$iphone-style-images-path}/off.png") no-repeat right 0
78
89
  text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6)
79
90
  text-align: right
80
91
  right: 0
81
92
  span
82
93
  padding-right: 8px
83
94
 
95
+
96
+ =iphone-style-visual-handle
97
+ @if $iphone-style-images-path != ''
98
+ background: image-url("#{$iphone-style-images-path}/slider_left.png") no-repeat
99
+ padding-left: 3px
84
100
  =iphone-style-handle
85
101
  display: block
86
102
  height: $iphone-style-height
@@ -89,16 +105,22 @@ $iphone-style-images-path: 'ios-checkboxes'
89
105
  top: 0
90
106
  left: 0
91
107
  width: 0
92
- background: image-url("#{$iphone-style-images-path}/slider_left.png") no-repeat
93
- padding-left: 3px
108
+ +iphone-style-visual-handle
109
+
94
110
 
111
+ =iphone-style-visual-handle-right
112
+ padding-right: 3px
113
+ @if $iphone-style-images-path != ''
114
+ background: image-url("#{$iphone-style-images-path}/slider_right.png") no-repeat right 0
95
115
  =iphone-style-handle-right
96
116
  height: 100%
97
117
  width: 100%
98
- padding-right: 3px
99
- background: image-url("#{$iphone-style-images-path}/slider_right.png") no-repeat right 0
118
+ +iphone-style-visual-handle-right
100
119
 
120
+ =iphone-style-visual-handle-center
121
+ @if $iphone-style-images-path != ''
122
+ background: image-url("#{$iphone-style-images-path}/slider_center.png")
101
123
  =iphone-style-handle-center
102
124
  height: 100%
103
125
  width: 100%
104
- background: image-url("#{$iphone-style-images-path}/slider_center.png")
126
+ +iphone-style-visual-handle-center
@@ -1,3 +1,3 @@
1
1
  module IosCheckboxes
2
- VERSION = "0.1.2"
2
+ VERSION = "0.1.3"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: ios-checkboxes
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.2
4
+ version: 0.1.3
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,11 +9,11 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2011-11-21 00:00:00.000000000 Z
12
+ date: 2011-11-22 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rails
16
- requirement: &70120413960860 !ruby/object:Gem::Requirement
16
+ requirement: &70111345873420 !ruby/object:Gem::Requirement
17
17
  none: false
18
18
  requirements:
19
19
  - - ~>
@@ -21,10 +21,10 @@ dependencies:
21
21
  version: 3.1.2
22
22
  type: :runtime
23
23
  prerelease: false
24
- version_requirements: *70120413960860
24
+ version_requirements: *70111345873420
25
25
  - !ruby/object:Gem::Dependency
26
26
  name: sass-rails
27
- requirement: &70120413960400 !ruby/object:Gem::Requirement
27
+ requirement: &70111345872840 !ruby/object:Gem::Requirement
28
28
  none: false
29
29
  requirements:
30
30
  - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
32
32
  version: '0'
33
33
  type: :runtime
34
34
  prerelease: false
35
- version_requirements: *70120413960400
35
+ version_requirements: *70111345872840
36
36
  - !ruby/object:Gem::Dependency
37
37
  name: compass
38
- requirement: &70120413959720 !ruby/object:Gem::Requirement
38
+ requirement: &70111345871800 !ruby/object:Gem::Requirement
39
39
  none: false
40
40
  requirements:
41
41
  - - ! '>='
@@ -43,10 +43,10 @@ dependencies:
43
43
  version: 0.12.alpha.1
44
44
  type: :runtime
45
45
  prerelease: false
46
- version_requirements: *70120413959720
46
+ version_requirements: *70111345871800
47
47
  - !ruby/object:Gem::Dependency
48
48
  name: rspec-rails
49
- requirement: &70120413959240 !ruby/object:Gem::Requirement
49
+ requirement: &70111345871320 !ruby/object:Gem::Requirement
50
50
  none: false
51
51
  requirements:
52
52
  - - ! '>='
@@ -54,7 +54,7 @@ dependencies:
54
54
  version: '0'
55
55
  type: :development
56
56
  prerelease: false
57
- version_requirements: *70120413959240
57
+ version_requirements: *70111345871320
58
58
  description: Easily convert your checkboxes into iPhone style On/Off buttons. Use
59
59
  with Rails 3.1 Assets Pipeline.
60
60
  email:
@@ -153,7 +153,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
153
153
  version: '0'
154
154
  segments:
155
155
  - 0
156
- hash: 4183009581992757396
156
+ hash: 3583560109010464864
157
157
  required_rubygems_version: !ruby/object:Gem::Requirement
158
158
  none: false
159
159
  requirements:
@@ -162,7 +162,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
162
162
  version: '0'
163
163
  segments:
164
164
  - 0
165
- hash: 4183009581992757396
165
+ hash: 3583560109010464864
166
166
  requirements: []
167
167
  rubyforge_project:
168
168
  rubygems_version: 1.8.10