eskp-app/1.0: static/less/navbar.less@750903e3cfc0

     1 //

     2 // Navbars

     3 // --------------------------------------------------

     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.

    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;

    17   // Prevent floats from breaking the navbar

    18   .clearfix();

    20   @media (min-width: @grid-float-breakpoint) {

    21     border-radius: @navbar-border-radius;

    22   }

    23 }

    26 // Navbar heading

    27 //

    28 // Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy

    29 // styling of responsive aspects.

    31 .navbar-header {

    32   .clearfix();

    34   @media (min-width: @grid-float-breakpoint) {

    35     float: left;

    36   }

    37 }

    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.

    50 .navbar-collapse {

    51   max-height: 340px;

    52   overflow-x: visible;

    53   padding-right: @navbar-padding-horizontal;

    54   padding-left:  @navbar-padding-horizontal;

    55   border-top: 1px solid transparent;

    56   box-shadow: inset 0 1px 0 rgba(255,255,255,.1);

    57   .clearfix();

    58   -webkit-overflow-scrolling: touch;

    60   &.in {

    61     overflow-y: auto;

    62   }

    64   @media (min-width: @grid-float-breakpoint) {

    65     width: auto;

    66     border-top: 0;

    67     box-shadow: none;

    69     &.collapse {

    70       display: block !important;

    71       height: auto !important;

    72       padding-bottom: 0; // Override default setting

    73       overflow: visible !important;

    74     }

    76     &.in {

    77       overflow-y: visible;

    78     }

    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 }

    92 // Both navbar header and collapse

    93 //

    94 // When a container is present, change the behavior of the header and collapse.

    96 .container > .navbar-header,

    97 .container > .navbar-collapse {

    98   margin-right: -@navbar-padding-horizontal;

    99   margin-left:  -@navbar-padding-horizontal;

   101   @media (min-width: @grid-float-breakpoint) {

   102     margin-right: 0;

   103     margin-left:  0;

   104   }

   105 }

   108 //

   109 // Navbar alignment options

   110 //

   111 // Display the navbar across the entirety of the page or fixed it to the top or

   112 // bottom of the page.

   114 // Static top (unfixed, but 100% wide) navbar

   115 .navbar-static-top {

   116   z-index: @zindex-navbar;

   117   border-width: 0 0 1px;

   119   @media (min-width: @grid-float-breakpoint) {

   120     border-radius: 0;

   121   }

   122 }

   124 // Fix the top/bottom navbars when screen real estate supports it

   125 .navbar-fixed-top,

   126 .navbar-fixed-bottom {

   127   position: fixed;

   128   right: 0;

   129   left: 0;

   130   z-index: @zindex-navbar-fixed;

   132   // Undo the rounded corners

   133   @media (min-width: @grid-float-breakpoint) {

   134     border-radius: 0;

   135   }

   136 }

   137 .navbar-fixed-top {

   138   top: 0;

   139   border-width: 0 0 1px;

   140 }

   141 .navbar-fixed-bottom {

   142   bottom: 0;

   143   margin-bottom: 0; // override .navbar defaults

   144   border-width: 1px 0 0;

   145 }

   148 // Brand/project name

   150 .navbar-brand {

   151   float: left;

   152   padding: @navbar-padding-vertical @navbar-padding-horizontal;

   153   font-size: @font-size-large;

   154   line-height: @line-height-computed;

   156   &:hover,

   157   &:focus {

   158     text-decoration: none;

   159   }

   161   @media (min-width: @grid-float-breakpoint) {

   162     .navbar > .container & {

   163       margin-left: -@navbar-padding-horizontal;

   164     }

   165   }

   166 }

   169 // Navbar toggle

   170 //

   171 // Custom button for toggling the `.navbar-collapse`, powered by the collapse

   172 // JavaScript plugin.

   174 .navbar-toggle {

   175   position: relative;

   176   float: right;

   177   margin-right: @navbar-padding-horizontal;

   178   padding: 9px 10px;

   179   .navbar-vertical-align(34px);

   180   background-color: transparent;

   181   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214

   182   border: 1px solid transparent;

   183   border-radius: @border-radius-base;

   185   // Bars

   186   .icon-bar {

   187     display: block;

   188     width: 22px;

   189     height: 2px;

   190     border-radius: 1px;

   191   }

   192   .icon-bar + .icon-bar {

   193     margin-top: 4px;

   194   }

   196   @media (min-width: @grid-float-breakpoint) {

   197     display: none;

   198   }

   199 }

   202 // Navbar nav links

   203 //

   204 // Builds on top of the `.nav` components with it's own modifier class to make

   205 // the nav the full height of the horizontal nav (above 768px).

   207 .navbar-nav {

   208   margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;

   210   > li > a {

   211     padding-top:    10px;

   212     padding-bottom: 10px;

   213     line-height: @line-height-computed;

   214   }

   216   @media (max-width: @grid-float-breakpoint-max) {

   217     // Dropdowns get custom display when collapsed

   218     .open .dropdown-menu {

   219       position: static;

   220       float: none;

   221       width: auto;

   222       margin-top: 0;

   223       background-color: transparent;

   224       border: 0;

   225       box-shadow: none;

   226       > li > a,

   227       .dropdown-header {

   228         padding: 5px 15px 5px 25px;

   229       }

   230       > li > a {

   231         line-height: @line-height-computed;

   232         &:hover,

   233         &:focus {

   234           background-image: none;

   235         }

   236       }

   237     }

   238   }

   240   // Uncollapse the nav

   241   @media (min-width: @grid-float-breakpoint) {

   242     float: left;

   243     margin: 0;

   245     > li {

   246       float: left;

   247       > a {

   248         padding-top:    @navbar-padding-vertical;

   249         padding-bottom: @navbar-padding-vertical;

   250       }

   251     }

   253     &.navbar-right:last-child {

   254       margin-right: -@navbar-padding-horizontal;

   255     }

   256   }

   257 }

   260 // Component alignment

   261 //

   262 // Repurpose the pull utilities as their own navbar utilities to avoid specificity

   263 // issues with parents and chaining. Only do this when the navbar is uncollapsed

   264 // though so that navbar contents properly stack and align in mobile.

   266 @media (min-width: @grid-float-breakpoint) {

   267   .navbar-left  { .pull-left(); }

   268   .navbar-right { .pull-right(); }

   269 }

   272 // Navbar form

   273 //

   274 // Extension of the `.form-inline` with some extra flavor for optimum display in

   275 // our navbars.

   277 .navbar-form {

   278   margin-left: -@navbar-padding-horizontal;

   279   margin-right: -@navbar-padding-horizontal;

   280   padding: 10px @navbar-padding-horizontal;

   281   border-top: 1px solid transparent;

   282   border-bottom: 1px solid transparent;

   283   @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);

   284   .box-shadow(@shadow);

   286   // Mixin behavior for optimum display

   287   .form-inline();

   289   .form-group {

   290     @media (max-width: @grid-float-breakpoint-max) {

   291       margin-bottom: 5px;

   292     }

   293   }

   295   // Vertically center in expanded, horizontal navbar

   296   .navbar-vertical-align(@input-height-base);

   298   // Undo 100% width for pull classes

   299   @media (min-width: @grid-float-breakpoint) {

   300     width: auto;

   301     border: 0;

   302     margin-left: 0;

   303     margin-right: 0;

   304     padding-top: 0;

   305     padding-bottom: 0;

   306     .box-shadow(none);

   308     // Outdent the form if last child to line up with content down the page

   309     &.navbar-right:last-child {

   310       margin-right: -@navbar-padding-horizontal;

   311     }

   312   }

   313 }

   316 // Dropdown menus

   318 // Menu position and menu carets

   319 .navbar-nav > li > .dropdown-menu {

   320   margin-top: 0;

   321   .border-top-radius(0);

   322 }

   323 // Menu position and menu caret support for dropups via extra dropup class

   324 .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {

   325   .border-bottom-radius(0);

   326 }

   328 // Right aligned menus need alt position

   329 .navbar-nav.pull-right > li > .dropdown-menu,

   330 .navbar-nav > li > .dropdown-menu.pull-right {

   331   left: auto;

   332   right: 0;

   333 }

   336 // Buttons in navbars

   337 //

   338 // Vertically center a button within a navbar (when *not* in a form).

   340 .navbar-btn {

   341   .navbar-vertical-align(@input-height-base);

   343   &.btn-sm {

   344     .navbar-vertical-align(@input-height-small);

   345   }

   346   &.btn-xs {

   347     .navbar-vertical-align(22);

   348   }

   349 }

   352 // Text in navbars

   353 //

   354 // Add a class to make any element properly align itself vertically within the navbars.

   356 .navbar-text {

   357   .navbar-vertical-align(@line-height-computed);

   359   @media (min-width: @grid-float-breakpoint) {

   360     float: left;

   361     margin-left: @navbar-padding-horizontal;

   362     margin-right: @navbar-padding-horizontal;

   364     // Outdent the form if last child to line up with content down the page

   365     &.navbar-right:last-child {

   366       margin-right: 0;

   367     }

   368   }

   369 }

   371 // Alternate navbars

   372 // --------------------------------------------------

   374 // Default navbar

   375 .navbar-default {

   376   background-color: @navbar-default-bg;

   377   border-color: @navbar-default-border;

   379   .navbar-brand {

   380     color: @navbar-default-brand-color;

   381     &:hover,

   382     &:focus {

   383       color: @navbar-default-brand-hover-color;

   384       background-color: @navbar-default-brand-hover-bg;

   385     }

   386   }

   388   .navbar-text {

   389     color: @navbar-default-color;

   390   }

   392   .navbar-nav {

   393     > li > a {

   394       color: @navbar-default-link-color;

   396       &:hover,

   397       &:focus {

   398         color: @navbar-default-link-hover-color;

   399         background-color: @navbar-default-link-hover-bg;

   400       }

   401     }

   402     > .active > a {

   403       &,

   404       &:hover,

   405       &:focus {

   406         color: @navbar-default-link-active-color;

   407         background-color: @navbar-default-link-active-bg;

   408       }

   409     }

   410     > .disabled > a {

   411       &,

   412       &:hover,

   413       &:focus {

   414         color: @navbar-default-link-disabled-color;

   415         background-color: @navbar-default-link-disabled-bg;

   416       }

   417     }

   418   }

   420   .navbar-toggle {

   421     border-color: @navbar-default-toggle-border-color;

   422     &:hover,

   423     &:focus {

   424       background-color: @navbar-default-toggle-hover-bg;

   425     }

   426     .icon-bar {

   427       background-color: @navbar-default-toggle-icon-bar-bg;

   428     }

   429   }

   431   .navbar-collapse,

   432   .navbar-form {

   433     border-color: @navbar-default-border;

   434   }

   436   // Dropdown menu items

   437   .navbar-nav {

   438     // Remove background color from open dropdown

   439     > .open > a {

   440       &,

   441       &:hover,

   442       &:focus {

   443         background-color: @navbar-default-link-active-bg;

   444         color: @navbar-default-link-active-color;

   445       }

   446     }

   448     @media (max-width: @grid-float-breakpoint-max) {

   449       // Dropdowns get custom display when collapsed

   450       .open .dropdown-menu {

   451         > li > a {

   452           color: @navbar-default-link-color;

   453           &:hover,

   454           &:focus {

   455             color: @navbar-default-link-hover-color;

   456             background-color: @navbar-default-link-hover-bg;

   457           }

   458         }

   459         > .active > a {

   460           &,

   461           &:hover,

   462           &:focus {

   463             color: @navbar-default-link-active-color;

   464             background-color: @navbar-default-link-active-bg;

   465           }

   466         }

   467         > .disabled > a {

   468           &,

   469           &:hover,

   470           &:focus {

   471             color: @navbar-default-link-disabled-color;

   472             background-color: @navbar-default-link-disabled-bg;

   473           }

   474         }

   475       }

   476     }

   477   }

   480   // Links in navbars

   481   //

   482   // Add a class to ensure links outside the navbar nav are colored correctly.

   484   .navbar-link {

   485     color: @navbar-default-link-color;

   486     &:hover {

   487       color: @navbar-default-link-hover-color;

   488     }

   489   }

   491 }

   493 // Inverse navbar

   495 .navbar-inverse {

   496   background-color: @navbar-inverse-bg;

   497   border-color: @navbar-inverse-border;

   499   .navbar-brand {

   500     color: @navbar-inverse-brand-color;

   501     &:hover,

   502     &:focus {

   503       color: @navbar-inverse-brand-hover-color;

   504       background-color: @navbar-inverse-brand-hover-bg;

   505     }

   506   }

   508   .navbar-text {

   509     color: @navbar-inverse-color;

   510   }

   512   .navbar-nav {

   513     > li > a {

   514       color: @navbar-inverse-link-color;

   516       &:hover,

   517       &:focus {

   518         color: @navbar-inverse-link-hover-color;

   519         background-color: @navbar-inverse-link-hover-bg;

   520       }

   521     }

   522     > .active > a {

   523       &,

   524       &:hover,

   525       &:focus {

   526         color: @navbar-inverse-link-active-color;

   527         background-color: @navbar-inverse-link-active-bg;

   528       }

   529     }

   530     > .disabled > a {

   531       &,

   532       &:hover,

   533       &:focus {

   534         color: @navbar-inverse-link-disabled-color;

   535         background-color: @navbar-inverse-link-disabled-bg;

   536       }

   537     }

   538   }

   540   // Darken the responsive nav toggle

   541   .navbar-toggle {

   542     border-color: @navbar-inverse-toggle-border-color;

   543     &:hover,

   544     &:focus {

   545       background-color: @navbar-inverse-toggle-hover-bg;

   546     }

   547     .icon-bar {

   548       background-color: @navbar-inverse-toggle-icon-bar-bg;

   549     }

   550   }

   552   .navbar-collapse,

   553   .navbar-form {

   554     border-color: darken(@navbar-inverse-bg, 7%);

   555   }

   557   // Dropdowns

   558   .navbar-nav {

   559     > .open > a {

   560       &,

   561       &:hover,

   562       &:focus {

   563         background-color: @navbar-inverse-link-active-bg;

   564         color: @navbar-inverse-link-active-color;

   565       }

   566     }

   568     @media (max-width: @grid-float-breakpoint-max) {

   569       // Dropdowns get custom display

   570       .open .dropdown-menu {

   571         > .dropdown-header {

   572           border-color: @navbar-inverse-border;

   573         }

   574         .divider {

   575           background-color: @navbar-inverse-border;

   576         }

   577         > li > a {

   578           color: @navbar-inverse-link-color;

   579           &:hover,

   580           &:focus {

   581             color: @navbar-inverse-link-hover-color;

   582             background-color: @navbar-inverse-link-hover-bg;

   583           }

   584         }

   585         > .active > a {

   586           &,

   587           &:hover,

   588           &:focus {

   589             color: @navbar-inverse-link-active-color;

   590             background-color: @navbar-inverse-link-active-bg;

   591           }

   592         }

   593         > .disabled > a {

   594           &,

   595           &:hover,

   596           &:focus {

   597             color: @navbar-inverse-link-disabled-color;

   598             background-color: @navbar-inverse-link-disabled-bg;

   599           }

   600         }

   601       }

   602     }

   603   }

   605   .navbar-link {

   606     color: @navbar-inverse-link-color;

   607     &:hover {

   608       color: @navbar-inverse-link-hover-color;

   609     }

   610   }

   612 }

author	Reimar Bauer <rb.proj AT googlemail DOT com>
	Sun, 19 Jan 2014 10:11:38 +0100
changeset 157	750903e3cfc0
parent 53	3416f82943ea
permissions	-rwxr-xr-x