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