You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

91 lines
2.7 KiB

9 months ago
  1. // Range
  2. //
  3. // Style range inputs the same across browsers. Vendor-specific rules for pseudo
  4. // elements cannot be mixed. As such, there are no shared styles for focus or
  5. // active states on prefixed selectors.
  6. .form-range {
  7. width: 100%;
  8. height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
  9. padding: 0; // Need to reset padding
  10. appearance: none;
  11. background-color: transparent;
  12. &:focus {
  13. outline: 0;
  14. // Pseudo-elements must be split across multiple rulesets to have an effect.
  15. // No box-shadow() mixin for focus accessibility.
  16. &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
  17. &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
  18. }
  19. &::-moz-focus-outer {
  20. border: 0;
  21. }
  22. &::-webkit-slider-thumb {
  23. width: $form-range-thumb-width;
  24. height: $form-range-thumb-height;
  25. margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
  26. appearance: none;
  27. @include gradient-bg($form-range-thumb-bg);
  28. border: $form-range-thumb-border;
  29. @include border-radius($form-range-thumb-border-radius);
  30. @include box-shadow($form-range-thumb-box-shadow);
  31. @include transition($form-range-thumb-transition);
  32. &:active {
  33. @include gradient-bg($form-range-thumb-active-bg);
  34. }
  35. }
  36. &::-webkit-slider-runnable-track {
  37. width: $form-range-track-width;
  38. height: $form-range-track-height;
  39. color: transparent; // Why?
  40. cursor: $form-range-track-cursor;
  41. background-color: $form-range-track-bg;
  42. border-color: transparent;
  43. @include border-radius($form-range-track-border-radius);
  44. @include box-shadow($form-range-track-box-shadow);
  45. }
  46. &::-moz-range-thumb {
  47. width: $form-range-thumb-width;
  48. height: $form-range-thumb-height;
  49. appearance: none;
  50. @include gradient-bg($form-range-thumb-bg);
  51. border: $form-range-thumb-border;
  52. @include border-radius($form-range-thumb-border-radius);
  53. @include box-shadow($form-range-thumb-box-shadow);
  54. @include transition($form-range-thumb-transition);
  55. &:active {
  56. @include gradient-bg($form-range-thumb-active-bg);
  57. }
  58. }
  59. &::-moz-range-track {
  60. width: $form-range-track-width;
  61. height: $form-range-track-height;
  62. color: transparent;
  63. cursor: $form-range-track-cursor;
  64. background-color: $form-range-track-bg;
  65. border-color: transparent; // Firefox specific?
  66. @include border-radius($form-range-track-border-radius);
  67. @include box-shadow($form-range-track-box-shadow);
  68. }
  69. &:disabled {
  70. pointer-events: none;
  71. &::-webkit-slider-thumb {
  72. background-color: $form-range-thumb-disabled-bg;
  73. }
  74. &::-moz-range-thumb {
  75. background-color: $form-range-thumb-disabled-bg;
  76. }
  77. }
  78. }