feat(theme): Add material design toggle theme #90 (#97)

* feat(theme): add material theme

* feat(theme): modify material theme to better follow material guidelines

index.js

@@ -28,7 +28,7 @@ module.exports = {
     var excludeBaseStyles = false;
 
     if (config) {
-      var allThemes = ['light', 'ios', 'default', 'flat', 'skewed', 'flip'];
+      var allThemes = ['light', 'ios', 'default', 'flat', 'skewed', 'flip', 'material'];
       var included = config.includedThemes;
       var excluded = config.excludedThemes;
 

tests/dummy/app/templates/application.hbs

@@ -33,6 +33,10 @@
     <td>{{x-toggle name=6 theme='skewed' value=v6 onToggle=(action (mut v6))}}</td>
     <td>skewed</td>
   </tr>
+  <tr>
+    <td>{{x-toggle name=7 theme='material' value=v8 onToggle=(action (mut v8))}}</td>
+    <td>material</td>
+  </tr>
 </table>
 
 <h2>Sizes</h2>
@@ -109,6 +113,17 @@
       {{x-toggle size='large' theme='skewed' value=v20 onToggle=(action (mut v20))}}
     </td>
   </tr>
+  <tr>
+    <td>
+      {{x-toggle size='small' theme='material' value=v21 onToggle=(action (mut v21))}}
+    </td>
+    <td>
+      {{x-toggle size='medium' theme='material' value=v21 onToggle=(action (mut v21))}}
+    </td>
+    <td>
+      {{x-toggle size='large' theme='material' value=v21 onToggle=(action (mut v21))}}
+    </td>
+  </tr>
 </table>
 
 

vendor/ember-toggle/themes/material.css

@@ -0,0 +1,79 @@
+.x-toggle-material.x-toggle-btn {
+  position: relative;
+}
+
+/* Handle */
+.x-toggle-material.x-toggle-btn:after {
+  border-radius: 2em;
+  background-color: #FAFAFA;
+  box-shadow: 0 3px 2px rgba(0, 0, 0, .1);
+  -webkit-transition: all .4s ease;
+          transition: all .4s ease;
+}
+
+.x-toggle:checked + label > .x-toggle-material.x-toggle-btn:after {
+  background-color: #7FC6A6;
+}
+
+/* Background */
+.x-toggle-material.x-toggle-btn:before {
+  position: absolute;
+  display: block;
+  height: 50%;
+  width: 70%;
+  left: 15%;
+  content: '';
+  background-color: #000000;
+  opacity: .38;
+  border-radius: 2em;
+  -webkit-transition: all .4s ease;
+          transition: all .4s ease;
+}
+
+.x-toggle:checked + label > .x-toggle-material.x-toggle-btn:before {
+  background-color: #7FC6A6;
+  opacity: .5;
+}
+
+/* Disabled */
+.x-toggle-material.x-toggle-btn.x-toggle-disabled:before,
+.x-toggle:checked + label > .x-toggle-material.x-toggle-btn.x-toggle-disabled:before {
+  background-color: #000000;
+  opacity: .12;
+}
+
+.x-toggle-material.x-toggle-btn.x-toggle-disabled:after,
+.x-toggle:checked + label > .x-toggle-material.x-toggle-btn.x-toggle-disabled:after {
+  background-color: #BDBDBD;
+}
+
+/* Sizes */
+.x-toggle-material.small {
+  width: 3em;
+  height: 1.6em;
+  padding: 2px;
+}
+
+.x-toggle-material.small:before {
+  margin: .3em 0;
+}
+
+.x-toggle-material.medium {
+  width: 4em;
+  height: 2.1em;
+  padding: 3px;
+}
+
+.x-toggle-material.medium:before {
+  margin: .35em 0;
+}
+
+.x-toggle-material.large {
+  width: 4.7em;
+  height: 2.5em;
+  padding: 4px;
+}
+
+.x-toggle-material.large:before {
+  margin: .4em 0;
+}