Slider.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  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: #B0B0B0 1px inset;
  11. background-image: -webkit-gradient(linear, left top, left bottom, from(#bdbebd), to(#f7f3f7));
  12. -webkit-border-radius: 2px;
  13. }
  14. .mblSliderH {
  15. width: 200px;
  16. height: 8px;
  17. }
  18. .mblSliderH .mblSliderProgressBar {
  19. height: 100%;
  20. }
  21. .mblSliderH .mblSliderHandle {
  22. top: 50%;
  23. }
  24. .mblSliderV {
  25. height: 200px;
  26. width: 8px;
  27. }
  28. .mblSliderV .mblSliderProgressBar {
  29. width: 100%;
  30. }
  31. .mblSliderV .mblSliderHandle {
  32. left: 50%;
  33. }
  34. .mblSliderProgressBar {
  35. background-image: -webkit-gradient(linear, left top, left bottom, from(#00a200), to(#00d300), color-stop(0.2, #00ba00), color-stop(0.2, #00ba00));
  36. -webkit-border-radius: 2px;
  37. }
  38. .mblSliderHandle {
  39. margin: -10px 0 0 -10px;
  40. width: 18px;
  41. height: 18px;
  42. border: #9D9D9D 1px outset;
  43. -webkit-border-radius: 2px;
  44. background-image: -webkit-gradient(linear, left top, left bottom, from(#9c9a9c), to(#848284));
  45. }
  46. .mblSliderTransition {
  47. -webkit-transition-duration: 400ms;
  48. }
  49. .mblSliderTouchBox {
  50. margin: 0;
  51. padding: 12pt;
  52. left: -12pt;
  53. top: -12pt;
  54. border: none;
  55. width: 100%;
  56. height: 100%;
  57. background-color: transparent;
  58. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  59. }