VListItem.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. .v-list-item {
  2. align-items: center;
  3. display: grid;
  4. flex: none;
  5. grid-template-areas: "prepend content append";
  6. grid-template-columns: max-content auto max-content;
  7. outline: none;
  8. max-width: 100%;
  9. padding: 4px 16px;
  10. position: relative;
  11. text-decoration: none;
  12. border-color: rgba(var(--v-border-color), var(--v-border-opacity));
  13. border-style: solid;
  14. border-width: 0;
  15. border-radius: 0;
  16. }
  17. .v-list-item--border {
  18. border-width: thin;
  19. box-shadow: none;
  20. }
  21. .v-list-item:hover > .v-list-item__overlay {
  22. opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
  23. }
  24. .v-list-item:focus-visible > .v-list-item__overlay {
  25. opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
  26. }
  27. @supports not selector(:focus-visible) {
  28. .v-list-item:focus > .v-list-item__overlay {
  29. opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
  30. }
  31. }
  32. .v-list-item--active > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true] > .v-list-item__overlay {
  33. opacity: calc(var(--v-activated-opacity) * var(--v-theme-overlay-multiplier));
  34. }
  35. .v-list-item--active:hover > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:hover > .v-list-item__overlay {
  36. opacity: calc((var(--v-activated-opacity) + var(--v-hover-opacity)) * var(--v-theme-overlay-multiplier));
  37. }
  38. .v-list-item--active:focus-visible > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:focus-visible > .v-list-item__overlay {
  39. opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
  40. }
  41. @supports not selector(:focus-visible) {
  42. .v-list-item--active:focus > .v-list-item__overlay, .v-list-item[aria-haspopup=menu][aria-expanded=true]:focus > .v-list-item__overlay {
  43. opacity: calc((var(--v-activated-opacity) + var(--v-focus-opacity)) * var(--v-theme-overlay-multiplier));
  44. }
  45. }
  46. .v-list-item--variant-plain, .v-list-item--variant-outlined, .v-list-item--variant-text, .v-list-item--variant-tonal {
  47. background: transparent;
  48. color: inherit;
  49. }
  50. .v-list-item--variant-plain {
  51. opacity: 0.62;
  52. }
  53. .v-list-item--variant-plain:focus, .v-list-item--variant-plain:hover {
  54. opacity: 1;
  55. }
  56. .v-list-item--variant-plain .v-list-item__overlay {
  57. display: none;
  58. }
  59. .v-list-item--variant-elevated, .v-list-item--variant-flat {
  60. background: rgba(var(--v-theme-surface));
  61. color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
  62. }
  63. .v-list-item--variant-elevated {
  64. box-shadow: 0px 2px 1px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 1px 1px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 3px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
  65. }
  66. .v-list-item--variant-flat {
  67. box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
  68. }
  69. .v-list-item--variant-outlined {
  70. border: thin solid currentColor;
  71. }
  72. .v-list-item--variant-text .v-list-item__overlay {
  73. background: currentColor;
  74. }
  75. .v-list-item--variant-tonal .v-list-item__underlay {
  76. background: currentColor;
  77. opacity: var(--v-activated-opacity);
  78. border-radius: inherit;
  79. position: absolute;
  80. top: 0;
  81. right: 0;
  82. bottom: 0;
  83. left: 0;
  84. pointer-events: none;
  85. }
  86. @supports selector(:focus-visible) {
  87. .v-list-item::after {
  88. content: "";
  89. position: absolute;
  90. top: 0;
  91. left: 0;
  92. width: 100%;
  93. height: 100%;
  94. pointer-events: none;
  95. border: 2px solid currentColor;
  96. border-radius: 4px;
  97. opacity: 0;
  98. transition: opacity 0.2s ease-in-out;
  99. }
  100. .v-list-item:focus-visible::after {
  101. opacity: calc(0.15 * var(--v-theme-overlay-multiplier));
  102. }
  103. }
  104. .v-list-item__prepend > .v-icon, .v-list-item__append > .v-icon {
  105. opacity: var(--v-medium-emphasis-opacity);
  106. }
  107. .v-list-item--active .v-list-item__prepend > .v-icon,
  108. .v-list-item--active .v-list-item__append > .v-icon {
  109. opacity: 1;
  110. }
  111. .v-list-item--rounded {
  112. border-radius: 4px;
  113. }
  114. .v-list-item--disabled {
  115. pointer-events: none;
  116. user-select: none;
  117. opacity: 0.6;
  118. }
  119. .v-list-item--link {
  120. cursor: pointer;
  121. }
  122. .v-list-item__prepend {
  123. align-items: center;
  124. align-self: center;
  125. display: flex;
  126. grid-area: prepend;
  127. }
  128. .v-list-item__prepend > .v-avatar {
  129. margin-inline-end: 16px;
  130. }
  131. .v-list-item__prepend > .v-icon {
  132. margin-inline-end: 32px;
  133. }
  134. .v-list-item--three-line .v-list-item__prepend {
  135. align-self: start;
  136. }
  137. .v-list-item__append {
  138. align-self: center;
  139. display: flex;
  140. align-items: center;
  141. grid-area: append;
  142. }
  143. .v-list-item__append > .v-avatar {
  144. margin-inline-start: 16px;
  145. }
  146. .v-list-item__append > .v-icon {
  147. margin-inline-start: 32px;
  148. }
  149. .v-list-item--three-line .v-list-item__append {
  150. align-self: start;
  151. }
  152. .v-list-item__content {
  153. align-self: center;
  154. grid-area: content;
  155. overflow: hidden;
  156. }
  157. .v-list-item-action {
  158. align-self: center;
  159. display: flex;
  160. align-items: center;
  161. grid-area: prepend;
  162. flex: none;
  163. transition: inherit;
  164. transition-property: height, width;
  165. }
  166. .v-list-item-action--start {
  167. margin-inline-end: 12px;
  168. }
  169. .v-list-item-action--end {
  170. margin-inline-start: 12px;
  171. }
  172. .v-list-item-media {
  173. margin-top: 0;
  174. margin-bottom: 0;
  175. }
  176. .v-list-item-media--start {
  177. margin-inline-end: 16px;
  178. }
  179. .v-list-item-media--end {
  180. margin-inline-start: 16px;
  181. }
  182. .v-list-item--two-line .v-list-item-media {
  183. margin-top: -4px;
  184. margin-bottom: -4px;
  185. }
  186. .v-list-item--three-line .v-list-item-media {
  187. margin-top: 0;
  188. margin-bottom: 0;
  189. }
  190. .v-list-item-subtitle {
  191. -webkit-box-orient: vertical;
  192. display: -webkit-box;
  193. opacity: var(--v-medium-emphasis-opacity);
  194. overflow: hidden;
  195. padding: 0;
  196. text-overflow: ellipsis;
  197. font-size: 0.875rem;
  198. font-weight: 400;
  199. letter-spacing: 0.0178571429em;
  200. line-height: 1rem;
  201. text-transform: none;
  202. }
  203. .v-list-item--one-line .v-list-item-subtitle {
  204. -webkit-line-clamp: 1;
  205. }
  206. .v-list-item--two-line .v-list-item-subtitle {
  207. -webkit-line-clamp: 2;
  208. }
  209. .v-list-item--three-line .v-list-item-subtitle {
  210. -webkit-line-clamp: 3;
  211. }
  212. .v-list-item--nav .v-list-item-subtitle {
  213. font-size: 0.75rem;
  214. font-weight: 400;
  215. letter-spacing: 0.0178571429em;
  216. line-height: 1rem;
  217. }
  218. .v-list-item-title {
  219. hyphens: auto;
  220. overflow-wrap: normal;
  221. overflow: hidden;
  222. padding: 0;
  223. white-space: nowrap;
  224. text-overflow: ellipsis;
  225. word-break: normal;
  226. word-wrap: break-word;
  227. font-size: 1rem;
  228. font-weight: 400;
  229. letter-spacing: 0.009375em;
  230. line-height: 1.5rem;
  231. text-transform: none;
  232. }
  233. .v-list-item--nav .v-list-item-title {
  234. font-size: 0.8125rem;
  235. font-weight: 500;
  236. letter-spacing: normal;
  237. line-height: 1rem;
  238. }
  239. .v-list-item--density-default {
  240. min-height: 40px;
  241. }
  242. .v-list-item--density-default.v-list-item--one-line {
  243. min-height: 48px;
  244. padding-top: 4px;
  245. padding-bottom: 4px;
  246. }
  247. .v-list-item--density-default.v-list-item--two-line {
  248. min-height: 64px;
  249. padding-top: 12px;
  250. padding-bottom: 12px;
  251. }
  252. .v-list-item--density-default.v-list-item--three-line {
  253. min-height: 88px;
  254. padding-top: 16px;
  255. padding-bottom: 16px;
  256. }
  257. .v-list-item--density-default.v-list-item--three-line .v-list-item__prepend,
  258. .v-list-item--density-default.v-list-item--three-line .v-list-item__append {
  259. padding-top: 8px;
  260. }
  261. .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
  262. padding-inline-start: 16px;
  263. padding-inline-end: 16px;
  264. }
  265. .v-list-item--density-default:not(.v-list-item--nav).v-list-item--two-line {
  266. padding-inline-start: 16px;
  267. padding-inline-end: 16px;
  268. }
  269. .v-list-item--density-default:not(.v-list-item--nav).v-list-item--three-line {
  270. padding-inline-start: 16px;
  271. padding-inline-end: 16px;
  272. }
  273. .v-list-item--density-comfortable {
  274. min-height: 36px;
  275. }
  276. .v-list-item--density-comfortable.v-list-item--one-line {
  277. min-height: 44px;
  278. }
  279. .v-list-item--density-comfortable.v-list-item--two-line {
  280. min-height: 60px;
  281. padding-top: 8px;
  282. padding-bottom: 8px;
  283. }
  284. .v-list-item--density-comfortable.v-list-item--three-line {
  285. min-height: 84px;
  286. padding-top: 12px;
  287. padding-bottom: 12px;
  288. }
  289. .v-list-item--density-comfortable.v-list-item--three-line .v-list-item__prepend,
  290. .v-list-item--density-comfortable.v-list-item--three-line .v-list-item__append {
  291. padding-top: 6px;
  292. }
  293. .v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--one-line {
  294. padding-inline-start: 16px;
  295. padding-inline-end: 16px;
  296. }
  297. .v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--two-line {
  298. padding-inline-start: 16px;
  299. padding-inline-end: 16px;
  300. }
  301. .v-list-item--density-comfortable:not(.v-list-item--nav).v-list-item--three-line {
  302. padding-inline-start: 16px;
  303. padding-inline-end: 16px;
  304. }
  305. .v-list-item--density-compact {
  306. min-height: 32px;
  307. }
  308. .v-list-item--density-compact.v-list-item--one-line {
  309. min-height: 40px;
  310. }
  311. .v-list-item--density-compact.v-list-item--two-line {
  312. min-height: 56px;
  313. padding-top: 4px;
  314. padding-bottom: 4px;
  315. }
  316. .v-list-item--density-compact.v-list-item--three-line {
  317. min-height: 80px;
  318. padding-top: 8px;
  319. padding-bottom: 8px;
  320. }
  321. .v-list-item--density-compact.v-list-item--three-line .v-list-item__prepend,
  322. .v-list-item--density-compact.v-list-item--three-line .v-list-item__append {
  323. padding-top: 4px;
  324. }
  325. .v-list-item--density-compact:not(.v-list-item--nav).v-list-item--one-line {
  326. padding-inline-start: 16px;
  327. padding-inline-end: 16px;
  328. }
  329. .v-list-item--density-compact:not(.v-list-item--nav).v-list-item--two-line {
  330. padding-inline-start: 16px;
  331. padding-inline-end: 16px;
  332. }
  333. .v-list-item--density-compact:not(.v-list-item--nav).v-list-item--three-line {
  334. padding-inline-start: 16px;
  335. padding-inline-end: 16px;
  336. }
  337. .v-list-item--nav {
  338. padding-inline-start: 8px;
  339. padding-inline-end: 8px;
  340. }
  341. .v-list .v-list-item--nav:not(:only-child) {
  342. margin-bottom: 4px;
  343. }
  344. .v-list-item__underlay {
  345. position: absolute;
  346. }
  347. .v-list-item__overlay {
  348. background-color: currentColor;
  349. border-radius: inherit;
  350. bottom: 0;
  351. left: 0;
  352. opacity: 0;
  353. pointer-events: none;
  354. position: absolute;
  355. right: 0;
  356. top: 0;
  357. transition: opacity 0.2s ease-in-out;
  358. }
  359. .v-list-item--active.v-list-item--variant-elevated .v-list-item__overlay {
  360. --v-theme-overlay-multiplier: 0;
  361. }
  362. .v-list {
  363. --indent-padding: 0px;
  364. }
  365. .v-list--nav {
  366. --indent-padding: -8px;
  367. }
  368. .v-list-group {
  369. --list-indent-size: 16px;
  370. --parent-padding: var(--indent-padding);
  371. --prepend-width: 40px;
  372. }
  373. .v-list-group--fluid {
  374. --list-indent-size: 0px;
  375. }
  376. .v-list-group--prepend {
  377. --parent-padding: calc(var(--indent-padding) + var(--prepend-width));
  378. }
  379. .v-list-group--fluid.v-list-group--prepend {
  380. --parent-padding: var(--indent-padding);
  381. }
  382. .v-list-group__items {
  383. --indent-padding: calc(var(--parent-padding) + var(--list-indent-size));
  384. }
  385. .v-list-group__items .v-list-item {
  386. padding-inline-start: calc(16px + var(--indent-padding)) !important;
  387. }
  388. .v-list-group__header.v-list-item--active:not(:focus-visible) .v-list-item__overlay {
  389. opacity: 0;
  390. }
  391. .v-list-group__header.v-list-item--active:hover .v-list-item__overlay {
  392. opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
  393. }