// -----------
.breadcrumb {
- margin: 0 0 @baseLineHeight;
padding: 7px 14px;
+ margin: 0 0 @baseLineHeight;
#gradient > .vertical(#ffffff, #f5f5f5);
border: 1px solid #ddd;
.border-radius(3px);
// Reset the file input to browser defaults
input[type=file] {
- background-color: @white;
- background-color: initial;
padding: initial;
- border: initial;
line-height: initial;
+ border: initial;
+ background-color: @white;
+ background-color: initial;
.box-shadow(none);
}
select,
input[type=file] {
height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
- line-height: @baseLineHeight * 1.5;
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
+ line-height: @baseLineHeight * 1.5;
}
// Make multiple select elements height not fixed
select[multiple] {
- background-color: @white; // Fixes Chromium bug?
height: inherit;
+ background-color: @white; // Fixes Chromium bug?
}
textarea {
input,
textarea {
+ .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
@transition: border linear .2s, box-shadow linear .2s;
.transition(@transition);
- .box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}
input:focus,
textarea:focus {
- outline: 0;
border-color: rgba(82,168,236,.8);
@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
+ outline: 0;
}
input[type=file]:focus,
input[type=checkbox]:focus,
// For text that needs to appear as an input but should not be an input
.uneditable-input {
- background-color: @white;
display: block;
+ background-color: @white;
border-color: #eee;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
}
.help-inline {
- display: inline;
- padding-left: 5px;
*position: relative; /* IE6-7 */
*top: -5px; /* IE6-7 */
+ display: inline;
+ padding-left: 5px;
}
// Big blocks of help text
}
.add-on {
position: relative;
- background: #f5f5f5;
- border: 1px solid #ccc;
z-index: 2;
float: left;
display: block;
width: auto;
min-width: 16px;
height: @baseLineHeight;
- padding: 4px 4px 4px 5px;
margin-right: -1px;
+ padding: 4px 4px 4px 5px;
font-weight: normal;
line-height: @baseLineHeight;
color: @grayLight;
text-align: center;
text-shadow: 0 1px 0 @white;
+ background-color: #f5f5f5;
+ border: 1px solid #ccc;
.border-radius(3px 0 0 3px);
}
.active {
- background: lighten(@green, 30);
+ background-color: lighten(@green, 30);
border-color: @green;
}
}
.border-radius(3px 0 0 3px);
}
.add-on {
- .border-radius(0 3px 3px 0);
margin-right: 0;
margin-left: -1px;
+ .border-radius(0 3px 3px 0);
}
}
&:before,
&:after {
display: table;
+ *display: inline;
content: "";
zoom: 1;
- *display: inline;
}
&:after {
clear: both;
// Sizing shortcuts
.size(@height: 5px, @width: 5px) {
- height: @height;
width: @width;
+ height: @height;
}
.square(@size: 5px) {
.size(@size, @size);
}
.border(@color: @white, @alpha: 1) {
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
- background-clip: padding-box;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
}
}
// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor) {
- #gradient > .vertical(@primaryColor, @secondaryColor);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ #gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}
// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
- -khtml-opacity: @opacity / 100;
-moz-opacity: @opacity / 100;
opacity: @opacity / 100;
}
// ------
.modal-backdrop {
- background-color: @black;
position: fixed;
top: 0;
- left: 0;
right: 0;
bottom: 0;
+ left: 0;
z-index: 10000;
+ background-color: @black;
// Fade for backdrop
&.fade { opacity: 0; }
}
&.fade.in { top: 50%; }
}
.modal-header {
- border-bottom: 1px solid #eee;
padding: 5px 15px;
+ border-bottom: 1px solid #eee;
}
.modal-body {
padding: 15px;
}
.modal-footer {
- background-color: #f5f5f5;
padding: 14px 15px 15px;
+ margin-bottom: 0;
+ background-color: #f5f5f5;
border-top: 1px solid #ddd;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix();
- margin-bottom: 0;
.btn {
float: right;
margin-left: 5px;
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
+ text-decoration: none;
border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
*border-right-color: #ddd; /* IE6-7 */
- text-decoration: none;
}
a:hover,
.active a {
}
.disabled a,
.disabled a:hover {
- background-color: transparent;
color: @grayLight;
+ background-color: transparent;
}
.next a {
border: 0;
// Hover and active states
.brand a:hover,
ul .active > a {
- background-color: @navBarBgStart;
- background-color: rgba(255,255,255,.05);
color: @white;
text-decoration: none;
+ background-color: @navBarBgStart;
+ background-color: rgba(255,255,255,.05);
}
// Website or project name
.brand {
display: block;
padding: 8px 20px 12px;
margin-left: -20px; // negative indent to left-align the text down the page
- color: @white;
font-size: 20px;
font-weight: 200;
line-height: 1;
+ color: @white;
}
// Plain text in topbar
p {
margin: 0;
line-height: 40px;
a:hover {
- background-color: transparent;
color: @white;
+ background-color: transparent;
}
}
}
// Navbar search
.navbar-search {
position: relative;
+ float: left;
margin-top: 6px;
margin-bottom: 0;
- float: left;
.search-query {
- background-color: #444;
- background-color: rgba(255,255,255,.3);
- #font > .sans-serif(13px, normal, 1);
padding: 4px 9px;
+ #font > .sans-serif(13px, normal, 1);
color: @white;
color: rgba(255,255,255,.75);
+ background-color: #444;
+ background-color: rgba(255,255,255,.3);
border: 1px solid #111;
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
.box-shadow(@shadow);
}
// Hover states
&:hover {
+ color: @white;
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
- color: @white;
}
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus,
&.focused {
- outline: 0;
- background-color: @white;
+ padding: 5px 10px;
color: @grayDark;
text-shadow: 0 1px 0 @white;
+ background-color: @white;
border: 0;
- padding: 5px 10px;
.box-shadow(0 0 3px rgba(0,0,0,.15));
+ outline: 0;
}
}
}
.navbar-fixed {
position: fixed;
top: 0;
- left: 0;
right: 0;
+ left: 0;
z-index: 10000;
}
// Nav for navbar and topbar
// ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
.nav {
+ position: relative;
+ left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
- position: relative;
- left: 0;
> li {
display: block;
float: left;
}
// The link that is clicked to toggle the dropdown
.dropdown-toggle:after {
+ display: inline-block;
width: 0;
height: 0;
- display: inline-block;
- content: "↓";
- text-indent: -99999px;
- vertical-align: top;
margin-top: 8px;
margin-left: 6px;
+ text-indent: -99999px;
+ vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid @white;
.opacity(30);
+ content: "↓";
}
.dropdown:hover .dropdown-toggle:after {
.opacity(100);
}
// The dropdown menu (ul)
.dropdown-menu {
- background-color: @white;
- float: left;
- display: none; // None by default, but block on "open" of the menu
position: absolute;
top: 40px;
z-index: 900;
+ float: left;
+ display: none; // None by default, but block on "open" of the menu
min-width: 160px;
max-width: 220px;
_width: 160px;
+ padding: 6px 0;
margin-left: 0; // override default ul styles
margin-right: 0;
- padding: 6px 0;
- zoom: 1; // do we need this?
+ background-color: @white;
border-color: #999;
border-color: rgba(0,0,0,.2);
border-style: solid;
.border-radius(0 0 6px 6px);
.box-shadow(0 2px 4px rgba(0,0,0,.2));
.background-clip(padding-box);
+ zoom: 1; // do we need this?
// Unfloat any li's to make them stack
li {
text-shadow: 0 1px 0 @white;
// Hover state
&:hover {
- #gradient > .vertical(#eeeeee, #dddddd);
color: @grayDark;
text-decoration: none;
+ #gradient > .vertical(#eeeeee, #dddddd);
@shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
.box-shadow(@shadow);
}
// ------------
.hero-unit {
- background-color: #f5f5f5;
- margin-bottom: 30px;
padding: 60px;
+ margin-bottom: 30px;
+ background-color: #f5f5f5;
.border-radius(6px);
h1 {
margin-bottom: 0;
}
}
footer {
- margin-top: @baseLineHeight - 1;
padding-top: @baseLineHeight - 1;
+ margin-top: @baseLineHeight - 1;
border-top: 1px solid #eee;
}
// Base .btn styles
.btn {
// Button Base
- cursor: pointer;
display: inline-block;
- #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
padding: 5px 14px 6px;
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
- color: #333;
font-size: @baseFontSize;
line-height: normal;
+ color: #333;
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
+ #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
border: 1px solid #ccc;
border-bottom-color: #bbb;
.border-radius(4px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
+ cursor: pointer;
&:hover {
- background-position: 0 -15px;
color: #333;
text-decoration: none;
+ background-position: 0 -15px;
}
// Focus state for keyboard and accessibility
// Button Sizes
&.large {
+ padding: 9px 14px 9px;
font-size: @baseFontSize + 2px;
line-height: normal;
- padding: 9px 14px 9px;
.border-radius(6px);
}
&.small {
// -----------
.close {
float: right;
- color: @black;
font-size: 20px;
font-weight: bold;
line-height: @baseLineHeight * .75;
+ color: @black;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
&:hover {
padding: 7px 15px;
margin-bottom: @baseLineHeight;
color: @grayDark;
- .gradientBar(#fceec1, #eedc94); // warning by default
text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ .gradientBar(#fceec1, #eedc94); // warning by default
border-width: 1px;
border-style: solid;
.border-radius(4px);
}
&.block-message {
+ padding: 14px;
background-image: none;
background-color: lighten(#fceec1, 5%);
- .reset-filter();
- padding: 14px;
+ .reset-filter(); // undo gradient for IE9
border-color: #fceec1;
.box-shadow(none);
ul, p {
// -----
.well {
- background-color: #f5f5f5;
- margin-bottom: 20px;
- padding: 19px;
min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: #f5f5f5;
border: 1px solid #eee;
border: 1px solid rgba(0,0,0,.05);
.border-radius(4px);
.label {
padding: 1px 3px 2px;
- background-color: @grayLight;
font-size: @baseFontSize * .75;
font-weight: bold;
color: @white;
text-transform: uppercase;
+ background-color: @grayLight;
.border-radius(3px);
&.important { background-color: #c43c35; }
&.warning { background-color: @orange; }
&.notice { background-color: lighten(@blue, 25%); }
}
-
-
-
-// MISC
-// ----
-.pull-right {
- float: right;
-}
-.pull-left {
- float: left;
-}
\ No newline at end of file
top: 0;
left: 0;
z-index: 1000;
- padding: 5px;
display: none;
+ padding: 5px;
&.above .arrow { #popoverArrow > .above(); }
&.right .arrow { #popoverArrow > .right(); }
&.below .arrow { #popoverArrow > .below(); }
height: 0;
}
.inner {
- background-color: @black;
- background-color: rgba(0,0,0,.8);
padding: 3px;
- overflow: hidden;
width: 280px;
+ overflow: hidden;
+ background-color: @black;
+ background-color: rgba(0,0,0,.8);
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
}
.title {
- background-color: #f5f5f5;
padding: 9px 15px;
line-height: 1;
- .border-radius(3px 3px 0 0);
+ background-color: #f5f5f5;
border-bottom:1px solid #eee;
+ .border-radius(3px 3px 0 0);
}
.content {
- background-color: @white;
padding: 14px;
+ background-color: @white;
.border-radius(0 0 3px 3px);
.background-clip(padding-box);
p, ul, ol {
// Source: http://github.com/necolas/normalize.css
sub,
sup {
+ position: relative;
font-size: 75%;
line-height: 0;
- position: relative;
vertical-align: baseline;
}
sup {
// -------------------------
// Source: http://github.com/necolas/normalize.css
img {
- border: 0;
- -ms-interpolation-mode: bicubic;
+ border: 0;
+ -ms-interpolation-mode: bicubic;
}
// Forms
input,
select,
textarea {
- font-size: 100%;
margin: 0;
+ font-size: 100%;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
- line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
*overflow: visible; // Inner spacing ie IE6/7
+ line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
- border: 0;
padding: 0;
+ border: 0;
}
button,
input[type="button"],
// -----------------
body {
- background-color: @white;
margin: 0;
font-family: @baseFontFamily;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @grayDark;
+ background-color: @white;
}
// Container (centered, fixed-width layouts)
// Links
a {
+ font-weight: inherit;
+ line-height: inherit;
color: @linkColor;
text-decoration: none;
- line-height: inherit;
- font-weight: inherit;
&:hover {
color: @linkColorHover;
text-decoration: underline;
.header {
cursor: pointer;
&:after {
- content: "";
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
+ content: "";
visibility: hidden;
}
}
// Style the sorted column headers (THs)
.headerSortUp,
.headerSortDown {
- background-color: rgba(141,192,219,.25);
text-shadow: 0 1px 1px rgba(255,255,255,.75);
+ background-color: rgba(141,192,219,.25);
}
// Style the ascending (reverse alphabetical) column header
.header:hover {
&:after {
- visibility:visible;
+ visibility: visible;
}
}
// Style the descending (alphabetical) column header
.headerSortDown,
.headerSortDown:hover {
&:after {
- visibility:visible;
+ visibility: visible;
.opacity(60);
}
}
// Tabs and Pills
.tabs,
.pills {
- margin: 0 0 20px;
padding: 0;
+ margin: 0 0 20px;
list-style: none;
.clearfix();
> li {
// Pills
.pills {
a {
- margin: 5px 3px 5px 0;
padding: 0 15px;
+ margin: 5px 3px 5px 0;
line-height: 30px;
text-shadow: 0 1px 1px @white;
.border-radius(15px);
}
// Tabbable areas
-.tab-content,
-.pill-content {
-}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
// ------
.twipsy {
- display: block;
position: absolute;
+ z-index: 1000;
+ display: block;
visibility: visible;
padding: 5px;
font-size: 11px;
- z-index: 1000;
.opacity(80);
&.fade.in {
.opacity(80);
&.right .twipsy-arrow { #popoverArrow > .right(); }
}
.twipsy-inner {
+ max-width: 200px;
padding: 3px 8px;
- background-color: @black;
color: white;
text-align: center;
- max-width: 200px;
text-decoration: none;
+ background-color: @black;
.border-radius(4px);
}
.twipsy-arrow {
// ---------
p {
+ margin-bottom: @baseLineHeight / 2;
font-family: @baseFontFamily;
font-size: @baseFontSize;
line-height: @baseLineHeight;
- margin-bottom: @baseLineHeight / 2;
small {
font-size: @baseFontSize - 2;
color: @grayLight;
color: @grayDark;
}
ul.unstyled {
- list-style: none;
margin-left: 0;
+ list-style: none;
}
// Description Lists
// Blockquotes
blockquote {
+ padding-left: 15px;
margin-bottom: @baseLineHeight;
border-left: 5px solid #eee;
- padding-left: 15px;
p {
- #font > .shorthand(300,16px,@baseLineHeight * 1.25);
margin-bottom: 0;
+ #font > .shorthand(300,16px,@baseLineHeight * 1.25);
}
small {
display: block;
// Addresses
address {
display: block;
- line-height: @baseLineHeight;
margin-bottom: @baseLineHeight;
+ line-height: @baseLineHeight;
}
// Inline and block code styles
.border-radius(3px);
}
code {
- background-color: lighten(@orange, 40%);
padding: 1px 3px;
+ background-color: lighten(@orange, 40%);
}
pre {
- background-color: #f5f5f5;
display: block;
padding: (@baseLineHeight - 1) / 2;
margin: 0 0 @baseLineHeight / 2;
- line-height: @baseLineHeight;
font-size: 12px;
+ line-height: @baseLineHeight;
+ background-color: #f5f5f5;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
.border-radius(3px);