Merge c10531c into 10320a0

plugin/assets/css/src/components/tooltip.css

@@ -0,0 +1,84 @@
+/*
+ *  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-tooltip {
+	z-index: 2;
+}
+
+.mdc-tooltip {
+	position: fixed;
+	display: none;
+}
+
+.mdc-tooltip--shown,
+.mdc-tooltip--showing,
+.mdc-tooltip--hide {
+	display: inline-flex;
+}
+
+@mixin selector-typography .mdc-tooltip__surface, body-small, 0.75, 1, 400;
+
+.mdc-tooltip__surface {
+	border-radius: var(--mdc-shape-small, 4px);
+	color: var(--md-sys-color-inverse-on-surface, #fff);
+	background-color: var(--md-sys-color-inverse-surface);
+	word-break: var(--mdc-tooltip-word-break, normal);
+	overflow-wrap: anywhere;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	line-height: 16px;
+	padding: 4px 8px;
+	min-width: 40px;
+	max-width: 200px;
+	min-height: 24px;
+	max-height: 40vh;
+	box-sizing: border-box;
+	overflow: hidden;
+	transform: scale(0.8);
+	text-align: center;
+	opacity: 0;
+	outline: 1px solid transparent;
+}
+
+.mdc-tooltip--multiline .mdc-tooltip__surface {
+	text-align: left;
+}
+
+[dir="rtl"] .mdc-tooltip--multiline .mdc-tooltip__surface,
+.mdc-tooltip--multiline .mdc-tooltip__surface[dir="rtl"] {
+	text-align: right;
+}
+
+.mdc-tooltip--shown .mdc-tooltip__surface {
+	-webkit-transform: scale(1);
+	transform: scale(1);
+	opacity: 1;
+}
+
+.mdc-tooltip--showing-transition .mdc-tooltip__surface {
+	transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
+	transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
+	transition: opacity 150ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.mdc-tooltip--hide .mdc-tooltip__surface {
+	-webkit-transform: scale(1);
+	transform: scale(1);
+}
+
+.mdc-tooltip--hide-transition .mdc-tooltip__surface {
+	transition: opacity 75ms 0ms cubic-bezier(0.4, 0, 1, 1);
+}

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

@@ -18,6 +18,7 @@
  * Material components used in the blocks and frontend.
  */
 
+@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";
@@ -32,3 +33,4 @@
 @import "./components/tab.css";
 @import "./components/tab-indicator.css";
 @import "./components/list.css";
+@import "./components/tooltip.css";