tooltip.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. md-tooltip {
  8. position: absolute;
  9. z-index: 100;
  10. overflow: hidden;
  11. pointer-events: none;
  12. border-radius: 4px;
  13. font-weight: 500;
  14. font-size: 14px; }
  15. @media screen and (min-width: 600px) {
  16. md-tooltip {
  17. font-size: 10px; } }
  18. md-tooltip .md-background {
  19. position: absolute;
  20. border-radius: 50%;
  21. -webkit-transform: translate(-50%, -50%) scale(0);
  22. transform: translate(-50%, -50%) scale(0);
  23. opacity: 1; }
  24. md-tooltip .md-background.md-show-add {
  25. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  26. -webkit-transform: translate(-50%, -50%) scale(0);
  27. transform: translate(-50%, -50%) scale(0);
  28. opacity: 0; }
  29. md-tooltip .md-background.md-show, md-tooltip .md-background.md-show-add-active {
  30. -webkit-transform: translate(-50%, -50%) scale(1);
  31. transform: translate(-50%, -50%) scale(1);
  32. opacity: 1; }
  33. md-tooltip .md-background.md-show-remove {
  34. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  35. md-tooltip .md-background.md-show-remove.md-show-remove-active {
  36. -webkit-transform: translate(-50%, -50%) scale(0);
  37. transform: translate(-50%, -50%) scale(0);
  38. opacity: 0; }
  39. md-tooltip .md-content {
  40. position: relative;
  41. white-space: nowrap;
  42. overflow: hidden;
  43. text-overflow: ellipsis;
  44. background: transparent;
  45. opacity: 0;
  46. height: 32px;
  47. line-height: 32px;
  48. padding-left: 16px;
  49. padding-right: 16px; }
  50. @media screen and (min-width: 600px) {
  51. md-tooltip .md-content {
  52. height: 22px;
  53. line-height: 22px;
  54. padding-left: 8px;
  55. padding-right: 8px; } }
  56. md-tooltip .md-content.md-show-add {
  57. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  58. opacity: 0; }
  59. md-tooltip .md-content.md-show, md-tooltip .md-content.md-show-add-active {
  60. opacity: 1; }
  61. md-tooltip .md-content.md-show-remove {
  62. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  63. md-tooltip .md-content.md-show-remove.md-show-remove-active {
  64. opacity: 0; }
  65. md-tooltip.md-hide {
  66. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  67. md-tooltip.md-show {
  68. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  69. pointer-events: auto;
  70. -webkit-transform: translate3d(0, 0, 0);
  71. transform: translate3d(0, 0, 0); }