ios-checkboxes 0.1.2 → 0.1.3

data/HISTORY.md

@@ -1,3 +1,8 @@
+0.1.3 - Tue 22 Nov 2011
+========================================
+- Ability to customise using SASS mixins as hooks
+- Allow to remove the variable value altoether by giving it an empty string (`$iphone-style-images-path: ''`)
+
 0.1.2 - Mon 21 Nov 2011
 ========================================
 - Customise the images, sizes etc via SASS

data/README.md

@@ -9,7 +9,7 @@ Install
 Add `gem 'ios-checkboxes'` to your Gemfile and run `bundle install`
 
 
-Usage
+Using with Rails 3.1
 ========================================
 
 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
 Customisation
 ========================================
 
+Basic
+----------------------------------------
+
 If the defaut stylesheet doesn't fit your design, you can customize it.
 
-First, add a `.css.sass` file to your application:
+Add a `.css.sass` file to your application and requer it.
+The basic example may look like this:
 
 ```sass
 // app/assets/stylesheets/iphone.css.sass
-@import "./ios-checkboxes/mixins"
+@import "ios-checkboxes/mixins"
 
-// This will change the default for everything
+// This will change the defaults for everything
 $iphone-style-height: 33px // Default = 27px
 $iphone-style-font-size: 30px // Default = 17px
 $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
   +iphone-style
 ```
 
+
 If you modify the `$iphone-style-images-path` then you have to provide a (Sprockets) directory with the following files:
 
 ```
@@ -82,6 +87,87 @@ slider_left.png
 slider_right.png
 ```
 
+Advanced
+----------------------------------------
+
+If overriding existing variables doesn't work for you and you don't want to write everything from scratch,
+then you can customise using the hooks provided.
+For example, this creates the iOS 5 On/Off buttons (round ones) and uses no images whatsoever.
+
+```sass
+@import "compass/css3/images"
+@import "compass/css3/border-radius"
+@import "compass/css3/box-shadow"
+@import "ios-checkboxes/mixins"
+
+
+// Override the ios-checboxes defaults
+// Empty string disables the property (can't be applied to height)
+$iphone-style-font: ''
+$iphone-style-height: 1.8em
+$iphone-style-font-size: ''
+$iphone-style-images-path: ''
+
+// Define additional variables
+$onoff-active: #136785
+$onoff-active-alt: #1c94bf
+$onoff-back: #bfbfbf
+
+$onoff-radius: $iphone-style-height / 2
+
+=iphone-style-visual-container
+  width: 6 * $onoff-radius
+  // We add borders inside, so need to increse the padding
+  padding: 1px
+
+
+=iphone-style-label
+  +border-radius($onoff-radius)
+  text-align: center
+  text-transform: uppercase
+
+=iphone-style-label-on
+  left: 0
+  padding-right: $onoff-radius
+  border: 1px solid $onoff-active
+  color: white
+  background: $onoff-active
+  +background-image(linear-gradient(top, $onoff-active, $onoff-active-alt))
+  +box-shadow($onoff-back 0 0 2px inset)
+  // Don't squeeze the On button too much to make sure the handle overlaps fully with it
+  // this way it can interset with handler
+  min-width: $onoff-radius*0.9
+    
+
+=iphone-style-label-off
+  left: $onoff-radius
+  margin-left: -$onoff-radius
+  text-align: right
+  border: 1px solid $onoff-back
+  color: #666666
+  background: $onoff-back
+  +background-image(linear-gradient(top, $onoff-back, white))
+  span
+    padding-right: $onoff-radius
+
+
+=iphone-style-visual-handle
+  width: $onoff-radius * 2
+  height: $onoff-radius * 2
+  +border-radius($onoff-radius)
+  background: $onoff-back
+  border: 1px solid $onoff-back
+  +background-image(linear-gradient(top, $onoff-back, white))
+
+// Additional hooks that you can override are:
+// =iphone-style-visual-handle-right
+// =iphone-style-visual-handle-center
+
+
+// And finally emit the stylesheet
++iphone-style
+```
+
 
 
 Development

data/lib/assets/stylesheets/ios-checkboxes/_mixins.sass

@@ -1,9 +1,10 @@
 @import "compass/css3/opacity"
 
+
 $iphone-style-mode: "cross-browser"
 $iphone-style-font: "Helvetica Neue", Arial, Helvetica, sans-serif
 $iphone-style-height: 27px
-$iphone-style-font-size: 17x
+$iphone-style-font-size: 17px
 $iphone-style-images-path: 'ios-checkboxes'
 
 =iphone-style($selector-prefix: "iPhoneCheck")
@@ -38,6 +39,12 @@ $iphone-style-images-path: 'ios-checkboxes'
 =iphone-style-disabled
   +opacity(0.5)
 
+=iphone-style-label
+  padding-top: 5px
+  font-weight: bold
+
+=iphone-style-visual-container
+
 =iphone-style-container
   position: relative
   height: $iphone-style-height
@@ -50,22 +57,25 @@ $iphone-style-images-path: 'ios-checkboxes'
     +opacity(0)
   label
     white-space: nowrap
-    font-size: $iphone-style-font-size
-    line-height: $iphone-style-font-size
-    font-weight: bold
-    font-family: $iphone-style-font
+    @if $iphone-style-font-size != ''
+      font-size: $iphone-style-font-size
+      line-height: $iphone-style-font-size
+    @if $iphone-style-font != ''
+      font-family: $iphone-style-font
     cursor: pointer
     display: block
     height: $iphone-style-height
     position: absolute
     width: auto
     top: 0
-    padding-top: 5px
     overflow: hidden
+    +iphone-style-label
+  +iphone-style-visual-container
 
 =iphone-style-label-on
   color: #fff
-  background: image-url("#{$iphone-style-images-path}/on.png") no-repeat
+  @if $iphone-style-images-path != ''
+    background: image-url("#{$iphone-style-images-path}/on.png") no-repeat
   text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6)
   left: 0
   padding-top: 5px
@@ -74,13 +84,19 @@ $iphone-style-images-path: 'ios-checkboxes'
 
 =iphone-style-label-off
   color: #8B8B8B
-  background: image-url("#{$iphone-style-images-path}/off.png") no-repeat right 0
+  @if $iphone-style-images-path != ''
+    background: image-url("#{$iphone-style-images-path}/off.png") no-repeat right 0
   text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6)
   text-align: right
   right: 0
   span
     padding-right: 8px
 
+
+=iphone-style-visual-handle
+  @if $iphone-style-images-path != ''
+    background: image-url("#{$iphone-style-images-path}/slider_left.png") no-repeat
+  padding-left: 3px
 =iphone-style-handle
   display: block
   height: $iphone-style-height
@@ -89,16 +105,22 @@ $iphone-style-images-path: 'ios-checkboxes'
   top: 0
   left: 0
   width: 0
-  background: image-url("#{$iphone-style-images-path}/slider_left.png") no-repeat
-  padding-left: 3px
+  +iphone-style-visual-handle
+
 
+=iphone-style-visual-handle-right
+  padding-right: 3px
+  @if $iphone-style-images-path != ''
+    background: image-url("#{$iphone-style-images-path}/slider_right.png") no-repeat right 0
 =iphone-style-handle-right
   height: 100%
   width: 100%
-  padding-right: 3px
-  background: image-url("#{$iphone-style-images-path}/slider_right.png") no-repeat right 0
+  +iphone-style-visual-handle-right
 
+=iphone-style-visual-handle-center
+  @if $iphone-style-images-path != ''
+    background: image-url("#{$iphone-style-images-path}/slider_center.png")
 =iphone-style-handle-center
   height: 100%
   width: 100%
-  background: image-url("#{$iphone-style-images-path}/slider_center.png")
+  +iphone-style-visual-handle-center

data/lib/ios-checkboxes/version.rb

@@ -1,3 +1,3 @@
 module IosCheckboxes
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: ios-checkboxes
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
   prerelease: 
 platform: ruby
 authors:
@@ -9,11 +9,11 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2011-11-21 00:00:00.000000000 Z
+date: 2011-11-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
-  requirement: &70120413960860 !ruby/object:Gem::Requirement
+  requirement: &70111345873420 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ~>
@@ -21,10 +21,10 @@ dependencies:
         version: 3.1.2
   type: :runtime
   prerelease: false
-  version_requirements: *70120413960860
+  version_requirements: *70111345873420
 - !ruby/object:Gem::Dependency
   name: sass-rails
-  requirement: &70120413960400 !ruby/object:Gem::Requirement
+  requirement: &70111345872840 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -32,10 +32,10 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70120413960400
+  version_requirements: *70111345872840
 - !ruby/object:Gem::Dependency
   name: compass
-  requirement: &70120413959720 !ruby/object:Gem::Requirement
+  requirement: &70111345871800 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -43,10 +43,10 @@ dependencies:
         version: 0.12.alpha.1
   type: :runtime
   prerelease: false
-  version_requirements: *70120413959720
+  version_requirements: *70111345871800
 - !ruby/object:Gem::Dependency
   name: rspec-rails
-  requirement: &70120413959240 !ruby/object:Gem::Requirement
+  requirement: &70111345871320 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -54,7 +54,7 @@ dependencies:
         version: '0'
   type: :development
   prerelease: false
-  version_requirements: *70120413959240
+  version_requirements: *70111345871320
 description: Easily convert your checkboxes into iPhone style On/Off buttons. Use
   with Rails 3.1 Assets Pipeline.
 email:
@@ -153,7 +153,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 4183009581992757396
+      hash: 3583560109010464864
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -162,7 +162,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: 4183009581992757396
+      hash: 3583560109010464864
 requirements: []
 rubyforge_project: 
 rubygems_version: 1.8.10