replaced CSS ripples on selectors with Ripples.js

fixes #855

js/baseSelection.js

@@ -49,7 +49,13 @@ const BaseSelection = (($) => {
     // protected
 
     decorateMarkup() {
-      this.$element.after(this.config.template)
+      const $decorator = $(this.config.template);
+      this.$element.after($decorator)
+
+      // initialize ripples after decorator has been inserted into DOM
+      if (this.config.ripples !== false) {
+        $decorator.bmdRipples()
+      }
     }
 
     // Demarcation element (e.g. first child of a form-group)

js/radio.js

@@ -18,7 +18,7 @@ const Radio = (($) => {
   const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
 
   const Default = {
-    template: `<span class='bmd-radio-outer-circle'></span><span class='bmd-radio-inner-circle'></span>`
+    template: `<span class='bmd-radio'></span>`
   }
 
   /**

js/ripples.js

@@ -48,7 +48,7 @@ const Ripples = (($) => {
     constructor($element, config) {
       this.$element = $element
 
-      //console.log(`Adding ripples to ${Util.describe(this.$element)}`)  // eslint-disable-line no-console
+      // console.log(`Adding ripples to ${Util.describe(this.$element)}`)  // eslint-disable-line no-console
       this.config = $.extend(true, {}, Default, config)
 
       // attach initial listener

scss/_checkboxes.scss

@@ -2,28 +2,16 @@
 .checkbox label,
 label.checkbox-inline {
   padding-left: $bmd-checkbox-size + $bmd-checkbox-label-padding; // absolutely positioned so add the radio size
-  cursor: pointer;
 
   .checkbox-decorator {
     position: absolute;
-    top: 0.125rem;
     left: 0;
+    padding: 1em;
+    margin: -1em;
+    line-height: .7;
     vertical-align: middle;
-
+    cursor: pointer;
-    &::before { // FIXME: document why this is necessary (doesn't seem to be on chrome)
-      position: absolute;
-      left: 0;
-      z-index: 1;
-      display: block;
-      width: $bmd-checkbox-size;
-      height: $bmd-checkbox-size;
-      margin: 0;
-      content: "";
-      background-color: rgba($black, .84);
     border-radius: 100%;
-      opacity: 0;
-      transform: scale3d(2.3, 2.3, 1);
-    }
 
     .check {
       position: relative;
@@ -63,7 +51,6 @@ label.checkbox-inline {
   }
 
   input[type=checkbox] {
-
     // Hide native checkbox
     position: absolute;
     left: 0;
@@ -80,7 +67,6 @@ label.checkbox-inline {
     }
 
     &:checked {
-
       // FIXME: once working - combine further to reduce code
       + .checkbox-decorator .check {
         color: $bmd-checkbox-checked-color;
@@ -97,33 +83,6 @@ label.checkbox-inline {
         20px -12px 0 11px;
         animation: checkbox-on $bmd-checkbox-animation-check forwards;
       }
-
-      + .checkbox-decorator::before {
-        animation: rippleOn;
-        .is-focused & {
-          // Prevent checkbox animation and ripple effect on page load
-          animation: rippleOn $bmd-checkbox-animation-ripple;
-        }
-      }
-
-      + .checkbox-decorator .check::after {
-        //background-color: $brand-success; // FIXME: seems like tho wrong color, test and make sure it can be removed
-        animation: rippleOn $bmd-checkbox-animation-ripple forwards; // Ripple effect on check
-      }
-    }
-
-    &:not(:checked) {
-      + .checkbox-decorator::before {
-        animation: rippleOff;
-        .is-focused & {
-          // Prevent checkbox animation and ripple effect on page load
-          animation: rippleOff $bmd-checkbox-animation-ripple;
-        }
-      }
-
-      + .checkbox-decorator .check::after {
-        animation: rippleOff $bmd-checkbox-animation-ripple forwards; // Ripple effect on uncheck
-      }
     }
 
     &[disabled],
@@ -137,6 +96,10 @@ label.checkbox-inline {
       .check {
         border-color: $bmd-checkbox-border-color-disabled;
       }
+      // No ripple on disabled checkboxes
+      + .checkbox-decorator .ripple-container {
+        display: none;
+      }
     }
   }
 }
@@ -230,27 +193,3 @@ label.checkbox-inline {
     transform: rotate(0deg);
   }
 }
-
-@keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}

scss/_radios.scss

@@ -3,45 +3,36 @@ label.radio-inline {
   position: relative;
   padding-left: $bmd-radio-size + $bmd-radio-label-padding; // absolutely positioned so add the radio size
 
-  .bmd-radio-outer-circle, // don't use generic span, it may conflict with span in user markup #693
+  .bmd-radio {
-  .bmd-radio-inner-circle {
     position: absolute;
-    top: calc-top($line-height-base, $font-size-base, $bmd-radio-size); // vertical center of line-height
     left: 0;
+    display: inline-block;
+    padding: 1em;
+    margin: -1em;
+    line-height: .7;
+    border-radius: 100%;
+
+    &::after {
       display: inline-block;
       width: $bmd-radio-size;
       height: $bmd-radio-size;
       cursor: pointer;
-    transition-duration: 0.2s;
+      content: "";
-
-    &.bmd-radio-outer-circle {
       border: $bmd-radio-border solid $bmd-radio-color-off;
       border-radius: 50%;
       transition: border-color ease .28s;
+      transition-duration: 0.2s;
     }
-    &.bmd-radio-inner-circle {
+    &::before {
+      position: absolute;
       display: inline-block;
+      width: $bmd-radio-size;
+      height: $bmd-radio-size;
+      content: "";
       background-color: $bmd-radio-color-on;
       border-radius: 50%;
       transition: transform ease .28s;
       transform: scale3d(0, 0, 0);
-
-      // focus/press ripple
-      &::after {
-        position: absolute;
-        top: -#{$bmd-radio-ripple-offset};
-        left: -#{$bmd-radio-ripple-offset};
-        z-index: 1;
-        display: block;
-        width: 50px;
-        height: 50px;
-        margin: 0;
-        content: "";
-        background-color: $gray-dark;
-        border-radius: 100%;
-        opacity: 0;
-        transform: scale3d(1.5, 1.5, 1);
-      }
     }
   }
 
@@ -57,63 +48,30 @@ label.radio-inline {
     pointer-events: none;
     opacity: 0;
 
-    &:checked {
+    &:checked ~ .bmd-radio {
       @include bmd-radio-color($bmd-radio-color-on);
 
-      ~ .bmd-radio-inner-circle {
+      &::before {
         transform: scale3d(0.55, 0.55, 1);
-        &::after {
-          animation: rippleOn;
-
-          .is-focused & {
-            // Prevent ripple effect on page load
-            animation: rippleOn 500ms;
       }
     }
-      }
-    }
-
-    &:not(:checked) ~ .bmd-radio-inner-circle::after {
-      animation: rippleOff 500ms;
-    }
 
     &[disabled],
     &:disabled,
     fieldset[disabled] & {
-
+      + .bmd-radio {
-      + .bmd-radio-outer-circle {
         cursor: default;
+        @include bmd-radio-color($bmd-radio-color-disabled);
       }
 
-      @include bmd-radio-color($bmd-radio-color-disabled);
+      // No ripple on disabled radios
+      + .bmd-radio .ripple-container {
+        display: none;
+      }
 
-      .bg-inverse & {
+      .bg-inverse & + .bmd-radio {
         @include bmd-radio-color($bmd-radio-color-disabled-inverse);
       }
     }
   }
 }
-
-@keyframes rippleOn {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes rippleOff {
-  0% {
-    opacity: 0;
-  }
-  50% {
-    opacity: 0.2;
-  }
-  100% {
-    opacity: 0;
-  }
-}

scss/extensions/_snackbarjs.scss

@@ -1,6 +1,8 @@
 // Support for SnackbarJS plugin
 // https://github.com/FezVrasta/snackbarjs
 
+// scss-lint:disable IdSelector
+
 #snackbar-container {
   position: fixed;
   bottom: 0;

scss/mixins/_forms.scss

@@ -53,14 +53,12 @@
 }
 
 @mixin bmd-radio-color($color) {
-
+  &::after {
-  ~ .bmd-radio-inner-circle {
-    background-color: $color;
-  }
-
-  ~ .bmd-radio-outer-circle {
     border-color: $color;
   }
+  &::before {
+    background-color: $color;
+  }
 }
 
 @mixin bmd-form-color($label-color, $label-color-focus, $border-color) {