OLD | NEW |
(Empty) | |
| 1 /* |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 */ |
| 9 |
| 10 :host { |
| 11 display: inline-block; |
| 12 white-space: nowrap; |
| 13 } |
| 14 |
| 15 :host(:focus) { |
| 16 outline: none; |
| 17 } |
| 18 |
| 19 #checkboxContainer { |
| 20 position: relative; |
| 21 width: 18px; |
| 22 height: 18px; |
| 23 cursor: pointer; |
| 24 -webkit-transform: translateZ(0); |
| 25 transform: translateZ(0); |
| 26 } |
| 27 |
| 28 #checkboxContainer.labeled { |
| 29 display: inline-block; |
| 30 vertical-align: middle; |
| 31 } |
| 32 |
| 33 #ink { |
| 34 position: absolute; |
| 35 top: -15px; |
| 36 left: -15px; |
| 37 width: 48px; |
| 38 height: 48px; |
| 39 color: #5a5f5a; |
| 40 } |
| 41 |
| 42 #ink[checked] { |
| 43 color: #0f9d58; |
| 44 } |
| 45 |
| 46 #checkbox { |
| 47 position: absolute; |
| 48 box-sizing: border-box; |
| 49 top: 0px; |
| 50 left: 0px; |
| 51 width: 18px; |
| 52 height: 18px; |
| 53 border: solid 2px; |
| 54 border-color: #5a5a5a; |
| 55 pointer-events: none; |
| 56 } |
| 57 |
| 58 /* checkbox checked animations */ |
| 59 #checkbox.checked.box { |
| 60 border: solid 2px; |
| 61 -webkit-animation: box-shrink 140ms ease-out forwards; |
| 62 animation: box-shrink 140ms ease-out forwards; |
| 63 } |
| 64 |
| 65 @-webkit-keyframes box-shrink { |
| 66 0% { |
| 67 -webkit-transform: rotate(0deg); |
| 68 top: 0px; |
| 69 left: 0px; |
| 70 width: 18px; |
| 71 height: 18px; |
| 72 } |
| 73 100% { |
| 74 -webkit-transform: rotate(45deg); |
| 75 top: 13px; |
| 76 left: 5px; |
| 77 width: 4px; |
| 78 height: 4px; |
| 79 } |
| 80 } |
| 81 |
| 82 @keyframes box-shrink { |
| 83 0% { |
| 84 transform: rotate(0deg); |
| 85 top: 0px; |
| 86 left: 0px; |
| 87 width: 18px; |
| 88 height: 18px; |
| 89 } |
| 90 100% { |
| 91 transform: rotate(45deg); |
| 92 top: 13px; |
| 93 left: 5px; |
| 94 width: 4px; |
| 95 height: 4px; |
| 96 } |
| 97 } |
| 98 |
| 99 #checkbox.checked.checkmark { |
| 100 border-left: none; |
| 101 border-top: none; |
| 102 -webkit-animation: checkmark-expand 140ms ease-out forwards; |
| 103 animation: checkmark-expand 140ms ease-out forwards; |
| 104 } |
| 105 |
| 106 @-webkit-keyframes checkmark-expand { |
| 107 0% { |
| 108 -webkit-transform: rotate(45deg); |
| 109 top: 13px; |
| 110 left: 5px; |
| 111 width: 4px; |
| 112 height: 4px; |
| 113 } |
| 114 100% { |
| 115 -webkit-transform: rotate(45deg); |
| 116 top: -4px; |
| 117 left: 6px; |
| 118 width: 10px; |
| 119 height: 21px; |
| 120 border-right-width: 2px; |
| 121 border-bottom-width: 2px; |
| 122 } |
| 123 } |
| 124 |
| 125 @keyframes checkmark-expand { |
| 126 0% { |
| 127 transform: rotate(45deg); |
| 128 top: 13px; |
| 129 left: 5px; |
| 130 width: 4px; |
| 131 height: 4px; |
| 132 } |
| 133 100% { |
| 134 transform: rotate(45deg); |
| 135 top: -4px; |
| 136 left: 6px; |
| 137 width: 10px; |
| 138 height: 21px; |
| 139 border-right-width: 2px; |
| 140 border-bottom-width: 2px; |
| 141 } |
| 142 } |
| 143 |
| 144 #checkbox.checked { |
| 145 -webkit-transform: rotate(45deg); |
| 146 transform: rotate(45deg); |
| 147 top: -4px; |
| 148 left: 6px; |
| 149 width: 10px; |
| 150 height: 21px; |
| 151 border-top: none; |
| 152 border-left: none; |
| 153 border-right-width: 2px; |
| 154 border-bottom-width: 2px; |
| 155 border-color: #0f9d58; |
| 156 } |
| 157 |
| 158 /* checkbox unchecked animations */ |
| 159 #checkbox.unchecked.checkmark { |
| 160 -webkit-transform: rotate(45deg); |
| 161 transform: rotate(45deg); |
| 162 border-left: none; |
| 163 border-top: none; |
| 164 -webkit-animation: checkmark-shrink 140ms ease-out forwards; |
| 165 animation: checkmark-shrink 140ms ease-out forwards; |
| 166 } |
| 167 |
| 168 @-webkit-keyframes checkmark-shrink { |
| 169 0% { |
| 170 top: -4px; |
| 171 left: 6px; |
| 172 width: 10px; |
| 173 height: 21px; |
| 174 border-right-width: 2px; |
| 175 border-bottom-width: 2px; |
| 176 } |
| 177 100% { |
| 178 top: 13px; |
| 179 left: 5px; |
| 180 width: 4px; |
| 181 height: 4px; |
| 182 } |
| 183 } |
| 184 |
| 185 @keyframes checkmark-shrink { |
| 186 0% { |
| 187 top: -4px; |
| 188 left: 6px; |
| 189 width: 10px; |
| 190 height: 21px; |
| 191 border-right-width: 2px; |
| 192 border-bottom-width: 2px; |
| 193 } |
| 194 100% { |
| 195 top: 13px; |
| 196 left: 5px; |
| 197 width: 4px; |
| 198 height: 4px; |
| 199 } |
| 200 } |
| 201 |
| 202 #checkbox.unchecked.box { |
| 203 -webkit-animation: box-expand 140ms ease-out forwards; |
| 204 animation: box-expand 140ms ease-out forwards; |
| 205 } |
| 206 |
| 207 @-webkit-keyframes box-expand { |
| 208 0% { |
| 209 -webkit-transform: rotate(45deg); |
| 210 top: 13px; |
| 211 left: 5px; |
| 212 width: 4px; |
| 213 height: 4px; |
| 214 } |
| 215 100% { |
| 216 -webkit-transform: rotate(0deg); |
| 217 top: 0px; |
| 218 left: 0px; |
| 219 width: 18px; |
| 220 height: 18px; |
| 221 } |
| 222 } |
| 223 |
| 224 @keyframes box-expand { |
| 225 0% { |
| 226 transform: rotate(45deg); |
| 227 top: 13px; |
| 228 left: 5px; |
| 229 width: 4px; |
| 230 height: 4px; |
| 231 } |
| 232 100% { |
| 233 transform: rotate(0deg); |
| 234 top: 0px; |
| 235 left: 0px; |
| 236 width: 18px; |
| 237 height: 18px; |
| 238 } |
| 239 } |
| 240 |
| 241 /* label */ |
| 242 #checkboxLabel { |
| 243 position: relative; |
| 244 display: inline-block; |
| 245 vertical-align: middle; |
| 246 padding-left: 8px; |
| 247 white-space: normal; |
| 248 pointer-events: none; |
| 249 } |
| 250 |
| 251 #checkboxLabel[hidden] { |
| 252 display: none; |
| 253 } |
| 254 |
| 255 /* disabled state */ |
| 256 :host([disabled]) { |
| 257 pointer-events: none; |
| 258 } |
| 259 |
| 260 :host([disabled]) #checkbox { |
| 261 border-color: #eaeaea !important; |
| 262 } |
OLD | NEW |