From 4e358c37398428148233924973fb3395b457ecf9 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sun, 29 Jul 2018 06:49:44 +0200
Subject: [PATCH] feat(tooltip): align with 2018 material design spec (#12310)

Adjusts the tooltip to align it with the new Material design spec.
---
 src/lib/tooltip/_tooltip-theme.scss   |  2 +-
 src/lib/tooltip/tooltip-animations.ts | 13 +++++++++----
 src/lib/tooltip/tooltip.scss          |  2 +-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/lib/tooltip/_tooltip-theme.scss b/src/lib/tooltip/_tooltip-theme.scss
index 240530cdf008..544a239eb3e3 100644
--- a/src/lib/tooltip/_tooltip-theme.scss
+++ b/src/lib/tooltip/_tooltip-theme.scss
@@ -6,7 +6,7 @@ $mat-tooltip-target-height: 22px;
 $mat-tooltip-font-size: 10px;
 $mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
 
-$mat-tooltip-handset-target-height: 32px;
+$mat-tooltip-handset-target-height: 30px;
 $mat-tooltip-handset-font-size: 14px;
 $mat-tooltip-handset-vertical-padding:
     ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;
diff --git a/src/lib/tooltip/tooltip-animations.ts b/src/lib/tooltip/tooltip-animations.ts
index e4422456bf24..ffa82604a20f 100644
--- a/src/lib/tooltip/tooltip-animations.ts
+++ b/src/lib/tooltip/tooltip-animations.ts
@@ -7,11 +7,12 @@
  */
 import {
   animate,
+  AnimationTriggerMetadata,
+  keyframes,
   state,
   style,
   transition,
   trigger,
-  AnimationTriggerMetadata,
 } from '@angular/animations';
 
 /** Animations used by MatTooltip. */
@@ -20,9 +21,13 @@ export const matTooltipAnimations: {
 } = {
   /** Animation that transitions a tooltip in and out. */
   tooltipState: trigger('state', [
-    state('initial, void, hidden', style({transform: 'scale(0)'})),
+    state('initial, void, hidden', style({opacity: 0, transform: 'scale(0)'})),
     state('visible', style({transform: 'scale(1)'})),
-    transition('* => visible', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
-    transition('* => hidden', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')),
+    transition('* => visible', animate('200ms cubic-bezier(0, 0, 0.2, 1)', keyframes([
+      style({opacity: 0, transform: 'scale(0)', offset: 0}),
+      style({opacity: 0.5, transform: 'scale(0.99)', offset: 0.5}),
+      style({opacity: 1, transform: 'scale(1)', offset: 1})
+    ]))),
+    transition('* => hidden', animate('100ms cubic-bezier(0, 0, 0.2, 1)', style({opacity: 0}))),
   ])
 };
diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss
index 50d1f250124d..1057db33775d 100644
--- a/src/lib/tooltip/tooltip.scss
+++ b/src/lib/tooltip/tooltip.scss
@@ -17,7 +17,7 @@ $mat-tooltip-handset-margin: 24px;
 
 .mat-tooltip {
   color: white;
-  border-radius: 2px;
+  border-radius: 4px;
   margin: $mat-tooltip-margin;
   max-width: $mat-tooltip-max-width;
   padding-left: $mat-tooltip-horizontal-padding;