Created by: ghost
In this mixin I use dynamic variable names (see http://lesscss.org/features/#variables-feature-variable-names) to generate custom navbars.
Example:
> variables.less:
//=== Inverted navbar
// Reset inverted navbar basics
@navbar-inverse-color: lighten(@gray-light, 15%);
@navbar-inverse-bg: #222;
@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
// Inverted navbar links
@navbar-inverse-link-color: lighten(@gray-light, 15%);
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color: #444;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
@navbar-inverse-brand-color: @navbar-inverse-link-color;
@navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@navbar-inverse-toggle-border-color: #333;
> navbar.less:
#navbar(inverse);The catch is that you must declare all navbar-variant-* variables. I.e.
> variables.less:
@navbar-custom-bg: #333;
> navbar.less:
#navbar(custom);won't work
This would be very helpful in case when several navbars are needed or main navbar is very different from navbar-default.
If you like it I also can add element's height/margin/padding calculation (like navbar-padding-horizontal based on navbar-height) into this mixin.