1 // MenuItem |
|
2 |
|
3 .@{prefix}-menu-item { |
|
4 display: block; |
|
5 padding: 6px 15px 6px 12px; |
|
6 clear: both; |
|
7 font-weight: normal; |
|
8 line-height: 20px; |
|
9 color: @menuitem-text; |
|
10 white-space: nowrap; |
|
11 cursor: pointer; |
|
12 line-height: normal; |
|
13 border-left: 4px solid transparent; |
|
14 margin-bottom: 1px; |
|
15 } |
|
16 |
|
17 .@{prefix}-menu-item .@{prefix}-ico, .@{prefix}-menu-item .@{prefix}-text { |
|
18 color: @menuitem-text; |
|
19 } |
|
20 |
|
21 .@{prefix}-menu-item.@{prefix}-disabled .@{prefix}-text, .@{prefix}-menu-item.@{prefix}-disabled .@{prefix}-ico { |
|
22 color: mix(@menuitem-text, @menu-bg, 40%); |
|
23 } |
|
24 |
|
25 .@{prefix}-menu-item:hover .@{prefix}-text, .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-text, .@{prefix}-menu-item:focus .@{prefix}-text { |
|
26 color: @menuitem-text-inverse; |
|
27 } |
|
28 |
|
29 .@{prefix}-menu-item:hover .@{prefix}-ico, .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-ico, .@{prefix}-menu-item:focus .@{prefix}-ico { |
|
30 color: @menuitem-text-inverse; |
|
31 } |
|
32 |
|
33 .@{prefix}-menu-item.@{prefix}-disabled:hover { |
|
34 background: @menuitem-bg-disabled; |
|
35 } |
|
36 |
|
37 .@{prefix}-menu-shortcut { |
|
38 display: inline-block; |
|
39 color: mix(@menuitem-text, @menu-bg, 40%); |
|
40 } |
|
41 |
|
42 .@{prefix}-menu-shortcut { |
|
43 .inline-block(); |
|
44 padding: 0 15px 0 20px; |
|
45 } |
|
46 |
|
47 .@{prefix}-menu-item:hover .@{prefix}-menu-shortcut, .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-menu-shortcut, .@{prefix}-menu-item:focus .@{prefix}-menu-shortcut { |
|
48 color: @menuitem-text-inverse; |
|
49 } |
|
50 |
|
51 .@{prefix}-menu-item .@{prefix}-caret { |
|
52 margin-top: 4px; |
|
53 *margin-top: 3px; |
|
54 margin-right: 6px; |
|
55 border-top: 4px solid transparent; |
|
56 border-bottom: 4px solid transparent; |
|
57 border-left: 4px solid @menuitem-caret; |
|
58 } |
|
59 |
|
60 .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-caret, .@{prefix}-menu-item:focus .@{prefix}-caret, .@{prefix}-menu-item:hover .@{prefix}-caret { |
|
61 border-left-color: @menuitem-caret-selected; |
|
62 } |
|
63 |
|
64 .@{prefix}-menu-align .@{prefix}-menu-shortcut { |
|
65 *margin-top: -2px; |
|
66 } |
|
67 |
|
68 .@{prefix}-menu-align .@{prefix}-menu-shortcut, .@{prefix}-menu-align .@{prefix}-caret { |
|
69 position: absolute; |
|
70 right: 0; |
|
71 } |
|
72 |
|
73 .@{prefix}-menu-item.@{prefix}-active i { |
|
74 visibility: visible; |
|
75 } |
|
76 |
|
77 .@{prefix}-menu-item-normal.@{prefix}-active { |
|
78 background-color: @menuitem-bg-active; |
|
79 } |
|
80 |
|
81 .@{prefix}-menu-item-preview.@{prefix}-active { |
|
82 border-left: 5px solid @menuitem-preview-border-active; |
|
83 } |
|
84 |
|
85 .@{prefix}-menu-item-normal.@{prefix}-active .@{prefix}-text { |
|
86 color: @menuitem-text-active; |
|
87 } |
|
88 |
|
89 .@{prefix}-menu-item-normal.@{prefix}-active:hover .@{prefix}-text, .@{prefix}-menu-item-normal.@{prefix}-active:hover .@{prefix}-ico { |
|
90 color: @menuitem-text-inverse; |
|
91 } |
|
92 |
|
93 .@{prefix}-menu-item-normal.@{prefix}-active:focus .@{prefix}-text, .@{prefix}-menu-item-normal.@{prefix}-active:focus .@{prefix}-ico { |
|
94 color: @menuitem-text-inverse; |
|
95 } |
|
96 |
|
97 .@{prefix}-menu-item:hover, .@{prefix}-menu-item.@{prefix}-selected, .@{prefix}-menu-item:focus { |
|
98 text-decoration: none; |
|
99 color: @menuitem-text-inverse; |
|
100 .vertical-gradient(@menuitem-bg-selected, @menuitem-bg-selected-hlight); |
|
101 } |
|
102 |
|
103 div.@{prefix}-menu .@{prefix}-menu-item-sep, .@{prefix}-menu-item-sep:hover { |
|
104 border: 0; |
|
105 padding: 0; |
|
106 height: 1px; |
|
107 margin: 9px 1px; |
|
108 overflow: hidden; |
|
109 background: @menuitem-separator-top; |
|
110 border-bottom: 1px solid @menuitem-separator-bottom; |
|
111 cursor: default; |
|
112 filter: none; |
|
113 } |
|
114 |
|
115 // RTL |
|
116 |
|
117 .@{prefix}-menu.@{prefix}-rtl { |
|
118 direction: rtl; |
|
119 } |
|
120 |
|
121 .@{prefix}-rtl .@{prefix}-menu-item { |
|
122 text-align: right; |
|
123 direction: rtl; |
|
124 padding: 6px 12px 6px 15px; |
|
125 } |
|
126 |
|
127 .@{prefix}-menu-align.@{prefix}-rtl .@{prefix}-menu-shortcut, .@{prefix}-menu-align.@{prefix}-rtl .@{prefix}-caret { |
|
128 right: auto; |
|
129 left: 0; |
|
130 } |
|
131 |
|
132 .@{prefix}-rtl .@{prefix}-menu-item .@{prefix}-caret { |
|
133 margin-left: 6px; |
|
134 margin-right: 0; |
|
135 border-right: 4px solid @menuitem-caret; |
|
136 border-left: 0; |
|
137 } |
|
138 |
|
139 .@{prefix}-rtl .@{prefix}-menu-item.@{prefix}-selected .@{prefix}-caret, .@{prefix}-rtl .@{prefix}-menu-item:focus .@{prefix}-caret, .@{prefix}-rtl .@{prefix}-menu-item:hover .@{prefix}-caret { |
|
140 border-left-color: transparent; |
|
141 border-right-color: @menuitem-caret-selected; |
|
142 } |
|