upgrading docs to bootstrap 3.0.2

This commit is contained in:
davegandy 2013-12-02 12:54:14 -05:00
parent 7603a9482c
commit 24356ebde8
47 changed files with 812 additions and 768 deletions

View File

@ -51,7 +51,7 @@ fontawesome:
url: http://creativecommons.org/licenses/by/3.0/ url: http://creativecommons.org/licenses/by/3.0/
bootstrap: bootstrap:
version: 3.0.0 version: 3.0.2
url: http://getbootstrap.com url: http://getbootstrap.com
jquery: jquery:

View File

@ -17,7 +17,7 @@ SITE_LESS_DIRECTORY = assets/less
SITE_CSS_DIRECTORY = assets/css SITE_CSS_DIRECTORY = assets/css
SITE_LESS = ${SITE_LESS_DIRECTORY}/site.less SITE_LESS = ${SITE_LESS_DIRECTORY}/site.less
SITE_CSS_MIN = ${SITE_CSS_DIRECTORY}/site.css SITE_CSS = ${SITE_CSS_DIRECTORY}/site.css
build: build:
@echo "Compiling Less files" @echo "Compiling Less files"
@ -27,7 +27,7 @@ build:
lessc --yui-compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN} lessc --yui-compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN}
# sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN} # sass ${FA_SCSS_MODERN} ${FA_CSS_MODERN}
lessc --compress ${SITE_LESS} > ${SITE_CSS_MIN} lessc --yui-compress ${SITE_LESS} > ${SITE_CSS}
cp -r ${FA_ROOT_DIRECTORY}/* ../ cp -r ${FA_ROOT_DIRECTORY}/* ../
cd assets && mv font-awesome font-awesome-{{ site.fontawesome.version }} && zip -r9 font-awesome-{{ site.fontawesome.version }}.zip font-awesome-{{ site.fontawesome.version }} && mv font-awesome-{{ site.fontawesome.version }} font-awesome cd assets && mv font-awesome font-awesome-{{ site.fontawesome.version }} && zip -r9 font-awesome-{{ site.fontawesome.version }}.zip font-awesome-{{ site.fontawesome.version }} && mv font-awesome-{{ site.fontawesome.version }} font-awesome

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

9
src/assets/js/bootstrap-3.0.2.min.js vendored Executable file

File diff suppressed because one or more lines are too long

View File

@ -1,346 +0,0 @@
//
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
}
// mobile first defaults
.row {
.make-row();
}
// Common styles for small and large grid columns
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12 {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
// Extra small grid
//
// Grid classes for extra small devices like smartphones. No offset, push, or
// pull classes are present here due to the size of the target.
//
// Note that `.col-xs-12` doesn't get floated on purpose—there's no need since
// it's full-width.
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11 {
float: left;
}
.col-xs-1 { width: percentage((1 / @grid-columns)); }
.col-xs-2 { width: percentage((2 / @grid-columns)); }
.col-xs-3 { width: percentage((3 / @grid-columns)); }
.col-xs-4 { width: percentage((4 / @grid-columns)); }
.col-xs-5 { width: percentage((5 / @grid-columns)); }
.col-xs-6 { width: percentage((6 / @grid-columns)); }
.col-xs-7 { width: percentage((7 / @grid-columns)); }
.col-xs-8 { width: percentage((8 / @grid-columns)); }
.col-xs-9 { width: percentage((9 / @grid-columns)); }
.col-xs-10 { width: percentage((10/ @grid-columns)); }
.col-xs-11 { width: percentage((11/ @grid-columns)); }
.col-xs-12 { width: 100%; }
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
//
// Note that `.col-sm-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-tablet) {
.container {
max-width: @container-tablet;
}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11 {
float: left;
}
.col-sm-1 { width: percentage((1 / @grid-columns)); }
.col-sm-2 { width: percentage((2 / @grid-columns)); }
.col-sm-3 { width: percentage((3 / @grid-columns)); }
.col-sm-4 { width: percentage((4 / @grid-columns)); }
.col-sm-5 { width: percentage((5 / @grid-columns)); }
.col-sm-6 { width: percentage((6 / @grid-columns)); }
.col-sm-7 { width: percentage((7 / @grid-columns)); }
.col-sm-8 { width: percentage((8 / @grid-columns)); }
.col-sm-9 { width: percentage((9 / @grid-columns)); }
.col-sm-10 { width: percentage((10/ @grid-columns)); }
.col-sm-11 { width: percentage((11/ @grid-columns)); }
.col-sm-12 { width: 100%; }
// Push and pull columns for source order changes
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
.col-sm-push-2 { left: percentage((2 / @grid-columns)); }
.col-sm-push-3 { left: percentage((3 / @grid-columns)); }
.col-sm-push-4 { left: percentage((4 / @grid-columns)); }
.col-sm-push-5 { left: percentage((5 / @grid-columns)); }
.col-sm-push-6 { left: percentage((6 / @grid-columns)); }
.col-sm-push-7 { left: percentage((7 / @grid-columns)); }
.col-sm-push-8 { left: percentage((8 / @grid-columns)); }
.col-sm-push-9 { left: percentage((9 / @grid-columns)); }
.col-sm-push-10 { left: percentage((10/ @grid-columns)); }
.col-sm-push-11 { left: percentage((11/ @grid-columns)); }
.col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
.col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
.col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
.col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
.col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
.col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
.col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
.col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
.col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
.col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
.col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
//
// Note that `.col-md-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-desktop) {
.container {
max-width: @container-desktop;
}
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11 {
float: left;
}
.col-md-1 { width: percentage((1 / @grid-columns)); }
.col-md-2 { width: percentage((2 / @grid-columns)); }
.col-md-3 { width: percentage((3 / @grid-columns)); }
.col-md-4 { width: percentage((4 / @grid-columns)); }
.col-md-5 { width: percentage((5 / @grid-columns)); }
.col-md-6 { width: percentage((6 / @grid-columns)); }
.col-md-7 { width: percentage((7 / @grid-columns)); }
.col-md-8 { width: percentage((8 / @grid-columns)); }
.col-md-9 { width: percentage((9 / @grid-columns)); }
.col-md-10 { width: percentage((10/ @grid-columns)); }
.col-md-11 { width: percentage((11/ @grid-columns)); }
.col-md-12 { width: 100%; }
// Push and pull columns for source order changes
.col-md-push-0 { left: auto; }
.col-md-push-1 { left: percentage((1 / @grid-columns)); }
.col-md-push-2 { left: percentage((2 / @grid-columns)); }
.col-md-push-3 { left: percentage((3 / @grid-columns)); }
.col-md-push-4 { left: percentage((4 / @grid-columns)); }
.col-md-push-5 { left: percentage((5 / @grid-columns)); }
.col-md-push-6 { left: percentage((6 / @grid-columns)); }
.col-md-push-7 { left: percentage((7 / @grid-columns)); }
.col-md-push-8 { left: percentage((8 / @grid-columns)); }
.col-md-push-9 { left: percentage((9 / @grid-columns)); }
.col-md-push-10 { left: percentage((10/ @grid-columns)); }
.col-md-push-11 { left: percentage((11/ @grid-columns)); }
.col-md-pull-0 { right: auto; }
.col-md-pull-1 { right: percentage((1 / @grid-columns)); }
.col-md-pull-2 { right: percentage((2 / @grid-columns)); }
.col-md-pull-3 { right: percentage((3 / @grid-columns)); }
.col-md-pull-4 { right: percentage((4 / @grid-columns)); }
.col-md-pull-5 { right: percentage((5 / @grid-columns)); }
.col-md-pull-6 { right: percentage((6 / @grid-columns)); }
.col-md-pull-7 { right: percentage((7 / @grid-columns)); }
.col-md-pull-8 { right: percentage((8 / @grid-columns)); }
.col-md-pull-9 { right: percentage((9 / @grid-columns)); }
.col-md-pull-10 { right: percentage((10/ @grid-columns)); }
.col-md-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-md-offset-0 { margin-left: 0; }
.col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
//
// Note that `.col-lg-12` doesn't get floated on purpose—there's no need since
// it's full-width.
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-lg-desktop;
}
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11 {
float: left;
}
.col-lg-1 { width: percentage((1 / @grid-columns)); }
.col-lg-2 { width: percentage((2 / @grid-columns)); }
.col-lg-3 { width: percentage((3 / @grid-columns)); }
.col-lg-4 { width: percentage((4 / @grid-columns)); }
.col-lg-5 { width: percentage((5 / @grid-columns)); }
.col-lg-6 { width: percentage((6 / @grid-columns)); }
.col-lg-7 { width: percentage((7 / @grid-columns)); }
.col-lg-8 { width: percentage((8 / @grid-columns)); }
.col-lg-9 { width: percentage((9 / @grid-columns)); }
.col-lg-10 { width: percentage((10/ @grid-columns)); }
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
// Push and pull columns for source order changes
.col-lg-push-0 { left: auto; }
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
.col-lg-push-4 { left: percentage((4 / @grid-columns)); }
.col-lg-push-5 { left: percentage((5 / @grid-columns)); }
.col-lg-push-6 { left: percentage((6 / @grid-columns)); }
.col-lg-push-7 { left: percentage((7 / @grid-columns)); }
.col-lg-push-8 { left: percentage((8 / @grid-columns)); }
.col-lg-push-9 { left: percentage((9 / @grid-columns)); }
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
.col-lg-pull-0 { right: auto; }
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
.col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
.col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
.col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
.col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
.col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
.col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
.col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-lg-offset-0 { margin-left: 0; }
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}

View File

@ -1,31 +0,0 @@
//
// Thumbnails
// --------------------------------------------------
// Mixin and adjust the regular image class
.thumbnail {
.img-thumbnail();
display: block; // Override the inline-block from `.img-thumbnail`
> img {
.img-responsive();
}
}
// Add a hover state for linked versions only
a.thumbnail:hover,
a.thumbnail:focus {
border-color: @link-color;
}
// Images and captions
.thumbnail > img {
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: @thumbnail-caption-padding;
color: @thumbnail-caption-color;
}

View File

@ -15,7 +15,7 @@
// Headings for larger alerts // Headings for larger alerts
h4 { h4 {
margin-top: 0; margin-top: 0;
// Specified for the h4 to prevent conflicts of changing @headingsColor // Specified for the h4 to prevent conflicts of changing @headings-color
color: inherit; color: inherit;
} }
// Provide class for links that match alerts // Provide class for links that match alerts

View File

@ -1,13 +1,3 @@
/*!
* Bootstrap v3.0.0
*
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world by @mdo and @fat.
*/
// Core variables and mixins // Core variables and mixins
@import "variables.less"; @import "variables.less";
@import "mixins.less"; @import "mixins.less";

View File

@ -11,8 +11,8 @@
border-radius: @border-radius-base; border-radius: @border-radius-base;
> li { > li {
display: inline-block; display: inline-block;
&+li:before { + li:before {
content: "/\00a0"; // Unicode space added since inline-block means non-collapsing white-space content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px; padding: 0 5px;
color: @breadcrumb-color; color: @breadcrumb-color;
} }

View File

@ -19,7 +19,7 @@
} }
} }
.dropup { .dropup {
& .btn-default .caret { .btn-default .caret {
border-bottom-color: @btn-default-color; border-bottom-color: @btn-default-color;
} }
.btn-primary, .btn-primary,
@ -150,6 +150,11 @@
// Remove the gradient and set the same inset shadow as the :active state // Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle { .btn-group.open .dropdown-toggle {
.box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
// Show no shadow for `.btn-link` since it has no other button styles.
&.btn-link {
.box-shadow(none);
}
} }

View File

@ -9,17 +9,15 @@
// Core styles // Core styles
.btn { .btn {
display: inline-block; display: inline-block;
padding: @padding-base-vertical @padding-base-horizontal;
margin-bottom: 0; // For input.btn margin-bottom: 0; // For input.btn
font-size: @font-size-base;
font-weight: @btn-font-weight; font-weight: @btn-font-weight;
line-height: @line-height-base;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid transparent; border: 1px solid transparent;
border-radius: @border-radius-base;
white-space: nowrap; white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
.user-select(none); .user-select(none);
&:focus { &:focus {

View File

@ -75,7 +75,7 @@
color: @carousel-control-color; color: @carousel-control-color;
text-align: center; text-align: center;
text-shadow: @carousel-text-shadow; text-shadow: @carousel-text-shadow;
// We can't have this transition here because webkit cancels the carousel // We can't have this transition here because WebKit cancels the carousel
// animation if you trip this while in the middle of another animation. // animation if you trip this while in the middle of another animation.
// Set gradients for backgrounds // Set gradients for backgrounds
@ -103,11 +103,18 @@
.glyphicon-chevron-right { .glyphicon-chevron-right {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%;
z-index: 5; z-index: 5;
display: inline-block; display: inline-block;
} }
.icon-prev, .icon-prev,
.glyphicon-chevron-left {
left: 50%;
}
.icon-next,
.glyphicon-chevron-right {
right: 50%;
}
.icon-prev,
.icon-next { .icon-next {
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -153,6 +160,17 @@
border: 1px solid @carousel-indicator-border-color; border: 1px solid @carousel-indicator-border-color;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
// IE8-9 hack for event handling
//
// Internet Explorer 8-9 does not support clicks on elements without a set
// `background-color`. We cannot use `filter` since that's not viewed as a
// background color by the browser. Thus, a hack is needed.
//
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color: #000 \9; // IE8
background-color: rgba(0,0,0,0); // IE9
} }
.active { .active {
margin: 0; margin: 0;
@ -183,16 +201,20 @@
// Scale up controls for tablets and up // Scale up controls for tablets and up
@media screen and (min-width: @screen-tablet) { @media screen and (min-width: @screen-sm-min) {
// Scale up the controls a smidge // Scale up the controls a smidge
.carousel-control .icon-prev, .carousel-control {
.carousel-control .icon-next { .glyphicons-chevron-left,
width: 30px; .glyphicons-chevron-right,
height: 30px; .icon-prev,
margin-top: -15px; .icon-next {
margin-left: -15px; width: 30px;
font-size: 30px; height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
}
} }
// Show and left align the captions // Show and left align the captions

View File

@ -1,11 +1,13 @@
// //
// Code (inline and blocK) // Code (inline and block)
// -------------------------------------------------- // --------------------------------------------------
// Inline and block code styles // Inline and block code styles
code, code,
pre { kbd,
pre,
samp {
font-family: @font-family-monospace; font-family: @font-family-monospace;
} }
@ -33,11 +35,6 @@ pre {
border: 1px solid @pre-border-color; border: 1px solid @pre-border-color;
border-radius: @border-radius-base; border-radius: @border-radius-base;
// Make prettyprint styles more spaced out for readability
&.prettyprint {
margin-bottom: @line-height-computed;
}
// Account for some code outputs that place code tags in pre tags // Account for some code outputs that place code tags in pre tags
code { code {
padding: 0; padding: 0;
@ -45,7 +42,7 @@ pre {
color: inherit; color: inherit;
white-space: pre-wrap; white-space: pre-wrap;
background-color: transparent; background-color: transparent;
border: 0; border-radius: 0;
} }
} }

View File

@ -16,7 +16,6 @@
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed, // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
// we can just straight up remove this. // we can just straight up remove this.
border-bottom: 0 dotted; border-bottom: 0 dotted;
content: "";
} }
// The dropdown wrapper (div) // The dropdown wrapper (div)
@ -167,7 +166,7 @@
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
// gets fixed, restore `border-top: 0;`. // gets fixed, restore `border-top: 0;`.
border-top: 0 dotted; border-top: 0 dotted;
border-bottom: 4px solid @dropdown-caret-color; border-bottom: @caret-width-base solid @dropdown-caret-color;
content: ""; content: "";
} }
// Different positioning for bottom up menu // Different positioning for bottom up menu

View File

@ -82,13 +82,14 @@ input[type="number"] {
} }
} }
// Adjust output element
// Placeholder output {
// display: block;
// Placeholder text gets special styles because when browsers invalidate entire padding-top: (@padding-base-vertical + 1);
// lines if it doesn't understand a selector/ font-size: @font-size-base;
.form-control { line-height: @line-height-base;
.placeholder(); color: @input-color;
vertical-align: middle;
} }
@ -124,6 +125,7 @@ input[type="number"] {
color: @input-color; color: @input-color;
vertical-align: middle; vertical-align: middle;
background-color: @input-bg; background-color: @input-bg;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 1px solid @input-border; border: 1px solid @input-border;
border-radius: @input-border-radius; border-radius: @input-border-radius;
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
@ -132,6 +134,12 @@ input[type="number"] {
// Customize the `:focus` state to imitate native WebKit styles. // Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus(); .form-control-focus();
// Placeholder
//
// Placeholder text gets special styles because when browsers invalidate entire
// lines if it doesn't understand a selector/
.placeholder();
// Disabled and read-only inputs // Disabled and read-only inputs
// Note: HTML5 says that controls under a fieldset > legend:first-child won't // Note: HTML5 says that controls under a fieldset > legend:first-child won't
// be disabled if the fieldset is disabled. Due to implementation difficulty, // be disabled if the fieldset is disabled. Due to implementation difficulty,
@ -257,7 +265,6 @@ input[type="checkbox"],
.form-control-static { .form-control-static {
margin-bottom: 0; // Remove default margin from `p` margin-bottom: 0; // Remove default margin from `p`
padding-top: (@padding-base-vertical + 1);
} }
@ -289,7 +296,7 @@ input[type="checkbox"],
.form-inline { .form-inline {
// Kick in the inline // Kick in the inline
@media (min-width: @screen-tablet) { @media (min-width: @screen-sm) {
// Inline-block all the things for "inline" // Inline-block all the things for "inline"
.form-group { .form-group {
display: inline-block; display: inline-block;
@ -344,8 +351,12 @@ input[type="checkbox"],
.make-row(); .make-row();
} }
.form-control-static {
padding-top: (@padding-base-vertical + 1);
}
// Only right align form labels here when the columns stop stacking // Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) { @media (min-width: @screen-sm-min) {
.control-label { .control-label {
text-align: right; text-align: right;
} }

View File

@ -14,7 +14,7 @@
src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'), src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'),
url('@{icon-font-path}@{icon-font-name}.woff') format('woff'), url('@{icon-font-path}@{icon-font-name}.woff') format('woff'),
url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'), url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'),
url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg'); url('@{icon-font-path}@{icon-font-name}.svg#glyphicons_halflingsregular') format('svg');
} }
// Catchall baseclass // Catchall baseclass
@ -27,6 +27,11 @@
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:empty {
width: 1em;
}
} }
// Individual icons // Individual icons
@ -68,6 +73,7 @@
.glyphicon-repeat { &:before { content: "\e030"; } } .glyphicon-repeat { &:before { content: "\e030"; } }
.glyphicon-refresh { &:before { content: "\e031"; } } .glyphicon-refresh { &:before { content: "\e031"; } }
.glyphicon-list-alt { &:before { content: "\e032"; } } .glyphicon-list-alt { &:before { content: "\e032"; } }
.glyphicon-lock { &:before { content: "\e033"; } }
.glyphicon-flag { &:before { content: "\e034"; } } .glyphicon-flag { &:before { content: "\e034"; } }
.glyphicon-headphones { &:before { content: "\e035"; } } .glyphicon-headphones { &:before { content: "\e035"; } }
.glyphicon-volume-off { &:before { content: "\e036"; } } .glyphicon-volume-off { &:before { content: "\e036"; } }
@ -78,7 +84,9 @@
.glyphicon-tag { &:before { content: "\e041"; } } .glyphicon-tag { &:before { content: "\e041"; } }
.glyphicon-tags { &:before { content: "\e042"; } } .glyphicon-tags { &:before { content: "\e042"; } }
.glyphicon-book { &:before { content: "\e043"; } } .glyphicon-book { &:before { content: "\e043"; } }
.glyphicon-bookmark { &:before { content: "\e044"; } }
.glyphicon-print { &:before { content: "\e045"; } } .glyphicon-print { &:before { content: "\e045"; } }
.glyphicon-camera { &:before { content: "\e046"; } }
.glyphicon-font { &:before { content: "\e047"; } } .glyphicon-font { &:before { content: "\e047"; } }
.glyphicon-bold { &:before { content: "\e048"; } } .glyphicon-bold { &:before { content: "\e048"; } }
.glyphicon-italic { &:before { content: "\e049"; } } .glyphicon-italic { &:before { content: "\e049"; } }
@ -132,10 +140,12 @@
.glyphicon-exclamation-sign { &:before { content: "\e101"; } } .glyphicon-exclamation-sign { &:before { content: "\e101"; } }
.glyphicon-gift { &:before { content: "\e102"; } } .glyphicon-gift { &:before { content: "\e102"; } }
.glyphicon-leaf { &:before { content: "\e103"; } } .glyphicon-leaf { &:before { content: "\e103"; } }
.glyphicon-fire { &:before { content: "\e104"; } }
.glyphicon-eye-open { &:before { content: "\e105"; } } .glyphicon-eye-open { &:before { content: "\e105"; } }
.glyphicon-eye-close { &:before { content: "\e106"; } } .glyphicon-eye-close { &:before { content: "\e106"; } }
.glyphicon-warning-sign { &:before { content: "\e107"; } } .glyphicon-warning-sign { &:before { content: "\e107"; } }
.glyphicon-plane { &:before { content: "\e108"; } } .glyphicon-plane { &:before { content: "\e108"; } }
.glyphicon-calendar { &:before { content: "\e109"; } }
.glyphicon-random { &:before { content: "\e110"; } } .glyphicon-random { &:before { content: "\e110"; } }
.glyphicon-comment { &:before { content: "\e111"; } } .glyphicon-comment { &:before { content: "\e111"; } }
.glyphicon-magnet { &:before { content: "\e112"; } } .glyphicon-magnet { &:before { content: "\e112"; } }
@ -149,6 +159,7 @@
.glyphicon-resize-horizontal { &:before { content: "\e120"; } } .glyphicon-resize-horizontal { &:before { content: "\e120"; } }
.glyphicon-hdd { &:before { content: "\e121"; } } .glyphicon-hdd { &:before { content: "\e121"; } }
.glyphicon-bullhorn { &:before { content: "\e122"; } } .glyphicon-bullhorn { &:before { content: "\e122"; } }
.glyphicon-bell { &:before { content: "\e123"; } }
.glyphicon-certificate { &:before { content: "\e124"; } } .glyphicon-certificate { &:before { content: "\e124"; } }
.glyphicon-thumbs-up { &:before { content: "\e125"; } } .glyphicon-thumbs-up { &:before { content: "\e125"; } }
.glyphicon-thumbs-down { &:before { content: "\e126"; } } .glyphicon-thumbs-down { &:before { content: "\e126"; } }
@ -161,13 +172,17 @@
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } } .glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } } .glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
.glyphicon-globe { &:before { content: "\e135"; } } .glyphicon-globe { &:before { content: "\e135"; } }
.glyphicon-wrench { &:before { content: "\e136"; } }
.glyphicon-tasks { &:before { content: "\e137"; } } .glyphicon-tasks { &:before { content: "\e137"; } }
.glyphicon-filter { &:before { content: "\e138"; } } .glyphicon-filter { &:before { content: "\e138"; } }
.glyphicon-briefcase { &:before { content: "\e139"; } }
.glyphicon-fullscreen { &:before { content: "\e140"; } } .glyphicon-fullscreen { &:before { content: "\e140"; } }
.glyphicon-dashboard { &:before { content: "\e141"; } } .glyphicon-dashboard { &:before { content: "\e141"; } }
.glyphicon-paperclip { &:before { content: "\e142"; } }
.glyphicon-heart-empty { &:before { content: "\e143"; } } .glyphicon-heart-empty { &:before { content: "\e143"; } }
.glyphicon-link { &:before { content: "\e144"; } } .glyphicon-link { &:before { content: "\e144"; } }
.glyphicon-phone { &:before { content: "\e145"; } } .glyphicon-phone { &:before { content: "\e145"; } }
.glyphicon-pushpin { &:before { content: "\e146"; } }
.glyphicon-usd { &:before { content: "\e148"; } } .glyphicon-usd { &:before { content: "\e148"; } }
.glyphicon-gbp { &:before { content: "\e149"; } } .glyphicon-gbp { &:before { content: "\e149"; } }
.glyphicon-sort { &:before { content: "\e150"; } } .glyphicon-sort { &:before { content: "\e150"; } }
@ -220,13 +235,3 @@
.glyphicon-cloud-upload { &:before { content: "\e198"; } } .glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } } .glyphicon-tree-conifer { &:before { content: "\e199"; } }
.glyphicon-tree-deciduous { &:before { content: "\e200"; } } .glyphicon-tree-deciduous { &:before { content: "\e200"; } }
.glyphicon-briefcase { &:before { content: "\1f4bc"; } }
.glyphicon-calendar { &:before { content: "\1f4c5"; } }
.glyphicon-pushpin { &:before { content: "\1f4cc"; } }
.glyphicon-paperclip { &:before { content: "\1f4ce"; } }
.glyphicon-camera { &:before { content: "\1f4f7"; } }
.glyphicon-lock { &:before { content: "\1f512"; } }
.glyphicon-bell { &:before { content: "\1f514"; } }
.glyphicon-bookmark { &:before { content: "\1f516"; } }
.glyphicon-fire { &:before { content: "\1f525"; } }
.glyphicon-wrench { &:before { content: "\1f527"; } }

93
src/assets/less/bootstrap-3.0.2/grid.less vendored Executable file
View File

@ -0,0 +1,93 @@
//
// Grid system
// --------------------------------------------------
// Set the container width, and override it for fixed navbars in media queries
.container {
.container-fixed();
}
// mobile first defaults
.row {
.make-row();
}
// Common styles for small and large grid columns
.make-grid-columns();
// Extra small grid
//
// Grid classes for extra small devices like smartphones. No offset, push, or
// pull classes are present here due to the size of the target.
//
// Note that `.col-xs-12` doesn't get floated on purpose--there's no need since
// it's full-width.
.make-grid-columns-float(xs);
.make-grid(@grid-columns, xs, width);
.make-grid(@grid-columns, xs, pull);
.make-grid(@grid-columns, xs, push);
.make-grid(@grid-columns, xs, offset);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
//
// Note that `.col-sm-12` doesn't get floated on purpose--there's no need since
// it's full-width.
@media (min-width: @screen-sm-min) {
.container {
width: @container-sm;
}
.make-grid-columns-float(sm);
.make-grid(@grid-columns, sm, width);
.make-grid(@grid-columns, sm, pull);
.make-grid(@grid-columns, sm, push);
.make-grid(@grid-columns, sm, offset);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
//
// Note that `.col-md-12` doesn't get floated on purpose--there's no need since
// it's full-width.
@media (min-width: @screen-md-min) {
.container {
width: @container-md;
}
.make-grid-columns-float(md);
.make-grid(@grid-columns, md, width);
.make-grid(@grid-columns, md, pull);
.make-grid(@grid-columns, md, push);
.make-grid(@grid-columns, md, offset);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
//
// Note that `.col-lg-12` doesn't get floated on purpose--there's no need since
// it's full-width.
@media (min-width: @screen-lg-min) {
.container {
width: @container-lg;
}
.make-grid-columns-float(lg);
.make-grid(@grid-columns, lg, width);
.make-grid(@grid-columns, lg, pull);
.make-grid(@grid-columns, lg, push);
.make-grid(@grid-columns, lg, offset);
}

View File

@ -61,6 +61,7 @@
font-size: @font-size-base; font-size: @font-size-base;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: @input-color;
text-align: center; text-align: center;
background-color: @input-group-addon-bg; background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color; border: 1px solid @input-group-addon-border-color;
@ -112,6 +113,14 @@
.input-group-btn { .input-group-btn {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
// Negative margin to only have a 1px border between the two
&:first-child > .btn {
margin-right: -1px;
}
&:last-child > .btn {
margin-left: -1px;
}
} }
.input-group-btn > .btn { .input-group-btn > .btn {
position: relative; position: relative;

View File

@ -6,7 +6,7 @@
.jumbotron { .jumbotron {
padding: @jumbotron-padding; padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding; margin-bottom: @jumbotron-padding;
font-size: (@font-size-base * 1.5); font-size: @jumbotron-font-size;
font-weight: 200; font-weight: 200;
line-height: (@line-height-base * 1.5); line-height: (@line-height-base * 1.5);
color: @jumbotron-color; color: @jumbotron-color;
@ -24,7 +24,7 @@
border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container
} }
@media screen and (min-width: @screen-tablet) { @media screen and (min-width: @screen-sm-min) {
padding-top: (@jumbotron-padding * 1.6); padding-top: (@jumbotron-padding * 1.6);
padding-bottom: (@jumbotron-padding * 1.6); padding-bottom: (@jumbotron-padding * 1.6);

View File

@ -39,21 +39,21 @@
> .badge + .badge { > .badge + .badge {
margin-right: 5px; margin-right: 5px;
} }
}
// Linked list items // Linked list items
a& { a.list-group-item {
color: @list-group-link-color; color: @list-group-link-color;
.list-group-item-heading { .list-group-item-heading {
color: @list-group-link-heading-color; color: @list-group-link-heading-color;
} }
// Hover state // Hover state
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
background-color: @list-group-hover-bg; background-color: @list-group-hover-bg;
}
} }
// Active class on item itself, not parent // Active class on item itself, not parent

View File

@ -27,11 +27,11 @@
} }
} }
// Webkit-style focus // WebKit-style focus
.tab-focus() { .tab-focus() {
// Default // Default
outline: thin dotted #333; outline: thin dotted #333;
// Webkit // WebKit
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
} }
@ -69,7 +69,15 @@
} }
// CSS image replacement // CSS image replacement
//
// Heads up! v3 launched with with only `.hide-text()`, but per our pattern for
// mixins being reused as classes with the same name, this doesn't hold up. As
// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. Note
// that we cannot chain the mixins together in Less, so they are repeated.
//
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() { .hide-text() {
font: ~"0/0" a; font: ~"0/0" a;
color: transparent; color: transparent;
@ -77,6 +85,14 @@
background-color: transparent; background-color: transparent;
border: 0; border: 0;
} }
// New mixin to use as of v3.0.1
.text-hide() {
font: ~"0/0" a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
@ -112,6 +128,10 @@
-webkit-transition: @transition; -webkit-transition: @transition;
transition: @transition; transition: @transition;
} }
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) { .transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay; -webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay; transition-delay: @transition-delay;
@ -153,10 +173,41 @@
transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z);
} }
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9+
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9+
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
transform-origin: @origin;
}
// Animations
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
// Backface visibility // Backface visibility
// Prevent browsers from flickering when using CSS 3D transforms. // Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden` // Default value is `visible`, but can be changed to `hidden`
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
.backface-visibility(@visibility){ .backface-visibility(@visibility){
-webkit-backface-visibility: @visibility; -webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility; -moz-backface-visibility: @visibility;
@ -240,7 +291,7 @@
// Color stops are not available in IE9 and below. // Color stops are not available in IE9 and below.
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1+, Chrome 10+
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x; background-repeat: repeat-x;
@ -276,11 +327,11 @@
background-image: radial-gradient(circle, @inner-color, @outer-color); background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.striped(@color: #555; @angle: 45deg) { .striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
} }
} }
@ -342,13 +393,18 @@
// ------------------------- // -------------------------
.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) { .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) {
border-color: @border; border-color: @border;
& > .panel-heading { & > .panel-heading {
color: @heading-text-color; color: @heading-text-color;
background-color: @heading-bg-color; background-color: @heading-bg-color;
border-color: @heading-border; border-color: @heading-border;
+ .panel-collapse .panel-body { + .panel-collapse .panel-body {
border-top-color: @border; border-top-color: @border;
} }
& > .dropdown .caret {
border-color: @heading-text-color transparent;
}
} }
& > .panel-footer { & > .panel-footer {
+ .panel-collapse .panel-body { + .panel-collapse .panel-body {
@ -363,6 +419,7 @@
background-color: @background; background-color: @background;
border-color: @border; border-color: @border;
color: @text-color; color: @text-color;
hr { hr {
border-top-color: darken(@border, 5%); border-top-color: darken(@border, 5%);
} }
@ -384,7 +441,6 @@
&.@{state} > td, &.@{state} > td,
&.@{state} > th { &.@{state} > th {
background-color: @background; background-color: @background;
border-color: @border;
} }
} }
@ -393,9 +449,9 @@
.table-hover > tbody > tr { .table-hover > tbody > tr {
> td.@{state}:hover, > td.@{state}:hover,
> th.@{state}:hover, > th.@{state}:hover,
&.@{state}:hover > td { &.@{state}:hover > td,
&.@{state}:hover > th {
background-color: darken(@background, 5%); background-color: darken(@background, 5%);
border-color: darken(@border, 5%);
} }
} }
} }
@ -432,7 +488,7 @@
&:active, &:active,
&.active { &.active {
background-color: @background; background-color: @background;
border-color: @border border-color: @border;
} }
} }
} }
@ -496,7 +552,7 @@
.progress-bar-variant(@color) { .progress-bar-variant(@color) {
background-color: @color; background-color: @color;
.progress-striped & { .progress-striped & {
#gradient > .striped(@color); #gradient > .striped();
} }
} }
@ -511,12 +567,13 @@
} }
.responsive-invisibility() { .responsive-invisibility() {
display: none !important; &,
tr& { display: none !important; } tr&,
th&, th&,
td& { display: none !important; } td& { display: none !important; }
} }
// Grid System // Grid System
// ----------- // -----------
@ -558,7 +615,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-sm) { @media (min-width: @screen-sm-min) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@ -566,17 +623,17 @@
// Generate the small column offsets // Generate the small column offsets
.make-sm-column-offset(@columns) { .make-sm-column-offset(@columns) {
@media (min-width: @screen-sm) { @media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-push(@columns) { .make-sm-column-push(@columns) {
@media (min-width: @screen-sm) { @media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-sm-column-pull(@columns) { .make-sm-column-pull(@columns) {
@media (min-width: @screen-sm) { @media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@ -591,15 +648,15 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-md) { @media (min-width: @screen-md-min) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
} }
// Generate the large column offsets // Generate the medium column offsets
.make-md-column-offset(@columns) { .make-md-column-offset(@columns) {
@media (min-width: @screen-md) { @media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
@ -609,7 +666,7 @@
} }
} }
.make-md-column-pull(@columns) { .make-md-column-pull(@columns) {
@media (min-width: @screen-md) { @media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
@ -624,7 +681,7 @@
padding-right: (@gutter / 2); padding-right: (@gutter / 2);
// Calculate width based on number of columns available // Calculate width based on number of columns available
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
float: left; float: left;
width: percentage((@columns / @grid-columns)); width: percentage((@columns / @grid-columns));
} }
@ -632,22 +689,96 @@
// Generate the large column offsets // Generate the large column offsets
.make-lg-column-offset(@columns) { .make-lg-column-offset(@columns) {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns)); margin-left: percentage((@columns / @grid-columns));
} }
} }
.make-lg-column-push(@columns) { .make-lg-column-push(@columns) {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns)); left: percentage((@columns / @grid-columns));
} }
} }
.make-lg-column-pull(@columns) { .make-lg-column-pull(@columns) {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns)); right: percentage((@columns / @grid-columns));
} }
} }
// Framework grid generation
//
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) { // initial
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col(@index + 1, @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
.col(@index + 1, ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@{list} {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
}
}
.col(1); // kickstart it
}
.make-grid-columns-float(@class) {
.col(@index) when (@index = 1) { // initial
@item: ~".col-@{class}-@{index}";
.col(@index + 1, @item);
}
.col(@index, @list) when (@index < @grid-columns) { // general
@item: ~".col-@{class}-@{index}";
.col(@index + 1, ~"@{list}, @{item}");
}
.col(@index, @list) when (@index = @grid-columns) { // terminal
@{list} {
float: left;
}
}
.col(1); // kickstart it
}
.calc-grid(@index, @class, @type) when (@type = width) and (@index > 0) {
.col-@{class}-@{index} {
width: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = push) {
.col-@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = pull) {
.col-@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
}
.calc-grid(@index, @class, @type) when (@type = offset) {
.col-@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
}
// Basic looping in LESS
.make-grid(@index, @class, @type) when (@index >= 0) {
.calc-grid(@index, @class, @type);
// next iteration
.make-grid(@index - 1, @class, @type);
}
// Form validation states // Form validation states
// //
// Used in forms.less to generate the form validation CSS for warnings, errors, // Used in forms.less to generate the form validation CSS for warnings, errors,
@ -656,7 +787,11 @@
.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) { .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
// Color the label and help text // Color the label and help text
.help-block, .help-block,
.control-label { .control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
color: @text-color; color: @text-color;
} }
// Set the border and box shadow on specific inputs to match // Set the border and box shadow on specific inputs to match

View File

@ -10,14 +10,6 @@
// Kill the scroll on the body // Kill the scroll on the body
.modal-open { .modal-open {
overflow: hidden; overflow: hidden;
// Account for hiding of scrollbar
body&,
.navbar-fixed-top,
.navbar-fixed-bottom {
margin-right: 15px
}
} }
// Container that the modal scrolls within // Container that the modal scrolls within
@ -42,6 +34,7 @@
// Shell div to position the modal with bottom padding // Shell div to position the modal with bottom padding
.modal-dialog { .modal-dialog {
position: relative;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: auto; width: auto;
@ -125,11 +118,9 @@
} }
// Scale up the modal // Scale up the modal
@media screen and (min-width: @screen-tablet) { @media screen and (min-width: @screen-sm-min) {
.modal-dialog { .modal-dialog {
left: 50%;
right: auto;
width: 600px; width: 600px;
padding-top: 30px; padding-top: 30px;
padding-bottom: 30px; padding-bottom: 30px;

View File

@ -10,7 +10,6 @@
.navbar { .navbar {
position: relative; position: relative;
z-index: @zindex-navbar;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom; margin-bottom: @navbar-margin-bottom;
border: 1px solid transparent; border: 1px solid transparent;
@ -75,7 +74,7 @@
} }
&.in { &.in {
overflow-y: visible; overflow-y: auto;
} }
// Account for first and last children spacing // Account for first and last children spacing
@ -111,12 +110,14 @@
// //
// Navbar alignment options // Navbar alignment options
// //
// Display the navbar across the entirity of the page or fixed it to the top or // Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page. // bottom of the page.
// Static top (unfixed, but 100% wide) navbar // Static top (unfixed, but 100% wide) navbar
.navbar-static-top { .navbar-static-top {
z-index: @zindex-navbar;
border-width: 0 0 1px; border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
border-radius: 0; border-radius: 0;
} }
@ -128,7 +129,7 @@
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;
border-width: 0 0 1px; z-index: @zindex-navbar-fixed;
// Undo the rounded corners // Undo the rounded corners
@media (min-width: @grid-float-breakpoint) { @media (min-width: @grid-float-breakpoint) {
@ -136,12 +137,13 @@
} }
} }
.navbar-fixed-top { .navbar-fixed-top {
z-index: @zindex-navbar-fixed;
top: 0; top: 0;
border-width: 0 0 1px;
} }
.navbar-fixed-bottom { .navbar-fixed-bottom {
bottom: 0; bottom: 0;
margin-bottom: 0; // override .navbar defaults margin-bottom: 0; // override .navbar defaults
border-width: 1px 0 0;
} }
@ -152,6 +154,7 @@
padding: @navbar-padding-vertical @navbar-padding-horizontal; padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large; font-size: @font-size-large;
line-height: @line-height-computed; line-height: @line-height-computed;
&:hover, &:hover,
&:focus { &:focus {
text-decoration: none; text-decoration: none;
@ -254,7 +257,7 @@
// Component alignment // Component alignment
// //
// Repurpose the pull utilities as their own navbar utilities to avoid specifity // Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed // issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile. // though so that navbar contents properly stack and align in mobile.
@ -408,7 +411,7 @@
.navbar-collapse, .navbar-collapse,
.navbar-form { .navbar-form {
border-color: darken(@navbar-default-bg, 7%); border-color: @navbar-default-border;
} }
// Dropdown menu items and carets // Dropdown menu items and carets

View File

@ -48,15 +48,25 @@
&:focus { &:focus {
background-color: @nav-link-hover-bg; background-color: @nav-link-hover-bg;
border-color: @link-color; border-color: @link-color;
.caret {
border-top-color: @link-hover-color;
border-bottom-color: @link-hover-color;
}
} }
} }
// Dividers (basically an hr) within the dropdown // Nav dividers (deprecated with v3.0.1)
//
// This should have been removed in v3 with the dropping of `.nav-list`, but
// we missed it. We don't currently support this anywhere, but in the interest
// of maintaining backward compatibility in case you use it, it's deprecated.
.nav-divider { .nav-divider {
.nav-divider(); .nav-divider();
} }
// Prevent IE8 from misplacing imgs // Prevent IE8 from misplacing imgs
//
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img { > li > a > img {
max-width: none; max-width: none;
@ -115,7 +125,7 @@
// Links rendered as pills // Links rendered as pills
> a { > a {
border-radius: 5px; border-radius: @nav-pills-border-radius;
} }
+ li { + li {
margin-left: 2px; margin-left: 2px;
@ -128,6 +138,11 @@
&:focus { &:focus {
color: @nav-pills-active-link-hover-color; color: @nav-pills-active-link-hover-color;
background-color: @nav-pills-active-link-hover-bg; background-color: @nav-pills-active-link-hover-bg;
.caret {
border-top-color: @nav-pills-active-link-hover-color;
border-bottom-color: @nav-pills-active-link-hover-color;
}
} }
} }
} }
@ -159,28 +174,54 @@
float: none; float: none;
> a { > a {
text-align: center; text-align: center;
margin-bottom: 5px;
} }
} }
@media (min-width: @screen-sm) { > .dropdown .dropdown-menu {
top: auto;
left: auto;
}
@media (min-width: @screen-sm-min) {
> li { > li {
display: table-cell; display: table-cell;
width: 1%; width: 1%;
> a {
margin-bottom: 0;
}
} }
} }
} }
// Move borders to anchors instead of bottom of list // Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
.nav-tabs-justified { .nav-tabs-justified {
border-bottom: 0; border-bottom: 0;
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
> li > a {
// Override margin from .nav-tabs // Override margin from .nav-tabs
margin-right: 0; margin-right: 0;
border-radius: @border-radius-base;
} }
> .active > a {
border-bottom-color: @nav-tabs-justified-active-link-border-color; > .active > a,
> .active > a:hover,
> .active > a:focus {
border: 1px solid @nav-tabs-justified-link-border-color;
}
@media (min-width: @screen-sm-min) {
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
border-radius: @border-radius-base @border-radius-base 0 0;
}
> .active > a,
> .active > a:hover,
> .active > a:focus {
border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
} }
} }
@ -188,25 +229,17 @@
// Tabbable tabs // Tabbable tabs
// ------------------------- // -------------------------
// Clear any floats // Hide tabbable panes to start, show them when `.active`
.tabbable { .tab-content {
.clearfix(); > .tab-pane {
} display: none;
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content,
.pill-content {
> .active { > .active {
display: block; display: block;
} }
} }
// Dropdowns // Dropdowns
// ------------------------- // -------------------------

View File

@ -1,4 +1,4 @@
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */ /*! normalize.css v2.1.3 | MIT License | git.io/normalize */
// ========================================================================== // ==========================================================================
// HTML5 display definitions // HTML5 display definitions
@ -44,10 +44,12 @@ audio:not([controls]) {
} }
// //
// Address styling not present in IE 8/9. // Address `[hidden]` styling not present in IE 8/9.
// Hide the `template` element in IE, Safari, and Firefox < 22.
// //
[hidden] { [hidden],
template {
display: none; display: none;
} }
@ -63,8 +65,8 @@ audio:not([controls]) {
html { html {
font-family: sans-serif; // 1 font-family: sans-serif; // 1
-webkit-text-size-adjust: 100%; // 2
-ms-text-size-adjust: 100%; // 2 -ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
} }
// //
@ -79,6 +81,14 @@ body {
// Links // Links
// ========================================================================== // ==========================================================================
//
// Remove the gray background color from active links in IE 10.
//
a {
background: transparent;
}
// //
// Address `outline` inconsistency between Chrome and other browsers. // Address `outline` inconsistency between Chrome and other browsers.
// //
@ -329,8 +339,8 @@ html input[disabled] {
} }
// //
// 1. Address box sizing set to `content-box` in IE 8/9. // 1. Address box sizing set to `content-box` in IE 8/9/10.
// 2. Remove excess padding in IE 8/9. // 2. Remove excess padding in IE 8/9/10.
// //
input[type="checkbox"], input[type="checkbox"],

View File

@ -58,6 +58,8 @@
> .disabled { > .disabled {
> span, > span,
> span:hover,
> span:focus,
> a, > a,
> a:hover, > a:hover,
> a:focus { > a:focus {

View File

@ -56,12 +56,37 @@
// watch it go full width. // watch it go full width.
.panel { .panel {
> .table { > .table,
> .table-responsive {
margin-bottom: 0; margin-bottom: 0;
} }
> .panel-body + .table { > .panel-body + .table,
> .panel-body + .table-responsive {
border-top: 1px solid @table-border-color; border-top: 1px solid @table-border-color;
} }
> .table-bordered,
> .table-responsive > .table-bordered {
border: 0;
> thead,
> tbody,
> tfoot {
> tr {
> th:first-child,
> td:first-child {
border-left: 0;
}
> th:last-child,
> td:last-child {
border-right: 0;
}
&:last-child > th,
&:last-child > td {
border-bottom: 0;
}
}
}
}
} }
@ -70,6 +95,10 @@
padding: 10px 15px; padding: 10px 15px;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
.border-top-radius(@panel-border-radius - 1); .border-top-radius(@panel-border-radius - 1);
> .dropdown .dropdown-toggle {
color: inherit;
}
} }
// Within heading, strip any `h*` tag of it's default margins for spacing. // Within heading, strip any `h*` tag of it's default margins for spacing.
@ -119,11 +148,6 @@
border-bottom: 1px solid @panel-inner-border; border-bottom: 1px solid @panel-inner-border;
} }
} }
// New subcomponent for wrapping collapsable content for proper animations
.panel-collapse {
}
} }

View File

@ -26,7 +26,6 @@
} }
// Don't show links for images, or javascript/internal links // Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after, a[href^="javascript:"]:after,
a[href^="#"]:after { a[href^="#"]:after {
content: ""; content: "";
@ -67,6 +66,12 @@
page-break-after: avoid; page-break-after: avoid;
} }
// Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245
// Once fixed, we can just straight up remove this.
select {
background: #fff !important;
}
// Bootstrap components // Bootstrap components
.navbar { .navbar {
display: none; display: none;

View File

@ -6,7 +6,7 @@
// Bar animations // Bar animations
// ------------------------- // -------------------------
// Webkit // WebKit
@-webkit-keyframes progress-bar-stripes { @-webkit-keyframes progress-bar-stripes {
from { background-position: 40px 0; } from { background-position: 40px 0; }
to { background-position: 0 0; } to { background-position: 0 0; }
@ -51,6 +51,7 @@
width: 0%; width: 0%;
height: 100%; height: 100%;
font-size: @font-size-small; font-size: @font-size-small;
line-height: @line-height-computed;
color: @progress-bar-color; color: @progress-bar-color;
text-align: center; text-align: center;
background-color: @progress-bar-bg; background-color: @progress-bar-bg;
@ -60,17 +61,13 @@
// Striped bars // Striped bars
.progress-striped .progress-bar { .progress-striped .progress-bar {
#gradient > .striped(@progress-bar-bg); #gradient > .striped();
background-size: 40px 40px; background-size: 40px 40px;
} }
// Call animation for the active one // Call animation for the active one
.progress.active .progress-bar { .progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite; .animation(progress-bar-stripes 2s linear infinite);
-moz-animation: progress-bar-stripes 2s linear infinite;
-ms-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
} }

View File

@ -3,35 +3,24 @@
// -------------------------------------------------- // --------------------------------------------------
// IE10 Metro responsive // IE10 in Windows (Phone) 8
// Required for Windows 8 Metro split-screen snapping with IE10
// //
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#browsers
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport{
@-ms-viewport {
width: device-width; width: device-width;
} }
// IE10 on Windows Phone 8
// IE10 on WP8 doesn't report CSS pixels, but actual device pixels. In
// other words, say on a Lumia, you'll get 768px as the device width,
// meaning users will see the tablet styles and not phone styles.
//
// Alternatively you can override this with JS (see source below), but
// we won't be doing that here given our limited scope.
//
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
@media screen and (max-width: 400px) {
@-ms-viewport{
width: 320px;
}
}
// Hide from screenreaders and browsers
// Credit: HTML5 Boilerplate
.hidden {
display: none !important;
visibility: hidden !important;
}
// Visibility utilities // Visibility utilities
@ -41,17 +30,17 @@
.responsive-visibility(); .responsive-visibility();
} }
&.visible-sm { &.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-md { &.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-lg { &.visible-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@ -63,16 +52,16 @@
.responsive-visibility(); .responsive-visibility();
} }
} }
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
&.visible-md { &.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-lg { &.visible-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@ -85,15 +74,15 @@
} }
} }
&.visible-sm { &.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
&.visible-lg { &.visible-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@ -106,16 +95,16 @@
} }
} }
&.visible-sm { &.visible-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
&.visible-md { &.visible-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-visibility(); .responsive-visibility();
} }
} }
@ -126,17 +115,17 @@
.responsive-invisibility(); .responsive-invisibility();
} }
&.hidden-sm { &.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-md { &.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-lg { &.hidden-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@ -148,16 +137,16 @@
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
&.hidden-md { &.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-lg { &.hidden-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@ -170,15 +159,15 @@
} }
} }
&.hidden-sm { &.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
&.hidden-lg { &.hidden-lg {
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@ -191,16 +180,16 @@
} }
} }
&.hidden-sm { &.hidden-sm {
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
&.hidden-md { &.hidden-md {
@media (min-width: @screen-md) and (max-width: @screen-md-max) { @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }
@media (min-width: @screen-lg) { @media (min-width: @screen-lg-min) {
.responsive-invisibility(); .responsive-invisibility();
} }
} }

View File

@ -37,17 +37,6 @@ textarea {
line-height: inherit; line-height: inherit;
} }
// Reset unusual Firefox-on-Android default style.
//
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
background-image: none;
}
// Links // Links
@ -125,6 +114,6 @@ hr {
margin: -1px; margin: -1px;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
clip: rect(0 0 0 0); clip: rect(0,0,0,0);
border: 0; border: 0;
} }

View File

@ -18,9 +18,9 @@ th {
width: 100%; width: 100%;
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
// Cells // Cells
thead, > thead,
tbody, > tbody,
tfoot { > tfoot {
> tr { > tr {
> th, > th,
> td { > td {
@ -32,22 +32,23 @@ th {
} }
} }
// Bottom align for column headings // Bottom align for column headings
thead > tr > th { > thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid @table-border-color; border-bottom: 2px solid @table-border-color;
} }
// Remove top border from thead by default // Remove top border from thead by default
caption + thead, > caption + thead,
colgroup + thead, > colgroup + thead,
thead:first-child { > thead:first-child {
tr:first-child { > tr:first-child {
th, td { > th,
> td {
border-top: 0; border-top: 0;
} }
} }
} }
// Account for multiple tbody instances // Account for multiple tbody instances
tbody + tbody { > tbody + tbody {
border-top: 2px solid @table-border-color; border-top: 2px solid @table-border-color;
} }
@ -61,9 +62,9 @@ th {
// Condensed table w/ half padding // Condensed table w/ half padding
.table-condensed { .table-condensed {
thead, > thead,
tbody, > tbody,
tfoot { > tfoot {
> tr { > tr {
> th, > th,
> td { > td {
@ -90,12 +91,10 @@ th {
} }
} }
} }
> thead { > thead > tr {
> tr { > th,
> th, > td {
> td { border-bottom-width: 2px;
border-bottom-width: 2px;
}
} }
} }
} }
@ -105,14 +104,10 @@ th {
// //
// Default zebra-stripe styles (alternating gray and transparent backgrounds) // Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped { .table-striped > tbody > tr:nth-child(odd) {
> tbody { > td,
> tr:nth-child(odd) { > th {
> td, background-color: @table-bg-accent;
> th {
background-color: @table-bg-accent;
}
}
} }
} }
@ -121,14 +116,10 @@ th {
// //
// Placed here since it has to come after the potential zebra striping // Placed here since it has to come after the potential zebra striping
.table-hover { .table-hover > tbody > tr:hover {
> tbody { > td,
> tr:hover { > th {
> td, background-color: @table-bg-hover;
> th {
background-color: @table-bg-hover;
}
}
} }
} }
@ -176,22 +167,23 @@ table {
// Responsive tables // Responsive tables
// //
// Wrap your tables in `.table-scrollable` and we'll make them mobile friendly // Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that // by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally. // will display normally.
@media (max-width: @screen-sm) { @media (max-width: @screen-xs-max) {
.table-responsive { .table-responsive {
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: (@line-height-computed * 0.75);
overflow-y: hidden; overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color; border: 1px solid @table-border-color;
-webkit-overflow-scrolling: touch;
// Tighten up spacing and give a background color // Tighten up spacing
> .table { > .table {
margin-bottom: 0; margin-bottom: 0;
background-color: #fff;
// Ensure the content doesn't wrap // Ensure the content doesn't wrap
> thead, > thead,
@ -224,6 +216,13 @@ table {
border-right: 0; border-right: 0;
} }
} }
}
// Only nuke the last row's bottom-border in `tbody` and `tfoot` since
// chances are there will be only one `tr` in a `thead` and that would
// remove the border altogether.
> tbody,
> tfoot {
> tr:last-child { > tr:last-child {
> th, > th,
> td { > td {
@ -231,6 +230,7 @@ table {
} }
} }
} }
} }
} }
} }

View File

@ -31,14 +31,22 @@
} }
// Mixin for generating new styles // Mixin for generating new styles
.btn-styles(@btn-color: #555;) { .btn-styles(@btn-color: #555) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%)); #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
border-color: darken(@btn-color, 12%); .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
background-repeat: repeat-x;
border-color: darken(@btn-color, 14%);
&:hover,
&:focus {
background-color: darken(@btn-color, 12%);
background-position: 0 -15px;
}
&:active, &:active,
&.active { &.active {
background-color: darken(@btn-color, 10%); background-color: darken(@btn-color, 12%);
border-color: darken(@btn-color, 12%); border-color: darken(@btn-color, 14%);
} }
} }
@ -52,7 +60,7 @@
} }
// Apply the mixin to the buttons // Apply the mixin to the buttons
.btn-default { .btn-styles(@btn-default-bg;); text-shadow: 0 1px 0 #fff; border-color: #ccc; } .btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
.btn-primary { .btn-styles(@btn-primary-bg); } .btn-primary { .btn-styles(@btn-primary-bg); }
.btn-success { .btn-styles(@btn-success-bg); } .btn-success { .btn-styles(@btn-success-bg); }
.btn-warning { .btn-styles(@btn-warning-bg); } .btn-warning { .btn-styles(@btn-warning-bg); }
@ -77,12 +85,15 @@
// -------------------------------------------------- // --------------------------------------------------
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { .dropdown-menu > .active > a:focus {
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%); background-color: darken(@dropdown-link-active-bg, 5%);
} }
@ -91,15 +102,17 @@
// Navbar // Navbar
// -------------------------------------------------- // --------------------------------------------------
// Basic navbar // Default navbar
.navbar { .navbar-default {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg;); #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
border-radius: @navbar-border-radius; border-radius: @navbar-border-radius;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow); .box-shadow(@shadow);
.navbar-nav > .active > a { .navbar-nav > .active > a {
background-color: @navbar-default-bg; #gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
} }
} }
.navbar-brand, .navbar-brand,
@ -109,10 +122,12 @@
// Inverted navbar // Inverted navbar
.navbar-inverse { .navbar-inverse {
#gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg;); #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
.reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
.navbar-nav > .active > a { .navbar-nav > .active > a {
background-color: @navbar-inverse-bg; #gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
.box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
} }
.navbar-brand, .navbar-brand,
@ -161,7 +176,7 @@
// Give the progress background some depth // Give the progress background some depth
.progress { .progress {
#gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg;) #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
} }
// Mixin for generating new styles // Mixin for generating new styles
@ -225,7 +240,7 @@
// -------------------------------------------------- // --------------------------------------------------
.well { .well {
#gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg;); #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
border-color: darken(@well-bg, 10%); border-color: darken(@well-bg, 10%);
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
.box-shadow(@shadow); .box-shadow(@shadow);

View File

@ -0,0 +1,30 @@
//
// Thumbnails
// --------------------------------------------------
// Mixin and adjust the regular image class
.thumbnail {
.img-thumbnail();
display: block; // Override the inline-block from `.img-thumbnail`
margin-bottom: @line-height-computed;
> img {
.img-responsive();
margin-left: auto;
margin-right: auto;
}
// Add a hover state for linked versions only
a&:hover,
a&:focus,
a&.active {
border-color: @link-color;
}
// Image captions
.caption {
padding: @thumbnail-caption-padding;
color: @thumbnail-caption-color;
}
}

View File

@ -14,10 +14,10 @@
.opacity(0); .opacity(0);
&.in { .opacity(.9); } &.in { .opacity(.9); }
&.top { margin-top: -3px; padding: 5px 0; } &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 5px; } &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: 5px 0; } &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 5px; } &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
} }
// Wrapper for the tooltip content // Wrapper for the tooltip content
@ -49,13 +49,13 @@
} }
&.top-left .tooltip-arrow { &.top-left .tooltip-arrow {
bottom: 0; bottom: 0;
left: 5px; left: @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: @tooltip-arrow-color;
} }
&.top-right .tooltip-arrow { &.top-right .tooltip-arrow {
bottom: 0; bottom: 0;
right: 5px; right: @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color; border-top-color: @tooltip-arrow-color;
} }
@ -82,13 +82,13 @@
} }
&.bottom-left .tooltip-arrow { &.bottom-left .tooltip-arrow {
top: 0; top: 0;
left: 5px; left: @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: @tooltip-arrow-color;
} }
&.bottom-right .tooltip-arrow { &.bottom-right .tooltip-arrow {
top: 0; top: 0;
right: 5px; right: @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color; border-bottom-color: @tooltip-arrow-color;
} }

View File

@ -11,11 +11,11 @@ p {
} }
.lead { .lead {
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
font-size: (@font-size-base * 1.15); font-size: floor(@font-size-base * 1.15);
font-weight: 200; font-weight: 200;
line-height: 1.4; line-height: 1.4;
@media (min-width: 768px) { @media (min-width: @screen-sm-min) {
font-size: (@font-size-base * 1.5); font-size: (@font-size-base * 1.5);
} }
} }
@ -25,18 +25,46 @@ p {
// ------------------------- // -------------------------
// Ex: 14px base font * 85% = about 12px // Ex: 14px base font * 85% = about 12px
small { font-size: 85%; } small,
.small { font-size: 85%; }
// Undo browser default styling // Undo browser default styling
cite { font-style: normal; } cite { font-style: normal; }
// Contextual emphasis // Contextual emphasis
.text-muted { color: @text-muted; } .text-muted {
.text-primary { color: @brand-primary; } color: @text-muted;
.text-warning { color: @state-warning-text; } }
.text-danger { color: @state-danger-text; } .text-primary {
.text-success { color: @state-success-text; } color: @brand-primary;
.text-info { color: @state-info-text; } &:hover {
color: darken(@brand-primary, 10%);
}
}
.text-warning {
color: @state-warning-text;
&:hover {
color: darken(@state-warning-text, 10%);
}
}
.text-danger {
color: @state-danger-text;
&:hover {
color: darken(@state-danger-text, 10%);
}
}
.text-success {
color: @state-success-text;
&:hover {
color: darken(@state-success-text, 10%);
}
}
.text-info {
color: @state-info-text;
&:hover {
color: darken(@state-info-text, 10%);
}
}
// Alignment // Alignment
.text-left { text-align: left; } .text-left { text-align: left; }
@ -52,7 +80,10 @@ h1, h2, h3, h4, h5, h6,
font-family: @headings-font-family; font-family: @headings-font-family;
font-weight: @headings-font-weight; font-weight: @headings-font-weight;
line-height: @headings-line-height; line-height: @headings-line-height;
small { color: @headings-color;
small,
.small {
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
color: @headings-small-color; color: @headings-small-color;
@ -64,25 +95,30 @@ h2,
h3 { h3 {
margin-top: @line-height-computed; margin-top: @line-height-computed;
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
small,
.small {
font-size: 65%;
}
} }
h4, h4,
h5, h5,
h6 { h6 {
margin-top: (@line-height-computed / 2); margin-top: (@line-height-computed / 2);
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
small,
.small {
font-size: 75%;
}
} }
h1, .h1 { font-size: floor(@font-size-base * 2.60); } // ~36px h1, .h1 { font-size: @font-size-h1; }
h2, .h2 { font-size: floor(@font-size-base * 2.15); } // ~30px h2, .h2 { font-size: @font-size-h2; }
h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px h3, .h3 { font-size: @font-size-h3; }
h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px h4, .h4 { font-size: @font-size-h4; }
h5, .h5 { font-size: @font-size-base; } h5, .h5 { font-size: @font-size-h5; }
h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px h6, .h6 { font-size: @font-size-h6; }
h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px
h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px
h3 small, .h3 small,
h4 small, .h4 small { font-size: @font-size-base; }
// Page header // Page header
@ -105,7 +141,7 @@ ol {
margin-top: 0; margin-top: 0;
margin-bottom: (@line-height-computed / 2); margin-bottom: (@line-height-computed / 2);
ul, ul,
ol{ ol {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@ -117,13 +153,19 @@ ol {
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
} }
// Inline turns list items into inline-block // Inline turns list items into inline-block
.list-inline { .list-inline {
.list-unstyled(); .list-unstyled();
> li { > li {
display: inline-block; display: inline-block;
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
&:first-child {
padding-left: 0;
}
} }
} }
@ -168,7 +210,7 @@ dd {
// Abbreviations and acronyms // Abbreviations and acronyms
abbr[title], abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] { abbr[data-original-title] {
cursor: help; cursor: help;
border-bottom: 1px dotted @abbr-border-color; border-bottom: 1px dotted @abbr-border-color;
@ -196,7 +238,7 @@ blockquote {
line-height: @line-height-base; line-height: @line-height-base;
color: @blockquote-small-color; color: @blockquote-small-color;
&:before { &:before {
content: '\2014 \00A0';// EM DASH, NBSP content: '\2014 \00A0'; // EM DASH, NBSP
} }
} }
@ -207,23 +249,23 @@ blockquote {
border-right: 5px solid @blockquote-border-color; border-right: 5px solid @blockquote-border-color;
border-left: 0; border-left: 0;
p, p,
small { small,
.small {
text-align: right; text-align: right;
} }
small { small,
.small {
&:before { &:before {
content: ''; content: '';
} }
&:after { &:after {
content: '\00A0 \2014';// NBSP, EM DASH content: '\00A0 \2014'; // NBSP, EM DASH
} }
} }
} }
} }
// Quotes // Quotes
q:before,
q:after,
blockquote:before, blockquote:before,
blockquote:after { blockquote:after {
content: ""; content: "";
@ -231,7 +273,6 @@ blockquote:after {
// Addresses // Addresses
address { address {
display: block;
margin-bottom: @line-height-computed; margin-bottom: @line-height-computed;
font-style: normal; font-style: normal;
line-height: @line-height-base; line-height: @line-height-base;

View File

@ -9,6 +9,9 @@
.clearfix { .clearfix {
.clearfix(); .clearfix();
} }
.center-block {
.center-block();
}
.pull-right { .pull-right {
float: right !important; float: right !important;
} }
@ -20,6 +23,7 @@
// Toggling content // Toggling content
// ------------------------- // -------------------------
// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
.hide { .hide {
display: none !important; display: none !important;
} }
@ -30,7 +34,17 @@
visibility: hidden; visibility: hidden;
} }
.text-hide { .text-hide {
.hide-text(); .text-hide();
}
// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate
.hidden {
display: none !important;
visibility: hidden !important;
} }

View File

@ -48,12 +48,21 @@
@font-size-large: ceil(@font-size-base * 1.25); // ~18px @font-size-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px @font-size-small: ceil(@font-size-base * 0.85); // ~12px
@font-size-h1: floor(@font-size-base * 2.6); // ~36px
@font-size-h2: floor(@font-size-base * 2.15); // ~30px
@font-size-h3: ceil(@font-size-base * 1.7); // ~24px
@font-size-h4: ceil(@font-size-base * 1.25); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil(@font-size-base * 0.85); // ~12px
@line-height-base: 1.428571429; // 20/14 @line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-base; @headings-font-family: @font-family-base;
@headings-font-weight: 500; @headings-font-weight: 500;
@headings-line-height: 1.1; @headings-line-height: 1.1;
@headings-color: inherit;
// Iconography // Iconography
// ------------------------- // -------------------------
@ -82,6 +91,7 @@
@border-radius-large: 6px; @border-radius-large: 6px;
@border-radius-small: 3px; @border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary; @component-active-bg: @brand-primary;
@caret-width-base: 4px; @caret-width-base: 4px;
@ -165,12 +175,12 @@
@dropdown-fallback-border: #ccc; @dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5; @dropdown-divider-bg: #e5e5e5;
@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @gray-dark; @dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff; @dropdown-link-hover-color: darken(@gray-dark, 5%);
@dropdown-link-hover-bg: @dropdown-link-active-bg; @dropdown-link-hover-bg: #f5f5f5;
@dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: @gray-light; @dropdown-link-disabled-color: @gray-light;
@ -200,25 +210,33 @@
// -------------------------------------------------- // --------------------------------------------------
// Extra small screen / phone // Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px; @screen-xs: 480px;
@screen-phone: @screen-xs; @screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet // Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px; @screen-sm: 768px;
@screen-tablet: @screen-sm; @screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop // Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px; @screen-md: 992px;
@screen-desktop: @screen-md; @screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop // Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px; @screen-lg: 1200px;
@screen-lg-desktop: @screen-lg; @screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum // So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm - 1); @screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md - 1); @screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg - 1); @screen-md-max: (@screen-lg-min - 1);
// Grid system // Grid system
@ -229,7 +247,7 @@
// Padding, to be divided by two and applied to the left and right of all columns // Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px; @grid-gutter-width: 30px;
// Point at which the navbar stops collapsing // Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet; @grid-float-breakpoint: @screen-sm-min;
// Navbar // Navbar
@ -238,13 +256,14 @@
// Basics of a navbar // Basics of a navbar
@navbar-height: 50px; @navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed; @navbar-margin-bottom: @line-height-computed;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base; @navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
// Navbar links // Navbar links
@navbar-default-link-color: #777; @navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333; @navbar-default-link-hover-color: #333;
@ -256,7 +275,7 @@
// Navbar brand label // Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color; @navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%); @navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
@navbar-default-brand-hover-bg: transparent; @navbar-default-brand-hover-bg: transparent;
// Navbar toggle // Navbar toggle
@ -286,13 +305,6 @@
@navbar-inverse-brand-hover-color: #fff; @navbar-inverse-brand-hover-color: #fff;
@navbar-inverse-brand-hover-bg: transparent; @navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-bg: lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-bg-focus: #fff;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
// Inverted navbar toggle // Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: #333; @navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff; @navbar-inverse-toggle-icon-bar-bg: #fff;
@ -324,8 +336,9 @@
@nav-tabs-justified-active-link-border-color: @body-bg; @nav-tabs-justified-active-link-border-color: @body-bg;
// Pills // Pills
@nav-pills-border-radius: @border-radius-base;
@nav-pills-active-link-hover-bg: @component-active-bg; @nav-pills-active-link-hover-bg: @component-active-bg;
@nav-pills-active-link-hover-color: #fff; @nav-pills-active-link-hover-color: @component-active-color;
// Pagination // Pagination
@ -355,21 +368,13 @@
@jumbotron-padding: 30px; @jumbotron-padding: 30px;
@jumbotron-color: inherit; @jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter; @jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit; @jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil(@font-size-base * 1.5);
// Form states and alerts // Form states and alerts
// ------------------------- // -------------------------
@state-warning-text: #c09853;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 3%);
@state-danger-text: #b94a48;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 3%);
@state-success-text: #468847; @state-success-text: #468847;
@state-success-bg: #dff0d8; @state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%); @state-success-border: darken(spin(@state-success-bg, -10), 5%);
@ -378,6 +383,14 @@
@state-info-bg: #d9edf7; @state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%); @state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-warning-text: #c09853;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: #b94a48;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
// Tooltips // Tooltips
// ------------------------- // -------------------------
@ -478,7 +491,7 @@
@list-group-border-radius: @border-radius-base; @list-group-border-radius: @border-radius-base;
@list-group-hover-bg: #f5f5f5; @list-group-hover-bg: #f5f5f5;
@list-group-active-color: #fff; @list-group-active-color: @component-active-color;
@list-group-active-bg: @component-active-bg; @list-group-active-bg: @component-active-bg;
@list-group-active-border: @list-group-active-bg; @list-group-active-border: @list-group-active-bg;
@ -553,6 +566,7 @@
@breadcrumb-bg: #f5f5f5; @breadcrumb-bg: #f5f5f5;
@breadcrumb-color: #ccc; @breadcrumb-color: #ccc;
@breadcrumb-active-color: @gray-light; @breadcrumb-active-color: @gray-light;
@breadcrumb-separator: "/";
// Carousel // Carousel
@ -573,8 +587,8 @@
// Close // Close
// ------------------------ // ------------------------
@close-color: #000;
@close-font-weight: bold; @close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff; @close-text-shadow: 0 1px 0 #fff;
@ -611,10 +625,13 @@
// -------------------------------------------------- // --------------------------------------------------
// Small screen / tablet // Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width)); @container-tablet: ((720px + @grid-gutter-width));
@container-sm: @container-tablet;
// Medium screen / desktop // Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width)); @container-desktop: ((940px + @grid-gutter-width));
@container-md: @container-desktop;
// Large screen / wide desktop // Large screen / wide desktop
@container-lg-desktop: ((1140px + @grid-gutter-width)); @container-large-desktop: ((1140px + @grid-gutter-width));
@container-lg: @container-large-desktop;