margin: 20px 0;
border: 0;
border-top: 1px solid #eeeeee;
- border-bottom: 1px solid #ffffff;
+ border-bottom: 1px solid #fff;
}
abbr[title],
font-weight: normal;
line-height: 20px;
text-align: center;
- text-shadow: 0 1px 0 #ffffff;
+ text-shadow: 0 1px 0 #fff;
background-color: #eeeeee;
border: 1px solid #ccc;
}
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
- border-top-color: #ffffff;
- border-bottom-color: #ffffff;
+ border-top-color: #fff;
+ border-bottom-color: #fff;
}
.btn-group-vertical {
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
- color: #ffffff;
+ color: #fff;
background-color: #0088cc;
}
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
- color: #ffffff;
+ color: #fff;
background-color: #999999;
border-color: #999999;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret {
- border-top-color: #ffffff;
- border-bottom-color: #ffffff;
+ border-top-color: #fff;
+ border-bottom-color: #fff;
opacity: 1;
filter: alpha(opacity=100);
}
}
.navbar-inverse .navbar-search .search-query {
- color: #ffffff;
+ color: #fff;
background-color: #515151;
border-color: #111111;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.15);
.navbar-inverse .navbar-search .search-query.focused {
padding: 5px 15px;
color: #333333;
- text-shadow: 0 1px 0 #ffffff;
+ text-shadow: 0 1px 0 #fff;
background-color: #ffffff;
border: 0;
outline: 0;
.breadcrumb li {
display: inline-block;
- text-shadow: 0 1px 0 #ffffff;
+ text-shadow: 0 1px 0 #fff;
}
.breadcrumb li:after {
z-index: 1050;
width: 560px;
margin-left: -280px;
- background-color: #ffffff;
+ background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px;
font-size: 11.844px;
font-weight: bold;
line-height: 14px;
- color: #ffffff;
+ color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
a.label:hover,
a.badge:hover {
- color: #ffffff;
+ color: #fff;
text-decoration: none;
cursor: pointer;
}
width: 0;
height: 100%;
font-size: 12px;
- color: #ffffff;
+ color: #fff;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e90d2;
}
.carousel-control:hover {
- color: #ffffff;
+ color: #fff;
text-decoration: none;
opacity: 0.9;
filter: alpha(opacity=90);
.carousel-caption h3,
.carousel-caption p {
line-height: 20px;
- color: #ffffff;
+ color: #fff;
}
.carousel-caption h3 {
<div class="span3">
<h3>Scaffolding</h3>
<label>@body-background</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@text-color</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@line-height-base</label>
<input type="text" class="span3" placeholder="20px">
- <label>@altFontFamily</label>
- <input type="text" class="span3" placeholder="@font-family-serif">
<label>@headings-font-family</label>
<input type="text" class="span3" placeholder="inherit">
<label>@headings-font-weight</label>
<input type="text" class="span3" placeholder="inherit">
<h3>Tables</h3>
- <label>@tableBackground</label>
+ <label>@table-background</label>
<input type="text" class="span3" placeholder="transparent">
- <label>@tableBackgroundAccent</label>
+ <label>@table-background-accent</label>
<input type="text" class="span3" placeholder="#f9f9f9">
- <label>@tableBackgroundHover</label>
+ <label>@table-background-hover</label>
<input type="text" class="span3" placeholder="#f5f5f5">
- <label>@tableBorder</label>
+ <label>@table-border</label>
<input type="text" class="span3" placeholder="#ddd">
<h3>Forms</h3>
<label>@placeholderText</label>
<input type="text" class="span3" placeholder="@grayLight">
- <label>@inputBackground</label>
- <input type="text" class="span3" placeholder="@white">
- <label>@inputBorder</label>
+ <label>@input-background</label>
+ <input type="text" class="span3" placeholder="#fff">
+ <label>@input-border</label>
<input type="text" class="span3" placeholder="#ccc">
- <label>@inputBorderRadius</label>
+ <label>@input-border-radius</label>
<input type="text" class="span3" placeholder="3px">
- <label>@inputDisabledBackground</label>
+ <label>@input-background-disabled</label>
<input type="text" class="span3" placeholder="@grayLighter">
- <label>@formActionsBackground</label>
+ <label>@form-actions-background</label>
<input type="text" class="span3" placeholder="#f5f5f5">
- <label>@btnPrimaryBackground</label>
+ <label>@btn-backround-primary</label>
<input type="text" class="span3" placeholder="@link-color">
- <label>@btnPrimaryBackgroundHighlight</label>
- <input type="text" class="span3" placeholder="darken(@white, 10%)">
+ <label>@btn-backround-primary-highlight</label>
+ <input type="text" class="span3" placeholder="darken(#fff, 10%)">
</div><!-- /span -->
<div class="span3">
<label>@navbarLinkColor</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@navbarLinkColorHover</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@navbarLinkColorActive</label>
<input type="text" class="span3" placeholder="@navbarLinkColorHover">
<label>@navbarLinkBackgroundHover</label>
<label>@navbarSearchBackground</label>
<input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
<label>@navbarSearchBackgroundFocus</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@navbarSearchBorder</label>
<input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
<label>@navbarSearchPlaceholderColor</label>
<h3>Dropdowns</h3>
<label>@dropdownBackground</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@dropdownBorder</label>
<input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
<label>@dropdownLinkColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@dropdownLinkColorHover</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@dropdownLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="@link-color">
</div><!-- /span -->
<div class="span3">
<h3>{{_i}}Scaffolding{{/i}}</h3>
<label>@body-background</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@text-color</label>
<input type="text" class="span3" placeholder="@grayDark">
<input type="text" class="span3" placeholder="inherit">
<h3>{{_i}}Tables{{/i}}</h3>
- <label>@tableBackground</label>
+ <label>@table-background</label>
<input type="text" class="span3" placeholder="transparent">
- <label>@tableBackgroundAccent</label>
+ <label>@table-background-accent</label>
<input type="text" class="span3" placeholder="#f9f9f9">
- <label>@tableBackgroundHover</label>
+ <label>@table-background-hover</label>
<input type="text" class="span3" placeholder="#f5f5f5">
- <label>@tableBorder</label>
+ <label>@table-border</label>
<input type="text" class="span3" placeholder="#ddd">
<h3>{{_i}}Forms{{/i}}</h3>
<label>@placeholderText</label>
<input type="text" class="span3" placeholder="@grayLight">
- <label>@inputBackground</label>
- <input type="text" class="span3" placeholder="@white">
- <label>@inputBorder</label>
+ <label>@input-background</label>
+ <input type="text" class="span3" placeholder="#fff">
+ <label>@input-border</label>
<input type="text" class="span3" placeholder="#ccc">
- <label>@inputBorderRadius</label>
+ <label>@input-border-radius</label>
<input type="text" class="span3" placeholder="3px">
- <label>@inputDisabledBackground</label>
+ <label>@input-background-disabled</label>
<input type="text" class="span3" placeholder="@grayLighter">
- <label>@formActionsBackground</label>
+ <label>@form-actions-background</label>
<input type="text" class="span3" placeholder="#f5f5f5">
- <label>@btnPrimaryBackground</label>
+ <label>@btn-backround-primary</label>
<input type="text" class="span3" placeholder="@link-color">
- <label>@btnPrimaryBackgroundHighlight</label>
- <input type="text" class="span3" placeholder="darken(@white, 10%)">
+ <label>@btn-backround-primary-highlight</label>
+ <input type="text" class="span3" placeholder="darken(#fff, 10%)">
</div><!-- /span -->
<div class="span3">
<label>@navbarLinkColor</label>
<input type="text" class="span3" placeholder="@grayLight">
<label>@navbarLinkColorHover</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@navbarLinkColorActive</label>
<input type="text" class="span3" placeholder="@navbarLinkColorHover">
<label>@navbarLinkBackgroundHover</label>
<label>@navbarSearchBackground</label>
<input type="text" class="span3" placeholder="lighten(@navbarBackground, 25%)">
<label>@navbarSearchBackgroundFocus</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@navbarSearchBorder</label>
<input type="text" class="span3" placeholder="darken(@navbarSearchBackground, 30%)">
<label>@navbarSearchPlaceholderColor</label>
<h3>{{_i}}Dropdowns{{/i}}</h3>
<label>@dropdownBackground</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@dropdownBorder</label>
<input type="text" class="span3" placeholder="rgba(0,0,0,.2)">
<label>@dropdownLinkColor</label>
<input type="text" class="span3" placeholder="@grayDark">
<label>@dropdownLinkColorHover</label>
- <input type="text" class="span3" placeholder="@white">
+ <input type="text" class="span3" placeholder="#fff">
<label>@dropdownLinkBackgroundHover</label>
<input type="text" class="span3" placeholder="@link-color">
</div><!-- /span -->
border-radius: @border-radius-base;
li {
display: inline-block;
- text-shadow: 0 1px 0 @white;
+ text-shadow: 0 1px 0 #fff;
&:after {
display: inline-block;
content: "\00a0 /"; // Unicode space added since inline-block means non-collapsing white-space
// Keep the hover's background when dropdown is open
.btn.dropdown-toggle {
- background-color: @btnBackgroundHighlight;
+ background-color: @btn-background-highlight;
}
.btn-primary.dropdown-toggle {
- background-color: @btnPrimaryBackgroundHighlight;
+ background-color: @btn-backround-primary-highlight;
}
.btn-warning.dropdown-toggle {
- background-color: @btnWarningBackgroundHighlight;
+ background-color: @btn-backround-warning-highlight;
}
.btn-danger.dropdown-toggle {
- background-color: @btnDangerBackgroundHighlight;
+ background-color: @btn-backround-danger-highlight;
}
.btn-success.dropdown-toggle {
- background-color: @btnSuccessBackgroundHighlight;
+ background-color: @btn-backround-success-highlight;
}
.btn-info.dropdown-toggle {
- background-color: @btnInfoBackgroundHighlight;
+ background-color: @btn-backround-info-highlight;
}
.btn-inverse.dropdown-toggle {
- background-color: @btnInverseBackgroundHighlight;
+ background-color: @btn-backround-inverse-highlight;
}
}
.btn-success,
.btn-inverse {
.caret {
- border-top-color: @white;
- border-bottom-color: @white;
+ border-top-color: #fff;
+ border-bottom-color: #fff;
}
}
text-align: center;
vertical-align: middle;
cursor: pointer;
- .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
- border: 1px solid @btnBorder;
- border-bottom-color: darken(@btnBorder, 10%);
+ .buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
+ border: 1px solid @btn-border;
+ border-bottom-color: darken(@btn-border, 10%);
border-radius: @border-radius-base;
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
}
.btn-primary {
- .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
+ .buttonBackground(@btn-backround-primary, @btn-backround-primary-highlight);
}
// Warning appears are orange
.btn-warning {
- .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
+ .buttonBackground(@btn-backround-warning, @btn-backround-warning-highlight);
}
// Danger and error appear as red
.btn-danger {
- .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
+ .buttonBackground(@btn-backround-danger, @btn-backround-danger-highlight);
}
// Success appears as green
.btn-success {
- .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
+ .buttonBackground(@btn-backround-success, @btn-backround-success-highlight);
}
// Info appears as a neutral blue
.btn-info {
- .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
+ .buttonBackground(@btn-backround-info, @btn-backround-info-highlight);
}
// Inverse appears as dark gray
.btn-inverse {
- .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
+ .buttonBackground(@btn-backround-inverse, @btn-backround-inverse-highlight);
}
// Hover state
&:hover {
- color: @white;
+ color: #fff;
text-decoration: none;
.opacity(90);
}
}
.carousel-caption h3,
.carousel-caption p {
- color: @white;
+ color: #fff;
line-height: @line-height-base;
}
.carousel-caption h3 {
.uneditable-input {
display: inline-block;
.box-sizing(border-box); // Makes inputs behave like true block-level elements
- min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
padding: 6px 9px;
margin-bottom: @line-height-base / 2;
font-size: @font-size-base;
line-height: @line-height-base;
color: @gray;
vertical-align: middle;
- background-color: @inputBackground;
- border: 1px solid @inputBorder;
- border-radius: @inputBorderRadius;
+ background-color: @input-background;
+ border: 1px solid @input-border;
+ border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border linear .2s, box-shadow linear .2s");
}
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
- height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
- line-height: @inputHeight;
+ height: @input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */
+ line-height: @input-height;
}
// Make select elements obey height by applying a border
// TODO: See if this can be part of the above selector stack
select {
- border: 1px solid @inputBorder;
+ border: 1px solid @input-border;
}
// Make multiple select elements height not fixed
.uneditable-input,
.uneditable-textarea {
color: @grayLight;
- background-color: darken(@inputBackground, 1%);
- border-color: @inputBorder;
+ background-color: darken(@input-background, 1%);
+ border-color: @input-border;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
select[readonly],
textarea[readonly] {
cursor: not-allowed;
- background-color: @inputDisabledBackground;
+ background-color: @input-background-disabled;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
padding: (@line-height-base - 1) 20px @line-height-base;
margin-top: @line-height-base;
margin-bottom: @line-height-base;
- background-color: @formActionsBackground;
+ background-color: @form-actions-background;
border-top: 1px solid #e5e5e5;
.clearfix(); // Adding clearfix to allow for .pull-right button containers
}
margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
font-size: @font-size-base;
vertical-align: top;
- border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+ border-radius: 0 @input-border-radius @input-border-radius 0;
// Make input on top when focused so blue border and shadow always show
&:focus {
z-index: 2;
font-weight: normal;
line-height: @line-height-base;
text-align: center;
- text-shadow: 0 1px 0 @white;
+ text-shadow: 0 1px 0 #fff;
background-color: @grayLighter;
border: 1px solid #ccc;
}
.add-on:first-child,
.btn:first-child {
// FYI, `.btn:first-child` accounts for a button group that's prepended
- border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
+ border-radius: @input-border-radius 0 0 @input-border-radius;
}
}
input,
select,
.uneditable-input {
- border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
+ border-radius: @input-border-radius 0 0 @input-border-radius;
+ .btn-group .btn,
+ .btn-group .btn:last-child {
- border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+ border-radius: 0 @input-border-radius @input-border-radius 0;
}
}
.add-on,
.add-on:last-child,
.btn:last-child,
.btn-group:last-child > .dropdown-toggle {
- border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+ border-radius: 0 @input-border-radius @input-border-radius 0;
}
}
.uneditable-input {
border-radius: 0;
+ .btn-group .btn {
- border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+ border-radius: 0 @input-border-radius @input-border-radius 0;
}
}
.add-on:first-child,
.btn:first-child {
margin-right: -1px;
- border-radius: @inputBorderRadius 0 0 @inputBorderRadius;
+ border-radius: @input-border-radius 0 0 @input-border-radius;
}
.add-on:last-child,
.btn:last-child {
margin-left: -1px;
- border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
+ border-radius: 0 @input-border-radius @input-border-radius 0;
}
.btn-group:first-child {
margin-left: 0;
padding-left: 14px;
padding-left: 4px \9; /* IE8 doesn't have border radius, so don't indent the padding */
margin-bottom: 0; // Remove the default margin on all inputs
- border-radius: @inputSearchBorderRadius;
+ border-radius: @input-border-radius-search;
}
/* Allow for input prepend/append in search forms */
border-radius: 0; // Override due to specificity
}
.form-search .input-append .search-query {
- border-radius: @inputSearchBorderRadius 0 0 @inputSearchBorderRadius;
+ border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
}
.form-search .input-append .btn {
- border-radius: 0 @inputSearchBorderRadius @inputSearchBorderRadius 0;
+ border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
}
.form-search .input-prepend .search-query {
- border-radius: 0 @inputSearchBorderRadius @inputSearchBorderRadius 0;
+ border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
}
.form-search .input-prepend .btn {
- border-radius: @inputSearchBorderRadius 0 0 @inputSearchBorderRadius;
+ border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
}
font-size: @font-size-base * .846;
font-weight: bold;
line-height: 14px; // ensure proper line-height if floated
- color: @white;
+ color: #fff;
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
a {
&.label:hover,
&.badge:hover {
- color: @white;
+ color: #fff;
text-decoration: none;
cursor: pointer;
}
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
-.nav-divider(@top: #e5e5e5, @bottom: @white) {
+.nav-divider(@top: #e5e5e5, @bottom: #fff) {
height: 1px;
margin: ((@line-height-base / 2) - 1) 1px; // 8px 1px
overflow: hidden;
z-index: @zindexModal;
width: 560px;
margin-left: -280px;
- background-color: @white;
+ background-color: #fff;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3);
border-radius: 6px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-radius: 0 0 6px 6px;
- .box-shadow(inset 0 1px 0 @white);
+ .box-shadow(inset 0 1px 0 #fff);
.clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
// Navbar search
.navbar-search {
.search-query {
- color: @white;
+ color: #fff;
background-color: @navbarInverseSearchBackground;
border-color: @navbarInverseSearchBorder;
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
&.focused {
padding: 5px 15px;
color: @grayDark;
- text-shadow: 0 1px 0 @white;
+ text-shadow: 0 1px 0 #fff;
background-color: @navbarInverseSearchBackgroundFocus;
border: 0;
.box-shadow(0 0 3px rgba(0,0,0,.15));
// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
- color: @white;
+ color: #fff;
background-color: @link-color;
}
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
- color: @white;
+ color: #fff;
background-color: @grayLight;
border-color: @grayLight;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret {
- border-top-color: @white;
- border-bottom-color: @white;
+ border-top-color: #fff;
+ border-bottom-color: #fff;
.opacity(100);
}
.progress .bar {
width: 0%;
height: 100%;
- color: @white;
+ color: #fff;
float: left;
font-size: 12px;
text-align: center;
table {
max-width: 100%;
- background-color: @tableBackground;
+ background-color: @table-background;
border-collapse: collapse;
border-spacing: 0;
}
line-height: @line-height-base;
text-align: left;
vertical-align: top;
- border-top: 1px solid @tableBorder;
+ border-top: 1px solid @table-border;
}
th {
font-weight: bold;
}
// Account for multiple tbody instances
tbody + tbody {
- border-top: 2px solid @tableBorder;
+ border-top: 2px solid @table-border;
}
}
// ----------------
.table-bordered {
- border: 1px solid @tableBorder;
+ border: 1px solid @table-border;
border-collapse: separate; // Done so we can round those corners!
border-left: 0;
border-radius: @border-radius-base;
th,
td {
- border-left: 1px solid @tableBorder;
+ border-left: 1px solid @table-border;
}
// Prevent a double border
caption + thead tr:first-child th,
tbody {
tr:nth-child(odd) td,
tr:nth-child(odd) th {
- background-color: @tableBackgroundAccent;
+ background-color: @table-background-accent;
}
}
}
tbody {
tr:hover td,
tr:hover th {
- background-color: @tableBackgroundHover;
+ background-color: @table-background-hover;
}
}
}
margin: @line-height-base 0;
border: 0;
border-top: 1px solid @hrBorder;
- border-bottom: 1px solid @white;
+ border-bottom: 1px solid #fff;
}
// Abbreviations and acronyms
@gray: #555;
@grayLight: #999;
@grayLighter: #eee;
-@white: #fff;
// Accent colors
// Scaffolding
// -------------------------
-@body-background: @white;
+@body-background: #fff;
@text-color: @grayDark;
// Tables
// -------------------------
-@tableBackground: transparent; // overall background-color
-@tableBackgroundAccent: #f9f9f9; // for striping
-@tableBackgroundHover: #f5f5f5; // for hover
-@tableBorder: #ddd; // table and cell border
+@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
// -------------------------
-@btnBackground: @white;
-@btnBackgroundHighlight: darken(@white, 10%);
-@btnBorder: #bbb;
+@btn-background: #fff;
+@btn-background-highlight: darken(#fff, 10%);
+@btn-border: #bbb;
-@btnPrimaryBackground: @link-color;
-@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
+@btn-backround-primary: @link-color;
+@btn-backround-primary-highlight: spin(@btn-backround-primary, 20%);
-@btnInfoBackground: #5bc0de;
-@btnInfoBackgroundHighlight: #2f96b4;
+@btn-backround-info: #5bc0de;
+@btn-backround-info-highlight: #2f96b4;
-@btnSuccessBackground: #62c462;
-@btnSuccessBackgroundHighlight: #51a351;
+@btn-backround-success: #62c462;
+@btn-backround-success-highlight: #51a351;
-@btnWarningBackground: lighten(@orange, 15%);
-@btnWarningBackgroundHighlight: @orange;
+@btn-backround-warning: lighten(#f89406, 15%);
+@btn-backround-warning-highlight: #f89406;
-@btnDangerBackground: #ee5f5b;
-@btnDangerBackgroundHighlight: #bd362f;
+@btn-backround-danger: #ee5f5b;
+@btn-backround-danger-highlight: #bd362f;
-@btnInverseBackground: #444;
-@btnInverseBackgroundHighlight: @grayDarker;
+@btn-backround-inverse: #444;
+@btn-backround-inverse-highlight: @grayDarker;
// Forms
// -------------------------
-@inputBackground: @white;
-@inputBorder: #ccc;
-@inputBorderRadius: @border-radius-base;
-@inputSearchBorderRadius: 20px;
-@inputDisabledBackground: @grayLighter;
-@formActionsBackground: #f5f5f5;
-@inputHeight: @line-height-base + 14px; // base line-height + 12px vertical padding + 2px top/bottom border
+@input-background: #fff;
+@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: @white;
+@dropdownBackground: #fff;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownDividerTop: #e5e5e5;
-@dropdownDividerBottom: @white;
+@dropdownDividerBottom: #fff;
@dropdownLinkColor: @grayDark;
-@dropdownLinkColorHover: @white;
-@dropdownLinkColorActive: @white;
+@dropdownLinkColorHover: #fff;
+@dropdownLinkColorActive: #fff;
@dropdownLinkBackgroundActive: @link-color;
@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive;
@navbarInverseText: @grayLight;
@navbarInverseLinkColor: @grayLight;
-@navbarInverseLinkColorHover: @white;
+@navbarInverseLinkColorHover: #fff;
@navbarInverseLinkColorActive: @navbarInverseLinkColorHover;
@navbarInverseLinkBackgroundHover: transparent;
@navbarInverseLinkBackgroundActive: @navbarInverseBackground;
@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%);
-@navbarInverseSearchBackgroundFocus: @white;
+@navbarInverseSearchBackgroundFocus: #fff;
@navbarInverseSearchBorder: @navbarInverseBackground;
@navbarInverseSearchPlaceholderColor: #ccc;