VSkeletonLoader.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. .v-skeleton-loader {
  2. align-items: center;
  3. background: rgb(var(--v-theme-surface));
  4. border-radius: 4px;
  5. display: flex;
  6. flex-wrap: wrap;
  7. position: relative;
  8. vertical-align: top;
  9. }
  10. .v-skeleton-loader__actions {
  11. justify-content: end;
  12. }
  13. .v-skeleton-loader .v-skeleton-loader__ossein {
  14. height: 100%;
  15. }
  16. .v-skeleton-loader .v-skeleton-loader__avatar,
  17. .v-skeleton-loader .v-skeleton-loader__button,
  18. .v-skeleton-loader .v-skeleton-loader__chip,
  19. .v-skeleton-loader .v-skeleton-loader__divider,
  20. .v-skeleton-loader .v-skeleton-loader__heading,
  21. .v-skeleton-loader .v-skeleton-loader__image,
  22. .v-skeleton-loader .v-skeleton-loader__ossein,
  23. .v-skeleton-loader .v-skeleton-loader__text {
  24. background: rgba(var(--v-theme-on-surface), var(--v-border-opacity));
  25. }
  26. .v-skeleton-loader .v-skeleton-loader__list-item,
  27. .v-skeleton-loader .v-skeleton-loader__list-item-avatar,
  28. .v-skeleton-loader .v-skeleton-loader__list-item-text,
  29. .v-skeleton-loader .v-skeleton-loader__list-item-two-line,
  30. .v-skeleton-loader .v-skeleton-loader__list-item-avatar-two-line,
  31. .v-skeleton-loader .v-skeleton-loader__list-item-three-line,
  32. .v-skeleton-loader .v-skeleton-loader__list-item-avatar-three-line {
  33. border-radius: 4px;
  34. }
  35. .v-skeleton-loader__bone {
  36. align-items: center;
  37. border-radius: inherit;
  38. display: flex;
  39. flex: 1 1 100%;
  40. flex-wrap: wrap;
  41. overflow: hidden;
  42. position: relative;
  43. }
  44. .v-skeleton-loader__bone::after {
  45. animation: loading 1.5s infinite;
  46. background: linear-gradient(90deg, rgba(var(--v-theme-surface), 0), rgba(var(--v-theme-surface), 0.3), rgba(var(--v-theme-surface), 0));
  47. transform: translateX(-100%);
  48. z-index: 1;
  49. }
  50. .v-skeleton-loader__bone::after {
  51. content: "";
  52. position: absolute;
  53. top: 0;
  54. left: 0;
  55. width: 100%;
  56. height: 100%;
  57. }
  58. .v-skeleton-loader__avatar {
  59. border-radius: 50%;
  60. flex: 0 1 auto;
  61. margin: 8px 16px;
  62. max-height: 48px;
  63. min-height: 48px;
  64. height: 48px;
  65. max-width: 48px;
  66. min-width: 48px;
  67. width: 48px;
  68. }
  69. .v-skeleton-loader__avatar + .v-skeleton-loader__bone {
  70. flex: 1 1 auto;
  71. margin-inline-start: 0;
  72. }
  73. .v-skeleton-loader__avatar + .v-skeleton-loader__sentences > .v-skeleton-loader__text,
  74. .v-skeleton-loader__avatar + .v-skeleton-loader__paragraph > .v-skeleton-loader__text {
  75. margin-inline-start: 0;
  76. }
  77. .v-skeleton-loader__button {
  78. border-radius: 4px;
  79. height: 36px;
  80. margin: 16px;
  81. max-width: 64px;
  82. }
  83. .v-skeleton-loader__button + .v-skeleton-loader__bone {
  84. flex: 1 1 auto;
  85. margin-inline-start: 0;
  86. }
  87. .v-skeleton-loader__button + .v-skeleton-loader__sentences > .v-skeleton-loader__text,
  88. .v-skeleton-loader__button + .v-skeleton-loader__paragraph > .v-skeleton-loader__text {
  89. margin-inline-start: 0;
  90. }
  91. .v-skeleton-loader__chip {
  92. border-radius: 16px;
  93. margin: 16px;
  94. height: 32px;
  95. max-width: 96px;
  96. }
  97. .v-skeleton-loader__chip + .v-skeleton-loader__bone {
  98. flex: 1 1 auto;
  99. margin-inline-start: 0;
  100. }
  101. .v-skeleton-loader__chip + .v-skeleton-loader__sentences > .v-skeleton-loader__text,
  102. .v-skeleton-loader__chip + .v-skeleton-loader__paragraph > .v-skeleton-loader__text {
  103. margin-inline-start: 0;
  104. }
  105. .v-skeleton-loader__date-picker {
  106. border-radius: inherit;
  107. }
  108. .v-skeleton-loader__date-picker .v-skeleton-loader__list-item:first-child .v-skeleton-loader__text {
  109. max-width: 88px;
  110. width: 20%;
  111. }
  112. .v-skeleton-loader__date-picker .v-skeleton-loader__heading {
  113. max-width: 256px;
  114. width: 40%;
  115. }
  116. .v-skeleton-loader__date-picker-days {
  117. flex-wrap: wrap;
  118. margin: 16px;
  119. }
  120. .v-skeleton-loader__date-picker-days .v-skeleton-loader__avatar {
  121. border-radius: 4px;
  122. margin: 4px;
  123. max-width: 100%;
  124. }
  125. .v-skeleton-loader__date-picker-options {
  126. flex-wrap: nowrap;
  127. }
  128. .v-skeleton-loader__date-picker-options .v-skeleton-loader__text {
  129. flex: 1 1 auto;
  130. }
  131. .v-skeleton-loader__divider {
  132. border-radius: 1px;
  133. height: 2px;
  134. }
  135. .v-skeleton-loader__heading {
  136. border-radius: 12px;
  137. margin: 16px;
  138. height: 24px;
  139. }
  140. .v-skeleton-loader__heading + .v-skeleton-loader__subtitle {
  141. margin-top: -16px;
  142. }
  143. .v-skeleton-loader__image {
  144. height: 150px;
  145. border-radius: 0;
  146. }
  147. .v-skeleton-loader__card .v-skeleton-loader__image {
  148. border-radius: 0;
  149. }
  150. .v-skeleton-loader__list-item {
  151. margin: 16px;
  152. }
  153. .v-skeleton-loader__list-item .v-skeleton-loader__text {
  154. margin: 0;
  155. }
  156. .v-skeleton-loader__table-thead {
  157. justify-content: space-between;
  158. }
  159. .v-skeleton-loader__table-thead .v-skeleton-loader__heading {
  160. margin-top: 16px;
  161. max-width: 16px;
  162. }
  163. .v-skeleton-loader__table-tfoot {
  164. flex-wrap: nowrap;
  165. }
  166. .v-skeleton-loader__table-tfoot > .v-skeleton-loader__text.v-skeleton-loader__bone {
  167. margin-top: 16px;
  168. }
  169. .v-skeleton-loader__table-row {
  170. align-items: baseline;
  171. margin: 0 8px;
  172. justify-content: space-evenly;
  173. flex-wrap: nowrap;
  174. }
  175. .v-skeleton-loader__table-row > .v-skeleton-loader__text.v-skeleton-loader__bone {
  176. margin-inline: 8px;
  177. }
  178. .v-skeleton-loader__table-row + .v-skeleton-loader__divider {
  179. margin: 0 16px;
  180. }
  181. .v-skeleton-loader__table-cell {
  182. align-items: center;
  183. display: flex;
  184. height: 48px;
  185. width: 88px;
  186. }
  187. .v-skeleton-loader__table-cell .v-skeleton-loader__text {
  188. margin-bottom: 0;
  189. }
  190. .v-skeleton-loader__subtitle {
  191. max-width: 70%;
  192. }
  193. .v-skeleton-loader__subtitle > .v-skeleton-loader__text {
  194. height: 16px;
  195. border-radius: 8px;
  196. }
  197. .v-skeleton-loader__text {
  198. border-radius: 6px;
  199. margin: 16px;
  200. height: 12px;
  201. }
  202. .v-skeleton-loader__text + .v-skeleton-loader__text {
  203. margin-top: -8px;
  204. max-width: 50%;
  205. }
  206. .v-skeleton-loader__text + .v-skeleton-loader__text + .v-skeleton-loader__text {
  207. max-width: 70%;
  208. }
  209. .v-skeleton-loader--boilerplate .v-skeleton-loader__bone:after {
  210. display: none;
  211. }
  212. .v-skeleton-loader--is-loading {
  213. overflow: hidden;
  214. }
  215. .v-skeleton-loader--tile {
  216. border-radius: 0;
  217. }
  218. .v-skeleton-loader--tile .v-skeleton-loader__bone {
  219. border-radius: 0;
  220. }
  221. @keyframes loading {
  222. 100% {
  223. transform: translateX(100%);
  224. }
  225. }