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.

202 lines
8.3 KiB

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