| Index: third_party/polymer/components/paper-toggle-button/paper-toggle-button.css
|
| diff --git a/third_party/polymer/components/paper-toggle-button/paper-toggle-button.css b/third_party/polymer/components/paper-toggle-button/paper-toggle-button.css
|
| index 67e89305733aad4a8c22a20810dcad04a9a21702..5ffe0451161e721a0a968310a194f8a8364953c6 100644
|
| --- a/third_party/polymer/components/paper-toggle-button/paper-toggle-button.css
|
| +++ b/third_party/polymer/components/paper-toggle-button/paper-toggle-button.css
|
| @@ -15,53 +15,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
| outline: none;
|
| }
|
|
|
| -#toggleContainer {
|
| - position: relative;
|
| - width: 64px;
|
| - height: 16px;
|
| +/* Class selectors can be overridden by users. */
|
| +
|
| +.toggle-bar {
|
| + background-color: #000000;
|
| }
|
|
|
| -#toggleBar {
|
| - position: absolute;
|
| - top: 8px;
|
| - left: 16px;
|
| - height: 1px;
|
| - width: 32px;
|
| - background-color: #5a5a5a;
|
| - pointer-events: none;
|
| +.toggle-button {
|
| + background-color: #f1f1f1;
|
| }
|
|
|
| -#toggleBar[checked] {
|
| +[checked] .toggle {
|
| background-color: #0f9d58;
|
| }
|
|
|
| -#toggleContainer[checked] #checkedBar {
|
| - width: 100%;
|
| +.toggle-ink {
|
| + color: #bbb;
|
| +}
|
| +
|
| +[checked] .toggle-ink {
|
| + color: #0f9d58;
|
| +}
|
| +
|
| +/* ID selectors should not be overriden by users. */
|
| +
|
| +#toggleContainer {
|
| + position: relative;
|
| + width: 36px;
|
| + height: 14px;
|
| +}
|
| +
|
| +#toggleContainer[disabled] {
|
| + opacity: 0.3;
|
| + pointer-events: none;
|
| }
|
|
|
| -#toggleRadio {
|
| +#toggleBar {
|
| position: absolute;
|
| - left: 0;
|
| - padding: 8px 48px 8px 0;
|
| - margin: -8px -48px -8px 0;
|
| - transition: -webkit-transform linear .08s;
|
| - transition: transform linear .08s;
|
| + height: 100%;
|
| + width: 100%;
|
| + border-radius: 8px;
|
| + pointer-events: none;
|
| + opacity: 0.26;
|
| + transition: background-color linear .08s;
|
| }
|
|
|
| -#toggleRadio[checked] {
|
| - -webkit-transform: translate(48px, 0);
|
| - transform: translate(48px, 0);
|
| - padding: 8px 0 8px 48px;
|
| - margin: -8px 0 -8px -48px;
|
| +[checked] #toggleBar {
|
| + opacity: 0.5;
|
| }
|
|
|
| -#toggleRadio.dragging {
|
| +#toggleButton {
|
| + position: absolute;
|
| + top: -3px;
|
| + height: 20px;
|
| + width: 20px;
|
| + border-radius: 50%;
|
| + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
|
| + transition: -webkit-transform linear .08s, background-color linear .08s;
|
| + transition: transform linear .08s, background-color linear .08s;
|
| +}
|
| +
|
| +#toggleButton.dragging {
|
| -webkit-transition: none;
|
| transition: none;
|
| }
|
|
|
| -/* disabled state */
|
| -#toggleContainer[disabled] {
|
| - opacity: 0.3;
|
| +[checked] #toggleButton {
|
| + -webkit-transform: translate(16px, 0);
|
| + transform: translate(16px, 0);
|
| +}
|
| +
|
| +#ink {
|
| + position: absolute;
|
| + top: -14px;
|
| + left: -14px;
|
| + width: 48px;
|
| + height: 48px;
|
| pointer-events: none;
|
| }
|
|
|