]>
Commit | Line | Data |
---|---|---|
81bea17a AD |
1 | /* Menu |
2 | ||
3 | There are three areas of styling for the Menu: | |
4 | ||
5 | 1. The menu | |
6 | There are three types of menus: | |
f0cfe83e AD |
7 | i) Context Menu |
8 | ii) Drop down Menu | |
81bea17a AD |
9 | iii) Navigation Menu |
10 | All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border | |
11 | .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect | |
12 | .dijitMenuTable - for padding - also affects Select widget | |
6887a0f5 | 13 | |
81bea17a AD |
14 | 2. The menu bar |
15 | .dijitMenuBar - for border, margins, padding, background-color of the menu bar | |
16 | .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) | |
17 | ||
18 | 3. Menu items - items in the menu. | |
19 | .dijitMenuItem - for color | |
20 | .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected | |
f0cfe83e | 21 | .dijitMenuItemActive - for background-color of an active (mousedown) menu item |
81bea17a AD |
22 | td.dijitMenuItemIconCell - for padding around a menu item's icon |
23 | td.dijitMenuItemLabel - for padding around a menu item's label | |
24 | .dijitMenuSeparatorTop - for border, top border, of the separator | |
25 | .dijitMenuSeparatorBottom - for bottom margin of the separator | |
26 | ||
27 | Styles specific to ComboBox and FilteringSelect widgets: | |
28 | .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu | |
29 | .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu | |
30 | ||
31 | */ | |
32 | ||
33 | @import "variables"; | |
34 | ||
35 | .claro .dijitMenuBar { | |
36 | border: 1px solid @border-color; | |
37 | margin: 0; | |
38 | padding: 0; | |
39 | background-color: @bar-background-color; | |
f0cfe83e | 40 | .standard-gradient; |
81bea17a | 41 | } |
f0cfe83e | 42 | |
81bea17a | 43 | .claro .dijitMenu { |
81bea17a AD |
44 | background-color:@menu-background-color; |
45 | border: 1px solid @popup-border-color; | |
81bea17a | 46 | } |
f0cfe83e AD |
47 | |
48 | .claro .dijitMenuItem { | |
49 | color: @text-color; | |
50 | } | |
6887a0f5 | 51 | .claro .dijitMenuBar .dijitMenuItem { |
81bea17a | 52 | padding: 6px 10px 7px; |
81bea17a | 53 | margin:-1px; |
f0cfe83e AD |
54 | } |
55 | .claro .dijitMenuBar .dijitMenuItemHover, | |
56 | .claro .dijitMenuBar .dijitMenuItemSelected { | |
6887a0f5 | 57 | // on hover or selection of MenuBar item, add border and reduce padding to compensate |
f0cfe83e AD |
58 | border:solid 1px @hovered-border-color; |
59 | padding: 5px 9px 6px; | |
81bea17a AD |
60 | } |
61 | ||
62 | /* this prevents jiggling upon hover of a menu item */ | |
63 | .claro .dijitMenuTable { | |
64 | border-collapse:separate; | |
65 | border-spacing:0 0; | |
66 | padding:0; | |
67 | } | |
6887a0f5 AK |
68 | |
69 | .claro .dijitMenu .dijitMenuItem td, | |
70 | .claro .dijitComboBoxMenu .dijitMenuItem { | |
71 | padding: @textbox-padding; // Make drop down menu text line up with text in <input>. | |
72 | border-width:1px 0 1px 0; | |
73 | border-style:solid; | |
74 | border-color: @select-dropdownitem-background-color; | |
81bea17a | 75 | } |
6887a0f5 | 76 | |
f0cfe83e | 77 | /* hover over a MenuItem or MenuBarItem */ |
6887a0f5 AK |
78 | .claro .dijitMenu .dijitMenuItemHover td, |
79 | .claro .dijitMenu .dijitMenuItemSelected td, | |
f0cfe83e | 80 | .claro .dijitMenuItemHover, |
6887a0f5 | 81 | .claro .dijitComboBoxMenu .dijitMenuItemHover, |
f0cfe83e | 82 | .claro .dijitMenuItemSelected { |
6887a0f5 AK |
83 | // note: seems like the selected MenuItem should use @pressed-background-color |
84 | // and .active-gradient, but claro didn't to that | |
85 | border-color: @hovered-border-color; | |
81bea17a | 86 | background-color: @hovered-background-color; |
f0cfe83e | 87 | .standard-gradient; |
81bea17a | 88 | } |
6887a0f5 | 89 | |
f0cfe83e | 90 | .claro .dijitMenuItemActive { |
6887a0f5 AK |
91 | // todo: seems like the selected MenuItem should come here |
92 | // todo: seems like should use @pressed-background-color | |
93 | .active-gradient; | |
81bea17a AD |
94 | } |
95 | .dj_ie .claro .dijitMenuActive .dijitMenuItemHover, | |
96 | .dj_ie .claro .dijitMenuActive .dijitMenuItemSelected, | |
97 | .dj_ie .claro .dijitMenuPassive .dijitMenuItemHover, | |
98 | .dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected { | |
6887a0f5 AK |
99 | // Selectivity set to override ComboBox rules below. |
100 | // If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two | |
101 | // items to be highlighted (except when hovering the first item in the list) | |
81bea17a AD |
102 | padding-top: 6px; |
103 | padding-bottom: 5px; | |
104 | margin-top: -3px; | |
105 | } | |
f0cfe83e | 106 | |
81bea17a | 107 | .claro td.dijitMenuItemIconCell { |
f0cfe83e AD |
108 | padding: 2px; |
109 | margin: 0 0 0 4px; | |
81bea17a AD |
110 | } |
111 | .claro td.dijitMenuItemLabel { | |
112 | padding-top: 5px; | |
113 | padding-bottom: 5px; | |
114 | } | |
115 | .claro .dijitMenuExpand { | |
116 | width: 7px; | |
117 | height: 7px; | |
1354d172 | 118 | background-image: url(@image-arrow-sprite); |
81bea17a AD |
119 | background-position: -14px 0; |
120 | margin-right:3px; | |
6887a0f5 | 121 | margin-bottom: 4px; |
81bea17a AD |
122 | } |
123 | .claro .dijitMenuSeparatorTop { | |
124 | height: auto; | |
125 | margin-top:1px; /* prevents spacing above/below separator */ | |
126 | border-bottom: 1px solid @border-color | |
127 | } | |
128 | .claro .dijitMenuSeparatorBottom{ | |
129 | height: auto; | |
130 | margin-bottom:1px; | |
131 | } | |
132 | /* the checked menu item */ | |
6887a0f5 AK |
133 | .claro .dijitCheckedMenuItem .dijitMenuItemIcon, |
134 | .claro .dijitRadioMenuItem .dijitMenuItemIcon { | |
1354d172 | 135 | background-image: url(@image-form-checkbox-and-radios); |
81bea17a | 136 | background-repeat:no-repeat; |
6887a0f5 | 137 | background-position: -15px 50%; /* unchecked checkbox */ |
81bea17a AD |
138 | width:15px; |
139 | height:16px; | |
140 | } | |
6887a0f5 AK |
141 | .dj_ie6 .claro .dijitCheckedMenuItem .dijitMenuItemIcon, |
142 | .dj_ie6 .claro .dijitRadioMenuItem .dijitMenuItemIcon { | |
1354d172 | 143 | background-image: url(@image-form-checkbox-and-radios-ie6); |
81bea17a AD |
144 | } |
145 | .claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { | |
6887a0f5 AK |
146 | background-position: 0 50%; /* checked checkbox */ |
147 | } | |
148 | .claro .dijitRadioMenuItem .dijitMenuItemIcon { | |
149 | background-position: -105px 50%; /* unfilled circle */ | |
150 | } | |
151 | .claro .dijitRadioMenuItemChecked .dijitMenuItemIcon { | |
152 | background-position: -90px 50%; /* filled circle */ | |
81bea17a AD |
153 | } |
154 | ||
155 | /*ComboBox Menu*/ | |
156 | .claro .dijitComboBoxMenu { | |
157 | margin-left:0; | |
158 | background-image: none; | |
159 | } | |
160 | ||
6887a0f5 | 161 | .claro .dijitMenu .dijitMenuItemSelected td, |
81bea17a | 162 | .claro .dijitComboBoxMenu .dijitMenuItemSelected { |
6887a0f5 AK |
163 | // TODO: combine with above rules for selected items? |
164 | // But the selected item in a Select drop down is different than when MenuBarItem "File" is highlighted | |
165 | // because the user is on the file menu? | |
81bea17a AD |
166 | color:@selected-text-color; |
167 | border-color:@hovered-border-color; | |
168 | background-color:@hovered-background-color; | |
169 | } | |
6887a0f5 | 170 | |
81bea17a | 171 | .claro .dijitComboBoxMenuActive .dijitMenuItemSelected { |
81bea17a AD |
172 | background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */ |
173 | } | |
174 | .claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton { | |
175 | font-style: italic; | |
176 | } |