VFileUpload.sass 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. @use '../../styles/tools'
  2. @use '../../styles/settings'
  3. @use './variables' as *
  4. @include tools.layer('components')
  5. .v-file-upload
  6. padding: $file-upload-padding
  7. flex-direction: column
  8. justify-content: center
  9. align-items: center
  10. position: relative
  11. &.v-sheet
  12. display: flex
  13. border-radius: 4px
  14. border-style: dashed
  15. border-width: 2px
  16. &.v-file-upload--density-compact
  17. padding: 32px 0
  18. flex-direction: row
  19. gap: 1rem
  20. .v-overlay__scrim
  21. pointer-events: none
  22. &--disabled
  23. pointer-events: none
  24. opacity: var(--v-disabled-opacity)
  25. &--dragging
  26. > *
  27. pointer-events: none
  28. &--clickable
  29. cursor: pointer
  30. input[type="file"]
  31. left: 0
  32. opacity: 0
  33. position: absolute
  34. cursor: pointer
  35. top: 0
  36. z-index: -1
  37. .v-file-upload-title
  38. font-size: $file-upload-title-font-size
  39. font-weight: 600
  40. .v-file-upload-icon
  41. opacity: var(--v-medium-emphasis-opacity)
  42. font-size: $file-upload-icon-font-size
  43. margin-bottom: $file-upload-icon-margin-bottom
  44. .v-file-upload--density-comfortable &
  45. font-size: $file-upload-icon-font-size - .5rem
  46. margin-bottom: $file-upload-icon-margin-bottom - .5rem
  47. .v-file-upload--density-compact &
  48. font-size: $file-upload-icon-font-size - 1rem
  49. margin-bottom: $file-upload-icon-margin-bottom - 1rem
  50. .v-file-upload-divider
  51. align-items: center
  52. display: flex
  53. margin: $file-upload-divider-margin
  54. justify-content: center
  55. width: 100%
  56. .v-file-upload-items
  57. margin: $file-upload-items-margin
  58. .v-file-upload-item
  59. &:not(:first-child)
  60. margin-top: 8px