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