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 @media (min-width: $breakMin
) {
188 /* Switch to desktop layout
189 -----------------------------------------------
190 These transform the menu tree from
191 collapsible to desktop (navbar + dropdowns)
192 -----------------------------------------------*/
193 /* start... (it's not recommended editing these rules) */
194 #civicrm-menu ul
{position:absolute
;width:12em;}
195 #civicrm-menu li
{float:left
;}
196 #civicrm-menu.sm-rtl li
{float:right
;}
197 #civicrm-menu ul li
,#civicrm-menu
.sm-rtl ul li
,#civicrm-menu
.sm-vertical li
{float:none
;}
198 #civicrm-menu a
{white-space:nowrap
;}
199 #civicrm-menu ul a
,#civicrm-menu
.sm-vertical a
{white-space:normal
;}
200 #civicrm-menu .sm-nowrap
> li
> a
,#civicrm-menu
.sm-nowrap
> li
> :not
(ul
) a
{white-space:nowrap
;}
203 /* hide the button in desktop view */
204 #civicrm-menu-nav .crm-menubar-toggle-btn
{
210 border-bottom: 1px solid
#ccc;
213 body
.crm-menubar-below-cms-menu
> #civicrm-menu-nav #civicrm-menu
{
218 box-shadow: 0px 0px 2px 0 rgba
(0,0,0,0.3);
222 background-color: $menuItemColor
;
226 #civicrm-menu > li
> a
{
227 height: $menubarHeight
;
231 #civicrm-menu > li
> a
> * {
232 vertical-align: middle
;
235 /* Pseudo-element to ensure vertical alignment */
236 #civicrm-menu > li:not
(#crm-qsearch
) > a:after
{
238 display: inline-block
;
240 vertical-align: middle
;
243 #civicrm-menu > li
> a
.highlighted
{
247 body
.crm-menubar-over-cms-menu #civicrm-menu
,
248 body
.crm-menubar-below-cms-menu #civicrm-menu
{
253 body
.crm-menubar-over-cms-menu #civicrm-menu
{
257 body
.crm-menubar-above-crm-container #civicrm-menu
{
261 body
.crm-menubar-hidden #civicrm-menu
{
266 @media (max-width: $breakMax
) {
267 /* hide the menu in mobile view */
268 #crm-menubar-state:not
(:checked
) ~ #civicrm-menu
{
273 background-color: #1b1b1b;
276 background-color: #444;
278 #civicrm-menu ul ul
{
279 background-color: #555;
281 #civicrm-menu ul ul ul
{
282 background-color: #666;
292 #civicrm-menu li
a:focus
,
293 #civicrm-menu li
a:hover
,
294 #civicrm-menu li a
.highlighted
{
295 background-color: #676767;
298 #civicrm-menu li
.sub-arrow:before
,
299 #civicrm-menu li li
.sub-arrow:before
{
301 font-family: 'FontAwesome';
306 #civicrm-menu li a
.highlighted
.sub-arrow:before
{
311 background: transparent
;
312 pointer-events: none
;
319 #civicrm-menu-nav > * {
320 pointer-events: auto
;
322 #civicrm-menu-nav .crm-menubar-toggle-btn
{
327 #civicrm-menu-nav .crm-menubar-toggle-btn span
.crm-menu-logo
{
333 background: url
($resourceBase
/i
/logo_lg
.png
) no-repeat
;
334 background-size: 18px;
340 #crm-qsearch .sub-arrow
{
344 #civicrm-menu li
[data-name
="Hide Menu"] {
349 width: 14em !important
;
352 #crm-menubar-toggle-position {
356 /* Make sure we can click overlapped submenus in responsive mode */
357 #civicrm-menu li ul li
{
359 background-color: inherit
;