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/
bootstrap:
version: 3.0.0
version: 3.0.2
url: http://getbootstrap.com
jquery:

View file

@ -17,7 +17,7 @@ SITE_LESS_DIRECTORY = assets/less
SITE_CSS_DIRECTORY = assets/css
SITE_LESS = ${SITE_LESS_DIRECTORY}/site.less
SITE_CSS_MIN = ${SITE_CSS_DIRECTORY}/site.css
SITE_CSS = ${SITE_CSS_DIRECTORY}/site.css
build:
@echo "Compiling Less files"
@ -27,7 +27,7 @@ build:
lessc --yui-compress ${FA_LESS_MODERN} > ${FA_CSS_MODERN_MIN}
# 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}/* ../
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
h4 {
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;
}
// 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
@import "variables.less";
@import "mixins.less";

View file

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

View file

@ -19,7 +19,7 @@
}
}
.dropup {
& .btn-default .caret {
.btn-default .caret {
border-bottom-color: @btn-default-color;
}
.btn-primary,
@ -150,6 +150,11 @@
// Remove the gradient and set the same inset shadow as the :active state
.btn-group.open .dropdown-toggle {
.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
.btn {
display: inline-block;
padding: @padding-base-vertical @padding-base-horizontal;
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
font-weight: @btn-font-weight;
line-height: @line-height-base;
text-align: center;
vertical-align: middle;
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-radius: @border-radius-base;
white-space: nowrap;
.button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
.user-select(none);
&:focus {

View file

@ -75,7 +75,7 @@
color: @carousel-control-color;
text-align: center;
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.
// Set gradients for backgrounds
@ -103,11 +103,18 @@
.glyphicon-chevron-right {
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display: inline-block;
}
.icon-prev,
.glyphicon-chevron-left {
left: 50%;
}
.icon-next,
.glyphicon-chevron-right {
right: 50%;
}
.icon-prev,
.icon-next {
width: 20px;
height: 20px;
@ -153,6 +160,17 @@
border: 1px solid @carousel-indicator-border-color;
border-radius: 10px;
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 {
margin: 0;
@ -183,16 +201,20 @@
// 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
.carousel-control .icon-prev,
.carousel-control .icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
.carousel-control {
.glyphicons-chevron-left,
.glyphicons-chevron-right,
.icon-prev,
.icon-next {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
font-size: 30px;
}
}
// 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
code,
pre {
kbd,
pre,
samp {
font-family: @font-family-monospace;
}
@ -33,11 +35,6 @@ pre {
border: 1px solid @pre-border-color;
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
code {
padding: 0;
@ -45,7 +42,7 @@ pre {
color: inherit;
white-space: pre-wrap;
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,
// we can just straight up remove this.
border-bottom: 0 dotted;
content: "";
}
// The dropdown wrapper (div)
@ -167,7 +166,7 @@
// Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
// gets fixed, restore `border-top: 0;`.
border-top: 0 dotted;
border-bottom: 4px solid @dropdown-caret-color;
border-bottom: @caret-width-base solid @dropdown-caret-color;
content: "";
}
// Different positioning for bottom up menu

View file

@ -82,13 +82,14 @@ input[type="number"] {
}
}
// Placeholder
//
// Placeholder text gets special styles because when browsers invalidate entire
// lines if it doesn't understand a selector/
.form-control {
.placeholder();
// Adjust output element
output {
display: block;
padding-top: (@padding-base-vertical + 1);
font-size: @font-size-base;
line-height: @line-height-base;
color: @input-color;
vertical-align: middle;
}
@ -124,6 +125,7 @@ input[type="number"] {
color: @input-color;
vertical-align: middle;
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-radius: @input-border-radius;
.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.
.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
// Note: HTML5 says that controls under a fieldset > legend:first-child won't
// be disabled if the fieldset is disabled. Due to implementation difficulty,
@ -257,7 +265,6 @@ input[type="checkbox"],
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
padding-top: (@padding-base-vertical + 1);
}
@ -289,7 +296,7 @@ input[type="checkbox"],
.form-inline {
// Kick in the inline
@media (min-width: @screen-tablet) {
@media (min-width: @screen-sm) {
// Inline-block all the things for "inline"
.form-group {
display: inline-block;
@ -344,8 +351,12 @@ input[type="checkbox"],
.make-row();
}
.form-control-static {
padding-top: (@padding-base-vertical + 1);
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
@media (min-width: @screen-sm-min) {
.control-label {
text-align: right;
}

View file

@ -14,7 +14,7 @@
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}.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
@ -27,6 +27,11 @@
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&:empty {
width: 1em;
}
}
// Individual icons
@ -68,6 +73,7 @@
.glyphicon-repeat { &:before { content: "\e030"; } }
.glyphicon-refresh { &:before { content: "\e031"; } }
.glyphicon-list-alt { &:before { content: "\e032"; } }
.glyphicon-lock { &:before { content: "\e033"; } }
.glyphicon-flag { &:before { content: "\e034"; } }
.glyphicon-headphones { &:before { content: "\e035"; } }
.glyphicon-volume-off { &:before { content: "\e036"; } }
@ -78,7 +84,9 @@
.glyphicon-tag { &:before { content: "\e041"; } }
.glyphicon-tags { &:before { content: "\e042"; } }
.glyphicon-book { &:before { content: "\e043"; } }
.glyphicon-bookmark { &:before { content: "\e044"; } }
.glyphicon-print { &:before { content: "\e045"; } }
.glyphicon-camera { &:before { content: "\e046"; } }
.glyphicon-font { &:before { content: "\e047"; } }
.glyphicon-bold { &:before { content: "\e048"; } }
.glyphicon-italic { &:before { content: "\e049"; } }
@ -132,10 +140,12 @@
.glyphicon-exclamation-sign { &:before { content: "\e101"; } }
.glyphicon-gift { &:before { content: "\e102"; } }
.glyphicon-leaf { &:before { content: "\e103"; } }
.glyphicon-fire { &:before { content: "\e104"; } }
.glyphicon-eye-open { &:before { content: "\e105"; } }
.glyphicon-eye-close { &:before { content: "\e106"; } }
.glyphicon-warning-sign { &:before { content: "\e107"; } }
.glyphicon-plane { &:before { content: "\e108"; } }
.glyphicon-calendar { &:before { content: "\e109"; } }
.glyphicon-random { &:before { content: "\e110"; } }
.glyphicon-comment { &:before { content: "\e111"; } }
.glyphicon-magnet { &:before { content: "\e112"; } }
@ -149,6 +159,7 @@
.glyphicon-resize-horizontal { &:before { content: "\e120"; } }
.glyphicon-hdd { &:before { content: "\e121"; } }
.glyphicon-bullhorn { &:before { content: "\e122"; } }
.glyphicon-bell { &:before { content: "\e123"; } }
.glyphicon-certificate { &:before { content: "\e124"; } }
.glyphicon-thumbs-up { &:before { content: "\e125"; } }
.glyphicon-thumbs-down { &:before { content: "\e126"; } }
@ -161,13 +172,17 @@
.glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
.glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
.glyphicon-globe { &:before { content: "\e135"; } }
.glyphicon-wrench { &:before { content: "\e136"; } }
.glyphicon-tasks { &:before { content: "\e137"; } }
.glyphicon-filter { &:before { content: "\e138"; } }
.glyphicon-briefcase { &:before { content: "\e139"; } }
.glyphicon-fullscreen { &:before { content: "\e140"; } }
.glyphicon-dashboard { &:before { content: "\e141"; } }
.glyphicon-paperclip { &:before { content: "\e142"; } }
.glyphicon-heart-empty { &:before { content: "\e143"; } }
.glyphicon-link { &:before { content: "\e144"; } }
.glyphicon-phone { &:before { content: "\e145"; } }
.glyphicon-pushpin { &:before { content: "\e146"; } }
.glyphicon-usd { &:before { content: "\e148"; } }
.glyphicon-gbp { &:before { content: "\e149"; } }
.glyphicon-sort { &:before { content: "\e150"; } }
@ -220,13 +235,3 @@
.glyphicon-cloud-upload { &:before { content: "\e198"; } }
.glyphicon-tree-conifer { &:before { content: "\e199"; } }
.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-weight: normal;
line-height: 1;
color: @input-color;
text-align: center;
background-color: @input-group-addon-bg;
border: 1px solid @input-group-addon-border-color;
@ -112,6 +113,14 @@
.input-group-btn {
position: relative;
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 {
position: relative;

View file

@ -6,7 +6,7 @@
.jumbotron {
padding: @jumbotron-padding;
margin-bottom: @jumbotron-padding;
font-size: (@font-size-base * 1.5);
font-size: @jumbotron-font-size;
font-weight: 200;
line-height: (@line-height-base * 1.5);
color: @jumbotron-color;
@ -24,7 +24,7 @@
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-bottom: (@jumbotron-padding * 1.6);

View file

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

View file

@ -27,11 +27,11 @@
}
}
// Webkit-style focus
// WebKit-style focus
.tab-focus() {
// Default
outline: thin dotted #333;
// Webkit
// WebKit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@ -69,7 +69,15 @@
}
// 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
// Deprecated as of v3.0.1 (will be removed in v4)
.hide-text() {
font: ~"0/0" a;
color: transparent;
@ -77,6 +85,14 @@
background-color: transparent;
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;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
@ -153,10 +173,41 @@
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
// Prevent browsers from flickering when using CSS 3D transforms.
// 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){
-webkit-backface-visibility: @visibility;
-moz-backface-visibility: @visibility;
@ -240,7 +291,7 @@
// Color stops are not available in IE9 and below.
.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-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: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
background-repeat: repeat-x;
@ -276,11 +327,11 @@
background-image: radial-gradient(circle, @inner-color, @outer-color);
background-repeat: no-repeat;
}
.striped(@color: #555; @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-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, 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, 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);
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
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, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 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, @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;) {
border-color: @border;
& > .panel-heading {
color: @heading-text-color;
background-color: @heading-bg-color;
border-color: @heading-border;
+ .panel-collapse .panel-body {
border-top-color: @border;
}
& > .dropdown .caret {
border-color: @heading-text-color transparent;
}
}
& > .panel-footer {
+ .panel-collapse .panel-body {
@ -363,6 +419,7 @@
background-color: @background;
border-color: @border;
color: @text-color;
hr {
border-top-color: darken(@border, 5%);
}
@ -384,7 +441,6 @@
&.@{state} > td,
&.@{state} > th {
background-color: @background;
border-color: @border;
}
}
@ -393,9 +449,9 @@
.table-hover > tbody > tr {
> td.@{state}:hover,
> th.@{state}:hover,
&.@{state}:hover > td {
&.@{state}:hover > td,
&.@{state}:hover > th {
background-color: darken(@background, 5%);
border-color: darken(@border, 5%);
}
}
}
@ -432,7 +488,7 @@
&:active,
&.active {
background-color: @background;
border-color: @border
border-color: @border;
}
}
}
@ -496,7 +552,7 @@
.progress-bar-variant(@color) {
background-color: @color;
.progress-striped & {
#gradient > .striped(@color);
#gradient > .striped();
}
}
@ -511,12 +567,13 @@
}
.responsive-invisibility() {
display: none !important;
tr& { display: none !important; }
&,
tr&,
th&,
td& { display: none !important; }
}
// Grid System
// -----------
@ -558,7 +615,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -566,17 +623,17 @@
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
@ -591,15 +648,15 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
@ -609,7 +666,7 @@
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
@ -624,7 +681,7 @@
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
@ -632,22 +689,96 @@
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
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
//
// 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) {
// Color the label and help text
.help-block,
.control-label {
.control-label,
.radio,
.checkbox,
.radio-inline,
.checkbox-inline {
color: @text-color;
}
// Set the border and box shadow on specific inputs to match

View file

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

View file

@ -10,7 +10,6 @@
.navbar {
position: relative;
z-index: @zindex-navbar;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
border: 1px solid transparent;
@ -75,7 +74,7 @@
}
&.in {
overflow-y: visible;
overflow-y: auto;
}
// Account for first and last children spacing
@ -111,12 +110,14 @@
//
// 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.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
z-index: @zindex-navbar;
border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
@ -128,7 +129,7 @@
position: fixed;
right: 0;
left: 0;
border-width: 0 0 1px;
z-index: @zindex-navbar-fixed;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
@ -136,12 +137,13 @@
}
}
.navbar-fixed-top {
z-index: @zindex-navbar-fixed;
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
border-width: 1px 0 0;
}
@ -152,6 +154,7 @@
padding: @navbar-padding-vertical @navbar-padding-horizontal;
font-size: @font-size-large;
line-height: @line-height-computed;
&:hover,
&:focus {
text-decoration: none;
@ -254,7 +257,7 @@
// 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
// though so that navbar contents properly stack and align in mobile.
@ -408,7 +411,7 @@
.navbar-collapse,
.navbar-form {
border-color: darken(@navbar-default-bg, 7%);
border-color: @navbar-default-border;
}
// Dropdown menu items and carets

View file

@ -48,15 +48,25 @@
&:focus {
background-color: @nav-link-hover-bg;
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();
}
// Prevent IE8 from misplacing imgs
//
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
> li > a > img {
max-width: none;
@ -115,7 +125,7 @@
// Links rendered as pills
> a {
border-radius: 5px;
border-radius: @nav-pills-border-radius;
}
+ li {
margin-left: 2px;
@ -128,6 +138,11 @@
&:focus {
color: @nav-pills-active-link-hover-color;
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;
> a {
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 {
display: table-cell;
width: 1%;
> a {
margin-bottom: 0;
}
}
}
}
// 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 {
border-bottom: 0;
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
> li > a {
// Override margin from .nav-tabs
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
// -------------------------
// Clear any floats
.tabbable {
.clearfix();
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content,
.pill-content {
// Hide tabbable panes to start, show them when `.active`
.tab-content {
> .tab-pane {
display: none;
}
> .active {
display: block;
}
}
// 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
@ -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;
}
@ -63,8 +65,8 @@ audio:not([controls]) {
html {
font-family: sans-serif; // 1
-webkit-text-size-adjust: 100%; // 2
-ms-text-size-adjust: 100%; // 2
-webkit-text-size-adjust: 100%; // 2
}
//
@ -79,6 +81,14 @@ body {
// Links
// ==========================================================================
//
// Remove the gray background color from active links in IE 10.
//
a {
background: transparent;
}
//
// 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.
// 2. Remove excess padding 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/10.
//
input[type="checkbox"],

View file

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

View file

@ -56,12 +56,37 @@
// watch it go full width.
.panel {
> .table {
> .table,
> .table-responsive {
margin-bottom: 0;
}
> .panel-body + .table {
> .panel-body + .table,
> .panel-body + .table-responsive {
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;
border-bottom: 1px solid transparent;
.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.
@ -119,11 +148,6 @@
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
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
@ -67,6 +66,12 @@
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
.navbar {
display: none;

View file

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

View file

@ -3,35 +3,24 @@
// --------------------------------------------------
// IE10 Metro responsive
// Required for Windows 8 Metro split-screen snapping with IE10
// IE10 in Windows (Phone) 8
//
// 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/
@-ms-viewport{
@-ms-viewport {
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
@ -41,19 +30,19 @@
.responsive-visibility();
}
&.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();
}
}
&.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();
}
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
}
}
.visible-sm {
@ -61,20 +50,20 @@
&.visible-xs {
@media (max-width: @screen-xs-max) {
.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();
}
&.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();
}
}
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
}
}
.visible-md {
@ -82,20 +71,20 @@
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
}
&.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();
}
}
@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();
}
&.visible-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
}
}
.visible-lg {
@ -103,19 +92,19 @@
&.visible-xs {
@media (max-width: @screen-xs-max) {
.responsive-visibility();
}
}
}
&.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();
}
}
&.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();
}
}
}
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-visibility();
}
}
@ -126,19 +115,19 @@
.responsive-invisibility();
}
&.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();
}
}
}
&.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();
}
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
}
}
.hidden-sm {
@ -148,18 +137,18 @@
.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();
}
&.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();
}
}
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
}
}
.hidden-md {
@ -167,20 +156,20 @@
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
}
&.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();
}
}
}
@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();
}
&.hidden-lg {
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}
}
}
.hidden-lg {
@ -188,19 +177,19 @@
&.hidden-xs {
@media (max-width: @screen-xs-max) {
.responsive-invisibility();
}
}
}
&.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();
}
}
}
&.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();
}
}
}
@media (min-width: @screen-lg) {
@media (min-width: @screen-lg-min) {
.responsive-invisibility();
}
}

View file

@ -37,17 +37,6 @@ textarea {
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
@ -125,6 +114,6 @@ hr {
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip: rect(0,0,0,0);
border: 0;
}

View file

@ -18,9 +18,9 @@ th {
width: 100%;
margin-bottom: @line-height-computed;
// Cells
thead,
tbody,
tfoot {
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
@ -32,22 +32,23 @@ th {
}
}
// Bottom align for column headings
thead > tr > th {
> thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid @table-border-color;
}
// Remove top border from thead by default
caption + thead,
colgroup + thead,
thead:first-child {
tr:first-child {
th, td {
> caption + thead,
> colgroup + thead,
> thead:first-child {
> tr:first-child {
> th,
> td {
border-top: 0;
}
}
}
// Account for multiple tbody instances
tbody + tbody {
> tbody + tbody {
border-top: 2px solid @table-border-color;
}
@ -61,9 +62,9 @@ th {
// Condensed table w/ half padding
.table-condensed {
thead,
tbody,
tfoot {
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
@ -90,12 +91,10 @@ th {
}
}
}
> thead {
> tr {
> th,
> td {
border-bottom-width: 2px;
}
> thead > tr {
> th,
> td {
border-bottom-width: 2px;
}
}
}
@ -105,14 +104,10 @@ th {
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
> tbody {
> tr:nth-child(odd) {
> td,
> th {
background-color: @table-bg-accent;
}
}
.table-striped > tbody > tr:nth-child(odd) {
> td,
> th {
background-color: @table-bg-accent;
}
}
@ -121,14 +116,10 @@ th {
//
// Placed here since it has to come after the potential zebra striping
.table-hover {
> tbody {
> tr:hover {
> td,
> th {
background-color: @table-bg-hover;
}
}
.table-hover > tbody > tr:hover {
> td,
> th {
background-color: @table-bg-hover;
}
}
@ -176,22 +167,23 @@ table {
// 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
// will display normally.
@media (max-width: @screen-sm) {
@media (max-width: @screen-xs-max) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
margin-bottom: (@line-height-computed * 0.75);
overflow-y: hidden;
overflow-x: scroll;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid @table-border-color;
-webkit-overflow-scrolling: touch;
// Tighten up spacing and give a background color
// Tighten up spacing
> .table {
margin-bottom: 0;
background-color: #fff;
// Ensure the content doesn't wrap
> thead,
@ -224,6 +216,13 @@ table {
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 {
> th,
> td {
@ -231,6 +230,7 @@ table {
}
}
}
}
}
}

View file

@ -31,14 +31,22 @@
}
// Mixin for generating new styles
.btn-styles(@btn-color: #555;) {
#gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 10%));
border-color: darken(@btn-color, 12%);
.btn-styles(@btn-color: #555) {
#gradient > .vertical(@start-color: @btn-color; @end-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 {
background-color: darken(@btn-color, 10%);
border-color: darken(@btn-color, 12%);
background-color: darken(@btn-color, 12%);
border-color: darken(@btn-color, 14%);
}
}
@ -52,7 +60,7 @@
}
// 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-success { .btn-styles(@btn-success-bg); }
.btn-warning { .btn-styles(@btn-warning-bg); }
@ -77,12 +85,15 @@
// --------------------------------------------------
.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:hover,
.dropdown-menu > .active > 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%);
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
background-color: darken(@dropdown-link-active-bg, 5%);
}
@ -91,15 +102,17 @@
// Navbar
// --------------------------------------------------
// Basic navbar
.navbar {
#gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg;);
// Default navbar
.navbar-default {
#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;
@shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
.box-shadow(@shadow);
.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,
@ -109,10 +122,12 @@
// Inverted navbar
.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 {
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,
@ -161,7 +176,7 @@
// Give the progress background some depth
.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
@ -225,7 +240,7 @@
// --------------------------------------------------
.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%);
@shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
.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);
&.in { .opacity(.9); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }
&.left { margin-left: -3px; padding: 0 5px; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
}
// Wrapper for the tooltip content
@ -49,13 +49,13 @@
}
&.top-left .tooltip-arrow {
bottom: 0;
left: 5px;
left: @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
&.top-right .tooltip-arrow {
bottom: 0;
right: 5px;
right: @tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-arrow-color;
}
@ -82,13 +82,13 @@
}
&.bottom-left .tooltip-arrow {
top: 0;
left: 5px;
left: @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}
&.bottom-right .tooltip-arrow {
top: 0;
right: 5px;
right: @tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-arrow-color;
}

View file

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

View file

@ -9,6 +9,9 @@
.clearfix {
.clearfix();
}
.center-block {
.center-block();
}
.pull-right {
float: right !important;
}
@ -20,6 +23,7 @@
// Toggling content
// -------------------------
// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
.hide {
display: none !important;
}
@ -30,7 +34,17 @@
visibility: hidden;
}
.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-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-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-base;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;
// Iconography
// -------------------------
@ -82,6 +91,7 @@
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@ -165,12 +175,12 @@
@dropdown-fallback-border: #ccc;
@dropdown-divider-bg: #e5e5e5;
@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: @dropdown-link-active-bg;
@dropdown-link-hover-color: darken(@gray-dark, 5%);
@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;
@ -200,25 +210,33 @@
// --------------------------------------------------
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-phone: @screen-xs;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 768px;
@screen-tablet: @screen-sm;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-desktop: @screen-md;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@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
@screen-xs-max: (@screen-sm - 1);
@screen-sm-max: (@screen-md - 1);
@screen-md-max: (@screen-lg - 1);
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
// Grid system
@ -229,7 +247,7 @@
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;
@grid-float-breakpoint: @screen-sm-min;
// Navbar
@ -238,13 +256,14 @@
// Basics of a navbar
@navbar-height: 50px;
@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-padding-horizontal: floor(@grid-gutter-width / 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-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@ -256,7 +275,7 @@
// Navbar brand label
@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 toggle
@ -286,13 +305,6 @@
@navbar-inverse-brand-hover-color: #fff;
@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
@navbar-inverse-toggle-hover-bg: #333;
@navbar-inverse-toggle-icon-bar-bg: #fff;
@ -324,8 +336,9 @@
@nav-tabs-justified-active-link-border-color: @body-bg;
// Pills
@nav-pills-border-radius: @border-radius-base;
@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
@ -355,21 +368,13 @@
@jumbotron-padding: 30px;
@jumbotron-color: inherit;
@jumbotron-bg: @gray-lighter;
@jumbotron-heading-color: inherit;
@jumbotron-font-size: ceil(@font-size-base * 1.5);
// 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-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@ -378,6 +383,14 @@
@state-info-bg: #d9edf7;
@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
// -------------------------
@ -478,7 +491,7 @@
@list-group-border-radius: @border-radius-base;
@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-border: @list-group-active-bg;
@ -553,6 +566,7 @@
@breadcrumb-bg: #f5f5f5;
@breadcrumb-color: #ccc;
@breadcrumb-active-color: @gray-light;
@breadcrumb-separator: "/";
// Carousel
@ -573,8 +587,8 @@
// Close
// ------------------------
@close-color: #000;
@close-font-weight: bold;
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
@ -611,10 +625,13 @@
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
@container-tablet: ((720px + @grid-gutter-width));
@container-sm: @container-tablet;
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
@container-desktop: ((940px + @grid-gutter-width));
@container-md: @container-desktop;
// Large screen / wide desktop
@container-lg-desktop: ((1140px + @grid-gutter-width));
@container-large-desktop: ((1140px + @grid-gutter-width));
@container-lg: @container-large-desktop;