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.

197 lines
6.9 KiB

  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.1
  6. */
  7. button.md-button::-moz-focus-inner {
  8. border: 0; }
  9. .md-button {
  10. display: inline-block;
  11. position: relative;
  12. cursor: pointer;
  13. /** Alignment adjustments */
  14. min-height: 36px;
  15. min-width: 88px;
  16. line-height: 36px;
  17. vertical-align: middle;
  18. -webkit-box-align: center;
  19. -webkit-align-items: center;
  20. -ms-grid-row-align: center;
  21. align-items: center;
  22. text-align: center;
  23. border-radius: 3px;
  24. box-sizing: border-box;
  25. /* Reset default button appearance */
  26. -webkit-user-select: none;
  27. -moz-user-select: none;
  28. -ms-user-select: none;
  29. user-select: none;
  30. outline: none;
  31. border: 0;
  32. /** Custom styling for button */
  33. padding: 0 6px;
  34. margin: 6px 8px;
  35. background: transparent;
  36. color: currentColor;
  37. white-space: nowrap;
  38. /* Uppercase text content */
  39. text-transform: uppercase;
  40. font-weight: 500;
  41. font-size: 14px;
  42. font-style: inherit;
  43. font-variant: inherit;
  44. font-family: inherit;
  45. text-decoration: none;
  46. overflow: hidden;
  47. -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  48. transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
  49. .md-button:focus {
  50. outline: none; }
  51. .md-button:hover, .md-button:focus {
  52. text-decoration: none; }
  53. .md-button.ng-hide, .md-button.ng-leave {
  54. -webkit-transition: none;
  55. transition: none; }
  56. .md-button.md-cornered {
  57. border-radius: 0; }
  58. .md-button.md-icon {
  59. padding: 0;
  60. background: none; }
  61. .md-button.md-raised:not([disabled]) {
  62. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
  63. .md-button.md-icon-button {
  64. margin: 0 6px;
  65. height: 40px;
  66. min-width: 0;
  67. line-height: 24px;
  68. padding: 8px;
  69. width: 40px;
  70. border-radius: 50%; }
  71. .md-button.md-icon-button .md-ripple-container {
  72. border-radius: 50%;
  73. background-clip: padding-box;
  74. overflow: hidden;
  75. -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }
  76. .md-button.md-fab {
  77. z-index: 20;
  78. line-height: 56px;
  79. min-width: 0;
  80. width: 56px;
  81. height: 56px;
  82. vertical-align: middle;
  83. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  84. border-radius: 50%;
  85. background-clip: padding-box;
  86. overflow: hidden;
  87. -webkit-transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  88. transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
  89. -webkit-transition-property: background-color, box-shadow, -webkit-transform;
  90. transition-property: background-color, box-shadow, -webkit-transform;
  91. transition-property: background-color, box-shadow, transform;
  92. transition-property: background-color, box-shadow, transform, -webkit-transform; }
  93. .md-button.md-fab.md-fab-bottom-right {
  94. top: auto;
  95. right: 20px;
  96. bottom: 20px;
  97. left: auto;
  98. position: absolute; }
  99. .md-button.md-fab.md-fab-bottom-left {
  100. top: auto;
  101. right: auto;
  102. bottom: 20px;
  103. left: 20px;
  104. position: absolute; }
  105. .md-button.md-fab.md-fab-top-right {
  106. top: 20px;
  107. right: 20px;
  108. bottom: auto;
  109. left: auto;
  110. position: absolute; }
  111. .md-button.md-fab.md-fab-top-left {
  112. top: 20px;
  113. right: auto;
  114. bottom: auto;
  115. left: 20px;
  116. position: absolute; }
  117. .md-button.md-fab .md-ripple-container {
  118. border-radius: 50%;
  119. background-clip: padding-box;
  120. overflow: hidden;
  121. -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }
  122. .md-button.md-fab.md-mini {
  123. line-height: 40px;
  124. width: 40px;
  125. height: 40px; }
  126. .md-button.md-fab.ng-hide, .md-button.md-fab.ng-leave {
  127. -webkit-transition: none;
  128. transition: none; }
  129. .md-button:not([disabled]).md-raised.md-focused, .md-button:not([disabled]).md-fab.md-focused {
  130. box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }
  131. .md-button:not([disabled]).md-raised:active, .md-button:not([disabled]).md-fab:active {
  132. box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4); }
  133. .md-button .md-ripple-container {
  134. border-radius: 3px;
  135. background-clip: padding-box;
  136. overflow: hidden;
  137. -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC"); }
  138. .md-button.md-icon-button md-icon,
  139. button.md-button.md-fab md-icon {
  140. display: block; }
  141. .md-toast-open-top .md-button.md-fab-top-left,
  142. .md-toast-open-top .md-button.md-fab-top-right {
  143. -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  144. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  145. -webkit-transform: translate3d(0, 42px, 0);
  146. transform: translate3d(0, 42px, 0); }
  147. .md-toast-open-top .md-button.md-fab-top-left:not([disabled]).md-focused, .md-toast-open-top .md-button.md-fab-top-left:not([disabled]):hover,
  148. .md-toast-open-top .md-button.md-fab-top-right:not([disabled]).md-focused,
  149. .md-toast-open-top .md-button.md-fab-top-right:not([disabled]):hover {
  150. -webkit-transform: translate3d(0, 41px, 0);
  151. transform: translate3d(0, 41px, 0); }
  152. .md-toast-open-bottom .md-button.md-fab-bottom-left,
  153. .md-toast-open-bottom .md-button.md-fab-bottom-right {
  154. -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  155. transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  156. -webkit-transform: translate3d(0, -42px, 0);
  157. transform: translate3d(0, -42px, 0); }
  158. .md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]).md-focused, .md-toast-open-bottom .md-button.md-fab-bottom-left:not([disabled]):hover,
  159. .md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]).md-focused,
  160. .md-toast-open-bottom .md-button.md-fab-bottom-right:not([disabled]):hover {
  161. -webkit-transform: translate3d(0, -43px, 0);
  162. transform: translate3d(0, -43px, 0); }
  163. .md-button-group {
  164. display: -webkit-box;
  165. display: -webkit-flex;
  166. display: flex;
  167. -webkit-box-flex: 1;
  168. -webkit-flex: 1;
  169. flex: 1;
  170. width: 100%; }
  171. .md-button-group > .md-button {
  172. -webkit-box-flex: 1;
  173. -webkit-flex: 1;
  174. flex: 1;
  175. display: block;
  176. overflow: hidden;
  177. width: 0;
  178. border-width: 1px 0px 1px 1px;
  179. border-radius: 0;
  180. text-align: center;
  181. text-overflow: ellipsis;
  182. white-space: nowrap; }
  183. .md-button-group > .md-button:first-child {
  184. border-radius: 2px 0px 0px 2px; }
  185. .md-button-group > .md-button:last-child {
  186. border-right-width: 1px;
  187. border-radius: 0px 2px 2px 0px; }
  188. @media screen and (-ms-high-contrast: active) {
  189. .md-button.md-raised,
  190. .md-button.md-fab {
  191. border: 1px solid #fff; } }