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 }
 138 a.highlighted #crm-qsearch-input,
 139 #crm-qsearch-input:focus,
 140 #crm-qsearch-input.has-user-input {
 141   background-color: white;
 142   width: 130px;
 143 }
 144 input#crm-qsearch-input:-ms-input-placeholder {
 145   font-family: 'FontAwesome';
 146 }
 147 input#crm-qsearch-input::-webkit-input-placeholder {
 148   font-family: 'FontAwesome';
 149 }
 150 input#crm-qsearch-input::-moz-placeholder {
 151   font-family: 'FontAwesome';
 152 }
 153 input#crm-qsearch-input::placeholder {
 154   font-family: 'FontAwesome';
 155 }
 156
 157 ul.crm-quickSearch-results {
 158   z-index: 100001;
 159 }
 160 ul.crm-quickSearch-results.ui-state-disabled {
 161   opacity: .8;
 162 }
 163
 164 #civicrm-menu-nav .crm-logo-sm {
 165   background: url($resourceBase/i/logo_sm.png) no-repeat;
 166   display: inline-block;
 167   width: 16px;
 168   height: 16px;
 169   margin: 0 2px;
 170 }
 171
 172 #civicrm-menu #crm-menubar-toggle-position {
 173   float: right;
 174 }
 175 #civicrm-menu #crm-menubar-toggle-position a i {
 176   margin: 0;
 177   border-top: 2px solid $textColor;
 178   font-size: 11px;
 179   opacity: .8;
 180 }
 181 body.crm-menubar-over-cms-menu #crm-menubar-toggle-position a i {
 182   transform: rotate(180deg);
 183 }
 184
 185 @media (min-width: 768px) {
 186
 187   /* Switch to desktop layout
 188   -----------------------------------------------
 189      These transform the menu tree from
 190      collapsible to desktop (navbar + dropdowns)
 191   -----------------------------------------------*/
 192   /* start... (it's not recommended editing these rules) */
 193   #civicrm-menu ul{position:absolute;width:12em;}
 194   #civicrm-menu li{float:left;}
 195   #civicrm-menu.sm-rtl li{float:right;}
 196   #civicrm-menu ul li,#civicrm-menu.sm-rtl ul li,#civicrm-menu.sm-vertical li{float:none;}
 197   #civicrm-menu a{white-space:nowrap;}
 198   #civicrm-menu ul a,#civicrm-menu.sm-vertical a{white-space:normal;}
 199   #civicrm-menu .sm-nowrap > li > a,#civicrm-menu .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
 200   /* ...end */
 201
 202   /* hide the button in desktop view */
 203   #civicrm-menu-nav .crm-menubar-toggle-btn {
 204     position: absolute;
 205     top: -99999px;
 206   }
 207
 208   #civicrm-menu {
 209     border-bottom: 1px solid #ccc;
 210   }
 211
 212   body.crm-menubar-below-cms-menu > #civicrm-menu-nav #civicrm-menu {
 213     top: 30px;
 214   }
 215
 216   #civicrm-menu ul {
 217     box-shadow: 0px 0px 2px 0 rgba(0,0,0,0.3);
 218   }
 219
 220   #civicrm-menu li a {
 221     background-color: $semiTransparentMenuColor;
 222     color: $textColor;
 223   }
 224
 225   #civicrm-menu > li > a {
 226     height: 40px;
 227   }
 228
 229   #civicrm-menu > li > a.highlighted {
 230     z-index: 200000;
 231   }
 232
 233   body.crm-menubar-over-cms-menu #civicrm-menu,
 234   body.crm-menubar-below-cms-menu #civicrm-menu {
 235     position: fixed;
 236     top: 0;
 237   }
 238
 239   body.crm-menubar-over-cms-menu #civicrm-menu {
 240     z-index: 99999;
 241   }
 242
 243   body.crm-menubar-hidden #civicrm-menu {
 244     display: none;
 245   }
 246 }
 247
 248 @media (max-width: 768px) {
 249   /* hide the menu in mobile view */
 250   #crm-menubar-state:not(:checked) ~ #civicrm-menu {
 251     display: none;
 252   }
 253   #civicrm-menu {
 254     z-index: 100000;
 255     background-color: #1b1b1b;
 256   }
 257         #civicrm-menu ul {
 258                 background-color: #444;
 259         }
 260         #civicrm-menu ul ul {
 261                 background-color: #555;
 262         }
 263         #civicrm-menu ul ul ul {
 264                 background-color: #666;
 265         }
 266   #civicrm-menu li {
 267     padding: 5px;
 268   }
 269         #civicrm-menu li a {
 270                 text-align: center;
 271                 font-size: 14px;
 272     color: #ddd;
 273         }
 274   #civicrm-menu li a:focus,
 275   #civicrm-menu li a:hover,
 276   #civicrm-menu li a.highlighted {
 277     background-color: #676767;
 278     color: #fff;
 279   }
 280   #civicrm-menu li .sub-arrow:before,
 281   #civicrm-menu li li .sub-arrow:before {
 282     content: "\f0da";
 283     font-family: 'FontAwesome';
 284     color: #bbb;
 285     float: none;
 286     margin-left: 10px;
 287   }
 288   #civicrm-menu li a.highlighted .sub-arrow:before {
 289     content: "\f0d7";
 290   }
 291   #civicrm-menu-nav {
 292     position: fixed;
 293     background: transparent;
 294     pointer-events: none;
 295     top: 0;
 296     left: 0;
 297     height: 50px;
 298     width: 100%;
 299     z-index: 100000;
 300   }
 301   #civicrm-menu-nav > * {
 302     pointer-events: auto;
 303   }
 304   #civicrm-menu-nav .crm-menubar-toggle-btn {
 305     margin-left: 20px;
 306     z-index: 110000;
 307     margin-top: 10px;
 308   }
 309   #civicrm-menu-nav .crm-menubar-toggle-btn span.crm-menu-logo {
 310     display: block;
 311     position: absolute;
 312     left: 5px;
 313     width: 18px;
 314     height: 18px;
 315     background: url($resourceBase/i/logo_lg.png) no-repeat;
 316     background-size: 18px;
 317     top: 6px;
 318   }
 319   #crm-qsearch {
 320     text-align: center;
 321   }
 322   #crm-qsearch .sub-arrow {
 323     display: none;
 324   }
 325
 326   #civicrm-menu li[data-name="Hide Menu"] {
 327     display: none;
 328   }
 329
 330   #crm-qsearch-input {
 331     width: 14em !important;
 332   }
 333
 334   #crm-menubar-toggle-position {
 335     display: none;
 336   }
 337
 338   /* Make sure we can click overlapped submenus in responsive mode */
 339   #civicrm-menu li ul li {
 340     z-index: 110000;
 341     background-color: inherit;
 342   }
 343 }