]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* Toolbar |
2 | * | |
3 | * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) | |
4 | * | |
5 | * 1. toolbar (default styling): | |
6 | * .dijitToolbar - styles for outer container | |
7 | * | |
8 | * 2. widget inside toolbar | |
9 | * .dijitToolbar .dijitButtonNode - Button widget | |
10 | * .dijitComboButton - ComboButton widget | |
11 | * .dijitDropDownButton - DropDownButton widget | |
12 | * .dijitToggleButton - ToggleButton widget | |
13 | * | |
14 | * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) | |
15 | * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget | |
16 | * | |
17 | * 4. actived widget inside toolbar (ie, mouse down on the widget inside) | |
18 | * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget | |
19 | */ | |
2f01fe57 | 20 | .claro .dijitToolbar { |
81bea17a AD |
21 | border-bottom: 1px solid #b5bcc7; |
22 | background-color: #efefef; | |
23 | background-image: url("images/commonHighlight.png"); | |
24 | background-position: 0 0; | |
25 | background-repeat: repeat-x; | |
26 | padding: 2px 0 2px 4px; | |
27 | zoom: 1; | |
2f01fe57 AD |
28 | } |
29 | .claro .dijitToolbar label { | |
81bea17a | 30 | padding: 0 3px 0 6px; |
2f01fe57 | 31 | } |
1354d172 AD |
32 | /** override claro/form/Button.css, and also ComboBox down arrow **/ |
33 | .claro .dijitToolbar .dijitButton .dijitButtonNode, | |
34 | .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, | |
35 | .claro .dijitToolbar .dijitComboButton .dijitButtonNode, | |
36 | .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, | |
37 | .claro .dijitToolbar .dijitComboBox .dijitButtonNode { | |
81bea17a AD |
38 | border-width: 0; |
39 | /* on hover/active, border-->1px, padding-->1px */ | |
40 | ||
41 | padding: 2px; | |
42 | -moz-border-radius: 2px; | |
43 | border-radius: 2px; | |
44 | -webkit-box-shadow: none; | |
45 | -moz-box-shadow: none; | |
46 | box-shadow: none; | |
47 | -webkit-transition-property: background-color; | |
48 | -moz-transition-property: background-color; | |
49 | transition-property: background-color; | |
50 | -webkit-transition-duration: 0.3s, 0.35s; | |
51 | -moz-transition-duration: 0.3s, 0.35s; | |
52 | transition-duration: 0.3s, 0.35s; | |
53 | background-image: url("images/commonHighlight.png"); | |
54 | background-position: 0 -30px; | |
55 | background-repeat: repeat-x; | |
56 | background-color: rgba(171, 214, 255, 0); | |
2f01fe57 | 57 | } |
1354d172 AD |
58 | .dj_ie .claro .dijitToolbar .dijitButton .dijitButtonNode, |
59 | .dj_ie .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, | |
60 | .dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNode, | |
61 | .dj_ie .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, | |
62 | .dj_ie .claro .dijitToolbar .dijitComboBox .dijitButtonNode { | |
81bea17a AD |
63 | background-color: transparent; |
64 | /* for IE, which doesn't understand rgba(...) */ | |
65 | ||
2f01fe57 | 66 | } |
1354d172 AD |
67 | .dj_ie6 .claro .dijitToolbar .dijitButton .dijitButtonNode, |
68 | .dj_ie6 .claro .dijitToolbar .dijitDropDownButton .dijitButtonNode, | |
69 | .dj_ie6 .claro .dijitToolbar .dijitComboButton .dijitButtonNode, | |
70 | .dj_ie6 .claro .dijitToolbar .dijitToggleButton .dijitButtonNode, | |
71 | .dj_ie6 .claro .dijitToolbar .dijitComboBox .dijitButtonNode { | |
81bea17a | 72 | background: none; |
1354d172 | 73 | /* because background-color: transparent above doesn't work on IE*/ |
81bea17a | 74 | |
2f01fe57 | 75 | } |
1354d172 AD |
76 | /* hover status */ |
77 | .dj_ie .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, | |
78 | .dj_ie .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, | |
79 | .dj_ie .claro .dijitToolbar .dijitComboButton .dijitButtonNodeHover, | |
80 | .dj_ie .claro .dijitToolbar .dijitComboButton .dijitDownArrowButtonHover, | |
81 | .dj_ie .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode { | |
82 | /* button should still turn blue on hover, so need to override .dj_ie rules above */ | |
83 | ||
84 | background-color: #abd6ff; | |
85 | } | |
86 | /* active status */ | |
87 | .dj_ie .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, | |
88 | .dj_ie .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, | |
89 | .dj_ie .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, | |
90 | .dj_ie .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { | |
91 | /* button should still turn blue on press, so need to override .dj_ie rules above */ | |
92 | ||
93 | background-color: #abd6ff; | |
94 | } | |
81bea17a AD |
95 | .claro .dijitToolbar .dijitComboButton .dijitStretch { |
96 | /* no rounded border on side adjacent to arrow */ | |
97 | ||
98 | -moz-border-radius: 2px 0 0 2px; | |
99 | border-radius: 2px 0 0 2px; | |
2f01fe57 | 100 | } |
81bea17a AD |
101 | .claro .dijitToolbar .dijitComboButton .dijitArrowButton { |
102 | /* no rounded border on side adjacent to button */ | |
103 | ||
104 | -moz-border-radius: 0 2px 2px 0; | |
105 | border-radius: 0 2px 2px 0; | |
106 | } | |
107 | .claro .dijitToolbar .dijitComboBox .dijitButtonNode { | |
108 | padding: 0; | |
2f01fe57 | 109 | } |
81bea17a | 110 | /* hover status */ |
2f01fe57 AD |
111 | .claro .dijitToolbar .dijitButtonHover .dijitButtonNode, |
112 | .claro .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, | |
81bea17a AD |
113 | .claro .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, |
114 | .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode { | |
115 | background-position: 0 0; | |
116 | border-width: 1px; | |
117 | background-color: #abd6ff; | |
118 | padding: 1px; | |
119 | } | |
120 | .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { | |
121 | background-position: 0 0; | |
1354d172 | 122 | background-color: #f3ffff; |
81bea17a AD |
123 | } |
124 | .claro .dijitToolbar .dijitComboButtonHover .dijitButtonNodeHover, .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButtonHover { | |
125 | background-color: #abd6ff; | |
126 | } | |
127 | /* active status */ | |
128 | .claro .dijitToolbar .dijitButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { | |
129 | border-width: 1px; | |
1354d172 | 130 | background-color: #7dbdfa; |
81bea17a AD |
131 | background-position: 0 -177px; |
132 | padding: 1px; | |
2f01fe57 AD |
133 | } |
134 | .claro .dijitToolbar .dijitComboButtonActive { | |
81bea17a AD |
135 | -webkit-transition-duration: 0.2s; |
136 | -moz-transition-duration: 0.2s; | |
137 | transition-duration: 0.2s; | |
138 | border-width: 1px; | |
139 | padding: 0; | |
2f01fe57 | 140 | } |
81bea17a | 141 | .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNode, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { |
1354d172 | 142 | background-color: #f3ffff; |
81bea17a AD |
143 | background-position: 0 -177px; |
144 | padding: 2px; | |
2f01fe57 | 145 | } |
81bea17a | 146 | .claro .dijitToolbar .dijitComboButtonActive .dijitButtonNodeActive { |
1354d172 | 147 | background-color: #7dbdfa; |
2f01fe57 | 148 | } |
81bea17a | 149 | .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButtonActive { |
1354d172 | 150 | background-color: #7dbdfa; |
2f01fe57 | 151 | } |
81bea17a AD |
152 | /* Avoid double border between button and arrow */ |
153 | .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton, .claro .dijitToolbar .dijitComboButtonActive .dijitDownArrowButton { | |
154 | border-left-width: 0; | |
2f01fe57 | 155 | } |
81bea17a AD |
156 | .claro .dijitToolbar .dijitComboButtonHover .dijitDownArrowButton { |
157 | padding-left: 2px; | |
158 | /* since there's no left border, don't reduce from 2px --> 1px */ | |
159 | ||
2f01fe57 | 160 | } |
81bea17a | 161 | /* toggle button checked status */ |
2f01fe57 | 162 | .claro .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { |
81bea17a AD |
163 | margin: 0; |
164 | /* remove margin and add a border */ | |
165 | ||
166 | border-width: 1px; | |
167 | border-style: solid; | |
168 | background-image: none; | |
1354d172 | 169 | border-color: #759dc0; |
81bea17a AD |
170 | background-color: #ffffff; |
171 | padding: 1px; | |
2f01fe57 | 172 | } |
81bea17a AD |
173 | .dj_ie6 .claro .dijitToolbar { |
174 | background-image: none; | |
2f01fe57 AD |
175 | } |
176 | .claro .dijitToolbarSeparator { | |
81bea17a AD |
177 | /* separator icon in the editor sprite */ |
178 | ||
1354d172 | 179 | background: url("../../icons/images/editorIconsEnabled.png"); |
2f01fe57 | 180 | } |
81bea17a | 181 | /* Toolbar inside of disabled Editor */ |
2f01fe57 | 182 | .claro .dijitDisabled .dijitToolbar { |
81bea17a AD |
183 | background: none; |
184 | background-color: #efefef; | |
185 | border-bottom: 1px solid #d3d3d3; | |
186 | } | |
187 | .claro .dijitToolbar .dijitComboBoxDisabled .dijitArrowButtonInner { | |
188 | background-position: 0 50%; | |
2f01fe57 | 189 | } |