You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

119 lines
3.7 KiB

  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.1
  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. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  55. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
  56. md-fab-toolbar md-fab-trigger md-icon {
  57. position: relative;
  58. z-index: 22;
  59. opacity: 1;
  60. -webkit-transition: all 200ms ease-in;
  61. transition: all 200ms ease-in; }
  62. md-fab-toolbar.md-left md-fab-trigger {
  63. right: 0; }
  64. [dir=rtl] md-fab-toolbar.md-left md-fab-trigger {
  65. right: auto;
  66. left: 0; }
  67. md-fab-toolbar.md-left .md-toolbar-tools {
  68. -webkit-box-orient: horizontal;
  69. -webkit-box-direction: reverse;
  70. -webkit-flex-direction: row-reverse;
  71. flex-direction: row-reverse; }
  72. md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
  73. margin-right: 0.6rem; }
  74. [dir=rtl] md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
  75. margin-right: auto;
  76. margin-left: 0.6rem; }
  77. md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
  78. margin-left: -0.8rem; }
  79. [dir=rtl] md-fab-toolbar.md-left .md-toolbar-tools > .md-button:first-child {
  80. margin-left: auto;
  81. margin-right: -0.8rem; }
  82. md-fab-toolbar.md-left .md-toolbar-tools > .md-button:last-child {
  83. margin-right: 8px; }
  84. [dir=rtl] md-fab-toolbar.md-left .md-toolbar-tools > .md-button:last-child {
  85. margin-right: auto;
  86. margin-left: 8px; }
  87. md-fab-toolbar.md-right md-fab-trigger {
  88. left: 0; }
  89. [dir=rtl] md-fab-toolbar.md-right md-fab-trigger {
  90. left: auto;
  91. right: 0; }
  92. md-fab-toolbar.md-right .md-toolbar-tools {
  93. -webkit-box-orient: horizontal;
  94. -webkit-box-direction: normal;
  95. -webkit-flex-direction: row;
  96. flex-direction: row; }
  97. md-fab-toolbar md-toolbar {
  98. background-color: transparent !important;
  99. pointer-events: none;
  100. z-index: 23; }
  101. md-fab-toolbar md-toolbar .md-toolbar-tools {
  102. padding: 0 20px;
  103. margin-top: 3px; }
  104. md-fab-toolbar md-toolbar .md-fab-action-item {
  105. opacity: 0;
  106. -webkit-transform: scale(0);
  107. transform: scale(0);
  108. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  109. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  110. -webkit-transition-duration: 0.15s;
  111. transition-duration: 0.15s; }
  112. md-fab-toolbar.md-is-open md-fab-trigger > button {
  113. box-shadow: none; }
  114. md-fab-toolbar.md-is-open md-fab-trigger > button md-icon {
  115. opacity: 0; }
  116. md-fab-toolbar.md-is-open .md-fab-action-item {
  117. opacity: 1;
  118. -webkit-transform: scale(1);
  119. transform: scale(1); }