feat(tooltip): Set up base sass for rich tooltip. Rich tooltips are c…

…urrently in development and is not yet ready for use. PiperOrigin-RevId: 343323771
material-components · Nov 19, 2020 · 4ae94ff · 4ae94ff
1 parent 1b731d5
commit 4ae94ff
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/packages/mdc-tooltip/_tooltip.scss b/packages/mdc-tooltip/_tooltip.scss
@@ -24,6 +24,7 @@
 // stylelint-disable selector-class-pattern
 
 @use '@material/animation/functions' as animation-functions;
+@use '@material/elevation/mixins' as elevation-mixins;
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/rtl/rtl' as rtl;
 @use './tooltip-theme';
@@ -40,6 +41,10 @@ $_min-height: 24px;
 $_label-type-scale: caption;
 $_line-height: 16px;
 
+// Rich Tooltip variables
+$_rich_corner_radius: 8px;
+$_rich_padding: 8px;
+
 $enter-duration: 150ms;
 $exit-duration: 75ms;
 
@@ -79,6 +84,15 @@ $exit-duration: 75ms;
     @include feature-targeting.targets($feat-structure) {
       display: inline-flex;
     }
+
+    &.mdc-tooltip--rich {
+      @include elevation-mixins.elevation(2, $query: $query);
+      @include feature-targeting.targets($feat-structure) {
+        display: inline-block;
+        border-radius: $_rich_corner_radius;
+        padding: $_rich_padding $_rich_padding;
+      }
+    }
   }
 
   .mdc-tooltip__surface {

diff --git a/packages/mdc-tooltip/package.json b/packages/mdc-tooltip/package.json
@@ -21,6 +21,7 @@
     "@material/animation": "^8.0.0",
     "@material/base": "^8.0.0",
     "@material/dom": "^8.0.0",
+    "@material/elevation": "^8.0.0",
     "@material/feature-targeting": "^8.0.0",
     "@material/rtl": "^8.0.0",
     "@material/shape": "^8.0.0",