dijit/themes/claro/TimePicker.css

Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u

/* Time Picker 
 *
 * Styling the Time Picker consists of the following: 
 *
 * 1. minor time values
 * 		.dijitTimePickerTick - set text color, size, background color of minor values
 * 		.dijitTimePickerTickHover - set hover style of minor time values
 * 		dijitTimePickerTickSelected - set selected style of minor time values
 *
 * 2. major time values - 1:00, 2:00, times on the hour 
 * 		set text color, size, background color, left/right margins for "zoom" affect
 * 		.dijitTimePickerMarkerHover - to set hover style of major time values
 * 		.dijitTimePickerMarkerSelected - set selected style of major time values
 * 
 * 3. up and down arrow buttons
 * 		.dijitTimePicker .dijitButtonNode - background-color, border
 * 		.dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state
 *
 *	Other classes provide the fundamental structure of the TimePicker and should not be modified. 
 */
/* override Button.css */
.claro .dijitTimePicker .dijitButtonNode {
  padding: 0 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.claro .dijitTimePicker {
  border: 1px #b5bcc7 solid;
  border-top: none;
  border-bottom: none;
  background-color: #fff;
  /* TODO: useless?   Appears to be overridden by settings on individual elements */

}
.claro .dijitTimePickerItem {
  /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */

  background-image: url("images/standardGradient.png");
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  _background-image: none;
  border-top: solid 1px #b5bcc7;
  border-bottom: solid 1px #b5bcc7;
  margin-top: -1px;
}
.claro .dijitTimePickerTick {
  /* minor value */

  color: #818181;
  background-color: #efefef;
  font-size: 0.818em;
}
.claro .dijitTimePickerMarker {
  /* major value - 1:00, 2:00, times on the hour */

  background-color: #e5f2fe;
  font-size: 1em;
  white-space: nowrap;
}
.claro .dijitTimePickerTickHover,
.claro .dijitTimePickerMarkerHover,
.claro .dijitTimePickerMarkerSelected,
.claro .dijitTimePickerTickSelected {
  background-color: #7dbdfa;
  color: #000000;
}
.claro .dijitTimePickerMarkerSelected,
.claro .dijitTimePickerTickSelected {
  font-size: 1em;
}
.claro .dijitTimePickerTick .dijitTimePickerItemInner {
  padding: 1px;
  margin: 0;
}
.claro .dijitTimePicker .dijitButtonNode {
  border-left: none;
  border-right: none;
  border-color: #b5bcc7;
  background-color: #efefef;
  background-image: url("images/standardGradient.png");
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  _background-image: none;
}
.claro .dijitTimePicker .dijitArrowButtonInner {
  height: 100%;
  /* hack claro.button.css */

  background-image: url("form/images/commonFormArrows.png");
  background-repeat: no-repeat;
  background-position: -140px 45%;
}
.claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner {
  background-position: -35px 45%;
}
/* hover */
.claro .dijitTimePicker .dijitUpArrowHover,
.claro .dijitTimePicker .dijitDownArrowHover {
  background-color: #abd6ff;
}
.claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner {
  background-position: -175px 45%;
}
.claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner {
  background-position: -70px 45%;
}