Permalink
Browse files

prep assets for ios5 design

  • Loading branch information...
1 parent 5e33968 commit 908a3828bd13a34b5690515acb2bdfc8c4bca7fb @tdreyno committed Aug 24, 2011
View
@@ -25,6 +25,8 @@
($ '.disabled :checkbox').iphoneStyle()
+ ($ '.ios5 :checkbox').iOSCheckbox()
+
($ '.css_sized_container :checkbox').iphoneStyle
resizeContainer: false
resizeHandle: false
@@ -56,6 +58,12 @@
<input type="checkbox" id="on_off" />
</td>
</tr>
+ <tr class="ios5">
+ <th><label for="ios5">iOS 5</label></th>
+ <td>
+ <input type="checkbox" id="ios5" />
+ </td>
+ </tr>
<tr class="on_off">
<th><label for="on_off_on">Default On</label></th>
<td>
@@ -209,4 +209,22 @@ $.fn.iphoneStyle = (options) ->
for checkbox in @filter(':checkbox')
$(checkbox).data("iphoneStyle", new iOSCheckbox(checkbox, options))
+ return @
+
+$.fn.iOSCheckbox = (options={}) ->
+ # iOS5 style only supports circular handle
+ opts = $.extend({}, options, {
+ resizeHandle: false
+ disabledClass: 'iOSCheckDisabled'
+ containerClass: 'iOSCheckContainer'
+ labelOnClass: 'iOSCheckLabelOn'
+ labelOffClass: 'iOSCheckLabelOff'
+ handleClass: 'iOSCheckHandle'
+ handleCenterClass: 'iOSCheckHandleCenter'
+ handleRightClass: 'iOSCheckHandleRight'
+ })
+
+ for checkbox in @filter(':checkbox')
+ $(checkbox).data("iOSCheckbox", new iOSCheckbox(checkbox, opts))
+
return @
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1,2 +1,5 @@
@import "iphone-style-checkboxes"
+iphone-style-defaults
+
+@import "ios-style-checkboxes"
++ios-style-defaults
View
@@ -7,9 +7,8 @@
position: absolute;
top: 5px;
left: 30px;
- opacity: 0;
- -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); }
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+ opacity: 0; }
.iPhoneCheckContainer label {
white-space: nowrap;
font-size: 17px;
@@ -31,21 +30,20 @@
-khtml-user-select: none; }
.iPhoneCheckDisabled {
- opacity: 0.5;
- -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
- filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); }
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+ opacity: 0.5; }
label.iPhoneCheckLabelOn {
color: white;
- background: url('images/iphone-style-checkboxes/on.png?1282083753') no-repeat;
+ background: url('images/iphone-style-checkboxes/on.png?1284697268') no-repeat;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
left: 0;
padding-top: 5px; }
label.iPhoneCheckLabelOn span {
padding-left: 8px; }
label.iPhoneCheckLabelOff {
color: #8b8b8b;
- background: url('images/iphone-style-checkboxes/off.png?1282083753') no-repeat right 0;
+ background: url('images/iphone-style-checkboxes/off.png?1284697268') no-repeat right 0;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
text-align: right;
right: 0; }
@@ -60,16 +58,90 @@ label.iPhoneCheckLabelOff {
top: 0;
left: 0;
width: 0;
- background: url('images/iphone-style-checkboxes/slider_left.png?1282083753') no-repeat;
+ background: url('images/iphone-style-checkboxes/slider_left.png?1284697268') no-repeat;
padding-left: 3px; }
.iPhoneCheckHandleRight {
height: 100%;
width: 100%;
padding-right: 3px;
- background: url('images/iphone-style-checkboxes/slider_right.png?1282083753') no-repeat right 0; }
+ background: url('images/iphone-style-checkboxes/slider_right.png?1284697268') no-repeat right 0; }
.iPhoneCheckHandleCenter {
height: 100%;
width: 100%;
- background: url('images/iphone-style-checkboxes/slider_center.png?1282083753'); }
+ background: url('images/iphone-style-checkboxes/slider_center.png?1284697268'); }
+
+.iOSCheckContainer {
+ position: relative;
+ height: 27px;
+ cursor: pointer;
+ overflow: hidden; }
+ .iOSCheckContainer input {
+ position: absolute;
+ top: 5px;
+ left: 30px;
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+ opacity: 0; }
+ .iOSCheckContainer label {
+ white-space: nowrap;
+ font-size: 17px;
+ line-height: 17px;
+ font-weight: bold;
+ font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+ text-transform: uppercase;
+ cursor: pointer;
+ display: block;
+ height: 27px;
+ position: absolute;
+ width: auto;
+ top: 0;
+ padding-top: 5px;
+ overflow: hidden; }
+ .iOSCheckContainer, .iOSCheckContainer label {
+ user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none; }
+
+.iOSCheckDisabled {
+ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
+ opacity: 0.5; }
+
+label.iOSCheckLabelOn {
+ color: white;
+ background: url('images/ios-style-checkboxes/on.png?1284697268') no-repeat;
+ text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
+ left: 0;
+ padding-top: 5px; }
+ label.iOSCheckLabelOn span {
+ padding-left: 8px; }
+label.iOSCheckLabelOff {
+ color: #8b8b8b;
+ background: url('images/ios-style-checkboxes/off.png?1284697268') no-repeat right 0;
+ text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
+ text-align: right;
+ right: 0; }
+ label.iOSCheckLabelOff span {
+ padding-right: 8px; }
+
+.iOSCheckHandle {
+ display: block;
+ height: 27px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0;
+ background: url('images/ios-style-checkboxes/slider_left.png?1284697268') no-repeat;
+ padding-left: 3px; }
+
+.iOSCheckHandleRight {
+ height: 100%;
+ width: 100%;
+ padding-right: 3px;
+ background: url('images/ios-style-checkboxes/slider_right.png?1284697268') no-repeat right 0; }
+
+.iOSCheckHandleCenter {
+ height: 100%;
+ width: 100%;
+ background: url('images/ios-style-checkboxes/slider_center.png?1284697268'); }

0 comments on commit 908a382

Please sign in to comment.