framework/bedrock
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix #335 - Update to Bootstrap 2.0.2

Browse Source
This commit is contained in:
Ben Word
2012-04-10 19:54:58 -06:00
parent 1fcbeb79e3
commit d58d9b9b25
41 changed files with 998 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
css/less/accordion.less Normal file → Executable file
View File

18
css/less/alerts.less Normal file → Executable file
View File

@@ -9,11 +9,11 @@
background-color: @warningBackground;
border: 1px solid @warningBorder;
.border-radius(4px);
}
.alert,
.alert-heading {
color: @warningText;
}
.alert-heading {
color: inherit;
}
// Adjust close link position
.alert .close {
@@ -29,32 +29,20 @@
.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 {

36
css/less/badges.less Executable file
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;
.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%); }

3
css/less/bootstrap.less vendored Normal file → Executable file
View File

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

2
css/less/breadcrumbs.less Normal file → Executable file
View File

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

38
css/less/button-groups.less Normal file → Executable file
View File

@@ -95,8 +95,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);
.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 {
@@ -127,22 +141,32 @@
.open.btn-group .caret {
.opacity(100);
}
// 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-warning,
.btn-danger,
.btn-info,
.btn-success,
.btn-inverse {
.caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(75);
}
}
// Small button dropdowns
.btn-small .caret {
margin-top: 4px;
}

30
css/less/buttons.less Normal file → Executable file
View File

@@ -8,6 +8,7 @@
// Core
.btn {
display: inline-block;
.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;
.buttonBackground(@white, darken(@white, 10%));
border: 1px solid #ccc;
border-bottom-color: #bbb;
.buttonBackground(@btnBackground, @btnBackgroundHighlight);
border: 1px solid @btnBorder;
border-bottom-color: darken(@btnBorder, 10%);
.border-radius(4px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
cursor: pointer;
// Give IE7 some love
.reset-filter();
.ie7-restore-left-whitespace();
}
@@ -126,34 +126,34 @@
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-dark.active {
.btn-inverse.active {
color: rgba(255,255,255,.75);
}
// Set the backgrounds
// -------------------------
.btn-primary {
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
}
// Warning appears are orange
.btn-warning {
.buttonBackground(lighten(@orange, 15%), @orange);
.buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
}
// Danger and error appear as red
.btn-danger {
.buttonBackground(#ee5f5b, #bd362f);
.buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
}
// Success appears as green
.btn-success {
.buttonBackground(#62c462, #51a351);
.buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
}
// Info appears as a neutral blue
.btn-info {
.buttonBackground(#5bc0de, #2f96b4);
.buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
}
// Inverse appears as dark gray
.btn-inverse {
.buttonBackground(#454545, #262626);
.buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
}
@@ -172,12 +172,16 @@ 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;
}
}

0
css/less/carousel.less Normal file → Executable file
View File

0
css/less/close.less Normal file → Executable file
View File

4
css/less/code.less Normal file → Executable file
View File

@@ -14,7 +14,7 @@ pre {
// Inline code
code {
padding: 3px 4px;
padding: 2px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
@@ -25,7 +25,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

6
css/less/component-animations.less Normal file → Executable file
View File

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

72
css/less/dropdowns.less Normal file → Executable file
View File

@@ -13,22 +13,22 @@
.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;
.opacity(30);
content: "\2193";
content: "";
}
// Place the caret
.dropdown .caret {
margin-top: 8px;
margin-left: 2px;
@@ -37,7 +37,9 @@
.open.dropdown .caret {
.opacity(100);
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
position: absolute;
top: 100%;
@@ -46,11 +48,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;
@@ -63,27 +64,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;
.nav-divider();
}
// Links within the dropdown menu
@@ -93,21 +82,23 @@
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
@@ -123,7 +114,34 @@
}
}
// 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
.border-radius(4px);

123
css/less/forms.less Normal file → Executable file
View File

@@ -48,7 +48,7 @@ input,
button,
select,
textarea {
#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
@@ -71,7 +71,7 @@ select,
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @gray;
border: 1px solid #ccc;
border: 1px solid @inputBorder;
.border-radius(3px);
}
.uneditable-textarea {
@@ -110,7 +110,7 @@ input[type="file"] {
padding: initial;
line-height: initial;
border: initial;
background-color: @white;
background-color: @inputBackground;
background-color: initial;
.box-shadow(none);
}
@@ -139,7 +139,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
@@ -253,7 +253,7 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS
// ----------------------
#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
#grid > .input (@gridColumnWidth, @gridGutterWidth);
@@ -268,7 +268,7 @@ textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #f5f5f5;
background-color: @inputDisabledBackground;
border-color: #ddd;
cursor: not-allowed;
}
@@ -301,7 +301,7 @@ select:focus:required:invalid {
border-color: #ee5f5b;
&:focus {
border-color: darken(#ee5f5b, 10%);
.box-shadow(0 0 6px lighten(#ee5f5b, 20%));
.box-shadow(0 0 6px lighten(#ee5f5b, 20%));
}
}
@@ -314,14 +314,15 @@ select:focus:required:invalid {
padding: (@baseLineHeight - 1) 20px @baseLineHeight;
margin-top: @baseLineHeight;
margin-bottom: @baseLineHeight;
background-color: #f5f5f5;
background-color: @grayLighter;
border-top: 1px solid #ddd;
.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;
.box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
cursor: not-allowed;
@@ -335,17 +336,19 @@ select:focus:required:invalid {
// HELP TEXT
// ---------
.help-block,
.help-inline {
color: @gray; // lighten the text some for 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;
.ie7-inline-block();
margin-bottom: 9px;
vertical-align: middle;
padding-left: 5px;
}
@@ -359,9 +362,10 @@ select:focus:required:invalid {
.input-prepend,
.input-append {
margin-bottom: 5px;
.clearfix(); // Clear the float to prevent wrapping
input,
select,
.uneditable-input {
*margin-left: 0;
.border-radius(0 3px 3px 0);
&:focus {
position: relative;
@@ -372,20 +376,21 @@ select:focus:required:invalid {
border-left-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 {
.border-radius(3px 0 0 3px);
}
.active {
@@ -394,33 +399,43 @@ select:focus:required:invalid {
}
}
.input-prepend {
.add-on {
*margin-top: 1px; /* IE6-7 */
.add-on,
.btn {
margin-right: -1px;
}
}
.input-append {
input,
select
.uneditable-input {
float: left;
.border-radius(3px 0 0 3px);
}
.uneditable-input {
border-left-color: #eee;
border-right-color: #ccc;
border-right-color: #ccc;
}
.add-on {
margin-right: 0;
.add-on,
.btn {
margin-left: -1px;
.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 {
.border-radius(0);
}
.add-on:first-child,
.btn:first-child {
margin-right: -1px;
.border-radius(3px 0 0 3px);
}
.add-on:last-child,
.btn:last-child {
margin-left: -1px;
.border-radius(0 3px 3px 0);
}
}
@@ -451,7 +466,9 @@ select:focus:required:invalid {
textarea,
select,
.help-inline,
.uneditable-input {
.uneditable-input,
.input-prepend,
.input-append {
display: inline-block;
margin-bottom: 0;
}
@@ -461,28 +478,35 @@ select:focus:required:invalid {
}
}
.form-search label,
.form-inline label,
.form-inline label {
display: inline-block;
}
// Remove margin for input-prepend/-append
.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
display: inline-block;
margin-bottom: 0;
}
// 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;
}
// Inline checkbox/radio labels
// Inline checkbox/radio labels (remove padding on left)
.form-search .radio,
.form-inline .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 {
@@ -514,6 +538,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 {

7
css/less/grid.less Normal file → Executable file
View File

@@ -1,8 +1,5 @@
// GRID SYSTEM
// -----------
// Fixed (940px)
#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
#grid > .core(@gridColumnWidth, @gridGutterWidth);
// Fluid (940px)
#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);

4
css/less/hero-unit.less Normal file → Executable file
View File

@@ -4,17 +4,19 @@
.hero-unit {
padding: 60px;
margin-bottom: 30px;
background-color: #f5f5f5;
background-color: @heroUnitBackground;
.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;
}
}

10
css/less/labels.less Normal file → Executable file
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;
.border-radius(3px);
@@ -30,3 +33,6 @@
.label-info { background-color: @infoText; }
.label-info:hover { background-color: darken(@infoText, 10%); }
.label-inverse { background-color: @grayDark; }
.label-inverse:hover { background-color: darken(@grayDark, 10%); }

0
css/less/layouts.less Normal file → Executable file
View File

354
css/less/mixins.less Normal file → Executable file
View File

@@ -98,6 +98,14 @@
white-space: nowrap;
}
// New image replacement
// -------------------------
// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
.hide-text {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
// FONTS
@@ -135,158 +143,18 @@
}
// GRID SYSTEM
// FORMS
// --------------------------------------------------
// Site container
// -------------------------
.container-fixed() {
width: @gridRowWidth;
margin-left: auto;
margin-right: auto;
.clearfix();
// Block level inputs
.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 */
.box-sizing(border-box);
}
// Le grid system
// -------------------------
#gridSystem {
// Setup the mixins to be used
.columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.offset(@gridColumnWidth, @gridGutterWidth, @columns) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
.gridColumn(@gridGutterWidth) {
float: left;
margin-left: @gridGutterWidth;
}
// Take these values and mixins, and make 'em do their thang
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
// Row surrounds the columns
.row {
margin-left: @gridGutterWidth * -1;
.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"] {
#gridSystem > .gridColumn(@gridGutterWidth);
}
// Default columns
.span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
.span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
.span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
.span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
.span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
.span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
.span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
.span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
.span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
.span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
.span12,
.container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
// Offset column options
.offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
.offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
.offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
.offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
.offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
.offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
.offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
.offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
.offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
.offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
}
}
// Fluid grid system
// -------------------------
#fluidGridSystem {
// Setup the mixins to be used
.columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
}
.gridColumn(@fluidGridGutterWidth) {
float: left;
margin-left: @fluidGridGutterWidth;
}
// Take these values and mixins, and make 'em do their thang
.generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
// Row surrounds the columns
.row-fluid {
width: 100%;
.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"] {
#fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
}
> [class*="span"]:first-child {
margin-left: 0;
}
// Default columns
> .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
> .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
> .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
> .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
> .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
> .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
> .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
> .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
> .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
> .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
> .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
> .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
}
}
}
// Input grid system
// -------------------------
#inputGridSystem {
.inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
}
.generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
input,
textarea,
.uneditable-input {
&.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
&.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
&.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
&.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
&.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
&.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
&.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
&.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
&.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
&.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
&.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
&.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
}
}
}
// Make a Grid
// -------------------------
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
.makeRow() {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
.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
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
@@ -402,6 +270,7 @@
.box-sizing(@boxmodel) {
-webkit-box-sizing: @boxmodel;
-moz-box-sizing: @boxmodel;
-ms-box-sizing: @boxmodel;
box-sizing: @boxmodel;
}
@@ -433,7 +302,7 @@
// Opacity
.opacity(@opacity: 100) {
opacity: @opacity / 100;
filter: e(%("alpha(opacity=%d)", @opacity));
filter: ~"alpha(opacity=@{opacity})";
}
@@ -509,8 +378,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
}
.striped(@color, @angle: -45deg) {
background-color: @color;
@@ -524,12 +393,34 @@
}
// Reset filters for IE
.reset-filter() {
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
// Mixin for generating button backgrounds
// ---------------------------------------
// COMPONENT MIXINS
// --------------------------------------------------
// Horizontal dividers
// -------------------------
// Dividers (basically an hr) within dropdowns and nav lists
.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
// ------------------
.buttonBackground(@startColor, @endColor) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor);
@@ -547,44 +438,177 @@
}
}
// 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.
.navbarVerticalAlign(@elementHeight) {
margin-top: (@navbarHeight - @elementHeight) / 2;
}
// COMPONENT MIXINS
// --------------------------------------------------
// POPOVER ARROWS
// Popover arrows
// -------------------------
// For tipsies and popovers
#popoverArrow {
.top(@arrowWidth: 5px) {
.top(@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;
}
.left(@arrowWidth: 5px) {
.left(@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;
}
.bottom(@arrowWidth: 5px) {
.bottom(@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;
}
.right(@arrowWidth: 5px) {
.right(@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
.container-fixed() {
margin-left: auto;
margin-right: auto;
.clearfix();
}
// Table columns
.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
.makeRow() {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
.makeColumn(@columns: 1) {
float: left;
margin-left: @gridGutterWidth;
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
// The Grid
#grid {
.core (@gridColumnWidth, @gridGutterWidth) {
.spanX (@index) when (@index > 0) {
(~".span@{index}") { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.offsetX (@index) when (@index > 0) {
(~".offset@{index}") { .offset(@index); }
.offsetX(@index - 1);
}
.offsetX (0) {}
.offset (@columns) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
.span (@columns) {
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}
.row {
margin-left: @gridGutterWidth * -1;
.clearfix();
}
[class*="span"] {
float: left;
margin-left: @gridGutterWidth;
}
// Set the container width, and override it for fixed navbars in media queries
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container { .span(@gridColumns); }
// generate .spanX and .offsetX
.spanX (@gridColumns);
.offsetX (@gridColumns);
}
.fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
.spanX (@index) when (@index > 0) {
(~"> .span@{index}") { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.span (@columns) {
width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
}
.row-fluid {
width: 100%;
.clearfix();
> [class*="span"] {
float: left;
margin-left: @fluidGridGutterWidth;
}
> [class*="span"]:first-child {
margin-left: 0;
}
// generate .spanX
.spanX (@gridColumns);
}
}
.input(@gridColumnWidth, @gridGutterWidth) {
.spanX (@index) when (@index > 0) {
(~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); }
.spanX(@index - 1);
}
.spanX (0) {}
.span(@columns) {
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
}
input,
textarea,
.uneditable-input {
margin-left: 0; // override margin-left from core grid system
}
// generate .spanX
.spanX (@gridColumns);
}
}

17
css/less/modals.less Normal file → Executable file
View File

@@ -33,7 +33,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 resises)
.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;
.border-radius(0 0 6px 6px);
.box-shadow(inset 0 1px 0 @white);
.clearfix();
.btn {
float: right;
.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;
}
}

114
css/less/navbar.less Normal file → Executable file
View File

@@ -6,6 +6,10 @@
// -------------
.navbar {
// Fix for IE7's bad z-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 @@
.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,17 +79,12 @@
// 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
.navbarVerticalAlign(30px); // Vertically center in navbar
}
.btn-group .btn {
margin-top: 0; // then undo the margin here so we don't accidentally double it
@@ -90,14 +96,15 @@
margin-bottom: 0; // remove default bottom margin
.clearfix();
input,
select {
display: inline-block;
margin-top: 5px;
margin-bottom: 0;
}
select,
.radio,
.checkbox {
margin-top: 5px;
.navbarVerticalAlign(30px); // Vertically center in navbar
}
input,
select {
display: inline-block;
margin-bottom: 0;
}
input[type="image"],
input[type="checkbox"],
@@ -118,36 +125,33 @@
.navbar-search {
position: relative;
float: left;
margin-top: 6px;
.navbarVerticalAlign(28px); // Vertically center in navbar
margin-bottom: 0;
.search-query {
padding: 4px 9px;
#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);
.box-shadow(@shadow);
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
.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;
.box-shadow(0 0 3px rgba(0,0,0,.15));
outline: 0;
@@ -156,22 +160,42 @@
}
// 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 navbar
}
.navbar-fixed-top .navbar-inner {
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding-left: 0;
padding-right: 0;
.border-radius(0);
}
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}
// Fixed to top
.navbar-fixed-top {
top: 0;
}
// Fixed to bottom
.navbar-fixed-bottom {
bottom: 0;
}
// NAVIGATION
// ----------
@@ -210,9 +234,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)
@@ -246,7 +270,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: @dropdownBorder;
position: absolute;
top: -7px;
left: 9px;
@@ -256,17 +280,33 @@
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid @white;
border-bottom: 6px solid @dropdownBackground;
position: absolute;
top: -6px;
left: 10px;
}
}
// 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 {
.opacity(100);
@@ -285,7 +325,9 @@
}
// 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 {

28
css/less/navs.less Normal file → Executable file
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,
@@ -55,8 +55,8 @@
.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;
@@ -64,6 +64,10 @@
.nav-list [class^="icon-"] {
margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
.nav-divider();
}
@@ -102,8 +106,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;
.border-radius(4px 4px 0 0);
&:hover {
@@ -133,8 +138,8 @@
}
// Active state
.nav-pills .active > a,
.nav-pills .active > a:hover {
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
color: @white;
background-color: @linkColor;
}
@@ -200,11 +205,13 @@
.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
@@ -212,6 +219,7 @@
.nav-tabs .active .dropdown-toggle .caret,
.nav-pills .active .dropdown-toggle .caret {
border-top-color: @grayDark;
border-bottom-color: @grayDark;
}
// Active:hover dropdown links
@@ -234,6 +242,7 @@
.nav .open.active .caret,
.nav .open a:hover .caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(100);
}
@@ -256,7 +265,8 @@
.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

6
css/less/pager.less Normal file → Executable file
View File

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

1
css/less/pagination.less Normal file → Executable file
View File

@@ -32,6 +32,7 @@
color: @grayLight;
cursor: default;
}
.pagination .disabled span,
.pagination .disabled a,
.pagination .disabled a:hover {
color: @grayLight;

0
css/less/popovers.less Normal file → Executable file
View File

16
css/less/progress-bars.less Normal file → Executable file
View File

@@ -17,6 +17,12 @@
to { background-position: 40px 0; }
}
// IE9
@-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 +60,7 @@
// Striped bars
.progress-striped .bar {
#gradient > .striped(#62c462);
#gradient > .striped(#149bdf);
.background-size(40px 40px);
}
@@ -93,3 +99,11 @@
.progress-info.progress-striped .bar {
#gradient > .striped(#5bc0de);
}
// Warning (orange)
.progress-warning .bar {
#gradient > .vertical(lighten(@orange, 15%), @orange);
}
.progress-warning.progress-striped .bar {
#gradient > .striped(lighten(@orange, 15%));
}

2
css/less/reset.less Normal file → Executable file
View File

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

100
css/less/responsive.less Normal file → Executable file
View File

@@ -1,5 +1,5 @@
/*!
* Bootstrap Responsive v2.0.1
* Bootstrap Responsive v2.0.2
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
@@ -31,6 +31,37 @@
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
@@ -49,26 +80,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"] {
@@ -124,12 +135,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 {
@@ -147,6 +168,28 @@
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 {
.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;
}
}
@@ -157,13 +200,13 @@
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
#gridSystem > .generate(12, 42px, 20px);
#grid > .core(42px, 20px);
// Fluid grid
#fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
#grid > .fluid(5.801104972%, 2.762430939%);
// Input grid
#inputGridSystem > .generate(12, 42px, 20px);
#grid > .input(42px, 20px);
}
@@ -297,6 +340,7 @@
@media (min-width: 980px) {
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
@@ -308,13 +352,13 @@
@media (min-width: 1200px) {
// Fixed grid
#gridSystem > .generate(12, 70px, 30px);
#grid > .core(70px, 30px);
// Fluid grid
#fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
#grid > .fluid(5.982905983%, 2.564102564%);
// Input grid
#inputGridSystem > .generate(12, 70px, 30px);
#grid > .input(70px, 30px);
// Thumbnails
.thumbnails {

8
css/less/scaffolding.less Normal file → Executable file
View File

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

6
css/less/sprites.less Normal file → Executable file
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-"],
@@ -21,14 +21,14 @@
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url(@iconSpritePath);
background-image: url("@{iconSpritePath}");
background-position: 14px 14px;
background-repeat: no-repeat;
.ie7-restore-right-whitespace();
}
.icon-white {
background-image: url(@iconWhiteSpritePath);
background-image: url("@{iconWhiteSpritePath}");
}
.icon-glass { background-position: 0 0; }

43
css/less/tables.less Normal file → Executable file
View File

@@ -11,6 +11,7 @@ table {
max-width: 100%;
border-collapse: collapse;
border-spacing: 0;
background-color: @tableBackground;
}
// BASELINE STYLES
@@ -26,7 +27,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;
@@ -36,13 +37,15 @@ 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;
}
}
@@ -63,15 +66,14 @@ 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
.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,
@@ -108,7 +110,7 @@ table {
tbody {
tr:nth-child(odd) td,
tr:nth-child(odd) th {
background-color: #f9f9f9;
background-color: @tableBackgroundAccent;
}
}
}
@@ -120,7 +122,7 @@ table {
.table {
tbody tr:hover td,
tbody tr:hover th {
background-color: #f5f5f5;
background-color: @tableBackgroundHover;
}
}
@@ -129,11 +131,6 @@ table {
// -----------------
// Change the columns
.tableColumns(@columnSpan: 1) {
float: none;
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16;
margin-left: 0;
}
table {
.span1 { .tableColumns(1); }
.span2 { .tableColumns(2); }
@@ -147,4 +144,16 @@ table {
.span10 { .tableColumns(10); }
.span11 { .tableColumns(11); }
.span12 { .tableColumns(12); }
.span13 { .tableColumns(13); }
.span14 { .tableColumns(14); }
.span15 { .tableColumns(15); }
.span16 { .tableColumns(16); }
.span17 { .tableColumns(17); }
.span18 { .tableColumns(18); }
.span19 { .tableColumns(19); }
.span20 { .tableColumns(20); }
.span21 { .tableColumns(21); }
.span22 { .tableColumns(22); }
.span23 { .tableColumns(23); }
.span24 { .tableColumns(24); }
}

0
css/less/thumbnails.less Normal file → Executable file
View File

0
css/less/tooltip.less Normal file → Executable file
View File

28
css/less/type.less Normal file → Executable file
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;
@@ -126,10 +127,23 @@ 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
// ----
@@ -154,12 +168,14 @@ 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 {
@@ -196,7 +212,7 @@ blockquote {
// Quotes
q:before,
q:after,
blockquote:before,
blockquote:before,
blockquote:after {
content: "";
}

0
css/less/utilities.less Normal file → Executable file
View File

106
css/less/variables.less Normal file → Executable file
View File

@@ -7,11 +7,9 @@
// GLOBAL VALUES
// --------------------------------------------------
// Links
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
// Grays
// -------------------------
@black: #000;
@grayDarker: #222;
@grayDark: #333;
@@ -20,7 +18,9 @@
@grayLighter: #eee;
@white: #fff;
// Accent colors
// -------------------------
@blue: #049cdb;
@blueDark: #0064cd;
@green: #46a546;
@@ -30,14 +30,79 @@
@pink: #c3325f;
@purple: #7a43b6;
// Scaffolding
// -------------------------
@bodyBackground: @white;
@textColor: @grayDark;
// Links
// -------------------------
@linkColor: #08c;
@linkColorHover: darken(@linkColor, 15%);
// Typography
// -------------------------
@baseFontSize: 13px;
@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@baseLineHeight: 18px;
@textColor: @grayDark;
@altFontFamily: Georgia, "Times New Roman", Times, serif;
@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
@headingsFontWeight: bold; // instead of browser default, bold
@headingsColor: inherit; // empty to use BS default, @textColor
// Tables
// -------------------------
@tableBackground: transparent; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover: #f5f5f5; // for hover
@tableBorder: #ddd; // table and cell border
// Buttons
@primaryButtonBackground: @linkColor;
// -------------------------
@btnBackground: @white;
@btnBackgroundHighlight: darken(@white, 10%);
@btnBorder: darken(@white, 20%);
@btnPrimaryBackground: @linkColor;
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%);
@btnInfoBackground: #5bc0de;
@btnInfoBackgroundHighlight: #2f96b4;
@btnSuccessBackground: #62c462;
@btnSuccessBackgroundHighlight: #51a351;
@btnWarningBackground: lighten(@orange, 15%);
@btnWarningBackgroundHighlight: @orange;
@btnDangerBackground: #ee5f5b;
@btnDangerBackgroundHighlight: #bd362f;
@btnInverseBackground: @gray;
@btnInverseBackgroundHighlight: @grayDarker;
// Forms
// -------------------------
@inputBackground: @white;
@inputBorder: #ccc;
@inputDisabledBackground: @grayLighter;
// Dropdowns
// -------------------------
@dropdownBackground: @white;
@dropdownBorder: rgba(0,0,0,.2);
@dropdownLinkColor: @grayDark;
@dropdownLinkColorHover: @white;
@dropdownLinkBackgroundHover: @linkColor;
@@ -45,6 +110,7 @@
// --------------------------------------------------
// 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;
@@ -54,27 +120,51 @@
@zindexModalBackdrop: 1040;
@zindexModal: 1050;
// Sprite icons path
// -------------------------
@iconSpritePath: "../img/glyphicons-halflings.png";
@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
// Input placeholder text color
// -------------------------
@placeholderText: @grayLight;
// Hr border color
// -------------------------
@hrBorder: @grayLighter;
// Navbar
// -------------------------
@navbarHeight: 40px;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark;
@navbarLinkBackgroundHover: transparent;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;
@navbarLinkColorHover: @white;
@navbarLinkColorActive: @navbarLinkColorHover;
@navbarLinkBackgroundHover: transparent;
@navbarLinkBackgroundActive: @navbarBackground;
@navbarSearchBackground: lighten(@navbarBackground, 25%);
@navbarSearchBackgroundFocus: @white;
@navbarSearchBorder: darken(@navbarSearchBackground, 30%);
@navbarSearchPlaceholderColor: #ccc;
// Hero unit
// -------------------------
@heroUnitBackground: @grayLighter;
@heroUnitHeadingColor: inherit;
@heroUnitLeadColor: inherit;
// Form states and alerts
// -------------------------
@warningText: #c09853;
@warningBackground: #fcf8e3;
@warningBorder: darken(spin(@warningBackground, -10), 3%);
@@ -93,15 +183,19 @@
// GRID
// --------------------------------------------------
// Default 940px grid
// -------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Fluid grid
// -------------------------
@fluidGridColumnWidth: 6.382978723%;
@fluidGridGutterWidth: 2.127659574%;

10
css/less/wells.less Normal file → Executable file
View File

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