_sliders.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. // Sliders
  2. // Credit: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
  3. .slider {
  4. appearance: none;
  5. background: transparent;
  6. display: block;
  7. width: 100%;
  8. height: $unit-6;
  9. &:focus {
  10. @include control-shadow();
  11. outline: none;
  12. }
  13. &.tooltip:not([data-tooltip]) {
  14. &::after {
  15. content: attr(value);
  16. }
  17. }
  18. // Slider Thumb
  19. &::-webkit-slider-thumb {
  20. -webkit-appearance: none;
  21. background: $primary-color;
  22. border: 0;
  23. border-radius: 50%;
  24. height: $unit-3;
  25. margin-top: -($unit-3 - $unit-h) / 2;
  26. transition: transform .2s ease;
  27. width: $unit-3;
  28. }
  29. &::-moz-range-thumb {
  30. background: $primary-color;
  31. border: 0;
  32. border-radius: 50%;
  33. height: $unit-3;
  34. transition: transform .2s ease;
  35. width: $unit-3;
  36. }
  37. &::-ms-thumb {
  38. background: $primary-color;
  39. border: 0;
  40. border-radius: 50%;
  41. height: $unit-3;
  42. transition: transform .2s ease;
  43. width: $unit-3;
  44. }
  45. &:active {
  46. &::-webkit-slider-thumb {
  47. transform: scale(1.25);
  48. }
  49. &::-moz-range-thumb {
  50. transform: scale(1.25);
  51. }
  52. &::-ms-thumb {
  53. transform: scale(1.25);
  54. }
  55. }
  56. &:disabled,
  57. &.disabled {
  58. &::-webkit-slider-thumb {
  59. background: $gray-color-light;
  60. transform: scale(1);
  61. }
  62. &::-moz-range-thumb {
  63. background: $gray-color-light;
  64. transform: scale(1);
  65. }
  66. &::-ms-thumb {
  67. background: $gray-color-light;
  68. transform: scale(1);
  69. }
  70. }
  71. // Slider Track
  72. &::-webkit-slider-runnable-track {
  73. background: $bg-color-dark;
  74. border-radius: $border-radius;
  75. height: $unit-h;
  76. width: 100%;
  77. }
  78. &::-moz-range-track {
  79. background: $bg-color-dark;
  80. border-radius: $border-radius;
  81. height: $unit-h;
  82. width: 100%;
  83. }
  84. &::-ms-track {
  85. background: $bg-color-dark;
  86. border-radius: $border-radius;
  87. height: $unit-h;
  88. width: 100%;
  89. }
  90. &::-ms-fill-lower {
  91. background: $primary-color;
  92. }
  93. }