VSwitch.css 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. .v-switch .v-label {
  2. padding-inline-start: 10px;
  3. }
  4. .v-switch__loader {
  5. display: flex;
  6. }
  7. .v-switch__loader .v-progress-circular {
  8. color: rgb(var(--v-theme-surface));
  9. }
  10. .v-switch__track,
  11. .v-switch__thumb {
  12. background-color: currentColor;
  13. transition: none;
  14. }
  15. .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__track,
  16. .v-selection-control--error:not(.v-selection-control--disabled) .v-switch__thumb {
  17. background-color: rgb(var(--v-theme-error));
  18. }
  19. .v-selection-control--dirty .v-switch__thumb {
  20. color: currentColor;
  21. }
  22. .v-switch__track {
  23. border-radius: 8px;
  24. height: 14px;
  25. opacity: 0.6;
  26. width: 36px;
  27. cursor: pointer;
  28. }
  29. .v-switch--inset .v-switch__track {
  30. border-radius: 14px;
  31. height: 28px;
  32. width: 48px;
  33. }
  34. .v-switch__thumb {
  35. align-items: center;
  36. border-radius: 50%;
  37. color: rgb(var(--v-theme-surface));
  38. display: flex;
  39. height: 20px;
  40. justify-content: center;
  41. width: 20px;
  42. pointer-events: none;
  43. transition: 0.15s transform cubic-bezier(0.4, 0, 0.2, 1);
  44. box-shadow: 0px 2px 4px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 4px 5px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 10px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
  45. }
  46. .v-switch--inset .v-switch__thumb {
  47. box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
  48. }
  49. .v-switch:not(.v-switch--loading) .v-icon ~ .v-switch__thumb {
  50. display: none;
  51. }
  52. .v-switch--loading .v-selection-control__input > .v-icon {
  53. display: none;
  54. }
  55. .v-switch .v-selection-control {
  56. min-height: var(--v-input-control-height);
  57. }
  58. .v-switch .v-selection-control__input {
  59. border-radius: 50%;
  60. transition: 0.15s transform cubic-bezier(0.4, 0, 0.2, 1);
  61. transform: translateX(-10px);
  62. position: absolute;
  63. }
  64. .v-switch .v-selection-control--dirty .v-selection-control__input {
  65. transform: translateX(10px);
  66. }
  67. .v-switch.v-switch--indeterminate .v-selection-control__input {
  68. transform: scale(0.8);
  69. }
  70. .v-switch.v-switch--indeterminate .v-switch__thumb {
  71. transform: scale(0.75);
  72. box-shadow: none;
  73. }
  74. .v-switch.v-switch--inset .v-selection-control__wrapper {
  75. width: auto;
  76. }