_form-range.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. // Range
  2. .form-range {
  3. // background-color: transparent;
  4. &:focus {
  5. &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
  6. &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow-alt; }
  7. }
  8. &::-webkit-slider-thumb {
  9. @include gradient-bg($form-range-thumb-bg-alt);
  10. border: $form-range-thumb-border-alt;
  11. @include box-shadow($form-range-thumb-box-shadow-alt);
  12. &:active {
  13. @include gradient-bg($form-range-thumb-active-bg-alt);
  14. }
  15. }
  16. &::-webkit-slider-runnable-track {
  17. // color: transparent; // Why?
  18. background-color: $form-range-track-bg-alt;
  19. // border-color: transparent;
  20. @include box-shadow($form-range-track-box-shadow-alt);
  21. }
  22. &::-moz-range-thumb {
  23. @include gradient-bg($form-range-thumb-bg-alt);
  24. border: $form-range-thumb-border-alt;
  25. @include box-shadow($form-range-thumb-box-shadow-alt);
  26. &:active {
  27. @include gradient-bg($form-range-thumb-active-bg-alt);
  28. }
  29. }
  30. &::-moz-range-track {
  31. // color: transparent;
  32. background-color: $form-range-track-bg-alt;
  33. // border-color: transparent; // Firefox specific?
  34. @include box-shadow($form-range-track-box-shadow-alt);
  35. }
  36. &:disabled {
  37. pointer-events: none;
  38. &::-webkit-slider-thumb {
  39. background-color: $form-range-thumb-disabled-bg-alt;
  40. }
  41. &::-moz-range-thumb {
  42. background-color: $form-range-thumb-disabled-bg-alt;
  43. }
  44. }
  45. }