* Really fixed the width calculation issue and made it very similar in behavior to version 0.1.1

* Re-implemented the `style` attribute, which is now replaced with `toggle-class` (more logical and consistent with `on-class` and `off-class` (`style` is still supported for backward compatibility)
* Updated **index.html** to reflect the latest changes in the attributes
* Moved **gh-pages** branch content to **master/** with some updates and so so that index.html automatically uses /dist files
* Button size classes (`btn-lg`, `btn-sm`, etc.) are properly set to all elements as attribute `size` is specified
* Button width and height automatically adjusts with the content size and font size (incl. a refresh once all fonts from the document are loaded)
* Removed artifical `min-height` values for the various button sizes (it's automatic now)
* Added support for empty buttons

Author: bertysentry

css/stylesheet.css

@@ -0,0 +1,112 @@
+header, footer {
+	padding: 20px;
+	background-image: url('../img/header.png');
+	background-size: 256px 256px;
+}
+footer {
+	color: #fff;
+	text-align: center;
+}
+.nyt-logo {
+	max-height: 40px;
+	margin-top: 5px;
+	margin-right: 5px;
+}
+
+nav.navbar {
+	margin-bottom: 10px;
+	background-color: #fff;
+	border: 0px;
+	border-radius: 2px;
+}
+#navbar {
+	margin: 0px;
+}
+#navbar .navbar-nav li iframe {
+	margin-top: 15px;
+}
+#navbar .navbar-nav li:last-child iframe {
+	margin-right: 15px;
+}
+
+@media screen and (max-width: 767px) {
+	#navbar .navbar-nav li iframe {
+		display: none;
+	}
+}
+
+.mast-head {
+	margin: 10px 0;
+}
+.mast-head h1 {
+	margin-bottom: 15px;
+	color: #fff;
+}
+.mast-head p {
+	color: #fff;
+}
+
+.mast-links {
+	padding-top: 10px;
+}
+
+.mast-links > * {
+	vertical-align: middle;
+	margin-bottom: 10px;
+}
+
+.mast-links > .btn {
+	margin-right: 30px;
+}
+main {
+	margin: 10px 20px;
+}
+main .container {
+	margin-bottom: 40px;
+}
+
+code.hljs {
+	border: 1px solid #ccc;
+	padding: 1em;
+	white-space: pre;
+	margin-bottom: 10px;
+}
+
+.example {
+	position: relative;
+	border: 1px solid #ccc;
+	padding: 1em 1em 0.5em 1em;
+	border-radius: 4px 4px 0 0;
+}
+
+.example:after {
+	content: "Example";
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	padding: 3px 7px;
+	font-size: 12px;
+	font-weight: bold;
+	background-color: #f5f5f5;
+	border: 1px solid #ccc;
+	color: #9da0a4;
+	border-radius: 0px 4px 0px 4px;
+	border-width: 0px 0px 1px 1px;
+}
+
+.example + code.hljs {
+	border-top: 0;
+	border-radius: 0px 0px 4px 4px;
+}
+
+.example > * {
+	margin-bottom: 10px;
+}
+
+.example > div.toggle {
+	margin-right: 10px;
+}
+
+.table-striped code {
+	background-color: inherit;
+}

dist/angular-bootstrap-toggle.css

@@ -4,7 +4,6 @@
   margin-right: 5px;
 }
 .toggle {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   position: relative;
   overflow: hidden;
 }
@@ -51,46 +50,27 @@
   width: 0px;
   border-width: 0 1px;
 }
-.toggle.btn {
-  min-width: 59px;
-  min-height: 34px;
+.toggle-on-pad.btn.btn-lg {
+  padding-right: 32px;
 }
-.toggle-on.btn {
+.toggle-off-pad.btn.btn-lg {
+  padding-left: 32px;
+}
+.toggle-on-pad.btn {
   padding-right: 24px;
 }
-.toggle-off.btn {
+.toggle-off-pad.btn {
   padding-left: 24px;
 }
-.toggle.btn-lg {
-  min-width: 79px;
-  min-height: 45px;
-}
-.toggle-on.btn-lg {
-  padding-right: 31px;
-}
-.toggle-off.btn-lg {
-  padding-left: 31px;
-}
-.toggle-handle.btn-lg {
-  width: 40px;
-}
-.toggle.btn-sm {
-  min-width: 50px;
-  min-height: 30px;
-}
-.toggle-on.btn-sm {
+.toggle-on-pad.btn.btn-sm {
   padding-right: 20px;
 }
-.toggle-off.btn-sm {
+.toggle-off-pad.btn.btn-sm {
   padding-left: 20px;
 }
-.toggle.btn-xs {
-  min-width: 35px;
-  min-height: 22px;
-}
-.toggle-on.btn-xs {
-  padding-right: 12px;
+.toggle-on-pad.btn.btn-xs {
+  padding-right: 9px;
 }
-.toggle-off.btn-xs {
-  padding-left: 12px;
+.toggle-off-pad.btn.btn-xs {
+  padding-left: 9px;
 }

dist/angular-bootstrap-toggle.js

@@ -62,6 +62,13 @@
              * Example: <toggle ... toggle-style="{'border': '1px dashed #f00'}">
              */
             toggleStyle: '',
+            /**
+             * Type: string
+             * Default: ''
+             * Description: Passes a class to the toggle's first immediate child
+             **/
+            toggleClass: '',
+            style: '',
             /**
              * Type: string
              * Default: ''
@@ -89,8 +96,8 @@
         })
 
         .controller('ToggleController',
-            ['$scope', '$attrs', '$interpolate', '$log', 'toggleConfig', '$toggleSuppressError',
-                function ($scope, $attrs, $interpolate, $log, toggleConfig, $toggleSuppressError) {
+            ['$scope', '$attrs', '$interpolate', '$log', '$document', 'toggleConfig', '$toggleSuppressError',
+                function ($scope, $attrs, $interpolate, $log, $document, toggleConfig, $toggleSuppressError) {
                     var self = this;
                     var labels, spans, divs;
                     var ngModelCtrl;
@@ -122,6 +129,18 @@
                     if (self.offstyle) {
                       self.offClass = self.offstyle;
                     }
+                    // Special treatment for style, now deprecated and replaced with toggleClass
+                    if (self.style) {
+                      self.toggleClass = self.style;
+                    }
+
+                    // Special case: empty on and off labels (replace with blank space)
+                    if (self.on === '') {
+                      self.on = '&nbsp;';
+                    }
+                    if (self.off === '') {
+                      self.off = '&nbsp;';
+                    }
 
                     this.init = function (ngModelCtrl_) {
                         ngModelCtrl = ngModelCtrl_;
@@ -139,6 +158,40 @@
                         angular.element(self.onElement).html(self.on);
                         angular.element(self.offElement).html(self.off);
 
+                        // Set the button size
+                        angular.element(self.wrapperElement).addClass(self.size);
+                        angular.element(self.onElement).addClass(self.size);
+                        angular.element(self.offElement).addClass(self.size);
+                        angular.element(self.handleElement).addClass(self.size);
+
+                        // Set the toggleClass on the wrapper
+                        angular.element(self.wrapperElement).addClass(self.toggleClass);
+
+                        // Calculate the propery width
+                        if (!self.width) {
+                          var wrapperComputedWidth = Math.max(
+                            self.onElement.scrollWidth,
+                            self.offElement.scrollWidth
+                          ) + Math.max(self.handleElement.scrollWidth, 16) / 2 + 2;
+                          self.width = wrapperComputedWidth + 'px';
+                        }
+
+                        // Calculate the proper height
+                        if (!self.height) {
+                            var wrapperComputedHeight = Math.max(
+                              self.onElement.scrollHeight,
+                              self.offElement.scrollHeight) + 2;
+                            self.height = wrapperComputedHeight + 'px';
+                        }
+
+                        // Add the toggle-on and toggle-off classes, that change position and size of the labels
+                        // and make sure that the buttons are properly placed.
+                        // Once this is done, the height and width properties of the labels is no longer relevant,
+                        // because of their new placement.
+                        angular.element(self.onElement).addClass(self.onClass).addClass('toggle-on');
+                        angular.element(self.offElement).addClass(self.offClass).addClass('toggle-off');
+
+                        // Compute first style
                         self.computeStyle();
 
                         ngModelCtrl.$render = function () {
@@ -165,38 +218,9 @@
 
                         // Build an object for widget's ng-style
                         $scope.wrapperStyle = (self.toggleStyle) ? $scope.$parent.$eval(self.toggleStyle) : {};
+                        $scope.wrapperStyle.width = self.width;
+                        $scope.wrapperStyle.height = self.height;
 
-                        // Calculate the proper width
-                        if (self.width) {
-                            $scope.wrapperStyle.width = self.width;
-                        } else {
-                          var wrapperComputedWidth = Math.max(
-                            self.onElement.scrollWidth,
-                            self.offElement.scrollWidth) + 12;
-                          $scope.wrapperStyle.width = wrapperComputedWidth + 'px';
-                        }
-
-                        // Calculate the proper height
-                        if (self.height) {
-                            $scope.wrapperStyle.height = self.height;
-                        } else {
-                            var wrapperComputedHeight = Math.max(
-                              self.onElement.offsetHeight,
-                              self.offElement.offsetHeight);
-                            var wrapperHeight = self.wrapperElement.offsetHeight;
-
-                            if (wrapperHeight < wrapperComputedHeight &&
-                              self.size !== 'btn-xs' && self.size !== 'btn-sm') {
-                              $scope.wrapperStyle.height = wrapperComputedHeight + 'px';
-                            } else {
-                                $scope.wrapperStyle.height = wrapperHeight + 'px';
-                            }
-                        }
-
-                        // Build arrays that will be passed to widget's ng-class.
-                        $scope.onComputedClass     = [self.onClass , self.size, 'toggle-on'];
-                        $scope.offComputedClass    = [self.offClass, self.size, 'toggle-off'];
-                        $scope.handleComputedClass = [self.size , 'toggle-handle'];
                     };
 
                     this.toggle = function () {
@@ -229,6 +253,7 @@
                             }
                         });
                     });
+
                 }])
 
         .directive('toggle', function () {
@@ -237,9 +262,9 @@
                     template: '<div ng-cloak class="toggle btn off" ng-style="wrapperStyle"' +
                                 'ng-click="onSwitch($event)">' +
                                 '<div class="toggle-group">' +
-                                '<label class="btn" ng-class="onComputedClass"></label>' +
-                                '<label class="btn active" ng-class="offComputedClass"></label>' +
-                                '<span class="btn btn-default" ng-class="handleComputedClass"></span>' +
+                                '<label class="btn toggle-on-pad"></label>' +
+                                '<label class="btn toggle-off-pad active"></label>' +
+                                '<span class="btn btn-default toggle-handle"></span>' +
                                '</div>' +
                               '</div>',
                     scope: {