third_party/polymer/components-chromium/paper-checkbox/paper-checkbox.css

   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: 0;
  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   opacity: 0.33;
 262   border-color: #5a5a5a;
 263 }