VSwitch.sass 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. @use 'sass:selector'
  2. @use '../../styles/settings'
  3. @use '../../styles/tools'
  4. @use './variables' as *
  5. .v-switch
  6. .v-label
  7. padding-inline-start: $switch-label-margin-inline-start
  8. .v-switch__loader
  9. display: flex
  10. .v-progress-circular
  11. color: $switch-loader-color
  12. .v-switch__track,
  13. .v-switch__thumb
  14. background-color: currentColor
  15. transition: none
  16. .v-selection-control--error:not(.v-selection-control--disabled) &
  17. background-color: $switch-error-background-color
  18. .v-switch__thumb
  19. .v-selection-control--dirty &
  20. color: currentColor
  21. .v-switch__track
  22. border-radius: $switch-track-radius
  23. height: $switch-track-height
  24. opacity: $switch-track-opacity
  25. width: $switch-track-width
  26. cursor: pointer
  27. .v-switch--inset &
  28. border-radius: $switch-inset-track-border-radius
  29. height: $switch-inset-track-height
  30. width: $switch-inset-track-width
  31. .v-switch__thumb
  32. align-items: center
  33. border-radius: $switch-thumb-radius
  34. color: rgb(var(--v-theme-surface))
  35. display: flex
  36. height: $switch-thumb-height
  37. justify-content: center
  38. width: $switch-thumb-width
  39. pointer-events: none
  40. transition: $switch-control-input-transition
  41. @include tools.elevation($switch-thumb-elevation)
  42. .v-switch--inset &
  43. @include tools.elevation(0)
  44. .v-switch:not(.v-switch--loading) .v-icon ~ &
  45. display: none
  46. .v-switch--loading .v-selection-control__input > .v-icon
  47. display: none
  48. .v-switch
  49. $switch-thumb-transform: $switch-track-width * .5 - $switch-thumb-width * .5 + $switch-thumb-offset
  50. .v-selection-control
  51. min-height: var(--v-input-control-height)
  52. .v-selection-control__input
  53. border-radius: 50%
  54. transition: $switch-control-input-transition
  55. transform: translateX(-$switch-thumb-transform)
  56. position: absolute
  57. .v-selection-control--dirty
  58. .v-selection-control__input
  59. transform: translateX($switch-thumb-transform)
  60. &.v-switch--indeterminate
  61. .v-selection-control__input
  62. transform: scale(.8)
  63. .v-switch__thumb
  64. transform: scale(.75)
  65. box-shadow: none
  66. &.v-switch--inset
  67. .v-selection-control__wrapper
  68. width: auto