material-components · amsheehan · Feb 1, 2017 · Jan 31, 2017 · Jan 31, 2017 · Feb 1, 2017
diff --git a/demos/index.html b/demos/index.html
@@ -38,6 +38,7 @@
           <li><a href="list.html">List</a></li>
           <li><a href="select.html">Select</a></li>
           <li><a href="simple-menu.html">Menu (simple)</a></li>
+          <li><a href="switch.html">Switch</a></li>
           <li><a href="radio.html">Radio</a></li>
           <li><a href="ripple.html">Ripple</a></li>
           <li><a href="snackbar.html">Snackbar</a></li>

diff --git a/demos/switch.html b/demos/switch.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 Google Inc. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      https://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>MDC Switch Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <style>
+      /* Make the demo look a little bit better */
+      section {
+        margin-bottom: 0.5rem;
+        margin: 16px;
+        padding: 40px;
+        background-color: #eee;
+      }
+
+      h2 {
+        margin: 0;
+        margin-bottom: 20px;
+      }
+
+      label {
+        font-size: 16px;
+      }
+
+      .mdc-theme--dark {
+        background-color: #333;
+      }
+
+      .mdc-theme--dark > h2 {
+        color: white;
+      }
+
+      .mdc-theme--dark > label {
+        color: white;
+      }
+    </style>
+    <script src="assets/material-components-web.css.js" charset="utf-8"></script>
+  </head>
+  <body class="mdc-typography">
+    <main>
+      <h1>MDC Switch - CSS Only</h1>
+
+      <section>
+        <h2>Switch on Light Theme</h2>
+        <div class="mdc-switch">    
+          <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
+          <div class="mdc-switch__background">
+            <div class="mdc-switch__knob"></div>
+          </div>
+        </div>
+        <label for="basic-switch" class="mdc-switch-label">off/on</label>
+      </section>
+      <section>
+        <h2>Switch on Light Theme - Disabled</h2>
+        <div class="mdc-switch">    
+          <input type="checkbox" 
+                 id="basic-switch--disabled" 
+                 class="mdc-switch__native-control" 
+                 disabled />
+          <div class="mdc-switch__background">
+            <div class="mdc-switch__knob"></div>
+          </div>
+        </div>
+        <label for="basic-switch--disabled" class="mdc-switch-label">off/on</label>
+      </section>
+
+      <section class="mdc-theme--dark">
+        <h2>Switch on Dark Theme</h2>
+        <div class="mdc-switch">    
+          <input type="checkbox" 
+                 id="basic-switch--dark" 
+                 class="mdc-switch__native-control"/>
+          <div class="mdc-switch__background">
+            <div class="mdc-switch__knob"></div>
+          </div>
+        </div>
+        <label for="basic-switch--dark" class="mdc-switch-label">off/on</label>
+      </section>
+
+      <section class="mdc-theme--dark">
+        <h2>Switch on Light Theme - Disabled</h2>
+        <div class="mdc-switch">    
+          <input type="checkbox" 
+                 id="basic-switch--dark--disabled" 
+                 class="mdc-switch__native-control"
+                 disabled />
+          <div class="mdc-switch__background">
+            <div class="mdc-switch__knob"></div>
+          </div>
+        </div>
+        <label for="basic-switch--dark--disabled" class="mdc-switch-label">off/on</label>
+      </section>
+
+    </main>
+    <script src="assets/material-components-web.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
@@ -30,6 +30,7 @@
 @import "@material/ripple/mdc-ripple";
 @import "@material/select/mdc-select";
 @import "@material/snackbar/mdc-snackbar";
+@import "@material/switch/mdc-switch";
 @import "@material/textfield/mdc-textfield";
 @import "@material/theme/mdc-theme";
 @import "@material/typography/mdc-typography";
diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
@@ -27,6 +27,7 @@
     "@material/ripple": "^0.1.2",
     "@material/select": "^0.2.0",
     "@material/snackbar": "^0.1.2",
+    "@material/switch": "^0.1.0",
     "@material/textfield": "^0.2.0",
     "@material/theme": "^0.1.1",
     "@material/typography": "^0.1.1"

diff --git a/packages/mdc-switch/README.md b/packages/mdc-switch/README.md
@@ -0,0 +1,48 @@
+# MDC Switch
+
+The MDC Switch component is a spec-aligned switch component adhering to the
+[Material Design Switch requirements](https://material.io/guidelines/components/selection-controls.html#selection-controls-switch).
+It works without JavaScript.
+
+## Installation
+
+```
+npm install --save @material/switch
+```
+
+## Usage
+
+```html
+<div class="mdc-switch">    
+  <input type="checkbox" id="basic-switch" class="mdc-switch__native-control" />
+  <div class="mdc-switch__background">
+    <div class="mdc-switch__knob"></div>
+  </div>
+</div>
+<label for="basic-switch" class="mdc-switch-label">off/on</label>
+```
+
+### Disabled
+```html
+<div class="mdc-switch mdc-switch--disabled">    
+  <input type="checkbox" id="another-basic-switch" class="mdc-switch__native-control" disabled />
+  <div class="mdc-switch__background">
+    <div class="mdc-switch__knob"></div>
+  </div>
+</div>
+<label for="another-basic-switch" class="mdc-switch-label">off/on</label>
+```
+
+## Classes
+
+### Block
+
+The block class is `mdc-switch`. This defines the top-level switch element.
+
+### Modifier
+
+The provided modifiers are:
+
+| Class                 | Description                                  |
+| ----------------------| -------------------------------------------- |
+| `mdc-switch--disabled`   | Applies disabled style to disabled switches. |
diff --git a/packages/mdc-switch/_mixins.scss b/packages/mdc-switch/_mixins.scss
@@ -0,0 +1,18 @@
+// 
+// Copyright 2016 Google Inc. All Rights Reserved.
+// 
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//      http://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// 
+
+@function mdc-switch-transition($property, $timing-function, $duration: $mdc-switch-transition-duration) {
+  @return $property $duration $timing-function;
+}
diff --git a/packages/mdc-switch/_variables.scss b/packages/mdc-switch/_variables.scss
@@ -0,0 +1,33 @@
+// 
+// Copyright 2016 Google Inc. All Rights Reserved.
+// 
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+// 
+//      http://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// 
+
+$mdc-switch-track-width: 34px;
+$mdc-switch-track-height: 14px;
+$mdc-switch-knob-diameter: 20px;
+$mdc-switch-focus-ring-diameter: 48px;
+$mdc-switch-knob-active-margin: $mdc-switch-track-width - $mdc-switch-knob-diameter;
+
+$mdc-switch-unchecked-track-color: #000;
+$mdc-switch-unchecked-knob-color: #fafafa;
+$mdc-switch-unchecked-focus-ring-color: #9e9e9e;
+$mdc-switch-unchecked-knob-color-dark: #bdbdbd;
+$mdc-switch-unchecked-track-color-dark: #fff;
+$mdc-switch-unchecked-focus-ring-color-dark: #f1f1f1;
+$mdc-switch-disabled-knob-color: #bdbdbd;
+$mdc-switch-disabled-knob-color-dark: #424242;
+
+$mdc-switch-transition-duration: 175ms;
+$mdc-switch-transition-curve: cubic-bezier(.4, 0, .2, 1);