<input type="text" class="form-control" placeholder="6px" data-var="@border-radius-large">
<label>@border-radius-small</label>
<input type="text" class="form-control" placeholder="3px" data-var="@border-radius-small">
+ <h4>Active text color</h4>
+ <label>@component-active-color</label>
+ <input type="text" class="form-control" placeholder="#fff" data-var="@component-active-color">
+ <p class="help-block">Global color for active items (e.g., navs or dropdowns)</p>
<h4>Active background color</h4>
<label>@component-active-bg</label>
<input type="text" class="form-control" placeholder="@brand-primary" data-var="@component-active-bg">
- <p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p>
+ <p class="help-block">Global background color for active items (e.g., navs or dropdowns)</p>
</div>
</div>
<p class="help-block">Hovered dropdown menu entry text color</p>
<label>@dropdown-link-active-color</label>
- <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-active-color">
+ <input type="text" class="form-control" placeholder="@component-active-color" data-var="@dropdown-link-active-color">
<p class="help-block">Active dropdown menu entry text color</p>
<label>@dropdown-link-active-bg</label>
<input type="text" class="form-control" placeholder="@component-active-bg" data-var="@dropdown-link-active-bg">
@border-radius-large: 6px;
@border-radius-small: 3px;
+@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@dropdown-link-hover-color: darken(@gray-dark, 5%);
@dropdown-link-hover-bg: #f5f5f5;
-@dropdown-link-active-color: #fff;
+@dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: @gray-light;