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

   1 /**
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 */
  10
  11 :host {
  12   display: inline-block;
  13   white-space: nowrap;
  14 }
  15
  16 :host(:focus) {
  17   outline: none;
  18 }
  19
  20 .hidden {
  21   display: none;
  22 }
  23
  24 #checkboxContainer {
  25   display: inline-block;
  26   position: relative;
  27   width: 18px;
  28   height: 18px;
  29   cursor: pointer;
  30   -webkit-transform: translateZ(0);
  31   transform: translateZ(0);
  32   vertical-align: middle;
  33   background-color: var(--paper-checkbox-unchecked-background-color, transparent);
  34 }
  35
  36 :host #ink {
  37   position: absolute;
  38   top: -15px;
  39   left: -15px;
  40   width: 48px;
  41   height: 48px;
  42   color: var(--paper-checkbox-unchecked-ink-color, --primary-text-color);
  43   opacity: 0.6;
  44   pointer-events: none;
  45 }
  46
  47 :host #ink[checked] {
  48   color: var(--paper-checkbox-checked-ink-color, --default-primary-color);
  49 }
  50
  51 :host #checkbox {
  52   position: relative;
  53   box-sizing: border-box;
  54   height: 100%;
  55   border: solid 2px;
  56   border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
  57   border-radius: 2px;
  58   pointer-events: none;
  59   -webkit-transition: background-color 140ms, border-color 140ms;
  60   transition: background-color 140ms, border-color 140ms;
  61 }
  62
  63 /* checkbox checked animations */
  64 #checkbox.checked #checkmark {
  65   -webkit-animation: checkmark-expand 140ms ease-out forwards;
  66   animation: checkmark-expand 140ms ease-out forwards;
  67 }
  68
  69 @-webkit-keyframes checkmark-expand {
  70   0% {
  71     top: 9px;
  72     left: 6px;
  73     width: 0px;
  74     height: 0px;
  75   }
  76   100% {
  77     top: -1px;
  78     left: 4px;
  79     width: 5px;
  80     height: 10px;
  81   }
  82 }
  83
  84 @keyframes checkmark-expand {
  85   0% {
  86     top: 9px;
  87     left: 6px;
  88     width: 0px;
  89     height: 0px;
  90   }
  91   100% {
  92     top: -1px;
  93     left: 4px;
  94     width: 5px;
  95     height: 10px;
  96   }
  97 }
  98
  99 :host #checkbox.checked {
 100   background-color: var(--paper-checkbox-checked-color, --default-primary-color);
 101   border-color: var(--paper-checkbox-checked-color, --default-primary-color);
 102 }
 103
 104 :host #checkmark {
 105   -webkit-transform: rotate(45deg);
 106   transform: rotate(45deg);
 107   position: absolute;
 108   top: -1px;
 109   left: 4px;
 110   width: 5px;
 111   height: 10px;
 112   border-style: solid;
 113   border-top: none;
 114   border-left: none;
 115   border-right-width: 2px;
 116   border-bottom-width: 2px;
 117   border-color: var(--paper-checkbox-checkmark-color, white);
 118 }
 119
 120 /* label */
 121 #checkboxLabel {
 122   position: relative;
 123   display: inline-block;
 124   vertical-align: middle;
 125   padding-left: 8px;
 126   white-space: normal;
 127   pointer-events: none;
 128   color: var(--paper-checkbox-label-color, --primary-text-color);
 129 }
 130
 131 #checkboxLabel[hidden] {
 132   display: none;
 133 }
 134
 135 /* disabled state */
 136 :host([disabled]) {
 137   pointer-events: none;
 138 }
 139
 140 :host([disabled]) #checkbox {
 141   opacity: 0.5;
 142   border-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
 143 }
 144
 145 :host([disabled][checked]) #checkbox {
 146   background-color: var(--paper-checkbox-unchecked-color, --primary-text-color);
 147   opacity: 0.5;
 148 }
 149
 150 :host([disabled]) #checkboxLabel  {
 151   opacity: 0.65;
 152 }