OLD | NEW |
(Empty) | |
| 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 } |
OLD | NEW |