| OLD | NEW | 
|---|
|  | (Empty) | 
| 1 /* |  | 
| 2 Copyright (c) 2015 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 .hidden { |  | 
| 20   display: none; |  | 
| 21 } |  | 
| 22 |  | 
| 23 #checkboxContainer { |  | 
| 24   display: inline-block; |  | 
| 25   position: relative; |  | 
| 26   width: 18px; |  | 
| 27   height: 18px; |  | 
| 28   cursor: pointer; |  | 
| 29   -webkit-transform: translateZ(0); |  | 
| 30   transform: translateZ(0); |  | 
| 31   vertical-align: middle; |  | 
| 32   background-color: var(--paper-checkbox-unchecked-background-color, transparent
     ); |  | 
| 33 } |  | 
| 34 |  | 
| 35 :host #ink { |  | 
| 36   position: absolute; |  | 
| 37   top: -15px; |  | 
| 38   left: -15px; |  | 
| 39   width: 48px; |  | 
| 40   height: 48px; |  | 
| 41   color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color); |  | 
| 42   opacity: 0.6; |  | 
| 43   pointer-events: none; |  | 
| 44 } |  | 
| 45 |  | 
| 46 :host #ink[checked] { |  | 
| 47   color: var(--paper-checkbox-checked-ink-color, --default-primary-color); |  | 
| 48 } |  | 
| 49 |  | 
| 50 :host #checkbox { |  | 
| 51   position: relative; |  | 
| 52   box-sizing: border-box; |  | 
| 53   height: 100%; |  | 
| 54   border: solid 2px; |  | 
| 55   border-color: var(--paper-checkbox-unchecked-color, --primary-text-color); |  | 
| 56   border-radius: 2px; |  | 
| 57   pointer-events: none; |  | 
| 58   -webkit-transition: background-color 140ms, border-color 140ms; |  | 
| 59   transition: background-color 140ms, border-color 140ms; |  | 
| 60 } |  | 
| 61 |  | 
| 62 /* checkbox checked animations */ |  | 
| 63 #checkbox.checked #checkmark { |  | 
| 64   -webkit-animation: checkmark-expand 140ms ease-out forwards; |  | 
| 65   animation: checkmark-expand 140ms ease-out forwards; |  | 
| 66 } |  | 
| 67 |  | 
| 68 @-webkit-keyframes checkmark-expand { |  | 
| 69   0% { |  | 
| 70     top: 9px; |  | 
| 71     left: 6px; |  | 
| 72     width: 0px; |  | 
| 73     height: 0px; |  | 
| 74   } |  | 
| 75   100% { |  | 
| 76     top: -1px; |  | 
| 77     left: 4px; |  | 
| 78     width: 5px; |  | 
| 79     height: 10px; |  | 
| 80   } |  | 
| 81 } |  | 
| 82 |  | 
| 83 @keyframes checkmark-expand { |  | 
| 84   0% { |  | 
| 85     top: 9px; |  | 
| 86     left: 6px; |  | 
| 87     width: 0px; |  | 
| 88     height: 0px; |  | 
| 89   } |  | 
| 90   100% { |  | 
| 91     top: -1px; |  | 
| 92     left: 4px; |  | 
| 93     width: 5px; |  | 
| 94     height: 10px; |  | 
| 95   } |  | 
| 96 } |  | 
| 97 |  | 
| 98 :host #checkbox.checked { |  | 
| 99   background-color: var(--paper-checkbox-checked-color, --default-primary-color)
     ; |  | 
| 100   border-color: var(--paper-checkbox-checked-color, --default-primary-color); |  | 
| 101 } |  | 
| 102 |  | 
| 103 :host #checkmark { |  | 
| 104   -webkit-transform: rotate(45deg); |  | 
| 105   transform: rotate(45deg); |  | 
| 106   position: absolute; |  | 
| 107   top: -1px; |  | 
| 108   left: 4px; |  | 
| 109   width: 5px; |  | 
| 110   height: 10px; |  | 
| 111   border-style: solid; |  | 
| 112   border-top: none; |  | 
| 113   border-left: none; |  | 
| 114   border-right-width: 2px; |  | 
| 115   border-bottom-width: 2px; |  | 
| 116   border-color: var(--paper-checkbox-checkmark-color, white); |  | 
| 117 } |  | 
| 118 |  | 
| 119 /* label */ |  | 
| 120 #checkboxLabel { |  | 
| 121   position: relative; |  | 
| 122   display: inline-block; |  | 
| 123   vertical-align: middle; |  | 
| 124   padding-left: 8px; |  | 
| 125   white-space: normal; |  | 
| 126   pointer-events: none; |  | 
| 127   color: var(--paper-checkbox-label-color, --primary-text-color); |  | 
| 128 } |  | 
| 129 |  | 
| 130 #checkboxLabel[hidden] { |  | 
| 131   display: none; |  | 
| 132 } |  | 
| 133 |  | 
| 134 /* disabled state */ |  | 
| 135 :host([disabled]) { |  | 
| 136   pointer-events: none; |  | 
| 137 } |  | 
| 138 |  | 
| 139 :host([disabled]) #checkbox { |  | 
| 140   opacity: 0.5; |  | 
| 141   border-color: var(--paper-checkbox-unchecked-color, --primary-text-color); |  | 
| 142 } |  | 
| 143 |  | 
| 144 :host([disabled][checked]) #checkbox { |  | 
| 145   background-color: var(--paper-checkbox-unchecked-color, --primary-text-color); |  | 
| 146   opacity: 0.5; |  | 
| 147 } |  | 
| 148 |  | 
| 149 :host([disabled]) #checkboxLabel  { |  | 
| 150   opacity: 0.65; |  | 
| 151 } |  | 
| OLD | NEW | 
|---|