<input type="text" class="span3" placeholder="@navbarCollapseWidth + 1">
<h3>Dropdowns</h3>
- <label>@dropdownBackground</label>
+ <label>@dropdown-background</label>
<input type="text" class="span3" placeholder="#fff">
- <label>@dropdownBorder</label>
+ <label>@dropdown-border</label>
<input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
- <label>@dropdownLinkColor</label>
+ <label>@dropdown-link-color</label>
<input type="text" class="span3" placeholder="@grayDark">
- <label>@dropdownLinkColorHover</label>
+ <label>@dropdown-link-color-hover</label>
<input type="text" class="span3" placeholder="#fff">
- <label>@dropdownLinkBackgroundHover</label>
+ <label>@dropdown-link-background-hover</label>
<input type="text" class="span3" placeholder="@link-color">
</div><!-- /span -->
</div><!-- /row -->
<input type="text" class="span3" placeholder="@navbarCollapseWidth + 1">
<h3>{{_i}}Dropdowns{{/i}}</h3>
- <label>@dropdownBackground</label>
+ <label>@dropdown-background</label>
<input type="text" class="span3" placeholder="#fff">
- <label>@dropdownBorder</label>
+ <label>@dropdown-border</label>
<input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
- <label>@dropdownLinkColor</label>
+ <label>@dropdown-link-color</label>
<input type="text" class="span3" placeholder="@grayDark">
- <label>@dropdownLinkColorHover</label>
+ <label>@dropdown-link-color-hover</label>
<input type="text" class="span3" placeholder="#fff">
- <label>@dropdownLinkBackgroundHover</label>
+ <label>@dropdown-link-background-hover</label>
<input type="text" class="span3" placeholder="@link-color">
</div><!-- /span -->
</div><!-- /row -->
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
- background-color: @dropdownBackground;
+ background-color: @dropdown-background;
border: 1px solid #ccc; // IE8 fallback
- border: 1px solid @dropdownBorder;
+ border: 1px solid @dropdown-border;
border-radius: @border-radius-base;
.box-shadow(0 5px 10px rgba(0,0,0,.2));
.background-clip(padding-box);
// Dividers (basically an hr) within the dropdown
.divider {
- .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
+ .nav-divider(@dropdown-divider-top, @dropdown-divider-bottom);
}
// Links within the dropdown menu
clear: both;
font-weight: normal;
line-height: @line-height-base;
- color: @dropdownLinkColor;
+ color: @dropdown-link-color;
white-space: nowrap;
}
}
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
text-decoration: none;
- color: @dropdownLinkColorHover;
- #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
+ color: @dropdown-link-color-hover;
+ #gradient > .vertical(@dropdown-link-background-hover, darken(@dropdown-link-background-hover, 5%));
}
// Active state
// ------------
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
- color: @dropdownLinkColorActive;
+ color: @dropdown-link-color-active;
text-decoration: none;
outline: 0;
- #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
+ #gradient > .vertical(@dropdown-link-background-active, darken(@dropdown-link-background-active, 5%));
}
// Disabled state
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
- border-left-color: darken(@dropdownBackground, 20%);
+ border-left-color: darken(@dropdown-background, 20%);
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
- border-left-color: @dropdownLinkColorHover;
+ border-left-color: @dropdown-link-color-hover;
}
// Left aligned submenus
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
- border-bottom-color: @dropdownBorder;
+ border-bottom-color: @dropdown-border;
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
- border-bottom: 6px solid @dropdownBackground;
+ border-bottom: 6px solid @dropdown-background;
position: absolute;
top: -6px;
left: 10px;
.navbar-fixed-bottom .nav > li > .dropdown-menu {
&:before {
border-top: 7px solid #ccc;
- border-top-color: @dropdownBorder;
+ border-top-color: @dropdown-border;
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
- border-top: 6px solid @dropdownBackground;
+ border-top: 6px solid @dropdown-background;
border-bottom: 0;
bottom: -6px;
top: auto;
// Scaffolding
// -------------------------
+
@body-background: #fff;
@text-color: @grayDark;
// Links
// -------------------------
+
@link-color: #08c;
@link-color-hover: darken(@link-color, 15%);
// Tables
// -------------------------
+
@table-background: transparent; // overall background-color
@table-background-accent: #f9f9f9; // for striping
@table-background-hover: #f5f5f5; // for hover
+
@table-border: #ddd; // table and cell border
// Buttons
// -------------------------
+
@btn-background: #fff;
@btn-background-highlight: darken(#fff, 10%);
@btn-border: #bbb;
// Forms
// -------------------------
+
@input-background: #fff;
+@input-background-disabled: @grayLighter;
+
@input-border: #ccc;
@input-border-radius: @border-radius-base;
@input-border-radius-search: 20px;
-@input-background-disabled: @grayLighter;
+
@form-actions-background: #f5f5f5;
+
@input-height: @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
// Dropdowns
// -------------------------
-@dropdownBackground: #fff;
-@dropdownBorder: rgba(0,0,0,.2);
-@dropdownDividerTop: #e5e5e5;
-@dropdownDividerBottom: #fff;
-@dropdownLinkColor: @grayDark;
-@dropdownLinkColorHover: #fff;
-@dropdownLinkColorActive: #fff;
+@dropdown-background: #fff;
+@dropdown-border: rgba(0,0,0,.2);
+@dropdown-divider-top: #e5e5e5;
+@dropdown-divider-bottom: #fff;
+
+@dropdown-link-color: @grayDark;
+@dropdown-link-color-hover: #fff;
+@dropdown-link-color-active: #fff;
-@dropdownLinkBackgroundActive: @link-color;
-@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
+@dropdown-link-background-active: @link-color;
+@dropdown-link-background-hover: @dropdown-link-background-active;