]> git.wh0rd.org - tt-rss.git/blame - lib/dijit/themes/claro/Toolbar.css
update dojo to 1.7.3
[tt-rss.git] / lib / dijit / themes / claro / Toolbar.css
CommitLineData
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}