fixed bad label markup

index.html

@@ -508,34 +508,34 @@
               <h2>Validation</h2>
 
               <div class="form-group label-floating">
-                <label for="111">email</label>
+                <label for="111" class="control-label">email</label>
                 <input type="email" class="form-control" id="111">
               </div>
               <div class="form-group label-floating">
-                <label for="222">number</label>
+                <label for="222" class="control-label">number</label>
                 <input type="number" class="form-control" id="222">
               </div>
 
               <h2>Disabled</h2>
 
               <div class="form-group label-floating">
-                <label for="333">email</label>
+                <label for="333" class="control-label">email</label>
                 <input disabled type="text" class="form-control" id="333">
               </div>
               <div class="form-group label-floating">
-                <label for="444">number</label>
+                <label for="444" class="control-label">number</label>
                 <input disabled type="text" class="form-control" id="444">
               </div>
 
               <h2>Hints</h2>
 
               <div class="form-group label-floating">
-                <label for="555">label</label>
+                <label for="555" class="control-label">label</label>
                 <input type="text" class="form-control" id="555">
                 <p class="help-block">Some helpful hint</p>
               </div>
               <div class="form-group label-floating">
-                <label for="676">label</label>
+                <label for="676" class="control-label">label</label>
                 <input type="email" class="form-control" id="676">
                 <p class="help-block">A valid email contains an @ character</p>
               </div>
@@ -547,7 +547,7 @@
                 <input type="text" class="form-control" placeholder="placeholder">
               </div>
               <div class="form-group has-success label-floating">
-                <label for="777">floating label</label>
+                <label for="777" class="control-label">floating label</label>
                 <input type="text" class="form-control" id="777">
               </div>
             </div>

less/_togglebutton.less

@@ -82,11 +82,15 @@
 
     // Switch bg on
     // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-color-variations-content
-    .generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, { background-color: fade(@material-color, 50%); });
+    .generic-variations(~" label input[type=checkbox]:checked + .toggle", @primary, {
+      background-color: fade(@material-color, 50%);
+    });
     // Handle on
     // SASS conversion note: please mirror any content change in _mixins-shared.scss variations-content
     .variations(~" label input[type=checkbox]:checked + .toggle:after", background-color, @primary);
     // Ripple on
-    .generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, { box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@material-color, 10%); });
+    .generic-variations(~" label input[type=checkbox]:checked + .toggle:active:after", @primary, {
+      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 0 0 15px fade(@material-color, 10%);
+    });
   }
 }

less/_variables.less

@@ -138,12 +138,6 @@
 
 
 
-
-
-
-
-
-
 // Card
 @card-body-text: @lightbg-text;
 @card-body-background: #fff;

sass/_checkboxes.scss

@@ -4,11 +4,38 @@
 .form-horizontal .checkbox {
   padding-top: 20px;
 }
+
+@mixin form-group-checkbox-variant($placeholder-font-size, $line-height){
+  .checkbox {
+    label {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  @include form-group-checkbox-variant($md-input-font-size-base, $md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    @include form-group-checkbox-variant($md-input-font-size-small, $md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    @include form-group-checkbox-variant($md-input-font-size-large, $md-input-line-height-large);
+  }
+
   .checkbox {
     transform: translateZ(0); // Force 3d rendering
     label {
       cursor: pointer;
       padding-left: 0; // Reset for Bootstrap rule
+      color: $checkbox-label-color;
     }
 
     // Hide native checkbox
@@ -48,8 +75,7 @@
         display: inline-block;
         width: $checkbox-size;
         height: $checkbox-size;
-      border: 2px solid;
+        border: 2px solid $checkbox-border-color;
-      border-color: rgba(0,0,0,.54);
         border-radius: 2px;
         overflow: hidden;
         z-index: 1;
@@ -105,8 +131,10 @@
     }
 
     // Style for disabled inputs
+    fieldset[disabled] &,
     fieldset[disabled] & input[type=checkbox],
     input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check:before,
+    input[type=checkbox][disabled]:not(:checked) ~ .checkbox-material .check,
     input[type=checkbox][disabled] + .circle {
       opacity: 0.5;
     }
@@ -116,11 +144,11 @@
     }
 
     @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:after"), background-color, $success);
-  @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, #4caf50);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check:before"), color, $checkbox-checked-color);
-  @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, #4caf50);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), color, $checkbox-checked-color);
-  @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, #4caf50);
+    @include variations(unquote(" input[type=checkbox]:checked + .checkbox-material .check"), border-color, $checkbox-checked-color);
+  }
 }
-
 
 @keyframes checkbox-on {
   0% {

sass/_radios.scss

@@ -3,11 +3,40 @@
 .form-horizontal .radio {
   margin-bottom: 10px;
 }
+
+@mixin form-group-radio-variant($placeholder-font-size, $line-height){
+  .radio {
+    label {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  @include form-group-radio-variant($md-input-font-size-base, $md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    @include form-group-radio-variant($md-input-font-size-small, $md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    @include form-group-radio-variant($md-input-font-size-large, $md-input-line-height-large);
+  }     
+}
+
 .radio {
   label {
     cursor: pointer;
     padding-left: 45px;
     position: relative;
+    color: $radio-label-color;
+
     span {
       display: block;
       position: absolute;
@@ -16,7 +45,7 @@
       transition-duration: 0.2s;
     }
     .circle {
-      border: 2px solid $lightbg-text;
+      border: 2px solid $radio-border-color;
       height: 15px;
       width: 15px;
       border-radius: 100%;
@@ -74,7 +103,6 @@
   input[type=radio][disabled] ~ .check {
     background-color: $lightbg-text;
   }
-
 }
 
 @keyframes rippleOn {

sass/_togglebutton.scss

@@ -1,13 +1,39 @@
 // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
 
+@mixin form-group-toggle-variant($placeholder-font-size, $line-height){
+  .togglebutton {
+    label {
+      font-size: $placeholder-font-size;
+      line-height: $line-height;
+      font-weight: normal;
+    }
+  }
+}
+
+.form-group {
+
+  // default label size/location
+  @include form-group-toggle-variant($md-input-font-size-base, $md-input-line-height-base);
+
+  // sm label size/location
+  &.form-group-sm {
+    @include form-group-toggle-variant($md-input-font-size-small, $md-input-line-height-small);
+  }
+
+  // lg label size/location
+  &.form-group-lg {
+    @include form-group-toggle-variant($md-input-font-size-large, $md-input-line-height-large);
+  }
+
   .togglebutton {
     vertical-align: middle;
     &, label, input, .toggle {
       user-select: none;
     }
     label {
-    font-weight: 400;
       cursor: pointer;
+      color: $togglebutton-label-color;
+
       // Hide original checkbox
       input[type=checkbox] {
         opacity: 0;
@@ -65,3 +91,4 @@
     // Ripple on
     @include bg-box-shadow-variations(unquote(" label input[type=checkbox]:checked + .toggle:active:after"), $primary);
   }
+}

sass/_variables.scss

@@ -140,12 +140,6 @@ $md-input-height-small:             (floor($md-input-font-size-small * $md-input
 
 
 
-
-
-
-
-
-
 // Card
 $card-body-text: $lightbg-text !default;
 $card-body-background: #fff !default;
@@ -158,6 +152,9 @@ $background-disabled: #eaeaea !default;
 $checkbox-size: 20px !default;
 $checkbox-animation-ripple: 500ms !default;
 $checkbox-animation-check: 0.3s !default;
+$checkbox-checked-color: #4caf50 !default;
+$checkbox-label-color: rgba(0, 0, 0, .54) !default;
+$checkbox-border-color: $checkbox-label-color !default;
 
 // Popovers and Popups
 $popover-background: rgba(101, 101, 101, 0.9) !default;
@@ -166,3 +163,10 @@ $popover-color: #ececec !default;
 // Dropdown Menu
 $dropdown-radius: 2px !default;
 $dropdown-font-size: 16px !default;
+
+// Toggle
+$togglebutton-label-color: $checkbox-label-color !default;
+
+// Radio:
+$radio-label-color: $checkbox-label-color !default;
+$radio-border-color: $checkbox-border-color !default;