src/third_party/polymer/components-chromium/paper-button/paper-button.css

   1 :host {
   2   display: inline-block;
   3   position: relative;
   4   border: 0;
   5   background: transparent;
   6   text-align: center;
   7   font: inherit;
   8   text-transform: uppercase;
   9   outline: none;
  10   border-radius: 3px;
  11   -webkit-user-select: none;
  12   user-select: none;
  13   cursor: pointer;
  14 }
  15
  16 :host(.hover:hover) {
  17   background: #e4e4e4;
  18 }
  19
  20 :host([raisedButton]) {
  21   background: #dfdfdf;
  22 }
  23
  24 :host([raisedButton].hover:hover) {
  25   background: #d6d6d6;
  26 }
  27
  28 :host([disabled]) {
  29   background: #eaeaea !important;
  30   color: #a8a8a8 !important;
  31   cursor: auto;
  32 }
  33
  34 #shadow-container {
  35   border-radius: inherit;
  36 }
  37
  38 #clip {
  39   position: relative;
  40   border-radius: inherit;
  41   overflow: hidden;
  42 }
  43
  44 /*
  45 #focusBg {
  46   position: absolute;
  47   top: 0;
  48   left: 0;
  49   bottom: 0;
  50   right: 0;
  51   opacity: 0;
  52   border-radius: inherit;
  53   background: #c3c3c3;
  54   -webkit-transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  55   transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  56 }
  57
  58 :host([focused]) #focusBg {
  59   -webkit-transition: none;
  60   transition: none;
  61   -webkit-animation: focus-fade 0.7s infinite alternate;
  62   animation: focus-fade 0.7s infinite alternate;
  63 }
  64
  65 @-webkit-keyframes focus-fade {
  66   0% {
  67     opacity: 1;
  68   }
  69   100% {
  70     opacity: 0;
  71   }
  72 }
  73
  74 @keyframes focus-fade {
  75   0% {
  76     opacity: 1;
  77   }
  78   100% {
  79     opacity: 0;
  80   }
  81 }
  82 */
  83
  84 #ripple {
  85   position: absolute;
  86   top: 0;
  87   left: 0;
  88   bottom: 0;
  89   right: 0;
  90   color: #d1d1d1;
  91   pointer-events: none;
  92 }
  93
  94 :host([raisedButton]) #ripple {
  95   color: #cecece;
  96 }
  97
  98 #ripple::shadow canvas {
  99   top: 0;
 100   left: 0;
 101 }
 102
 103 #content {
 104   /* needed to position the ink behind the content */
 105   position: relative;
 106 }
 107
 108 #icon {
 109   margin: 8px;
 110 }
 111
 112 #content > span {
 113   display: inline-block;
 114   margin: 0.5em;
 115 }