Slider.css 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. /* dojox.mobile.Slider */
  2. .mblSlider {
  3. outline: none;
  4. -webkit-user-select: none;
  5. /* prevent selection */
  6. -webkit-box-sizing: content-box;
  7. /* make width and height consistent with a DIV */
  8. margin: 15px;
  9. /* 1/2 handle width for hanging off the ends of the bar */
  10. border: 1px outset #b5bcc7;
  11. background-color: #8fc9ff;
  12. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(3.3333333333333335%, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(1, rgba(255, 255, 255, 0.3)));
  13. -webkit-border-radius: 2px;
  14. }
  15. .mblSliderH {
  16. width: 200px;
  17. height: 8px;
  18. }
  19. .mblSliderH .mblSliderProgressBar {
  20. height: 100%;
  21. }
  22. .mblSliderH .mblSliderHandle {
  23. top: 50%;
  24. }
  25. .mblSliderV {
  26. height: 200px;
  27. width: 8px;
  28. }
  29. .mblSliderV .mblSliderProgressBar {
  30. width: 100%;
  31. }
  32. .mblSliderV .mblSliderHandle {
  33. left: 50%;
  34. }
  35. .mblSliderProgressBar {
  36. -webkit-border-radius: 2px;
  37. background-color: #0064c2;
  38. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(3.3333333333333335%, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(1, rgba(255, 255, 255, 0.3)));
  39. }
  40. .mblSliderHandle {
  41. margin: -10px 0 0 -10px;
  42. width: 18px;
  43. height: 18px;
  44. border: 1px outset #b5bcc7;
  45. background-color: #5cb0ff;
  46. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(3.3333333333333335%, rgba(255, 255, 255, 0.1)), color-stop(0.5, rgba(255, 255, 255, 0.6)), color-stop(1, rgba(255, 255, 255, 0.3)));
  47. -webkit-border-radius: 2px;
  48. }
  49. .mblSliderTransition {
  50. -webkit-transition-duration: 400ms;
  51. }
  52. .mblSliderTouchBox {
  53. margin: 0;
  54. padding: 12pt;
  55. left: -12pt;
  56. top: -12pt;
  57. border: none;
  58. width: 100%;
  59. height: 100%;
  60. background-color: transparent;
  61. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  62. }