Merge pull request #435 from material-components/feature/325-icon-button

Add missing icon styles

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

@@ -0,0 +1,264 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.mdc-icon-button {
+	display: inline-block;
+	position: relative;
+	box-sizing: border-box;
+	border: none;
+	outline: none;
+	background-color: transparent;
+	fill: currentColor;
+	color: inherit;
+	font-size: 24px;
+	text-decoration: none;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	width: 48px;
+	height: 48px;
+	padding: 12px;
+}
+
+.mdc-icon-button svg,
+.mdc-icon-button img {
+	width: 24px;
+	height: 24px;
+}
+
+.mdc-icon-button:disabled {
+	color: rgba(0, 0, 0, 0.38);
+
+	/* @alternate */
+	color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
+}
+
+.mdc-icon-button:disabled {
+	cursor: default;
+	pointer-events: none;
+}
+
+.mdc-icon-button__icon {
+	display: inline-block;
+}
+
+.mdc-icon-button__icon.mdc-icon-button__icon--on {
+	display: none;
+}
+
+.mdc-icon-button--on .mdc-icon-button__icon {
+	display: none;
+}
+
+.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on {
+	display: inline-block;
+}
+
+@-webkit-keyframes mdc-ripple-fg-radius-in {
+
+	from {
+		-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		-webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+		transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+	}
+
+	to {
+		-webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+		transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+	}
+}
+
+@keyframes mdc-ripple-fg-radius-in {
+
+	from {
+		-webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		-webkit-transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+		transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
+	}
+
+	to {
+		-webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+		transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+	}
+}
+
+@-webkit-keyframes mdc-ripple-fg-opacity-in {
+
+	from {
+		-webkit-animation-timing-function: linear;
+		animation-timing-function: linear;
+		opacity: 0;
+	}
+
+	to {
+		opacity: var(--mdc-ripple-fg-opacity, 0);
+	}
+}
+
+@keyframes mdc-ripple-fg-opacity-in {
+
+	from {
+		-webkit-animation-timing-function: linear;
+		animation-timing-function: linear;
+		opacity: 0;
+	}
+
+	to {
+		opacity: var(--mdc-ripple-fg-opacity, 0);
+	}
+}
+
+@-webkit-keyframes mdc-ripple-fg-opacity-out {
+
+	from {
+		-webkit-animation-timing-function: linear;
+		animation-timing-function: linear;
+		opacity: var(--mdc-ripple-fg-opacity, 0);
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes mdc-ripple-fg-opacity-out {
+
+	from {
+		-webkit-animation-timing-function: linear;
+		animation-timing-function: linear;
+		opacity: var(--mdc-ripple-fg-opacity, 0);
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+.mdc-icon-button {
+	--mdc-ripple-fg-size: 0;
+	--mdc-ripple-left: 0;
+	--mdc-ripple-top: 0;
+	--mdc-ripple-fg-scale: 1;
+	--mdc-ripple-fg-translate-end: 0;
+	--mdc-ripple-fg-translate-start: 0;
+	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.mdc-icon-button::before,
+.mdc-icon-button::after {
+	position: absolute;
+	border-radius: 50%;
+	opacity: 0;
+	pointer-events: none;
+	content: "";
+}
+
+.mdc-icon-button::before {
+	transition: opacity 15ms linear, background-color 15ms linear;
+	z-index: 1;
+}
+
+.mdc-icon-button.mdc-ripple-upgraded::before {
+	-webkit-transform: scale(var(--mdc-ripple-fg-scale, 1));
+	transform: scale(var(--mdc-ripple-fg-scale, 1));
+}
+
+.mdc-icon-button.mdc-ripple-upgraded::after {
+	top: 0;
+
+	/* @noflip */
+	left: 0;
+	-webkit-transform: scale(0);
+	transform: scale(0);
+	-webkit-transform-origin: center center;
+	transform-origin: center center;
+}
+
+.mdc-icon-button.mdc-ripple-upgraded--unbounded::after {
+	top: var(--mdc-ripple-top, 0);
+
+	/* @noflip */
+	left: var(--mdc-ripple-left, 0);
+}
+
+.mdc-icon-button.mdc-ripple-upgraded--foreground-activation::after {
+	-webkit-animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+	animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
+}
+
+.mdc-icon-button.mdc-ripple-upgraded--foreground-deactivation::after {
+	-webkit-animation: mdc-ripple-fg-opacity-out 150ms;
+	animation: mdc-ripple-fg-opacity-out 150ms;
+	-webkit-transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+	transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
+}
+
+.mdc-icon-button::before,
+.mdc-icon-button::after {
+	top: calc(50% - 50%);
+
+	/* @noflip */
+	left: calc(50% - 50%);
+	width: 100%;
+	height: 100%;
+}
+
+.mdc-icon-button.mdc-ripple-upgraded::before,
+.mdc-icon-button.mdc-ripple-upgraded::after {
+	top: var(--mdc-ripple-top, calc(50% - 50%));
+
+	/* @noflip */
+	left: var(--mdc-ripple-left, calc(50% - 50%));
+	width: var(--mdc-ripple-fg-size, 100%);
+	height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-icon-button.mdc-ripple-upgraded::after {
+	width: var(--mdc-ripple-fg-size, 100%);
+	height: var(--mdc-ripple-fg-size, 100%);
+}
+
+.mdc-icon-button::before,
+.mdc-icon-button::after {
+	background-color: #000;
+}
+
+.mdc-icon-button:hover::before {
+	opacity: 0.04;
+}
+
+.mdc-icon-button.mdc-ripple-upgraded--background-focused::before,
+.mdc-icon-button:not(.mdc-ripple-upgraded):focus::before {
+	transition-duration: 75ms;
+	opacity: 0.12;
+}
+
+.mdc-icon-button:not(.mdc-ripple-upgraded)::after {
+	transition: opacity 150ms linear;
+}
+
+.mdc-icon-button:not(.mdc-ripple-upgraded):active::after {
+	transition-duration: 75ms;
+	opacity: 0.12;
+}
+
+.mdc-icon-button.mdc-ripple-upgraded {
+	--mdc-ripple-fg-opacity: 0.12;
+}

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

@@ -19,7 +19,6 @@
  */
 
 @import "mixins.css";
-@import "@material/icon-button/dist/mdc.icon-button.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/tab-bar/dist/mdc.tab-bar.css";
 @import "@material/tab-scroller/dist/mdc.tab-scroller.css";
@@ -35,3 +34,4 @@
 @import "./components/tooltip.css";
 @import "./components/checkbox.css";
 @import "./components/button.css";
+@import "./components/icon-button.css";

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

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-@import "@material/icon-button/dist/mdc.icon-button.css";
 @import "@material/layout-grid/dist/mdc.layout-grid.css";
 @import "@material/tab-bar/dist/mdc.tab-bar.css";
 @import "@material/tab-scroller/dist/mdc.tab-scroller.css";
@@ -28,6 +27,7 @@
  */
 @import "../../../../plugin/assets/css/src/components/ripple.css";
 @import "../../../../plugin/assets/css/src/components/button.css";
+@import "../../../../plugin/assets/css/src/components/icon-button.css";
 @import "../../../../plugin/assets/css/src/components/list.css";
 @import "../../../../plugin/assets/css/src/components/form-field.css";
 @import "../../../../plugin/assets/css/src/components/floating-label.css";