less/patternfly/navbar.less

   1 //
   2 // Navbar
   3 // --------------------------------------------------
   4
   5 .navbar-pf {
   6   background: @navbar-pf-bg-color;
   7   border: 0;
   8   border-radius: 0;
   9   border-top: 3px solid @navbar-pf-border-color;
  10   margin-bottom: 0;
  11   min-height: 0;
  12   .navbar-brand {
  13     color: @navbar-pf-active-color;
  14     padding: 12px 0;
  15     margin: 0 0 0 20px;
  16     .ie8 & {
  17       background: url('@{img-path}/@{img-brand-ie8}') no-repeat 0 49%;
  18       min-width: @navbar-pf-navbar-navbar-brand-min-width;
  19     }
  20     img {
  21       display: block;
  22       .ie8 & {
  23         height: 10px;
  24         width: 0;
  25       }
  26     }
  27   }
  28   .navbar-collapse {
  29     border-top: 0;
  30     .box-shadow(none);
  31     padding: 0;
  32   }
  33   .navbar-header {
  34     border-bottom: 1px solid @navbar-pf-navbar-header-border-color;
  35     float: none;
  36   }
  37   .navbar-nav {
  38     margin: 0;
  39     > .active > a, > .active > a:hover, > .active > a:focus {
  40       background-color: @navbar-pf-navbar-nav-active-bg-color;
  41       color: @navbar-pf-active-color;
  42     }
  43     > li > a {
  44       color: @navbar-pf-color;
  45       line-height: 1;
  46       padding: 10px 20px;
  47       text-shadow: none;
  48       &:hover, &:focus {
  49         color: @navbar-pf-active-color;
  50       }
  51     }
  52     > .open {
  53       > a {
  54         &, &:hover, &:focus {
  55           background-color: @navbar-pf-navbar-nav-active-bg-color;
  56           color: @navbar-pf-active-color;
  57         }
  58       }
  59     }
  60     @media (max-width: @grid-float-breakpoint-max) {
  61       .active .navbar-persistent, .active .dropdown-menu, .open .dropdown-menu {
  62         background-color: @navbar-pf-navbar-nav-active-active-bg-color !important;
  63         margin-left: 0;
  64         padding-bottom: 0;
  65         padding-top: 0;
  66         > .active > a, .dropdown-submenu.open > a {
  67           &, &:hover, &:focus {
  68             background-color: @navbar-pf-navbar-nav-active-active-open-bg-color !important;
  69             color: @navbar-pf-active-color;
  70           }
  71         }
  72         > li > a {
  73           background-color: transparent;
  74           border: 0;
  75           color: @navbar-pf-color;
  76           outline: none;
  77           padding-left: 30px;
  78           &:hover {
  79             color: @navbar-pf-active-color;
  80           }
  81         }
  82         .divider {
  83           background-color: @navbar-pf-navbar-header-border-color;
  84           margin: 0 1px;
  85         }
  86         .dropdown-header {
  87           padding-bottom: 0;
  88           padding-left: 30px;
  89         }
  90         .dropdown-submenu {
  91           &.open .dropdown-toggle {
  92             color: @navbar-pf-active-color;
  93           }
  94           &.pull-left {
  95             float: none !important;
  96           }
  97           > a:after {
  98             display: none;
  99           }
 100           .dropdown-header {
 101             padding-left: 45px;
 102           }
 103           .dropdown-menu {
 104             border: 0;
 105             bottom: auto;
 106             .box-shadow(none);
 107             display: block;
 108             float: none;
 109             margin: 0;
 110             min-width: 0;
 111             padding: 0;
 112             position: relative;
 113             left: auto;
 114             right: auto;
 115             top: auto;
 116             > li > a {
 117               padding: 5px 15px 5px 45px;
 118               line-height: 20px;
 119             }
 120             .dropdown-menu > li > a {
 121               padding-left: 60px;
 122             }
 123           }
 124         }
 125       }
 126       .active .navbar-persistent {
 127         .dropdown-submenu {
 128           &.open .dropdown-menu {
 129             display: block;
 130           }
 131           > a:after {
 132             display: inline-block !important;
 133             position: relative;
 134             right: auto;
 135             top: 1px;
 136           }
 137           .dropdown-menu {
 138             display: none;
 139           }
 140           .dropdown-submenu > a:after {
 141             display: none !important;
 142           }
 143         }
 144       }
 145     }
 146   }
 147   .navbar-persistent {
 148     display: none;
 149   }
 150   .active > .navbar-persistent {
 151     display: block;
 152   }
 153   .navbar-primary {
 154     float: none;
 155     .context {
 156       border-bottom: 1px solid @navbar-pf-navbar-header-border-color;
 157     }
 158     > li > .navbar-persistent > .dropdown-submenu > a {
 159       position: relative;
 160       &:after {
 161         content: @fa-var-angle-down;
 162         display: inline-block;
 163         font-family: @icon-font-name-fa;
 164         font-weight: normal;
 165         @media (max-width: @grid-float-breakpoint-max) {
 166           height: 10px;
 167           margin-left: 4px;
 168           vertical-align: baseline;
 169         }
 170       }
 171     }
 172   }
 173   .navbar-toggle {
 174     border: 0;
 175     margin: 0;
 176     padding: 10px 20px;
 177     &:hover, &:focus {
 178       background-color: transparent;
 179       outline: none;
 180       .icon-bar {
 181         .box-shadow(0 0 3px rgba(255,255,255,1));
 182       }
 183     }
 184     .icon-bar {
 185       background-color: @navbar-pf-icon-bar-bg-color;
 186     }
 187   }
 188   .navbar-utility {
 189     border-bottom: 1px solid @navbar-pf-navbar-header-border-color;
 190     li.dropdown > .dropdown-toggle {
 191       padding-left: 36px;
 192       position: relative;
 193       .pficon-user {
 194         left: 20px;
 195         position: absolute;
 196         top: 10px;
 197       }
 198     }
 199     @media (max-width: @grid-float-breakpoint-max) {
 200       > li + li {
 201         border-top: 1px solid @navbar-pf-navbar-header-border-color;
 202       }
 203     }
 204   }
 205 }
 206
 207 @media (min-width: @grid-float-breakpoint) {
 208   .navbar-pf {
 209     .navbar-brand {
 210       padding: @navbar-pf-navbar-navbar-brand-padding;
 211     }
 212     .navbar-nav > li > a {
 213       padding-bottom: 14px;
 214       padding-top: 14px;
 215     }
 216     .navbar-persistent {
 217       font-size: @font-size-large;
 218     }
 219     .navbar-primary {
 220       font-size: @font-size-large;
 221       #gradient .vertical(@navbar-pf-navbar-primary-bg-color-start, @navbar-pf-navbar-primary-bg-color-stop);
 222       &.persistent-secondary {
 223         .context {
 224           .dropdown-menu {
 225             top: auto;
 226           }
 227         }
 228         .dropup .dropdown-menu {
 229           bottom: -5px;
 230           top: auto;
 231         }
 232         > li {
 233           position: static;
 234           &.active {
 235             margin-bottom: 32px;
 236             > .navbar-persistent {
 237               display: block;
 238               left: 0;
 239               position: absolute;
 240             }
 241           }
 242           > .navbar-persistent {
 243             background: @navbar-pf-navbar-navbar-persistent-bg-color;
 244             border-bottom: 1px solid @navbar-pf-navbar-navbar-persistent-border-color;
 245             padding: 0;
 246             width: 100%;
 247             a {
 248               text-decoration: none !important;
 249             }
 250             > li {
 251               &.active {
 252                 &, &:hover {
 253                   .tab-indicator(@background: @nav-tabs-active-link-hover-color, @left: 20px, @right: 20px);
 254                 }
 255                 > a, > a:hover, &:hover > a {
 256                   color: @link-color !important;
 257                 }
 258                 .active > a {
 259                   color: @navbar-pf-active-color;
 260                 }
 261               }
 262               &.dropdown-submenu {
 263                 &:hover > .dropdown-menu {
 264                   display: none;
 265                 }
 266                 &.open {
 267                   > .dropdown-menu {
 268                     display: block;
 269                     left: 20px;
 270                     margin-top: 1px;
 271                     top: 100%;
 272                   }
 273                   > .dropdown-toggle {
 274                     color: @gray-darker;
 275                     &:after {
 276                       border-top-color: @gray-darker;
 277                     }
 278                   }
 279                 }
 280                 > .dropdown-toggle {
 281                   padding-right: 35px !important;
 282                   &:after {
 283                     position: absolute;
 284                     right: 20px;
 285                     top: 10px;
 286                   }
 287                 }
 288               }
 289               &:hover, &.open {
 290                 .tab-indicator(@left: 20px, @right: 20px);
 291                 > a {
 292                   color: @gray-darker;
 293                   &:after {
 294                     border-top-color: @gray-darker;
 295                   }
 296                 }
 297               }
 298               > a {
 299                 background-color: transparent;
 300                 display: block;
 301                 line-height: 1;
 302                 padding: 9px 20px;
 303                 &.dropdown-toggle {
 304                   padding-right: 35px;
 305                   &:after {
 306                     font-size: @font-size-large + 1;
 307                     position: absolute;
 308                     right: 20px;
 309                     top: 9px;
 310                   }
 311                 }
 312                 &:hover {
 313                   color: @gray-darker;
 314                 }
 315               }
 316               a {
 317                 color: @gray-pf;
 318               }
 319             }
 320           }
 321         }
 322       }
 323       > li > a {
 324         border-bottom: 1px solid transparent;
 325         border-top: 1px solid transparent;
 326         position: relative;
 327         margin: -1px 0 0;
 328         &:hover {
 329           background-color: @navbar-pf-navbar-primary-hover-bg-color-stop;
 330           border-top-color: @navbar-pf-navbar-primary-hover-border-color;
 331           color: @navbar-pf-color;
 332           #gradient .vertical(@navbar-pf-navbar-primary-hover-bg-color-start, @navbar-pf-navbar-primary-hover-bg-color-stop);
 333         }
 334       }
 335       > .active > a, > .active > a:hover, > .active > a:focus, > .open > a, > .open > a:hover, > .open > a:focus {
 336         background-color: @navbar-pf-navbar-primary-active-bg-color-stop;
 337         border-bottom-color: @navbar-pf-navbar-primary-active-bg-color-stop;
 338         border-top-color: @navbar-pf-navbar-primary-active-border-color;
 339         .box-shadow(none);
 340         color: @navbar-pf-active-color;
 341         #gradient .vertical(@navbar-pf-navbar-primary-active-bg-color-start, @navbar-pf-navbar-primary-active-bg-color-stop);
 342       }
 343       li.dropdown.context {
 344         border-bottom: 0;
 345         > a {
 346           background-color: @navbar-pf-navbar-primary-context-bg-color-stop;
 347           border-bottom-color: @navbar-pf-navbar-primary-context-border-color;
 348           border-right: 1px solid @navbar-pf-navbar-primary-context-border-color;
 349           border-top-color: @navbar-pf-navbar-primary-context-border-top-color;
 350           font-weight: 600;
 351           #gradient .vertical(@navbar-pf-navbar-primary-context-bg-color-start, @navbar-pf-navbar-primary-context-bg-color-stop);
 352           &:hover {
 353             background-color: @navbar-pf-navbar-primary-context-hover-bg-color-stop;
 354             border-bottom-color: @navbar-pf-navbar-primary-context-hover-border-color;
 355             border-right-color: @navbar-pf-navbar-primary-context-hover-border-color;
 356             border-top-color: @navbar-pf-navbar-primary-context-hover-border-top-color;
 357             #gradient .vertical(@navbar-pf-navbar-primary-context-hover-bg-color-start, @navbar-pf-navbar-primary-context-hover-bg-color-stop);
 358           }
 359         }
 360         &.open > a {
 361           background-color: @navbar-pf-navbar-primary-context-active-bg-color-stop;
 362           border-bottom-color: @navbar-pf-navbar-primary-context-active-border-color;
 363           border-right-color: @navbar-pf-navbar-primary-context-active-border-right-color;
 364           border-top-color: @navbar-pf-navbar-primary-context-active-border-top-color;
 365           #gradient .vertical(@navbar-pf-navbar-primary-context-active-bg-color-start, @navbar-pf-navbar-primary-context-active-bg-color-stop);
 366         }
 367       }
 368     }
 369     .navbar-utility {
 370       border-bottom: 0;
 371       position: absolute;
 372       right: 0;
 373       top: 0;
 374       > .active > a, > .active > a:hover, > .active > a:focus, > .open > a, > .open > a:hover, > .open > a:focus {
 375         background: @navbar-pf-navbar-utility-open-bg-color;
 376         color: @navbar-pf-navbar-utility-color;
 377       }
 378       > li > a {
 379         border-left: 1px solid @navbar-pf-navbar-utility-border-color;
 380         color: @navbar-pf-navbar-utility-color !important;
 381         padding: 7px 10px;
 382         &:hover {
 383           background: @navbar-pf-navbar-utility-hover-bg-color;
 384           border-left-color: @navbar-pf-navbar-utility-hover-border-color;
 385         }
 386       }
 387       > li.open > a {
 388         border-left-color: @navbar-pf-navbar-utility-open-border-color;
 389         color: @navbar-pf-active-color !important;
 390       }
 391       li.dropdown > .dropdown-toggle {
 392         padding-left: 26px;
 393         .pficon-user {
 394           left: 10px;
 395           top: 7px;
 396         }
 397       }
 398       .open .dropdown-menu {
 399         left: auto;
 400         right: 0;
 401         .dropdown-menu {
 402           left: auto;
 403           right: 100%;
 404         }
 405       }
 406     }
 407     .open {
 408       .dropdown-menu {
 409         border-top-width: 0 !important;
 410       }
 411       .dropdown-submenu > .dropdown-menu {
 412         border-top-width: 1px !important;
 413       }
 414     }
 415   }
 416 }
 417 @media (max-width: 360px) {
 418   .navbar-pf {
 419     .navbar-brand {
 420       margin-left: 10px;
 421       width: 75%;
 422       img {
 423         height: auto;
 424         max-width: 100%;
 425       }
 426     }
 427     .navbar-toggle {
 428       padding-left: 0;
 429     }
 430   }
 431 }