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 |