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.

199 lines
8.2 KiB

  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.1
  6. */
  7. md-card {
  8. box-sizing: border-box;
  9. display: -webkit-box;
  10. display: -webkit-flex;
  11. display: flex;
  12. -webkit-box-orient: vertical;
  13. -webkit-box-direction: normal;
  14. -webkit-flex-direction: column;
  15. flex-direction: column;
  16. margin: 8px;
  17. box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12); }
  18. md-card md-card-header {
  19. padding: 16px;
  20. display: -webkit-box;
  21. display: -webkit-flex;
  22. display: flex;
  23. -webkit-box-orient: horizontal;
  24. -webkit-box-direction: normal;
  25. -webkit-flex-direction: row;
  26. flex-direction: row; }
  27. md-card md-card-header:first-child md-card-avatar {
  28. margin-right: 12px; }
  29. [dir=rtl] md-card md-card-header:first-child md-card-avatar {
  30. margin-right: auto;
  31. margin-left: 12px; }
  32. md-card md-card-header:last-child md-card-avatar {
  33. margin-left: 12px; }
  34. [dir=rtl] md-card md-card-header:last-child md-card-avatar {
  35. margin-left: auto;
  36. margin-right: 12px; }
  37. md-card md-card-header md-card-avatar {
  38. width: 40px;
  39. height: 40px; }
  40. md-card md-card-header md-card-avatar .md-user-avatar,
  41. md-card md-card-header md-card-avatar md-icon {
  42. border-radius: 50%; }
  43. md-card md-card-header md-card-avatar md-icon {
  44. padding: 8px; }
  45. md-card md-card-header md-card-avatar + md-card-header-text {
  46. max-height: 40px; }
  47. md-card md-card-header md-card-avatar + md-card-header-text .md-title {
  48. font-size: 14px; }
  49. md-card md-card-header md-card-header-text {
  50. display: -webkit-box;
  51. display: -webkit-flex;
  52. display: flex;
  53. -webkit-box-flex: 1;
  54. -webkit-flex: 1;
  55. flex: 1;
  56. -webkit-box-orient: vertical;
  57. -webkit-box-direction: normal;
  58. -webkit-flex-direction: column;
  59. flex-direction: column; }
  60. md-card md-card-header md-card-header-text .md-subhead {
  61. font-size: 14px; }
  62. md-card > img,
  63. md-card > md-card-header img,
  64. md-card md-card-title-media img {
  65. box-sizing: border-box;
  66. display: -webkit-box;
  67. display: -webkit-flex;
  68. display: flex;
  69. -webkit-box-flex: 0;
  70. -webkit-flex: 0 0 auto;
  71. flex: 0 0 auto;
  72. width: 100%;
  73. height: auto; }
  74. md-card md-card-title {
  75. padding: 24px 16px 16px;
  76. display: -webkit-box;
  77. display: -webkit-flex;
  78. display: flex;
  79. -webkit-box-flex: 1;
  80. -webkit-flex: 1 1 auto;
  81. flex: 1 1 auto;
  82. -webkit-box-orient: horizontal;
  83. -webkit-box-direction: normal;
  84. -webkit-flex-direction: row;
  85. flex-direction: row; }
  86. md-card md-card-title + md-card-content {
  87. padding-top: 0; }
  88. md-card md-card-title md-card-title-text {
  89. -webkit-box-flex: 1;
  90. -webkit-flex: 1;
  91. flex: 1;
  92. -webkit-box-orient: vertical;
  93. -webkit-box-direction: normal;
  94. -webkit-flex-direction: column;
  95. flex-direction: column;
  96. display: -webkit-box;
  97. display: -webkit-flex;
  98. display: flex; }
  99. md-card md-card-title md-card-title-text .md-subhead {
  100. padding-top: 0;
  101. font-size: 14px; }
  102. md-card md-card-title md-card-title-text:only-child .md-subhead {
  103. padding-top: 12px; }
  104. md-card md-card-title md-card-title-media {
  105. margin-top: -8px; }
  106. md-card md-card-title md-card-title-media .md-media-sm {
  107. height: 80px;
  108. width: 80px; }
  109. md-card md-card-title md-card-title-media .md-media-md {
  110. height: 112px;
  111. width: 112px; }
  112. md-card md-card-title md-card-title-media .md-media-lg {
  113. height: 152px;
  114. width: 152px; }
  115. md-card md-card-content {
  116. display: block;
  117. padding: 16px; }
  118. md-card md-card-content > p:first-child {
  119. margin-top: 0; }
  120. md-card md-card-content > p:last-child {
  121. margin-bottom: 0; }
  122. md-card md-card-content .md-media-xl {
  123. height: 240px;
  124. width: 240px; }
  125. md-card .md-actions, md-card md-card-actions {
  126. margin: 8px; }
  127. md-card .md-actions.layout-column .md-button:not(.md-icon-button), md-card md-card-actions.layout-column .md-button:not(.md-icon-button) {
  128. margin: 2px 0; }
  129. md-card .md-actions.layout-column .md-button:not(.md-icon-button):first-of-type, md-card md-card-actions.layout-column .md-button:not(.md-icon-button):first-of-type {
  130. margin-top: 0; }
  131. md-card .md-actions.layout-column .md-button:not(.md-icon-button):last-of-type, md-card md-card-actions.layout-column .md-button:not(.md-icon-button):last-of-type {
  132. margin-bottom: 0; }
  133. md-card .md-actions.layout-column .md-button.md-icon-button, md-card md-card-actions.layout-column .md-button.md-icon-button {
  134. margin-top: 6px;
  135. margin-bottom: 6px; }
  136. md-card .md-actions md-card-icon-actions, md-card md-card-actions md-card-icon-actions {
  137. -webkit-box-flex: 1;
  138. -webkit-flex: 1;
  139. flex: 1;
  140. -webkit-box-pack: start;
  141. -webkit-justify-content: flex-start;
  142. justify-content: flex-start;
  143. display: -webkit-box;
  144. display: -webkit-flex;
  145. display: flex;
  146. -webkit-box-orient: horizontal;
  147. -webkit-box-direction: normal;
  148. -webkit-flex-direction: row;
  149. flex-direction: row; }
  150. md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button), md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button) {
  151. margin: 0 4px; }
  152. md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type, md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type {
  153. margin-left: 0; }
  154. [dir=rtl] md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):first-of-type {
  155. margin-left: auto;
  156. margin-right: 0; }
  157. md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type, md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type {
  158. margin-right: 0; }
  159. [dir=rtl] md-card .md-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button:not(.md-icon-button):last-of-type {
  160. margin-right: auto;
  161. margin-left: 0; }
  162. md-card .md-actions:not(.layout-column) .md-button.md-icon-button, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button {
  163. margin-left: 6px;
  164. margin-right: 6px; }
  165. md-card .md-actions:not(.layout-column) .md-button.md-icon-button:first-of-type, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:first-of-type {
  166. margin-left: 12px; }
  167. [dir=rtl] md-card .md-actions:not(.layout-column) .md-button.md-icon-button:first-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:first-of-type {
  168. margin-left: auto;
  169. margin-right: 12px; }
  170. md-card .md-actions:not(.layout-column) .md-button.md-icon-button:last-of-type, md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:last-of-type {
  171. margin-right: 12px; }
  172. [dir=rtl] md-card .md-actions:not(.layout-column) .md-button.md-icon-button:last-of-type, [dir=rtl] md-card md-card-actions:not(.layout-column) .md-button.md-icon-button:last-of-type {
  173. margin-right: auto;
  174. margin-left: 12px; }
  175. md-card .md-actions:not(.layout-column) .md-button + md-card-icon-actions, md-card md-card-actions:not(.layout-column) .md-button + md-card-icon-actions {
  176. -webkit-box-flex: 1;
  177. -webkit-flex: 1;
  178. flex: 1;
  179. -webkit-box-pack: end;
  180. -webkit-justify-content: flex-end;
  181. justify-content: flex-end;
  182. display: -webkit-box;
  183. display: -webkit-flex;
  184. display: flex;
  185. -webkit-box-orient: horizontal;
  186. -webkit-box-direction: normal;
  187. -webkit-flex-direction: row;
  188. flex-direction: row; }
  189. md-card md-card-footer {
  190. margin-top: auto;
  191. padding: 16px; }
  192. @media screen and (-ms-high-contrast: active) {
  193. md-card {
  194. border: 1px solid #fff; } }
  195. .md-image-no-fill > img {
  196. width: auto;
  197. height: auto; }