list.css 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. md-list {
  8. display: block;
  9. padding: 8px 0px 8px 0px; }
  10. md-list .md-subheader {
  11. font-size: 14px;
  12. font-weight: 500;
  13. letter-spacing: 0.01em;
  14. line-height: 1.2em; }
  15. md-list-item.md-proxy-focus.md-focused .md-no-style {
  16. transition: background-color 0.15s linear; }
  17. md-list-item.md-no-proxy, md-list-item .md-no-style {
  18. position: relative;
  19. padding: 0px 16px;
  20. -webkit-flex: 1 1 auto;
  21. -ms-flex: 1 1 auto;
  22. flex: 1 1 auto; }
  23. md-list-item.md-no-proxy.md-button, md-list-item .md-no-style.md-button {
  24. font-size: inherit;
  25. height: inherit;
  26. text-align: left;
  27. text-transform: none;
  28. width: 100%;
  29. white-space: normal;
  30. -webkit-flex-direction: inherit;
  31. -ms-flex-direction: inherit;
  32. flex-direction: inherit;
  33. -webkit-align-items: inherit;
  34. -ms-flex-align: inherit;
  35. align-items: inherit; }
  36. md-list-item.md-no-proxy:focus, md-list-item .md-no-style:focus {
  37. outline: none; }
  38. md-list-item.md-with-secondary {
  39. position: relative; }
  40. md-list-item.md-clickable:hover {
  41. cursor: pointer; }
  42. md-list-item md-divider {
  43. position: absolute;
  44. bottom: 0;
  45. left: 0;
  46. width: 100%; }
  47. md-list-item md-divider[md-inset] {
  48. left: 96px;
  49. width: calc(100% - 96px);
  50. margin: 0; }
  51. md-list-item, md-list-item .md-list-item-inner {
  52. display: -webkit-flex;
  53. display: -ms-flexbox;
  54. display: flex;
  55. -webkit-justify-content: flex-start;
  56. -ms-flex-pack: start;
  57. justify-content: flex-start;
  58. -webkit-align-items: center;
  59. -ms-flex-align: center;
  60. align-items: center;
  61. min-height: 48px;
  62. height: auto; }
  63. md-list-item > div.md-primary > md-icon:not(.md-avatar-icon), md-list-item > div.md-secondary > md-icon:not(.md-avatar-icon), md-list-item > md-icon:first-child:not(.md-avatar-icon), md-list-item > md-icon.md-secondary:not(.md-avatar-icon), md-list-item .md-list-item-inner > div.md-primary > md-icon:not(.md-avatar-icon), md-list-item .md-list-item-inner > div.md-secondary > md-icon:not(.md-avatar-icon), md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon), md-list-item .md-list-item-inner > md-icon.md-secondary:not(.md-avatar-icon) {
  64. width: 24px;
  65. margin-top: 16px;
  66. margin-bottom: 12px;
  67. box-sizing: content-box; }
  68. md-list-item > div.md-primary > md-checkbox, md-list-item > div.md-secondary > md-checkbox, md-list-item > md-checkbox:first-child, md-list-item md-checkbox.md-secondary, md-list-item .md-list-item-inner > div.md-primary > md-checkbox, md-list-item .md-list-item-inner > div.md-secondary > md-checkbox, md-list-item .md-list-item-inner > md-checkbox:first-child, md-list-item .md-list-item-inner md-checkbox.md-secondary {
  69. -webkit-align-self: center;
  70. -ms-flex-item-align: center;
  71. align-self: center; }
  72. md-list-item > div.md-primary > md-checkbox .md-label, md-list-item > div.md-secondary > md-checkbox .md-label, md-list-item > md-checkbox:first-child .md-label, md-list-item md-checkbox.md-secondary .md-label, md-list-item .md-list-item-inner > div.md-primary > md-checkbox .md-label, md-list-item .md-list-item-inner > div.md-secondary > md-checkbox .md-label, md-list-item .md-list-item-inner > md-checkbox:first-child .md-label, md-list-item .md-list-item-inner md-checkbox.md-secondary .md-label {
  73. display: none; }
  74. md-list-item > md-icon:first-child:not(.md-avatar-icon), md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
  75. margin-right: 32px; }
  76. md-list-item > md-checkbox:first-child, md-list-item .md-list-item-inner > md-checkbox:first-child {
  77. width: 24px;
  78. margin-left: 3px;
  79. margin-right: 29px; }
  80. md-list-item > .md-avatar, md-list-item .md-avatar-icon, md-list-item .md-list-item-inner > .md-avatar, md-list-item .md-list-item-inner .md-avatar-icon {
  81. margin-top: 8px;
  82. margin-bottom: 8px;
  83. margin-right: 16px;
  84. border-radius: 50%;
  85. box-sizing: content-box; }
  86. md-list-item > .md-avatar, md-list-item .md-list-item-inner > .md-avatar {
  87. width: 40px;
  88. height: 40px; }
  89. md-list-item > .md-avatar-icon, md-list-item .md-list-item-inner > .md-avatar-icon {
  90. padding: 8px; }
  91. md-list-item md-checkbox.md-secondary, md-list-item md-switch.md-secondary, md-list-item .md-list-item-inner md-checkbox.md-secondary, md-list-item .md-list-item-inner md-switch.md-secondary {
  92. margin-right: 0;
  93. margin-top: 0;
  94. margin-bottom: 0; }
  95. md-list-item button.md-button.md-secondary-container, md-list-item .md-list-item-inner button.md-button.md-secondary-container {
  96. background-color: transparent;
  97. -webkit-align-self: center;
  98. -ms-flex-item-align: center;
  99. align-self: center;
  100. border-radius: 50%;
  101. margin: 0px;
  102. min-width: 0px; }
  103. md-list-item button.md-button.md-secondary-container .md-ripple, md-list-item button.md-button.md-secondary-container .md-ripple-container, md-list-item .md-list-item-inner button.md-button.md-secondary-container .md-ripple, md-list-item .md-list-item-inner button.md-button.md-secondary-container .md-ripple-container {
  104. border-radius: 50%; }
  105. md-list-item .md-secondary-container, md-list-item .md-secondary, md-list-item .md-list-item-inner .md-secondary-container, md-list-item .md-list-item-inner .md-secondary {
  106. margin-left: 16px;
  107. position: absolute;
  108. right: 16px;
  109. top: 50%;
  110. -webkit-transform: translate3d(0, -50%, 0);
  111. transform: translate3d(0, -50%, 0); }
  112. md-list-item > .md-button.md-secondary-container > .md-secondary, md-list-item .md-list-item-inner > .md-button.md-secondary-container > .md-secondary {
  113. margin-left: 0px;
  114. position: static; }
  115. md-list-item > p, md-list-item > .md-list-item-inner > p, md-list-item .md-list-item-inner > p, md-list-item .md-list-item-inner > .md-list-item-inner > p {
  116. -webkit-flex: 1;
  117. -ms-flex: 1;
  118. flex: 1;
  119. margin: 0; }
  120. md-list-item.md-2-line, md-list-item.md-2-line > .md-no-style, md-list-item.md-3-line, md-list-item.md-3-line > .md-no-style {
  121. -webkit-align-items: flex-start;
  122. -ms-flex-align: start;
  123. align-items: flex-start;
  124. -webkit-justify-content: center;
  125. -ms-flex-pack: center;
  126. justify-content: center; }
  127. md-list-item.md-2-line .md-list-item-text, md-list-item.md-2-line > .md-no-style .md-list-item-text, md-list-item.md-3-line .md-list-item-text, md-list-item.md-3-line > .md-no-style .md-list-item-text {
  128. -webkit-flex: 1;
  129. -ms-flex: 1;
  130. flex: 1;
  131. margin: auto;
  132. text-overflow: ellipsis; }
  133. md-list-item.md-2-line .md-list-item-text.md-offset, md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, md-list-item.md-3-line .md-list-item-text.md-offset, md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
  134. margin-left: 56px; }
  135. md-list-item.md-2-line .md-list-item-text h3, md-list-item.md-2-line > .md-no-style .md-list-item-text h3, md-list-item.md-3-line .md-list-item-text h3, md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
  136. font-size: 16px;
  137. font-weight: 400;
  138. letter-spacing: 0.01em;
  139. margin: 0 0 0px 0;
  140. line-height: 1.2em;
  141. overflow: hidden;
  142. white-space: nowrap;
  143. text-overflow: ellipsis; }
  144. md-list-item.md-2-line .md-list-item-text h4, md-list-item.md-2-line > .md-no-style .md-list-item-text h4, md-list-item.md-3-line .md-list-item-text h4, md-list-item.md-3-line > .md-no-style .md-list-item-text h4 {
  145. font-size: 14px;
  146. letter-spacing: 0.01em;
  147. margin: 3px 0 1px 0;
  148. font-weight: 400;
  149. line-height: 1.2em;
  150. overflow: hidden;
  151. white-space: nowrap;
  152. text-overflow: ellipsis; }
  153. md-list-item.md-2-line .md-list-item-text p, md-list-item.md-2-line > .md-no-style .md-list-item-text p, md-list-item.md-3-line .md-list-item-text p, md-list-item.md-3-line > .md-no-style .md-list-item-text p {
  154. font-size: 14px;
  155. font-weight: 500;
  156. letter-spacing: 0.01em;
  157. margin: 0 0 0 0;
  158. line-height: 1.6em; }
  159. md-list-item.md-2-line, md-list-item.md-2-line > .md-no-style {
  160. height: auto;
  161. min-height: 72px; }
  162. md-list-item.md-2-line.md-long-text, md-list-item.md-2-line > .md-no-style.md-long-text {
  163. margin: 1.6em; }
  164. md-list-item.md-2-line > .md-avatar, md-list-item.md-2-line .md-avatar-icon, md-list-item.md-2-line > .md-no-style > .md-avatar, md-list-item.md-2-line > .md-no-style .md-avatar-icon {
  165. margin-top: 12px; }
  166. md-list-item.md-2-line > md-icon:first-child, md-list-item.md-2-line > .md-no-style > md-icon:first-child {
  167. -webkit-align-self: flex-start;
  168. -ms-flex-item-align: start;
  169. align-self: flex-start; }
  170. md-list-item.md-2-line .md-list-item-text, md-list-item.md-2-line > .md-no-style .md-list-item-text {
  171. -webkit-flex: 1;
  172. -ms-flex: 1;
  173. flex: 1; }
  174. md-list-item.md-3-line, md-list-item.md-3-line > .md-no-style {
  175. height: auto;
  176. min-height: 88px; }
  177. md-list-item.md-3-line.md-long-text, md-list-item.md-3-line > .md-no-style.md-long-text {
  178. margin: 1.6em; }
  179. md-list-item.md-3-line > md-icon:first-child, md-list-item.md-3-line > .md-avatar, md-list-item.md-3-line > .md-no-style > md-icon:first-child, md-list-item.md-3-line > .md-no-style > .md-avatar {
  180. margin-top: 16px; }