1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
/* Menu
There are three areas of styling for the Menu:
1. The menu
There are three types of menus:
i)Context Menu
ii)Drop down Menu
iii) Navigation Menu
All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
.dijitMenuTable - for padding - also affects Select widget
2. The menu bar
.dijitMenuBar - for border, margins, padding, background-color of the menu bar
.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem)
3. Menu items - items in the menu.
.dijitMenuItem - for color
.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
.dijitMenuItemActive - for bacgkround-color of an active (mousedown) menu item
td.dijitMenuItemIconCell - for padding around a menu item's icon
td.dijitMenuItemLabel - for padding around a menu item's label
.dijitMenuSeparatorTop - for border, top border, of the separator
.dijitMenuSeparatorBottom - for bottom margin of the separator
Styles specific to ComboBox and FilteringSelect widgets:
.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
*/
@import "variables";
.claro .dijitMenuBar {
border: 1px solid @border-color;
margin: 0;
padding: 0;
background-color: @bar-background-color;
background-image: url(@image-common-highlight);
background-position:0 0;
background-repeat:repeat-x;
}
.dj_ie6 .claro .dijitMenuBar {
background-image:none;
}
.claro .dijitMenu {
background-repeat:repeat-y;
background-color:@menu-background-color;
border: 1px solid @popup-border-color;
/* so adjoining borders of MenuBar/ComboBox and Menu overlap, avoiding double border */
margin: -1px 0;
}
.dj_ie6 .claro .dijitMenu {
margin: 0; /* above -1px makes top/bottom borders disappear on IE6 */
}
.claro .dijitMenuBar .dijitMenuItem {
padding: 6px 10px 7px;
background-position:0 100px;
margin:-1px;
}
.claro .dijitMenuItem {
background-image: url(@image-menu-highlight);
background-position:0 -40px;
background-repeat:repeat-x;
color: @text-color;
}
/* this prevents jiggling upon hover of a menu item */
.claro .dijitMenuTable {
border-collapse:separate;
border-spacing:0 0;
padding:0;
}
.claro .dijitMenuItem td{
padding:1px;
}
/* hover over a MenuBarItem */
.claro .dijitMenuPassive .dijitMenuItemHover,
.claro .dijitMenuPassive .dijitMenuItemSelected {
background-color: @hovered-background-color;
border:solid 1px @hovered-border-color;
background-position:0 0;
color:@text-color;
padding: 5px 9px 6px;
}
.claro .dijitMenuPassive .dijitMenuItemActive{
background-position:0 -177px;
}
.dj_ie6 .claro .dijitMenuItem,
.dj_ie6 .claro .dijitMenuPassive .dijitMenuItem {
background-image: none;
}
/* MenuBarItem that has been selected and menu drops down from it */
.claro .dijitMenuActive .dijitMenuItemHover,
.claro .dijitMenuActive .dijitMenuItemSelected {
border:solid 1px @hovered-border-color;
padding: 5px 9px 6px;
background-color: @hovered-background-color;
background-position:0 0;
color:@hovered-text-color;
}
.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
padding-top: 6px;
padding-bottom: 5px;
margin-top: -3px;
}
.claro .dijitMenuActive .dijitMenuItemActive{
background-color: @pressed-background-color;
background-position:0 -177px;
}
.claro .dijitMenuItemActive {
background-position:0 -177px;
}
.claro td.dijitMenuItemIconCell {
padding: 2px;
margin: 0 0 0 4px;
}
.claro td.dijitMenuItemLabel {
padding-top: 5px;
padding-bottom: 5px;
}
.claro .dijitMenuExpand {
width: 7px;
height: 7px;
background-image: url(@image-arrow-sprite);
background-position: -14px 0;
margin-right:3px;
}
.claro .dijitMenuItemDisabled .dijitMenuItemIconCell {
opacity:1;
}
.claro .dijitMenuSeparatorTop {
height: auto;
margin-top:1px; /* prevents spacing above/below separator */
border-bottom: 1px solid @border-color
}
.claro .dijitMenuSeparatorBottom{
height: auto;
margin-bottom:1px;
}
/* the checked menu item */
.claro .dijitCheckedMenuItemIconChar {
display: none;
}
.claro .dijitCheckedMenuItemIcon {
background-image: url(@image-form-checkbox-and-radios);
background-repeat:no-repeat;
background-position: -15px 50%;
width:15px;
height:16px;
}
.dj_ie6 .claro .dijitCheckedMenuItemIcon {
background-image: url(@image-form-checkbox-and-radios-ie6);
}
.claro .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
background-position: 0 50%;
}
/*ComboBox Menu*/
.claro .dijitComboBoxMenu {
margin-left:0;
background-image: none;
}
.claro .dijitComboBoxMenu .dijitMenuItem {
padding: @textbox-padding; // Make drop down menu text line up with text in <input>.
border-width:1px 0 1px 0;
border-style:solid;
border-color: @select-dropdownitem-background-color;
}
.claro .dijitComboBoxMenu .dijitMenuItemSelected {
color:@selected-text-color;
border-color:@hovered-border-color;
background-color:@hovered-background-color;
}
.claro .dijitComboBoxMenu .dijitMenuItemHover {
color: #000000;
border-color: #769dc0;
background-color: #abd6ff;
background-position: 0 0;
}
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
background-position:0 -177px;
background-color: @select-dropdownitem-hovered-background-color; /* TODO: why is this a different color than normal .dijitMenuItemSelected? */
}
.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
font-style: italic;
}
|
