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:not
(:last-child
) {
35 border-bottom: 1px solid
#bbb;
37 #civicrm-menu li:not
(.crm-menu-border-bottom
) + li
.crm-menu-border-top
{
38 border-top: 1px solid
#bbb;
40 #civicrm-menu li
a:focus
,
41 #civicrm-menu li
a:hover
,
42 #civicrm-menu li a
.highlighted
{
43 text-decoration: none
;
44 background-color: $highlightColor
;
45 color: $highlightTextColor
;
47 #civicrm-menu li li
.sub-arrow:before
{
49 font-family: 'FontAwesome';
54 #crm-menubar-state:checked
~ .crm-menubar-toggle-btn
.crm-menubar-toggle-btn-icon
{
56 background: transparent
;
58 #crm-menubar-state:checked
~ .crm-menubar-toggle-btn
.crm-menubar-toggle-btn-icon:before
{
60 -webkit-transform: rotate
(-45deg);
61 transform: rotate
(-45deg);
63 #crm-menubar-state:checked
~ .crm-menubar-toggle-btn
.crm-menubar-toggle-btn-icon:after
{
65 -webkit-transform: rotate
(45deg);
66 transform: rotate
(45deg);
68 /* hide menu state checkbox (keep it visible to screen readers) */
69 #civicrm-menu-nav #crm-menubar-state
{
77 clip: rect
(1px,1px,1px,1px);
79 #civicrm-menu-nav .crm-menubar-toggle-btn
{
81 display: inline-block
;
89 -webkit-tap-highlight-color: rgba
(0,0,0,0);
90 background-color: #1b1b1b;
95 #civicrm-menu-nav .crm-menubar-toggle-btn-icon
,
96 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:before
,
97 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:after
{
104 -webkit-transition: all
0.25s;
105 transition: all
0.25s;
107 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:before
{
112 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:after
{
120 padding: 1px 0 1px 2px;
121 background-color: transparent
!important
;
123 #civicrm-menu #crm-qsearch
> a
{
124 padding: 2px 0 0 2px;
127 input#crm-qsearch-input
{
128 box-sizing: border-box
;
129 background-color: #eaeaea;
131 border: 1px solid
#ccc;
134 height: calc
($menubarHeight
- 10px);
136 transition: width
.5s .05s, background-color
.3s .05s;
139 a
.highlighted #crm-qsearch-input
,
140 #crm-qsearch-input:focus
,
141 #crm-qsearch-input.has-user-input
{
142 background-color: white
;
145 input#
crm-qsearch-input:-ms-input-placeholder
{
146 font-family: 'FontAwesome', sans-serif
;
148 input#
crm-qsearch-input::-webkit-input-placeholder
{
149 font-family: 'FontAwesome', sans-serif
;
151 input#
crm-qsearch-input::-moz-placeholder
{
152 font-family: 'FontAwesome', sans-serif
;
154 input#
crm-qsearch-input::placeholder
{
155 font-family: 'FontAwesome', sans-serif
;
158 ul
.crm-quickSearch-results
{
161 ul
.crm-quickSearch-results
.ui-state-disabled
{
165 #civicrm-menu-nav .crm-logo-sm
{
166 background: url
($resourceBase
/i
/logo_sm
.png
) no-repeat
;
167 display: inline-block
;
173 #civicrm-menu #crm-menubar-toggle-position
{
176 #civicrm-menu #crm-menubar-toggle-position a i
{
178 border-top: 2px solid $textColor
;
182 body
.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i
{
183 transform: rotate
(180deg);
186 /* Drilldown menu item finder */
187 #civicrm-menu [data-name
=MenubarDrillDown
] > a
{
191 #crm-menubar-drilldown {
193 background-color: #eee;
195 #crm-menubar-drilldown:focus
{
196 background-color: white
;
198 #crm-menubar-drilldown + .sub-arrow:before
{
202 @media (min-width: $breakMin
) {
204 /* Switch to desktop layout
205 -----------------------------------------------
206 These transform the menu tree from
207 collapsible to desktop (navbar + dropdowns)
208 -----------------------------------------------*/
209 /* start... (it's not recommended editing these rules) */
210 #civicrm-menu ul
{position:absolute
;width:12em;}
211 #civicrm-menu li
{float:left
;}
212 #civicrm-menu.sm-rtl li
{float:right
;}
213 #civicrm-menu ul li
,#civicrm-menu
.sm-rtl ul li
,#civicrm-menu
.sm-vertical li
{float:none
;}
214 #civicrm-menu a
{white-space:nowrap
;}
215 #civicrm-menu ul a
,#civicrm-menu
.sm-vertical a
{white-space:normal
;}
216 #civicrm-menu .sm-nowrap
> li
> a
,#civicrm-menu
.sm-nowrap
> li
> :not
(ul
) a
{white-space:nowrap
;}
219 /* hide the button in desktop view */
220 #civicrm-menu-nav .crm-menubar-toggle-btn
{
222 top: -99999px; /* do not edit this without updating the isMobile() function in crm.menubar.js */
226 border-bottom: 1px solid
#ccc;
229 body
.crm-menubar-below-cms-menu
> #civicrm-menu-nav #civicrm-menu
{
234 box-shadow: 0px 0px 2px 0 rgba
(0,0,0,0.3);
238 background-color: $menuItemColor
;
242 #civicrm-menu > li
> a
{
243 height: $menubarHeight
;
247 #civicrm-menu > li
> a
> * {
248 vertical-align: middle
;
251 /* Pseudo-element to ensure vertical alignment */
252 #civicrm-menu > li:not
(#crm-qsearch
) > a:after
{
254 display: inline-block
;
256 vertical-align: middle
;
259 #civicrm-menu > li
> a
.highlighted
{
263 body
.crm-menubar-over-cms-menu #civicrm-menu
,
264 body
.crm-menubar-below-cms-menu #civicrm-menu
{
269 body
.crm-menubar-over-cms-menu #civicrm-menu
{
273 body
.crm-menubar-above-crm-container #civicrm-menu
{
277 body
.crm-menubar-hidden #civicrm-menu
{
282 @media (max-width: $breakMax
) {
283 /* hide the menu in mobile view */
284 #crm-menubar-state:not
(:checked
) ~ #civicrm-menu
{
289 background-color: #1b1b1b;
292 background-color: #444;
294 #civicrm-menu ul ul
{
295 background-color: #555;
297 #civicrm-menu ul ul ul
{
298 background-color: #666;
308 #civicrm-menu li
a:focus
,
309 #civicrm-menu li
a:hover
,
310 #civicrm-menu li a
.highlighted
{
311 background-color: #676767;
314 #civicrm-menu li
.sub-arrow:before
,
315 #civicrm-menu li li
.sub-arrow:before
{
317 font-family: 'FontAwesome';
322 #civicrm-menu li a
.highlighted
.sub-arrow:before
{
327 background: transparent
;
328 pointer-events: none
;
335 #civicrm-menu-nav > * {
336 pointer-events: auto
;
338 #civicrm-menu-nav .crm-menubar-toggle-btn
{
343 #civicrm-menu-nav .crm-menubar-toggle-btn span
.crm-menu-logo
{
349 background: url
($resourceBase
/i
/logo_lg
.png
) no-repeat
;
350 background-size: 18px;
356 #crm-qsearch .sub-arrow
{
360 #civicrm-menu li
[data-name
="Hide Menu"] {
365 width: 14em !important
;
368 #crm-menubar-toggle-position {
372 /* Make sure we can click overlapped submenus in responsive mode */
373 #civicrm-menu li ul li
{
375 background-color: inherit
;