merge and change documentation style

README.md

@@ -1,4 +1,4 @@
-Bootstrap-switch v.1.7
+Bootstrap-switch v.1.8
 ========================
 
 You can now also use radio buttons and checkboxes as switches.
@@ -129,6 +129,25 @@ radioboxes:
 ```
 
 
+Text Label
+----------
+checkboxes:
+
+``` html
+<div class="make-switch" data-text-label="My Slider Text">
+    <input type="checkbox">
+</div>
+```
+
+radioboxes:
+
+``` html
+<div class="make-switch" data-text-label="My Slider Text">
+    <input type="radio">
+</div>
+```
+
+
 HTML Text
 ----------
 checkboxes:

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "bootstrap-switch",
   "description" : "Unofficial bootstrap switch",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "main": "static/js/bootstrap-switch.js",
   "ignore": [ 
     "examples"

component.json

@@ -1,7 +1,7 @@
 {
   "name"        : "bootstrap-switch",
   "description" : "Unofficial bootstrap switch",
-  "version"     : "1.7.0",
+  "version"     : "1.8.0",
   "main"        : "static/js/bootstrap-switch.js",
   "ignore": [ 
     "examples"

static/js/bootstrap-switch.js

@@ -81,6 +81,10 @@
             if (icon) {
               $label.html('<i class="icon ' + icon + '"></i>');
             }
+            
+            if (textLabel) {
+              $label.html('' + textLabel + '');
+            }
 
             if (textLabel) {
               $label.html('' + textLabel + '');
@@ -380,4 +384,4 @@
   $(function () {
     $('.make-switch')['bootstrapSwitch']();
   });
-})(jQuery);
+})(jQuery);

static/less/bootstrap-switch.less

@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrapSwitch v1.7 by Larentis Mattia @SpiritualGuru
+ * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru
  * http://www.larentis.eu/
  *
  * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
@@ -126,7 +126,7 @@
     border-left: 1px solid @btnBorder;
     border-right: 1px solid @btnBorder;
 
-    .buttonBackground(@btnBackground, @btnBackgroundHighlight);
+    .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark);
 
     i {
       color: #000;

static/stylesheets/bootstrap-switch.css

@@ -1,5 +1,5 @@
 /* ============================================================
- * bootstrapSwitch v1.7 by Larentis Mattia @SpiritualGuru
+ * bootstrapSwitch v1.8 by Larentis Mattia @SpiritualGuru
  * http://www.larentis.eu/
  *
  * Enhanced for radiobuttons by Stein, Peter @BdMdesigN
@@ -123,7 +123,7 @@
   width: 34%;
   border-left: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
-  color: #ffffff;
+  color: #333333;
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
   background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
@@ -146,7 +146,7 @@
 .has-switch label.active,
 .has-switch label.disabled,
 .has-switch label[disabled] {
-  color: #ffffff;
+  color: #333333;
   background-color: #e6e6e6;
   *background-color: #d9d9d9;
 }

static/stylesheets/flat-ui-fonts.css

@@ -0,0 +1,153 @@
+@import url("https://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300");
+@font-face {
+  font-family: 'Flat-UI-Icons';
+  src: url('../fonts/Flat-UI-Icons.eot');
+  src: url('../fonts/Flat-UI-Icons.eot?#iefix') format('embedded-opentype'), url('../fonts/Flat-UI-Icons.woff') format('woff'), url('../fonts/Flat-UI-Icons.ttf') format('truetype'), url('../fonts/Flat-UI-Icons.svg#Flat-UI-Icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Use the following CSS code if you want to use data attributes for inserting your icons */
+[data-icon]:before {
+  font-family: 'Flat-UI-Icons';
+  content: attr(data-icon);
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+}
+/* Use the following CSS code if you want to have a class per icon */
+/*
+Instead of a list of all class selectors,
+you can use the generic selector below, but it's slower:
+[class*="fui-"] {
+*/
+.fui-arrow-right,
+.fui-arrow-left,
+.fui-cmd,
+.fui-check-inverted,
+.fui-heart,
+.fui-location,
+.fui-plus,
+.fui-check,
+.fui-cross,
+.fui-list,
+.fui-new,
+.fui-video,
+.fui-photo,
+.fui-volume,
+.fui-time,
+.fui-eye,
+.fui-chat,
+.fui-search,
+.fui-user,
+.fui-mail,
+.fui-lock,
+.fui-gear,
+.fui-radio-unchecked,
+.fui-radio-checked,
+.fui-checkbox-unchecked,
+.fui-checkbox-checked,
+.fui-calendar-solid,
+.fui-pause,
+.fui-play,
+.fui-check-inverted-2 {
+  display: inline-block;
+  font-family: 'Flat-UI-Icons';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  -webkit-font-smoothing: antialiased;
+}
+.fui-arrow-right:before {
+  content: "\e02c";
+}
+.fui-arrow-left:before {
+  content: "\e02d";
+}
+.fui-cmd:before {
+  content: "\e02f";
+}
+.fui-check-inverted:before {
+  content: "\e006";
+}
+.fui-heart:before {
+  content: "\e007";
+}
+.fui-location:before {
+  content: "\e008";
+}
+.fui-plus:before {
+  content: "\e009";
+}
+.fui-check:before {
+  content: "\e00a";
+}
+.fui-cross:before {
+  content: "\e00b";
+}
+.fui-list:before {
+  content: "\e00c";
+}
+.fui-new:before {
+  content: "\e00d";
+}
+.fui-video:before {
+  content: "\e00e";
+}
+.fui-photo:before {
+  content: "\e00f";
+}
+.fui-volume:before {
+  content: "\e010";
+}
+.fui-time:before {
+  content: "\e011";
+}
+.fui-eye:before {
+  content: "\e012";
+}
+.fui-chat:before {
+  content: "\e013";
+}
+.fui-search:before {
+  content: "\e01c";
+}
+.fui-user:before {
+  content: "\e01d";
+}
+.fui-mail:before {
+  content: "\e01e";
+}
+.fui-lock:before {
+  content: "\e01f";
+}
+.fui-gear:before {
+  content: "\e024";
+}
+.fui-radio-unchecked:before {
+  content: "\e02b";
+}
+.fui-radio-checked:before {
+  content: "\e032";
+}
+.fui-checkbox-unchecked:before {
+  content: "\e033";
+}
+.fui-checkbox-checked:before {
+  content: "\e034";
+}
+.fui-calendar-solid:before {
+  content: "\e022";
+}
+.fui-pause:before {
+  content: "\e03b";
+}
+.fui-play:before {
+  content: "\e03c";
+}
+.fui-check-inverted-2:before {
+  content: "\e000";
+}