You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
3.2 KiB
98 lines
3.2 KiB
/* 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 |