@@ -956,10 +984,26 @@ For example, <code>section</code> should be wrapped as inline.
-
+
+
Example markup
+
Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.
@@ -1049,14 +1093,14 @@ For example, <code>section</code> should be wrapped as inline.
-
+
Redesigned browser states
-
Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.
+
Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.
Form validation
It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.
@@ -1077,7 +1121,7 @@ For example, <code>section</code> should be wrapped as inline.
- Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to hightlight the icon's size.
+ Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to highlight the icon's size.
@@ -1495,7 +1562,7 @@ For example, <code>section</code> should be wrapped as inline.
To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.
+
Fixed navbar
+
To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar.
<div class="navbar navbar-fixed-top">
...
</div>
+
In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
Brand name
A simple link to show your brand or project name only requires an anchor tag.
@@ -827,14 +843,14 @@
<div class="navbar">
<div class="navbar-inner">
<div class="container">
-
+
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
-
+
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
@@ -864,8 +880,18 @@
<li><a href="#">Link</a></li>
</ul>
+
You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.
+
The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.
Typographic components Page header and hero unit for segmenting content
+
+
Hero unit
+
+
+
Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.
A simple shell for an h1 to appropratiely space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.
+
With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.
Single alert message
For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.
@@ -1294,24 +1369,24 @@
Example alerts
Wrap your message and an optional close icon in a div with simple class.
- ×
+ ×Warning! Best check yo self, you're not looking too good.
<div class="alert">
- <a class="close">×</a>
+ <a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.
Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
+
Bootstrap is designed to help people of all skill levels—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.
@@ -642,7 +642,7 @@ $('#myModal').on('hidden', function () {
Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.
+
Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.
@@ -833,7 +836,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
placement
-
string
+
string|function
'right'
how to position the popover - top | bottom | left | right
@@ -923,11 +926,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
Oh snap! You got an error!
Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
@@ -1048,7 +1051,7 @@ $('#my-alert').bind('closed', function () {
Methods
$().button('toggle')
-
Toggles push state. Gives btn the look that it's been activated.
+
Toggles push state. Gives btn the look that it hass been activated.
Heads up!
You can enable auto toggling of a button by using the data-toggle attribute.
@@ -1151,7 +1154,7 @@ $('#my-alert').bind('closed', function () {
parent
selector
false
-
If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior)
+
If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior)
toggle
@@ -1301,10 +1304,12 @@ $('#myCollapsible').on('hidden', function () {
Markup
Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.
Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.
+
Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.
@@ -348,13 +348,13 @@
@warningText
-
#f3edd2
-
+
#c09853
+
@warningBackground
-
#c09853
-
+
#f3edd2
+
@errorText
@@ -604,7 +604,7 @@
.scale()
@ratio
-
Scale an element to n times it's original size
+
Scale an element to n times its original size
.translate()
@@ -614,7 +614,7 @@
.background-clip()
@clip
-
Crop the backgroud of an element (useful for border-radius)
+
Crop the background of an element (useful for border-radius)
.background-size()
@@ -717,8 +717,8 @@
Node with makefile
-
Install the LESS command line compiler with npm by running the following command:
-
$ npm install less
+
Install the LESS command line compiler globally with npm by running the following command:
+
$ npm install -g less
Once installed just run make from the root of your bootstrap directory and you're all set.
Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).
Default grid system 12 columns with a responsive twist
-
Default 940px grid
1
1
@@ -173,7 +174,8 @@
With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.
-
Example
+
Example
+
Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.
Level 1 of column
@@ -187,7 +189,7 @@
-
+
<div class="row">
@@ -202,8 +204,112 @@
+
-
Grid customization
+
+
+
+
+
+
Fluid grid system 12 responsive, percent-based columns
+
+
+
Fluid columns
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
4
+
8
+
+
+
6
+
6
+
+
+
12
+
+
+
+
+
Percents, not pixels
+
The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.
+
+
+
Fluid rows
+
Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.
Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.
Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.
+
Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.
Staying responsive
@@ -265,8 +371,8 @@
Fixed layout
The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.
-
-
+
+
<body>
@@ -279,9 +385,9 @@
Fluid layout
<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.
-
-
-
+
+
+
<div class="container-fluid">
@@ -315,7 +421,7 @@
Supported devices
-
Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:
+
Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:
@@ -338,8 +444,8 @@
Landscape tablets
-
768px to 980px
-
44px
+
768px to 979px
+
42px
20px
@@ -357,6 +463,10 @@
+
Requires meta tag
+
To ensure devices display responsive pages properly, include the viewport meta tag.
Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.
@@ -377,7 +487,7 @@
Use the compiled responsive version, bootstrap-responsive.css
Add @import "responsive.less" and recompile Bootstrap
-
Modify and recompile responsive.less as a separate
+
Modify and recompile responsive.less as a separate file
Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.
{{_i}}Given the above example form layout, here's the markup associated with the first input and control group. The .control-group, .control-label, and .controls classes are all required for styling.{{/i}}
{{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in it's place for :focus.{{/i}}
+
{{_i}}Bootstrap features styles for browser-supported focused and disabled states. We remove the default Webkit outline and apply a box-shadow in its place for :focus.{{/i}}
{{_i}}Form validation{{/i}}
{{_i}}It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.{{/i}}
{{_i}}Indicates a dangerous or potentially negative action{{/i}}
+
+
+
+
.btn-inverse
+
{{_i}}Alternate dark gray button, not tied to a semantic action or use{{/i}}
@@ -1173,50 +1231,63 @@
{{_i}}Buttons for actions{{/i}}
{{_i}}As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.{{/i}}
+
{{_i}}Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.{{/i}}
+
{{_i}}Cross browser compatibility{{/i}}
+
{{_i}}IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.{{/i}}
-
-
{{_i}}For anchors and forms{{/i}}
-
{{_i}}Button styles can be applied to anything with the .btn applied. However, typically you'll want to apply these to only <a> and <button> elements.{{/i}}
-
-
-
{{_i}}Note: All buttons must include the .btn class. Button styles should be applied to <button> and <a> elements for consistency.{{/i}}
-
-
-
-
{{_i}}Multiple sizes{{/i}}
-
{{_i}}Fancy larger or smaller buttons? Have at it!{{/i}}
+
{{_i}}Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.{{/i}}
{{_i}}As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.{{/i}}
- {{_i}}Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to hightlight the icon's size.{{/i}}
+ {{_i}}Heads up! Icon classes are echoed via CSS :after. In the docs, we show a light red background color on hover to highlight the icon's size.{{/i}}
{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <a> or <button> elements.{{/i}}
-
{{_i}}You can also combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex projects.{{/i}}
-
-
+
{{_i}}Best practices{{/i}}
+
{{_i}}We recommend the following guidelines for using button groups and toolbars:{{/i}}
+
+
{{_i}}Always use the same element in a single button group, <a> or <button>.{{/i}}
+
{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}
+
{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}
+
+
{{_i}}Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}
+
+
+
{{_i}}Default example{{/i}}
+
{{_i}}Here's how the HTML looks for a standard button group built with anchor tag buttons:{{/i}}
{{_i}}To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar. In your CSS, you will also need to account for the overlap it causes by adding padding-top: 40px; to your <body>.{{/i}}
+
{{_i}}Fixed navbar{{/i}}
+
{{_i}}To make the navbar fixed to the top of the viewport, add .navbar-fixed-top to the outermost div, .navbar.{{/i}}
<div class="navbar navbar-fixed-top">
...
</div>
+
{{_i}}In your CSS, you will also need to account for the overlap it causes by adding 40px or more of padding to your <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.{{/i}}
{{_i}}Brand name{{/i}}
{{_i}}A simple link to show your brand or project name only requires an anchor tag.{{/i}}
@@ -751,18 +767,18 @@
<div class="navbar">
<div class="navbar-inner">
<div class="container">
-
- <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
+
+ <!-- {{_i}}.btn-navbar is used as the toggle for collapsed navbar content{{/i}} -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
-
- <!-- Be sure to leave the brand out there if you want it shown -->
+
+ <!-- {{_i}}Be sure to leave the brand out there if you want it shown{{/i}} -->
<a class="brand" href="#">{{_i}}Project name{{/i}}</a>
- <!-- Everything you want hidden at 940px or less, place within here -->
+ <!-- {{_i}}Everything you want hidden at 940px or less, place within here{{/i}} -->
<div class="nav-collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
@@ -788,8 +804,18 @@
<li><a href="#">{{_i}}Link{{/i}}</a></li>
</ul>
+
{{_i}}You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:{{/i}}
{{_i}}To align a nav, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.{{/i}}
{{_i}}Adding dropdowns{{/i}}
-
{{_i}}Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.{{/i}}
+
{{_i}}Adding dropdowns to the nav is super simple, but does require the use of our javascript plugin.{{/i}}
{{_i}}The pager component is a set of links for simple pagination implemenations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}
+
{{_i}}The pager component is a set of links for simple pagination implementations with light markup and even lighter styles. It's great for simple sites like blogs or magazines.{{/i}}
{{_i}}Typographic components{{/i}} {{_i}}Page header and hero unit for segmenting content{{/i}}
+
+
{{_i}}Hero unit{{/i}}
+
+
+
{{_i}}Bootstrap provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.{{/i}}
{{_i}}A simple shell for an h1 to appropratiely space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles).{{/i}}
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
{{_i}}With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outter <div>.{{/i}}
+
{{_i}}With Bootstrap 2, we've simplified the base class: .alert instead of .alert-message. We've also reduced the minimum required markup—no <p> is required by default, just the outer <div>.{{/i}}
{{_i}}Single alert message{{/i}}
{{_i}}For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to .alert-block.{{/i}}
@@ -1218,24 +1293,24 @@
{{_i}}Example alerts{{/i}}
{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}
- ×
+ ×{{_i}}Warning!{{/i}} {{_i}}Best check yo self, you're not looking too good.{{/i}}
<div class="alert">
- <a class="close">×</a>
+ <a class="close" data-dismiss="alert">×</a>
<strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
{{_i}}Easily extend the standard alert message with two optional classes: .alert-block for more padding and text controls and .alert-heading for a matching heading.{{/i}}
{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
{{_i}}Bootstrap is designed to help people of all skill level—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}
+
{{_i}}Bootstrap is designed to help people of all skill levels—designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex.{{/i}}
{{_i}}You can activate a tab or pill navigation without writing any javascript by simply specifying data-toggle="tab" or data-toggle="pill" on an element.{{/i}}
@@ -566,7 +566,7 @@ $('#myModal').on('hidden', function () {
{{_i}}Activates a tab element and content container. Tab should have either a `data-target` or an `href` targeting a container node in the dom.{{/i}}
{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, uss css3 for animations, and data-attributes for local title storage.{{/i}}
+
{{_i}}Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.{{/i}}
@@ -757,7 +760,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}placement{{/i}}
-
{{_i}}string{{/i}}
+
{{_i}}string|function{{/i}}
'right'
{{_i}}how to position the popover{{/i}} - top | bottom | left | right
@@ -847,11 +850,11 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
{{_i}}Oh snap! You got an error!{{/i}}
{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}
{{_i}}Enable dismissal of an alert via javascript:{{/i}}
$(".alert").alert()
{{_i}}Markup{{/i}}
@@ -953,17 +956,17 @@ $('#my-alert').bind('closed', function () {
{{_i}}Markup{{/i}}
{{_i}}Data attributes are integral to the button plugin. Check out the example code below for the various markup types.{{/i}}
-<!-- Add data-toggle="button" to activate toggling on a single button -->
+<!-- {{_i}}Add data-toggle="button" to activate toggling on a single button{{/i}} -->
<button class="btn" data-toggle="button">Single Toggle</button>
-<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
+<!-- {{_i}}Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group{{/i}} -->
<div class="btn-group" data-toggle="buttons-checkbox">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
-<!-- Add data-toggle="buttons-radio" for radio style toggling on btn-group -->
+<!-- {{_i}}Add data-toggle="buttons-radio" for radio style toggling on btn-group{{/i}} -->
<div class="btn-group" data-toggle="buttons-radio">
<button class="btn">Left</button>
<button class="btn">Middle</button>
@@ -972,7 +975,7 @@ $('#my-alert').bind('closed', function () {
{{_i}}Methods{{/i}}
$().button('toggle')
-
{{_i}}Toggles push state. Gives btn the look that it's been activated.{{/i}}
+
{{_i}}Toggles push state. Gives btn the look that it hass been activated.{{/i}}
{{_i}}Heads up!{{/i}}
{{_i}}You can enable auto toggling of a button by using the data-toggle attribute.{{/i}}
@@ -1058,7 +1061,7 @@ $('#my-alert').bind('closed', function () {
{{_i}}Using bootstrap-collapse.js{{/i}}
-
Enable via javascript:
+
{{_i}}Enable via javascript:{{/i}}
$(".collapse").collapse()
{{_i}}Options{{/i}}
@@ -1075,7 +1078,7 @@ $('#my-alert').bind('closed', function () {
{{_i}}parent{{/i}}
{{_i}}selector{{/i}}
false
-
{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collasabile item is shown. (similar to traditional accordion behavior){{/i}}
+
{{_i}}If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior){{/i}}
{{_i}}toggle{{/i}}
@@ -1225,12 +1228,14 @@ $('#myCollapsible').on('hidden', function () {
{{_i}}Markup{{/i}}
{{_i}}Data attributes are integral to the carousel plugin. Check out the example code below for the various markup types.{{/i}}
{{_i}}This event is fired when the carousel has completed it's slide transition.{{/i}}
+
{{_i}}This event is fired when the carousel has completed its slide transition.{{/i}}
@@ -1352,7 +1357,7 @@ $('.myCarousel').carousel({
{{_i}}Methods{{/i}}
.typeahead({{_i}}options{{/i}})
-
{{_i}}Initializes an input with a typahead.{{/i}}
+
{{_i}}Initializes an input with a typeahead.{{/i}}
\ No newline at end of file
diff --git a/docs/templates/pages/less.mustache b/docs/templates/pages/less.mustache
index 1bc9715d8a..742b166d27 100644
--- a/docs/templates/pages/less.mustache
+++ b/docs/templates/pages/less.mustache
@@ -47,7 +47,7 @@
{{_i}}Operations{{/i}}
-
{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.{{/i}}
+
{{_i}}Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiply, divide, add, and subtract your way to CSS sanity.{{/i}}
@@ -210,7 +210,7 @@
{{_i}}Components{{/i}}
-
Buttons
+
{{_i}}Buttons{{/i}}
@@ -220,7 +220,7 @@
-
Forms
+
{{_i}}Forms{{/i}}
@@ -230,7 +230,7 @@
-
Navbar
+
{{_i}}Navbar{{/i}}
@@ -272,13 +272,13 @@
@warningText
-
#f3edd2
-
+
#c09853
+
@warningBackground
-
#c09853
-
+
#f3edd2
+
@errorText
@@ -495,7 +495,7 @@
-
CSS3 properties
+
{{_i}}CSS3 properties{{/i}}
@@ -528,7 +528,7 @@
.scale()
@ratio
-
{{_i}}Scale an element to n times it's original size{{/i}}
+
{{_i}}Scale an element to n times its original size{{/i}}
.translate()
@@ -538,7 +538,7 @@
.background-clip()
@clip
-
{{_i}}Crop the backgroud of an element (useful for border-radius){{/i}}
+
{{_i}}Crop the background of an element (useful for border-radius){{/i}}
.background-size()
@@ -567,7 +567,7 @@
-
Backgrounds and gradients
+
{{_i}}Backgrounds and gradients{{/i}}
@@ -641,8 +641,8 @@
{{_i}}Node with makefile{{/i}}
-
{{_i}}Install the LESS command line compiler with npm by running the following command:{{/i}}
-
$ npm install less
+
{{_i}}Install the LESS command line compiler globally with npm by running the following command:{{/i}}
+
$ npm install -g less
{{_i}}Once installed just run make from the root of your bootstrap directory and you're all set.{{/i}}
{{_i}}Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).{{/i}}
{{_i}}Grid system 12 columns with a responsive twist{{/i}}
+
{{_i}}Default grid system 12 columns with a responsive twist{{/i}}
-
Default 940px grid
1
1
@@ -72,7 +73,7 @@
-
Offsetting columns
+
{{_i}}Offsetting columns{{/i}}
4
4 offset 4
@@ -97,7 +98,8 @@
{{_i}}With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new .row and set of .span* columns within an existing .span* column.{{/i}}
-
{{_i}}Example{{/i}}
+
{{_i}}Example{{/i}}
+
{{_i}}Nested rows should include a set of columns that add up to the number of columns of it's parent. For example, two nested .span3 columns should be placed within a .span6.{{/i}}
{{_i}}Level 1 of column{{/i}}
@@ -111,7 +113,7 @@
-
+
<div class="row">
@@ -126,8 +128,112 @@
+
-
{{_i}}Grid customization{{/i}}
+
+
+
+
+
+
{{_i}}Fluid grid system 12 responsive, percent-based columns{{/i}}
+
+
+
{{_i}}Fluid columns{{/i}}
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
4
+
8
+
+
+
6
+
6
+
+
+
12
+
+
+
+
+
{{_i}}Percents, not pixels{{/i}}
+
{{_i}}The fluid grid system uses percents for column widths instead of fixed pixels. It also has the same responsive variations as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.{{/i}}
+
+
+
{{_i}}Fluid rows{{/i}}
+
{{_i}}Make any row fluid simply by changing .row to .row-fluid. The columns stay the exact same, making it super straightforward to flip between fixed and fluid layouts.{{/i}}
{{_i}}Nesting with fluid grids is a bit different: the number of nested columns doesn't need to match the parent. Instead, your columns are reset at each level because each row takes up 100% of the parent column.{{/i}}
{{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}
+
{{_i}}Modifying the grid means changing the three @grid* variables and recompiling Bootstrap. Change the grid variables in variables.less and use one of the four ways documented to recompile. If you're adding more columns, be sure to add the CSS for those in grid.less.{{/i}}
{{_i}}Staying responsive{{/i}}
@@ -189,8 +295,8 @@
{{_i}}Fixed layout{{/i}}
{{_i}}The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container">.{{/i}}
-
-
+
+
<body>
@@ -203,9 +309,9 @@
{{_i}}Fluid layout{{/i}}
{{_i}}<div class="container-fluid"> gives flexible page structure, min- and max-widths, and a left-hand sidebar. It's great for apps and docs.{{/i}}
-
-
-
+
+
+
<div class="container-fluid">
@@ -239,7 +345,7 @@
{{_i}}Supported devices{{/i}}
-
{{_i}}Bootstrap supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}
+
{{_i}}Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:{{/i}}
@@ -262,8 +368,8 @@
{{_i}}Landscape tablets{{/i}}
-
768px to 980px
-
44px
+
768px to 979px
+
42px
20px
@@ -281,6 +387,10 @@
+
{{_i}}Requires meta tag{{/i}}
+
{{_i}}To ensure devices display responsive pages properly, include the viewport meta tag.{{/i}}
{{_i}}Media queries allow for custom CSS based on a number of conditions—ratios, widths, display type, etc—but usually focuses around min-width and max-width.{{/i}}
@@ -301,7 +411,7 @@
{{_i}}Use the compiled responsive version, bootstrap-responsive.css{{/i}}
{{_i}}Add @import "responsive.less" and recompile Bootstrap{{/i}}
-
{{_i}}Modify and recompile responsive.less as a separate{{/i}}
+
{{_i}}Modify and recompile responsive.less as a separate file{{/i}}
{{_i}}Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.{{/i}}
{{_i}}Media queries added for basic support across mobile and tablet devices{{/i}}
{{_i}}Responsive CSS is compiled separately, as bootstrap-responsive.css{{/i}}
-
+
@@ -76,12 +76,14 @@
{{_i}}IE9: removed gradients and added rounded corners{{/i}}
{{_i}}Updated active state to make styling clearer in button groups (new) and look better with custom transition{{/i}}
{{_i}}New mixin, .buttonBackground, to set button gradients{{/i}}
+
{{_i}}The .secondary class was removed from modal examples in our docs as it never had associated styles.{{/i}}
{{_i}}Forms{{/i}}
{{_i}}Default form style is now vertical (stacked) to use less CSS and add greater flexibility{{/i}}
{{_i}}Form classes standardized with .form- required as a prefix{{/i}}
{{_i}}New built-in form defaults for search, inline, and horizontal forms{{/i}}
+
{{_i}}For horizontal forms, previous classes .clearfix and .input are equivalent to the new .control-group and .controls.{{/i}}
{{_i}}More flexible horizontal form markup with classes for all styling, including new optional class for the label{{/i}}
{{_i}}Form states: colors updated and customizable via new LESS variables{{/i}}
@@ -109,7 +111,7 @@
{{_i}}Navigation{{/i}}
-
{{_i}}Tabs and pills now require the use of a new base class, .nav, on their <ul>{{/i}}
+
{{_i}}Tabs and pills now require the use of a new base class, .nav, on their <ul> and the class names are now .nav-pills and .nav-tabs.{{/i}}
{{_i}}New nav list variation added that uses the same base class, .nav{{/i}}
{{_i}}Vertical tabs and pills have been added—just add .nav-stacked to the <ul>{{/i}}
{{_i}}Pills were restyled to be less rounded by default{{/i}}
@@ -128,6 +130,7 @@
{{_i}}Updated the .dropdown-menu to tighten up spacing{{/i}}
{{_i}}Now requires you to add a <span class="caret"></span> to show the dropdown arrow{{/i}}
+
{{_i}}Now requires you to add a data-toggle="dropdown" attribute to obtain toggling behavior{{/i}}
{{_i}}The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.{{/i}}
{{_i}}Labels{{/i}}
@@ -144,7 +147,7 @@
{{_i}}New base class: .alert instead of .alert-message{{/i}}
{{_i}}Class names standardized for other options, now all starting with .alert-{{/i}}
-
{{_i}}Redesigned base alert styles to combine the deafult alerts and block-level alerts into one{{/i}}
+
{{_i}}Redesigned base alert styles to combine the default alerts and block-level alerts into one{{/i}}
{{_i}}Block level alert class changed: .alert-block instead of .block-message{{/i}}
{{_i}}Progress bars{{/i}}
@@ -167,7 +170,7 @@
{{_i}}Javascript plugins{{/i}}
- {{_i}}Heads up!{{/i}} {{_i}}We're rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.{{/i}}
+ {{_i}}Heads up!{{/i}} {{_i}}We've rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.{{/i}}
{{_i}}Tooltips{{/i}}
@@ -179,6 +182,7 @@
{{_i}}Popovers{{/i}}
{{_i}}Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.{{/i}}
+
{{_i}}The placement option value that was below is now bottom, and above is now top.{{/i}}
Media queries added for basic support across mobile and tablet devices
Responsive CSS is compiled separately, as bootstrap-responsive.css
-
+
@@ -152,12 +152,14 @@
IE9: removed gradients and added rounded corners
Updated active state to make styling clearer in button groups (new) and look better with custom transition
New mixin, .buttonBackground, to set button gradients
+
The .secondary class was removed from modal examples in our docs as it never had associated styles.
Forms
Default form style is now vertical (stacked) to use less CSS and add greater flexibility
Form classes standardized with .form- required as a prefix
New built-in form defaults for search, inline, and horizontal forms
+
For horizontal forms, previous classes .clearfix and .input are equivalent to the new .control-group and .controls.
More flexible horizontal form markup with classes for all styling, including new optional class for the label
Form states: colors updated and customizable via new LESS variables
@@ -185,7 +187,7 @@
Navigation
-
Tabs and pills now require the use of a new base class, .nav, on their <ul>
+
Tabs and pills now require the use of a new base class, .nav, on their <ul> and the class names are now .nav-pills and .nav-tabs.
New nav list variation added that uses the same base class, .nav
Vertical tabs and pills have been added—just add .nav-stacked to the <ul>
Pills were restyled to be less rounded by default
@@ -204,6 +206,7 @@
Updated the .dropdown-menu to tighten up spacing
Now requires you to add a <span class="caret"></span> to show the dropdown arrow
+
Now requires you to add a data-toggle="dropdown" attribute to obtain toggling behavior
The navbar (fixed topbar) has brand new dropdowns. Gone are the dark versions and in their place are the standard white ones with an additional caret at their tops for clarity of position.
Labels
@@ -220,7 +223,7 @@
New base class: .alert instead of .alert-message
Class names standardized for other options, now all starting with .alert-
-
Redesigned base alert styles to combine the deafult alerts and block-level alerts into one
+
Redesigned base alert styles to combine the default alerts and block-level alerts into one
Block level alert class changed: .alert-block instead of .block-message
Progress bars
@@ -243,11 +246,19 @@
Javascript plugins
- Heads up! We're rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.
+ Heads up! We've rewritten just about everything for our plugins, so head on over to the Javascript page to learn more.
+
Tooltips
+
+
The plugin method has been renamed from twipsy() to tooltip(), and the class name changed from twipsy to tooltip.
+
The placement option value that was below is now bottom, and above is now top.
+
The animate option was renamed to animation.
+
The html option was removed, as the tooltips default to allowing HTML now.
+
Popovers
Child elements now properly namespaced: .title to .popover-title, .inner to .popover-inner, and .content to .popover-content.
+
The placement option value that was below is now bottom, and above is now top.
New plugins
diff --git a/js/README.md b/js/README.md
index b58fa1d407..3aa09c960f 100644
--- a/js/README.md
+++ b/js/README.md
@@ -37,7 +37,7 @@ All methods should accept an optional options object, a string which targets a p
Options should be sparse and add universal value. We should pick the right defaults.
-All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`.
+All plugins should have a default object which can be modified to affect all instances' default options. The defaults object should be available via `$.fn.plugin.defaults`.
$.fn.modal.defaults = { … }
@@ -64,7 +64,7 @@ All events should have an infinitive and past participle form. The infinitive is
### CONSTRUCTORS
-Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way:
+Each plugin should expose its raw constructor on a `Constructor` property -- accessed in the following way:
$.fn.popover.Constructor
diff --git a/js/bootstrap-alert.js b/js/bootstrap-alert.js
index 4a65b135ab..1d69c5f533 100644
--- a/js/bootstrap-alert.js
+++ b/js/bootstrap-alert.js
@@ -51,11 +51,14 @@
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())
- $parent.removeClass('in')
+ $parent
+ .trigger('close')
+ .removeClass('in')
function removeElement() {
- $parent.remove()
- $parent.trigger('closed')
+ $parent
+ .trigger('closed')
+ .remove()
}
$.support.transition && $parent.hasClass('fade') ?
@@ -88,4 +91,4 @@
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-button.js b/js/bootstrap-button.js
index d85c82947a..89101ed7be 100644
--- a/js/bootstrap-button.js
+++ b/js/bootstrap-button.js
@@ -91,8 +91,8 @@
$(function () {
$('body').on('click.button.data-api', '[data-toggle^=button]', function ( e ) {
- $(e.target).button('toggle')
+ $(e.currentTarget).button('toggle')
})
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-carousel.js b/js/bootstrap-carousel.js
index 2f47edb8dc..bad4f46f46 100644
--- a/js/bootstrap-carousel.js
+++ b/js/bootstrap-carousel.js
@@ -61,6 +61,7 @@
, pause: function () {
clearInterval(this.interval)
+ this.interval = null
return this
}
@@ -82,6 +83,8 @@
, fallback = type == 'next' ? 'first' : 'last'
, that = this
+ if (!$next.length) return
+
this.sliding = true
isCycling && this.pause()
@@ -151,4 +154,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-collapse.js b/js/bootstrap-collapse.js
index 8134cc42ff..53bcd7c40f 100644
--- a/js/bootstrap-collapse.js
+++ b/js/bootstrap-collapse.js
@@ -133,4 +133,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-dropdown.js b/js/bootstrap-dropdown.js
index 48d3ce0f85..ce65aa3b54 100644
--- a/js/bootstrap-dropdown.js
+++ b/js/bootstrap-dropdown.js
@@ -89,4 +89,4 @@
$('body').on('click.dropdown.data-api', toggle, Dropdown.prototype.toggle)
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-modal.js b/js/bootstrap-modal.js
index 180f0b64d9..0a69b6a2f8 100644
--- a/js/bootstrap-modal.js
+++ b/js/bootstrap-modal.js
@@ -177,7 +177,7 @@
return this.each(function () {
var $this = $(this)
, data = $this.data('modal')
- , options = $.extend({}, $.fn.modal.defaults, typeof option == 'object' && option)
+ , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
if (!data) $this.data('modal', (data = new Modal(this, options)))
if (typeof option == 'string') data[option]()
else if (options.show) data.show()
@@ -207,4 +207,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index 35ff9d0ab6..4df81fee94 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -92,4 +92,4 @@
, template: '
'
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-scrollspy.js b/js/bootstrap-scrollspy.js
index e8bd0715c6..f9aba137b9 100644
--- a/js/bootstrap-scrollspy.js
+++ b/js/bootstrap-scrollspy.js
@@ -122,4 +122,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-tab.js b/js/bootstrap-tab.js
index f19db5da1e..78258c6a07 100644
--- a/js/bootstrap-tab.js
+++ b/js/bootstrap-tab.js
@@ -127,4 +127,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-tooltip.js b/js/bootstrap-tooltip.js
index 21f2311fb2..e1c8b2dc27 100644
--- a/js/bootstrap-tooltip.js
+++ b/js/bootstrap-tooltip.js
@@ -267,4 +267,4 @@
, template: '
'
}
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-transition.js b/js/bootstrap-transition.js
index 956350bd0a..0b13eccd4c 100644
--- a/js/bootstrap-transition.js
+++ b/js/bootstrap-transition.js
@@ -47,5 +47,5 @@
})()
})
-
-}( window.jQuery )
+
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js
index 1426185afc..e0be49fecd 100644
--- a/js/bootstrap-typeahead.js
+++ b/js/bootstrap-typeahead.js
@@ -268,4 +268,4 @@
})
})
-}( window.jQuery )
+}( window.jQuery );
\ No newline at end of file
diff --git a/js/tests/unit/bootstrap-button.js b/js/tests/unit/bootstrap-button.js
index 59e8f33bc9..8aed857e11 100644
--- a/js/tests/unit/bootstrap-button.js
+++ b/js/tests/unit/bootstrap-button.js
@@ -3,7 +3,7 @@ $(function () {
module("bootstrap-buttons")
test("should be defined on jquery object", function () {
- ok($(document.body).button, 'tabs method is defined')
+ ok($(document.body).button, 'button method is defined')
})
test("should return element", function () {
diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less
index 19b8081e1b..39060bad2f 100644
--- a/less/breadcrumbs.less
+++ b/less/breadcrumbs.less
@@ -9,7 +9,7 @@
.border-radius(3px);
.box-shadow(inset 0 1px 0 @white);
li {
- display: inline;
+ display: inline-block;
text-shadow: 0 1px 0 @white;
}
.divider {
diff --git a/less/button-groups.less b/less/button-groups.less
index 4b0523df29..a04220a9a6 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -133,7 +133,8 @@
.btn-primary,
.btn-danger,
.btn-info,
-.btn-success {
+.btn-success,
+.btn-inverse {
.caret {
border-top-color: @white;
.opacity(75);
diff --git a/less/buttons.less b/less/buttons.less
index 582350386e..55e9fbf1c1 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -9,12 +9,14 @@
.btn {
display: inline-block;
padding: 4px 10px 4px;
+ margin-bottom: 0; // For input.btn
font-size: @baseFontSize;
line-height: @baseLineHeight;
color: @grayDark;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
- #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
+ vertical-align: middle;
+ .buttonBackground(@white, darken(@white, 10%));
border: 1px solid #ccc;
border-bottom-color: #bbb;
.border-radius(4px);
@@ -23,6 +25,7 @@
cursor: pointer;
// Give IE7 some love
+ .reset-filter();
.ie7-restore-left-whitespace();
}
@@ -51,7 +54,6 @@
.box-shadow(@shadow);
background-color: darken(@white, 10%);
background-color: darken(@white, 15%) e("\9");
- color: rgba(0,0,0,.5);
outline: 0;
}
@@ -76,7 +78,7 @@
line-height: normal;
.border-radius(5px);
}
-.btn-large .icon {
+.btn-large [class^="icon-"] {
margin-top: 1px;
}
@@ -86,10 +88,17 @@
font-size: @baseFontSize - 2px;
line-height: @baseLineHeight - 2px;
}
-.btn-small .icon {
+.btn-small [class^="icon-"] {
margin-top: -1px;
}
+// Mini
+.btn-mini {
+ padding: 2px 6px;
+ font-size: @baseFontSize - 2px;
+ line-height: @baseLineHeight - 4px;
+}
+
// Alternate buttons
// --------------------------------------------------
@@ -105,7 +114,9 @@
.btn-success,
.btn-success:hover,
.btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
color: @white;
}
@@ -114,7 +125,8 @@
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
color: rgba(255,255,255,.75);
}
@@ -139,6 +151,10 @@
.btn-info {
.buttonBackground(#5bc0de, #2f96b4);
}
+// Inverse appears as dark gray
+.btn-inverse {
+ .buttonBackground(#454545, #262626);
+}
// Cross-browser Jank
@@ -146,8 +162,10 @@
button.btn,
input[type="submit"].btn {
+
+ // Firefox 3.6 only I believe
&::-moz-focus-inner {
- padding: 0;
+ padding: 0;
border: 0;
}
diff --git a/less/code.less b/less/code.less
index 0cc3db857a..e2157d8ab1 100644
--- a/less/code.less
+++ b/less/code.less
@@ -11,12 +11,16 @@ pre {
color: @grayDark;
.border-radius(3px);
}
+
+// Inline code
code {
padding: 3px 4px;
color: #d14;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
}
+
+// Blocks of code
pre {
display: block;
padding: (@baseLineHeight - 1) / 2;
@@ -30,6 +34,7 @@ pre {
white-space: pre;
white-space: pre-wrap;
word-break: break-all;
+ word-wrap: break-word;
// Make prettyprint styles more spaced out for readability
&.prettyprint {
@@ -39,6 +44,14 @@ pre {
// Account for some code outputs that place code tags in pre tags
code {
padding: 0;
+ color: inherit;
background-color: transparent;
+ border: 0;
}
}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+ max-height: 340px;
+ overflow-y: scroll;
+}
\ No newline at end of file
diff --git a/less/dropdowns.less b/less/dropdowns.less
index 83f535ae86..1ec06b04ad 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -46,7 +46,6 @@
float: left;
display: none; // none by default, but block on "open" of the menu
min-width: 160px;
- max-width: 220px;
_width: 160px;
padding: 4px 0;
margin: 0; // override default ul
@@ -93,7 +92,7 @@
padding: 3px 15px;
clear: both;
font-weight: normal;
- line-height: 18px;
+ line-height: @baseLineHeight;
color: @gray;
white-space: nowrap;
}
diff --git a/less/forms.less b/less/forms.less
index 9c9a9b8a9f..0a5fa2b867 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -28,6 +28,12 @@ legend {
color: @grayDark;
border: 0;
border-bottom: 1px solid #eee;
+
+ // Small
+ small {
+ font-size: @baseLineHeight * .75;
+ color: @grayLight;
+ }
}
// Set font for forms
@@ -36,7 +42,13 @@ input,
button,
select,
textarea {
- #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
+ #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+ #font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element)
}
// Identify controls by their labels
@@ -84,13 +96,17 @@ input[type="radio"] {
margin: 3px 0;
*margin-top: 0; /* IE7 */
line-height: normal;
- border: 0;
cursor: pointer;
.border-radius(0);
+ border: 0 \9; /* IE9 and down */
+}
+input[type="image"] {
+ border: 0;
}
// Reset the file input to browser defaults
input[type="file"] {
+ width: auto;
padding: initial;
line-height: initial;
border: initial;
@@ -115,6 +131,11 @@ input[type="file"] {
line-height: 28px;
}
+// Reset line-height for IE
+input[type="file"] {
+ line-height: 18px \9;
+}
+
// Chrome on Linux and Mobile Safari need background-color
select {
width: 220px; // default input width + 10px of padding that doesn't get applied
@@ -165,9 +186,11 @@ input[type="hidden"] {
}
// Radios and checkboxes on same line
+// TODO v3: Convert .inline to .control-inline
.radio.inline,
.checkbox.inline {
display: inline-block;
+ padding-top: 5px;
margin-bottom: 0;
vertical-align: middle;
}
@@ -175,11 +198,6 @@ input[type="hidden"] {
.checkbox.inline + .checkbox.inline {
margin-left: 10px; // space out consecutive inline controls
}
-// But don't forget to remove their padding on first-child
-.controls > .radio.inline:first-child,
-.controls > .checkbox.inline:first-child {
- padding-top: 0;
-}
@@ -198,9 +216,10 @@ textarea:focus {
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
.box-shadow(@shadow);
outline: 0;
- outline: thin dotted \9; /* IE6-8 */
+ outline: thin dotted \9; /* IE6-9 */
}
input[type="file"]:focus,
+input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
.box-shadow(none); // override for file inputs
@@ -260,33 +279,6 @@ textarea[readonly] {
// FORM FIELD FEEDBACK STATES
// --------------------------
-// Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
- // Set the text color
- > label,
- .help-block,
- .help-inline {
- color: @textColor;
- }
- // Style inputs accordingly
- input,
- select,
- textarea {
- color: @textColor;
- border-color: @borderColor;
- &:focus {
- border-color: darken(@borderColor, 10%);
- .box-shadow(0 0 6px lighten(@borderColor, 20%));
- }
- }
- // Give a small background color for input-prepend/-append
- .input-prepend .add-on,
- .input-append .add-on {
- color: @textColor;
- background-color: @backgroundColor;
- border-color: @textColor;
- }
-}
// Warning
.control-group.warning {
.formFieldState(@warningText, @warningText, @warningBackground);
@@ -344,6 +336,7 @@ select:focus:required:invalid {
// ---------
.help-block {
+ display: block; // account for any element using help-block
margin-top: 5px;
margin-bottom: 0;
color: @grayLight;
@@ -412,6 +405,7 @@ select:focus:required:invalid {
.border-radius(3px 0 0 3px);
}
.uneditable-input {
+ border-left-color: #eee;
border-right-color: #ccc;
}
.add-on {
@@ -461,6 +455,10 @@ select:focus:required:invalid {
display: inline-block;
margin-bottom: 0;
}
+ // Re-hide hidden elements due to specifity
+ .hide {
+ display: none;
+ }
}
.form-search label,
.form-inline label,
@@ -477,28 +475,37 @@ select:focus:required:invalid {
.form-inline .input-prepend .add-on {
vertical-align: middle;
}
+// Inline checkbox/radio labels
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+ margin-bottom: 0;
+ vertical-align: middle;
+}
// Margin to space out fieldsets
.control-group {
margin-bottom: @baseLineHeight / 2;
}
+// Legend collapses margin, so next element is responsible for spacing
+legend + .control-group {
+ margin-top: @baseLineHeight;
+ -webkit-margin-top-collapse: separate;
+}
+
// Horizontal-specific styles
// --------------------------
.form-horizontal {
- // Legend collapses margin, so we're relegated to padding
- legend + .control-group {
- margin-top: @baseLineHeight;
- -webkit-margin-top-collapse: separate;
- }
// Increase spacing between groups
.control-group {
margin-bottom: @baseLineHeight;
.clearfix();
}
// Float the labels left
- .control-group > label {
+ .control-label {
float: left;
width: 140px;
padding-top: 5px;
diff --git a/less/labels.less b/less/labels.less
index c0f4277502..268435a0b5 100644
--- a/less/labels.less
+++ b/less/labels.less
@@ -1,16 +1,32 @@
// LABELS
// ------
+// Base
.label {
- padding: 1px 3px 2px;
- font-size: @baseFontSize * .75;
+ padding: 2px 4px 3px;
+ font-size: @baseFontSize * .85;
font-weight: bold;
color: @white;
- text-transform: uppercase;
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: @grayLight;
.border-radius(3px);
}
-.label-important { background-color: @errorText; }
-.label-warning { background-color: @orange; }
-.label-success { background-color: @successText; }
-.label-info { background-color: @infoText; }
+
+// Hover state
+.label:hover {
+ color: @white;
+ text-decoration: none;
+}
+
+// Colors
+.label-important { background-color: @errorText; }
+.label-important:hover { background-color: darken(@errorText, 10%); }
+
+.label-warning { background-color: @orange; }
+.label-warning:hover { background-color: darken(@orange, 10%); }
+
+.label-success { background-color: @successText; }
+.label-success:hover { background-color: darken(@successText, 10%); }
+
+.label-info { background-color: @infoText; }
+.label-info:hover { background-color: darken(@infoText, 10%); }
diff --git a/less/mixins.less b/less/mixins.less
index 545ccb9bad..3cf1a37040 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -9,7 +9,7 @@
// Clearfix
// --------
// For clearing floats like a boss h5bp.com/q
-.clearfix() {
+.clearfix {
*zoom: 1;
&:before,
&:after {
@@ -25,7 +25,7 @@
// ------------------
.tab-focus() {
// Default
- outline: thin dotted;
+ outline: thin dotted #333;
// Webkit
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
@@ -89,6 +89,15 @@
}
}
+// Text overflow
+// -------------------------
+// Requires inline-block or block for proper styling
+.text-overflow() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
// FONTS
@@ -199,13 +208,13 @@
// 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) {
+ .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
// Row surrounds the columns
.row-fluid {
width: 100%;
@@ -219,24 +228,22 @@
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); }
+ > .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 {
@@ -263,6 +270,52 @@
}
}
+// 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) {
+ // Set the text color
+ > label,
+ .help-block,
+ .help-inline {
+ color: @textColor;
+ }
+ // Style inputs accordingly
+ input,
+ select,
+ textarea {
+ color: @textColor;
+ border-color: @borderColor;
+ &:focus {
+ border-color: darken(@borderColor, 10%);
+ .box-shadow(0 0 6px lighten(@borderColor, 20%));
+ }
+ }
+ // Give a small background color for input-prepend/-append
+ .input-prepend .add-on,
+ .input-append .add-on {
+ color: @textColor;
+ background-color: @backgroundColor;
+ border-color: @textColor;
+ }
+}
+
// CSS3 PROPERTIES
@@ -313,13 +366,6 @@
-o-transform: translate(@x, @y);
transform: translate(@x, @y);
}
-.skew(@x: 0, @y: 0) {
- -webkit-transform: translate(@x, @y);
- -moz-transform: translate(@x, @y);
- -ms-transform: translate(@x, @y);
- -o-transform: translate(@x, @y);
- transform: translate(@x, @y);
-}
.skew(@x: 0, @y: 0) {
-webkit-transform: skew(@x, @y);
-moz-transform: skew(@x, @y);
@@ -327,6 +373,13 @@
-o-transform: skew(@x, @y);
transform: skew(@x, @y);
}
+.translate3d(@x: 0, @y: 0, @z: 0) {
+ -webkit-transform: translate(@x, @y, @z);
+ -moz-transform: translate(@x, @y, @z);
+ -ms-transform: translate(@x, @y, @z);
+ -o-transform: translate(@x, @y, @z);
+ transform: translate(@x, @y, @z);
+}
// Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
diff --git a/less/modals.less b/less/modals.less
index aa14675ede..d1e06dc261 100644
--- a/less/modals.less
+++ b/less/modals.less
@@ -1,6 +1,7 @@
// MODALS
// ------
+// Recalculate z-index where appropriate
.modal-open {
.dropdown-menu { z-index: @zindexDropdown + @zindexModal; }
.dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
@@ -8,6 +9,7 @@
.tooltip { z-index: @zindexTooltip + @zindexModal; }
}
+// Background
.modal-backdrop {
position: fixed;
top: 0;
@@ -25,6 +27,7 @@
.opacity(80);
}
+// Base modal
.modal {
position: fixed;
top: 50%;
@@ -53,9 +56,17 @@
// Close icon
.close { margin-top: 2px; }
}
+
+// Body (where all modal content resises)
.modal-body {
padding: 15px;
}
+// Remove bottom margin if need be
+.modal-body .modal-form {
+ margin-bottom: 0;
+}
+
+// Footer (for actions)
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
diff --git a/less/navbar.less b/less/navbar.less
index 93c0400b6e..16553c1ff3 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -81,7 +81,7 @@
margin-top: 5px; // make buttons vertically centered in navbar
}
.btn-group .btn {
- margin-top: 0;
+ margin-top: 0; // then undo the margin here so we don't accidentally double it
}
}
@@ -104,6 +104,14 @@
input[type="radio"] {
margin-top: 3px;
}
+ .input-append,
+ .input-prepend {
+ margin-top: 6px;
+ white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left
+ input {
+ margin-top: 0; // remove the margin on top since it's on the parent
+ }
+ }
}
// Navbar search
@@ -133,7 +141,7 @@
background-color: @grayLight;
background-color: rgba(255,255,255,.5);
}
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
+ // Focus states (we use .focused since IE7-8 and down doesn't support :focus)
&:focus,
&.focused {
padding: 5px 10px;
@@ -194,7 +202,7 @@
}
// Hover
.navbar .nav > li > a:hover {
- background-color: transparent;
+ background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
color: @navbarLinkColorHover;
text-decoration: none;
}
@@ -205,7 +213,6 @@
color: @navbarLinkColorHover;
text-decoration: none;
background-color: @navbarBackground;
- background-color: rgba(0,0,0,.5);
}
// Dividers (basically a vertical hr)
diff --git a/less/navs.less b/less/navs.less
index a29cb712bb..06219fa62d 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -21,6 +21,21 @@
background-color: @grayLighter;
}
+// Nav headers (for dropdowns and lists)
+.nav .nav-header {
+ display: block;
+ padding: 3px 15px;
+ font-size: 11px;
+ font-weight: bold;
+ line-height: @baseLineHeight;
+ color: @grayLight;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ text-transform: uppercase;
+}
+// Space them out when they follow another list item (link)
+.nav li + .nav-header {
+ margin-top: 9px;
+}
// NAV LIST
@@ -33,21 +48,12 @@
}
.nav-list > li > a,
.nav-list .nav-header {
- display: block;
- padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
-.nav-list .nav-header {
- font-size: 11px;
- font-weight: bold;
- line-height: @baseLineHeight;
- color: @grayLight;
- text-transform: uppercase;
-}
-.nav-list > li + .nav-header {
- margin-top: 9px;
+.nav-list > li > a {
+ padding: 3px 15px;
}
.nav-list .active > a,
.nav-list .active > a:hover {
@@ -249,6 +255,9 @@
.tabbable {
.clearfix();
}
+.tab-content {
+ overflow: hidden; // prevent content from running below tabs
+}
// Remove border on bottom, left, right
.tabs-below .nav-tabs,
diff --git a/less/reset.less b/less/reset.less
index 28d8eb60ca..1115f59d80 100644
--- a/less/reset.less
+++ b/less/reset.less
@@ -108,7 +108,7 @@ input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer; // Cursors on all buttons applied consistently
- -webkit-appearance: button; // Style clicable inputs in iOS
+ -webkit-appearance: button; // Style clickable inputs in iOS
}
input[type="search"] { // Appearance in Safari/Chrome
-webkit-appearance: textfield;
diff --git a/less/responsive.less b/less/responsive.less
index 7d494a3576..5b85776e93 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -56,7 +56,7 @@
.uneditable-input {
display: block;
width: 100%;
- height: 28px; /* Make inputs at least the height of their button counterpart */
+ 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 */
@@ -123,7 +123,7 @@
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------
-@media (max-width: 768px) {
+@media (max-width: 767px) {
// GRID & CONTAINERS
// -----------------
// Remove width from containers
@@ -154,7 +154,7 @@
// PORTRAIT TABLET TO DEFAULT DESKTOP
// ----------------------------------
-@media (min-width: 768px) and (max-width: 980px) {
+@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
#gridSystem > .generate(12, 42px, 20px);
@@ -171,7 +171,7 @@
// TABLETS AND BELOW
// -----------------
-@media (max-width: 980px) {
+@media (max-width: 979px) {
// UNFIX THE TOPBAR
// ----------------
@@ -215,6 +215,10 @@
.navbar .nav > .divider-vertical {
display: none;
}
+ .navbar .nav .nav-header {
+ color: @navbarText;
+ text-shadow: none;
+ }
// Nav and dropdown links in navbar
.navbar .nav > li > a,
.navbar .dropdown-menu a {
diff --git a/less/sprites.less b/less/sprites.less
index a56216c71c..a7741661ea 100644
--- a/less/sprites.less
+++ b/less/sprites.less
@@ -9,24 +9,26 @@
// All icons receive the styles of the tag with a base class
// of .i and are then given a unique class to add width, height,
// and background-position. Your resulting HTML will look like
-// .
+// .
// For the white version of the icons, just add the .icon-white class:
-//
+//
-[class^="icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
+ line-height: 14px;
vertical-align: text-top;
- background-image: url(../img/glyphicons-halflings.png);
+ background-image: url(@iconSpritePath);
background-position: 14px 14px;
background-repeat: no-repeat;
.ie7-restore-right-whitespace();
}
.icon-white {
- background-image: url(../img/glyphicons-halflings-white.png);
+ background-image: url(@iconWhiteSpritePath);
}
.icon-glass { background-position: 0 0; }
diff --git a/less/tables.less b/less/tables.less
index c069ed5886..3a4066d715 100644
--- a/less/tables.less
+++ b/less/tables.less
@@ -25,14 +25,15 @@ table {
padding: 8px;
line-height: @baseLineHeight;
text-align: left;
+ vertical-align: top;
border-top: 1px solid #ddd;
}
th {
font-weight: bold;
- vertical-align: bottom;
}
- td {
- vertical-align: top;
+ // Bottom align for column headings
+ thead th {
+ vertical-align: bottom;
}
// Remove top border from thead by default
thead:first-child tr th,
@@ -113,6 +114,16 @@ table {
}
+// HOVER EFFECT
+// ------------
+// Placed here since it has to come after the potential zebra striping
+.table {
+ tbody tr:hover td,
+ tbody tr:hover th {
+ background-color: #f5f5f5;
+ }
+}
+
// TABLE CELL SIZING
// -----------------
diff --git a/less/thumbnails.less b/less/thumbnails.less
index 541fbd6a74..3a12d4e509 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -2,13 +2,13 @@
// ----------
.thumbnails {
- margin-left: -20px;
+ margin-left: -@gridGutterWidth;
list-style: none;
.clearfix();
}
.thumbnails > li {
float: left;
- margin: 0 0 @baseLineHeight 20px;
+ margin: 0 0 @baseLineHeight @gridGutterWidth;
}
.thumbnail {
display: block;
diff --git a/less/type.less b/less/type.less
index 7841bb0906..6ba83bc3a3 100644
--- a/less/type.less
+++ b/less/type.less
@@ -110,7 +110,8 @@ ol {
li {
line-height: @baseLineHeight;
}
-ul.unstyled {
+ul.unstyled,
+ol.unstyled {
margin-left: 0;
list-style: none;
}
@@ -137,7 +138,7 @@ dd {
hr {
margin: @baseLineHeight 0;
border: 0;
- border-top: 1px solid #e5e5e5;
+ border-top: 1px solid @hrBorder;
border-bottom: 1px solid @white;
}
diff --git a/less/variables.less b/less/variables.less
index f01c232e4a..3d448ab212 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -47,20 +47,28 @@
// 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: "../img/glyphicons-halflings.png";
+@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png";
// Input placeholder text color
-@placeholderText: @grayLight;
+@placeholderText: @grayLight;
+
+// Hr border color
+@hrBorder: @grayLighter;
// Navbar
@navbarHeight: 40px;
@navbarBackground: @grayDarker;
@navbarBackgroundHighlight: @grayDark;
+@navbarLinkBackgroundHover: transparent;
@navbarText: @grayLight;
@navbarLinkColor: @grayLight;
diff --git a/docs/javascript.html b/docs/javascript.html
index 7960a29e39..612724c798 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -7,17 +7,17 @@
-
-
-
+
+
+
@@ -134,7 +134,7 @@
@@ -289,7 +289,7 @@