]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* NumberSpinner - namespace "dijitSpinner" |
2 | * | |
3 | * Styling NumberSpinner mainly includes: | |
4 | * | |
5 | * 1. Arrows | |
6 | * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position | |
7 | * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton | |
8 | * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image | |
9 | * | |
10 | * 2. Hover state | |
11 | * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image | |
12 | * | |
13 | * 3. Active state | |
14 | * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image | |
15 | * | |
16 | * 4. Focused state | |
17 | * .dijitSpinnerFocused .* - for background color|image | |
18 | * | |
19 | * 5. Disabled state | |
20 | * .dijitSpinnerDisabled .* - for background color|image | |
21 | */ | |
2f01fe57 | 22 | .claro .dijitSpinnerButtonContainer { |
81bea17a AD |
23 | overflow: hidden; |
24 | position: relative; | |
25 | width: auto; | |
26 | padding: 0 2px; | |
2f01fe57 AD |
27 | } |
28 | .claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { | |
81bea17a AD |
29 | border-width: 1px 0; |
30 | /* reserve space to match the claro combobox button border with border and not padding to make IE happier */ | |
31 | ||
32 | border-style: solid none; | |
2f01fe57 | 33 | } |
81bea17a | 34 | /* button */ |
2f01fe57 | 35 | .claro .dijitSpinner .dijitArrowButton { |
81bea17a AD |
36 | width: auto; |
37 | background-color: #efefef; | |
1354d172 | 38 | background-image: url("../form/images/formHighlight.png"); |
81bea17a AD |
39 | background-position: 0 0; |
40 | background-repeat: repeat-x; | |
41 | overflow: hidden; | |
2f01fe57 AD |
42 | } |
43 | .dj_iequirks .claro .dijitSpinner .dijitArrowButton { | |
81bea17a AD |
44 | overflow: visible; |
45 | /* 0 height w/o this */ | |
46 | ||
2f01fe57 AD |
47 | } |
48 | .claro .dijitSpinner .dijitSpinnerButtonInner { | |
81bea17a | 49 | width: 15px; |
2f01fe57 | 50 | } |
81bea17a | 51 | /* up & down button icons */ |
2f01fe57 | 52 | .claro .dijitSpinner .dijitArrowButtonInner { |
81bea17a AD |
53 | border: solid 1px #ffffff; |
54 | border-bottom-width: 0; | |
55 | /* 2 top borders = 1 top+bottom border in ComboBox */ | |
56 | ||
1354d172 | 57 | background-image: url("../form/images/commonFormArrows.png"); |
81bea17a AD |
58 | background-repeat: no-repeat; |
59 | height: 100%; | |
60 | width: 15px; | |
61 | padding-left: 1px; | |
62 | padding-right: 1px; | |
63 | /* for up arrow */ | |
64 | ||
65 | background-position: -139px center; | |
66 | /* override button.css (TODO: move to Common.css since ComboBox needs this too) */ | |
67 | ||
68 | display: block; | |
69 | margin: -1px 0 -1px 0; | |
70 | /* compensate for inner border */ | |
71 | ||
72 | } | |
73 | .dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { | |
74 | margin-top: 0; | |
75 | /* since its bottom aligned */ | |
76 | ||
2f01fe57 AD |
77 | } |
78 | .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { | |
81bea17a | 79 | width: 19px; |
2f01fe57 AD |
80 | } |
81 | .claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { | |
81bea17a | 82 | background-position: -34px; |
2f01fe57 AD |
83 | } |
84 | .claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { | |
81bea17a | 85 | padding: 0; |
2f01fe57 | 86 | } |
81bea17a AD |
87 | /** hover & focused status **/ |
88 | .claro .dijitUpArrowButtonActive, .claro .dijitDownArrowButtonActive { | |
89 | background-color: #abd6ff; | |
2f01fe57 | 90 | } |
81bea17a AD |
91 | .claro .dijitSpinner .dijitUpArrowButtonHover, .claro .dijitSpinner .dijitDownArrowButtonHover, .claro .dijitSpinnerFocused .dijitArrowButton { |
92 | background-color: #abd6ff; | |
2f01fe57 AD |
93 | } |
94 | .claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { | |
81bea17a | 95 | background-position: -174px; |
2f01fe57 AD |
96 | } |
97 | .claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { | |
81bea17a | 98 | background-position: -69px; |
2f01fe57 AD |
99 | } |
100 | .claro .dijitSpinnerFocused { | |
81bea17a AD |
101 | background-color: #ffffff; |
102 | background-image: none; | |
2f01fe57 | 103 | } |
81bea17a AD |
104 | /* mouse down status */ |
105 | .claro .dijitSpinner .dijitDownArrowButtonActive, .claro .dijitSpinner .dijitUpArrowButtonActive { | |
106 | background-color: #7dbefa; | |
107 | background-position: 0 -177px; | |
2f01fe57 | 108 | } |
81bea17a AD |
109 | .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { |
110 | /* hide inner border while button is depressed */ | |
111 | ||
112 | border: 0; | |
113 | padding: 1px; | |
114 | margin-right: 2px; | |
115 | margin-bottom: 1px; | |
2f01fe57 AD |
116 | } |
117 | .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { | |
81bea17a | 118 | background-position: -173px; |
2f01fe57 AD |
119 | } |
120 | .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { | |
81bea17a | 121 | background-position: -68px; |
2f01fe57 | 122 | } |
81bea17a | 123 | /* disabled */ |
2f01fe57 | 124 | .claro .dijitSpinnerDisabled .dijitArrowButtonInner { |
81bea17a | 125 | background-color: #efefef; |
2f01fe57 AD |
126 | } |
127 | .claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { | |
81bea17a | 128 | background-position: -104px; |
2f01fe57 AD |
129 | } |
130 | .claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { | |
81bea17a | 131 | background-position: 1px; |
2f01fe57 | 132 | } |
81bea17a AD |
133 | /** hacks for browsers **/ |
134 | /* for IE 7, when div is enlarged, | |
135 | * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ | |
2f01fe57 | 136 | .dj_ie7 .claro .dijitSpinner { |
81bea17a AD |
137 | overflow: visible; |
138 | } |