TimePicker.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. /* Time Picker
  2. *
  3. * Styling the Time Picker consists of the following:
  4. *
  5. * 1. minor time values
  6. * .dijitTimePickerTick - set text color, size, background color of minor values
  7. * .dijitTimePickerTickHover - set hover style of minor time values
  8. * dijitTimePickerTickSelected - set selected style of minor time values
  9. *
  10. * 2. major time values - 1:00, 2:00, times on the hour
  11. * set text color, size, background color, left/right margins for "zoom" affect
  12. * .dijitTimePickerMarkerHover - to set hover style of major time values
  13. * .dijitTimePickerMarkerSelected - set selected style of major time values
  14. *
  15. * 3. up and down arrow buttons
  16. * .dijitTimePicker .dijitButtonNode - background-color, border
  17. * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state
  18. *
  19. * Other classes provide the fundamental structure of the TimePicker and should not be modified.
  20. */
  21. /* override Button.css */
  22. .claro .dijitTimePicker .dijitButtonNode {
  23. padding: 0 0;
  24. -moz-border-radius: 0;
  25. border-radius: 0;
  26. }
  27. .claro .dijitTimePicker {
  28. border: 1px #b5bcc7 solid;
  29. border-top: none;
  30. border-bottom: none;
  31. background-color: #fff;
  32. /* TODO: useless? Appears to be overridden by settings on individual elements */
  33. }
  34. .claro .dijitTimePickerItem {
  35. /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */
  36. background-image: url("images/commonHighlight.png");
  37. background-position: 0 -1px;
  38. background-repeat: repeat-x;
  39. border-top: solid 1px #b5bcc7;
  40. border-bottom: solid 1px #b5bcc7;
  41. margin-right: -1px;
  42. margin-left: -1px;
  43. margin-top: -1px;
  44. }
  45. /* to make up for lack of alpha transparency in IE6 */
  46. .dj_ie6 .claro .dijitTimePickerItem {
  47. background-image: none;
  48. }
  49. .claro .dijitTimePickerTick {
  50. /* minor value */
  51. color: #818181;
  52. background-color: #efefef;
  53. font-size: 0.818em;
  54. }
  55. .claro .dijitTimePickerMarker {
  56. /* major value - 1:00, 2:00, times on the hour */
  57. background-color: #e9f4fe;
  58. font-size: 1em;
  59. white-space: nowrap;
  60. }
  61. .claro .dijitTimePickerTickHover,
  62. .claro .dijitTimePickerMarkerHover,
  63. .claro .dijitTimePickerMarkerSelected,
  64. .claro .dijitTimePickerTickSelected {
  65. background-color: #7dbefa;
  66. border: solid 1px #b5bcc7;
  67. margin-left: -7px;
  68. margin-right: -7px;
  69. color: #000000;
  70. }
  71. .claro .dijitTimePickerMarkerSelected, .claro .dijitTimePickerTickSelected {
  72. font-size: 1em;
  73. }
  74. .dj_ie .claro .dijitTimePickerTickHover,
  75. .dj_ie .claro .dijitTimePickerMarkerHover,
  76. .dj_ie .claro .dijitTimePickerMarkerSelected,
  77. .dj_ie .claro .dijitTimePickerTickSelected {
  78. width: 114%;
  79. }
  80. .dj_ie6 .claro .dijitTimePickerTickHover,
  81. .dj_ie6 .claro .dijitTimePickerMarkerHover,
  82. .dj_ie6 .claro .dijitTimePickerMarkerSelected,
  83. .dj_ie6 .claro .dijitTimePickerTickSelected {
  84. position: relative;
  85. /* creates widening of element */
  86. zoom: 1;
  87. /* creates widening of element */
  88. }
  89. .claro .dijitTimePickerTick .dijitTimePickerItemInner {
  90. padding: 1px;
  91. margin: 0;
  92. }
  93. .claro .dijitTimePicker .dijitButtonNode {
  94. border-left: none;
  95. border-right: none;
  96. border-color: #b5bcc7;
  97. background-color: #efefef;
  98. background-image: url("images/commonHighlight.png");
  99. background-position: 0 -1px;
  100. background-repeat: repeat-x;
  101. }
  102. .dj_ie6 .claro .dijitTimePicker .dijitButtonNode {
  103. background-image: none;
  104. }
  105. .claro .dijitTimePicker .dijitArrowButtonInner {
  106. height: 100%;
  107. /* hack claro.button.css */
  108. background-image: url("form/images/commonFormArrows.png");
  109. background-repeat: no-repeat;
  110. background-position: -140px 45%;
  111. }
  112. .claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner {
  113. background-position: -35px 45%;
  114. }
  115. /* hover */
  116. .claro .dijitTimePicker .dijitUpArrowHover, .claro .dijitTimePicker .dijitDownArrowHover {
  117. background-color: #abd6ff;
  118. }
  119. .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner {
  120. background-position: -175px 45%;
  121. }
  122. .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner {
  123. background-position: -70px 45%;
  124. }