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

   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.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 .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 }