/*! * Angular Material Design * https://github.com/angular/material * @license MIT * v0.7.0-rc3 */ @-webkit-keyframes tooltipBackgroundShow { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0.25; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes tooltipBackgroundShow { 0% { -webkit-transform: scale(0.2); transform: scale(0.2); opacity: 0.25; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @-webkit-keyframes tooltipBackgroundHide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes tooltipBackgroundHide { 0% { opacity: 1; } 100% { opacity: 0; } } md-tooltip { position: absolute; font-size: 14px; z-index: 100; overflow: hidden; pointer-events: none; border-radius: 4px; /** * Depending on the tooltip's size as a multiple of 32 (set by JS), * change the background's animation duration. * The larger the tooltip, the less time the background should take to ripple outwards. */ } md-tooltip[md-direction="bottom"] { -webkit-transform: translate3d(0, -30%, 0); transform: translate3d(0, -30%, 0); margin-top: 8px; } md-tooltip[md-direction="top"] { -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0); margin-bottom: 8px; } md-tooltip .md-background { position: absolute; left: 50%; width: 256px; height: 256px; margin-left: -128px; margin-top: -128px; border-radius: 256px; opacity: 0.25; -webkit-transform: scale(0.2); transform: scale(0.2); } md-tooltip .md-content { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px; background: transparent; opacity: 0.3; -webkit-transition: inherit; transition: inherit; } md-tooltip.md-hide { -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); } md-tooltip.md-show { -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); pointer-events: auto; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } md-tooltip.md-show .md-background { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-animation: tooltipBackgroundShow linear; animation: tooltipBackgroundShow linear; } md-tooltip.md-show .md-content { opacity: 0.99; } md-tooltip.md-hide .md-background { -webkit-transform: scale(1); transform: scale(1); opacity: 0; -webkit-animation: tooltipBackgroundHide 0.2s linear; animation: tooltipBackgroundHide 0.2s linear; } md-tooltip[width-32="1"].md-show .md-background { -webkit-animation-duration: 900ms; animation-duration: 900ms; } md-tooltip[width-32="2"].md-show .md-background { -webkit-animation-duration: 800ms; animation-duration: 800ms; } md-tooltip[width-32="3"].md-show .md-background { -webkit-animation-duration: 700ms; animation-duration: 700ms; } md-tooltip[width-32="4"].md-show .md-background { -webkit-animation-duration: 600ms; animation-duration: 600ms; } md-tooltip[width-32="5"].md-show .md-background { -webkit-animation-duration: 500ms; animation-duration: 500ms; } md-tooltip[width-32="6"].md-show .md-background { -webkit-animation-duration: 400ms; animation-duration: 400ms; } md-tooltip[width-32="7"].md-show .md-background { -webkit-animation-duration: 300ms; animation-duration: 300ms; } md-tooltip[width-32="8"].md-show .md-background { -webkit-animation-duration: 200ms; animation-duration: 200ms; }