ToggleButton.css 1.5 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: 0 8px 0 23px;
  8. height: 30px;
  9. border: 1px outset #b5bcc7;
  10. -webkit-border-radius: 2px;
  11. background-color: #5cb0ff;
  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. font-family: Helvetica;
  14. font-weight: normal;
  15. line-height: 30px;
  16. color: #131313;
  17. line-height: 30px;
  18. }
  19. .mblToggleButton.mblToggleButtonSelected {
  20. border-color: #769dc0;
  21. background-color: #0064c2;
  22. }
  23. .mblToggleButton.mblToggleButtonChecked {
  24. border-color: #769dc0;
  25. background-color: #007ef5;
  26. }
  27. .mblToggleButton.mblToggleButtonChecked::after {
  28. position: absolute;
  29. content: "";
  30. top: 7.5px;
  31. left: 7px;
  32. width: 5px;
  33. height: 10px;
  34. border-color: #000000;
  35. border-width: 0.15em;
  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. border-color: #769dc0;
  42. background-color: #0064c2;
  43. }
  44. .mblToggleButton.mblToggleButtonChecked.mblToggleButtonSelected::after {
  45. border-color: #000000;
  46. }
  47. .mblToggleButton:disabled {
  48. cursor: default;
  49. color: grey;
  50. border-color: grey;
  51. background-color: #8fc9ff;
  52. }