| OLD | NEW |
| (Empty) |
| 1 /** | |
| 2 @license | |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
| 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
| 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
| 7 Code distributed by Google as part of the polymer project is also | |
| 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
| 9 */ | |
| 10 | |
| 11 :host { | |
| 12 display: inline-block; | |
| 13 white-space: nowrap; | |
| 14 } | |
| 15 | |
| 16 :host(:focus) { | |
| 17 outline: none; | |
| 18 } | |
| 19 | |
| 20 .hidden { | |
| 21 display: none; | |
| 22 } | |
| 23 | |
| 24 #checkboxContainer { | |
| 25 display: inline-block; | |
| 26 position: relative; | |
| 27 width: 18px; | |
| 28 height: 18px; | |
| 29 cursor: pointer; | |
| 30 -webkit-transform: translateZ(0); | |
| 31 transform: translateZ(0); | |
| 32 vertical-align: middle; | |
| 33 background-color: var(--paper-checkbox-unchecked-background-color, transparent
); | |
| 34 } | |
| 35 | |
| 36 :host #ink { | |
| 37 position: absolute; | |
| 38 top: -15px; | |
| 39 left: -15px; | |
| 40 width: 48px; | |
| 41 height: 48px; | |
| 42 color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color); | |
| 43 opacity: 0.6; | |
| 44 pointer-events: none; | |
| 45 } | |
| 46 | |
| 47 :host #ink[checked] { | |
| 48 color: var(--paper-checkbox-checked-ink-color, --default-primary-color); | |
| 49 } | |
| 50 | |
| 51 :host #checkbox { | |
| 52 position: relative; | |
| 53 box-sizing: border-box; | |
| 54 height: 100%; | |
| 55 border: solid 2px; | |
| 56 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color); | |
| 57 border-radius: 2px; | |
| 58 pointer-events: none; | |
| 59 -webkit-transition: background-color 140ms, border-color 140ms; | |
| 60 transition: background-color 140ms, border-color 140ms; | |
| 61 } | |
| 62 | |
| 63 /* checkbox checked animations */ | |
| 64 #checkbox.checked #checkmark { | |
| 65 -webkit-animation: checkmark-expand 140ms ease-out forwards; | |
| 66 animation: checkmark-expand 140ms ease-out forwards; | |
| 67 } | |
| 68 | |
| 69 @-webkit-keyframes checkmark-expand { | |
| 70 0% { | |
| 71 top: 9px; | |
| 72 left: 6px; | |
| 73 width: 0px; | |
| 74 height: 0px; | |
| 75 } | |
| 76 100% { | |
| 77 top: -1px; | |
| 78 left: 4px; | |
| 79 width: 5px; | |
| 80 height: 10px; | |
| 81 } | |
| 82 } | |
| 83 | |
| 84 @keyframes checkmark-expand { | |
| 85 0% { | |
| 86 top: 9px; | |
| 87 left: 6px; | |
| 88 width: 0px; | |
| 89 height: 0px; | |
| 90 } | |
| 91 100% { | |
| 92 top: -1px; | |
| 93 left: 4px; | |
| 94 width: 5px; | |
| 95 height: 10px; | |
| 96 } | |
| 97 } | |
| 98 | |
| 99 :host #checkbox.checked { | |
| 100 background-color: var(--paper-checkbox-checked-color, --default-primary-color)
; | |
| 101 border-color: var(--paper-checkbox-checked-color, --default-primary-color); | |
| 102 } | |
| 103 | |
| 104 :host #checkmark { | |
| 105 -webkit-transform: rotate(45deg); | |
| 106 transform: rotate(45deg); | |
| 107 position: absolute; | |
| 108 top: -1px; | |
| 109 left: 4px; | |
| 110 width: 5px; | |
| 111 height: 10px; | |
| 112 border-style: solid; | |
| 113 border-top: none; | |
| 114 border-left: none; | |
| 115 border-right-width: 2px; | |
| 116 border-bottom-width: 2px; | |
| 117 border-color: var(--paper-checkbox-checkmark-color, white); | |
| 118 } | |
| 119 | |
| 120 /* label */ | |
| 121 #checkboxLabel { | |
| 122 position: relative; | |
| 123 display: inline-block; | |
| 124 vertical-align: middle; | |
| 125 padding-left: 8px; | |
| 126 white-space: normal; | |
| 127 pointer-events: none; | |
| 128 color: var(--paper-checkbox-label-color, --primary-text-color); | |
| 129 } | |
| 130 | |
| 131 #checkboxLabel[hidden] { | |
| 132 display: none; | |
| 133 } | |
| 134 | |
| 135 /* disabled state */ | |
| 136 :host([disabled]) { | |
| 137 pointer-events: none; | |
| 138 } | |
| 139 | |
| 140 :host([disabled]) #checkbox { | |
| 141 opacity: 0.5; | |
| 142 border-color: var(--paper-checkbox-unchecked-color, --primary-text-color); | |
| 143 } | |
| 144 | |
| 145 :host([disabled][checked]) #checkbox { | |
| 146 background-color: var(--paper-checkbox-unchecked-color, --primary-text-color); | |
| 147 opacity: 0.5; | |
| 148 } | |
| 149 | |
| 150 :host([disabled]) #checkboxLabel { | |
| 151 opacity: 0.65; | |
| 152 } | |
| OLD | NEW |