1 /* Button | DropDownButton | ComboButton | ToggleButton
3 * Styling Buttons mainly includes:
9 * .dijitButtonNode - common button/arrow wrapper shared across all three button types
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
21 * 4. States - Hover, Active, Disabled, e.g.
22 * .dijitButtonHover .dijitButtonNode
23 * .dijitButtonActive .dijitButtonNode
24 * .dijitButtonDisabled .dijitButtonNode
26 * .dijitDisabled .dijitArrowButtonInner - disabled arrow states
28 .claro .dijitButtonNode {
29 /* rules for dijit.form.*Button widgets and arrow nodes on ComboBox, Spinner etc. */
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;
38 .claro
.dijitButton
.dijitButtonNode
,
39 .claro
.dijitDropDownButton
.dijitButtonNode
,
40 .claro
.dijitComboButton
.dijitButtonNode
,
41 .claro .dijitToggleButton .dijitButtonNode {
42 /* rules for the dijit.form.*Button widgets (see also ComboButton section below) */
44 border: 1px solid
#759dc0;
45 padding: 2px 4px 4px 4px;
47 -moz-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);
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
;
61 .claro .dijitComboButton .dijitArrowButton {
63 padding: 4px 2px 4px 2px;
64 /* TODO: still needed? */
67 /*arrow styles for down/up/left/right directions*/
68 .claro .dijitArrowButtonInner {
72 background-image: url
("../form/images/buttonArrows.png");
73 background-repeat: no-repeat
;
74 background-position: -51px 53%;
76 .claro .dijitLeftArrowButton .dijitArrowButtonInner {
77 background-position: -77px 53%;
79 .claro .dijitRightArrowButton .dijitArrowButtonInner {
80 background-position: -26px 53%;
82 .claro .dijitUpArrowButton .dijitArrowButtonInner {
83 background-position: 0 53%;
85 .claro .dijitDisabled .dijitArrowButtonInner {
86 background-position: -151px 53%;
88 .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner {
89 background-position: -177px 53%;
91 .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner {
92 background-position: -126px 53%;
94 .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner {
95 background-position: -100px 53%;
97 .claro .dijitButtonText {
102 .claro
.dijitButtonHover
.dijitButtonNode
,
103 .claro
.dijitDropDownButtonHover
.dijitButtonNode
,
104 .claro
.dijitComboButton
.dijitButtonNodeHover
,
105 .claro
.dijitComboButton
.dijitDownArrowButtonHover
,
106 .claro .dijitToggleButtonHover .dijitButtonNode {
107 background-color: #86bdf2;
109 -webkit-transition-duration: 0.2s;
110 -moz-transition-duration: 0.2s;
111 transition-duration: 0.2s;
113 /* active, checked status */
114 .claro
.dijitButtonActive
.dijitButtonNode
,
115 .claro
.dijitDropDownButtonActive
.dijitButtonNode
,
116 .claro
.dijitComboButtonActive
.dijitButtonNode
,
117 .claro
.dijitToggleButtonActive
.dijitButtonNode
,
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);
123 -webkit-transition-duration: 0.1s;
124 -moz-transition-duration: 0.1s;
125 transition-duration: 0.1s;
127 /* disabled status */
128 .claro
.dijitButtonDisabled
,
129 .claro
.dijitDropDownButtonDisabled
,
130 .claro
.dijitComboButtonDisabled
,
131 .claro .dijitToggleButtonDisabled {
132 background-image: none
;
135 .claro
.dijitButtonDisabled
.dijitButtonNode
,
136 .claro
.dijitDropDownButtonDisabled
.dijitButtonNode
,
137 .claro
.dijitComboButtonDisabled
.dijitButtonNode
,
138 .claro .dijitToggleButtonDisabled .dijitButtonNode {
139 background-color: #efefef;
140 border: solid
1px #d3d3d3;
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);
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
;
152 .claro .dijitComboButtonDisabled .dijitArrowButton {
153 border-left-width: 0;
155 /* for ComboButton */
156 .claro table.dijitComboButton {
157 border-collapse: separate
;
158 /* override dijit.css so that ComboBox rounded corners work */
161 .claro .dijitComboButton .dijitStretch {
162 -moz-border-radius: 4px 0 0 4px;
163 border-radius: 4px 0 0 4px;
165 .claro .dijitComboButton .dijitArrowButton {
166 -moz-border-radius: 0 4px 4px 0;
167 border-radius: 0 4px 4px 0;