]>
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 | */ | |
22 | ||
23 | @import "../variables"; | |
24 | ||
25 | .claro .dijitSpinnerButtonContainer { | |
26 | overflow: hidden; | |
27 | position: relative; | |
28 | width: auto; | |
29 | padding: 0 2px; | |
30 | } | |
31 | .claro .dijitSpinnerButtonContainer .dijitSpinnerButtonInner { | |
32 | border-width: 1px 0; /* reserve space to match the claro combobox button border with border and not padding to make IE happier */ | |
33 | border-style: solid none; | |
34 | } | |
35 | ||
36 | /* button */ | |
37 | .claro .dijitSpinner .dijitArrowButton { | |
38 | width:auto; | |
39 | background-color: @arrowbutton-background-color; | |
1354d172 | 40 | background-image: url("../@{image-form-highlight}"); |
81bea17a AD |
41 | background-position:0 0; |
42 | background-repeat:repeat-x; | |
43 | overflow: hidden; | |
44 | } | |
45 | .dj_iequirks .claro .dijitSpinner .dijitArrowButton { | |
46 | overflow: visible; /* 0 height w/o this */ | |
47 | } | |
48 | ||
49 | .claro .dijitSpinner .dijitSpinnerButtonInner { | |
50 | width: 15px; | |
51 | } | |
52 | /* up & down button icons */ | |
53 | .claro .dijitSpinner .dijitArrowButtonInner { | |
54 | border:solid 1px @arrowbutton-inner-border-color; | |
55 | border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */ | |
1354d172 | 56 | background-image: url("../@{image-form-common-arrows}"); |
81bea17a AD |
57 | background-repeat: no-repeat; |
58 | height: 100%; | |
59 | width:15px; | |
60 | padding-left: 1px; | |
61 | padding-right: 1px; | |
62 | ||
63 | /* for up arrow */ | |
64 | background-position:-139px center; | |
65 | ||
66 | /* override button.css (TODO: move to Common.css since ComboBox needs this too) */ | |
67 | display: block; | |
68 | margin: -1px 0 -1px 0; /* compensate for inner border */ | |
69 | } | |
70 | ||
71 | .dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner, | |
72 | .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner { | |
73 | margin-top: 0; /* since its bottom aligned */ | |
74 | } | |
75 | ||
76 | .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner { | |
77 | width: 19px; | |
78 | } | |
79 | .claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner { | |
80 | background-position:-34px; | |
81 | } | |
82 | .claro .dijitSpinner .dijitArrowButtonInner .dijitInputField { | |
83 | padding: 0; | |
84 | } | |
85 | ||
86 | /** hover & focused status **/ | |
87 | ||
88 | .claro .dijitUpArrowButtonActive, | |
89 | .claro .dijitDownArrowButtonActive { | |
90 | background-color:@arrowbutton-pressed-background-color; | |
91 | } | |
92 | ||
93 | .claro .dijitSpinner .dijitUpArrowButtonHover, | |
94 | .claro .dijitSpinner .dijitDownArrowButtonHover, | |
95 | .claro .dijitSpinnerFocused .dijitArrowButton { | |
96 | background-color: @arrowbutton-hovered-background-color; | |
97 | } | |
98 | ||
99 | .claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner { | |
100 | background-position:-174px; | |
101 | } | |
102 | .claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner { | |
103 | background-position:-69px; | |
104 | } | |
105 | ||
106 | .claro .dijitSpinnerFocused { | |
107 | background-color: @textbox-focused-background-color; | |
108 | background-image: none; | |
109 | } | |
110 | ||
111 | /* mouse down status */ | |
112 | .claro .dijitSpinner .dijitDownArrowButtonActive, | |
113 | .claro .dijitSpinner .dijitUpArrowButtonActive { | |
114 | background-color: #7dbefa; // TODO. Mailed Jason about inconsistent ComboBox/Spinner behavior. | |
115 | background-position:0 -177px; | |
116 | } | |
117 | .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner, | |
118 | .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { | |
119 | /* hide inner border while button is depressed */ | |
120 | border: 0; | |
121 | padding: 1px; | |
122 | margin-right:2px; | |
123 | margin-bottom:1px; | |
124 | } | |
125 | .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner { | |
126 | background-position:-173px; | |
127 | } | |
128 | .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner { | |
129 | background-position:-68px; | |
130 | } | |
131 | ||
132 | /* disabled */ | |
133 | ||
134 | .claro .dijitSpinnerDisabled .dijitArrowButtonInner { | |
135 | background-color: @disabled-background-color; | |
136 | } | |
137 | .claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner { | |
138 | background-position:-104px; | |
139 | } | |
140 | .claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner { | |
141 | background-position:1px; | |
142 | } | |
143 | ||
144 | /** hacks for browsers **/ | |
145 | ||
146 | /* for IE 7, when div is enlarged, | |
147 | * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/ | |
148 | .dj_ie7 .claro .dijitSpinner { | |
149 | overflow:visible; | |
1354d172 | 150 | } |