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: 30px;
 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';
 147 }
 148 input#crm-qsearch-input::-webkit-input-placeholder {
 149   font-family: 'FontAwesome';
 150 }
 151 input#crm-qsearch-input::-moz-placeholder {
 152   font-family: 'FontAwesome';
 153 }
 154 input#crm-qsearch-input::placeholder {
 155   font-family: 'FontAwesome';
 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 @media (min-width: 768px) {
 187
 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;}
 201   /* ...end */
 202
 203   /* hide the button in desktop view */
 204   #civicrm-menu-nav .crm-menubar-toggle-btn {
 205     position: absolute;
 206     top: -99999px;
 207   }
 208
 209   #civicrm-menu {
 210     border-bottom: 1px solid #ccc;
 211   }
 212
 213   body.crm-menubar-below-cms-menu > #civicrm-menu-nav #civicrm-menu {
 214     top: 30px;
 215   }
 216
 217   #civicrm-menu ul {
 218     box-shadow: 0px 0px 2px 0 rgba(0,0,0,0.3);
 219   }
 220
 221   #civicrm-menu li a {
 222     background-color: $semiTransparentMenuColor;
 223     color: $textColor;
 224   }
 225
 226   #civicrm-menu > li > a {
 227     height: 40px;
 228   }
 229
 230   #civicrm-menu > li > a.highlighted {
 231     z-index: 200000;
 232   }
 233
 234   body.crm-menubar-over-cms-menu #civicrm-menu,
 235   body.crm-menubar-below-cms-menu #civicrm-menu {
 236     position: fixed;
 237     top: 0;
 238   }
 239
 240   body.crm-menubar-over-cms-menu #civicrm-menu {
 241     z-index: 99999;
 242   }
 243
 244   body.crm-menubar-above-crm-container #civicrm-menu {
 245     z-index: 100;
 246   }
 247
 248   body.crm-menubar-hidden #civicrm-menu {
 249     display: none;
 250   }
 251 }
 252
 253 @media (max-width: 768px) {
 254   /* hide the menu in mobile view */
 255   #crm-menubar-state:not(:checked) ~ #civicrm-menu {
 256     display: none;
 257   }
 258   #civicrm-menu {
 259     z-index: 100000;
 260     background-color: #1b1b1b;
 261   }
 262         #civicrm-menu ul {
 263                 background-color: #444;
 264         }
 265         #civicrm-menu ul ul {
 266                 background-color: #555;
 267         }
 268         #civicrm-menu ul ul ul {
 269                 background-color: #666;
 270         }
 271   #civicrm-menu li {
 272     padding: 5px;
 273   }
 274         #civicrm-menu li a {
 275                 text-align: center;
 276                 font-size: 14px;
 277     color: #ddd;
 278         }
 279   #civicrm-menu li a:focus,
 280   #civicrm-menu li a:hover,
 281   #civicrm-menu li a.highlighted {
 282     background-color: #676767;
 283     color: #fff;
 284   }
 285   #civicrm-menu li .sub-arrow:before,
 286   #civicrm-menu li li .sub-arrow:before {
 287     content: "\f0da";
 288     font-family: 'FontAwesome';
 289     color: #bbb;
 290     float: none;
 291     margin-left: 10px;
 292   }
 293   #civicrm-menu li a.highlighted .sub-arrow:before {
 294     content: "\f0d7";
 295   }
 296   #civicrm-menu-nav {
 297     position: fixed;
 298     background: transparent;
 299     pointer-events: none;
 300     top: 0;
 301     left: 0;
 302     height: 50px;
 303     width: 100%;
 304     z-index: 100000;
 305   }
 306   #civicrm-menu-nav > * {
 307     pointer-events: auto;
 308   }
 309   #civicrm-menu-nav .crm-menubar-toggle-btn {
 310     margin-left: 20px;
 311     z-index: 110000;
 312     margin-top: 10px;
 313   }
 314   #civicrm-menu-nav .crm-menubar-toggle-btn span.crm-menu-logo {
 315     display: block;
 316     position: absolute;
 317     left: 5px;
 318     width: 18px;
 319     height: 18px;
 320     background: url($resourceBase/i/logo_lg.png) no-repeat;
 321     background-size: 18px;
 322     top: 6px;
 323   }
 324   #crm-qsearch {
 325     text-align: center;
 326   }
 327   #crm-qsearch .sub-arrow {
 328     display: none;
 329   }
 330
 331   #civicrm-menu li[data-name="Hide Menu"] {
 332     display: none;
 333   }
 334
 335   #crm-qsearch-input {
 336     width: 14em !important;
 337   }
 338
 339   #crm-menubar-toggle-position {
 340     display: none;
 341   }
 342
 343   /* Make sure we can click overlapped submenus in responsive mode */
 344   #civicrm-menu li ul li {
 345     z-index: 110000;
 346     background-color: inherit;
 347   }
 348 }