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.

402 lines
19 KiB

  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.1
  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.010em;
  14. line-height: 1.2em; }
  15. md-list.md-dense md-list-item,
  16. md-list.md-dense md-list-item .md-list-item-inner {
  17. min-height: 48px; }
  18. md-list.md-dense md-list-item::before,
  19. md-list.md-dense md-list-item .md-list-item-inner::before {
  20. content: '';
  21. min-height: 48px;
  22. visibility: hidden;
  23. display: inline-block; }
  24. md-list.md-dense md-list-item md-icon:first-child,
  25. md-list.md-dense md-list-item .md-list-item-inner md-icon:first-child {
  26. width: 20px;
  27. height: 20px; }
  28. md-list.md-dense md-list-item > md-icon:first-child:not(.md-avatar-icon),
  29. md-list.md-dense md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
  30. margin-right: 36px; }
  31. [dir=rtl] md-list.md-dense md-list-item > md-icon:first-child:not(.md-avatar-icon), [dir=rtl]
  32. md-list.md-dense md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
  33. margin-right: auto;
  34. margin-left: 36px; }
  35. md-list.md-dense md-list-item .md-avatar, md-list.md-dense md-list-item .md-avatar-icon,
  36. md-list.md-dense md-list-item .md-list-item-inner .md-avatar,
  37. md-list.md-dense md-list-item .md-list-item-inner .md-avatar-icon {
  38. margin-right: 20px; }
  39. [dir=rtl] md-list.md-dense md-list-item .md-avatar, [dir=rtl] md-list.md-dense md-list-item .md-avatar-icon, [dir=rtl]
  40. md-list.md-dense md-list-item .md-list-item-inner .md-avatar, [dir=rtl]
  41. md-list.md-dense md-list-item .md-list-item-inner .md-avatar-icon {
  42. margin-right: auto;
  43. margin-left: 20px; }
  44. md-list.md-dense md-list-item .md-avatar,
  45. md-list.md-dense md-list-item .md-list-item-inner .md-avatar {
  46. -webkit-box-flex: 0;
  47. -webkit-flex: none;
  48. flex: none;
  49. width: 36px;
  50. height: 36px; }
  51. md-list.md-dense md-list-item.md-2-line .md-list-item-text.md-offset, md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, md-list.md-dense md-list-item.md-3-line .md-list-item-text.md-offset, md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
  52. margin-left: 56px; }
  53. [dir=rtl] md-list.md-dense md-list-item.md-2-line .md-list-item-text.md-offset, [dir=rtl] md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, [dir=rtl] md-list.md-dense md-list-item.md-3-line .md-list-item-text.md-offset, [dir=rtl] md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
  54. margin-left: auto;
  55. margin-right: 56px; }
  56. md-list.md-dense md-list-item.md-2-line .md-list-item-text h3,
  57. md-list.md-dense md-list-item.md-2-line .md-list-item-text h4,
  58. md-list.md-dense md-list-item.md-2-line .md-list-item-text p, md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h3,
  59. md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h4,
  60. md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text p, md-list.md-dense md-list-item.md-3-line .md-list-item-text h3,
  61. md-list.md-dense md-list-item.md-3-line .md-list-item-text h4,
  62. md-list.md-dense md-list-item.md-3-line .md-list-item-text p, md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h3,
  63. md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h4,
  64. md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text p {
  65. line-height: 1.05;
  66. font-size: 12px; }
  67. md-list.md-dense md-list-item.md-2-line .md-list-item-text h3, md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h3, md-list.md-dense md-list-item.md-3-line .md-list-item-text h3, md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
  68. font-size: 13px; }
  69. md-list.md-dense md-list-item.md-2-line, md-list.md-dense md-list-item.md-2-line > .md-no-style {
  70. min-height: 60px; }
  71. md-list.md-dense md-list-item.md-2-line::before, md-list.md-dense md-list-item.md-2-line > .md-no-style::before {
  72. content: '';
  73. min-height: 60px;
  74. visibility: hidden;
  75. display: inline-block; }
  76. md-list.md-dense md-list-item.md-2-line > .md-avatar, md-list.md-dense md-list-item.md-2-line .md-avatar-icon, md-list.md-dense md-list-item.md-2-line > .md-no-style > .md-avatar, md-list.md-dense md-list-item.md-2-line > .md-no-style .md-avatar-icon {
  77. margin-top: 12px; }
  78. md-list.md-dense md-list-item.md-3-line, md-list.md-dense md-list-item.md-3-line > .md-no-style {
  79. min-height: 76px; }
  80. md-list.md-dense md-list-item.md-3-line::before, md-list.md-dense md-list-item.md-3-line > .md-no-style::before {
  81. content: '';
  82. min-height: 76px;
  83. visibility: hidden;
  84. display: inline-block; }
  85. md-list.md-dense md-list-item.md-3-line > md-icon:first-child,
  86. md-list.md-dense md-list-item.md-3-line > .md-avatar, md-list.md-dense md-list-item.md-3-line > .md-no-style > md-icon:first-child,
  87. md-list.md-dense md-list-item.md-3-line > .md-no-style > .md-avatar {
  88. margin-top: 16px; }
  89. md-list-item {
  90. position: relative; }
  91. md-list-item.md-proxy-focus.md-focused .md-no-style {
  92. -webkit-transition: background-color 0.15s linear;
  93. transition: background-color 0.15s linear; }
  94. md-list-item._md-button-wrap {
  95. position: relative; }
  96. md-list-item._md-button-wrap > div.md-button:first-child {
  97. display: -webkit-box;
  98. display: -webkit-flex;
  99. display: flex;
  100. -webkit-box-align: center;
  101. -webkit-align-items: center;
  102. align-items: center;
  103. -webkit-box-pack: start;
  104. -webkit-justify-content: flex-start;
  105. justify-content: flex-start;
  106. padding: 0 16px;
  107. margin: 0;
  108. font-weight: 400;
  109. text-align: left;
  110. border: medium none; }
  111. [dir=rtl] md-list-item._md-button-wrap > div.md-button:first-child {
  112. text-align: right; }
  113. md-list-item._md-button-wrap > div.md-button:first-child > .md-button:first-child {
  114. position: absolute;
  115. top: 0;
  116. left: 0;
  117. height: 100%;
  118. margin: 0;
  119. padding: 0; }
  120. md-list-item._md-button-wrap > div.md-button:first-child .md-list-item-inner {
  121. width: 100%;
  122. min-height: inherit; }
  123. md-list-item.md-no-proxy,
  124. md-list-item .md-no-style {
  125. position: relative;
  126. padding: 0px 16px;
  127. -webkit-box-flex: 1;
  128. -webkit-flex: 1 1 auto;
  129. flex: 1 1 auto; }
  130. md-list-item.md-no-proxy.md-button,
  131. md-list-item .md-no-style.md-button {
  132. font-size: inherit;
  133. height: inherit;
  134. text-align: left;
  135. text-transform: none;
  136. width: 100%;
  137. white-space: normal;
  138. -webkit-box-orient: vertical;
  139. -webkit-box-direction: normal;
  140. -webkit-flex-direction: inherit;
  141. flex-direction: inherit;
  142. -webkit-box-align: inherit;
  143. -webkit-align-items: inherit;
  144. -ms-grid-row-align: inherit;
  145. align-items: inherit;
  146. border-radius: 0;
  147. margin: 0; }
  148. [dir=rtl] md-list-item.md-no-proxy.md-button, [dir=rtl]
  149. md-list-item .md-no-style.md-button {
  150. text-align: right; }
  151. md-list-item.md-no-proxy.md-button > .md-ripple-container,
  152. md-list-item .md-no-style.md-button > .md-ripple-container {
  153. border-radius: 0; }
  154. md-list-item.md-no-proxy:focus,
  155. md-list-item .md-no-style:focus {
  156. outline: none; }
  157. md-list-item.md-clickable:hover {
  158. cursor: pointer; }
  159. md-list-item md-divider {
  160. position: absolute;
  161. bottom: 0;
  162. left: 0;
  163. width: 100%; }
  164. [dir=rtl] md-list-item md-divider {
  165. left: auto;
  166. right: 0; }
  167. md-list-item md-divider[md-inset] {
  168. left: 72px;
  169. width: calc(100% - 72px);
  170. margin: 0 !important; }
  171. [dir=rtl] md-list-item md-divider[md-inset] {
  172. left: auto;
  173. right: 72px; }
  174. md-list-item,
  175. md-list-item .md-list-item-inner {
  176. display: -webkit-box;
  177. display: -webkit-flex;
  178. display: flex;
  179. -webkit-box-pack: start;
  180. -webkit-justify-content: flex-start;
  181. justify-content: flex-start;
  182. -webkit-box-align: center;
  183. -webkit-align-items: center;
  184. align-items: center;
  185. min-height: 48px;
  186. height: auto; }
  187. md-list-item::before,
  188. md-list-item .md-list-item-inner::before {
  189. content: '';
  190. min-height: 48px;
  191. visibility: hidden;
  192. display: inline-block; }
  193. md-list-item > div.md-primary > md-icon:not(.md-avatar-icon),
  194. md-list-item > div.md-secondary > md-icon:not(.md-avatar-icon),
  195. md-list-item > md-icon:first-child:not(.md-avatar-icon),
  196. md-list-item > md-icon.md-secondary:not(.md-avatar-icon),
  197. md-list-item .md-list-item-inner > div.md-primary > md-icon:not(.md-avatar-icon),
  198. md-list-item .md-list-item-inner > div.md-secondary > md-icon:not(.md-avatar-icon),
  199. md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon),
  200. md-list-item .md-list-item-inner > md-icon.md-secondary:not(.md-avatar-icon) {
  201. width: 24px;
  202. margin-top: 16px;
  203. margin-bottom: 12px;
  204. box-sizing: content-box; }
  205. md-list-item > div.md-primary > md-checkbox,
  206. md-list-item > div.md-secondary > md-checkbox,
  207. md-list-item > md-checkbox,
  208. md-list-item md-checkbox.md-secondary,
  209. md-list-item .md-list-item-inner > div.md-primary > md-checkbox,
  210. md-list-item .md-list-item-inner > div.md-secondary > md-checkbox,
  211. md-list-item .md-list-item-inner > md-checkbox,
  212. md-list-item .md-list-item-inner md-checkbox.md-secondary {
  213. -webkit-align-self: center;
  214. align-self: center; }
  215. md-list-item > div.md-primary > md-checkbox .md-label,
  216. md-list-item > div.md-secondary > md-checkbox .md-label,
  217. md-list-item > md-checkbox .md-label,
  218. md-list-item md-checkbox.md-secondary .md-label,
  219. md-list-item .md-list-item-inner > div.md-primary > md-checkbox .md-label,
  220. md-list-item .md-list-item-inner > div.md-secondary > md-checkbox .md-label,
  221. md-list-item .md-list-item-inner > md-checkbox .md-label,
  222. md-list-item .md-list-item-inner md-checkbox.md-secondary .md-label {
  223. display: none; }
  224. md-list-item > md-icon:first-child:not(.md-avatar-icon),
  225. md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
  226. margin-right: 32px; }
  227. [dir=rtl] md-list-item > md-icon:first-child:not(.md-avatar-icon), [dir=rtl]
  228. md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
  229. margin-right: auto;
  230. margin-left: 32px; }
  231. md-list-item .md-avatar, md-list-item .md-avatar-icon,
  232. md-list-item .md-list-item-inner .md-avatar,
  233. md-list-item .md-list-item-inner .md-avatar-icon {
  234. margin-top: 8px;
  235. margin-bottom: 8px;
  236. margin-right: 16px;
  237. border-radius: 50%;
  238. box-sizing: content-box; }
  239. [dir=rtl] md-list-item .md-avatar, [dir=rtl] md-list-item .md-avatar-icon, [dir=rtl]
  240. md-list-item .md-list-item-inner .md-avatar, [dir=rtl]
  241. md-list-item .md-list-item-inner .md-avatar-icon {
  242. margin-right: auto;
  243. margin-left: 16px; }
  244. md-list-item .md-avatar,
  245. md-list-item .md-list-item-inner .md-avatar {
  246. -webkit-box-flex: 0;
  247. -webkit-flex: none;
  248. flex: none;
  249. width: 40px;
  250. height: 40px; }
  251. md-list-item .md-avatar-icon,
  252. md-list-item .md-list-item-inner .md-avatar-icon {
  253. padding: 8px; }
  254. md-list-item .md-avatar-icon svg,
  255. md-list-item .md-list-item-inner .md-avatar-icon svg {
  256. width: 24px;
  257. height: 24px; }
  258. md-list-item > md-checkbox,
  259. md-list-item .md-list-item-inner > md-checkbox {
  260. width: 24px;
  261. margin-left: 3px;
  262. margin-right: 29px;
  263. margin-top: 16px; }
  264. [dir=rtl] md-list-item > md-checkbox, [dir=rtl]
  265. md-list-item .md-list-item-inner > md-checkbox {
  266. margin-left: 29px; }
  267. [dir=rtl] md-list-item > md-checkbox, [dir=rtl]
  268. md-list-item .md-list-item-inner > md-checkbox {
  269. margin-right: 3px; }
  270. md-list-item .md-secondary-container,
  271. md-list-item .md-list-item-inner .md-secondary-container {
  272. display: -webkit-box;
  273. display: -webkit-flex;
  274. display: flex;
  275. -webkit-box-align: center;
  276. -webkit-align-items: center;
  277. align-items: center;
  278. -webkit-flex-shrink: 0;
  279. flex-shrink: 0;
  280. margin: auto;
  281. margin-right: 0;
  282. margin-left: auto; }
  283. [dir=rtl] md-list-item .md-secondary-container, [dir=rtl]
  284. md-list-item .md-list-item-inner .md-secondary-container {
  285. margin-right: auto; }
  286. [dir=rtl] md-list-item .md-secondary-container, [dir=rtl]
  287. md-list-item .md-list-item-inner .md-secondary-container {
  288. margin-left: 0; }
  289. md-list-item .md-secondary-container .md-button:last-of-type, md-list-item .md-secondary-container .md-icon-button:last-of-type,
  290. md-list-item .md-list-item-inner .md-secondary-container .md-button:last-of-type,
  291. md-list-item .md-list-item-inner .md-secondary-container .md-icon-button:last-of-type {
  292. margin-right: 0; }
  293. [dir=rtl] md-list-item .md-secondary-container .md-button:last-of-type, [dir=rtl] md-list-item .md-secondary-container .md-icon-button:last-of-type, [dir=rtl]
  294. md-list-item .md-list-item-inner .md-secondary-container .md-button:last-of-type, [dir=rtl]
  295. md-list-item .md-list-item-inner .md-secondary-container .md-icon-button:last-of-type {
  296. margin-right: auto;
  297. margin-left: 0; }
  298. md-list-item .md-secondary-container md-checkbox,
  299. md-list-item .md-list-item-inner .md-secondary-container md-checkbox {
  300. margin-top: 0;
  301. margin-bottom: 0; }
  302. md-list-item .md-secondary-container md-checkbox:last-child,
  303. md-list-item .md-list-item-inner .md-secondary-container md-checkbox:last-child {
  304. width: 24px;
  305. margin-right: 0; }
  306. [dir=rtl] md-list-item .md-secondary-container md-checkbox:last-child, [dir=rtl]
  307. md-list-item .md-list-item-inner .md-secondary-container md-checkbox:last-child {
  308. margin-right: auto;
  309. margin-left: 0; }
  310. md-list-item .md-secondary-container md-switch,
  311. md-list-item .md-list-item-inner .md-secondary-container md-switch {
  312. margin-top: 0;
  313. margin-bottom: 0;
  314. margin-right: -6px; }
  315. [dir=rtl] md-list-item .md-secondary-container md-switch, [dir=rtl]
  316. md-list-item .md-list-item-inner .md-secondary-container md-switch {
  317. margin-right: auto;
  318. margin-left: -6px; }
  319. md-list-item > p, md-list-item > .md-list-item-inner > p,
  320. md-list-item .md-list-item-inner > p,
  321. md-list-item .md-list-item-inner > .md-list-item-inner > p {
  322. -webkit-box-flex: 1;
  323. -webkit-flex: 1 1 auto;
  324. flex: 1 1 auto;
  325. margin: 0; }
  326. 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 {
  327. -webkit-box-align: start;
  328. -webkit-align-items: flex-start;
  329. -ms-grid-row-align: flex-start;
  330. align-items: flex-start;
  331. -webkit-box-pack: center;
  332. -webkit-justify-content: center;
  333. justify-content: center; }
  334. md-list-item.md-2-line.md-long-text, md-list-item.md-2-line > .md-no-style.md-long-text, md-list-item.md-3-line.md-long-text, md-list-item.md-3-line > .md-no-style.md-long-text {
  335. margin-top: 8px;
  336. margin-bottom: 8px; }
  337. 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 {
  338. -webkit-box-flex: 1;
  339. -webkit-flex: 1 1 auto;
  340. flex: 1 1 auto;
  341. margin: auto;
  342. text-overflow: ellipsis;
  343. overflow: hidden; }
  344. 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 {
  345. margin-left: 56px; }
  346. [dir=rtl] md-list-item.md-2-line .md-list-item-text.md-offset, [dir=rtl] md-list-item.md-2-line > .md-no-style .md-list-item-text.md-offset, [dir=rtl] md-list-item.md-3-line .md-list-item-text.md-offset, [dir=rtl] md-list-item.md-3-line > .md-no-style .md-list-item-text.md-offset {
  347. margin-left: auto;
  348. margin-right: 56px; }
  349. 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 {
  350. font-size: 16px;
  351. font-weight: 400;
  352. letter-spacing: 0.010em;
  353. margin: 0 0 0px 0;
  354. line-height: 1.2em;
  355. overflow: hidden;
  356. white-space: nowrap;
  357. text-overflow: ellipsis; }
  358. 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 {
  359. font-size: 14px;
  360. letter-spacing: 0.010em;
  361. margin: 3px 0 1px 0;
  362. font-weight: 400;
  363. line-height: 1.2em;
  364. overflow: hidden;
  365. white-space: nowrap;
  366. text-overflow: ellipsis; }
  367. 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 {
  368. font-size: 14px;
  369. font-weight: 500;
  370. letter-spacing: 0.010em;
  371. margin: 0 0 0 0;
  372. line-height: 1.6em; }
  373. md-list-item.md-2-line, md-list-item.md-2-line > .md-no-style {
  374. height: auto;
  375. min-height: 72px; }
  376. md-list-item.md-2-line::before, md-list-item.md-2-line > .md-no-style::before {
  377. content: '';
  378. min-height: 72px;
  379. visibility: hidden;
  380. display: inline-block; }
  381. 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 {
  382. margin-top: 12px; }
  383. md-list-item.md-2-line > md-icon:first-child, md-list-item.md-2-line > .md-no-style > md-icon:first-child {
  384. -webkit-align-self: flex-start;
  385. align-self: flex-start; }
  386. md-list-item.md-2-line .md-list-item-text, md-list-item.md-2-line > .md-no-style .md-list-item-text {
  387. -webkit-box-flex: 1;
  388. -webkit-flex: 1 1 auto;
  389. flex: 1 1 auto; }
  390. md-list-item.md-3-line, md-list-item.md-3-line > .md-no-style {
  391. height: auto;
  392. min-height: 88px; }
  393. md-list-item.md-3-line::before, md-list-item.md-3-line > .md-no-style::before {
  394. content: '';
  395. min-height: 88px;
  396. visibility: hidden;
  397. display: inline-block; }
  398. md-list-item.md-3-line > md-icon:first-child,
  399. md-list-item.md-3-line > .md-avatar, md-list-item.md-3-line > .md-no-style > md-icon:first-child,
  400. md-list-item.md-3-line > .md-no-style > .md-avatar {
  401. margin-top: 16px; }