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
|
/* 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
*/
.flat .dijitMenu {
background: #fff;
border: 1px solid #9e9e9e;
border-radius: 3px;
margin: 0;
-webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
}
.flat .dijitMenuTable,
.flat .dijitComboBoxMenu {
padding: 8px 0;
}
.flat .dijitComboBoxMenu {
margin-left: 0;
background-image: none;
}
.flat .dijitMenuTable {
/* this prevents jiggling upon hover of a menu item */
border-collapse: separate;
border-spacing: 0 0;
}
.flat .dijitMenuItem,
.flat .dijitMenuItem td {
line-height: 20px;
padding: 8px;
white-space: nowrap;
}
.flat .dijitMenuItemHover td,
.flat .dijitMenuItemHover {
color: #fff;
background-color: #2196f3;
}
.flat .dijitMenuItemActive td,
.flat .dijitMenuItemActive {
color: #fff;
background-color: #2196f3;
}
.flat .dijitMenuItemSelected td,
.flat .dijitMenuItemSelected {
color: #fff;
background-color: #2196f3;
}
.flat .dijitMenuItemDisabled {
color: #9e9e9e;
}
.flat .dijitMenuItemDisabled.dijitMenuItemSelected td,
.flat .dijitMenuItemDisabled.dijitMenuItemSelected {
color: #f2f2f2;
background: #6fbbf7;
}
.flat .dijitMenuSeparatorTop {
height: auto;
margin-top: 1px; /* prevents spacing above/below separator */
border-bottom: 1px solid #9e9e9e;
}
.flat .dijitMenuSeparatorBottom {
height: auto;
margin-bottom: 1px;
border-top: 1px solid transparent;
}
.flat td.dijitMenuItemIconCell {
padding: 4px;
margin: 0 0 0 4px;
text-align: center;
}
.flat .dijitMenuExpand {
font-family: "flat-icon";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.flat .dijitMenuExpand:before {
content: "\f001";
}
.flat .dijitCheckedMenuItemIconChar {
display: none;
}
.flat .dijitMenuPreviousButton,
.flat .dijitMenuNextButton {
font-style: italic;
}
.flat .dijitMenuBar {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.flat .dijitMenuBar .dijitMenuItem {
padding: 8px 12px;
margin: 0;
}
.flat .dijitMenuBar .dijitMenuItemHover {
color: #fff;
background-color: #2196f3;
}
.flat .dijitMenuBar .dijitMenuItemActive {
color: #fff;
background-color: #2196f3;
}
.flat .dijitMenuBar .dijitMenuItemSelected,
.flat .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected,
.flat .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected {
color: #fff;
background-color: #2196f3;
}
.flat .dijitMenuBar .dijitMenuItemDisabled.dijitMenuItemSelected {
color: #f2f2f2;
background: #6fbbf7;
}
.flat .dijitMenuPopup {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.flat .dijitMenuPopup .dijitMenu {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.flat .dijitMenuPopup .dijitMenuItem,
.flat .dijitMenuPopup .dijitMenuItem td {
padding: 8px;
}
|
