]>
Commit | Line | Data |
---|---|---|
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 | .claro .dijitButtonNode { | |
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; | |
37 | } | |
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) */ | |
43 | ||
44 | border: 1px solid #759dc0; | |
45 | padding: 2px 4px 4px 4px; | |
46 | color: #000000; | |
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); | |
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; | |
60 | } | |
61 | .claro .dijitComboButton .dijitArrowButton { | |
62 | border-left-width: 0; | |
63 | padding: 4px 2px 4px 2px; | |
64 | /* TODO: still needed? */ | |
65 | ||
66 | } | |
67 | /*arrow styles for down/up/left/right directions*/ | |
68 | .claro .dijitArrowButtonInner { | |
69 | width: 15px; | |
70 | height: 15px; | |
71 | margin: 0 auto; | |
72 | background-image: url("../form/images/buttonArrows.png"); | |
73 | background-repeat: no-repeat; | |
74 | background-position: -51px 53%; | |
75 | } | |
76 | .claro .dijitLeftArrowButton .dijitArrowButtonInner { | |
77 | background-position: -77px 53%; | |
78 | } | |
79 | .claro .dijitRightArrowButton .dijitArrowButtonInner { | |
80 | background-position: -26px 53%; | |
81 | } | |
82 | .claro .dijitUpArrowButton .dijitArrowButtonInner { | |
83 | background-position: 0 53%; | |
84 | } | |
85 | .claro .dijitDisabled .dijitArrowButtonInner { | |
86 | background-position: -151px 53%; | |
87 | } | |
88 | .claro .dijitDisabled .dijitLeftArrowButton .dijitArrowButtonInner { | |
89 | background-position: -177px 53%; | |
90 | } | |
91 | .claro .dijitDisabled .dijitRightArrowButton .dijitArrowButtonInner { | |
92 | background-position: -126px 53%; | |
93 | } | |
94 | .claro .dijitDisabled .dijitUpArrowButton .dijitArrowButtonInner { | |
95 | background-position: -100px 53%; | |
96 | } | |
97 | .claro .dijitButtonText { | |
98 | padding: 0 0.3em; | |
99 | text-align: center; | |
100 | } | |
101 | /* hover status */ | |
102 | .claro .dijitButtonHover .dijitButtonNode, | |
103 | .claro .dijitDropDownButtonHover .dijitButtonNode, | |
104 | .claro .dijitComboButton .dijitButtonNodeHover, | |
105 | .claro .dijitComboButton .dijitDownArrowButtonHover, | |
106 | .claro .dijitToggleButtonHover .dijitButtonNode { | |
107 | background-color: #86bdf2; | |
108 | color: #000000; | |
109 | -webkit-transition-duration: 0.2s; | |
110 | -moz-transition-duration: 0.2s; | |
111 | transition-duration: 0.2s; | |
112 | } | |
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; | |
126 | } | |
127 | /* disabled status */ | |
128 | .claro .dijitButtonDisabled, | |
129 | .claro .dijitDropDownButtonDisabled, | |
130 | .claro .dijitComboButtonDisabled, | |
131 | .claro .dijitToggleButtonDisabled { | |
132 | background-image: none; | |
133 | outline: none; | |
134 | } | |
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; | |
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); | |
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; | |
151 | } | |
152 | .claro .dijitComboButtonDisabled .dijitArrowButton { | |
153 | border-left-width: 0; | |
154 | } | |
155 | /* for ComboButton */ | |
156 | .claro table.dijitComboButton { | |
157 | border-collapse: separate; | |
158 | /* override dijit.css so that ComboBox rounded corners work */ | |
159 | ||
160 | } | |
161 | .claro .dijitComboButton .dijitStretch { | |
162 | -moz-border-radius: 4px 0 0 4px; | |
163 | border-radius: 4px 0 0 4px; | |
164 | } | |
165 | .claro .dijitComboButton .dijitArrowButton { | |
166 | -moz-border-radius: 0 4px 4px 0; | |
167 | border-radius: 0 4px 4px 0; | |
168 | } |