feat(switch): Implement css switch component #235
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
|
There was a problem hiding this comment. What purpose does .mdc-switch-label serve? It has no CSS definition |
||
| </section> | ||
| <section> | ||
| <h2>Switch on Light Theme - Disabled</h2> | ||
| <div class="mdc-switch mdc-switch--disabled"> | ||
| <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 Light Theme</h2> | ||
|
There was a problem hiding this comment. Think you mean "Dark Theme" here and below |
||
| <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 mdc-switch--disabled"> | ||
| <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> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| # 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 | ||
|
|
||
| ### CSS Only | ||
|
There was a problem hiding this comment. I think we can just get rid of saying |
||
| ```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> | ||
| ``` | ||
|
|
||
| ### CSS Only - 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-fab--disabled` | Applies disabled style to disabled switches. | | ||
|
There was a problem hiding this comment. I think you mean |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| // | ||
| // 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-background-color: #221f1f; | ||
| $mdc-switch-unchecked-knob-color: #f1f1f1; | ||
| $mdc-switch-unchecked-focus-ring-color: #9e9e9e; | ||
| $mdc-switch-disabled-focus-ring-color: #000; | ||
|
There was a problem hiding this comment. you probably don't need this since a disabled component can't have a focus ring There was a problem hiding this comment. It's in the spec, but the only way to achieve focus is by using chrome dev tools to force the state. Take it out? |
||
| $mdc-switch-unchecked-disabled-knob-color: #bdbdbd; | ||
|
There was a problem hiding this comment. this should probably just be There was a problem hiding this comment. unchecked track color and disabled unchecked track color are the same value with different opacities, so I just made it |
||
| $mdc-switch-unchecked-knob-color-dark: #424242; | ||
| $mdc-switch-unchecked-track-color-dark: #484848; | ||
|
|
||
| $mdc-switch-transition-duration: 175ms; | ||
| $mdc-switch-transition-curve: cubic-bezier(.4, 0, .2, 1); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: indentation for this HTML looks off