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.github.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/CONTRIBUTORS.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/PATENTS.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 } 263