summaryrefslogtreecommitdiff
path: root/lib/viewers/odf/editor/dijit/themes/claro/Menu.less
blob: 9f4f860712321bff11b661a8ed5f5a0e60aa01a3 (plain)
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
/* 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 background-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;
	.standard-gradient;
}

.claro .dijitMenu {
	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 .dijitMenuItem {
	color: @text-color;
}
.claro .dijitMenuBar .dijitMenuItem {  
	padding: 6px 10px 7px;
	margin:-1px;
}
.claro .dijitMenuBar .dijitMenuItemHover,
.claro .dijitMenuBar .dijitMenuItemSelected {
    // on hover or selection of MenuBar item, add border and reduce padding to compensate
	border:solid 1px @hovered-border-color;
	padding: 5px 9px 6px;
}

/* 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 MenuItem or MenuBarItem */
.claro .dijitSelectMenu .dijitMenuItemHover td,
.claro .dijitSelectMenu .dijitMenuItemSelected td,
.claro .dijitMenuItemHover,
.claro .dijitMenuItemSelected {
    // note: seems like the selected MenuItem should use @pressed-background-color
    // and .active-gradient, but claro didn't to that
	background-color: @hovered-background-color;
	.standard-gradient;
}
.claro .dijitMenuItemActive {
    // todo: seems like the selected MenuItem should come here
    // todo: seems like should use @pressed-background-color
    .active-gradient;
}
.dj_ie .claro .dijitMenuActive .dijitMenuItemHover,
.dj_ie .claro .dijitMenuActive .dijitMenuItemSelected,
.dj_ie .claro .dijitMenuPassive .dijitMenuItemHover,
.dj_ie .claro .dijitMenuPassive .dijitMenuItemSelected {
    // Selectivity set to override ComboBox rules below.
    // If this rule isn't present, on IE6 hovering an item in the ComboBox drop down causes two
    // items to be highlighted (except when hovering the first item in the list)
	padding-top: 6px;
	padding-bottom: 5px;
	margin-top: -3px;
}

.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 .dijitSelectMenu .dijitMenuItem td,
.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 .dijitSelectMenu .dijitMenuItemSelected td,
.claro .dijitComboBoxMenu .dijitMenuItemSelected {
	color:@selected-text-color;
	border-color:@hovered-border-color;
	background-color:@hovered-background-color;
}
.claro .dijitSelectMenu .dijitMenuItemHover td,
.claro .dijitComboBoxMenu .dijitMenuItemHover {
	color: #000000;
	border-color: #769dc0;
	background-color: #abd6ff;
}
.claro .dijitComboBoxMenuActive .dijitMenuItemSelected {
	background-color: @select-dropdownitem-hovered-background-color;	/* TODO: why is this a different color than normal .dijitMenuItemSelected? */
}
.claro .dijitMenuPreviousButton, .claro .dijitMenuNextButton {
	font-style: italic;
}