wrong merge, oops

djanix · Sep 3, 2014 · 5be5ad9 · 5be5ad9
1 parent aa501d8
commit 5be5ad9
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@ jquery.switcher v1.2.3
 
 Custom checkbox / radio button in jquery
 
-see live example [here](https://cdn.rawgit.com/djanix/jquery.switcher/master/index.html)
+see live example [here](https://rawgit.com/djanix/jquery.switcher/master/index.html)
 
 ### How to get it
 

diff --git a/dist/switcher.js b/dist/switcher.js
@@ -1,16 +1,7 @@
-/*
- *  jQuery Boilerplate - v3.3.4
- *  A jump-start for jQuery plugins development.
- *  http://jqueryboilerplate.com
- *
- *  Made by Zeno Rocha
- *  Under MIT License
- */
-
 /* jquery.switcher - 1.2.3
- * Copyright (c) 2014-08-19 Janic Beauchemin - https://github.com/djanix/ */
+ * Copyright (c) 2014-09-03 Janic Beauchemin - https://github.com/djanix/ */
 
- ;(function ($, window, document, undefined) {
+ ;(function ($, undefined) {
     var pluginName = "switcher";
 
     var defaults = {
@@ -262,4 +253,4 @@
     });
 //  END SWIPE EVENTS
 //  -----------------------------------------------------------------------
-})($, window, document);
+})($);
diff --git a/dist/switcher.min.js b/dist/switcher.min.js
diff --git a/index.html b/index.html
@@ -33,6 +33,15 @@
             margin: 0.5em 0;
         }
 
+        label {
+            font-size: 14px;
+            margin-bottom: 5px;
+
+            display: inline-block;
+            *display: inline;
+            *zoom: 1;
+        }
+
         .style {
             border-bottom: 3px solid #519b20;
             text-align: left;
@@ -63,7 +72,7 @@
 <h1>Jquery Switcher</h1>
 
 <div class="style style1">
-    <h2>Style #1 (default style):</h2>
+    <h2>Style #1 (default):</h2>
 
     <div class="checkbox">
         <h3>Checkbox</h3>
@@ -104,7 +113,7 @@ <h4>Controls:</h4>
 </div>
 
 <div class="style style2">
-    <h2>Style #2:</h2>
+    <h2>Style #2 (short):</h2>
 
     <div class="checkbox">
         <h3>Checkbox</h3>

diff --git a/switcher.js b/switcher.js
@@ -1,16 +1,7 @@
-/*
- *  jQuery Boilerplate - v3.3.4
- *  A jump-start for jQuery plugins development.
- *  http://jqueryboilerplate.com
- *
- *  Made by Zeno Rocha
- *  Under MIT License
- */
-
 /* jquery.switcher - 1.2.3
- * Copyright (c) 2014-08-19 Janic Beauchemin - https://github.com/djanix/ */
+ * Copyright (c) 2014-09-03 Janic Beauchemin - https://github.com/djanix/ */
 
- ;(function ($, window, document, undefined) {
+ ;(function ($, undefined) {
     var pluginName = "switcher";
 
     var defaults = {
@@ -262,4 +253,4 @@
     });
 //  END SWIPE EVENTS
 //  -----------------------------------------------------------------------
-})($, window, document);
+})($);
diff --git a/switcher.scss b/switcher.scss
@@ -46,6 +46,20 @@ $fontFamily: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
         display: none;
     }
 
+    .slider {
+        background-color: $colorSecondary;
+        border-radius: 4px;
+        box-shadow: 0 0 2px 1px $colorBorder;
+        height: 26px;
+        left: 0;
+        position: absolute;
+        top: 0;
+        transform: translateX(0%);
+        transition: transform 0.3s;
+        width: 50%;
+        z-index: 2;
+    }
+
     .text {
         width: 50%;
 
@@ -71,51 +85,44 @@ $fontFamily: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
             transform: translateX(100%);
         }
     }
-
-    .slider {
-        background-color: $colorSecondary;
-        border-radius: 4px;
-        box-shadow: 0 0 2px 1px $colorBorder;
-        height: 26px;
-        left: 0;
-        position: absolute;
-        top: 0;
-        transform: translateX(0%);
-        transition: transform 0.3s;
-        width: 50%;
-        z-index: 2;
-    }
 }
 
 .switcher.short {
     $colorActive: #519b20;
-    $colorSecondary: #BF1111;
-    $colorBorder: #dfdfdf;
+    $colorBorder: #aaa;
 
-    border: 1px solid $colorBorder;
-    border-radius: 50%;
-    margin-bottom: -3px;
-    padding: 1px;
+    cursor: pointer;
+    display: inline-block;
+    margin-right: 5px;
+    vertical-align: middle;
 
     input {
         display: none;
     }
 
-    .slider {
-        background-color: $colorSecondary;
+    .content {
+        border: 1px solid $colorBorder;
         border-radius: 50%;
-        height: 15px;
-        transition: background-color 0.3s;
-        width: 15px;
+        height: 18px;
+        padding: 0;
+        width: 18px;
+    }
 
-        &:after {
-            color: #fff;
-        }
+    .slider {
+        background-color: $colorActive;
+        border-radius: 50%;
+        height: 12px;
+        margin: 3px;
+        opacity: 0;
+        transform: scale(0);
+        transition: all 0.2s;
+        width: 12px;
     }
 
     &.is-active {
         .slider {
-            background-color: $colorActive;
+            opacity: 1;
+            transform: scale(1);
         }
     }
 }