1
0
Fork 0
mirror of https://github.com/twbs/bootstrap-sass.git synced 2022-11-09 12:27:02 -05:00

Merge branch '2.0.2'

This commit is contained in:
Thomas McDonald 2012-03-31 14:56:44 +01:00
commit 4a8dc21e86
47 changed files with 758 additions and 409 deletions

View file

@ -1,5 +1,14 @@
# Changelog
## 2.0.2
* [#86] Updated to Bootstrap 2.0.2
Things of note: static navbars now have full width. (to be fixed in 2.0.3) `.navbar-inner > .container { width:940px; }` seems to work in the meanwhile
* [#62] Fixed asset compilation taking a *very* long time.
* [#69, #79, #80] (Hopefully) clarified README. Now with less cat humour.
* [#91] Removed doubled up Sass extensions for Rails.
* [#63, #73] Allow for overriding of image-path
* [[SO](http://stackoverflow.com/a/9909626/241212)] Added makeFluidColumn mixin for defining fluid columns. Fluid rows must use `@extend .row-fluid`, and any column inside it can use `@include makeFluidColumn(num)`, where `num` is the number of columns. Unfortunately, there is a rather major limitation to this: margins on first-child elements must be overriden. See the attached Stack Overflow answer for more information.
## 2.0.1
* Updated to Bootstrap 2.0.1
* Modified `@mixin opacity()` to take an argument `0...1` rather than `0...100` to be consistent with Compass.

View file

@ -1,6 +1,6 @@
# Bootstrap for SASS
# Bootstrap for Sass
`bootstrap-sass` is an SASS-powered version of [Twitter's Bootstrap](http://github.com/twitter/bootstrap), ready to drop right into your SASS powered applications.
`bootstrap-sass` is an Sass-powered version of [Twitter's Bootstrap](http://github.com/twitter/bootstrap), ready to drop right into your Sass powered applications.
Enjoy.
@ -14,24 +14,24 @@ Updating your application to a new version of `bootstrap-sass`? See [our changel
In your Gemfile:
gem 'sass-rails', '~> 3.1'
gem 'bootstrap-sass', '~> 2.0.1'
**Note**: previous versions of bootstrap-sass automatically required sass-rails. This is no longer the case, and you will *need* to require it in your Gemfile.
gem 'bootstrap-sass', '~> 2.0.2'
#### CSS
Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables! Don't use Sproket's `//= require` directives for SASS files, because they're horrible and will kill your cat.
Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables! We recommend against using `//= require` directives, since none of your other stylesheets will be [able to use](https://github.com/thomas-mcdonald/bootstrap-sass/issues/79#issuecomment-4428595) the awesome mixins that Bootstrap has defined.
@import "bootstrap";
Need to configure a variable or two? Simple define the value of the variable you want to change *before* importing Bootstrap. SASS will be awesome and respect your existing definition rather than overwriting it with the Bootstrap defaults. A list of customisable variables can be found in the [Bootstrap documentation](http://twitter.github.com/bootstrap/less.html#variables).
Need to configure a variable or two? Simple define the value of the variable you want to change *before* importing Bootstrap. Sass will respect your existing definition rather than overwriting it with the Bootstrap defaults. A list of customisable variables can be found in the [Bootstrap documentation](http://twitter.github.com/bootstrap/less.html#variables).
$primaryButtonBackground: #f00;
@import "bootstrap";
**Note**: It's important that the file you are importing is not named `bootstrap`, since this will cause an import loop. As a general rule, errors are something you should try to avoid.
#### Javascripts
You can include the Bootstrap javascripts through two methods. In this case, Sproket's `//= require` directives are useful and will not cause feline death.
You can include the Bootstrap javascripts through two methods. In this case, Sprocket's `//= require` directives are useful, since there is no better alternative.
We have a helper that includes all available javascripts:

View file

@ -1,9 +1,9 @@
Gem::Specification.new do |s|
s.name = "bootstrap-sass"
s.version = '2.0.1'
s.version = '2.0.2'
s.authors = ["Thomas McDonald"]
s.email = 'tom@conceptcoding.co.uk'
s.summary = "Twitter's Bootstrap, converted to SASS and ready to drop into Rails or Compass"
s.summary = "Twitter's Bootstrap, converted to Sass and ready to drop into Rails or Compass"
s.homepage = "http://github.com/thomas-mcdonald/bootstrap-sass"
s.add_development_dependency 'compass'

View file

@ -6,8 +6,10 @@ module Bootstrap
if rails?
require 'sass-rails' # See: https://github.com/thomas-mcdonald/bootstrap-sass/pull/4
require 'bootstrap-sass/engine'
require 'bootstrap-sass/config/sass_extentions'
elsif compass?
require 'bootstrap-sass/compass_extensions'
require 'bootstrap-sass/config/sass_extentions'
base = File.join(File.dirname(__FILE__), '..')
styles = File.join(base, 'vendor', 'assets', 'stylesheets')
templates = File.join(base, 'templates')

View file

@ -1,14 +0,0 @@
require 'sass'
module Sass::Script::Functions
# LARS: Snatched from compass - 2011-11-29 - used for gradients in IE6-9
# returns an IE hex string for a color with an alpha channel
# suitable for passing to IE filters.
def ie_hex_str(color)
assert_type color, :Color
alpha = (color.alpha * 255).round
alphastr = alpha.to_s(16).rjust(2, '0')
Sass::Script::String.new("##{alphastr}#{color.send(:hex_str)[1..-1]}".upcase)
end
declare :ie_hex_str, [:color]
end

View file

@ -3,7 +3,7 @@ module Bootstrap
class Engine < ::Rails::Engine
# Rails, will you please look in our vendor? kthx
# also add our initializer.
paths["config/initializers"] << 'lib/bootstrap-sass/config'
# paths["config/initializers"] << 'lib/bootstrap-sass/config'
end
end
end

View file

@ -1,4 +1,4 @@
description "Bootstrap for SASS"
description "Bootstrap for Sass"
# Stylesheet importing bootstrap
stylesheet 'styles.scss'

View file

@ -1,5 +1,5 @@
/* ==========================================================
* bootstrap-alert.js v2.0.1
* bootstrap-alert.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#alerts
* ==========================================================
* Copyright 2012 Twitter, Inc.

View file

@ -1,5 +1,5 @@
/* ============================================================
* bootstrap-button.js v2.0.1
* bootstrap-button.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#buttons
* ============================================================
* Copyright 2012 Twitter, Inc.
@ -91,7 +91,9 @@
$(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
$(e.currentTarget).button('toggle')
var $btn = $(e.target)
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
$btn.button('toggle')
})
})

View file

@ -1,5 +1,5 @@
/* ==========================================================
* bootstrap-carousel.js v2.0.1
* bootstrap-carousel.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#carousel
* ==========================================================
* Copyright 2012 Twitter, Inc.
@ -29,6 +29,9 @@
this.$element = $(element)
this.options = $.extend({}, $.fn.carousel.defaults, options)
this.options.slide && this.slide(this.options.slide)
this.options.pause == 'hover' && this.$element
.on('mouseenter', $.proxy(this.pause, this))
.on('mouseleave', $.proxy(this.cycle, this))
}
Carousel.prototype = {
@ -83,14 +86,14 @@
, fallback = type == 'next' ? 'first' : 'last'
, that = this
if (!$next.length) return
this.sliding = true
isCycling && this.pause()
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if (!$.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger('slide')
$active.removeClass('active')
@ -136,6 +139,7 @@
$.fn.carousel.defaults = {
interval: 5000
, pause: 'hover'
}
$.fn.carousel.Constructor = Carousel

View file

@ -1,5 +1,5 @@
/* =============================================================
* bootstrap-collapse.js v2.0.1
* bootstrap-collapse.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#collapse
* =============================================================
* Copyright 2012 Twitter, Inc.
@ -74,7 +74,9 @@
[dimension](size || 'auto')
[0].offsetWidth
this.$element.addClass('collapse')
this.$element[size ? 'addClass' : 'removeClass']('collapse')
return this
}
, transition: function ( method, startEvent, completeEvent ) {

View file

@ -1,5 +1,5 @@
/* ============================================================
* bootstrap-dropdown.js v2.0.1
* bootstrap-dropdown.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#dropdowns
* ============================================================
* Copyright 2012 Twitter, Inc.

View file

@ -1,5 +1,5 @@
/* =========================================================
* bootstrap-modal.js v2.0.1
* bootstrap-modal.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#modals
* =========================================================
* Copyright 2012 Twitter, Inc.

View file

@ -1,5 +1,5 @@
/* ===========================================================
* bootstrap-popover.js v2.0.1
* bootstrap-popover.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#popovers
* ===========================================================
* Copyright 2012 Twitter, Inc.

View file

@ -1,5 +1,5 @@
/* =============================================================
* bootstrap-scrollspy.js v2.0.1
* bootstrap-scrollspy.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#scrollspy
* =============================================================
* Copyright 2012 Twitter, Inc.

View file

@ -1,5 +1,5 @@
/* ========================================================
* bootstrap-tab.js v2.0.1
* bootstrap-tab.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#tabs
* ========================================================
* Copyright 2012 Twitter, Inc.

View file

@ -1,5 +1,5 @@
/* ===========================================================
* bootstrap-tooltip.js v2.0.1
* bootstrap-tooltip.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#tooltips
* Inspired by the original jQuery.tipsy by Jason Frame
* ===========================================================
@ -206,7 +206,7 @@
title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
title = title.toString().replace(/(^\s*|\s*$)/, "")
title = (title || '').toString().replace(/(^\s*|\s*$)/, "")
return title
}

View file

@ -1,5 +1,5 @@
/* ===================================================
* bootstrap-transition.js v2.0.1
* bootstrap-transition.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#transitions
* ===================================================
* Copyright 2012 Twitter, Inc.

View file

@ -1,5 +1,5 @@
/* =============================================================
* bootstrap-typeahead.js v2.0.1
* bootstrap-typeahead.js v2.0.2
* http://twitter.github.com/bootstrap/javascript.html#typeahead
* =============================================================
* Copyright 2012 Twitter, Inc.
@ -40,6 +40,7 @@
, select: function () {
var val = this.$menu.find('.active').attr('data-value')
this.$element.val(val)
this.$element.change();
return this.hide()
}
@ -165,9 +166,6 @@
}
, keyup: function (e) {
e.stopPropagation()
e.preventDefault()
switch(e.keyCode) {
case 40: // down arrow
case 38: // up arrow
@ -180,6 +178,7 @@
break
case 27: // escape
if (!this.shown) return
this.hide()
break
@ -187,10 +186,11 @@
this.lookup()
}
e.stopPropagation()
e.preventDefault()
}
, keypress: function (e) {
e.stopPropagation()
if (!this.shown) return
switch(e.keyCode) {
@ -210,12 +210,12 @@
this.next()
break
}
e.stopPropagation()
}
, blur: function (e) {
var that = this
e.stopPropagation()
e.preventDefault()
setTimeout(function () { that.hide() }, 150)
}

View file

@ -1,14 +1,3 @@
/*!
* Bootstrap Responsive v2.0.1
*
* Copyright 2012 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 @twitter by @mdo and @fat.
* Converted to SASS by Thomas McDonald
*/
// Responsive.css.scss
// For phone and tablet devices
// -------------------------------------------------------------
@ -32,7 +21,36 @@
visibility: hidden;
}
// Visibility utilities
// For desktops
.visible-phone { display: none; }
.visible-tablet { display: none; }
.visible-desktop { display: block; }
.hidden-phone { display: block; }
.hidden-tablet { display: block; }
.hidden-desktop { display: none; }
// Phones only
@media (max-width: 767px) {
// Show
.visible-phone { display: block; }
// Hide
.hidden-phone { display: none; }
// Hide everything else
.hidden-desktop { display: block; }
.visible-desktop { display: none; }
}
// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
// Show
.visible-tablet { display: block; }
// Hide
.hidden-tablet { display: none; }
// Hide everything else
.hidden-desktop { display: block; }
.visible-desktop { display: none; }
}
// UP TO LANDSCAPE PHONE
// ---------------------
@ -50,22 +68,6 @@
line-height: $baseLineHeight;
}
// Make span* classes full width
input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input {
display: block;
width: 100%;
min-height: 28px; /* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
-webkit-box-sizing: border-box; /* Older Webkit */
-moz-box-sizing: border-box; /* Older FF */
-ms-box-sizing: border-box; /* IE8 */
box-sizing: border-box; /* CSS3 spec*/
}
// But don't let it screw up prepend/append inputs
.input-prepend input[class*="span"], .input-append input[class*="span"] {
width: auto;
}
// Update checkboxes for iOS
input[type="checkbox"], input[type="radio"] {
border: 1px solid #ccc;
@ -120,12 +122,22 @@
// --------------------------------------------------
@media (max-width: 767px) {
// Padding to set content in a bit
body {
padding-left: 20px;
padding-right: 20px;
}
.navbar-fixed-top {
margin-left: -20px;
margin-right: -20px;
}
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
padding: 0 20px;
}
// Fluid rows
.row-fluid {
@ -142,6 +154,23 @@
width: auto;
margin: 0;
}
// THUMBNAILS
// ----------
.thumbnails [class*="span"] {
width: auto;
}
// FORM FIELDS
// -----------
// Make span* classes full width
input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input {
@include input-block-level();
}
// But don't let it screw up prepend/append inputs
.input-prepend input[class*="span"], .input-append input[class*="span"] {
width: auto;
}
}
@ -152,13 +181,13 @@
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
@include gridSystemGenerate(12, 42px, 20px);
@include gridCore(42px, 20px);
// Fluid grid
@include fluidGridSystemGenerate(12, 5.801104972%, 2.762430939%);
@include gridFluid(5.801104972%, 2.762430939%);
// Input grid
@include inputGridSystemGenerate(12, 42px, 20px);
@include gridInput(42px, 20px);
}
@ -288,6 +317,7 @@
@media (min-width: 980px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
@ -299,13 +329,13 @@
@media (min-width: 1200px) {
// Fixed grid
@include gridSystemGenerate(12, 70px, 30px);
@include gridCore(70px, 30px);
// Fluid grid
@include fluidGridSystemGenerate(12, 5.982905983%, 2.564102564%);
@include gridFluid(5.982905983%, 2.564102564%);
// Input grid
@include inputGridSystemGenerate(12, 70px, 30px);
@include gridInput(70px, 30px);
// Thumbnails
.thumbnails {

View file

@ -1,14 +1,3 @@
/*!
* Bootstrap 2.0.1
*
* Copyright 2012 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 @twitter by @mdo and @fat.
* Converted to SASS by Thomas McDonald
*/
// Core variables and mixins
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins";
@ -54,6 +43,7 @@
// Components: Misc
@import "bootstrap/thumbnails";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/progress-bars";
@import "bootstrap/accordion";
@import "bootstrap/carousel";

View file

@ -9,10 +9,11 @@
background-color: $warningBackground;
border: 1px solid $warningBorder;
@include border-radius(4px);
}
.alert, .alert-heading {
color: $warningText;
}
.alert-heading {
color: inherit;
}
// Adjust close link position
.alert .close {
@ -28,26 +29,19 @@
.alert-success {
background-color: $successBackground;
border-color: $successBorder;
}
.alert-success, .alert-success .alert-heading {
color: $successText;
}
.alert-danger, .alert-error {
background-color: $errorBackground;
border-color: $errorBorder;
}
.alert-danger, .alert-error, .alert-danger .alert-heading, .alert-error .alert-heading {
color: $errorText;
}
.alert-info {
background-color: $infoBackground;
border-color: $infoBorder;
}
.alert-info, .alert-info .alert-heading {
color: $infoText;
}
// Block alerts
// ------------------------
.alert-block {

View file

@ -0,0 +1,36 @@
// BADGES
// ------
// Base
.badge {
padding: 1px 9px 2px;
font-size: $baseFontSize * .925;
font-weight: bold;
white-space: nowrap;
color: $white;
background-color: $grayLight;
@include border-radius(9px);
}
// Hover state
.badge:hover {
color: $white;
text-decoration: none;
cursor: pointer;
}
// Colors
.badge-error { background-color: $errorText; }
.badge-error:hover { background-color: darken($errorText, 10%); }
.badge-warning { background-color: $orange; }
.badge-warning:hover { background-color: darken($orange, 10%); }
.badge-success { background-color: $successText; }
.badge-success:hover { background-color: darken($successText, 10%); }
.badge-info { background-color: $infoText; }
.badge-info:hover { background-color: darken($infoText, 10%); }
.badge-inverse { background-color: $grayDark; }
.badge-inverse:hover { background-color: darken($grayDark, 10%); }

View file

@ -4,12 +4,14 @@
.breadcrumb {
padding: 7px 14px;
margin: 0 0 $baseLineHeight;
list-style: none;
@include gradient-vertical($white, #f5f5f5);
border: 1px solid #ddd;
@include border-radius(3px);
@include box-shadow(inset 0 1px 0 $white);
li {
display: inline-block;
@include ie7-inline-block();
text-shadow: 0 1px 0 $white;
}
.divider {

View file

@ -89,8 +89,22 @@
padding-right: 8px;
$shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
@include box-shadow($shadow);
*padding-top: 5px;
*padding-bottom: 5px;
*padding-top: 3px;
*padding-bottom: 3px;
}
.btn-group .btn-mini.dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
*padding-top: 1px;
*padding-bottom: 1px;
}
.btn-group .btn-small.dropdown-toggle {
*padding-top: 4px;
*padding-bottom: 4px;
}
.btn-group .btn-large.dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
.btn-group.open {
@ -120,17 +134,25 @@
.btn:hover .caret, .open.btn-group .caret {
@include opacity(1);
}
// Carets in other button sizes
.btn-mini .caret {
margin-top: 5px;
}
.btn-small .caret {
margin-top: 6px;
}
.btn-large .caret {
margin-top: 6px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid $black;
}
// Account for other colors
.btn-primary, .btn-danger, .btn-info, .btn-success, .btn-inverse {
.btn-primary, .btn-warning, .btn-danger, .btn-info, .btn-success, .btn-inverse {
.caret {
border-top-color: $white;
border-bottom-color: $white;
@include opacity(0.75);
}
}
// Small button dropdowns
.btn-small .caret {
margin-top: 4px;
}
}

View file

@ -8,6 +8,7 @@
// Core
.btn {
display: inline-block;
@include ie7-inline-block();
padding: 4px 10px 4px;
margin-bottom: 0; // For input.btn
font-size: $baseFontSize;
@ -16,16 +17,15 @@
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle;
@include buttonBackground($white, darken($white, 10%));
border: 1px solid #ccc;
border-bottom-color: #bbb;
@include buttonBackground($btnBackground, $btnBackgroundHighlight);
border: 1px solid $btnBorder;
border-bottom-color: darken($btnBorder, 10%);
@include border-radius(4px);
$shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
@include box-shadow($shadow);
cursor: pointer;
// Give IE7 some love
@include reset-filter();
@include ie7-restore-left-whitespace();
}
@ -115,26 +115,26 @@
// Set the backgrounds
// -------------------------
.btn-primary {
@include buttonBackground($primaryButtonBackground, adjust-hue($primaryButtonBackground, 20));
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
}
// Warning appears are orange
.btn-warning {
@include buttonBackground(lighten($orange, 15%), $orange);
@include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight);
}
// Danger and error appear as red
.btn-danger {
@include buttonBackground(#ee5f5b, #bd362f);
@include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight);
}
// Success appears as green
.btn-success {
@include buttonBackground(#62c462, #51a351);
@include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight);
}
// Info appears as a neutral blue
.btn-info {
@include buttonBackground(#5bc0de, #2f96b4);
@include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight);
}
.btn-inverse {
@include buttonBackground(#454545, #262626);
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
}
@ -152,12 +152,16 @@ button.btn, input[type="submit"].btn {
// IE7 has some default padding on button controls
*padding-top: 2px;
*padding-bottom: 2px;
&.large {
&.btn-large {
*padding-top: 7px;
*padding-bottom: 7px;
}
&.small {
&.btn-small {
*padding-top: 3px;
*padding-bottom: 3px;
}
&.btn-mini {
*padding-top: 1px;
*padding-bottom: 1px;
}
}

View file

@ -13,7 +13,7 @@ code, pre {
// Inline code
code {
padding: 3px 4px;
padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
@ -24,7 +24,7 @@ pre {
display: block;
padding: ($baseLineHeight - 1) / 2;
margin: 0 0 $baseLineHeight / 2;
font-size: 12px;
font-size: $baseFontSize * .925; // 13px to 12px
line-height: $baseLineHeight;
background-color: #f5f5f5;
border: 1px solid #ccc; // fallback for IE7-8

View file

@ -14,5 +14,7 @@
position:relative;
overflow:hidden;
height: 0;
&.in { height: auto; }
&.in {
height: auto;
}
}

View file

@ -12,22 +12,22 @@
.dropdown-toggle:active, .open .dropdown-toggle {
outline: 0;
}
// Dropdown arrow/caret
// --------------------
.caret {
display: inline-block;
width: 0;
height: 0;
text-indent: -99999px;
// IE7 won't do the border trick if there's a text indent, but it doesn't
// do the content that text-indent is hiding, either, so we're ok.
*text-indent: 0;
vertical-align: top;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid $black;
@include opacity(0.3);
content: "\2193";
content: "";
}
// Place the caret
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
@ -35,7 +35,9 @@
.dropdown:hover .caret, .open.dropdown .caret {
@include opacity(1);
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
@ -44,11 +46,10 @@
float: left;
display: none; // none by default, but block on "open" of the menu
min-width: 160px;
_width: 160px;
padding: 4px 0;
margin: 0; // override default ul
list-style: none;
background-color: $white;
background-color: $dropdownBackground;
border-color: #ccc;
border-color: rgba(0,0,0,.2);
border-style: solid;
@ -61,27 +62,15 @@
*border-right-width: 2px;
*border-bottom-width: 2px;
// Allow for dropdowns to go bottom up (aka, dropup-menu)
&.bottom-up {
top: auto;
bottom: 100%;
margin-bottom: 2px;
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
// Dividers (basically an hr) within the dropdown
.divider {
height: 1px;
margin: 5px 1px;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid $white;
// IE7 needs a set width since we gave a height. Restricting just
// to IE7 to keep the 1px left/right space in other browsers.
// It is unclear where IE is getting the extra space that we need
// to negative-margin away, but so it goes.
*width: 100%;
*margin: -5px 0 5px;
@include nav-divider();
}
// Links within the dropdown menu
@ -91,19 +80,21 @@
clear: both;
font-weight: normal;
line-height: $baseLineHeight;
color: $gray;
color: $dropdownLinkColor;
white-space: nowrap;
}
}
// Hover state
// -----------
.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {
color: $white;
color: $dropdownLinkColorHover;
text-decoration: none;
background-color: $linkColor;
background-color: $dropdownLinkBackgroundHover;
}
// Open state for the dropdown
// ---------------------------
.dropdown.open {
// IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page
@ -119,7 +110,33 @@
}
}
// Right aligned dropdowns
.pull-right .dropdown-menu {
left: auto;
right: 0;
}
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup, .navbar-fixed-bottom .dropdown {
// Reverse the caret
.caret {
border-top: 0;
border-bottom: 4px solid $black;
content: "\2191";
}
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
}
// Typeahead
// ---------
.typeahead {
margin-top: 2px; // give it some space to breathe
@include border-radius(4px);

View file

@ -42,7 +42,7 @@ label, input, button, select, textarea {
}
input, button, select, textarea {
@include font-family-sans-serif(); // And only set font-family here for those that need it (note the missing label element)
font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
@ -62,7 +62,7 @@ input, textarea, select, .uneditable-input {
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $gray;
border: 1px solid #ccc;
border: 1px solid $inputBorder;
@include border-radius(3px);
}
.uneditable-textarea {
@ -97,7 +97,7 @@ input[type="file"] {
padding: initial;
line-height: initial;
border: initial;
background-color: $white;
background-color: $inputBackground;
background-color: initial;
@include box-shadow(none);
}
@ -123,7 +123,7 @@ input[type="file"] {
// Chrome on Linux and Mobile Safari need background-color
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
background-color: $white;
background-color: $inputBackground;
}
// Make multiple select elements height not fixed
@ -223,7 +223,7 @@ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditabl
// GRID SIZING FOR INPUTS
// ----------------------
@include inputGridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth);
@include gridInput($gridColumnWidth, $gridGutterWidth);
@ -233,7 +233,7 @@ input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditabl
// Disabled and read-only inputs
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {
background-color: #f5f5f5;
background-color: $inputDisabledBackground;
border-color: #ddd;
cursor: not-allowed;
}
@ -277,14 +277,15 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
padding: ($baseLineHeight - 1) 20px $baseLineHeight;
margin-top: $baseLineHeight;
margin-bottom: $baseLineHeight;
background-color: #f5f5f5;
background-color: $grayLighter;
border-top: 1px solid #ddd;
@include clearfix(); // Adding clearfix to allow for .pull-right button containers
}
// For text that needs to appear as an input but should not be an input
.uneditable-input {
display: block;
background-color: $white;
background-color: $inputBackground;
border-color: #eee;
@include box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
@ -298,17 +299,18 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
// HELP TEXT
// ---------
.help-block, .help-inline {
color: $gray; // lighten the text for some contrast
}
.help-block {
display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 0;
color: $grayLight;
margin-bottom: $baseLineHeight / 2;
}
.help-inline {
display: inline-block;
@include ie7-inline-block();
margin-bottom: 9px;
vertical-align: middle;
padding-left: 5px;
}
@ -321,8 +323,8 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
// Allow us to put symbols and text within the input field for a cleaner look
.input-prepend, .input-append {
margin-bottom: 5px;
@include clearfix(); // Clear the float to prevent wrapping
input, .uneditable-input {
input, select, .uneditable-input {
*margin-left: 0;
@include border-radius(0 3px 3px 0);
&:focus {
position: relative;
@ -334,20 +336,20 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
border-right-color: #ccc;
}
.add-on {
float: left;
display: block;
display: inline-block;
width: auto;
min-width: 16px;
height: $baseLineHeight;
margin-right: -1px;
padding: 4px 5px;
font-weight: normal;
line-height: $baseLineHeight;
color: $grayLight;
text-align: center;
text-shadow: 0 1px 0 $white;
background-color: #f5f5f5;
vertical-align: middle;
background-color: $grayLighter;
border: 1px solid #ccc;
}
.add-on, .btn {
@include border-radius(3px 0 0 3px);
}
.active {
@ -356,31 +358,34 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
}
}
.input-prepend {
.add-on {
*margin-top: 1px; /* IE6-7 */
.add-on, .btn {
margin-right: -1px;
}
}
.input-append {
input, .uneditable-input {
float: left;
input, select, .uneditable-input {
@include border-radius(3px 0 0 3px);
}
.uneditable-input {
border-right-color: #ccc;
}
.add-on {
margin-right: 0;
.add-on, .btn {
margin-left: -1px;
@include border-radius(0 3px 3px 0);
}
input:first-child {
// In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
// inherit the sum of its ancestors' margins.
*margin-left: -160px;
&+.add-on {
*margin-left: -21px;
}
}
// Remove all border-radius for inputs with both prepend and append
.input-prepend.input-append {
input, select, .uneditable-input {
@include border-radius(0);
}
.add-on:first-child, .btn:first-child {
margin-right: -1px;
@include border-radius(3px 0 0 3px);
}
.add-on:last-child, .btn:last-child {
margin-left: -1px;
@include border-radius(0 3px 3px 0);
}
}
@ -405,25 +410,34 @@ input:focus:required:invalid, textarea:focus:required:invalid, select:focus:requ
// -----------------
.form-search, .form-inline, .form-horizontal {
input, textarea, select, .help-inline, .uneditable-input {
input, textarea, select, .help-inline, .uneditable-input, .input-prepend, .input-append {
display: inline-block;
margin-bottom: 0;
}
// Re-hide elemnts due to specifity
.hide { display: none; }
}
.form-search label, .form-inline label, .form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend {
.form-search label, .form-inline label {
display: inline-block;
}
// Make the prepend and append add-on vertical-align: middle;
.form-search .input-append .add-on, .form-inline .input-prepend .add-on, .form-search .input-append .add-on, .form-inline .input-prepend .add-on {
vertical-align: middle;
// Remove margin for input-prepend/-append
.form-search .input-append, .form-inline .input-append, .form-search .input-prepend, .form-inline .input-prepend {
margin-bottom: 0;
}
// Inline checkbox/radio labels
.form-search .radio, .form-inline .radio, .form-search .checkbox, .form-inline .checkbox {
// Inline checkbox/radio labels (remove padding on left)
.form-search .radio, .form-search .checkbox, .form-inline .radio, .form-inline .checkbox {
padding-left: 0;
margin-bottom: 0;
vertical-align: middle;
}
// Remove float and margin, set to inline-block
.form-search .radio input[type="radio"], .form-search .checkbox input[type="checkbox"], .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] {
float: left;
margin-left: 0;
margin-right: 3px;
}
// Margin to space out fieldsets
.control-group {
@ -455,6 +469,15 @@ legend + .control-group {
// Move over all input controls and content
.controls {
margin-left: 160px;
/* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */
*display: inline-block;
*margin-left: 0;
*padding-left: 20px;
}
// Remove bottom margin on block level help text since that's accounted for on .control-group
.help-block {
margin-top: $baseLineHeight / 2;
margin-bottom: 0;
}
// Move over buttons in .form-actions to align with .controls
.form-actions {

View file

@ -1,8 +1,5 @@
// GRID SYSTEM
// -----------
// Fixed (940px)
@include gridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth);
@include gridCore($gridColumnWidth, $gridGutterWidth);
// Fluid (940px)
@include fluidGridSystemGenerate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
@include gridFluid($fluidGridColumnWidth, $fluidGridGutterWidth);

View file

@ -4,17 +4,19 @@
.hero-unit {
padding: 60px;
margin-bottom: 30px;
background-color: #f5f5f5;
background-color: $heroUnitBackground;
@include border-radius(6px);
h1 {
margin-bottom: 0;
font-size: 60px;
line-height: 1;
color: $heroUnitHeadingColor;
letter-spacing: -1px;
}
p {
font-size: 18px;
font-weight: 200;
line-height: $baseLineHeight * 1.5;
color: $heroUnitLeadColor;
}
}

View file

@ -3,10 +3,13 @@
// Base
.label {
padding: 2px 4px 3px;
font-size: $baseFontSize * .85;
padding: 1px 4px 2px;
font-size: $baseFontSize * .846;
font-weight: bold;
line-height: 13px; // ensure proper line-height if floated
color: $white;
vertical-align: middle;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: $grayLight;
@include border-radius(3px);
@ -29,4 +32,7 @@
.label-success:hover { background-color: darken($successText, 10%); }
.label-info { background-color: $infoText; }
.label-info:hover { background-color: darken($infoText, 10%); }
.label-info:hover { background-color: darken($infoText, 10%); }
.label-inverse { background-color: $grayDark; }
.label-inverse:hover { background-color: darken($grayDark, 10%); }

View file

@ -98,6 +98,15 @@
white-space: nowrap;
}
// New image replacement
// -------------------------
// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
@mixin hide-text() {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
// FONTS
// --------------------------------------------------
@ -130,114 +139,17 @@
// GRID SYSTEM
// FORMS
// --------------------------------------------------
// Site container
// -------------------------
@mixin container-fixed() {
width: $gridRowWidth;
margin-left: auto;
margin-right: auto;
@include clearfix();
@mixin input-block-level() {
display: block;
width: 100%;
min-height: 28px; /* Make inputs at least the height of their button counterpart */
/* Makes inputs behave like true block-level elements */
@include box-sizing(border-box);
}
// Le grid system
// -------------------------
// Setup the mixins to be used
@mixin gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}
@mixin gridSystemOffset($gridColumnWidth, $gridGutterWidth, $columns) {
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
}
@mixin gridSystemGridColumn($gridGutterWidth) {
float: left;
margin-left: $gridGutterWidth;
}
// Take these values and mixins, and make 'em do their thang
@mixin gridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
// Row surrounds the columns
.row {
margin-left: $gridGutterWidth * -1;
@include clearfix();
}
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
[class*="span"] {
@include gridSystemGridColumn($gridGutterWidth);
}
// Default columns
@for $i from 1 through $gridColumns {
.span#{$i} { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i) }
}
.container { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $gridColumns) }
// Offset column options
@for $i from 1 through $gridColumns - 1 {
.offset#{$i} { @include gridSystemOffset($gridColumnWidth, $gridGutterWidth, $i) }
}
}
// Fluid grid system
// -------------------------
@mixin fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
}
@mixin fluidGridSystemGridColumn($fluidGridGutterWidth) {
float: left;
margin-left: $fluidGridGutterWidth;
}
// Take these values and mixins, and make 'em do their thang
@mixin fluidGridSystemGenerate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
// Row surrounds the columns
.row-fluid {
width: 100%;
@include clearfix();
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
> [class*="span"] {
@include fluidGridSystemGridColumn($fluidGridGutterWidth);
}
> [class*="span"]:first-child {
margin-left: 0;
}
// Default columns
@for $i from 1 through $gridColumns {
> .span#{$i} { @include fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
}
}
}
// Input grid system
// -------------------------
@mixin inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
}
@mixin inputGridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
input, textarea, .uneditable-input {
@for $i from 1 through $gridColumns {
&.span#{$i} { @include inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
}
}
}
// Make a grid
// -------------------------
// Use makeRow() and makeColumn() to assign semantic layouts grid system behaviour
@mixin makeRow() {
margin-left: $gridGutterWidth * -1;
@include clearfix();
}
@mixin makeColumn($columns: 1) {
float: left;
margin-left: $gridGutterWidth;
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}
// Form field states (used in forms.less)
// --------------------------------------------------
// Mixin for form field states
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
@ -349,6 +261,7 @@
@mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel;
-ms-box-sizing: $boxmodel;
box-sizing: $boxmodel;
}
@ -453,8 +366,8 @@
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
background-repeat: no-repeat;
// Opera cannot do radial gradients yet
}
@mixin gradient-striped($color, $angle: -45deg) {
background-color: $color;
@ -471,8 +384,29 @@
}
// Mixin for generating button backgrounds
// ---------------------------------------
// COMPONENT MIXINS
// --------------------------------------------------
// Horizontal dividers
// -------------------
// Dividers (basically an hr) within dropdowns and nav lists
@mixin nav-divider() {
height: 1px;
margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid $white;
// IE7 needs a set width since we gave a height. Restricting just
// to IE7 to keep the 1px left/right space in other browsers.
// It is unclear where IE is getting the extra space that we need
// to negative-margin away, but so it goes.
*width: 100%;
*margin: -5px 0 5px;
}
// Button backgrounds
// ------------------
@mixin buttonBackground($startColor, $endColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
@include gradientBar($startColor, $endColor);
@ -489,42 +423,150 @@
}
}
// Navbar vertical align
// -------------------------
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
@mixin navbarVerticalAlign($elementHeight) {
margin-top: ($navbarHeight - $elementHeight) / 2;
}
// COMPONENT MIXINS
// --------------------------------------------------
// POPOVER ARROWS
// Popover arrows
// -------------------------
// For tipsies and popovers
@mixin popoverArrowTop($arrowWidth: 5px) {
@mixin popoverArrowTop($arrowWidth: 5px, $color: $black) {
bottom: 0;
left: 50%;
margin-left: -$arrowWidth;
border-left: $arrowWidth solid transparent;
border-right: $arrowWidth solid transparent;
border-top: $arrowWidth solid $black;
border-top: $arrowWidth solid $color;
}
@mixin popoverArrowLeft($arrowWidth: 5px) {
@mixin popoverArrowLeft($arrowWidth: 5px, $color: $black) {
top: 50%;
right: 0;
margin-top: -$arrowWidth;
border-top: $arrowWidth solid transparent;
border-bottom: $arrowWidth solid transparent;
border-left: $arrowWidth solid $black;
border-left: $arrowWidth solid $color;
}
@mixin popoverArrowBottom($arrowWidth: 5px) {
@mixin popoverArrowBottom($arrowWidth: 5px, $color: $black) {
top: 0;
left: 50%;
margin-left: -$arrowWidth;
border-left: $arrowWidth solid transparent;
border-right: $arrowWidth solid transparent;
border-bottom: $arrowWidth solid $black;
border-bottom: $arrowWidth solid $color;
}
@mixin popoverArrowRight($arrowWidth: 5px) {
@mixin popoverArrowRight($arrowWidth: 5px, $color: $black) {
top: 50%;
left: 0;
margin-top: -$arrowWidth;
border-top: $arrowWidth solid transparent;
border-bottom: $arrowWidth solid transparent;
border-right: $arrowWidth solid $black;
border-right: $arrowWidth solid $color;
}
// Grid System
// -----------
// Centered container element
@mixin container-fixed() {
margin-left: auto;
margin-right: auto;
@include clearfix();
}
// Table columns
@mixin tableColumns($columnSpan: 1) {
float: none; // undo default grid column styles
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
margin-left: 0; // undo default grid column styles
}
// Make a Grid
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
@mixin makeRow() {
margin-left: $gridGutterWidth * -1;
@include clearfix();
}
@mixin makeColumn($columns: 1) {
float: left;
margin-left: $gridGutterWidth;
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}
// The Grid
@mixin gridCore($gridColumnWidth, $gridGutterWidth) {
[class*="span"] {
float: left;
margin-left: $gridGutterWidth;
}
@for $i from 1 through $gridColumns {
.span#{$i} { @include gridCoreSpan($i, $gridColumnWidth, $gridGutterWidth) }
}
@for $i from 1 through $gridColumns {
.offset#{$i} { @include gridCoreOffset($i, $gridColumnWidth, $gridGutterWidth) }
}
.row {
margin-left: $gridGutterWidth * -1;
@include clearfix();
}
.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
@include gridCoreSpan($gridColumns, $gridColumnWidth, $gridGutterWidth);
}
}
@mixin gridCoreSpan($columns, $gridColumnWidth, $gridGutterWidth) {
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}
@mixin gridCoreOffset($columns, $gridColumnWidth, $gridGutterWidth) {
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
}
@mixin gridFluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
.row-fluid {
width: 100%;
@include clearfix();
> [class*="span"] {
float: left;
margin-left: $fluidGridGutterWidth;
}
> [class*="span"]:first-child {
margin-left: 0;
}
@for $i from 1 through $gridColumns {
> .span#{$i} { @include gridFluidSpan($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
}
}
}
@mixin gridFluidSpan($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
}
@mixin gridInput($gridColumnWidth, $gridGutterWidth) {
@for $i from 1 through $gridColumns {
input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $gridColumnWidth, $gridGutterWidth); }
}
input, textarea, .uneditable-input {
margin-left: 0; // override margin-left from core grid system
}
}
@mixin gridInputSpan($columns, $gridColumWidth, $gridGutterWidth) {
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
}
@mixin makeFluidColumn($columns) {
// This isn't perfect, but it's better than nothing.
float: left;
margin-left: $fluidGridGutterWidth;
@include gridFluidSpan($columns, $fluidGridColumnWidth, $fluidGridGutterWidth);
}

View file

@ -32,7 +32,6 @@
top: 50%;
left: 50%;
z-index: $zindexModal;
max-height: 500px;
overflow: auto;
width: 560px;
margin: -250px 0 0 -280px;
@ -59,10 +58,12 @@
// Body (where all modal content resides)
.modal-body {
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
// Remove bottom margin if need be
.modal-body .modal-form {
.modal-form {
margin-bottom: 0;
}
@ -70,14 +71,20 @@
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right; // right align buttons
background-color: #f5f5f5;
border-top: 1px solid #ddd;
@include border-radius(0 0 6px 6px);
@include box-shadow(inset 0 1px 0 $white);
@include clearfix();
.btn {
float: right;
@include clearfix(); // clear it in case folks use .pull-* classes on buttons
// Properly space out buttons
.btn + .btn {
margin-left: 5px;
margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
}
// but override that for button groups
.btn-group .btn + .btn {
margin-left: -1px;
}
}

View file

@ -6,6 +6,10 @@
// -------------
.navbar {
// Fix for IE7's bad indexing so dropdowns don't appear below content that follows the navbar
*position: relative;
*z-index: 2;
overflow: visible;
margin-bottom: $baseLineHeight;
}
@ -20,6 +24,12 @@
@include box-shadow($shadow);
}
// Set width to auto for default container
// We then reset it for fixed navbars in the #gridSystem mixin
.navbar .container {
width: auto;
}
// Navbar button for toggling navbar items in responsive layouts
.btn-navbar {
display: none;
@ -50,6 +60,7 @@
// Brand, links, text, and buttons
.navbar {
color: $navbarText;
// Hover and active states
.brand:hover {
text-decoration: none;
@ -68,16 +79,11 @@
// Plain text in topbar
.navbar-text {
margin-bottom: 0;
line-height: 40px;
color: $navbarText;
a:hover {
color: $white;
background-color: transparent;
}
line-height: $navbarHeight;
}
// Buttons in navbar
.btn, .btn-group {
margin-top: 5px; // make buttons vertically centered in navbar
@include navbarVerticalAlign(30px); // Vertically center in navbar
}
.btn-group .btn {
margin-top: 0; // then undo the margin here so we don't accidentally double it
@ -88,14 +94,13 @@
.navbar-form {
margin-bottom: 0; // remove default bottom margin
@include clearfix();
input, select, .radio, .checkbox {
@include navbarVerticalAlign(30px); // Vertically center in navbar
}
input, select {
display: inline-block;
margin-top: 5px;
margin-bottom: 0;
}
.radio, .checkbox {
margin-top: 5px;
}
input[type="image"], input[type="checkbox"], input[type="radio"] {
margin-top: 3px;
}
@ -112,35 +117,32 @@
.navbar-search {
position: relative;
float: left;
margin-top: 6px;
@include navbarVerticalAlign(28px); // Vertically center in navbar
margin-bottom: 0;
.search-query {
padding: 4px 9px;
@include font-sans-serif(13px, normal, 1);
color: $white;
color: rgba(255,255,255,.75);
background: #666;
background: rgba(255,255,255,.3);
border: 1px solid #111;
background-color: $navbarSearchBackground;
border: 1px solid $navbarSearchBorder;
$shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15);
@include box-shadow($shadow);
@include transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
@include placeholder($grayLighter);
// Hover states
&:hover {
color: $white;
background-color: $grayLight;
background-color: rgba(255,255,255,.5);
// Placeholder text gets special styles; can't be a grouped selector
&:-moz-placeholder {
color: $navbarSearchPlaceholderColor;
}
&::-webkit-input-placeholder {
color: $navbarSearchPlaceholderColor;
}
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
&:focus, &.focused {
padding: 5px 10px;
color: $grayDark;
text-shadow: 0 1px 0 $white;
background-color: $white;
background-color: $navbarSearchBackgroundFocus;
border: 0;
@include box-shadow(0 0 3px rgba(0,0,0,.15));
outline: 0;
@ -152,19 +154,28 @@
// FIXED NAVBAR
// ------------
.navbar-fixed-top {
// Shared (top/bottom) styles
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindexFixedNavbar;
margin-bottom: 0; // remove 18px margin for static navbars
}
.navbar-fixed-top .navbar-inner {
.navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
@include border-radius(0);
}
.navbar-fixed-top .container, .navbar-fixed-bottom .container {
@include gridCoreSpan($gridColumns, $gridColumnWidth, $gridGutterWidth);
}
// Fixed to top
.navbar-fixed-top { top: 0; }
.navbar-fixed-bottom { bottom: 0; }
// NAVIGATION
// ----------
@ -202,9 +213,9 @@
// Active nav items
.navbar .nav .active > a, .navbar .nav .active > a:hover {
color: $navbarLinkColorHover;
color: $navbarLinkColorActive;
text-decoration: none;
background-color: $navbarBackground;
background-color: $navbarLinkBackgroundActive;
}
// Dividers (basically a vertical hr)
@ -238,7 +249,7 @@
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0,0,0,.2);
border-bottom-color: $dropdownBackground;
position: absolute;
top: -7px;
left: 9px;
@ -255,9 +266,27 @@
}
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .dropdown-menu {
&:before {
border-top: 7px solid #ccc;
border-top-color: $dropdownBorder;
border-bottom: 0;
bottom: -7px;
top: auto;
}
&:after {
border-top: 6px solid $dropdownBackground;
border-bottom: 0;
bottom: -6px;
top: auto;
}
}
// Dropdown toggle caret
.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
border-top-color: $white;
border-bottom-color: $white;
}
.navbar .nav .active .caret {
@include opacity(1);
@ -274,7 +303,8 @@
}
// Right aligned menus need alt position
.navbar .nav.pull-right .dropdown-menu {
// TODO: rejigger this at some point to simplify the selectors
.navbar .nav.pull-right .dropdown-menu, .navbar .nav .dropdown-menu.pull-right {
left: auto;
right: 0;
&:before {

View file

@ -42,8 +42,8 @@
// --------
.nav-list {
padding-left: 14px;
padding-right: 14px;
padding-left: 15px;
padding-right: 15px;
margin-bottom: 0;
}
.nav-list > li > a, .nav-list .nav-header {
@ -54,7 +54,7 @@
.nav-list > li > a {
padding: 3px 15px;
}
.nav-list .active > a, .nav-list .active > a:hover {
.nav-list > .active > a, .nav-list > .active > a:hover {
color: $white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: $linkColor;
@ -62,6 +62,10 @@
.nav-list [class^="icon-"] {
margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
@include nav-divider();
}
@ -97,8 +101,9 @@
// Actual tabs (as links)
.nav-tabs > li > a {
padding-top: 9px;
padding-bottom: 9px;
padding-top: 8px;
padding-bottom: 8px;
line-height: $baseLineHeight;
border: 1px solid transparent;
@include border-radius(4px 4px 0 0);
&:hover {
@ -191,16 +196,19 @@
// Make carets use linkColor to start
.nav-tabs .dropdown-toggle .caret, .nav-pills .dropdown-toggle .caret {
border-top-color: $linkColor;
border-bottom-color: $linkColor;
margin-top: 6px;
}
.nav-tabs .dropdown-toggle:hover .caret, .nav-pills .dropdown-toggle:hover .caret {
border-top-color: $linkColorHover;
border-bottom-color: $linkColorHover;
}
// Active dropdown links
// -------------------------
.nav-tabs .active .dropdown-toggle .caret, .nav-pills .active .dropdown-toggle .caret {
border-top-color: $grayDark;
border-bottom-color: $grayDark;
}
// Active:hover dropdown links
@ -219,6 +227,7 @@
}
.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
border-top-color: $white;
border-bottom-color: $white;
@include opacity(1);
}
@ -241,7 +250,8 @@
@include clearfix();
}
.tab-content {
overflow: hidden; // prevent content from running below tabs
display: table; // prevent content from running below tabs
width: 100%;
}
// Remove border on bottom, left, right

View file

@ -27,4 +27,9 @@
}
.pager .previous a {
float: left;
}
.pager .disabled a, .pager .disabled a:hover {
color: $grayLight;
background-color: #fff;
cursor: default;
}

View file

@ -31,7 +31,7 @@
color: $grayLight;
cursor: default;
}
.pagination .disabled a, .pagination .disabled a:hover {
.pagination .disabled span, .pagination .disabled a, .pagination .disabled a:hover {
color: $grayLight;
background-color: transparent;
cursor: default;

View file

@ -17,6 +17,11 @@
to { background-position: 40px 0; }
}
@-ms-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
// Spec
@keyframes progress-bar-stripes {
from { background-position: 0 0; }
@ -54,7 +59,7 @@
// Striped bars
.progress-striped .bar {
@include gradient-striped(#62c462);
@include gradient-striped(#149bdf);
@include background-size(40px 40px);
}
@ -92,4 +97,13 @@
}
.progress-info.progress-striped .bar {
@include gradient-striped(#5bc0de);
}
// Warning (orange)
.progress-warning .bar {
@include gradient-vertical(lighten($orange, 15%), $orange);
}
.progress-warning.progress-striped .bar {
@include gradient-striped(lighten($orange, 15%));
}

View file

@ -62,10 +62,10 @@ sub {
// -------------------------
img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}
// Forms

View file

@ -3,7 +3,7 @@
// -------------------------------------------------------------------------------------------
// STRUCTURAL LAYOUT
// Body reset
// -----------------
body {
@ -12,11 +12,11 @@ body {
font-size: $baseFontSize;
line-height: $baseLineHeight;
color: $textColor;
background-color: $white;
background-color: $bodyBackground;
}
// LINKS
// Links
// -----
a {

View file

@ -11,7 +11,7 @@
// and background-position. Your resulting HTML will look like
// <i class="icon-inbox"></i>.
// For the white version of the icons, just add the .icon-white class:
// For the white version of the icons, just add the .icon-white class:
// <i class="icon-inbox icon-white"></i>
[class^="icon-"], [class*=" icon-"] {
@ -20,14 +20,14 @@
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: asset-url("glyphicons-halflings.png", image);
background-image: $iconSpritePath;
background-position: 14px 14px;
background-repeat: no-repeat;
@include ie7-restore-right-whitespace();
}
.icon-white {
background-image: asset-url("glyphicons-halflings-white.png", image);
background-image: $iconWhiteSpritePath;
}
.icon-glass { background-position: 0 0; }

View file

@ -11,6 +11,7 @@ table {
max-width: 100%;
border-collapse: collapse;
border-spacing: 0;
background-color: $tableBackground;
}
// BASELINE STYLES
@ -25,7 +26,7 @@ table {
line-height: $baseLineHeight;
text-align: left;
vertical-align: top;
border-top: 1px solid #ddd;
border-top: 1px solid $tableBorder;
}
th {
font-weight: bold;
@ -35,12 +36,13 @@ table {
vertical-align: bottom;
}
// Remove top border from thead by default
thead:first-child tr th, thead:first-child tr td {
colgroup + thead tr:first-child th, colgroup + thead tr:first-child td,
thead:first-child tr:first-child th, thead:first-child tr:first-child td {
border-top: 0;
}
// Account for multiple tbody instances
tbody + tbody {
border-top: 2px solid #ddd;
border-top: 2px solid $tableBorder;
}
}
@ -60,12 +62,13 @@ table {
// ----------------
.table-bordered {
border: 1px solid #ddd;
border: 1px solid $tableBorder;
border-left: 0;
border-collapse: separate; // Done so we can round those corners!
*border-collapse: collapsed; // IE7 can't round corners anyway
@include border-radius(4px);
th + th, td + td, th + td, td + th {
border-left: 1px solid #ddd;
th, td {
border-left: 1px solid $tableBorder;
}
// Prevent a double border
thead:first-child tr:first-child th, tbody:first-child tr:first-child th, tbody:first-child tr:first-child td {
@ -95,7 +98,7 @@ table {
.table-striped {
tbody {
tr:nth-child(odd) td, tr:nth-child(odd) th {
background-color: #f9f9f9;
background-color: $tableBackgroundAccent;
}
}
}
@ -106,19 +109,12 @@ table {
// Placed here since it has to come after the potential zebra striping
.table {
tbody tr:hover td, tbody tr:hover th {
background-color: #f5f5f5;
background-color: $tableBackgroundHover;
}
}
// TABLE CELL SIZING
// -----------------
// Change the columns
@mixin tableColumns($columnSpan: 1) {
float: none;
width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16;
margin-left: 0;
}
table {
@for $i from 1 through $gridColumns {
.span#{$i} { @include tableColumns($i); }

View file

@ -28,8 +28,9 @@ p {
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: bold;
color: $grayDark;
font-family: $headingsFontFamily;
font-weight: $headingsFontWeight;
color: $headingsColor;
text-rendering: optimizelegibility; // Fix the character spacing for headings
small {
font-weight: normal;
@ -121,10 +122,23 @@ dt, dd {
}
dt {
font-weight: bold;
line-height: $baseLineHeight - 1; // fix jank Helvetica Neue font bug
}
dd {
margin-left: $baseLineHeight / 2;
}
// Horizontal layout (like forms)
.dl-horizontal {
dt {
float: left;
clear: left;
width: 120px;
text-align: right;
}
dd {
margin-left: 130px;
}
}
// MISC
// ----
@ -149,13 +163,16 @@ em {
}
// Abbreviations and acronyms
abbr {
font-size: 90%;
text-transform: uppercase;
abbr[title] {
border-bottom: 1px dotted #ddd;
cursor: help;
}
abbr.initialism {
font-size: 90%;
text-transform: uppercase;
}
// Blockquotes
blockquote {
padding: 0 0 0 15px;

View file

@ -7,11 +7,8 @@
// GLOBAL VALUES
// --------------------------------------------------
// Links
$linkColor: #08c !default;
$linkColorHover: darken($linkColor, 15%) !default;
// Grays
// -------------------------
$black: #000 !default;
$grayDarker: #222 !default;
$grayDark: #333 !default;
@ -20,7 +17,9 @@ $grayLight: #999 !default;
$grayLighter: #eee !default;
$white: #fff !default;
// Accent colors
// ----------------------------
$blue: #049cdb !default;
$blueDark: #0064cd !default;
$green: #46a546 !default;
@ -30,47 +29,133 @@ $orange: #f89406 !default;
$pink: #c3325f !default;
$purple: #7a43b6 !default;
// Scaffolding
// -------------------------
$bodyBackground: $white !default;
$textColor: $grayDark !default;
// Links
// -------------------------
$linkColor: #08c !default;
$linkColorHover: darken($linkColor, 15%) !default;
// Typography
// -------------------------
$baseFontSize: 13px !default;
$baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$baseLineHeight: 18px !default;
$textColor: $grayDark !default;
$altFontFamily: Georgia, "Times New Roman", Times, serif !default;
$headingsFontFamily: inherit !default; // empty to use BS default, @baseFontFamily
$headingsFontWeight: bold !default; // instead of browser default, bold
$headingsColor: inherit !default; // empty to use BS default, @textColor
// Tables
// -------------------------
$tableBackground: transparent !default; // overall background-color
$tableBackgroundAccent: #f9f9f9 !default; // for striping
$tableBackgroundHover: #f5f5f5 !default; // for hover
$tableBorder: #ddd !default; // table and cell border
// Buttons
$primaryButtonBackground: $linkColor !default;
// -------------------------
$btnBackground: $white !default;
$btnBackgroundHighlight: darken($white, 10%) !default;
$btnBorder: darken($white, 20%) !default;
$btnPrimaryBackground: $linkColor !default;
$btnPrimaryBackgroundHighlight: adjust-hue($btnPrimaryBackground, 15%) !default;
$btnInfoBackground: #5bc0de !default;
$btnInfoBackgroundHighlight: #2f96b4 !default;
$btnSuccessBackground: #62c462 !default;
$btnSuccessBackgroundHighlight: #51a351 !default;
$btnWarningBackground: lighten($orange, 15%) !default;
$btnWarningBackgroundHighlight: $orange !default;
$btnDangerBackground: #ee5f5b !default;
$btnDangerBackgroundHighlight: #bd362f !default;
$btnInverseBackground: $gray !default;
$btnInverseBackgroundHighlight: $grayDarker !default;
// Forms
// -------------------------
$inputBackground: $white !default;
$inputBorder: #ccc !default;
$inputDisabledBackground: $grayLighter !default;
// Dropdowns
// -------------------------
$dropdownBackground: $white !default;
$dropdownBorder: rgba(0,0,0,.2) !default;
$dropdownLinkColor: $grayDark !default;
$dropdownLinkColorHover: $white !default;
$dropdownLinkBackgroundHover: $linkColor !default;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindexDropdown: 1000;
$zindexPopover: 1010;
$zindexTooltip: 1020;
$zindexFixedNavbar: 1030;
$zindexModalBackdrop: 1040;
$zindexModal: 1050;
$zindexDropdown: 1000;
$zindexPopover: 1010;
$zindexTooltip: 1020;
$zindexFixedNavbar: 1030;
$zindexModalBackdrop: 1040;
$zindexModal: 1050;
// Sprite icons path
// -------------------------
$iconSpritePath: asset-url("glyphicons-halflings.png", image) !default;
$iconWhiteSpritePath: asset-url("glyphicons-halflings-white.png", image) !default;
// Input placeholder text color
// -------------------------
$placeholderText: $grayLight !default;
// HR border color
// Hr border color
// -------------------------
$hrBorder: $grayLighter !default;
// Navbar
// -------------------------
$navbarHeight: 40px !default;
$navbarBackground: $grayDarker !default;
$navbarBackgroundHighlight: $grayDark !default;
$navbarLinkBackgroundHover: transparent !default;
$navbarText: $grayLight !default;
$navbarLinkColor: $grayLight !default;
$navbarLinkColorHover: $white !default;
$navbarLinkColorActive: $navbarLinkColorHover !default;
$navbarLinkBackgroundHover: transparent !default;
$navbarLinkBackgroundActive: $navbarBackground !default;
$navbarSearchBackground: lighten($navbarBackground, 25%) !default;
$navbarSearchBackgroundFocus: $white !default;
$navbarSearchBorder: darken($navbarSearchBackground, 30%) !default;
$navbarSearchPlaceholderColor: #ccc !default;
// Hero unit
// -------------------------
$heroUnitBackground: $grayLighter !default;
$heroUnitHeadingColor: inherit !default;
$heroUnitLeadColor: inherit !default;
// Form states and alerts
// -------------------------
$warningText: #c09853 !default;
$warningBackground: #fcf8e3 !default;
$warningBorder: darken(adjust-hue($warningBackground, -10), 3%) !default;
@ -93,11 +178,14 @@ $infoBorder: darken(adjust-hue($infoBackground, -10), 7%) !default;
// --------------------------------------------------
// Default 940px grid
// -------------------------
$gridColumns: 12 !default;
$gridColumnWidth: 60px !default;
$gridGutterWidth: 20px !default;
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
// Fluid grid
// -------------------------
$fluidGridColumnWidth: 6.382978723% !default;
$fluidGridGutterWidth: 2.127659574% !default;

View file

@ -14,4 +14,14 @@
border-color: #ddd;
border-color: rgba(0,0,0,.15);
}
}
// Sizes
.well-large {
padding:24px;
@include border-radius(6px);
}
.well-small {
padding: 9px;
@include border-radius(3px);
}