Fix icon display in Firefox. Fixes #73 (#114)

* Avoid non-spec-compliant `::after` in `<input>`

Author: joews

lib/js/index.js

@@ -137,6 +137,11 @@ class DateTimePicker extends Events {
     this.$('.c-datepicker__clock--pm')
       .addEventListener('click', e => this.clickPm(e), false);
 
+    this.$('.js-show-calendar')
+      .addEventListener('click', e => this.clickShowCalendar(e), false);
+    this.$('.js-show-clock')
+      .addEventListener('click', e => this.clickShowClock(e), false)
+
     return this;
   }
 
@@ -211,6 +216,16 @@ class DateTimePicker extends Events {
     return this;
   }
 
+  clickShowCalendar() {
+    this.$(".js-show-calendar").classList.add("is-selected");
+    this.$(".js-show-clock").classList.remove("is-selected");
+  }
+
+  clickShowClock() {
+    this.$(".js-show-clock").classList.add("is-selected");
+    this.$(".js-show-calendar").classList.remove("is-selected");
+  }
+
   data(val) {
     return (val ? this.set(val) : this.value);
   }

lib/scss/material-datetime-picker.scss

@@ -157,11 +157,11 @@ $primary: #00bcd4;
   }
 }
 
-.c-datepicker--show-time:checked ~ .c-datepicker__header .c-datepicker__header-date__time {
+.c-datepicker--show-time.is-selected ~ .c-datepicker__header .c-datepicker__header-date__time {
   opacity: 1
 }
 
-.c-datepicker--show-calendar:checked {
+.c-datepicker--show-calendar.is-selected {
   ~ .c-datepicker__header {
     .c-datepicker__header-date__month, .c-datepicker__header-date__day {
       opacity: 1
@@ -277,7 +277,8 @@ $primary: #00bcd4;
 
 .c-datepicker__toggle {
   top: 170px;
-  width: 23px;
+  width: 36px;
+  height: 30px;
   visibility: hidden;
   opacity: 0.5;
   z-index: 1;
@@ -292,15 +293,15 @@ $primary: #00bcd4;
   left: 10px;
 }
 
-.c-datepicker__toggle:checked {
+.c-datepicker__toggle.is-selected {
   opacity: 1;
 }
 
-.c-datepicker--show-time:checked ~ .c-datepicker__calendar {
+.c-datepicker--show-time.is-selected ~ .c-datepicker__calendar {
   display: none;
 }
 
-.c-datepicker--show-calendar:checked ~ .c-datepicker__clock {
+.c-datepicker--show-calendar.is-selected ~ .c-datepicker__clock {
   display: none;
 }
 

lib/template/datepicker.template.js

@@ -1,8 +1,10 @@
 export default () => `
 <div class="c-datepicker">
-  <input class="c-datepicker__toggle c-datepicker__toggle--right c-datepicker--show-time" type="radio" name="date-toggle" value="time" >
+  <a class="c-datepicker__toggle c-datepicker__toggle--right c-datepicker--show-time js-show-clock" title="show time picker">
+  </a>
 
-  <input class="c-datepicker__toggle c-datepicker__toggle--left  c-datepicker--show-calendar" type="radio" name="date-toggle" value="calendar" checked>
+  <a class="c-datepicker__toggle c-datepicker__toggle--left c-datepicker--show-calendar is-selected js-show-calendar" title="show date picker">
+  </a>
 
   <div class="c-datepicker__header">
     <div class="c-datepicker__header-day">