Skip to content

Commit

Permalink
feat(switch): Implement css switch component (#235)
Browse files Browse the repository at this point in the history
  • Loading branch information
amsheehan authored Feb 1, 2017
1 parent eaeb2de commit 625aa51
Show file tree
Hide file tree
Showing 10 changed files with 425 additions and 0 deletions.
1 change: 1 addition & 0 deletions demos/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
110 changes: 110 additions & 0 deletions demos/switch.html
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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";
1 change: 1 addition & 0 deletions packages/material-components-web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
48 changes: 48 additions & 0 deletions packages/mdc-switch/README.md
Original file line number Diff line number Diff line change
@@ -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. |
18 changes: 18 additions & 0 deletions packages/mdc-switch/_mixins.scss
Original file line number Diff line number Diff line change
@@ -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;
}
33 changes: 33 additions & 0 deletions packages/mdc-switch/_variables.scss
Original file line number Diff line number Diff line change
@@ -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);
Loading

0 comments on commit 625aa51

Please sign in to comment.