]>
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 | color: #000000; |
81bea17a AD |
47 | -moz-border-radius: 4px; |
48 | border-radius: 4px; | |
49 | -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
50 | -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
51 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); | |
f0cfe83e AD |
52 | background-color: #bcd8f4; |
53 | background-image: url("images/buttonEnabled.png"); | |
54 | background-repeat: repeat-x; | |
55 | background-image: -moz-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); | |
56 | background-image: -webkit-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); | |
57 | background-image: -o-linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); | |
58 | background-image: linear-gradient(#ffffff 0px, rgba(255, 255, 255, 0) 3px, rgba(255, 255, 255, 0.75) 100%); | |
59 | _background-image: none; | |
2f01fe57 AD |
60 | } |
61 | .claro .dijitComboButton .dijitArrowButton { | |
81bea17a AD |
62 | border-left-width: 0; |
63 | padding: 4px 2px 4px 2px; | |
64 | /* TODO: still needed? */ | |
65 | ||
2f01fe57 | 66 | } |
81bea17a | 67 | /*arrow styles for down/up/left/right directions*/ |
2f01fe57 | 68 | .claro .dijitArrowButtonInner { |
81bea17a AD |
69 | width: 15px; |
70 | height: 15px; | |
71 | margin: 0 auto; | |
1354d172 | 72 | background-image: url("../form/images/buttonArrows.png"); |
81bea17a AD |
73 | background-repeat: no-repeat; |
74 | background-position: -51px 53%; | |
2f01fe57 AD |
75 | } |
76 | .claro .dijitLeftArrowButton .dijitArrowButtonInner { | |
81bea17a | 77 | background-position: -77px 53%; |
2f01fe57 AD |
78 | } |
79 | .claro .dijitRightArrowButton .dijitArrowButtonInner { | |
81bea17a | 80 | background-position: -26px 53%; |
2f01fe57 AD |
81 | } |
82 | .claro .dijitUpArrowButton .dijitArrowButtonInner { | |
81bea17a | 83 | background-position: 0 53%; |
2f01fe57 AD |
84 | } |
85 | .claro .dijitDisabled .dijitArrowButtonInner { | |
81bea17a | 86 | background-position: -151px 53%; |
2f01fe57 AD |
87 | } |
88 | .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { | |
81bea17a | 89 | background-position: -177px 53%; |
2f01fe57 AD |
90 | } |
91 | .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { | |
81bea17a | 92 | background-position: -126px 53%; |
2f01fe57 AD |
93 | } |
94 | .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { | |
81bea17a | 95 | background-position: -100px 53%; |
2f01fe57 AD |
96 | } |
97 | .claro .dijitButtonText { | |
81bea17a AD |
98 | padding: 0 0.3em; |
99 | text-align: center; | |
2f01fe57 | 100 | } |
81bea17a | 101 | /* hover status */ |
2f01fe57 AD |
102 | .claro .dijitButtonHover .dijitButtonNode, |
103 | .claro .dijitDropDownButtonHover .dijitButtonNode, | |
81bea17a | 104 | .claro .dijitComboButton .dijitButtonNodeHover, |
2f01fe57 AD |
105 | .claro .dijitComboButton .dijitDownArrowButtonHover, |
106 | .claro .dijitToggleButtonHover .dijitButtonNode { | |
f0cfe83e | 107 | background-color: #86bdf2; |
81bea17a AD |
108 | color: #000000; |
109 | -webkit-transition-duration: 0.2s; | |
110 | -moz-transition-duration: 0.2s; | |
111 | transition-duration: 0.2s; | |
112 | } | |
1354d172 | 113 | /* active, checked status */ |
81bea17a | 114 | .claro .dijitButtonActive .dijitButtonNode, |
2f01fe57 AD |
115 | .claro .dijitDropDownButtonActive .dijitButtonNode, |
116 | .claro .dijitComboButtonActive .dijitButtonNode, | |
1354d172 | 117 | .claro .dijitToggleButtonActive .dijitButtonNode, |
f0cfe83e AD |
118 | .claro .dijitToggleButtonChecked .dijitButtonNode { |
119 | background-color: #86bdf2; | |
120 | -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); | |
121 | -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); | |
122 | box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2); | |
81bea17a AD |
123 | -webkit-transition-duration: 0.1s; |
124 | -moz-transition-duration: 0.1s; | |
125 | transition-duration: 0.1s; | |
126 | } | |
127 | /* disabled status */ | |
2f01fe57 AD |
128 | .claro .dijitButtonDisabled, |
129 | .claro .dijitDropDownButtonDisabled, | |
130 | .claro .dijitComboButtonDisabled, | |
131 | .claro .dijitToggleButtonDisabled { | |
81bea17a AD |
132 | background-image: none; |
133 | outline: none; | |
2f01fe57 AD |
134 | } |
135 | .claro .dijitButtonDisabled .dijitButtonNode, | |
136 | .claro .dijitDropDownButtonDisabled .dijitButtonNode, | |
137 | .claro .dijitComboButtonDisabled .dijitButtonNode, | |
81bea17a | 138 | .claro .dijitToggleButtonDisabled .dijitButtonNode { |
81bea17a AD |
139 | background-color: #efefef; |
140 | border: solid 1px #d3d3d3; | |
141 | color: #818181; | |
142 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
143 | -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
144 | box-shadow: 0 0 0 rgba(0, 0, 0, 0); | |
f0cfe83e AD |
145 | background-image: url("images/buttonDisabled.png"); |
146 | background-image: -moz-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); | |
147 | background-image: -webkit-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); | |
148 | background-image: -o-linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); | |
149 | background-image: linear-gradient(#ffffff 0%, rgba(255, 255, 255, 0) 40%); | |
150 | _background-image: none; | |
81bea17a AD |
151 | } |
152 | .claro .dijitComboButtonDisabled .dijitArrowButton { | |
153 | border-left-width: 0; | |
154 | } | |
155 | /* for ComboButton */ | |
2f01fe57 | 156 | .claro table.dijitComboButton { |
81bea17a AD |
157 | border-collapse: separate; |
158 | /* override dijit.css so that ComboBox rounded corners work */ | |
159 | ||
2f01fe57 | 160 | } |
2f01fe57 | 161 | .claro .dijitComboButton .dijitStretch { |
81bea17a AD |
162 | -moz-border-radius: 4px 0 0 4px; |
163 | border-radius: 4px 0 0 4px; | |
2f01fe57 AD |
164 | } |
165 | .claro .dijitComboButton .dijitArrowButton { | |
81bea17a AD |
166 | -moz-border-radius: 0 4px 4px 0; |
167 | border-radius: 0 4px 4px 0; | |
2f01fe57 | 168 | } |