Skip to content

Commit

Permalink
Updating LESS Styles from Bootstrap 2.1 branch
Browse files Browse the repository at this point in the history
  • Loading branch information
@rachelbaker
rachelbaker committed Jul 16, 2012
1 parent 0217f75 commit 5400a98
Show file tree
Hide file tree
Showing 13 changed files with 1,171 additions and 616 deletions.
1,093 changes: 702 additions & 391 deletions less/bootstrapwp.css
View file

Large diffs are not rendered by default.

332 changes: 249 additions & 83 deletions less/bswp-docs.less
View file

Large diffs are not rendered by default.

21 changes: 1 addition & 20 deletions less/buttons.less
View file
Expand Up @@ -15,12 +15,10 @@
font-size: 13px;
line-height: 20px;
*line-height: 20px;
color: @grayDark;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle;
cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight);
.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%);
Expand Down Expand Up @@ -105,23 +103,6 @@
// Alternate buttons
// --------------------------------------------------

// Set text color
// -------------------------
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
// Provide *some* extra contrast for those who can get it
.btn-primary.active,
.btn-warning.active,
Expand Down
39 changes: 34 additions & 5 deletions less/forms.less
View file
Expand Up @@ -22,7 +22,7 @@ legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: @baseLineHeight * 1.5;
margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2;
color: @grayDark;
Expand Down Expand Up @@ -290,8 +290,18 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------

// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth);

// Control row for multiple inputs per line
.controls-row {
.clearfix(); // Clear the float from controls
}
.controls-row [class*="span"] {
float: left; // Float to collapse white-space for proper grid alignment
}




// DISABLED STATE
Expand Down Expand Up @@ -389,8 +399,8 @@ select:focus:required:invalid {
// ------------

// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend,
.input-append {
.input-append,
.input-prepend {
margin-bottom: 5px;
font-size: 0;
white-space: nowrap; // Prevent span and input from separating
Expand Down Expand Up @@ -479,15 +489,34 @@ select:focus:required:invalid {
// SEARCH FORM
// -----------

input.search-query {
.search-query {
padding-right: 14px;
padding-right: 4px \9;
padding-left: 14px;
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0; // remove the default margin on all inputs
margin-bottom: 0; // Remove the default margin on all inputs
.border-radius(14px);
}

/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
.border-radius(0); // Override due to specificity
}
.form-search .input-append .search-query {
.border-radius(14px 0 0 14px)
}
.form-search .input-append .btn {
.border-radius(0 14px 14px 0)
}
.form-search .input-prepend .search-query {
.border-radius(0 14px 14px 0)
}
.form-search .input-prepend .btn {
.border-radius(14px 0 0 14px)
}




// HORIZONTAL & VERTICAL FORMS
Expand Down
84 changes: 12 additions & 72 deletions less/mixins.less
View file
Expand Up @@ -389,7 +389,9 @@
}

// Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor) {
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor;
text-shadow: @textShadow;
#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%);
Expand Down Expand Up @@ -481,14 +483,15 @@

// Button backgrounds
// ------------------
.buttonBackground(@startColor, @endColor) {
.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor);
.gradientBar(@startColor, @endColor, @textColor, @textShadow);
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
.reset-filter();

// in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] {
color: @textColor;
background-color: @endColor;
*background-color: darken(@endColor, 5%);
}
Expand All @@ -508,75 +511,7 @@
margin-top: (@navbarHeight - @elementHeight) / 2;
}

// Popover arrows
// -------------------------
// For tipsies and popovers
#popoverArrow {
.top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
bottom: -@arrowWidth;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-top: @arrowWidth solid #ccc;
border-top: @arrowWidth solid @color;
&:after {
border-left: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid transparent;
border-top: @arrowWidth - 1 solid #fff;
bottom: 1px;
left: -@arrowWidth + 1;
}
}
.right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: 50%;
left: -@arrowWidth;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-right: @arrowWidth solid #ccc;
border-right: @arrowWidth solid @color;
&:after {
border-top: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid #fff;
bottom: -@arrowWidth + 1;
left: 1px;
}
}
.bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: -@arrowWidth;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid #ccc;
border-bottom: @arrowWidth solid @color;
&:after {
border-left: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid #f5f5f5;
top: 1px;
left: -@arrowWidth + 1;
}
}
.left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: 50%;
right: -@arrowWidth;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid #ccc;
border-left: @arrowWidth solid @color;
&:after {
border-top: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid transparent;
border-left: @arrowWidth - 1 solid #fff;
bottom: -@arrowWidth + 1;
right: 1px;
}
}
}


// Grid System
// -----------
Expand Down Expand Up @@ -721,6 +656,11 @@
margin-left: 0; // override margin-left from core grid system
}

// Space grid-sized controls properly if multiple per line
.controls-row [class*="span"] + [class*="span"] {
margin-left: @gridGutterWidth;
}

// generate .spanX
.spanX (@gridColumns);

Expand Down
21 changes: 18 additions & 3 deletions less/navbar.less
View file
Expand Up @@ -72,7 +72,7 @@
// Buttons in navbar
.btn,
.btn-group {
.navbarVerticalAlign(30px); // Vertically center in navbar
.navbarVerticalAlign(28px); // Vertically center in navbar
}
.btn-group .btn {
margin: 0; // then undo the margin here so we don't accidentally double it
Expand All @@ -87,10 +87,11 @@
select,
.radio,
.checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar
.navbarVerticalAlign(28px); // Vertically center in navbar
}
input,
select {
select,
.btn {
display: inline-block;
margin-bottom: 0;
}
Expand All @@ -116,6 +117,7 @@
.navbarVerticalAlign(28px); // Vertically center in navbar
margin-bottom: 0;
.search-query {
margin-bottom: 0;
padding: 4px 9px;
#font > .sans-serif(13px, normal, 1);
color: @white;
Expand Down Expand Up @@ -383,6 +385,8 @@
#gradient > .vertical(#ffffff, #f1f1f1);
.box-shadow(none);
border: 1px solid #e5e5e5;
padding-left: 10px;
padding-right: 10px;
}

// Lighten vertical dividers
Expand Down Expand Up @@ -438,6 +442,17 @@
color: @linkColorHover;
}

// Collapse button
.navbar-subnav .btn-navbar {
.buttonBackground(darken(#ffffff, 5%), darken(#f1f1f1, 5%));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25)");
}
.navbar .btn-navbar .icon-bar {
background-color: #999;
.box-shadow(0 1px 0 rgba(0,0,0,.25));
}


// Fixed subnav on scroll, but only for 980px and up (sorry IE!)
.navbar-subnav-fixed {
position: fixed;
Expand Down

0 comments on commit 5400a98

Please sign in to comment.