Skip to content

Commit cc643c5

Browse files
PatelUtkarshPatelUtkarsh
authored
Merge pull request #435 from material-components/feature/325-icon-button
Add missing icon styles
2 parents cbd4814 + 1d339b3 commit cc643c5

File tree

3 files changed

+266
-2
lines changed

3 files changed

+266
-2
lines changed

‎plugin/assets/css/src/components/icon-button.css‎

Lines changed: 264 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,264 @@
1+
/**
2+
* Copyright 2022 Google LLC
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
.mdc-icon-button {
18+
display: inline-block;
19+
position: relative;
20+
box-sizing: border-box;
21+
border: none;
22+
outline: none;
23+
background-color: transparent;
24+
fill: currentColor;
25+
color: inherit;
26+
font-size: 24px;
27+
text-decoration: none;
28+
cursor: pointer;
29+
-webkit-user-select: none;
30+
-moz-user-select: none;
31+
-ms-user-select: none;
32+
user-select: none;
33+
width: 48px;
34+
height: 48px;
35+
padding: 12px;
36+
}
37+
38+
.mdc-icon-button svg,
39+
.mdc-icon-button img {
40+
width: 24px;
41+
height: 24px;
42+
}
43+
44+
.mdc-icon-button:disabled {
45+
color: rgba(0, 0, 0, 0.38);
46+
47+
/* @alternate */
48+
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
49+
}
50+
51+
.mdc-icon-button:disabled {
52+
cursor: default;
53+
pointer-events: none;
54+
}
55+
56+
.mdc-icon-button__icon {
57+
display: inline-block;
58+
}
59+
60+
.mdc-icon-button__icon.mdc-icon-button__icon--on {
61+
display: none;
62+
}
63+
64+
.mdc-icon-button--on .mdc-icon-button__icon {
65+
display: none;
66+
}
67+
68+
.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on {
69+
display: inline-block;
70+
}
71+
72+
@-webkit-keyframes mdc-ripple-fg-radius-in {
73+
74+
from {
75+
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
76+
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
77+
-webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
78+
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
79+
}
80+
81+
to {
82+
-webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
83+
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
84+
}
85+
}
86+
87+
@keyframes mdc-ripple-fg-radius-in {
88+
89+
from {
90+
-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
91+
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
92+
-webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
93+
transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
94+
}
95+
96+
to {
97+
-webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
98+
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
99+
}
100+
}
101+
102+
@-webkit-keyframes mdc-ripple-fg-opacity-in {
103+
104+
from {
105+
-webkit-animation-timing-function: linear;
106+
animation-timing-function: linear;
107+
opacity: 0;
108+
}
109+
110+
to {
111+
opacity: var(--mdc-ripple-fg-opacity, 0);
112+
}
113+
}
114+
115+
@keyframes mdc-ripple-fg-opacity-in {
116+
117+
from {
118+
-webkit-animation-timing-function: linear;
119+
animation-timing-function: linear;
120+
opacity: 0;
121+
}
122+
123+
to {
124+
opacity: var(--mdc-ripple-fg-opacity, 0);
125+
}
126+
}
127+
128+
@-webkit-keyframes mdc-ripple-fg-opacity-out {
129+
130+
from {
131+
-webkit-animation-timing-function: linear;
132+
animation-timing-function: linear;
133+
opacity: var(--mdc-ripple-fg-opacity, 0);
134+
}
135+
136+
to {
137+
opacity: 0;
138+
}
139+
}
140+
141+
@keyframes mdc-ripple-fg-opacity-out {
142+
143+
from {
144+
-webkit-animation-timing-function: linear;
145+
animation-timing-function: linear;
146+
opacity: var(--mdc-ripple-fg-opacity, 0);
147+
}
148+
149+
to {
150+
opacity: 0;
151+
}
152+
}
153+
154+
.mdc-icon-button {
155+
--mdc-ripple-fg-size: 0;
156+
--mdc-ripple-left: 0;
157+
--mdc-ripple-top: 0;
158+
--mdc-ripple-fg-scale: 1;
159+
--mdc-ripple-fg-translate-end: 0;
160+
--mdc-ripple-fg-translate-start: 0;
161+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
162+
}
163+
164+
.mdc-icon-button::before,
165+
.mdc-icon-button::after {
166+
position: absolute;
167+
border-radius: 50%;
168+
opacity: 0;
169+
pointer-events: none;
170+
content: "";
171+
}
172+
173+
.mdc-icon-button::before {
174+
transition: opacity 15ms linear, background-color 15ms linear;
175+
z-index: 1;
176+
}
177+
178+
.mdc-icon-button.mdc-ripple-upgraded::before {
179+
-webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
180+
transform: scale(var(--mdc-ripple-fg-scale, 1));
181+
}
182+
183+
.mdc-icon-button.mdc-ripple-upgraded::after {
184+
top: 0;
185+
186+
/* @noflip */
187+
left: 0;
188+
-webkit-transform: scale(0);
189+
transform: scale(0);
190+
-webkit-transform-origin: center center;
191+
transform-origin: center center;
192+
}
193+
194+
.mdc-icon-button.mdc-ripple-upgraded--unbounded::after {
195+
top: var(--mdc-ripple-top, 0);
196+
197+
/* @noflip */
198+
left: var(--mdc-ripple-left, 0);
199+
}
200+
201+
.mdc-icon-button.mdc-ripple-upgraded--foreground-activation::after {
202+
-webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
203+
animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
204+
}
205+
206+
.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation::after {
207+
-webkit-animation: mdc-ripple-fg-opacity-out 150ms;
208+
animation: mdc-ripple-fg-opacity-out 150ms;
209+
-webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
210+
transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
211+
}
212+
213+
.mdc-icon-button::before,
214+
.mdc-icon-button::after {
215+
top: calc(50% - 50%);
216+
217+
/* @noflip */
218+
left: calc(50% - 50%);
219+
width: 100%;
220+
height: 100%;
221+
}
222+
223+
.mdc-icon-button.mdc-ripple-upgraded::before,
224+
.mdc-icon-button.mdc-ripple-upgraded::after {
225+
top: var(--mdc-ripple-top, calc(50% - 50%));
226+
227+
/* @noflip */
228+
left: var(--mdc-ripple-left, calc(50% - 50%));
229+
width: var(--mdc-ripple-fg-size, 100%);
230+
height: var(--mdc-ripple-fg-size, 100%);
231+
}
232+
233+
.mdc-icon-button.mdc-ripple-upgraded::after {
234+
width: var(--mdc-ripple-fg-size, 100%);
235+
height: var(--mdc-ripple-fg-size, 100%);
236+
}
237+
238+
.mdc-icon-button::before,
239+
.mdc-icon-button::after {
240+
background-color: #000;
241+
}
242+
243+
.mdc-icon-button:hover::before {
244+
opacity: 0.04;
245+
}
246+
247+
.mdc-icon-button.mdc-ripple-upgraded--background-focused::before,
248+
.mdc-icon-button:not(.mdc-ripple-upgraded):focus::before {
249+
transition-duration: 75ms;
250+
opacity: 0.12;
251+
}
252+
253+
.mdc-icon-button:not(.mdc-ripple-upgraded)::after {
254+
transition: opacity 150ms linear;
255+
}
256+
257+
.mdc-icon-button:not(.mdc-ripple-upgraded):active::after {
258+
transition-duration: 75ms;
259+
opacity: 0.12;
260+
}
261+
262+
.mdc-icon-button.mdc-ripple-upgraded {
263+
--mdc-ripple-fg-opacity: 0.12;
264+
}

‎plugin/assets/css/src/material-components.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
*/
2020

2121
@import "mixins.css";
22-
@import "@material/icon-button/dist/mdc.icon-button.css";
2322
@import "@material/layout-grid/dist/mdc.layout-grid.css";
2423
@import "@material/tab-bar/dist/mdc.tab-bar.css";
2524
@import "@material/tab-scroller/dist/mdc.tab-scroller.css";
@@ -35,3 +34,4 @@
3534
@import "./components/tooltip.css";
3635
@import "./components/checkbox.css";
3736
@import "./components/button.css";
37+
@import "./components/icon-button.css";

‎theme/assets/css/src/material-components.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
* limitations under the License.
1515
*/
1616

17-
@import "@material/icon-button/dist/mdc.icon-button.css";
1817
@import "@material/layout-grid/dist/mdc.layout-grid.css";
1918
@import "@material/tab-bar/dist/mdc.tab-bar.css";
2019
@import "@material/tab-scroller/dist/mdc.tab-scroller.css";
@@ -28,6 +27,7 @@
2827
*/
2928
@import "../../../../plugin/assets/css/src/components/ripple.css";
3029
@import "../../../../plugin/assets/css/src/components/button.css";
30+
@import "../../../../plugin/assets/css/src/components/icon-button.css";
3131
@import "../../../../plugin/assets/css/src/components/list.css";
3232
@import "../../../../plugin/assets/css/src/components/form-field.css";
3333
@import "../../../../plugin/assets/css/src/components/floating-label.css";

0 commit comments

Comments
 (0)