]>
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 | */ | |
2f01fe57 | 28 | .claro .dijitButtonNode { |
81bea17a AD |
29 | /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */ |
30 | ||
31 | -webkit-transition-property: background-color; | |
32 | -moz-transition-property: background-color; | |
33 | transition-property: background-color; | |
34 | -webkit-transition-duration: 0.3s; | |
35 | -moz-transition-duration: 0.3s; | |
36 | transition-duration: 0.3s; | |
2f01fe57 AD |
37 | } |
38 | .claro .dijitButton .dijitButtonNode, | |
39 | .claro .dijitDropDownButton .dijitButtonNode, | |
40 | .claro .dijitComboButton .dijitButtonNode, | |
41 | .claro .dijitToggleButton .dijitButtonNode { | |
81bea17a AD |
42 | /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */ |
43 | ||
1354d172 | 44 | border: 1px solid #759dc0; |
81bea17a | 45 | padding: 2px 4px 4px 4px; |
1354d172 | 46 | background-image: url("../form/images/button.png"); |
81bea17a AD |
47 | background-position: center top; |
48 | background-repeat: repeat-x; | |
1354d172 AD |
49 | background-color: #e5f2fe; |
50 | color: #000000; | |
81bea17a AD |
51 | -moz-border-radius: 4px; |
52 | border-radius: 4px; | |
53 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
54 | -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
55 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
2f01fe57 AD |
56 | } |
57 | .claro .dijitComboButton .dijitArrowButton { | |
81bea17a AD |
58 | border-left-width: 0; |
59 | padding: 4px 2px 4px 2px; | |
60 | /* TODO: still needed? */ | |
61 | ||
2f01fe57 | 62 | } |
81bea17a | 63 | /*arrow styles for down/up/left/right directions*/ |
2f01fe57 | 64 | .claro .dijitArrowButtonInner { |
81bea17a AD |
65 | width: 15px; |
66 | height: 15px; | |
67 | margin: 0 auto; | |
1354d172 | 68 | background-image: url("../form/images/buttonArrows.png"); |
81bea17a AD |
69 | background-repeat: no-repeat; |
70 | background-position: -51px 53%; | |
2f01fe57 AD |
71 | } |
72 | .claro .dijitLeftArrowButton .dijitArrowButtonInner { | |
81bea17a | 73 | background-position: -77px 53%; |
2f01fe57 AD |
74 | } |
75 | .claro .dijitRightArrowButton .dijitArrowButtonInner { | |
81bea17a | 76 | background-position: -26px 53%; |
2f01fe57 AD |
77 | } |
78 | .claro .dijitUpArrowButton .dijitArrowButtonInner { | |
81bea17a | 79 | background-position: 0 53%; |
2f01fe57 AD |
80 | } |
81 | .claro .dijitDisabled .dijitArrowButtonInner { | |
81bea17a | 82 | background-position: -151px 53%; |
2f01fe57 AD |
83 | } |
84 | .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { | |
81bea17a | 85 | background-position: -177px 53%; |
2f01fe57 AD |
86 | } |
87 | .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { | |
81bea17a | 88 | background-position: -126px 53%; |
2f01fe57 AD |
89 | } |
90 | .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { | |
81bea17a | 91 | background-position: -100px 53%; |
2f01fe57 AD |
92 | } |
93 | .claro .dijitButtonText { | |
81bea17a AD |
94 | padding: 0 0.3em; |
95 | text-align: center; | |
2f01fe57 | 96 | } |
81bea17a | 97 | /* hover status */ |
2f01fe57 AD |
98 | .claro .dijitButtonHover .dijitButtonNode, |
99 | .claro .dijitDropDownButtonHover .dijitButtonNode, | |
81bea17a | 100 | .claro .dijitComboButton .dijitButtonNodeHover, |
2f01fe57 AD |
101 | .claro .dijitComboButton .dijitDownArrowButtonHover, |
102 | .claro .dijitToggleButtonHover .dijitButtonNode { | |
81bea17a AD |
103 | background-color: #abd6ff; |
104 | color: #000000; | |
105 | -webkit-transition-duration: 0.2s; | |
106 | -moz-transition-duration: 0.2s; | |
107 | transition-duration: 0.2s; | |
108 | } | |
1354d172 | 109 | /* active, checked status */ |
81bea17a | 110 | .claro .dijitButtonActive .dijitButtonNode, |
2f01fe57 AD |
111 | .claro .dijitDropDownButtonActive .dijitButtonNode, |
112 | .claro .dijitComboButtonActive .dijitButtonNode, | |
1354d172 AD |
113 | .claro .dijitToggleButtonActive .dijitButtonNode, |
114 | .claro .dijitStackController .dijitToggleButtonChecked .dijitButtonNode { | |
81bea17a AD |
115 | background-color: #abd6ff; |
116 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
117 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
118 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
119 | -webkit-transition-duration: 0.1s; | |
120 | -moz-transition-duration: 0.1s; | |
121 | transition-duration: 0.1s; | |
122 | } | |
123 | /* disabled status */ | |
2f01fe57 AD |
124 | .claro .dijitButtonDisabled, |
125 | .claro .dijitDropDownButtonDisabled, | |
126 | .claro .dijitComboButtonDisabled, | |
127 | .claro .dijitToggleButtonDisabled { | |
81bea17a AD |
128 | background-image: none; |
129 | outline: none; | |
2f01fe57 AD |
130 | } |
131 | .claro .dijitButtonDisabled .dijitButtonNode, | |
132 | .claro .dijitDropDownButtonDisabled .dijitButtonNode, | |
133 | .claro .dijitComboButtonDisabled .dijitButtonNode, | |
81bea17a AD |
134 | .claro .dijitToggleButtonDisabled .dijitButtonNode { |
135 | background-position: 0 -149px; | |
136 | background-color: #efefef; | |
137 | border: solid 1px #d3d3d3; | |
138 | color: #818181; | |
139 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
140 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
141 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
142 | } | |
143 | .claro .dijitComboButtonDisabled .dijitArrowButton { | |
144 | border-left-width: 0; | |
145 | } | |
146 | /* for ComboButton */ | |
2f01fe57 | 147 | .claro table.dijitComboButton { |
81bea17a AD |
148 | border-collapse: separate; |
149 | /* override dijit.css so that ComboBox rounded corners work */ | |
150 | ||
2f01fe57 AD |
151 | } |
152 | .dj_ie6 .claro .dijitButtonNode { | |
81bea17a | 153 | background-image: none; |
2f01fe57 AD |
154 | } |
155 | .claro .dijitComboButton .dijitStretch { | |
81bea17a AD |
156 | -moz-border-radius: 4px 0 0 4px; |
157 | border-radius: 4px 0 0 4px; | |
2f01fe57 AD |
158 | } |
159 | .claro .dijitComboButton .dijitArrowButton { | |
81bea17a AD |
160 | -moz-border-radius: 0 4px 4px 0; |
161 | border-radius: 0 4px 4px 0; | |
2f01fe57 | 162 | } |