OLD | NEW |
(Empty) | |
| 1 /* |
| 2 Copyright 2013 The Polymer Authors. All rights reserved. |
| 3 Use of this source code is governed by a BSD-style |
| 4 license that can be found in the LICENSE file. |
| 5 */ |
| 6 |
| 7 :host { |
| 8 display: inline-block; |
| 9 position: relative; |
| 10 min-width: 60px; |
| 11 height: 24px; |
| 12 overflow: hidden; |
| 13 border: 1px solid #b6b6b6; |
| 14 border-radius: 2px; |
| 15 box-shadow: inset 0px 0px 1px 0 rgba(0,0,0,0.1); |
| 16 -webkit-user-select: none; |
| 17 -moz-user-select: none; |
| 18 -ms-user-select: none; |
| 19 -webkit-transition: border 0.130s ease-out; |
| 20 transition: border 0.130s ease-out; |
| 21 cursor: pointer; |
| 22 font-size: 10px; |
| 23 } |
| 24 |
| 25 :host(.on:host) { |
| 26 border: 1px solid #0fb2c6; |
| 27 } |
| 28 |
| 29 .toggle { |
| 30 position: absolute; |
| 31 left: -webkit-calc(-100% + 24px); |
| 32 left: -moz-calc(-100% + 24px); |
| 33 left: calc(-100% + 24px); |
| 34 width: -webkit-calc(200% - 24px); |
| 35 width: -moz-calc(200% - 24px); |
| 36 width: calc(200% - 24px); |
| 37 height: 100%; |
| 38 overflow: hidden; |
| 39 white-space: nowrap; |
| 40 /* Safari bug: https://bugs.webkit.org/show_bug.cgi?id=100568 */ |
| 41 /*-webkit-transition: left 0.130s ease-out;*/ |
| 42 transition: left 0.130s ease-out; |
| 43 } |
| 44 |
| 45 /* workaround for https://github.com/Polymer/platform/issues/36 */ |
| 46 /* @polyfill-unscoped-rule polymer-ui-toggle-button .toggle { |
| 47 left: -webkit-calc(-100% + 24px); |
| 48 width: -webkit-calc(200% - 24px); |
| 49 } */ |
| 50 |
| 51 .toggle.dragging { |
| 52 -webkit-transition: none; |
| 53 transition: none; |
| 54 } |
| 55 |
| 56 .toggle.on { |
| 57 left: 0; |
| 58 } |
| 59 |
| 60 .toggle > * { |
| 61 float: left; |
| 62 } |
| 63 |
| 64 .on-label, .off-label { |
| 65 width: 50%; |
| 66 height: 100%; |
| 67 box-sizing: border-box; |
| 68 -moz-box-sizing: border-box; |
| 69 } |
| 70 |
| 71 .on-label { |
| 72 padding-right: 12px; |
| 73 background-color: #2fb2c6; |
| 74 color: white; |
| 75 } |
| 76 |
| 77 .off-label { |
| 78 padding-left: 12px; |
| 79 background-color: #bfbfbf; |
| 80 color: #716f6f; |
| 81 } |
| 82 |
| 83 .thumb { |
| 84 position: absolute; |
| 85 left: -webkit-calc(50% - 12px); |
| 86 left: -moz-calc(50% - 12px); |
| 87 left: calc(50% - 12px); |
| 88 width: 24px; |
| 89 height: 100%; |
| 90 border-radius: 1px; |
| 91 background-color: white; |
| 92 } |
| 93 |
| 94 /* @polyfill-unscoped-rule polymer-ui-toggle-button .thumb { |
| 95 left: -webkit-calc(50% - 12px); |
| 96 } */ |
OLD | NEW |