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 @media (min-width: $breakMin) {
 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: $menuItemColor;
 223     color: $textColor;
 224   }
 225
 226   #civicrm-menu > li > a {
 227     height: $menubarHeight;
 228     padding: 0 8px;
 229   }
 230
 231   #civicrm-menu > li > a > * {
 232     vertical-align: middle;
 233   }
 234
 235   /* Pseudo-element to ensure vertical alignment */
 236   #civicrm-menu > li:not(#crm-qsearch) > a:after {
 237     content: '';
 238     display: inline-block;
 239     height: 100%;
 240     vertical-align: middle;
 241   }
 242
 243   #civicrm-menu > li > a.highlighted {
 244     z-index: 200000;
 245   }
 246
 247   body.crm-menubar-over-cms-menu #civicrm-menu,
 248   body.crm-menubar-below-cms-menu #civicrm-menu {
 249     position: fixed;
 250     top: 0;
 251   }
 252
 253   body.crm-menubar-over-cms-menu #civicrm-menu {
 254     z-index: 99999;
 255   }
 256
 257   body.crm-menubar-above-crm-container #civicrm-menu {
 258     z-index: 100;
 259   }
 260
 261   body.crm-menubar-hidden #civicrm-menu {
 262     display: none;
 263   }
 264 }
 265
 266 @media (max-width: $breakMax) {
 267   /* hide the menu in mobile view */
 268   #crm-menubar-state:not(:checked) ~ #civicrm-menu {
 269     display: none;
 270   }
 271   #civicrm-menu {
 272     z-index: 100000;
 273     background-color: #1b1b1b;
 274   }
 275         #civicrm-menu ul {
 276                 background-color: #444;
 277         }
 278         #civicrm-menu ul ul {
 279                 background-color: #555;
 280         }
 281         #civicrm-menu ul ul ul {
 282                 background-color: #666;
 283         }
 284   #civicrm-menu li {
 285     padding: 5px;
 286   }
 287         #civicrm-menu li a {
 288                 text-align: center;
 289                 font-size: 14px;
 290     color: #ddd;
 291         }
 292   #civicrm-menu li a:focus,
 293   #civicrm-menu li a:hover,
 294   #civicrm-menu li a.highlighted {
 295     background-color: #676767;
 296     color: #fff;
 297   }
 298   #civicrm-menu li .sub-arrow:before,
 299   #civicrm-menu li li .sub-arrow:before {
 300     content: "\f0da";
 301     font-family: 'FontAwesome';
 302     color: #bbb;
 303     float: none;
 304     margin-left: 10px;
 305   }
 306   #civicrm-menu li a.highlighted .sub-arrow:before {
 307     content: "\f0d7";
 308   }
 309   #civicrm-menu-nav {
 310     position: fixed;
 311     background: transparent;
 312     pointer-events: none;
 313     top: 0;
 314     left: 0;
 315     height: 50px;
 316     width: 100%;
 317     z-index: 100000;
 318   }
 319   #civicrm-menu-nav > * {
 320     pointer-events: auto;
 321   }
 322   #civicrm-menu-nav .crm-menubar-toggle-btn {
 323     margin-left: 20px;
 324     z-index: 110000;
 325     margin-top: 10px;
 326   }
 327   #civicrm-menu-nav .crm-menubar-toggle-btn span.crm-menu-logo {
 328     display: block;
 329     position: absolute;
 330     left: 5px;
 331     width: 18px;
 332     height: 18px;
 333     background: url($resourceBase/i/logo_lg.png) no-repeat;
 334     background-size: 18px;
 335     top: 6px;
 336   }
 337   #crm-qsearch {
 338     text-align: center;
 339   }
 340   #crm-qsearch .sub-arrow {
 341     display: none;
 342   }
 343
 344   #civicrm-menu li[data-name="Hide Menu"] {
 345     display: none;
 346   }
 347
 348   #crm-qsearch-input {
 349     width: 14em !important;
 350   }
 351
 352   #crm-menubar-toggle-position {
 353     display: none;
 354   }
 355
 356   /* Make sure we can click overlapped submenus in responsive mode */
 357   #civicrm-menu li ul li {
 358     z-index: 110000;
 359     background-color: inherit;
 360   }
 361 }