Home | History | Annotate | Download | only in paper-button
      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 }