css/crm-menubar.css

   1 /* CiviCRM navigation menu stylesheet */
   2
   3 #civicrm-menu-nav {
   4   line-height: 0;
   5   text-align: left;
   6   font-size: 13px;
   7 }
   8 #civicrm-menu {
   9   background-color: $menubarColor;
  10   width: 100%;
  11   z-index: 500;
  12   height: auto;
  13   margin: 0;
  14 }
  15 #civicrm-menu i {
  16   margin-right: 3px;
  17 }
  18 #civicrm-menu li {
  19   border: none;
  20   padding: 0;
  21 }
  22 #civicrm-menu li a {
  23   padding: 12px 8px;
  24   text-decoration: none;
  25   box-shadow: none;
  26   border: none;
  27 }
  28 #civicrm-menu li a[href="#"] {
  29   cursor: default;
  30 }
  31 #civicrm-menu li li a {
  32   padding: 6px 36px 6px 10px;
  33 }
  34 #civicrm-menu li.crm-menu-border-bottom:not(:last-child) {
  35   border-bottom: 1px solid #bbb;
  36 }
  37 #civicrm-menu li:not(.crm-menu-border-bottom) + li.crm-menu-border-top {
  38   border-top: 1px solid #bbb;
  39 }
  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;
  46 }
  47 #civicrm-menu li li .sub-arrow:before {
  48   content: "\f0da";
  49         font-family: 'FontAwesome';
  50         float: right;
  51         margin-right: -25px;
  52 }
  53 /* x icon */
  54 #crm-menubar-state:checked ~ .crm-menubar-toggle-btn .crm-menubar-toggle-btn-icon {
  55   height: 0;
  56   background: transparent;
  57 }
  58 #crm-menubar-state:checked ~ .crm-menubar-toggle-btn .crm-menubar-toggle-btn-icon:before {
  59   top: 0;
  60   -webkit-transform: rotate(-45deg);
  61   transform: rotate(-45deg);
  62 }
  63 #crm-menubar-state:checked ~ .crm-menubar-toggle-btn .crm-menubar-toggle-btn-icon:after {
  64   top: 0;
  65   -webkit-transform: rotate(45deg);
  66   transform: rotate(45deg);
  67 }
  68 /* hide menu state checkbox (keep it visible to screen readers) */
  69 #civicrm-menu-nav #crm-menubar-state {
  70   position: absolute;
  71   width: 1px;
  72   height: 1px;
  73   margin: -1px;
  74   border: 0;
  75   padding: 0;
  76   overflow: hidden;
  77   clip: rect(1px,1px,1px,1px);
  78 }
  79 #civicrm-menu-nav .crm-menubar-toggle-btn {
  80   position: relative;
  81   display: inline-block;
  82   width: 57px;
  83   height: 28px;
  84   text-indent: 28px;
  85   white-space: nowrap;
  86   overflow: hidden;
  87   cursor: pointer;
  88   color: transparent;
  89   -webkit-tap-highlight-color: rgba(0,0,0,0);
  90   background-color: #1b1b1b;
  91 }
  92
  93 /* responsive icon */
  94
  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 {
  98   position: absolute;
  99   top: 50%;
 100   left: 27px;
 101   height: 2px;
 102   width: 24px;
 103   background: #bbb;
 104   -webkit-transition: all 0.25s;
 105   transition: all 0.25s;
 106 }
 107 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:before {
 108   content: '';
 109   top: -7px;
 110   left: 0;
 111 }
 112 #civicrm-menu-nav .crm-menubar-toggle-btn-icon:after {
 113   content: '';
 114   top: 7px;
 115   left: 0;
 116 }
 117
 118 /* Quicksearch */
 119 #crm-qsearch {
 120   padding: 1px 0 1px 2px;
 121   background-color: transparent !important;
 122 }
 123 #civicrm-menu #crm-qsearch > a {
 124   padding: 2px 0 0 2px;
 125 }
 126
 127 input#crm-qsearch-input {
 128   box-sizing: border-box;
 129   background-color: #eaeaea;
 130   font-size: 13px;
 131   border: 1px solid #ccc;
 132   margin: 4px 4px 0;
 133   padding: 2px 8px;
 134   height: calc($menubarHeight - 10px);
 135   width: 30px;
 136   transition: width .5s .05s, background-color .3s .05s;
 137   color: black;
 138 }
 139 a.highlighted #crm-qsearch-input,
 140 #crm-qsearch-input:focus,
 141 #crm-qsearch-input.has-user-input {
 142   background-color: white;
 143   width: 130px;
 144 }
 145 input#crm-qsearch-input:-ms-input-placeholder {
 146   font-family: 'FontAwesome', sans-serif;
 147 }
 148 input#crm-qsearch-input::-webkit-input-placeholder {
 149   font-family: 'FontAwesome', sans-serif;
 150 }
 151 input#crm-qsearch-input::-moz-placeholder {
 152   font-family: 'FontAwesome', sans-serif;
 153 }
 154 input#crm-qsearch-input::placeholder {
 155   font-family: 'FontAwesome', sans-serif;
 156 }
 157
 158 ul.crm-quickSearch-results {
 159   z-index: 100001;
 160 }
 161 ul.crm-quickSearch-results.ui-state-disabled {
 162   opacity: .8;
 163 }
 164
 165 #civicrm-menu-nav .crm-logo-sm {
 166   background: url($resourceBase/i/logo_sm.png) no-repeat;
 167   display: inline-block;
 168   width: 16px;
 169   height: 16px;
 170   margin: 0 2px;
 171 }
 172
 173 #civicrm-menu #crm-menubar-toggle-position {
 174   float: right;
 175 }
 176 #civicrm-menu #crm-menubar-toggle-position a i {
 177   margin: 0;
 178   border-top: 2px solid $textColor;
 179   font-size: 11px;
 180   opacity: .8;
 181 }
 182 body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
 183   transform: rotate(180deg);
 184 }
 185
 186 /* Drilldown menu item finder */
 187 #civicrm-menu [data-name=MenubarDrillDown] > a {
 188   padding-top: 2px;
 189   padding-bottom: 2px;
 190 }
 191 #crm-menubar-drilldown {
 192   padding: 4px;
 193   background-color: #eee;
 194 }
 195 #crm-menubar-drilldown:focus {
 196   background-color: white;
 197 }
 198 #crm-menubar-drilldown + .sub-arrow:before {
 199   margin-top: 5px;
 200 }
 201
 202 @media (min-width: $breakMin) {
 203
 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;}
 217   /* ...end */
 218
 219   /* hide the button in desktop view */
 220   #civicrm-menu-nav .crm-menubar-toggle-btn {
 221     position: absolute;
 222     top: -99999px; /* do not edit this without updating the isMobile() function in crm.menubar.js */
 223   }
 224
 225   #civicrm-menu {
 226     border-bottom: 1px solid #ccc;
 227   }
 228
 229   body.crm-menubar-below-cms-menu > #civicrm-menu-nav #civicrm-menu {
 230     top: 30px;
 231   }
 232
 233   #civicrm-menu ul {
 234     box-shadow: 0px 0px 2px 0 rgba(0,0,0,0.3);
 235   }
 236
 237   #civicrm-menu li a {
 238     background-color: $menuItemColor;
 239     color: $textColor;
 240   }
 241
 242   #civicrm-menu > li > a {
 243     height: $menubarHeight;
 244     padding: 0 8px;
 245   }
 246
 247   #civicrm-menu > li > a > * {
 248     vertical-align: middle;
 249   }
 250
 251   /* Pseudo-element to ensure vertical alignment */
 252   #civicrm-menu > li:not(#crm-qsearch) > a:after {
 253     content: '';
 254     display: inline-block;
 255     height: 100%;
 256     vertical-align: middle;
 257   }
 258
 259   #civicrm-menu > li > a.highlighted {
 260     z-index: 200000;
 261   }
 262
 263   body.crm-menubar-over-cms-menu #civicrm-menu,
 264   body.crm-menubar-below-cms-menu #civicrm-menu {
 265     position: fixed;
 266     top: 0;
 267   }
 268
 269   body.crm-menubar-over-cms-menu #civicrm-menu {
 270     z-index: 99999;
 271   }
 272
 273   body.crm-menubar-above-crm-container #civicrm-menu {
 274     z-index: 100;
 275   }
 276
 277   body.crm-menubar-hidden #civicrm-menu {
 278     display: none;
 279   }
 280 }
 281
 282 @media (max-width: $breakMax) {
 283   /* hide the menu in mobile view */
 284   #crm-menubar-state:not(:checked) ~ #civicrm-menu {
 285     display: none;
 286   }
 287   #civicrm-menu {
 288     z-index: 100000;
 289     background-color: #1b1b1b;
 290   }
 291         #civicrm-menu ul {
 292                 background-color: #444;
 293         }
 294         #civicrm-menu ul ul {
 295                 background-color: #555;
 296         }
 297         #civicrm-menu ul ul ul {
 298                 background-color: #666;
 299         }
 300   #civicrm-menu li {
 301     padding: 5px;
 302   }
 303         #civicrm-menu li a {
 304                 text-align: center;
 305                 font-size: 14px;
 306     color: #ddd;
 307         }
 308   #civicrm-menu li a:focus,
 309   #civicrm-menu li a:hover,
 310   #civicrm-menu li a.highlighted {
 311     background-color: #676767;
 312     color: #fff;
 313   }
 314   #civicrm-menu li .sub-arrow:before,
 315   #civicrm-menu li li .sub-arrow:before {
 316     content: "\f0da";
 317     font-family: 'FontAwesome';
 318     color: #bbb;
 319     float: none;
 320     margin-left: 10px;
 321   }
 322   #civicrm-menu li a.highlighted .sub-arrow:before {
 323     content: "\f0d7";
 324   }
 325   #civicrm-menu-nav {
 326     position: fixed;
 327     background: transparent;
 328     pointer-events: none;
 329     top: 0;
 330     left: 0;
 331     height: 50px;
 332     width: 100%;
 333     z-index: 100000;
 334   }
 335   #civicrm-menu-nav > * {
 336     pointer-events: auto;
 337   }
 338   #civicrm-menu-nav .crm-menubar-toggle-btn {
 339     margin-left: 20px;
 340     z-index: 110000;
 341     margin-top: 10px;
 342   }
 343   #civicrm-menu-nav .crm-menubar-toggle-btn span.crm-menu-logo {
 344     display: block;
 345     position: absolute;
 346     left: 5px;
 347     width: 18px;
 348     height: 18px;
 349     background: url($resourceBase/i/logo_lg.png) no-repeat;
 350     background-size: 18px;
 351     top: 6px;
 352   }
 353   #crm-qsearch {
 354     text-align: center;
 355   }
 356   #crm-qsearch .sub-arrow {
 357     display: none;
 358   }
 359
 360   #civicrm-menu li[data-name="Hide Menu"] {
 361     display: none;
 362   }
 363
 364   #crm-qsearch-input {
 365     width: 14em !important;
 366   }
 367
 368   #crm-menubar-toggle-position {
 369     display: none;
 370   }
 371
 372   /* Make sure we can click overlapped submenus in responsive mode */
 373   #civicrm-menu li ul li {
 374     z-index: 110000;
 375     background-color: inherit;
 376   }
 377 }