VRating.sass 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. @use '../../styles/tools'
  2. @use './variables' as *
  3. @include tools.layer('components')
  4. // Block
  5. .v-rating
  6. max-width: 100%
  7. display: inline-flex
  8. white-space: $rating-white-space
  9. &--readonly
  10. pointer-events: none
  11. // Element
  12. .v-rating__wrapper
  13. align-items: $rating-item-align-items
  14. display: inline-flex
  15. flex-direction: column
  16. &--bottom
  17. flex-direction: column-reverse
  18. .v-rating__item
  19. display: inline-flex
  20. position: relative
  21. label
  22. cursor: pointer
  23. .v-btn--variant-plain
  24. opacity: $rating-item-button-opacity
  25. .v-btn
  26. transition-property: $rating-item-button-transition-property
  27. .v-icon
  28. transition: inherit
  29. transition-timing-function: $rating-item-transition-timing-function
  30. &:hover:not(.v-rating__item--focused)
  31. .v-rating--hover &
  32. .v-btn
  33. transform: $rating-item-icon-transform
  34. &--half
  35. overflow: hidden
  36. position: absolute
  37. clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%)
  38. z-index: 1
  39. .v-btn__overlay,
  40. &:hover .v-btn__overlay
  41. opacity: 0
  42. .v-rating__hidden
  43. height: 0
  44. opacity: 0
  45. position: absolute
  46. width: 0