1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- /* 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.
- */
- @import "variables";
- /* override Button.css */
- .claro .dijitTimePicker .dijitButtonNode {
- padding: 0 0;
- .border-radius(0);
- }
- .claro .dijitTimePicker {
- border:1px @border-color 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) */
- .standard-gradient;
- border-top:solid 1px @border-color;
- border-bottom:solid 1px @border-color;
- margin-top:-1px;
- }
- .claro .dijitTimePickerTick {
- /* minor value */
- color:@timepicker-minorvalue-text-color;
- background-color:@timepicker-minorvalue-background-color;
- font-size:0.818em;
- }
- .claro .dijitTimePickerMarker {
- /* major value - 1:00, 2:00, times on the hour */
- background-color: @timepicker-majorvalue-background-color;
- font-size: 1em;
- white-space: nowrap;
- }
- .claro .dijitTimePickerTickHover,
- .claro .dijitTimePickerMarkerHover,
- .claro .dijitTimePickerMarkerSelected,
- .claro .dijitTimePickerTickSelected {
- background-color: @timepicker-value-hovered-background-color;
- color:@timepicker-value-hovered-text-color;
- }
- .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:@border-color;
- background-color: @unselected-background-color;
- .standard-gradient;
- }
- .claro .dijitTimePicker .dijitArrowButtonInner {
- height: 100%; /* hack claro.button.css */
- background-image: url(@image-form-common-arrows);
- 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: @timepicker-arrow-hovered-background-color;
- }
- .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner {
- background-position:-175px 45%;
- }
- .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner {
- background-position:-70px 45%;
- }
- // TODO: should have active rule, for clicking a .dijitTimePickerItem
|