Update to Bootstrap v2.2.0

This commit is contained in:
Ben Word
2012-10-30 18:04:28 -05:00
parent 332b990a3d
commit 6735edced0
35 changed files with 411 additions and 186 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -12,7 +12,7 @@
.accordion-group {
margin-bottom: 2px;
border: 1px solid #e5e5e5;
.border-radius(4px);
.border-radius(@baseBorderRadius);
}
.accordion-heading {
border-bottom: 0;

View File

@@ -12,7 +12,7 @@
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: @warningBackground;
border: 1px solid @warningBorder;
.border-radius(4px);
.border-radius(@baseBorderRadius);
color: @warningText;
}
.alert h4 {

View File

@@ -1,5 +1,5 @@
/*!
* Bootstrap v2.1.1
* Bootstrap v2.2.0
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
@@ -52,6 +52,7 @@
// Components: Misc
@import "thumbnails.less";
@import "media.less";
@import "labels-badges.less";
@import "progress-bars.less";
@import "accordion.less";

View File

@@ -8,7 +8,7 @@
margin: 0 0 @baseLineHeight;
list-style: none;
background-color: #f5f5f5;
.border-radius(4px);
.border-radius(@baseBorderRadius);
li {
display: inline-block;
.ie7-inline-block();

View File

@@ -6,6 +6,8 @@
// Make the div behave like a button
.btn-group {
position: relative;
display: inline-block;
.ie7-inline-block();
font-size: 0; // remove as part 1 of font-size inline-block hack
vertical-align: middle; // match .btn alignment given font-size hack above
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
@@ -22,10 +24,6 @@
font-size: 0; // Hack to remove whitespace that results from using inline-block
margin-top: @baseLineHeight / 2;
margin-bottom: @baseLineHeight / 2;
.btn-group {
display: inline-block;
.ie7-inline-block();
}
.btn + .btn,
.btn-group + .btn,
.btn + .btn-group {
@@ -120,7 +118,7 @@
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
.box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
.box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
*padding-top: 5px;
*padding-bottom: 5px;
}
@@ -147,7 +145,7 @@
// Remove the gradient and set the same inset shadow as the :active state
.dropdown-toggle {
background-image: none;
.box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
}
// Keep the hover's background when dropdown is open
@@ -193,8 +191,7 @@
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
border-bottom: 5px solid @black;
border-top: 0;
border-bottom-width: 5px;
}

View File

@@ -10,7 +10,7 @@
.btn {
display: inline-block;
.ie7-inline-block();
padding: 4px 14px;
padding: 4px 12px;
margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
@@ -22,9 +22,9 @@
border: 1px solid @btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px);
.border-radius(@baseBorderRadius);
.ie7-restore-left-whitespace(); // Give IE7 some love
.box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
// Hover state
&:hover {
@@ -51,7 +51,7 @@
background-color: darken(@white, 15%) e("\9");
background-image: none;
outline: 0;
.box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
.box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
}
// Disabled state
@@ -73,30 +73,31 @@
// Large
.btn-large {
padding: 9px 14px;
font-size: @baseFontSize + 2px;
line-height: normal;
.border-radius(5px);
padding: @paddingLarge;
font-size: @fontSizeLarge;
.border-radius(@borderRadiusLarge);
}
.btn-large [class^="icon-"] {
.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
margin-top: 2px;
}
// Small
.btn-small {
padding: 3px 9px;
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 2px;
padding: @paddingSmall;
font-size: @fontSizeSmall;
.border-radius(@borderRadiusSmall);
}
.btn-small [class^="icon-"] {
.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
margin-top: 0;
}
// Mini
.btn-mini {
padding: 2px 6px;
font-size: @baseFontSize - 3px;
line-height: @baseLineHeight - 3px;
padding: @paddingMini;
font-size: @fontSizeMini;
.border-radius(@borderRadiusSmall);
}

View File

@@ -35,7 +35,7 @@ pre {
background-color: #f5f5f5;
border: 1px solid #ccc; // fallback for IE7-8
border: 1px solid rgba(0,0,0,.15);
.border-radius(4px);
.border-radius(@baseBorderRadius);
// Make prettyprint styles more spaced out for readability
&.prettyprint {

View File

@@ -72,7 +72,7 @@
}
// Links within the dropdown menu
a {
li > a {
display: block;
padding: 3px 20px;
clear: both;
@@ -90,7 +90,6 @@
.dropdown-submenu:hover > a {
text-decoration: none;
color: @dropdownLinkColorHover;
background-color: @dropdownLinkBackgroundHover;
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
}
@@ -98,10 +97,9 @@
// ------------
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: @dropdownLinkColorHover;
color: @dropdownLinkColorActive;
text-decoration: none;
outline: 0;
background-color: @dropdownLinkBackgroundActive;
#gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
}
@@ -116,6 +114,7 @@
.dropdown-menu .disabled > a:hover {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient
cursor: default;
}
@@ -163,6 +162,7 @@
.dropdown-submenu {
position: relative;
}
// Default dropdowns
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
@@ -176,6 +176,18 @@
display: block;
}
// Dropups
.dropup .dropdown-submenu > .dropdown-menu {
top: auto;
bottom: 0;
margin-top: 0;
margin-bottom: -2px;
-webkit-border-radius: 5px 5px 5px 0;
-moz-border-radius: 5px 5px 5px 0;
border-radius: 5px 5px 5px 0;
}
// Caret to indicate there is a submenu
.dropdown-submenu > a:after {
display: block;
content: " ";
@@ -193,6 +205,21 @@
border-left-color: @dropdownLinkColorHover;
}
// Left aligned submenus
.dropdown-submenu.pull-left {
// Undo the float
// Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
float: none;
// Positioning the submenu
> .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
}
// Tweak nav headers
// -----------------
@@ -206,5 +233,5 @@
// ---------
.typeahead {
margin-top: 2px; // give it some space to breathe
.border-radius(4px);
.border-radius(@baseBorderRadius);
}

View File

@@ -81,11 +81,12 @@ input[type="color"],
display: inline-block;
height: @baseLineHeight;
padding: 4px 6px;
margin-bottom: 9px;
margin-bottom: @baseLineHeight / 2;
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @gray;
.border-radius(@inputBorderRadius);
vertical-align: middle;
}
// Reset appearance properties for textual inputs and textarea
@@ -126,7 +127,7 @@ input[type="color"],
border-color: rgba(82,168,236,.8);
outline: 0;
outline: thin dotted \9; /* IE6-9 */
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6));
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
}
@@ -154,9 +155,9 @@ input[type="checkbox"] {
// Set the height of select and file controls to match text inputs
select,
input[type="file"] {
height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
*margin-top: 4px; /* For IE7, add top margin to align select with labels */
line-height: 30px;
line-height: @inputHeight;
}
// Make select elements obey height by applying a border
@@ -210,7 +211,7 @@ input[type="checkbox"]:focus {
// Placeholder
// -------------------------
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesnt understand a selector
// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
input,
textarea {
.placeholder();
@@ -223,13 +224,13 @@ textarea {
// Indent the labels to position radios/checkboxes as hanging
.radio,
.checkbox {
min-height: 18px; // clear the floating input if there is no label text
padding-left: 18px;
min-height: @baseLineHeight; // clear the floating input if there is no label text
padding-left: 20px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: left;
margin-left: -18px;
margin-left: -20px;
}
// Move the options list down to align with labels
@@ -304,8 +305,17 @@ textarea[class*="span"],
.controls-row {
.clearfix(); // Clear the float from controls
}
.controls-row [class*="span"] {
float: left; // Float to collapse white-space for proper grid alignment
// Float to collapse white-space for proper grid alignment
.controls-row [class*="span"],
// Redeclare the fluid grid collapse since we undo the float for inputs
.row-fluid .controls-row [class*="span"] {
float: left;
}
// Explicity set top padding on all checkboxes/radios, not just first-child
.controls-row .checkbox[class*="span"],
.controls-row .radio[class*="span"] {
padding-top: 5px;
}
@@ -364,7 +374,8 @@ select:focus:required:invalid {
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
.box-shadow(0 0 6px lighten(#ee5f5b, 20%));
@shadow: 0 0 6px lighten(#ee5f5b, 20%);
.box-shadow(@shadow);
}
}
@@ -413,16 +424,23 @@ select:focus:required:invalid {
.input-append,
.input-prepend {
margin-bottom: 5px;
font-size: 0;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
// Reset the white space collapse hack
input,
select,
.uneditable-input,
.dropdown-menu {
font-size: @baseFontSize;
}
input,
select,
.uneditable-input {
position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
*margin-left: 0;
font-size: @baseFontSize;
vertical-align: top;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
// Make input on top when focused so blue border and shadow always show
@@ -454,6 +472,7 @@ select:focus:required:invalid {
border-color: @green;
}
}
.input-prepend {
.add-on,
.btn {
@@ -461,17 +480,23 @@ select:focus:required:invalid {
}
.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);
}
}
.input-append {
input,
select,
.uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
+ .btn-group .btn {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
.add-on,
.btn {
.btn,
.btn-group {
margin-left: -1px;
}
.add-on:last-child,
@@ -479,12 +504,16 @@ select:focus:required:invalid {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
input,
select,
.uneditable-input {
.border-radius(0);
+ .btn-group .btn {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
.add-on:first-child,
.btn:first-child {
@@ -496,10 +525,14 @@ select:focus:required:invalid {
margin-left: -1px;
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
.btn-group:first-child {
margin-left: 0;
}
}
// SEARCH FORM
// -----------

View File

@@ -6,6 +6,10 @@
.hero-unit {
padding: 60px;
margin-bottom: 30px;
font-size: 18px;
font-weight: 200;
line-height: @baseLineHeight * 1.5;
color: @heroUnitLeadColor;
background-color: @heroUnitBackground;
.border-radius(6px);
h1 {
@@ -15,10 +19,7 @@
color: @heroUnitHeadingColor;
letter-spacing: -1px;
}
p {
font-size: 18px;
font-weight: 200;
line-height: @baseLineHeight * 1.5;
color: @heroUnitLeadColor;
li {
line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less
}
}

View File

@@ -6,6 +6,8 @@
// Base classes
.label,
.badge {
display: inline-block;
padding: 2px 4px;
font-size: @baseFontSize * .846;
font-weight: bold;
line-height: 14px; // ensure proper line-height if floated
@@ -17,11 +19,11 @@
}
// Set unique padding and border-radii
.label {
padding: 1px 4px 2px;
.border-radius(3px);
}
.badge {
padding: 1px 9px 2px;
padding-left: 9px;
padding-right: 9px;
.border-radius(9px);
}

55
assets/css/less/media.less Executable file
View File

@@ -0,0 +1,55 @@
// Media objects
// Source: http://stubbornella.org/content/?p=497
// --------------------------------------------------
// Common styles
// -------------------------
// Clear the floats
.media,
.media-body {
overflow: hidden;
*overflow: visible;
zoom: 1;
}
// Proper spacing between instances of .media
.media,
.media .media {
margin-top: 15px;
}
.media:first-child {
margin-top: 0;
}
// For images and videos, set to block
.media-object {
display: block;
}
// Reset margins on headings for tighter default spacing
.media-heading {
margin: 0 0 5px;
}
// Media image alignment
// -------------------------
.media .pull-left {
margin-right: 10px;
}
.media .pull-right {
margin-left: 10px;
}
// Media list variation
// -------------------------
// Undo default ul/ol styles
.media-list {
margin-left: 0;
list-style: none;
}

View File

@@ -154,7 +154,7 @@
.input-block-level {
display: block;
width: 100%;
min-height: 30px; // Make inputs at least the height of their button counterpart
min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
.box-sizing(border-box); // Makes inputs behave like true block-level elements
}
@@ -183,7 +183,8 @@
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
&:focus {
border-color: darken(@borderColor, 10%);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%));
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
.box-shadow(@shadow);
}
}
// Give a small background color for input-prepend/-append
@@ -248,12 +249,10 @@
}
// Drop shadows
.box-shadow(@shadowA, @shadowB:X, ...){
// Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
@props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-box-shadow: @props;
-moz-box-shadow: @props;
box-shadow: @props;
.box-shadow(@shadow) {
-webkit-box-shadow: @shadow;
-moz-box-shadow: @shadow;
box-shadow: @shadow;
}
// Transitions
@@ -298,6 +297,7 @@
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
}
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);
@@ -325,7 +325,7 @@
}
// Background sizing
.background-size(@size){
.background-size(@size) {
-webkit-background-size: @size;
-moz-background-size: @size;
-o-background-size: @size;
@@ -447,7 +447,7 @@
background-repeat: no-repeat;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
}
.radial(@innerColor: #555, @outerColor: #333) {
.radial(@innerColor: #555, @outerColor: #333) {
background-color: @outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
@@ -643,6 +643,11 @@
margin-left: 0;
}
// Space grid-sized controls properly if multiple per line
.controls-row [class*="span"] + [class*="span"] {
margin-left: @fluidGridGutterWidth;
}
// generate .spanX and .offsetX
.spanX (@gridColumns);
.offsetX (@gridColumns);

View File

@@ -2,16 +2,6 @@
// Modals
// --------------------------------------------------
// Recalculate z-index where appropriate,
// but only apply to elements within modal
.modal-open .modal {
.dropdown-menu { z-index: @zindexDropdown + @zindexModal; }
.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
.popover { z-index: @zindexPopover + @zindexModal; }
.tooltip { z-index: @zindexTooltip + @zindexModal; }
}
// Background
.modal-backdrop {
position: fixed;
@@ -36,7 +26,6 @@
top: 50%;
left: 50%;
z-index: @zindexModal;
overflow: auto;
width: 560px;
margin: -250px 0 0 -280px;
background-color: @white;
@@ -46,6 +35,9 @@
.border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding-box);
// Remove focus outline from opened modal
outline: none;
&.fade {
.transition(e('opacity .3s linear, top .3s ease-out'));
top: -25%;
@@ -95,4 +87,8 @@
.btn-group .btn + .btn {
margin-left: -1px;
}
// and override it for block buttons as well
.btn-block + .btn-block {
margin-left: 0;
}
}

View File

@@ -25,7 +25,7 @@
padding-right: 20px;
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
border: 1px solid @navbarBorder;
.border-radius(4px);
.border-radius(@baseBorderRadius);
.box-shadow(0 1px 4px rgba(0,0,0,.065));
// Prevent floats from breaking the navbar
@@ -41,6 +41,7 @@
// Override the default collapsed state
.nav-collapse.collapse {
height: auto;
overflow: visible;
}
@@ -152,7 +153,6 @@
.navbar-static-top {
position: static;
width: 100%;
margin-bottom: 0; // remove 18px margin for default navbar
.navbar-inner {
.border-radius(0);
@@ -202,7 +202,7 @@
.navbar-fixed-top,
.navbar-static-top {
.navbar-inner {
.box-shadow(inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1));
.box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
}
}
@@ -210,7 +210,7 @@
.navbar-fixed-bottom {
bottom: 0;
.navbar-inner {
.box-shadow(inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1));
.box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
}
}
@@ -274,7 +274,7 @@
margin-left: 5px;
margin-right: 5px;
.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
.box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
}
.navbar .btn-navbar .icon-bar {
display: block;
@@ -446,7 +446,7 @@
color: @white;
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));
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
.transition(none);
.placeholder(@navbarInverseSearchPlaceholderColor);

View File

@@ -67,7 +67,8 @@
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @linkColor;
}
.nav-list [class^="icon-"] {
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
@@ -123,7 +124,7 @@
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
color: @gray;
background-color: @white;
background-color: @bodyBackground;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;

View File

@@ -12,28 +12,29 @@
.pager li {
display: inline;
}
.pager a,
.pager span {
.pager li > a,
.pager li > span {
display: inline-block;
padding: 5px 14px;
background-color: #fff;
border: 1px solid #ddd;
.border-radius(15px);
}
.pager a:hover {
.pager li > a:hover {
text-decoration: none;
background-color: #f5f5f5;
}
.pager .next a,
.pager .next span {
.pager .next > a,
.pager .next > span {
float: right;
}
.pager .previous a {
.pager .previous > a,
.pager .previous > span {
float: left;
}
.pager .disabled a,
.pager .disabled a:hover,
.pager .disabled span {
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > span {
color: @grayLight;
background-color: #fff;
cursor: default;

View File

@@ -2,27 +2,30 @@
// Pagination (multiple pages)
// --------------------------------------------------
// Space out pagination from surrounding content
.pagination {
height: @baseLineHeight * 2;
margin: @baseLineHeight 0;
}
}
.pagination ul {
// Allow for text-based alignment
display: inline-block;
.ie7-inline-block();
// Reset default ul styles
margin-left: 0;
margin-bottom: 0;
.border-radius(3px);
// Visuals
.border-radius(@baseBorderRadius);
.box-shadow(0 1px 2px rgba(0,0,0,.05));
}
.pagination ul > li {
display: inline;
display: inline; // Remove list-style and block-level defaults
}
.pagination ul > li > a,
.pagination ul > li > span {
float: left;
padding: 0 14px;
line-height: (@baseLineHeight * 2) - 2;
float: left; // Collapse white-space
padding: 4px 12px;
line-height: @baseLineHeight;
text-decoration: none;
background-color: @paginationBackground;
border: 1px solid @paginationBorder;
@@ -31,7 +34,7 @@
.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: #f5f5f5;
background-color: @paginationActiveBackground;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
@@ -48,17 +51,71 @@
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
.border-radius(3px 0 0 3px);
.border-left-radius(@baseBorderRadius);
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
.border-radius(0 3px 3px 0);
.border-right-radius(@baseBorderRadius);
}
// Centered
// Alignment
// --------------------------------------------------
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
// Sizing
// --------------------------------------------------
// Large
.pagination-large {
ul > li > a,
ul > li > span {
padding: @paddingLarge;
font-size: @fontSizeLarge;
}
ul > li:first-child > a,
ul > li:first-child > span {
.border-left-radius(@borderRadiusLarge);
}
ul > li:last-child > a,
ul > li:last-child > span {
.border-right-radius(@borderRadiusLarge);
}
}
// Small and mini
.pagination-mini,
.pagination-small {
ul > li:first-child > a,
ul > li:first-child > span {
.border-left-radius(@borderRadiusSmall);
}
ul > li:last-child > a,
ul > li:last-child > span {
.border-right-radius(@borderRadiusSmall);
}
}
// Small
.pagination-small {
ul > li > a,
ul > li > span {
padding: @paddingSmall;
font-size: @fontSizeSmall;
}
}
// Mini
.pagination-mini {
ul > li > a,
ul > li > span {
padding: @paddingMini;
font-size: @fontSizeMini;
}
}

View File

@@ -21,10 +21,10 @@
.box-shadow(0 5px 10px rgba(0,0,0,.2));
// Offset the popover to account for the popover arrow
&.top { margin-bottom: 10px; }
&.top { margin-top: -10px; }
&.right { margin-left: 10px; }
&.bottom { margin-top: 10px; }
&.left { margin-right: 10px; }
&.left { margin-left: -10px; }
}

View File

@@ -48,7 +48,7 @@
margin-bottom: @baseLineHeight;
#gradient > .vertical(#f5f5f5, #f9f9f9);
.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
.border-radius(4px);
.border-radius(@baseBorderRadius);
}
// Bar of progress
@@ -66,7 +66,7 @@
.transition(width .6s ease);
}
.progress .bar + .bar {
.box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15));
.box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
}
// Striped bars

View File

@@ -88,7 +88,8 @@ img {
}
// Prevent max-width from affecting Google Maps
#map_canvas img {
#map_canvas img,
.google-maps img {
max-width: none;
}
@@ -115,11 +116,11 @@ input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
border: 0;
}
button,
input[type="button"],
html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
input[type="reset"],
input[type="submit"] {
cursor: pointer; // Cursors on all buttons applied consistently
-webkit-appearance: button; // Style clickable inputs in iOS
-webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
}
input[type="search"] { // Appearance in Safari/Chrome
-webkit-box-sizing: content-box;

View File

@@ -58,6 +58,7 @@
}
// Make all grid-sized elements block level again
[class*="span"],
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="span"] {
float: none;
display: block;
@@ -70,6 +71,9 @@
width: 100%;
.box-sizing(border-box);
}
.row-fluid [class*="offset"]:first-child {
margin-left: 0;
}
// FORM FIELDS
// -----------
@@ -103,7 +107,8 @@
right: 20px;
width: auto;
margin: 0;
&.fade.in { top: auto; }
&.fade { top: -100px; }
&.fade.in { top: 20px; }
}
}
@@ -155,6 +160,20 @@
}
}
// Medias
// Reset float and spacing to stack
.media .pull-left,
.media .pull-right {
float: none;
display: block;
margin-bottom: 10px;
}
// Remove side margins since we stack instead of indent
.media-object {
margin-right: 0;
margin-left: 0;
}
// Modals
.modal {
top: 10px;

View File

@@ -75,7 +75,7 @@
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
.border-radius(4px);
.border-radius(@baseBorderRadius);
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
@@ -84,6 +84,10 @@
.nav-collapse .dropdown-menu a:hover {
background-color: @navbarBackground;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
color: @navbarInverseLinkColor;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
background-color: @navbarInverseBackground;
@@ -99,7 +103,7 @@
top: auto;
left: auto;
float: none;
display: block;
display: none;
max-width: none;
margin: 0 15px;
padding: 0;
@@ -108,6 +112,10 @@
.border-radius(0);
.box-shadow(none);
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
@@ -129,7 +137,7 @@
margin: (@baseLineHeight / 2) 0;
border-top: 1px solid @navbarBackground;
border-bottom: 1px solid @navbarBackground;
.box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1));
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
@@ -166,7 +174,7 @@
// DEFAULT DESKTOP
// ---------------
@media (min-width: 980px) {
@media (min-width: @navbarCollapseDesktopWidth) {
// Required to make the collapsing navbar work on regular desktops
.nav-collapse.collapse {

View File

@@ -1,5 +1,5 @@
/*!
* Bootstrap Responsive v2.1.1
* Bootstrap Responsive v2.2.0
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0

View File

@@ -30,8 +30,6 @@
/* White icons with optional class, or on hover/active states of certain elements */
.icon-white,
.nav-tabs > .active > a > [class^="icon-"],
.nav-tabs > .active > a > [class*=" icon-"],
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
@@ -41,7 +39,9 @@
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"] {
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
background-image: url("@{iconWhiteSpritePath}");
}

View File

@@ -71,7 +71,7 @@ table {
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapse; // IE7 can't round corners anyway
border-left: 0;
.border-radius(4px);
.border-radius(@baseBorderRadius);
th,
td {
border-left: 1px solid @tableBorder;
@@ -133,7 +133,7 @@ table {
colgroup + tbody tr:first-child td:last-child {
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
}
@@ -172,39 +172,30 @@ table {
// -----------------
// Reset default grid behavior
table [class*=span],
.row-fluid table [class*=span] {
table td[class*="span"],
table th[class*="span"],
.row-fluid table td[class*="span"],
.row-fluid table th[class*="span"] {
display: table-cell;
float: none; // undo default grid column styles
margin-left: 0; // undo default grid column styles
}
// Change the column widths to account for td/th padding
.table {
.span1 { .tableColumns(1); }
.span2 { .tableColumns(2); }
.span3 { .tableColumns(3); }
.span4 { .tableColumns(4); }
.span5 { .tableColumns(5); }
.span6 { .tableColumns(6); }
.span7 { .tableColumns(7); }
.span8 { .tableColumns(8); }
.span9 { .tableColumns(9); }
.span10 { .tableColumns(10); }
.span11 { .tableColumns(11); }
.span12 { .tableColumns(12); }
.span13 { .tableColumns(13); }
.span14 { .tableColumns(14); }
.span15 { .tableColumns(15); }
.span16 { .tableColumns(16); }
.span17 { .tableColumns(17); }
.span18 { .tableColumns(18); }
.span19 { .tableColumns(19); }
.span20 { .tableColumns(20); }
.span21 { .tableColumns(21); }
.span22 { .tableColumns(22); }
.span23 { .tableColumns(23); }
.span24 { .tableColumns(24); }
.table td,
.table th {
&.span1 { .tableColumns(1); }
&.span2 { .tableColumns(2); }
&.span3 { .tableColumns(3); }
&.span4 { .tableColumns(4); }
&.span5 { .tableColumns(5); }
&.span6 { .tableColumns(6); }
&.span7 { .tableColumns(7); }
&.span8 { .tableColumns(8); }
&.span9 { .tableColumns(9); }
&.span10 { .tableColumns(10); }
&.span11 { .tableColumns(11); }
&.span12 { .tableColumns(12); }
}

View File

@@ -29,7 +29,7 @@
padding: 4px;
line-height: @baseLineHeight;
border: 1px solid #ddd;
.border-radius(4px);
.border-radius(@baseBorderRadius);
.box-shadow(0 1px 3px rgba(0,0,0,.055));
.transition(all .2s ease-in-out);
}

View File

@@ -27,7 +27,7 @@
text-align: center;
text-decoration: none;
background-color: @tooltipBackground;
.border-radius(4px);
.border-radius(@baseBorderRadius);
}
// Arrows

View File

@@ -37,18 +37,17 @@ cite {
.muted {
color: @grayLight;
}
.text-warning {
color: @warningText;
}
.text-error {
color: @errorText;
}
.text-info {
color: @infoText;
}
.text-success {
color: @successText;
}
.text-warning { color: @warningText; }
a.text-warning:hover { color: darken(@warningText, 10%); }
.text-error { color: @errorText; }
a.text-error:hover { color: darken(@errorText, 10%); }
.text-info { color: @infoText; }
a.text-info:hover { color: darken(@infoText, 10%); }
.text-success { color: @successText; }
a.text-success:hover { color: darken(@successText, 10%); }
// Headings
@@ -58,7 +57,7 @@ h1, h2, h3, h4, h5, h6 {
margin: (@baseLineHeight / 2) 0;
font-family: @headingsFontFamily;
font-weight: @headingsFontWeight;
line-height: 1;
line-height: @baseLineHeight;
color: @headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
@@ -67,17 +66,22 @@ h1, h2, h3, h4, h5, h6 {
color: @grayLight;
}
}
h1 { font-size: 36px; line-height: 40px; }
h2 { font-size: 30px; line-height: 40px; }
h3 { font-size: 24px; line-height: 40px; }
h4 { font-size: 18px; line-height: 20px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 20px; }
h1 small { font-size: 24px; }
h2 small { font-size: 18px; }
h3 small { font-size: 14px; }
h4 small { font-size: 14px; }
h1,
h2,
h3 { line-height: @baseLineHeight * 2; }
h1 { font-size: @baseFontSize * 2.75; } // ~38px
h2 { font-size: @baseFontSize * 2.25; } // ~32px
h3 { font-size: @baseFontSize * 1.75; } // ~24px
h4 { font-size: @baseFontSize * 1.25; } // ~18px
h5 { font-size: @baseFontSize; }
h6 { font-size: @baseFontSize * 0.85; } // ~12px
h1 small { font-size: @baseFontSize * 1.75; } // ~24px
h2 small { font-size: @baseFontSize * 1.25; } // ~18px
h3 small { font-size: @baseFontSize; }
h4 small { font-size: @baseFontSize; }
// Page header
@@ -155,7 +159,9 @@ hr {
}
// Abbreviations and acronyms
abbr[title] {
abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted @grayLight;
}

View File

@@ -57,6 +57,24 @@
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor
// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height
@fontSizeLarge: @baseFontSize * 1.25; // ~18px
@fontSizeSmall: @baseFontSize * 0.85; // ~12px
@fontSizeMini: @baseFontSize * 0.75; // ~11px
@paddingLarge: 11px 19px; // 44px
@paddingSmall: 2px 10px; // 26px
@paddingMini: 1px 6px; // 24px
@baseBorderRadius: 4px;
@borderRadiusLarge: 6px;
@borderRadiusSmall: 3px;
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@@ -93,9 +111,11 @@
// -------------------------
@inputBackground: @white;
@inputBorder: #ccc;
@inputBorderRadius: 3px;
@inputBorderRadius: @baseBorderRadius;
@inputDisabledBackground: @grayLighter;
@formActionsBackground: #f5f5f5;
@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
// Dropdowns
// -------------------------
@@ -116,6 +136,7 @@
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
@@ -157,6 +178,7 @@
// Navbar
// -------------------------
@navbarCollapseWidth: 979px;
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 40px;
@navbarBackgroundHighlight: #ffffff;

View File

@@ -10,7 +10,7 @@
margin-bottom: 20px;
background-color: @wellBackground;
border: 1px solid darken(@wellBackground, 7%);
.border-radius(4px);
.border-radius(@baseBorderRadius);
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
blockquote {
border-color: #ddd;
@@ -21,9 +21,9 @@
// Sizes
.well-large {
padding: 24px;
.border-radius(6px);
.border-radius(@borderRadiusLarge);
}
.well-small {
padding: 9px;
.border-radius(3px);
.border-radius(@borderRadiusSmall);
}