ToggleButton.css 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. /* dojox.mobile.ToggleButton */
  2. .mblToggleButton {
  3. position: relative;
  4. cursor: pointer;
  5. outline: none;
  6. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  7. padding: 0px 10px 0px 25px;
  8. height: 29px;
  9. border-width: 1px 1px 1px 1px;
  10. border-style: outset;
  11. border-color: #9CACC0;
  12. -webkit-border-radius: 3px;
  13. background-image: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#cecece), color-stop(0.5, #f8f8f8), color-stop(0.5, #eeeeee));
  14. font-family: Helvetica;
  15. font-size: 13px;
  16. color: black;
  17. line-height: 29px;
  18. }
  19. .mblToggleButton.mblToggleButtonSelected {
  20. background-image: -webkit-gradient(linear, left top, left bottom, from(#ad7500), to(#ffaa00), color-stop(0.06, #ffb200), color-stop(0.5, #ffc700));
  21. color: white;
  22. }
  23. .mblToggleButton.mblToggleButtonChecked {
  24. background-image: -webkit-gradient(linear, left top, left bottom, from(#00a200), to(#00d300), color-stop(0.2, #00ba00), color-stop(0.2, #00ba00));
  25. color: white;
  26. }
  27. .mblToggleButton.mblToggleButtonChecked::after {
  28. position: absolute;
  29. content: "";
  30. top: 6px;
  31. left: 7px;
  32. width: 5px;
  33. height: 10px;
  34. border-color: white;
  35. border-width: 2px;
  36. border-style: none solid solid none;
  37. -webkit-transform: rotate(45deg) skew(10deg);
  38. -webkit-transform-origin: 50% 50%;
  39. }
  40. .mblToggleButton.mblToggleButtonChecked.mblToggleButtonSelected {
  41. background-image: -webkit-gradient(linear, left top, left bottom, from(#ad7500), to(#ffaa00), color-stop(0.06, #ffb200), color-stop(0.5, #ffc700));
  42. color: white;
  43. }
  44. .mblToggleButton.mblToggleButtonChecked.mblToggleButtonSelected::after {
  45. border-color: white;
  46. }
  47. .mblToggleButton:disabled {
  48. cursor: default;
  49. border-color: grey;
  50. background-image: none;
  51. color: grey;
  52. }