fabToolbar.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. md-fab-toolbar {
  8. display: block;
  9. /*
  10. * Closed styling
  11. */
  12. /*
  13. * Hover styling
  14. */ }
  15. md-fab-toolbar.md-fab-bottom-right {
  16. top: auto;
  17. right: 20px;
  18. bottom: 20px;
  19. left: auto;
  20. position: absolute; }
  21. md-fab-toolbar.md-fab-bottom-left {
  22. top: auto;
  23. right: auto;
  24. bottom: 20px;
  25. left: 20px;
  26. position: absolute; }
  27. md-fab-toolbar.md-fab-top-right {
  28. top: 20px;
  29. right: 20px;
  30. bottom: auto;
  31. left: auto;
  32. position: absolute; }
  33. md-fab-toolbar.md-fab-top-left {
  34. top: 20px;
  35. right: auto;
  36. bottom: auto;
  37. left: 20px;
  38. position: absolute; }
  39. md-fab-toolbar .md-fab-toolbar-wrapper {
  40. display: block;
  41. position: relative;
  42. overflow: hidden;
  43. height: 68px; }
  44. md-fab-toolbar md-fab-trigger {
  45. position: absolute;
  46. z-index: 20; }
  47. md-fab-toolbar md-fab-trigger button {
  48. overflow: visible !important; }
  49. md-fab-toolbar md-fab-trigger .md-fab-toolbar-background {
  50. display: block;
  51. position: absolute;
  52. z-index: 21;
  53. opacity: 1;
  54. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  55. md-fab-toolbar md-fab-trigger md-icon {
  56. position: relative;
  57. z-index: 22;
  58. opacity: 1;
  59. transition: all 200ms ease-in; }
  60. md-fab-toolbar.md-left md-fab-trigger {
  61. right: 0; }
  62. md-fab-toolbar.md-left .md-toolbar-tools {
  63. -webkit-flex-direction: row-reverse;
  64. -ms-flex-direction: row-reverse;
  65. flex-direction: row-reverse; }
  66. md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
  67. margin-right: 0.6rem; }
  68. md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
  69. margin-left: -0.8rem; }
  70. md-fab-toolbar.md-left .md-toolbar-tools > .md-button:last-child {
  71. margin-right: 8px; }
  72. md-fab-toolbar.md-right md-fab-trigger {
  73. left: 0; }
  74. md-fab-toolbar.md-right .md-toolbar-tools {
  75. -webkit-flex-direction: row;
  76. -ms-flex-direction: row;
  77. flex-direction: row; }
  78. md-fab-toolbar md-toolbar {
  79. background-color: transparent !important;
  80. pointer-events: none;
  81. z-index: 23; }
  82. md-fab-toolbar md-toolbar .md-toolbar-tools {
  83. padding: 0 20px;
  84. margin-top: 3px; }
  85. md-fab-toolbar md-toolbar .md-fab-action-item {
  86. opacity: 0;
  87. -webkit-transform: scale(0);
  88. transform: scale(0);
  89. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  90. transition-duration: 0.15s; }
  91. md-fab-toolbar.md-is-open md-fab-trigger > button {
  92. box-shadow: none; }
  93. md-fab-toolbar.md-is-open md-fab-trigger > button md-icon {
  94. opacity: 0; }
  95. md-fab-toolbar.md-is-open .md-fab-action-item {
  96. opacity: 1;
  97. -webkit-transform: scale(1);
  98. transform: scale(1); }