checkpoint on radios

docs/_data/nav.yml

@@ -27,6 +27,7 @@
   pages:
     - title: Test
     - title: Forms
+    - title: Labels
 
 - title: Components
   pages:

docs/material-design/labels.md

@@ -0,0 +1,25 @@
+---
+layout: docs
+title: Labels
+group: material-design
+---
+
+{% example html %}
+<form>
+  <fieldset class="form-group">
+    <label for="exampleInputEmail1" class="mdb-label-static">label-static</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="placeholder text">
+    <span class="mdb-help">We'll never share your email with anyone else.</span>
+  </fieldset>
+  <fieldset class="form-group">
+    <label for="exampleInputEmail1" class="mdb-label-floating">label-floating</label>
+    <input type="email" class="form-control" id="exampleInputEmail1">
+    <span class="mdb-help">We'll never share your email with anyone else.</span>
+  </fieldset>
+  <fieldset class="form-group">
+    <label for="exampleInputEmail1" class="mdb-label-placeholder">label-placeholder</label>
+    <input type="email" class="form-control" id="exampleInputEmail1">
+    <span class="mdb-help">We'll never share your email with anyone else.</span>
+  </fieldset>
+</form>
+{% endexample %}

docs/material-design/test.md

@@ -6,20 +6,40 @@ group: material-design
 
 {% example html %}
 <form>
-  <fieldset class="form-group">
+  <div class="radio">
-    <label for="exampleInputEmail1" class="mdb-label-static">Input label static</label>
+    <label>
-    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Input text">
+      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
-    <span class="mdb-help">We'll never share your email with anyone else.</span>
+      Option one is this and that&mdash;be sure to include why it's great
-  </fieldset>
+    </label>
-  <fieldset class="form-group">
+  </div>
-    <label for="exampleInputEmail1" class="mdb-label-floating">Input label floating</label>
+  <div class="radio">
-    <input type="email" class="form-control" id="exampleInputEmail1">
+    <label>
-    <span class="mdb-help">We'll never share your email with anyone else.</span>
+      <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
-  </fieldset>
+      Option two can be something else and selecting it will deselect option one
-  <fieldset class="form-group">
+    </label>
-    <label for="exampleInputEmail1" class="mdb-label-placeholder">Input label placeholder</label>
+  </div>
-    <input type="email" class="form-control" id="exampleInputEmail1">
+  <div class="radio disabled">
-    <span class="mdb-help">We'll never share your email with anyone else.</span>
+    <label>
-  </fieldset>
+      <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+      Option three is disabled
+    </label>
+  </div>
+  
+  <label class="radio-inline">
+    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
+  </label>
+  <label class="radio-inline">
+    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
+  </label>
+  <label class="radio-inline">
+    <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
+  </label>  
+  
+  
+  <div class="checkbox">
+    <label>
+      <input type="checkbox"> Check me out
+    </label>
+  </div>   
 </form>
 {% endexample %}

js/src/baseInput.js

@@ -26,7 +26,8 @@ const BaseInput = (($) => {
       required: false
     },
     mdbFormGroup: {
-      template: `<span class='mdb-form-group'></span>`
+      template: `<span class='mdb-form-group'></span>`,
+      omit: false // inline components really dislike any mdb-form-group
     },
     mdbLabel: {
       required: false,
@@ -91,7 +92,9 @@ const BaseInput = (($) => {
       // Will add mdb-form-group to form-group or create an mdb-form-group
       //  Performance Note: for those forms that are really performance driven, create the markup with the .mdb-form-group to avoid
       //    rendering changes once added.
+      if (!this.config.mdbFormGroup.omit) {
         this.$mdbFormGroup = this.resolveMdbFormGroup()
+      }
 
       // Resolve and mark the mdbLabel if necessary as defined by the config
       this.$mdbLabel = this.resolveMdbLabel()

js/src/baseToggle.js

@@ -42,12 +42,16 @@ const BaseToggle = (($) => {
       // '.${this.outerClass} > label > input[type=${this.inputType}]'
 
       super($element, $.extend(true, {}, Default, config), properties)
-      this.$element.after(this.config.template)
+      this.decorateMarkup()
     }
 
     // ------------------------------------------------------------------------
     // protected
 
+    decorateMarkup() {
+      this.$element.after(this.config.template)
+    }
+
     // Demarcation element (e.g. first child of a form-group)
     outerElement() {
       // .checkbox|switch|radio > label > input[type=checkbox|radio]

js/src/checkboxInline.js

@@ -12,7 +12,11 @@ const CheckboxInline = (($) => {
   const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
   const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
 
-  const Default = {}
+  const Default = {
+    mdbFormGroup: {
+      omit: true
+    }
+  }
 
   /**
    * ------------------------------------------------------------------------

js/src/radio.js

@@ -18,7 +18,7 @@ const Radio = (($) => {
   const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
 
   const Default = {
-    template: `<span class='radio-decorator'></span><span class='check'></span>`
+    template: `<span class='mdb-radio-outer-circle'></span><span class='mdb-radio-inner-circle'></span>`
   }
 
   /**
@@ -53,6 +53,11 @@ const Radio = (($) => {
     // ------------------------------------------------------------------------
     // protected
 
+    //decorateMarkup() {
+    //  this.$element.after(this.config.template)
+    //}
+
+
     // ------------------------------------------------------------------------
     // private
 

js/src/radioInline.js

@@ -12,7 +12,11 @@ const RadioInline = (($) => {
   const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
   const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
 
-  const Default = {}
+  const Default = {
+    mdbFormGroup: {
+      omit: true
+    }
+  }
 
   /**
    * ------------------------------------------------------------------------

scss/_checkboxes.scss

@@ -119,7 +119,7 @@ label.checkbox-inline,
   fieldset[disabled] & input[type=checkbox],
   input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check::before,
   input[type=checkbox][disabled]:not(:checked) ~ .checkbox-decorator .check,
-  input[type=checkbox][disabled] + .radio-decorator {
+  input[type=checkbox][disabled] + .mdb-radio-outer-circle {
     opacity: 0.5;
   }
   input[type=checkbox][disabled] + .checkbox-decorator .check::after {

scss/_lists.scss

@@ -24,7 +24,7 @@
       img {
         padding: 1px;
         background: rgba($black, 0.1);
-        &.radio-decorator {
+        &.mdb-radio-outer-circle {
           border-radius: 100%;
         }
       }

scss/_radios.scss

@@ -1,52 +1,38 @@
-@mixin radio-color($color, $opacity) {
-  ~ .check,
-  ~ .radio-decorator {
-    opacity: $opacity;
-  }
-
-  ~ .check {
-    background-color: $color;
-  }
-
-  ~ .radio-decorator {
-    border-color: $color;
-  }
-}
-
 label.radio,
 label.radio-inline,
 .radio label,
 .radio-inline label {
   position: relative;
-  padding-left: 45px;
+  //padding-left: 2rem;
-
   cursor: pointer;
 
   span {
     position: absolute;
-    top: 2px;
+    top: $mdb-radio-border;
-    left: 10px;
+    //left: 10px;
+    left: 0;
     display: block;
     transition-duration: 0.2s;
-  }
+
-  .radio-decorator {
+    &.mdb-radio-outer-circle {
-    width: 15px;
+      width: $mdb-radio-size;
-    height: 15px;
+      height: $mdb-radio-size;
-    border: 2px solid $mdb-radio-color-off;
+      border: $mdb-radio-border solid $mdb-radio-color-off;
       border-radius: 100%;
     }
-  .check {
+    &.mdb-radio-inner-circle {
       display: inline-block;
-    width: 15px;
+      width: $mdb-radio-size;
-    height: 15px;
+      height: $mdb-radio-size;
       background-color: $mdb-radio-color-on;
       border-radius: 100%;
       transform: scale3d(0, 0, 0);
-  }
+
-  .check::after {
+      // focus/press ripple
+      &::after {
         position: absolute;
-    top: -18px;
+        top: -#{$mdb-radio-size};
-    left: -18px;
+        left: -#{$mdb-radio-size};
         z-index: 1;
         display: block;
         width: 50px;
@@ -58,11 +44,7 @@ label.radio-inline,
         opacity: 0;
         transform: scale3d(1.5, 1.5, 1);
       }
-  input[type=radio]:not(:checked) ~ .check::after {
-    animation: rippleOff 500ms;
     }
-  input[type=radio]:checked ~ .check::after {
-    animation: rippleOn 500ms;
   }
 
   input[type=radio] {
@@ -72,25 +54,29 @@ label.radio-inline,
     opacity: 0;
 
     &:checked {
-      @include radio-color($mdb-radio-color-on, 1);
+      @include mdb-radio-color($mdb-radio-color-on);
-    }
+
-    &:checked ~ .check {
+      ~ .mdb-radio-inner-circle {
         transform: scale3d(0.55, 0.55, 1);
+        &::after {
+          animation: rippleOn 500ms;
+        }
       }
     }
 
-  input[type=radio][disabled] {
+    &:not(:checked) ~ .mdb-radio-inner-circle::after {
+      animation: rippleOff 500ms;
+    }
 
-    // light theme spec: Disabled: #000000, Opacity  26%
+    &[disabled] {
-    @include radio-color($black, 0.26);
+      @include mdb-radio-color($mdb-radio-color-disabled);
 
-    // dark theme spec: Disabled: #FFFFFF, Opacity  30%
       .theme-dark & {
-      @include radio-color($white, 0.30);
+        @include mdb-radio-color($mdb-radio-color-disabled-dark);
+      }
     }
   }
 }
-
 
 @keyframes rippleOn {
   0% {

scss/_variables.scss

@@ -2,7 +2,7 @@
 
 // redefine ? TODO: do we need this mdb variant?  This is used as $body-color
 $gray-light: rgba($black, 0.26) !default;
-$gray: rgba($black, .68) !default;  // rgba($black, .54)
+$gray: rgba($black, .54) !default; // spec color
 $gray-dark: rgba($black, 0.87) !default;
 
 // wondering if any of these could still be refactored out, but are definitely in use.
@@ -26,6 +26,10 @@ $enable-flex: true;
 @import "variables/bootstrap/type";
 
 
+// import their vars after customization for use below
+@import "../bower_components/bootstrap/scss/variables";
+
+
 //---
 // verified in use with refactoring to v4
 $mdb-font-weight-base: 400;
@@ -89,11 +93,16 @@ $mdb-popover-color: #ececec !default;
 $mdb-dropdown-font-size: 16px !default;
 
 // Radio:
-$mdb-radio-color-off: $mdb-label-color-inner-focus !default;
+$mdb-radio-border: .125rem !default; // 2px
+$mdb-radio-size: 1rem !default;
+
+$mdb-radio-color-off: $mdb-label-color-inner-focus !default;  // FIXME seems inconsistent, check spec
 $mdb-radio-color-on: $brand-primary !default;
+$mdb-radio-color-disabled: $gray-light; // light theme spec: Disabled: #000000, Opacity  26%
+$mdb-radio-color-disabled-dark:  rgba($white, 0.30); // dark theme spec: Disabled: #FFFFFF, Opacity  30%
 
 // Buttons:
-$mdb-btn-font-size-base: 14px !default;
+$mdb-btn-font-size-base: 14px !default;       // FIXME
 $mdb-btn-font-size-lg: 16px !default;
 $mdb-btn-font-size-sm: 12px !default;
 $mdb-btn-font-size-xs: 10px !default;

scss/mixins/_forms.scss

@@ -24,6 +24,22 @@
   }
 }
 
+@mixin mdb-radio-color($color) {
+  //~ .check,
+  //~ .mdb-radio-outer-circle {
+  //  opacity: $opacity;
+  //}
+
+  ~ .check {
+    background-color: $color;
+  }
+
+  ~ .mdb-radio-outer-circle {
+    border-color: $color;
+  }
+}
+
+
 @mixin mdb-form-color($label-color, $label-color-focus, $border-color) {
 
   [class^='mdb-label'],