create switch size option

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 bower_components
 .DS_Store
+.idea/

README.md

@@ -79,6 +79,46 @@ You can completely change the design. All the magic is hidden inside two CSS cla
 }
 ```
 
+## Sizes
+
+You can change the sizes of the switch element via size. Giving it a value of small or large will result in adding switchery-small or switchery-large classes respectively, which will change the switch size.
+
+Not using this property will render the default sized switch element.
+
+```html
+<form>
+  <switch id="enabled" name="enabled" ng-model="enabled" size="small" class="green"></switch>
+  <br>{{ enabled }}
+</form>
+```
+
+```html
+<form>
+  <switch id="enabled" name="enabled" ng-model="enabled" size="small" class="green"></switch>
+  <br>{{ enabled }}
+</form>
+```
+
+Alternatively you could just use a class attribute of `class="sm"` or `class="lg"`, which will change the switch size.
+
+Again, not using size element or class attributes property will render the default sized switch element.
+
+```html
+<form>
+  <switch class="sm" id="enabled" name="enabled" ng-model="enabled"></switch>
+  <br>{{ enabled }}
+</form>
+```
+
+```html
+<form>
+  <switch class="lg" id="enabled" name="enabled" ng-model="enabled"></switch>
+  <br>{{ enabled }}
+</form>
+```
+
+![YoomJS](https://raw.githubusercontent.com/EskoCruz/angular-ui-switch/master/switch-size.png)
+
 ## Publishing
 
 1. Update version in `package.json` and `bower.json`.

angular-ui-switch.css

@@ -80,3 +80,37 @@
   opacity: .50;
   cursor: not-allowed;
 }
+
+
+/* Switchery sizes. */
+/* Switchery size shorthand classes */
+
+.switchery-small, .sm {
+  border-radius: 20px;
+  height: 20px;
+  width: 33px;
+}
+
+.switchery-small > small, .sm > small {
+  height: 20px;
+  width: 20px;
+}
+
+.switch.switchery-small.checked small, .switch.sm.checked small {
+  left: 13px;
+}
+
+.switchery-large, .lg {
+  border-radius: 40px;
+  height: 40px;
+  width: 66px;
+}
+
+.switchery-large > small, .lg > small {
+  height: 40px;
+  width: 40px;
+}
+
+.switch.switchery-large.checked small, .switch.lg.checked small {
+  left: 26px;
+}

angular-ui-switch.js

@@ -8,7 +8,9 @@ angular.module('uiSwitch', [])
   , template: function(element, attrs) {
       var html = '';
       html += '<span';
-      html +=   ' class="switch' + (attrs.class ? ' ' + attrs.class : '') + '"';
+      html +=   ' class="switch' + (attrs.class ? ' ' + attrs.class : '');
+      html +=   attrs.size ? ' switchery-' + attrs.size : '';  /*switch size from small to large*/
+      html +=   '"';
       html +=   attrs.ngModel ? ' ng-click="' + attrs.disabled + ' ? ' + attrs.ngModel + ' : ' + attrs.ngModel + '=!' + attrs.ngModel + (attrs.ngChange ? '; ' + attrs.ngChange + '()"' : '"') : '';
       html +=   ' ng-class="{ checked:' + attrs.ngModel + ', disabled:' + attrs.disabled + ' }"';
       html +=   '>';

example/app.js

@@ -5,6 +5,10 @@ angular.module('app', ['uiSwitch'])
   $scope.onOff = true;
   $scope.yesNo = true;
   $scope.disabled = true;
+  $scope.sizeSmall = true;
+  $scope.sizeLarge = true;
+  $scope.sizeClassSmall = true;
+  $scope.sizeClassLarge = true;
 
 
   $scope.changeCallback = function() {

example/index.html

@@ -46,6 +46,38 @@
     <p>
         Enabled: {{ disabled }}
     </p>
+    <!--Examples of using switch small. -->
+    <switch size="small" name="sizeSmall" ng-model="sizeSmall" ></switch>
+    <p>
+        <button ng-click="sizeSmall=!sizeSmall">Toggle</button>
+    </p>
+    <p>
+        Enabled: {{ sizeSmall }}
+    </p>
+    <!--Examples of using switch large. -->
+    <switch size="large" name="sizeLarge" ng-model="sizeLarge"></switch>
+    <p>
+        <button ng-click="sizeLarge=!sizeLarge">Toggle</button>
+    </p>
+    <p>
+      Enabled: {{ sizeLarge }}
+    </p>
+    <!--Examples of using switch class sm for small. -->
+    <switch class="sm" name="sizeClassSmall" ng-model="sizeClassSmall"></switch>
+    <p>
+        <button ng-click="sizeClassSmall=!sizeClassSmall">Toggle</button>
+    </p>
+    <p>
+        Enabled: {{ sizeClassSmall }}
+    </p>
+    <!--Examples of using switch class lg for large. -->
+    <switch class="lg" name="sizeClassLarge" ng-model="sizeClassLarge"></switch>
+    <p>
+        <button ng-click="sizeClassLarge=!sizeClassLarge">Toggle</button>
+    </p>
+    <p>
+        Enabled: {{ sizeClassLarge }}
+    </p>
   </form>
 
 </body>