Merge pull request #75 from MikeBallan/updated_checkbox_switches

[Checkbox switches] Updates look of the switch
OwlyStuff · May 26, 2016 · 3478b63 · 3478b63
2 parents 72b10e0 + fc5c5b6
commit 3478b63
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/scss/_form.scss b/scss/_form.scss
@@ -174,12 +174,16 @@ Toggle Checkboxes & Radios
 /***********************************************
 Switch Checkboxes
 ***********************************************/
-.checkbox.switch > span                                     { padding:2px; height:30px; min-width:55px; border:1px solid #BBB; border-radius:3px; }
-.checkbox.switch > span label                               { padding:0; width:100%; min-height:24px; font-size:14px; line-height:20px; text-align:left; cursor:pointer; float:none; display:block; overflow:hidden; position:relative; left:0; top:0; }
+.checkbox.apple-switch > span                               { padding:0; height:34px; min-width:52px; }
+.checkbox.apple-switch > span label                         { padding:0; width:100%; min-height:28px; cursor:pointer; float:none; display:block; overflow:hidden; position:relative; left:0; top:0; }
 
-.checkbox.switch label span                                 { text-align:center; display:block; float:left; }
-.checkbox.switch input + label:before                       { content:''; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTFCRTE4Q0YxNTc5MTFFNjlCOTU5QjY1QkU5MkYyMDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTFCRTE4RDAxNTc5MTFFNjlCOTU5QjY1QkU5MkYyMDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBMUJFMThDRDE1NzkxMUU2OUI5NTlCNjVCRTkyRjIwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMUJFMThDRTE1NzkxMUU2OUI5NTlCNjVCRTkyRjIwOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlaiBEoAAAEWSURBVHjaYvr//z8DJZiJAQKqgPgtEDszEAZxQPweiEPAPKhJx/5DwFcgtsVjYwQQ/4GqXQYSg0moA/ELqMQnILbEojkYSfM1IBZDNgCEdYD4FVTBByA2QZLzA+KfULnbQCwFk0O3RR+I30IVvgNiAyD2QNJ8F4hlkPVg86cJ1AUg8AYaLiDwCIgV0NXjCixQGHz8jwCPgVgFXzRiA4xo/L/YFGEzwBSItwMxLxC/AeJvQCwDxHuBWBZDNZqTDKCB9x8amCC+CxB/Q4oBaVxhgC8aPZFi4joQi6MboAHEL6EKPuJISP5IhlwGYlFkA04TmZRDkFLjEuRYWAvE74DYF4gP44mZNUAcC81Mm8FRBXYGBQAgwADmMFste788IAAAAABJRU5ErkJggg=="); background-repeat:no-repeat; background-size:10px; background-position:center; color:#FFF; line-height:24px; display:block; width:24px; height:24px; border:none; border-radius:3px; background-color:#6A8092; }
-.checkbox.switch input:checked + label:before               { content:''; background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTFCRTE4Q0IxNTc5MTFFNjlCOTU5QjY1QkU5MkYyMDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTFCRTE4Q0MxNTc5MTFFNjlCOTU5QjY1QkU5MkYyMDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MkMxNjBDNjBFMTYxMUU2OUI5NTlCNjVCRTkyRjIwOCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBMUJFMThDQTE1NzkxMUU2OUI5NTlCNjVCRTkyRjIwOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuFgne4AAADHSURBVHjaYvj//z8DGdgFiL8BcSM5mlWA+N1/CPhDqmY+IL72HwE6SNHMBMSbkDRvBImRYkArkuYLQMwDEidWcziS5hdALAeTAxFsQGyAR7MhNMRB4DsQWyDLg4j1UMkSLJrFgfghku2R6GoYkEwHgTAkSZDLDiHJNWNzIYiIQFL0E4htoZIzkcRXAjEjLgNAOB9J8Wcg3ofEPwPEXLjCCFc0wcATIJbEF0PIHJAT5yJpBoWNEaEoRhdgBuIV0OgKICaNAAQYAPD/2FJuxgMsAAAAAElFTkSuQmCC"); background-repeat:no-repeat; background-size:10px; background-position:center; line-height:24px; left:50%; background-color:#29B765; }
+.checkbox.apple-switch label span                           { display:block; }
+
+.checkbox.apple-switch input + label                        { background-color:#C0C2C3; border-radius:5px; transition:background .1s linear 0s; -moz-transition:background .1s linear 0s; -webkit-transition:background .1s linear 0s; -o-transition:background .1s linear 0s; }
+.checkbox.apple-switch input + label:before                 { background-color:#FFF; content:'&#9776;'; display:block; width:24px; height:24px; color:#C0C2C3; font-size:13px; line-height:24px; border:none; border-radius:3px; top:2px; left:2px; transform:rotate(90deg); }
+
+.checkbox.apple-switch input:checked + label                { background-color:#29B765; }
+.checkbox.apple-switch input:checked + label:before         { left:50%; }
 
 /***********************************************
 Toggle Labeled Checkboxes