]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
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 | ||
22 | @import "variables"; | |
23 | ||
24 | /* override Button.css */ | |
25 | .claro .dijitTimePicker .dijitButtonNode { | |
26 | padding: 0 0; | |
27 | .border-radius(0); | |
28 | } | |
6887a0f5 | 29 | .claro .dijitTimePicker { |
81bea17a AD |
30 | border:1px @border-color solid; |
31 | border-top:none; | |
32 | border-bottom:none; | |
33 | background-color:#fff; /* TODO: useless? Appears to be overridden by settings on individual elements */ | |
34 | } | |
6887a0f5 | 35 | .claro .dijitTimePickerItem { |
81bea17a | 36 | /* dijitTimePickerItem refers to both Tick's (minor values like 2:15, 2:30, 2:45) and Marker's (major values like 2PM, 3PM) */ |
f0cfe83e | 37 | .standard-gradient; |
81bea17a AD |
38 | border-top:solid 1px @border-color; |
39 | border-bottom:solid 1px @border-color; | |
81bea17a AD |
40 | margin-top:-1px; |
41 | } | |
81bea17a AD |
42 | .claro .dijitTimePickerTick { |
43 | /* minor value */ | |
44 | color:@timepicker-minorvalue-text-color; | |
45 | background-color:@timepicker-minorvalue-background-color; | |
46 | font-size:0.818em; | |
47 | } | |
48 | .claro .dijitTimePickerMarker { | |
49 | /* major value - 1:00, 2:00, times on the hour */ | |
50 | background-color: @timepicker-majorvalue-background-color; | |
51 | font-size: 1em; | |
52 | white-space: nowrap; | |
53 | } | |
54 | .claro .dijitTimePickerTickHover, | |
55 | .claro .dijitTimePickerMarkerHover, | |
56 | .claro .dijitTimePickerMarkerSelected, | |
57 | .claro .dijitTimePickerTickSelected { | |
58 | background-color: @timepicker-value-hovered-background-color; | |
81bea17a AD |
59 | color:@timepicker-value-hovered-text-color; |
60 | } | |
61 | .claro .dijitTimePickerMarkerSelected, | |
62 | .claro .dijitTimePickerTickSelected { | |
63 | font-size: 1em; | |
64 | } | |
6887a0f5 | 65 | |
81bea17a AD |
66 | .claro .dijitTimePickerTick .dijitTimePickerItemInner { |
67 | padding:1px; | |
68 | margin:0; | |
69 | } | |
70 | .claro .dijitTimePicker .dijitButtonNode { | |
71 | border-left:none; | |
72 | border-right:none; | |
73 | border-color:@border-color; | |
74 | background-color: @unselected-background-color; | |
f0cfe83e | 75 | .standard-gradient; |
81bea17a | 76 | } |
6887a0f5 | 77 | .claro .dijitTimePicker .dijitArrowButtonInner { |
81bea17a | 78 | height: 100%; /* hack claro.button.css */ |
1354d172 | 79 | background-image: url(@image-form-common-arrows); |
81bea17a AD |
80 | background-repeat: no-repeat; |
81 | background-position:-140px 45%; | |
82 | } | |
6887a0f5 | 83 | .claro .dijitTimePicker .dijitDownArrowButton .dijitArrowButtonInner { |
81bea17a AD |
84 | background-position:-35px 45%; |
85 | } | |
86 | /* hover */ | |
87 | .claro .dijitTimePicker .dijitUpArrowHover, | |
88 | .claro .dijitTimePicker .dijitDownArrowHover { | |
89 | background-color: @timepicker-arrow-hovered-background-color; | |
90 | } | |
91 | .claro .dijitTimePicker .dijitUpArrowHover .dijitArrowButtonInner { | |
92 | background-position:-175px 45%; | |
93 | } | |
94 | .claro .dijitTimePicker .dijitDownArrowHover .dijitArrowButtonInner { | |
95 | background-position:-70px 45%; | |
96 | } | |
f0cfe83e AD |
97 | |
98 | // TODO: should have active rule, for clicking a .dijitTimePickerItem |