1 /* CiviCRM navigation menu stylesheet */
9 background-color: $menubarColor
;
24 text-decoration: none
;
28 #civicrm-menu li a
[href
="#"] {
31 #civicrm-menu li li a
{
32 padding: 6px 36px 6px 10px;
34 #civicrm-menu li
.crm-menu-border-bottom
+ li
,
35 #civicrm-menu li
+ li
.crm-menu-border-top
{
36 border-top: 1px solid
#bbb;
38 #civicrm-menu li
a:focus
,
39 #civicrm-menu li
a:hover
,
40 #civicrm-menu li a
.highlighted
{
41 text-decoration: none
;
42 background-color: $highlightColor
;
43 color: $highlightTextColor
;
45 #civicrm-menu li li
.sub-arrow:before
{
47 font-family: 'FontAwesome';
52 #crm-menubar-state:checked
~ .crm-menubar-toggle-btn
.crm-menubar-toggle-btn-icon
{
54 background: transparent
;
56 #crm-menubar-state:checked
~ .crm-menubar-toggle-btn
.crm-menubar-toggle-btn-icon:before
{
58 -webkit-transform: rotate
(-45deg);
59 transform: rotate
(-45deg);
61 #crm-menubar-state:checked
~ .crm-menubar-toggle-btn
.crm-menubar-toggle-btn-icon:after
{
63 -webkit-transform: rotate
(45deg);
64 transform: rotate
(45deg);
66 /* hide menu state checkbox (keep it visible to screen readers) */
67 #civicrm-menu-nav #crm-menubar-state
{
75 clip: rect
(1px,1px,1px,1px);
77 #civicrm-menu-nav .crm-menubar-toggle-btn
{
79 display: inline-block
;
87 -webkit-tap-highlight-color: rgba
(0,0,0,0);
88 background-color: #1b1b1b;
93 #civicrm-menu-nav .crm-menubar-toggle-btn-icon
,
94 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:before
,
95 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:after
{
102 -webkit-transition: all
0.25s;
103 transition: all
0.25s;
105 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:before
{
110 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:after
{
118 padding: 1px 0 1px 2px;
119 background-color: transparent
!important
;
121 #civicrm-menu #crm-qsearch
> a
{
122 padding: 2px 0 0 2px;
125 input#crm-qsearch-input
{
126 box-sizing: border-box
;
127 background-color: #eaeaea;
129 border: 1px solid
#ccc;
132 height: calc
($menubarHeight
- 10px);
134 transition: width
.5s .05s, background-color
.3s .05s;
137 a
.highlighted #crm-qsearch-input
,
138 #crm-qsearch-input:focus
,
139 #crm-qsearch-input.has-user-input
{
140 background-color: white
;
143 input#
crm-qsearch-input:-ms-input-placeholder
{
144 font-family: 'FontAwesome', sans-serif
;
146 input#
crm-qsearch-input::-webkit-input-placeholder
{
147 font-family: 'FontAwesome', sans-serif
;
149 input#
crm-qsearch-input::-moz-placeholder
{
150 font-family: 'FontAwesome', sans-serif
;
152 input#
crm-qsearch-input::placeholder
{
153 font-family: 'FontAwesome', sans-serif
;
156 ul
.crm-quickSearch-results
{
159 ul
.crm-quickSearch-results
.ui-state-disabled
{
163 #civicrm-menu-nav .crm-logo-sm
{
164 background: url
($resourceBase
/i
/logo_sm
.png
) no-repeat
;
165 display: inline-block
;
171 #civicrm-menu #crm-menubar-toggle-position
{
174 #civicrm-menu #crm-menubar-toggle-position a i
{
176 border-top: 2px solid $textColor
;
180 body
.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i
{
181 transform: rotate
(180deg);
184 /* Drilldown menu item finder */
185 #civicrm-menu [data-name
=MenubarDrillDown
] > a
{
189 #crm-menubar-drilldown {
191 background-color: #eee;
193 #crm-menubar-drilldown:focus
{
194 background-color: white
;
196 #crm-menubar-drilldown + .sub-arrow:before
{
200 @media (min-width: $breakMin
) {
202 /* Switch to desktop layout
203 -----------------------------------------------
204 These transform the menu tree from
205 collapsible to desktop (navbar + dropdowns)
206 -----------------------------------------------*/
207 /* start... (it's not recommended editing these rules) */
215 #civicrm-menu.sm-rtl li
{
219 #civicrm-menu.sm-rtl ul li
,
220 #civicrm-menu.sm-vertical li
{
227 #civicrm-menu.sm-vertical a
{
230 #civicrm-menu .sm-nowrap
> li
> a
,
231 #civicrm-menu .sm-nowrap
> li
> :not
(ul
) a
{
236 /* hide the button in desktop view */
237 #civicrm-menu-nav .crm-menubar-toggle-btn
{
239 top: -99999px; /* do not edit this without updating the isMobile() function in crm.menubar.js */
243 border-bottom: 1px solid
#ccc;
246 body
.crm-menubar-below-cms-menu
> #civicrm-menu-nav #civicrm-menu
{
251 box-shadow: 0px 0px 2px 0 rgba
(0,0,0,0.3);
255 background-color: $menuItemColor
;
259 #civicrm-menu > li
> a
{
260 height: $menubarHeight
;
264 #civicrm-menu > li
> a
> * {
265 vertical-align: middle
;
268 /* Pseudo-element to ensure vertical alignment */
269 #civicrm-menu > li:not
(#crm-qsearch
) > a:after
{
271 display: inline-block
;
273 vertical-align: middle
;
276 #civicrm-menu > li
> a
.highlighted
{
280 body
.crm-menubar-over-cms-menu #civicrm-menu
,
281 body
.crm-menubar-below-cms-menu #civicrm-menu
{
286 body
.crm-menubar-over-cms-menu #civicrm-menu
{
290 body
.crm-menubar-above-crm-container #civicrm-menu
{
294 body
.crm-menubar-hidden #civicrm-menu
{
299 @media (max-width: $breakMax
) {
300 /* hide the menu in mobile view */
301 #crm-menubar-state:not
(:checked
) ~ #civicrm-menu
{
306 background-color: #1b1b1b;
309 background-color: #444;
311 #civicrm-menu ul ul
{
312 background-color: #555;
314 #civicrm-menu ul ul ul
{
315 background-color: #666;
325 #civicrm-menu li
a:focus
,
326 #civicrm-menu li
a:hover
,
327 #civicrm-menu li a
.highlighted
{
328 background-color: #676767;
331 #civicrm-menu li
.sub-arrow:before
,
332 #civicrm-menu li li
.sub-arrow:before
{
334 font-family: 'FontAwesome';
339 #civicrm-menu li a
.highlighted
.sub-arrow:before
{
344 background: transparent
;
345 pointer-events: none
;
352 #civicrm-menu-nav > * {
353 pointer-events: auto
;
355 #civicrm-menu-nav .crm-menubar-toggle-btn
{
360 #civicrm-menu-nav .crm-menubar-toggle-btn span
.crm-menu-logo
{
366 background: url
($resourceBase
/i
/logo_lg
.png
) no-repeat
;
367 background-size: 18px;
373 #crm-qsearch .sub-arrow
{
377 #civicrm-menu li
[data-name
="Hide Menu"] {
382 width: 14em !important
;
385 #crm-menubar-toggle-position {
389 /* Make sure we can click overlapped submenus in responsive mode */
390 #civicrm-menu li ul li
{
392 background-color: inherit
;