VCarousel.sass 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @include tools.layer('components')
  4. .v-carousel
  5. overflow: hidden
  6. position: relative
  7. width: 100%
  8. &__controls
  9. align-items: center
  10. bottom: 0
  11. display: flex
  12. height: $carousel-controls-size
  13. justify-content: center
  14. list-style-type: none
  15. position: absolute
  16. width: 100%
  17. z-index: 1
  18. @include tools.theme($carousel-controls-theme...)
  19. > .v-item-group
  20. flex: 0 1 auto
  21. &__item
  22. margin: $carousel-dot-margin
  23. .v-icon
  24. opacity: $carousel-dot-inactive-opacity
  25. &--active
  26. .v-icon
  27. opacity: $carousel-dot-active-opacity
  28. vertical-align: middle
  29. &:hover
  30. background: none
  31. .v-icon
  32. opacity: $carousel-dot-hover-opacity
  33. // Element
  34. .v-carousel__progress
  35. margin: 0
  36. position: absolute
  37. bottom: 0
  38. left: 0
  39. right: 0
  40. .v-carousel-item
  41. display: block
  42. height: inherit
  43. text-decoration: none
  44. & > .v-img
  45. height: inherit
  46. // Modifier
  47. .v-carousel--hide-delimiter-background
  48. .v-carousel__controls
  49. background: transparent
  50. .v-carousel--vertical-delimiters
  51. .v-carousel__controls
  52. flex-direction: column
  53. height: 100% !important
  54. width: $carousel-controls-size