VSelectionControl.sass 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. @use 'sass:map'
  2. @use 'sass:list'
  3. @use '../../styles/settings'
  4. @use '../../styles/tools'
  5. @use './variables' as *
  6. @include tools.layer('components')
  7. .v-selection-control
  8. align-items: center
  9. contain: layout
  10. display: flex
  11. flex: 1 0
  12. grid-area: control
  13. position: relative
  14. user-select: none
  15. .v-label
  16. white-space: normal
  17. word-break: break-word
  18. height: 100%
  19. opacity: 1
  20. &--disabled
  21. opacity: var(--v-disabled-opacity)
  22. pointer-events: none
  23. &--error:not(.v-selection-control--disabled)
  24. .v-label
  25. color: rgb(var(--v-theme-error))
  26. &--inline
  27. display: inline-flex
  28. flex: 0 0 auto
  29. min-width: 0
  30. max-width: 100%
  31. .v-label
  32. width: auto
  33. @at-root
  34. @include tools.density('v-selection-control', $selection-control-density) using ($modifier)
  35. --v-selection-control-size: #{$selection-control-size + $modifier}
  36. .v-selection-control__wrapper
  37. width: var(--v-selection-control-size)
  38. height: var(--v-selection-control-size)
  39. display: inline-flex
  40. align-items: center
  41. position: relative
  42. justify-content: center
  43. flex: none
  44. .v-selection-control__input
  45. width: var(--v-selection-control-size)
  46. height: var(--v-selection-control-size)
  47. align-items: center
  48. display: flex
  49. flex: none
  50. justify-content: center
  51. position: relative
  52. border-radius: 50%
  53. input
  54. cursor: pointer
  55. position: absolute
  56. left: 0
  57. top: 0
  58. width: 100%
  59. height: 100%
  60. opacity: 0
  61. &::before
  62. border-radius: 100%
  63. background-color: currentColor
  64. opacity: 0
  65. pointer-events: none
  66. @include tools.absolute(true)
  67. &:hover::before
  68. opacity: calc(#{map.get(settings.$states, 'hover')} * var(--v-theme-overlay-multiplier))
  69. > .v-icon
  70. opacity: var(--v-medium-emphasis-opacity)
  71. .v-selection-control--disabled &,
  72. .v-selection-control--dirty &,
  73. .v-selection-control--error &
  74. > .v-icon
  75. opacity: 1
  76. .v-selection-control--error:not(.v-selection-control--disabled) &
  77. > .v-icon
  78. color: rgb(var(--v-theme-error))
  79. .v-selection-control--focus-visible &::before
  80. opacity: calc(#{map.get(settings.$states, 'focus')} * var(--v-theme-overlay-multiplier))