]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* Button | DropDownButton | ComboButton | ToggleButton |
2 | * | |
3 | * Styling Buttons mainly includes: | |
4 | * | |
5 | * 1. Containers | |
6 | * .dijitButton | |
7 | * .dijitDropDownButton | |
8 | * .dijitComboButton | |
9 | * .dijitButtonNode - common button/arrow wrapper shared across all three button types | |
10 | * | |
11 | * 2. Button text | |
12 | * .dijitButtonText | |
13 | * | |
14 | * 3. Arrows - only for DropDownButton and ComboButton | |
15 | * There are total four directions arrows - down, left, right, up: | |
16 | * .dijitArrowButtonInner - down arrow by default | |
17 | * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow | |
18 | * .dijitRightArrowButton .dijitArrowButtonInner - right arrow | |
19 | * .dijitUpArrowButton .dijitArrowButtonInner - up arrow | |
20 | * | |
21 | * 4. States - Hover, Active, Disabled, e.g. | |
22 | * .dijitButtonHover .dijitButtonNode | |
23 | * .dijitButtonActive .dijitButtonNode | |
24 | * .dijitButtonDisabled .dijitButtonNode | |
25 | * | |
26 | * .dijitDisabled .dijitArrowButtonInner - disabled arrow states | |
27 | */ | |
28 | ||
29 | @import "../variables"; | |
30 | ||
31 | .claro .dijitButtonNode { | |
32 | /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ | |
33 | .transition-property(background-color); | |
34 | .transition-duration(.3s); | |
35 | } | |
36 | ||
37 | .claro .dijitButton .dijitButtonNode, | |
38 | .claro .dijitDropDownButton .dijitButtonNode, | |
39 | .claro .dijitComboButton .dijitButtonNode, | |
40 | .claro .dijitToggleButton .dijitButtonNode { | |
41 | /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ | |
42 | border: 1px solid @button-border-color; | |
f0cfe83e | 43 | padding: 2px 4px 4px 4px; |
1354d172 | 44 | color: @text-color; |
81bea17a AD |
45 | .border-radius(@button-border-radius); |
46 | .box-shadow(0 1px 1px rgba(0,0,0,0.15)); | |
f0cfe83e AD |
47 | |
48 | background-color: desaturate(darken(@button-background-color, 10), 20); | |
49 | ||
50 | // Alpha transparency layer to add gradient to above background color. | |
51 | // Use CSS gradient with fallback to image for IE. | |
52 | background-image: url("images/buttonEnabled.png"); | |
53 | background-repeat: repeat-x; | |
54 | .alpha-white-gradient(1, 0px, 0, 3px, 0.75, 100%); | |
55 | _background-image: none; // IE6 can't handle background-color and background-image at once. | |
81bea17a AD |
56 | } |
57 | ||
f0cfe83e | 58 | |
81bea17a AD |
59 | .claro .dijitComboButton .dijitArrowButton { |
60 | border-left-width: 0; | |
61 | padding: 4px 2px 4px 2px; /* TODO: still needed? */ | |
62 | } | |
63 | ||
64 | /*arrow styles for down/up/left/right directions*/ | |
65 | .claro .dijitArrowButtonInner { | |
66 | width: 15px; | |
67 | height: 15px; | |
68 | margin: 0 auto; | |
1354d172 | 69 | background-image:url("../@{image-form-button-arrows}"); |
81bea17a AD |
70 | background-repeat:no-repeat; |
71 | background-position:-51px 53%; | |
72 | } | |
73 | .claro .dijitLeftArrowButton .dijitArrowButtonInner { | |
74 | background-position: -77px 53%; | |
75 | } | |
76 | .claro .dijitRightArrowButton .dijitArrowButtonInner { | |
77 | background-position: -26px 53%; | |
78 | } | |
79 | .claro .dijitUpArrowButton .dijitArrowButtonInner { | |
80 | background-position: 0 53%; | |
81 | } | |
82 | .claro .dijitDisabled .dijitArrowButtonInner { | |
83 | background-position: -151px 53%; | |
84 | } | |
85 | .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { | |
86 | background-position: -177px 53%; | |
87 | } | |
88 | .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { | |
89 | background-position: -126px 53%; | |
90 | } | |
91 | .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { | |
92 | background-position: -100px 53%; | |
93 | } | |
94 | ||
95 | .claro .dijitButtonText { | |
96 | padding: 0 0.3em; | |
97 | text-align: center; | |
98 | } | |
99 | ||
100 | ||
101 | ||
102 | ||
103 | ||
104 | /* hover status */ | |
105 | .claro .dijitButtonHover .dijitButtonNode, | |
106 | .claro .dijitDropDownButtonHover .dijitButtonNode, | |
107 | .claro .dijitComboButton .dijitButtonNodeHover, | |
108 | .claro .dijitComboButton .dijitDownArrowButtonHover, | |
109 | .claro .dijitToggleButtonHover .dijitButtonNode { | |
f0cfe83e | 110 | background-color: desaturate(darken(@button-hovered-background-color, 10), 20); |
81bea17a AD |
111 | color:@text-color; |
112 | .transition-duration(.2s); | |
113 | } | |
114 | ||
1354d172 | 115 | /* active, checked status */ |
81bea17a AD |
116 | .claro .dijitButtonActive .dijitButtonNode, |
117 | .claro .dijitDropDownButtonActive .dijitButtonNode, | |
118 | .claro .dijitComboButtonActive .dijitButtonNode, | |
1354d172 | 119 | .claro .dijitToggleButtonActive .dijitButtonNode, |
f0cfe83e AD |
120 | .claro .dijitToggleButtonChecked .dijitButtonNode { |
121 | background-color: desaturate(darken(@button-pressed-background-color, 10), 20); | |
122 | .box-shadow(inset 0px 1px 1px rgba(0, 0, 0, 0.2)); | |
81bea17a AD |
123 | .transition-duration(.1s); |
124 | } | |
125 | ||
126 | /* disabled status */ | |
127 | .claro .dijitButtonDisabled, | |
128 | .claro .dijitDropDownButtonDisabled, | |
129 | .claro .dijitComboButtonDisabled, | |
130 | .claro .dijitToggleButtonDisabled { | |
131 | background-image: none; | |
132 | outline: none; | |
133 | } | |
134 | ||
135 | .claro .dijitButtonDisabled .dijitButtonNode, | |
136 | .claro .dijitDropDownButtonDisabled .dijitButtonNode, | |
137 | .claro .dijitComboButtonDisabled .dijitButtonNode, | |
f0cfe83e | 138 | .claro .dijitToggleButtonDisabled .dijitButtonNode { |
81bea17a AD |
139 | background-color: @disabled-background-color; |
140 | border: solid 1px @disabled-border-color; | |
141 | color: @disabled-text-color; | |
142 | .box-shadow(0 0 0 rgba(0,0,0,0)); | |
f0cfe83e AD |
143 | |
144 | // Change the gradient from light to dark. | |
145 | // Again using CSS gradient with fallback to image for IE. | |
146 | background-image: url("images/buttonDisabled.png"); | |
147 | .alpha-white-gradient(1, 0%, 0, 40%); | |
148 | _background-image: none; // IE6 can't handle background-color and background-image at once. | |
81bea17a | 149 | } |
f0cfe83e | 150 | |
81bea17a AD |
151 | .claro .dijitComboButtonDisabled .dijitArrowButton{ |
152 | border-left-width: 0; | |
153 | } | |
154 | /* for ComboButton */ | |
155 | .claro table.dijitComboButton { | |
156 | border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ | |
157 | } | |
158 | ||
81bea17a AD |
159 | .claro .dijitComboButton .dijitStretch { |
160 | .border-radius(@button-border-radius 0 0 @button-border-radius); | |
161 | } | |
162 | .claro .dijitComboButton .dijitArrowButton { | |
163 | .border-radius(0 @button-border-radius @button-border-radius 0); | |
164 | } |