utils/test/testapi/3rd_party/static/testapi-ui/assets/lib/bootstrap/less/navbar.less

   1 //
   2 // Navbars
   3 // --------------------------------------------------
   4
   5
   6 // Wrapper and base class
   7 //
   8 // Provide a static navbar from which we expand to create full-width, fixed, and
   9 // other navbar variations.
  10
  11 .navbar {
  12   position: relative;
  13   min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
  14   margin-bottom: @navbar-margin-bottom;
  15   border: 1px solid transparent;
  16
  17   // Prevent floats from breaking the navbar
  18   &:extend(.clearfix all);
  19
  20   @media (min-width: @grid-float-breakpoint) {
  21     border-radius: @navbar-border-radius;
  22   }
  23 }
  24
  25
  26 // Navbar heading
  27 //
  28 // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
  29 // styling of responsive aspects.
  30
  31 .navbar-header {
  32   &:extend(.clearfix all);
  33
  34   @media (min-width: @grid-float-breakpoint) {
  35     float: left;
  36   }
  37 }
  38
  39
  40 // Navbar collapse (body)
  41 //
  42 // Group your navbar content into this for easy collapsing and expanding across
  43 // various device sizes. By default, this content is collapsed when <768px, but
  44 // will expand past that for a horizontal display.
  45 //
  46 // To start (on mobile devices) the navbar links, forms, and buttons are stacked
  47 // vertically and include a `max-height` to overflow in case you have too much
  48 // content for the user's viewport.
  49
  50 .navbar-collapse {
  51   overflow-x: visible;
  52   padding-right: @navbar-padding-horizontal;
  53   padding-left:  @navbar-padding-horizontal;
  54   border-top: 1px solid transparent;
  55   box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  56   &:extend(.clearfix all);
  57   -webkit-overflow-scrolling: touch;
  58
  59   &.in {
  60     overflow-y: auto;
  61   }
  62
  63   @media (min-width: @grid-float-breakpoint) {
  64     width: auto;
  65     border-top: 0;
  66     box-shadow: none;
  67
  68     &.collapse {
  69       display: block !important;
  70       visibility: visible !important;
  71       height: auto !important;
  72       padding-bottom: 0; // Override default setting
  73       overflow: visible !important;
  74     }
  75
  76     &.in {
  77       overflow-y: visible;
  78     }
  79
  80     // Undo the collapse side padding for navbars with containers to ensure
  81     // alignment of right-aligned contents.
  82     .navbar-fixed-top &,
  83     .navbar-static-top &,
  84     .navbar-fixed-bottom & {
  85       padding-left: 0;
  86       padding-right: 0;
  87     }
  88   }
  89 }
  90
  91 .navbar-fixed-top,
  92 .navbar-fixed-bottom {
  93   .navbar-collapse {
  94     max-height: @navbar-collapse-max-height;
  95
  96     @media (max-device-width: @screen-xs-min) and (orientation: landscape) {
  97       max-height: 200px;
  98     }
  99   }
 100 }
 101
 102
 103 // Both navbar header and collapse
 104 //
 105 // When a container is present, change the behavior of the header and collapse.
 106
 107 .container,
 108 .container-fluid {
 109   > .navbar-header,
 110   > .navbar-collapse {
 111     margin-right: -@navbar-padding-horizontal;
 112     margin-left:  -@navbar-padding-horizontal;
 113
 114     @media (min-width: @grid-float-breakpoint) {
 115       margin-right: 0;
 116       margin-left:  0;
 117     }
 118   }
 119 }
 120
 121
 122 //
 123 // Navbar alignment options
 124 //
 125 // Display the navbar across the entirety of the page or fixed it to the top or
 126 // bottom of the page.
 127
 128 // Static top (unfixed, but 100% wide) navbar
 129 .navbar-static-top {
 130   z-index: @zindex-navbar;
 131   border-width: 0 0 1px;
 132
 133   @media (min-width: @grid-float-breakpoint) {
 134     border-radius: 0;
 135   }
 136 }
 137
 138 // Fix the top/bottom navbars when screen real estate supports it
 139 .navbar-fixed-top,
 140 .navbar-fixed-bottom {
 141   position: fixed;
 142   right: 0;
 143   left: 0;
 144   z-index: @zindex-navbar-fixed;
 145
 146   // Undo the rounded corners
 147   @media (min-width: @grid-float-breakpoint) {
 148     border-radius: 0;
 149   }
 150 }
 151 .navbar-fixed-top {
 152   top: 0;
 153   border-width: 0 0 1px;
 154 }
 155 .navbar-fixed-bottom {
 156   bottom: 0;
 157   margin-bottom: 0; // override .navbar defaults
 158   border-width: 1px 0 0;
 159 }
 160
 161
 162 // Brand/project name
 163
 164 .navbar-brand {
 165   float: left;
 166   padding: @navbar-padding-vertical @navbar-padding-horizontal;
 167   font-size: @font-size-large;
 168   line-height: @line-height-computed;
 169   height: @navbar-height;
 170
 171   &:hover,
 172   &:focus {
 173     text-decoration: none;
 174   }
 175
 176   > img {
 177     display: block;
 178   }
 179
 180   @media (min-width: @grid-float-breakpoint) {
 181     .navbar > .container &,
 182     .navbar > .container-fluid & {
 183       margin-left: -@navbar-padding-horizontal;
 184     }
 185   }
 186 }
 187
 188
 189 // Navbar toggle
 190 //
 191 // Custom button for toggling the `.navbar-collapse`, powered by the collapse
 192 // JavaScript plugin.
 193
 194 .navbar-toggle {
 195   position: relative;
 196   float: right;
 197   margin-right: @navbar-padding-horizontal;
 198   padding: 9px 10px;
 199   .navbar-vertical-align(34px);
 200   background-color: transparent;
 201   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
 202   border: 1px solid transparent;
 203   border-radius: @border-radius-base;
 204
 205   // We remove the `outline` here, but later compensate by attaching `:hover`
 206   // styles to `:focus`.
 207   &:focus {
 208     outline: 0;
 209   }
 210
 211   // Bars
 212   .icon-bar {
 213     display: block;
 214     width: 22px;
 215     height: 2px;
 216     border-radius: 1px;
 217   }
 218   .icon-bar + .icon-bar {
 219     margin-top: 4px;
 220   }
 221
 222   @media (min-width: @grid-float-breakpoint) {
 223     display: none;
 224   }
 225 }
 226
 227
 228 // Navbar nav links
 229 //
 230 // Builds on top of the `.nav` components with its own modifier class to make
 231 // the nav the full height of the horizontal nav (above 768px).
 232
 233 .navbar-nav {
 234   margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
 235
 236   > li > a {
 237     padding-top:    10px;
 238     padding-bottom: 10px;
 239     line-height: @line-height-computed;
 240   }
 241
 242   @media (max-width: @grid-float-breakpoint-max) {
 243     // Dropdowns get custom display when collapsed
 244     .open .dropdown-menu {
 245       position: static;
 246       float: none;
 247       width: auto;
 248       margin-top: 0;
 249       background-color: transparent;
 250       border: 0;
 251       box-shadow: none;
 252       > li > a,
 253       .dropdown-header {
 254         padding: 5px 15px 5px 25px;
 255       }
 256       > li > a {
 257         line-height: @line-height-computed;
 258         &:hover,
 259         &:focus {
 260           background-image: none;
 261         }
 262       }
 263     }
 264   }
 265
 266   // Uncollapse the nav
 267   @media (min-width: @grid-float-breakpoint) {
 268     float: left;
 269     margin: 0;
 270
 271     > li {
 272       float: left;
 273       > a {
 274         padding-top:    @navbar-padding-vertical;
 275         padding-bottom: @navbar-padding-vertical;
 276       }
 277     }
 278   }
 279 }
 280
 281
 282 // Navbar form
 283 //
 284 // Extension of the `.form-inline` with some extra flavor for optimum display in
 285 // our navbars.
 286
 287 .navbar-form {
 288   margin-left: -@navbar-padding-horizontal;
 289   margin-right: -@navbar-padding-horizontal;
 290   padding: 10px @navbar-padding-horizontal;
 291   border-top: 1px solid transparent;
 292   border-bottom: 1px solid transparent;
 293   @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
 294   .box-shadow(@shadow);
 295
 296   // Mixin behavior for optimum display
 297   .form-inline();
 298
 299   .form-group {
 300     @media (max-width: @grid-float-breakpoint-max) {
 301       margin-bottom: 5px;
 302
 303       &:last-child {
 304         margin-bottom: 0;
 305       }
 306     }
 307   }
 308
 309   // Vertically center in expanded, horizontal navbar
 310   .navbar-vertical-align(@input-height-base);
 311
 312   // Undo 100% width for pull classes
 313   @media (min-width: @grid-float-breakpoint) {
 314     width: auto;
 315     border: 0;
 316     margin-left: 0;
 317     margin-right: 0;
 318     padding-top: 0;
 319     padding-bottom: 0;
 320     .box-shadow(none);
 321   }
 322 }
 323
 324
 325 // Dropdown menus
 326
 327 // Menu position and menu carets
 328 .navbar-nav > li > .dropdown-menu {
 329   margin-top: 0;
 330   .border-top-radius(0);
 331 }
 332 // Menu position and menu caret support for dropups via extra dropup class
 333 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
 334   margin-bottom: 0;
 335   .border-top-radius(@navbar-border-radius);
 336   .border-bottom-radius(0);
 337 }
 338
 339
 340 // Buttons in navbars
 341 //
 342 // Vertically center a button within a navbar (when *not* in a form).
 343
 344 .navbar-btn {
 345   .navbar-vertical-align(@input-height-base);
 346
 347   &.btn-sm {
 348     .navbar-vertical-align(@input-height-small);
 349   }
 350   &.btn-xs {
 351     .navbar-vertical-align(22);
 352   }
 353 }
 354
 355
 356 // Text in navbars
 357 //
 358 // Add a class to make any element properly align itself vertically within the navbars.
 359
 360 .navbar-text {
 361   .navbar-vertical-align(@line-height-computed);
 362
 363   @media (min-width: @grid-float-breakpoint) {
 364     float: left;
 365     margin-left: @navbar-padding-horizontal;
 366     margin-right: @navbar-padding-horizontal;
 367   }
 368 }
 369
 370
 371 // Component alignment
 372 //
 373 // Repurpose the pull utilities as their own navbar utilities to avoid specificity
 374 // issues with parents and chaining. Only do this when the navbar is uncollapsed
 375 // though so that navbar contents properly stack and align in mobile.
 376 //
 377 // Declared after the navbar components to ensure more specificity on the margins.
 378
 379 @media (min-width: @grid-float-breakpoint) {
 380   .navbar-left  { .pull-left(); }
 381   .navbar-right {
 382     .pull-right();
 383     margin-right: -@navbar-padding-horizontal;
 384
 385     ~ .navbar-right {
 386       margin-right: 0;
 387     }
 388   }
 389 }
 390
 391
 392 // Alternate navbars
 393 // --------------------------------------------------
 394
 395 // Default navbar
 396 .navbar-default {
 397   background-color: @navbar-default-bg;
 398   border-color: @navbar-default-border;
 399
 400   .navbar-brand {
 401     color: @navbar-default-brand-color;
 402     &:hover,
 403     &:focus {
 404       color: @navbar-default-brand-hover-color;
 405       background-color: @navbar-default-brand-hover-bg;
 406     }
 407   }
 408
 409   .navbar-text {
 410     color: @navbar-default-color;
 411   }
 412
 413   .navbar-nav {
 414     > li > a {
 415       color: @navbar-default-link-color;
 416
 417       &:hover,
 418       &:focus {
 419         color: @navbar-default-link-hover-color;
 420         background-color: @navbar-default-link-hover-bg;
 421       }
 422     }
 423     > .active > a {
 424       &,
 425       &:hover,
 426       &:focus {
 427         color: @navbar-default-link-active-color;
 428         background-color: @navbar-default-link-active-bg;
 429       }
 430     }
 431     > .disabled > a {
 432       &,
 433       &:hover,
 434       &:focus {
 435         color: @navbar-default-link-disabled-color;
 436         background-color: @navbar-default-link-disabled-bg;
 437       }
 438     }
 439   }
 440
 441   .navbar-toggle {
 442     border-color: @navbar-default-toggle-border-color;
 443     &:hover,
 444     &:focus {
 445       background-color: @navbar-default-toggle-hover-bg;
 446     }
 447     .icon-bar {
 448       background-color: @navbar-default-toggle-icon-bar-bg;
 449     }
 450   }
 451
 452   .navbar-collapse,
 453   .navbar-form {
 454     border-color: @navbar-default-border;
 455   }
 456
 457   // Dropdown menu items
 458   .navbar-nav {
 459     // Remove background color from open dropdown
 460     > .open > a {
 461       &,
 462       &:hover,
 463       &:focus {
 464         background-color: @navbar-default-link-active-bg;
 465         color: @navbar-default-link-active-color;
 466       }
 467     }
 468
 469     @media (max-width: @grid-float-breakpoint-max) {
 470       // Dropdowns get custom display when collapsed
 471       .open .dropdown-menu {
 472         > li > a {
 473           color: @navbar-default-link-color;
 474           &:hover,
 475           &:focus {
 476             color: @navbar-default-link-hover-color;
 477             background-color: @navbar-default-link-hover-bg;
 478           }
 479         }
 480         > .active > a {
 481           &,
 482           &:hover,
 483           &:focus {
 484             color: @navbar-default-link-active-color;
 485             background-color: @navbar-default-link-active-bg;
 486           }
 487         }
 488         > .disabled > a {
 489           &,
 490           &:hover,
 491           &:focus {
 492             color: @navbar-default-link-disabled-color;
 493             background-color: @navbar-default-link-disabled-bg;
 494           }
 495         }
 496       }
 497     }
 498   }
 499
 500
 501   // Links in navbars
 502   //
 503   // Add a class to ensure links outside the navbar nav are colored correctly.
 504
 505   .navbar-link {
 506     color: @navbar-default-link-color;
 507     &:hover {
 508       color: @navbar-default-link-hover-color;
 509     }
 510   }
 511
 512   .btn-link {
 513     color: @navbar-default-link-color;
 514     &:hover,
 515     &:focus {
 516       color: @navbar-default-link-hover-color;
 517     }
 518     &[disabled],
 519     fieldset[disabled] & {
 520       &:hover,
 521       &:focus {
 522         color: @navbar-default-link-disabled-color;
 523       }
 524     }
 525   }
 526 }
 527
 528 // Inverse navbar
 529
 530 .navbar-inverse {
 531   background-color: @navbar-inverse-bg;
 532   border-color: @navbar-inverse-border;
 533
 534   .navbar-brand {
 535     color: @navbar-inverse-brand-color;
 536     &:hover,
 537     &:focus {
 538       color: @navbar-inverse-brand-hover-color;
 539       background-color: @navbar-inverse-brand-hover-bg;
 540     }
 541   }
 542
 543   .navbar-text {
 544     color: @navbar-inverse-color;
 545   }
 546
 547   .navbar-nav {
 548     > li > a {
 549       color: @navbar-inverse-link-color;
 550
 551       &:hover,
 552       &:focus {
 553         color: @navbar-inverse-link-hover-color;
 554         background-color: @navbar-inverse-link-hover-bg;
 555       }
 556     }
 557     > .active > a {
 558       &,
 559       &:hover,
 560       &:focus {
 561         color: @navbar-inverse-link-active-color;
 562         background-color: @navbar-inverse-link-active-bg;
 563       }
 564     }
 565     > .disabled > a {
 566       &,
 567       &:hover,
 568       &:focus {
 569         color: @navbar-inverse-link-disabled-color;
 570         background-color: @navbar-inverse-link-disabled-bg;
 571       }
 572     }
 573   }
 574
 575   // Darken the responsive nav toggle
 576   .navbar-toggle {
 577     border-color: @navbar-inverse-toggle-border-color;
 578     &:hover,
 579     &:focus {
 580       background-color: @navbar-inverse-toggle-hover-bg;
 581     }
 582     .icon-bar {
 583       background-color: @navbar-inverse-toggle-icon-bar-bg;
 584     }
 585   }
 586
 587   .navbar-collapse,
 588   .navbar-form {
 589     border-color: darken(@navbar-inverse-bg, 7%);
 590   }
 591
 592   // Dropdowns
 593   .navbar-nav {
 594     > .open > a {
 595       &,
 596       &:hover,
 597       &:focus {
 598         background-color: @navbar-inverse-link-active-bg;
 599         color: @navbar-inverse-link-active-color;
 600       }
 601     }
 602
 603     @media (max-width: @grid-float-breakpoint-max) {
 604       // Dropdowns get custom display
 605       .open .dropdown-menu {
 606         > .dropdown-header {
 607           border-color: @navbar-inverse-border;
 608         }
 609         .divider {
 610           background-color: @navbar-inverse-border;
 611         }
 612         > li > a {
 613           color: @navbar-inverse-link-color;
 614           &:hover,
 615           &:focus {
 616             color: @navbar-inverse-link-hover-color;
 617             background-color: @navbar-inverse-link-hover-bg;
 618           }
 619         }
 620         > .active > a {
 621           &,
 622           &:hover,
 623           &:focus {
 624             color: @navbar-inverse-link-active-color;
 625             background-color: @navbar-inverse-link-active-bg;
 626           }
 627         }
 628         > .disabled > a {
 629           &,
 630           &:hover,
 631           &:focus {
 632             color: @navbar-inverse-link-disabled-color;
 633             background-color: @navbar-inverse-link-disabled-bg;
 634           }
 635         }
 636       }
 637     }
 638   }
 639
 640   .navbar-link {
 641     color: @navbar-inverse-link-color;
 642     &:hover {
 643       color: @navbar-inverse-link-hover-color;
 644     }
 645   }
 646
 647   .btn-link {
 648     color: @navbar-inverse-link-color;
 649     &:hover,
 650     &:focus {
 651       color: @navbar-inverse-link-hover-color;
 652     }
 653     &[disabled],
 654     fieldset[disabled] & {
 655       &:hover,
 656       &:focus {
 657         color: @navbar-inverse-link-disabled-color;
 658       }
 659     }
 660   }
 661 }