From a9e1e47c8728c0afa80938585d37f652b5b9d634 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Tue, 9 Aug 2022 20:49:45 +0530 Subject: [PATCH 1/3] Copy m2 tooltip --- plugin/assets/css/src/components/tooltip.css | 119 ++++++++++++++++++ plugin/assets/css/src/material-components.css | 1 + 2 files changed, 120 insertions(+) create mode 100644 plugin/assets/css/src/components/tooltip.css diff --git a/plugin/assets/css/src/components/tooltip.css b/plugin/assets/css/src/components/tooltip.css new file mode 100644 index 00000000..9ba1eebe --- /dev/null +++ b/plugin/assets/css/src/components/tooltip.css @@ -0,0 +1,119 @@ +/* + * + * 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__surface { + border-radius: 4px; + /* @alternate */ + border-radius: var(--mdc-shape-small, 4px); +} + +.mdc-tooltip__surface { + color: white; + /* @alternate */ + color: var(--mdc-theme-text-primary-on-dark, white); +} + +.mdc-tooltip__surface { + background-color: rgba(0, 0, 0, 0.6); +} + +.mdc-tooltip__surface { + word-break: break-all; + /* @alternate */ + word-break: var(--mdc-tooltip-word-break, normal); + overflow-wrap: anywhere; +} + +.mdc-tooltip { + z-index: 2; +} + +.mdc-tooltip { + position: fixed; + display: none; +} + +.mdc-tooltip--shown, +.mdc-tooltip--showing, +.mdc-tooltip--hide { + display: inline-flex; +} + +.mdc-tooltip__surface { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-family: Roboto, sans-serif; + /* @alternate */ + font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); + font-size: 0.75rem; + /* @alternate */ + font-size: var(--mdc-typography-caption-font-size, 0.75rem); + font-weight: 400; + /* @alternate */ + font-weight: var(--mdc-typography-caption-font-weight, 400); + letter-spacing: 0.0333333333em; + /* @alternate */ + letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em); + text-decoration: inherit; + /* @alternate */ + -webkit-text-decoration: var(--mdc-typography-caption-text-decoration, inherit); + text-decoration: var(--mdc-typography-caption-text-decoration, inherit); + text-transform: inherit; + /* @alternate */ + text-transform: var(--mdc-typography-caption-text-transform, inherit); + line-height: 16px; + padding: 4px 8px; + min-width: 40px; + max-width: 200px; + min-height: 24px; + max-height: 40vh; + box-sizing: border-box; + overflow: hidden; + -webkit-transform: scale(0.8); + transform: scale(0.8); + text-align: center; + opacity: 0; + outline: 1px solid transparent; +} +.mdc-tooltip--multiline .mdc-tooltip__surface { + /* @noflip */ + text-align: left; +} +[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface, .mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl] { + /* @noflip */ + 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); +} + +/*# sourceMappingURL=mdc.tooltip.css.map*/ diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css index 77a7b81f..93927e9e 100644 --- a/plugin/assets/css/src/material-components.css +++ b/plugin/assets/css/src/material-components.css @@ -32,3 +32,4 @@ @import "./components/tab.css"; @import "./components/tab-indicator.css"; @import "./components/list.css"; +@import "./components/tooltip.css"; From c10531c1e9ab2a54a66ff97e96bcc85df63f1822 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Tue, 9 Aug 2022 21:03:24 +0530 Subject: [PATCH 2/3] Update tooltip --- plugin/assets/css/src/components/tooltip.css | 65 +++++-------------- plugin/assets/css/src/material-components.css | 1 + 2 files changed, 16 insertions(+), 50 deletions(-) diff --git a/plugin/assets/css/src/components/tooltip.css b/plugin/assets/css/src/components/tooltip.css index 9ba1eebe..edc1147a 100644 --- a/plugin/assets/css/src/components/tooltip.css +++ b/plugin/assets/css/src/components/tooltip.css @@ -1,5 +1,4 @@ /* - * * Copyright 2022 Google LLC * * Licensed under the Apache License, Version 2.0 (the "License"); @@ -13,31 +12,7 @@ * 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__surface { - border-radius: 4px; - /* @alternate */ - border-radius: var(--mdc-shape-small, 4px); -} - -.mdc-tooltip__surface { - color: white; - /* @alternate */ - color: var(--mdc-theme-text-primary-on-dark, white); -} - -.mdc-tooltip__surface { - background-color: rgba(0, 0, 0, 0.6); -} - -.mdc-tooltip__surface { - word-break: break-all; - /* @alternate */ - word-break: var(--mdc-tooltip-word-break, normal); - overflow-wrap: anywhere; -} .mdc-tooltip { z-index: 2; @@ -54,28 +29,16 @@ 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; - font-family: Roboto, sans-serif; - /* @alternate */ - font-family: var(--mdc-typography-caption-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)); - font-size: 0.75rem; - /* @alternate */ - font-size: var(--mdc-typography-caption-font-size, 0.75rem); - font-weight: 400; - /* @alternate */ - font-weight: var(--mdc-typography-caption-font-weight, 400); - letter-spacing: 0.0333333333em; - /* @alternate */ - letter-spacing: var(--mdc-typography-caption-letter-spacing, 0.0333333333em); - text-decoration: inherit; - /* @alternate */ - -webkit-text-decoration: var(--mdc-typography-caption-text-decoration, inherit); - text-decoration: var(--mdc-typography-caption-text-decoration, inherit); - text-transform: inherit; - /* @alternate */ - text-transform: var(--mdc-typography-caption-text-transform, inherit); line-height: 16px; padding: 4px 8px; min-width: 40px; @@ -84,36 +47,38 @@ max-height: 40vh; box-sizing: border-box; overflow: hidden; - -webkit-transform: scale(0.8); transform: scale(0.8); text-align: center; opacity: 0; outline: 1px solid transparent; } + .mdc-tooltip--multiline .mdc-tooltip__surface { - /* @noflip */ text-align: left; } -[dir=rtl] .mdc-tooltip--multiline .mdc-tooltip__surface, .mdc-tooltip--multiline .mdc-tooltip__surface[dir=rtl] { - /* @noflip */ + +[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); } - -/*# sourceMappingURL=mdc.tooltip.css.map*/ diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css index 93927e9e..4a04c765 100644 --- a/plugin/assets/css/src/material-components.css +++ b/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"; From 515e907699b45a3198b97caddf886526fe46d845 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Tue, 9 Aug 2022 22:21:25 +0530 Subject: [PATCH 3/3] Remove m2 tooltip --- plugin/assets/css/src/material-components.css | 1 - 1 file changed, 1 deletion(-) diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css index 4a04c765..d787632d 100644 --- a/plugin/assets/css/src/material-components.css +++ b/plugin/assets/css/src/material-components.css @@ -23,7 +23,6 @@ @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"; -@import "@material/tooltip/dist/mdc.tooltip.css"; @import "components/image-card.css"; @import "./components/material.css"; @import "./components/datatable.css";