1 /* NumberSpinner - namespace "dijitSpinner"
3 * Styling NumberSpinner mainly includes:
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
11 * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image
14 * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image
17 * .dijitSpinnerFocused .* - for background color|image
20 * .dijitSpinnerDisabled .* - for background color|image
23 @import "../variables";
25 .claro .dijitSpinnerButtonContainer {
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;
37 .claro .dijitSpinner .dijitArrowButton {
39 background-color: @arrowbutton-background-color;
40 .standard-gradient("../");
43 .dj_iequirks .claro .dijitSpinner .dijitArrowButton {
44 overflow: visible; /* 0 height w/o this */
47 .claro .dijitSpinner .dijitSpinnerButtonInner {
50 /* up & down button icons */
51 .claro .dijitSpinner .dijitArrowButtonInner {
52 border:solid 1px @arrowbutton-inner-border-color;
53 border-bottom-width: 0; /* 2 top borders = 1 top+bottom border in ComboBox */
54 background-image: url("../@{image-form-common-arrows}");
55 background-repeat: no-repeat;
62 background-position:-139px center;
64 /* override button.css (TODO: move to Common.css since ComboBox needs this too) */
66 margin: -1px 0 -1px 0; /* compensate for inner border */
69 .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner,
70 .dj_ie6 .claro .dijitSpinner .dijitArrowButtonInner,
71 .dj_ie7 .claro .dijitSpinner .dijitArrowButtonInner,
72 .dj_ie8 .claro .dijitSpinner .dijitArrowButtonInner {
73 margin-top: 0; /* since its bottom aligned */
76 .dj_iequirks .claro .dijitSpinner .dijitArrowButtonInner {
79 .claro .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner {
80 background-position:-34px;
82 .claro .dijitSpinner .dijitArrowButtonInner .dijitInputField {
86 /** hover & focused status **/
88 .claro .dijitUpArrowButtonActive,
89 .claro .dijitDownArrowButtonActive {
90 background-color:@arrowbutton-pressed-background-color;
93 .claro .dijitSpinner .dijitUpArrowButtonHover,
94 .claro .dijitSpinner .dijitDownArrowButtonHover,
95 .claro .dijitSpinnerFocused .dijitArrowButton {
96 background-color: @arrowbutton-hovered-background-color;
99 .claro .dijitSpinner .dijitUpArrowButtonHover .dijitArrowButtonInner {
100 background-position:-174px;
102 .claro .dijitSpinner .dijitDownArrowButtonHover .dijitArrowButtonInner {
103 background-position:-69px;
106 .claro .dijitSpinnerFocused {
107 background-color: @textbox-focused-background-color;
108 background-image: none;
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 .active-gradient("../");
117 .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner,
118 .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
119 /* hide inner border while button is depressed */
125 .claro .dijitSpinner .dijitUpArrowButtonActive .dijitArrowButtonInner {
126 background-position:-173px;
128 .claro .dijitSpinner .dijitDownArrowButtonActive .dijitArrowButtonInner {
129 background-position:-68px;
134 .claro .dijitSpinnerDisabled .dijitArrowButtonInner {
135 background-color: @disabled-background-color;
137 .claro .dijitSpinnerDisabled .dijitUpArrowButton .dijitArrowButtonInner {
138 background-position:-104px;
140 .claro .dijitSpinnerDisabled .dijitDownArrowButton .dijitArrowButtonInner {
141 background-position:1px;
144 /** hacks for browsers **/
146 /* for IE 7, when div is enlarged,
147 * should be no empty space between dijitInputLayoutContainer and dijitSpinner*/
148 .dj_ie7 .claro .dijitSpinner {