VEmptyState.sass 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @include tools.layer('components')
  4. .v-empty-state
  5. align-items: center
  6. display: flex
  7. flex-direction: column
  8. justify-content: center
  9. min-height: $empty-state-min-height
  10. padding: $empty-state-padding
  11. &--start
  12. align-items: flex-start
  13. &--center
  14. align-items: center
  15. &--end
  16. align-items: flex-end
  17. .v-empty-state__media
  18. text-align: center
  19. width: 100%
  20. .v-icon
  21. color: $empty-state-media-icon-color
  22. .v-empty-state__headline
  23. color: $empty-state-headline-color
  24. font-size: $empty-state-headline-font-size
  25. font-weight: $empty-state-headline-font-weight
  26. line-height: $empty-state-headline-line-height
  27. text-align: center
  28. margin-bottom: $empty-state-headline-margin-bottom
  29. .v-empty-state--mobile &
  30. font-size: $empty-state-headline-mobile-font-size
  31. .v-empty-state__title
  32. font-size: $empty-state-title-font-size
  33. font-weight: $empty-state-title-font-weight
  34. line-height: $empty-state-title-line-height
  35. margin-bottom: $empty-state-title-margin-bottom
  36. text-align: center
  37. .v-empty-state__text
  38. font-size: $empty-state-text-font-size
  39. font-weight: $empty-state-text-font-weight
  40. line-height: $empty-state-text-line-height
  41. padding: $empty-state-text-padding
  42. text-align: center
  43. .v-empty-state__content
  44. padding: $empty-state-content-padding
  45. .v-empty-state__actions
  46. display: flex
  47. gap: $empty-state-actions-gap
  48. padding: $empty-state-actions-padding
  49. .v-empty-state__action-btn.v-btn
  50. background-color: $empty-state-actions-btn-background-color
  51. color: $empty-state-actions-btn-color