VSliderTrack.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. .v-slider-track__background {
  2. background-color: rgb(var(--v-theme-surface-variant));
  3. }
  4. @media (forced-colors: active) {
  5. .v-slider-track__background {
  6. background-color: highlight;
  7. }
  8. }
  9. .v-slider-track__fill {
  10. background-color: rgb(var(--v-theme-surface-variant));
  11. }
  12. @media (forced-colors: active) {
  13. .v-slider-track__fill {
  14. background-color: highlight;
  15. }
  16. }
  17. .v-slider-track__tick {
  18. background-color: rgb(var(--v-theme-surface-variant));
  19. }
  20. .v-slider-track__tick--filled {
  21. background-color: rgb(var(--v-theme-surface-light));
  22. }
  23. .v-slider-track {
  24. border-radius: 6px;
  25. }
  26. @media (forced-colors: active) {
  27. .v-slider-track {
  28. border: thin solid buttontext;
  29. }
  30. }
  31. .v-slider-track__background, .v-slider-track__fill {
  32. position: absolute;
  33. transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  34. border-radius: inherit;
  35. }
  36. .v-slider--pressed .v-slider-track__background, .v-slider--pressed .v-slider-track__fill {
  37. transition: none;
  38. }
  39. .v-input--error:not(.v-input--disabled) .v-slider-track__background, .v-input--error:not(.v-input--disabled) .v-slider-track__fill {
  40. background-color: currentColor;
  41. }
  42. .v-slider-track__ticks {
  43. height: 100%;
  44. width: 100%;
  45. position: relative;
  46. }
  47. .v-slider-track__tick {
  48. position: absolute;
  49. opacity: 0;
  50. transition: 0.2s opacity cubic-bezier(0.4, 0, 0.2, 1);
  51. border-radius: 2px;
  52. width: var(--v-slider-tick-size);
  53. height: var(--v-slider-tick-size);
  54. transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / -2));
  55. }
  56. .v-locale--is-ltr.v-slider-track__tick--first .v-slider-track__tick-label, .v-locale--is-ltr .v-slider-track__tick--first .v-slider-track__tick-label {
  57. transform: none;
  58. }
  59. .v-locale--is-rtl.v-slider-track__tick--first .v-slider-track__tick-label, .v-locale--is-rtl .v-slider-track__tick--first .v-slider-track__tick-label {
  60. transform: translateX(100%);
  61. }
  62. .v-locale--is-ltr.v-slider-track__tick--last .v-slider-track__tick-label, .v-locale--is-ltr .v-slider-track__tick--last .v-slider-track__tick-label {
  63. transform: translateX(-100%);
  64. }
  65. .v-locale--is-rtl.v-slider-track__tick--last .v-slider-track__tick-label, .v-locale--is-rtl .v-slider-track__tick--last .v-slider-track__tick-label {
  66. transform: none;
  67. }
  68. .v-slider-track__tick-label {
  69. position: absolute;
  70. user-select: none;
  71. white-space: nowrap;
  72. }
  73. .v-slider.v-input--horizontal .v-slider-track {
  74. display: flex;
  75. align-items: center;
  76. width: 100%;
  77. height: calc(var(--v-slider-track-size) + 2px);
  78. touch-action: pan-y;
  79. }
  80. .v-slider.v-input--horizontal .v-slider-track__background {
  81. height: var(--v-slider-track-size);
  82. }
  83. .v-slider.v-input--horizontal .v-slider-track__fill {
  84. height: inherit;
  85. }
  86. .v-slider.v-input--horizontal .v-slider-track__tick {
  87. margin-top: calc(calc(var(--v-slider-track-size) + 2px) / 2);
  88. }
  89. .v-locale--is-rtl.v-slider.v-input--horizontal .v-slider-track__tick, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick {
  90. transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / -2));
  91. }
  92. .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
  93. margin-top: calc(var(--v-slider-track-size) / 2 + 8px);
  94. }
  95. .v-locale--is-ltr.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
  96. transform: translateX(-50%);
  97. }
  98. .v-locale--is-rtl.v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick .v-slider-track__tick-label {
  99. transform: translateX(50%);
  100. }
  101. .v-slider.v-input--horizontal .v-slider-track__tick--first {
  102. margin-inline-start: calc(var(--v-slider-tick-size) + 1px);
  103. }
  104. .v-locale--is-ltr.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label {
  105. transform: translateX(0%);
  106. }
  107. .v-locale--is-rtl.v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--first .v-slider-track__tick-label {
  108. transform: translateX(0%);
  109. }
  110. .v-slider.v-input--horizontal .v-slider-track__tick--last {
  111. margin-inline-start: calc(100% - var(--v-slider-tick-size) - 1px);
  112. }
  113. .v-locale--is-ltr.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label, .v-locale--is-ltr .v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label {
  114. transform: translateX(-100%);
  115. }
  116. .v-locale--is-rtl.v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label, .v-locale--is-rtl .v-slider.v-input--horizontal .v-slider-track__tick--last .v-slider-track__tick-label {
  117. transform: translateX(100%);
  118. }
  119. .v-slider.v-input--vertical .v-slider-track {
  120. height: 100%;
  121. display: flex;
  122. justify-content: center;
  123. width: calc(var(--v-slider-track-size) + 2px);
  124. touch-action: pan-x;
  125. }
  126. .v-slider.v-input--vertical .v-slider-track__background {
  127. width: var(--v-slider-track-size);
  128. }
  129. .v-slider.v-input--vertical .v-slider-track__fill {
  130. width: inherit;
  131. }
  132. .v-slider.v-input--vertical .v-slider-track__ticks {
  133. height: 100%;
  134. }
  135. .v-slider.v-input--vertical .v-slider-track__tick {
  136. margin-inline-start: calc(calc(var(--v-slider-track-size) + 2px) / 2);
  137. transform: translate(calc(var(--v-slider-tick-size) / -2), calc(var(--v-slider-tick-size) / 2));
  138. }
  139. .v-locale--is-rtl.v-slider.v-input--vertical .v-slider-track__tick, .v-locale--is-rtl .v-slider.v-input--vertical .v-slider-track__tick {
  140. transform: translate(calc(var(--v-slider-tick-size) / 2), calc(var(--v-slider-tick-size) / 2));
  141. }
  142. .v-slider.v-input--vertical .v-slider-track__tick--first {
  143. bottom: calc(0% + var(--v-slider-tick-size) + 1px);
  144. }
  145. .v-slider.v-input--vertical .v-slider-track__tick--last {
  146. bottom: calc(100% - var(--v-slider-tick-size) - 1px);
  147. }
  148. .v-slider.v-input--vertical .v-slider-track__tick .v-slider-track__tick-label {
  149. margin-inline-start: calc(var(--v-slider-track-size) / 2 + 12px);
  150. transform: translateY(-50%);
  151. }
  152. .v-slider-track__ticks--always-show .v-slider-track__tick, .v-slider--focused .v-slider-track__tick {
  153. opacity: 1;
  154. }
  155. .v-slider-track__background--opacity {
  156. opacity: 0.38;
  157. }