Skip to content

B
bootstrap
Commit f0ed383e authored by Roberto - phproberto's avatar Roberto - phproberto
Browse files
Options

Merge branch '2.1.0-wip' of https://github.com/twitter/bootstrap into respclasses

parents 83846ba0 71310577
Expand all Show whitespace changes
Inline Side-by-side
Showing with 8696 additions and 8561 deletions
docs/assets/css/bootstrap-responsive.css
View file @ f0ed383e
...@@ -362,6 +362,9 @@ ...@@ -362,6 +362,9 @@
.uneditable-input { .uneditable-input {
margin-left: 0; margin-left: 0;
} }
.controls-row [class*="span"] + [class*="span"] {
margin-left: 30px;
}
input.span12, input.span12,
textarea.span12, textarea.span12,
.uneditable-input.span12 { .uneditable-input.span12 {
...@@ -704,6 +707,9 @@ ...@@ -704,6 +707,9 @@
.uneditable-input { .uneditable-input {
margin-left: 0; margin-left: 0;
} }
.controls-row [class*="span"] + [class*="span"] {
margin-left: 20px;
}
input.span12, input.span12,
textarea.span12, textarea.span12,
.uneditable-input.span12 { .uneditable-input.span12 {
...@@ -798,6 +804,9 @@ ...@@ -798,6 +804,9 @@
.thumbnails { .thumbnails {
margin-left: 0; margin-left: 0;
} }
.thumbnails > li {
float: none;
}
[class*="span"], [class*="span"],
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
display: block; display: block;
......
docs/assets/css/bootstrap.css
View file @ f0ed383e
This diff is collapsed.
docs/assets/css/docs.css
View file @ f0ed383e
...@@ -598,6 +598,17 @@ form.bs-docs-example { ...@@ -598,6 +598,17 @@ form.bs-docs-example {
line-height: 18px; line-height: 18px;
} }
/* Tooltips */
.bs-docs-tooltip-examples {
text-align: center;
margin: 0 0 10px;
list-style: none;
}
.bs-docs-tooltip-examples li {
display: inline;
padding: 0 10px;
}
/* Popovers */ /* Popovers */
.bs-docs-example-popover { .bs-docs-example-popover {
padding-bottom: 24px; padding-bottom: 24px;
...@@ -607,8 +618,8 @@ form.bs-docs-example { ...@@ -607,8 +618,8 @@ form.bs-docs-example {
position: relative; position: relative;
display: block; display: block;
float: left; float: left;
width: 210px; width: 260px;
margin: 10px; margin: 20px;
} }
......
docs/base-css.html
View file @ f0ed383e
This diff is collapsed.
docs/components.html
View file @ f0ed383e
...@@ -68,43 +68,17 @@ ...@@ -68,43 +68,17 @@
<div class="container"> <div class="container">
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Components</h1> <h1>Components</h1>
<p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p> <p class="lead">Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#dropdowns">Dropdowns</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Buttons <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#buttonGroups">Button groups</a></li>
<li><a href="#buttonDropdowns">Button dropdowns</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Nav <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#navs">Nav, tabs, pills</a></li>
<li><a href="#navbar">Navbar</a></li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
<li><a href="#pagination">Pagination</a></li>
</ul>
</li>
<li><a href="#labels">Labels</a></li>
<li><a href="#badges">Badges</a></li>
<li><a href="#typography">Typography</a></li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#progress">Progress bars</a></li>
<li><a href="#misc">Misc</a></li>
</ul>
</div>
</div>
</header> </header>
<!-- Docs nav
================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
...@@ -128,9 +102,9 @@ ...@@ -128,9 +102,9 @@
<!-- Dropdowns <!-- Dropdowns
================================================== --> ================================================== -->
<section id="dropdowns"> <section id="dropdowns">
<div class="page-header"> <div class="page-header">
<h1>Dropdown menus</h1> <h1>Dropdown menus</h1>
</div> </div>
...@@ -205,14 +179,14 @@ ...@@ -205,14 +179,14 @@
<p>...</p> <p>...</p>
</section> </section>
<!-- Button Groups <!-- Button Groups
================================================== --> ================================================== -->
<section id="buttonGroups"> <section id="buttonGroups">
<div class="page-header"> <div class="page-header">
<h1>Button groups</h1> <h1>Button groups</h1>
</div> </div>
...@@ -290,13 +264,13 @@ ...@@ -290,13 +264,13 @@
<h4>Dropdowns in button groups</h4> <h4>Dropdowns in button groups</h4>
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p> <p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
</section> </section>
<!-- Split button dropdowns <!-- Split button dropdowns
================================================== --> ================================================== -->
<section id="buttonDropdowns"> <section id="buttonDropdowns">
<div class="page-header"> <div class="page-header">
<h1>Button dropdown menus</h1> <h1>Button dropdown menus</h1>
</div> </div>
...@@ -625,13 +599,13 @@ ...@@ -625,13 +599,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Nav, Tabs, & Pills <!-- Nav, Tabs, & Pills
================================================== --> ================================================== -->
<section id="navs"> <section id="navs">
<div class="page-header"> <div class="page-header">
<h1>Nav: tabs, pills, and lists</small></h1> <h1>Nav: tabs, pills, and lists</small></h1>
</div> </div>
...@@ -850,7 +824,7 @@ ...@@ -850,7 +824,7 @@
&lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
...@@ -1005,13 +979,13 @@ ...@@ -1005,13 +979,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<section id="navbar"> <section id="navbar">
<div class="page-header"> <div class="page-header">
<h1>Navbar</h1> <h1>Navbar</h1>
</div> </div>
...@@ -1307,13 +1281,13 @@ ...@@ -1307,13 +1281,13 @@
</div><!-- /navbar --> </div><!-- /navbar -->
</div> </div>
</section> </section>
<!-- Breadcrumbs <!-- Breadcrumbs
================================================== --> ================================================== -->
<section id="breadcrumbs"> <section id="breadcrumbs">
<div class="page-header"> <div class="page-header">
<h1>Breadcrumbs <small></small></h1> <h1>Breadcrumbs <small></small></h1>
</div> </div>
...@@ -1342,13 +1316,13 @@ ...@@ -1342,13 +1316,13 @@
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</section> </section>
<!-- Pagination <!-- Pagination
================================================== --> ================================================== -->
<section id="pagination"> <section id="pagination">
<div class="page-header"> <div class="page-header">
<h1>Pagination <small>Two options for paging through content</small></h1> <h1>Pagination <small>Two options for paging through content</small></h1>
</div> </div>
...@@ -1513,13 +1487,13 @@ ...@@ -1513,13 +1487,13 @@
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</section> </section>
<!-- Labels <!-- Labels
================================================== --> ================================================== -->
<section id="labels"> <section id="labels">
<div class="page-header"> <div class="page-header">
<h1>Inline labels <small>Label and annotate text</small></h1> <h1>Inline labels <small>Label and annotate text</small></h1>
</div> </div>
...@@ -1581,13 +1555,13 @@ ...@@ -1581,13 +1555,13 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </section>
<!-- Badges <!-- Badges
================================================== --> ================================================== -->
<section id="badges"> <section id="badges">
<div class="page-header"> <div class="page-header">
<h1>Badges <small>Indicators and unread counts</small></h1> <h1>Badges <small>Indicators and unread counts</small></h1>
</div> </div>
...@@ -1674,13 +1648,13 @@ ...@@ -1674,13 +1648,13 @@
</tbody> </tbody>
</table> </table>
</section> </section>
<!-- Typographic components <!-- Typographic components
================================================== --> ================================================== -->
<section id="typography"> <section id="typography">
<div class="page-header"> <div class="page-header">
<h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1> <h1>Typographic components <small>Page header and hero unit for segmenting content</small></h1>
</div> </div>
...@@ -1719,13 +1693,13 @@ ...@@ -1719,13 +1693,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Thumbnails <!-- Thumbnails
================================================== --> ================================================== -->
<section id="thumbnails"> <section id="thumbnails">
<div class="page-header"> <div class="page-header">
<h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1> <h1>Thumbnails <small>Grids of images, videos, text, and more</small></h1>
</div> </div>
...@@ -1869,13 +1843,13 @@ ...@@ -1869,13 +1843,13 @@
</li> </li>
</ul> </ul>
</section> </section>
<!-- Alerts <!-- Alerts
================================================== --> ================================================== -->
<section id="alerts"> <section id="alerts">
<div class="page-header"> <div class="page-header">
<h1>Alerts <small>Styles for success, warning, and error messages</small></h1> <h1>Alerts <small>Styles for success, warning, and error messages</small></h1>
</div> </div>
...@@ -1975,13 +1949,13 @@ ...@@ -1975,13 +1949,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Progress bars <!-- Progress bars
================================================== --> ================================================== -->
<section id="progress"> <section id="progress">
<div class="page-header"> <div class="page-header">
<h1>Progress bars <small>For loading, redirecting, or action status</small></h1> <h1>Progress bars <small>For loading, redirecting, or action status</small></h1>
</div> </div>
...@@ -2103,15 +2077,15 @@ ...@@ -2103,15 +2077,15 @@
<p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p> <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p>
<p>Opera and IE do not support animations at this time.</p> <p>Opera and IE do not support animations at this time.</p>
</section> </section>
<!-- Miscellaneous <!-- Miscellaneous
================================================== --> ================================================== -->
<section id="misc"> <section id="misc">
<div class="page-header"> <div class="page-header">
<h1>Miscellaneous <small>Lightweight utility components</small></h1> <h1>Miscellaneous <small>Lightweight utility components</small></h1>
</div> </div>
...@@ -2214,7 +2188,9 @@ class="clearfix" ...@@ -2214,7 +2188,9 @@ class="clearfix"
} }
</pre> </pre>
</section> </section>
</div> </div>
</div> </div>
......
docs/extend.html
View file @ f0ed383e
...@@ -68,26 +68,32 @@ ...@@ -68,26 +68,32 @@
<div class="container"> <div class="container">
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Extending Bootstrap</h1> <h1>Extending Bootstrap</h1>
<p class="lead">Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.</p> <p class="lead">Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.</p>
<div class="navbar navbar-subnav"> </header>
<div class="navbar-inner">
<ul class="nav">
<li><a href="#builtWith">Built with Less</a></li>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">Built with LESS</a></li>
<li><a href="#compiling">Compiling Bootstrap</a></li> <li><a href="#compiling">Compiling Bootstrap</a></li>
<li><a href="#static-assets">Use as static assets</a></li>
</ul> </ul>
</div> </div>
</div> <div class="span9">
</header>
<!-- BUILT WITH LESS <!-- BUILT WITH LESS
================================================== --> ================================================== -->
<section id="builtWith"> <section id="built-with-less">
<div class="page-header"> <div class="page-header">
<h1>Built with LESS</h1> <h1>Built with LESS</h1>
</div> </div>
...@@ -101,22 +107,13 @@ ...@@ -101,22 +107,13 @@
<h3>Learn more</h3> <h3>Learn more</h3>
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS"> <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
<p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p> <p>Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.</p>
</section>
<h3><a href="#variables">Variables</a></h3>
<p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
<h3><a href="#mixins">Mixins</a></h3>
<p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
<h3>Operations</h3>
<p>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.</p>
</section>
<!-- COMPILING LESS AND BOOTSTRAP
<!-- COMPILING LESS AND BOOTSTRAP ================================================== -->
================================================== --> <section id="compiling">
<section id="compiling">
<div class="page-header"> <div class="page-header">
<h1>Compiling Bootstrap with LESS</h1> <h1>Compiling Bootstrap with LESS</h1>
</div> </div>
...@@ -157,7 +154,23 @@ ...@@ -157,7 +154,23 @@
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4> <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
<p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p> <p>Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.</p>
</section> </section>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>Use as static assets</h1>
</div>
<p>...</p>
</section>
</div>
</div>
<!-- Footer <!-- Footer
......
docs/javascript.html
View file @ f0ed383e
This diff is collapsed.
docs/scaffolding.html
View file @ f0ed383e
...@@ -68,26 +68,17 @@ ...@@ -68,26 +68,17 @@
<div class="container"> <div class="container">
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>Scaffolding</h1> <h1>Scaffolding</h1>
<p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p> <p class="lead">Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#global">Global styles</a></li>
<li><a href="#gridSystem">Grid system</a></li>
<li><a href="#fluidGridSystem">Fluid grid system</a></li>
<li><a href="#gridCustomization">Customizing</a></li>
<li><a href="#layouts">Layouts</a></li>
<li><a href="#responsive">Responsive design</a></li>
</ul>
</div>
</div>
</header> </header>
<!-- Docs nav
================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
...@@ -103,9 +94,9 @@ ...@@ -103,9 +94,9 @@
<!-- Global Bootstrap settings <!-- Global Bootstrap settings
================================================== --> ================================================== -->
<section id="global"> <section id="global">
<div class="page-header"> <div class="page-header">
<h1>Global styles <small>for CSS reset, typography, and links</small></h1> <h1>Global styles <small>for CSS reset, typography, and links</small></h1>
</div> </div>
...@@ -132,14 +123,14 @@ ...@@ -132,14 +123,14 @@
<h2>Reset via Normalize</h2> <h2>Reset via Normalize</h2>
<p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p> <p>With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.</p>
</section> </section>
<!-- Grid system <!-- Grid system
================================================== --> ================================================== -->
<section id="gridSystem"> <section id="gridSystem">
<div class="page-header"> <div class="page-header">
<h1>Default grid system <small>12 columns with a responsive twist</small></h1> <h1>Default grid system <small>12 columns with a responsive twist</small></h1>
</div> </div>
...@@ -237,13 +228,13 @@ ...@@ -237,13 +228,13 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Fluid grid system <!-- Fluid grid system
================================================== --> ================================================== -->
<section id="fluidGridSystem"> <section id="fluidGridSystem">
<div class="page-header"> <div class="page-header">
<h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1> <h1>Fluid grid system <small>12 responsive, percent-based columns</small></h1>
</div> </div>
...@@ -341,13 +332,13 @@ ...@@ -341,13 +332,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Customizaton <!-- Customizaton
================================================== --> ================================================== -->
<section id="gridCustomization"> <section id="gridCustomization">
<div class="page-header"> <div class="page-header">
<h1>Grid customization</h1> <h1>Grid customization</h1>
</div> </div>
...@@ -397,13 +388,13 @@ ...@@ -397,13 +388,13 @@
<h2>Staying responsive</h2> <h2>Staying responsive</h2>
<p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.</p> <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.</p>
</section> </section>
<!-- Layouts (Default and fluid) <!-- Layouts (Default and fluid)
================================================== --> ================================================== -->
<section id="layouts"> <section id="layouts">
<div class="page-header"> <div class="page-header">
<h1>Layouts <small>Basic templates to create webpages</small></h1> <h1>Layouts <small>Basic templates to create webpages</small></h1>
</div> </div>
...@@ -439,14 +430,14 @@ ...@@ -439,14 +430,14 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Responsive design <!-- Responsive design
================================================== --> ================================================== -->
<section id="responsive"> <section id="responsive">
<div class="page-header"> <div class="page-header">
<h1>Responsive design <small>Media queries for various devices and resolutions</small></h1> <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
</div> </div>
...@@ -532,9 +523,9 @@ ...@@ -532,9 +523,9 @@
<thead> <thead>
<tr> <tr>
<th>Class</th> <th>Class</th>
<th>Phones <small>480px and below</small></th> <th>Phones <small>767px and below</small></th>
<th>Tablets <small>767px and below</small></th> <th>Tablets <small>979px to 768px</small></th>
<th>Desktops <small>768px and above</small></th> <th>Desktops <small>Default</small></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -597,10 +588,13 @@ ...@@ -597,10 +588,13 @@
<li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li> <li>Desktop<span class="hidden-desktop">&#10004; Desktop</span></li>
</ul> </ul>
</section> </section>
</div>
</div> </div>
</div>
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
......
docs/templates/pages/base-css.mustache
View file @ f0ed383e
This diff is collapsed.
docs/templates/pages/components.mustache
View file @ f0ed383e
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>{{_i}}Components{{/i}}</h1> <h1>{{_i}}Components{{/i}}</h1>
<p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p> <p class="lead">{{_i}}Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.{{/i}}</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#dropdowns">{{_i}}Dropdowns{{/i}}</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Buttons{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#buttonGroups">{{_i}}Button groups{{/i}}</a></li>
<li><a href="#buttonDropdowns">{{_i}}Button dropdowns{{/i}}</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">{{_i}}Nav{{/i}} <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#navs">{{_i}}Nav, tabs, pills{{/i}}</a></li>
<li><a href="#navbar">{{_i}}Navbar{{/i}}</a></li>
<li><a href="#breadcrumbs">{{_i}}Breadcrumbs{{/i}}</a></li>
<li><a href="#pagination">{{_i}}Pagination{{/i}}</a></li>
</ul>
</li>
<li><a href="#labels">{{_i}}Labels{{/i}}</a></li>
<li><a href="#badges">{{_i}}Badges{{/i}}</a></li>
<li><a href="#typography">{{_i}}Typography{{/i}}</a></li>
<li><a href="#thumbnails">{{_i}}Thumbnails{{/i}}</a></li>
<li><a href="#alerts">{{_i}}Alerts{{/i}}</a></li>
<li><a href="#progress">{{_i}}Progress bars{{/i}}</a></li>
<li><a href="#misc">{{_i}}Misc{{/i}}</a></li>
</ul>
</div>
</div>
</header> </header>
<!-- Docs nav
================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
...@@ -58,9 +32,9 @@ ...@@ -58,9 +32,9 @@
<!-- Dropdowns <!-- Dropdowns
================================================== --> ================================================== -->
<section id="dropdowns"> <section id="dropdowns">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Dropdown menus{{/i}}</h1> <h1>{{_i}}Dropdown menus{{/i}}</h1>
</div> </div>
...@@ -135,14 +109,14 @@ ...@@ -135,14 +109,14 @@
<p>{{_i}}...{{/i}}</p> <p>{{_i}}...{{/i}}</p>
</section> </section>
<!-- Button Groups <!-- Button Groups
================================================== --> ================================================== -->
<section id="buttonGroups"> <section id="buttonGroups">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Button groups{{/i}}</h1> <h1>{{_i}}Button groups{{/i}}</h1>
</div> </div>
...@@ -220,13 +194,13 @@ ...@@ -220,13 +194,13 @@
<h4>{{_i}}Dropdowns in button groups{{/i}}</h4> <h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p> <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
</section> </section>
<!-- Split button dropdowns <!-- Split button dropdowns
================================================== --> ================================================== -->
<section id="buttonDropdowns"> <section id="buttonDropdowns">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Button dropdown menus{{/i}}</h1> <h1>{{_i}}Button dropdown menus{{/i}}</h1>
</div> </div>
...@@ -555,13 +529,13 @@ ...@@ -555,13 +529,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Nav, Tabs, & Pills <!-- Nav, Tabs, & Pills
================================================== --> ================================================== -->
<section id="navs"> <section id="navs">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Nav: tabs, pills, and lists{{/i}}</small></h1> <h1>{{_i}}Nav: tabs, pills, and lists{{/i}}</small></h1>
</div> </div>
...@@ -780,7 +754,7 @@ ...@@ -780,7 +754,7 @@
&lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt;
... ...
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
...@@ -935,13 +909,13 @@ ...@@ -935,13 +909,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Navbar <!-- Navbar
================================================== --> ================================================== -->
<section id="navbar"> <section id="navbar">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Navbar{{/i}}</h1> <h1>{{_i}}Navbar{{/i}}</h1>
</div> </div>
...@@ -1237,13 +1211,13 @@ ...@@ -1237,13 +1211,13 @@
</div><!-- /navbar --> </div><!-- /navbar -->
</div>{{! /example }} </div>{{! /example }}
</section> </section>
<!-- Breadcrumbs <!-- Breadcrumbs
================================================== --> ================================================== -->
<section id="breadcrumbs"> <section id="breadcrumbs">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Breadcrumbs{{/i}} <small></small></h1> <h1>{{_i}}Breadcrumbs{{/i}} <small></small></h1>
</div> </div>
...@@ -1272,13 +1246,13 @@ ...@@ -1272,13 +1246,13 @@
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</section> </section>
<!-- Pagination <!-- Pagination
================================================== --> ================================================== -->
<section id="pagination"> <section id="pagination">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Pagination{{/i}} <small>{{_i}}Two options for paging through content{{/i}}</small></h1> <h1>{{_i}}Pagination{{/i}} <small>{{_i}}Two options for paging through content{{/i}}</small></h1>
</div> </div>
...@@ -1443,13 +1417,13 @@ ...@@ -1443,13 +1417,13 @@
&lt;/ul&gt; &lt;/ul&gt;
</pre> </pre>
</section> </section>
<!-- Labels <!-- Labels
================================================== --> ================================================== -->
<section id="labels"> <section id="labels">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1> <h1>{{_i}}Inline labels{{/i}} <small>{{_i}}Label and annotate text{{/i}}</small></h1>
</div> </div>
...@@ -1511,13 +1485,13 @@ ...@@ -1511,13 +1485,13 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </section>
<!-- Badges <!-- Badges
================================================== --> ================================================== -->
<section id="badges"> <section id="badges">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1> <h1>{{_i}}Badges{{/i}} <small>{{_i}}Indicators and unread counts{{/i}}</small></h1>
</div> </div>
...@@ -1604,13 +1578,13 @@ ...@@ -1604,13 +1578,13 @@
</tbody> </tbody>
</table> </table>
</section> </section>
<!-- Typographic components <!-- Typographic components
================================================== --> ================================================== -->
<section id="typography"> <section id="typography">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1> <h1>{{_i}}Typographic components{{/i}} <small>{{_i}}Page header and hero unit for segmenting content{{/i}}</small></h1>
</div> </div>
...@@ -1649,13 +1623,13 @@ ...@@ -1649,13 +1623,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Thumbnails <!-- Thumbnails
================================================== --> ================================================== -->
<section id="thumbnails"> <section id="thumbnails">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1> <h1>{{_i}}Thumbnails{{/i}} <small>{{_i}}Grids of images, videos, text, and more{{/i}}</small></h1>
</div> </div>
...@@ -1799,13 +1773,13 @@ ...@@ -1799,13 +1773,13 @@
</li> </li>
</ul> </ul>
</section> </section>
<!-- Alerts <!-- Alerts
================================================== --> ================================================== -->
<section id="alerts"> <section id="alerts">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Alerts{{/i}} <small>{{_i}}Styles for success, warning, and error messages{{/i}}</small></h1> <h1>{{_i}}Alerts{{/i}} <small>{{_i}}Styles for success, warning, and error messages{{/i}}</small></h1>
</div> </div>
...@@ -1905,13 +1879,13 @@ ...@@ -1905,13 +1879,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Progress bars <!-- Progress bars
================================================== --> ================================================== -->
<section id="progress"> <section id="progress">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1> <h1>{{_i}}Progress bars{{/i}} <small>{{_i}}For loading, redirecting, or action status{{/i}}</small></h1>
</div> </div>
...@@ -2033,15 +2007,15 @@ ...@@ -2033,15 +2007,15 @@
<p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p> <p>{{_i}}Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.{{/i}}</p>
<p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p> <p>{{_i}}Opera and IE do not support animations at this time.{{/i}}</p>
</section> </section>
<!-- Miscellaneous <!-- Miscellaneous
================================================== --> ================================================== -->
<section id="misc"> <section id="misc">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Lightweight utility components{{/i}}</small></h1> <h1>{{_i}}Miscellaneous{{/i}} <small>{{_i}}Lightweight utility components{{/i}}</small></h1>
</div> </div>
...@@ -2144,7 +2118,9 @@ class="clearfix" ...@@ -2144,7 +2118,9 @@ class="clearfix"
} }
</pre> </pre>
</section> </section>
</div>
</div>
</div>{{! /span9 }}
</div>{{! row}}
docs/templates/pages/extend.mustache
View file @ f0ed383e
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>{{_i}}Extending Bootstrap{{/i}}</h1> <h1>{{_i}}Extending Bootstrap{{/i}}</h1>
<p class="lead">{{_i}}Extend Bootstrap with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS.{{/i}}</p> <p class="lead">{{_i}}Extend Bootstrap to take advantage of included styles and components, as well as LESS variables and mixins.{{/i}}</p>
<div class="navbar navbar-subnav"> </header>
<div class="navbar-inner">
<ul class="nav">
<li><a href="#builtWith">{{_i}}Built with Less{{/i}}</a></li>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#built-with-less">{{_i}}Built with LESS{{/i}}</a></li>
<li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li> <li><a href="#compiling">{{_i}}Compiling Bootstrap{{/i}}</a></li>
<li><a href="#static-assets">{{_i}}Use as static assets{{/i}}</a></li>
</ul> </ul>
</div> </div>
</div> <div class="span9">
</header>
<!-- BUILT WITH LESS <!-- BUILT WITH LESS
================================================== --> ================================================== -->
<section id="builtWith"> <section id="built-with-less">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Built with LESS{{/i}}</h1> <h1>{{_i}}Built with LESS{{/i}}</h1>
</div> </div>
...@@ -31,22 +37,13 @@ ...@@ -31,22 +37,13 @@
<h3>{{_i}}Learn more{{/i}}</h3> <h3>{{_i}}Learn more{{/i}}</h3>
<img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS"> <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
<p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p> <p>{{_i}}Visit the official website at <a href="http://lesscss.org">http://lesscss.org</a> to learn more.{{/i}}</p>
</section>
<h3><a href="#variables">{{_i}}Variables{{/i}}</a></h3>
<p>{{_i}}Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.{{/i}}</p>
<h3><a href="#mixins">{{_i}}Mixins{{/i}}</a></h3>
<p>{{_i}}Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.{{/i}}</p>
<h3>{{_i}}Operations{{/i}}</h3>
<p>{{_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}}</p>
</section>
<!-- COMPILING LESS AND BOOTSTRAP
<!-- COMPILING LESS AND BOOTSTRAP ================================================== -->
================================================== --> <section id="compiling">
<section id="compiling">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Compiling Bootstrap with LESS{{/i}}</h1> <h1>{{_i}}Compiling Bootstrap with LESS{{/i}}</h1>
</div> </div>
...@@ -87,4 +84,20 @@ ...@@ -87,4 +84,20 @@
<h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4> <h4><a href="http://wearekiss.com/simpless" target="_blank">Simpless</a></h4>
<p>{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.{{/i}}</p> <p>{{_i}}Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the <a href="https://github.com/Paratron/SimpLESS" target="_blank">source code is on GitHub</a>.{{/i}}</p>
</section> </section>
<!-- Static assets
================================================== -->
<section id="static-assets">
<div class="page-header">
<h1>{{_i}}Use as static assets{{/i}}</h1>
</div>
<p>...</p>
</section>
</div>{{! /span9 }}
</div>{{! row}}
docs/templates/pages/javascript.mustache
View file @ f0ed383e
This diff is collapsed.
docs/templates/pages/scaffolding.mustache
View file @ f0ed383e
<!-- Masthead <!-- Subhead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
<h1>{{_i}}Scaffolding{{/i}}</h1> <h1>{{_i}}Scaffolding{{/i}}</h1>
<p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p> <p class="lead">{{_i}}Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.{{/i}}</p>
<div class="navbar navbar-subnav">
<div class="navbar-inner">
<ul class="nav">
<li><a href="#global">{{_i}}Global styles{{/i}}</a></li>
<li><a href="#gridSystem">{{_i}}Grid system{{/i}}</a></li>
<li><a href="#fluidGridSystem">{{_i}}Fluid grid system{{/i}}</a></li>
<li><a href="#gridCustomization">{{_i}}Customizing{{/i}}</a></li>
<li><a href="#layouts">{{_i}}Layouts{{/i}}</a></li>
<li><a href="#responsive">{{_i}}Responsive design{{/i}}</a></li>
</ul>
</div>
</div>
</header> </header>
<!-- Docs nav
================================================== -->
<div class="row"> <div class="row">
<div class="span3 bs-docs-sidebar"> <div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav"> <ul class="nav nav-list bs-docs-sidenav">
...@@ -33,9 +24,9 @@ ...@@ -33,9 +24,9 @@
<!-- Global Bootstrap settings <!-- Global Bootstrap settings
================================================== --> ================================================== -->
<section id="global"> <section id="global">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1> <h1>{{_i}}Global styles <small>for CSS reset, typography, and links</small>{{/i}}</h1>
</div> </div>
...@@ -62,14 +53,14 @@ ...@@ -62,14 +53,14 @@
<h2>{{_i}}Reset via Normalize{{/i}}</h2> <h2>{{_i}}Reset via Normalize{{/i}}</h2>
<p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p> <p>{{_i}}With Bootstrap 2, the old reset block has been dropped in favor of <a href="http://necolas.github.com/normalize.css/" target="_blank">Normalize.css</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> that also powers the <a href="http://html5boilerplate.com" target="_blank">HTML5 Boilerplate</a>. While we use much of Normalize within our <strong>reset.less</strong>, we have removed some elements specifically for Bootstrap.{{/i}}</p>
</section> </section>
<!-- Grid system <!-- Grid system
================================================== --> ================================================== -->
<section id="gridSystem"> <section id="gridSystem">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1> <h1>{{_i}}Default grid system <small>12 columns with a responsive twist</small>{{/i}}</h1>
</div> </div>
...@@ -167,13 +158,13 @@ ...@@ -167,13 +158,13 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Fluid grid system <!-- Fluid grid system
================================================== --> ================================================== -->
<section id="fluidGridSystem"> <section id="fluidGridSystem">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1> <h1>{{_i}}Fluid grid system <small>12 responsive, percent-based columns</small>{{/i}}</h1>
</div> </div>
...@@ -271,13 +262,13 @@ ...@@ -271,13 +262,13 @@
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Customizaton <!-- Customizaton
================================================== --> ================================================== -->
<section id="gridCustomization"> <section id="gridCustomization">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Grid customization{{/i}}</h1> <h1>{{_i}}Grid customization{{/i}}</h1>
</div> </div>
...@@ -327,13 +318,13 @@ ...@@ -327,13 +318,13 @@
<h2>{{_i}}Staying responsive{{/i}}</h2> <h2>{{_i}}Staying responsive{{/i}}</h2>
<p>{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.{{/i}}</p> <p>{{_i}}Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to manually customize the grids in <strong>responsive.less</strong> until a future update improves this.{{/i}}</p>
</section> </section>
<!-- Layouts (Default and fluid) <!-- Layouts (Default and fluid)
================================================== --> ================================================== -->
<section id="layouts"> <section id="layouts">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Layouts <small>Basic templates to create webpages</small>{{/i}}</h1> <h1>{{_i}}Layouts <small>Basic templates to create webpages</small>{{/i}}</h1>
</div> </div>
...@@ -369,14 +360,14 @@ ...@@ -369,14 +360,14 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>
</section> </section>
<!-- Responsive design <!-- Responsive design
================================================== --> ================================================== -->
<section id="responsive"> <section id="responsive">
<div class="page-header"> <div class="page-header">
<h1>{{_i}}Responsive design <small>Media queries for various devices and resolutions</small>{{/i}}</h1> <h1>{{_i}}Responsive design <small>Media queries for various devices and resolutions</small>{{/i}}</h1>
</div> </div>
...@@ -466,9 +457,9 @@ ...@@ -466,9 +457,9 @@
<thead> <thead>
<tr> <tr>
<th>{{_i}}Class{{/i}}</th> <th>{{_i}}Class{{/i}}</th>
<th>{{_i}}Phones <small>480px and below</small>{{/i}}</th> <th>{{_i}}Phones <small>767px and below</small>{{/i}}</th>
<th>{{_i}}Tablets <small>767px and below</small>{{/i}}</th> <th>{{_i}}Tablets <small>979px to 768px</small>{{/i}}</th>
<th>{{_i}}Desktops <small>768px and above</small>{{/i}}</th> <th>{{_i}}Desktops <small>Default</small>{{/i}}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
...@@ -531,7 +522,9 @@ ...@@ -531,7 +522,9 @@
<li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li> <li>{{_i}}Desktop{{/i}}<span class="hidden-desktop">&#10004; {{_i}}Desktop{{/i}}</span></li>
</ul> </ul>
</section> </section>
</div> </div>{{! /span9 }}
</div> </div>{{! row}}
\ No newline at end of file
less/buttons.less
View file @ f0ed383e
...@@ -15,12 +15,10 @@ ...@@ -15,12 +15,10 @@
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
*line-height: 20px; *line-height: 20px;
color: @grayDark;
text-align: center; text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
.buttonBackground(@btnBackground, @btnBackgroundHighlight); .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
border: 1px solid @btnBorder; border: 1px solid @btnBorder;
*border: 0; // Remove the border to prevent IE7's black border on input:focus *border: 0; // Remove the border to prevent IE7's black border on input:focus
border-bottom-color: darken(@btnBorder, 10%); border-bottom-color: darken(@btnBorder, 10%);
...@@ -105,23 +103,6 @@ ...@@ -105,23 +103,6 @@
// Alternate buttons // Alternate buttons
// -------------------------------------------------- // --------------------------------------------------
// Set text color
// -------------------------
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover,
.btn-inverse,
.btn-inverse:hover {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}
// Provide *some* extra contrast for those who can get it // Provide *some* extra contrast for those who can get it
.btn-primary.active, .btn-primary.active,
.btn-warning.active, .btn-warning.active,
......
less/forms.less
View file @ f0ed383e
...@@ -22,7 +22,7 @@ legend { ...@@ -22,7 +22,7 @@ legend {
display: block; display: block;
width: 100%; width: 100%;
padding: 0; padding: 0;
margin-bottom: @baseLineHeight * 1.5; margin-bottom: @baseLineHeight;
font-size: @baseFontSize * 1.5; font-size: @baseFontSize * 1.5;
line-height: @baseLineHeight * 2; line-height: @baseLineHeight * 2;
color: @grayDark; color: @grayDark;
...@@ -290,8 +290,18 @@ textarea[class*="span"], ...@@ -290,8 +290,18 @@ textarea[class*="span"],
// GRID SIZING FOR INPUTS // GRID SIZING FOR INPUTS
// ---------------------- // ----------------------
// Grid sizes
#grid > .input(@gridColumnWidth, @gridGutterWidth); #grid > .input(@gridColumnWidth, @gridGutterWidth);
// Control row for multiple inputs per line
.controls-row {
.clearfix(); // Clear the float from controls
}
.controls-row [class*="span"] {
float: left; // Float to collapse white-space for proper grid alignment
}
// DISABLED STATE // DISABLED STATE
...@@ -389,8 +399,8 @@ select:focus:required:invalid { ...@@ -389,8 +399,8 @@ select:focus:required:invalid {
// ------------ // ------------
// Allow us to put symbols and text within the input field for a cleaner look // Allow us to put symbols and text within the input field for a cleaner look
.input-prepend, .input-append,
.input-append { .input-prepend {
margin-bottom: 5px; margin-bottom: 5px;
font-size: 0; font-size: 0;
white-space: nowrap; // Prevent span and input from separating white-space: nowrap; // Prevent span and input from separating
...@@ -479,15 +489,34 @@ select:focus:required:invalid { ...@@ -479,15 +489,34 @@ select:focus:required:invalid {
// SEARCH FORM // SEARCH FORM
// ----------- // -----------
input.search-query { .search-query {
padding-right: 14px; padding-right: 14px;
padding-right: 4px \9; padding-right: 4px \9;
padding-left: 14px; padding-left: 14px;
padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
margin-bottom: 0; // remove the default margin on all inputs margin-bottom: 0; // Remove the default margin on all inputs
.border-radius(14px); .border-radius(14px);
} }
/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
.border-radius(0); // Override due to specificity
}
.form-search .input-append .search-query {
.border-radius(14px 0 0 14px)
}
.form-search .input-append .btn {
.border-radius(0 14px 14px 0)
}
.form-search .input-prepend .search-query {
.border-radius(0 14px 14px 0)
}
.form-search .input-prepend .btn {
.border-radius(14px 0 0 14px)
}
// HORIZONTAL & VERTICAL FORMS // HORIZONTAL & VERTICAL FORMS
......
less/mixins.less
View file @ f0ed383e
...@@ -389,7 +389,9 @@ ...@@ -389,7 +389,9 @@
} }
// Gradient Bar Colors for buttons and alerts // Gradient Bar Colors for buttons and alerts
.gradientBar(@primaryColor, @secondaryColor) { .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
color: @textColor;
text-shadow: @textShadow;
#gradient > .vertical(@primaryColor, @secondaryColor); #gradient > .vertical(@primaryColor, @secondaryColor);
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
...@@ -481,14 +483,15 @@ ...@@ -481,14 +483,15 @@
// Button backgrounds // Button backgrounds
// ------------------ // ------------------
.buttonBackground(@startColor, @endColor) { .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
// gradientBar will set the background to a pleasing blend of these, to support IE<=9 // gradientBar will set the background to a pleasing blend of these, to support IE<=9
.gradientBar(@startColor, @endColor); .gradientBar(@startColor, @endColor, @textColor, @textShadow);
*background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
.reset-filter(); .reset-filter();
// in these cases the gradient won't cover the background, so we override // in these cases the gradient won't cover the background, so we override
&:hover, &:active, &.active, &.disabled, &[disabled] { &:hover, &:active, &.active, &.disabled, &[disabled] {
color: @textColor;
background-color: @endColor; background-color: @endColor;
*background-color: darken(@endColor, 5%); *background-color: darken(@endColor, 5%);
} }
...@@ -508,75 +511,7 @@ ...@@ -508,75 +511,7 @@
margin-top: (@navbarHeight - @elementHeight) / 2; margin-top: (@navbarHeight - @elementHeight) / 2;
} }
// Popover arrows
// -------------------------
// For tipsies and popovers
#popoverArrow {
.top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
bottom: -@arrowWidth;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-top: @arrowWidth solid #ccc;
border-top: @arrowWidth solid @color;
&:after {
border-left: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid transparent;
border-top: @arrowWidth - 1 solid #fff;
bottom: 1px;
left: -@arrowWidth + 1;
}
}
.right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: 50%;
left: -@arrowWidth;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-right: @arrowWidth solid #ccc;
border-right: @arrowWidth solid @color;
&:after {
border-top: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid #fff;
bottom: -@arrowWidth + 1;
left: 1px;
}
}
.bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: -@arrowWidth;
left: 50%;
margin-left: -@arrowWidth;
border-left: @arrowWidth solid transparent;
border-right: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid #ccc;
border-bottom: @arrowWidth solid @color;
&:after {
border-left: @arrowWidth - 1 solid transparent;
border-right: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid #f5f5f5;
top: 1px;
left: -@arrowWidth + 1;
}
}
.left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) {
top: 50%;
right: -@arrowWidth;
margin-top: -@arrowWidth;
border-top: @arrowWidth solid transparent;
border-bottom: @arrowWidth solid transparent;
border-left: @arrowWidth solid #ccc;
border-left: @arrowWidth solid @color;
&:after {
border-top: @arrowWidth - 1 solid transparent;
border-bottom: @arrowWidth - 1 solid transparent;
border-left: @arrowWidth - 1 solid #fff;
bottom: -@arrowWidth + 1;
right: 1px;
}
}
}
// Grid System // Grid System
// ----------- // -----------
...@@ -721,6 +656,11 @@ ...@@ -721,6 +656,11 @@
margin-left: 0; // override margin-left from core grid system margin-left: 0; // override margin-left from core grid system
} }
// Space grid-sized controls properly if multiple per line
.controls-row [class*="span"] + [class*="span"] {
margin-left: @gridGutterWidth;
}
// generate .spanX // generate .spanX
.spanX (@gridColumns); .spanX (@gridColumns);
......
less/navbar.less
View file @ f0ed383e
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
// Buttons in navbar // Buttons in navbar
.btn, .btn,
.btn-group { .btn-group {
.navbarVerticalAlign(30px); // Vertically center in navbar .navbarVerticalAlign(28px); // Vertically center in navbar
} }
.btn-group .btn { .btn-group .btn {
margin: 0; // then undo the margin here so we don't accidentally double it margin: 0; // then undo the margin here so we don't accidentally double it
...@@ -87,10 +87,11 @@ ...@@ -87,10 +87,11 @@
select, select,
.radio, .radio,
.checkbox { .checkbox {
.navbarVerticalAlign(30px); // Vertically center in navbar .navbarVerticalAlign(28px); // Vertically center in navbar
} }
input, input,
select { select,
.btn {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }
......
less/popovers.less
View file @ f0ed383e
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
left: 0; left: 0;
z-index: @zindexPopover; z-index: @zindexPopover;
display: none; display: none;
width: 218px; width: 238px;
background-color: #fff; background-color: #fff;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
-moz-background-clip: padding; -moz-background-clip: padding;
...@@ -25,34 +25,16 @@ ...@@ -25,34 +25,16 @@
&.bottom { margin-top: 10px; } &.bottom { margin-top: 10px; }
&.left { margin-right: 10px; } &.left { margin-right: 10px; }
// Call the mixin for the arrows
&.top .arrow { #popoverArrow > .top(); }
&.right .arrow { #popoverArrow > .right(); }
&.bottom .arrow { #popoverArrow > .bottom(); }
&.left .arrow { #popoverArrow > .left(); }
// Common arrow styles
.arrow {
position: absolute;
width: 0;
height: 0;
&:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
content: "";
}
}
} }
.popover-title { .popover-title {
margin: 0; // reset heading margin
padding: 8px 14px; padding: 8px 14px;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 18px; line-height: 18px;
background-color: #f5f5f5; background-color: @popoverTitleBackground;
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid darken(@popoverTitleBackground, 10%);
.border-radius(5px 5px 0 0); .border-radius(5px 5px 0 0);
} }
...@@ -62,3 +44,73 @@ ...@@ -62,3 +44,73 @@
margin-bottom: 0; margin-bottom: 0;
} }
} }
// Arrows
.popover .arrow,
.popover .arrow:after {
position: absolute;
display: inline-block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover .arrow:after {
content: "";
z-index: -1;
}
.popover {
&.top .arrow {
bottom: -@popoverArrowWidth;
left: 50%;
margin-left: -@popoverArrowWidth;
border-width: @popoverArrowWidth @popoverArrowWidth 0;
border-top-color: @popoverArrowColor;
&:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
border-top-color: @popoverArrowOuterColor;
bottom: -1px;
left: -@popoverArrowOuterWidth;
}
}
&.right .arrow {
top: 50%;
left: -@popoverArrowWidth;
margin-top: -@popoverArrowWidth;
border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0;
border-right-color: @popoverArrowColor;
&:after {
border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0;
border-right-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
left: -1px;
}
}
&.bottom .arrow {
top: -@popoverArrowWidth;
left: 50%;
margin-left: -@popoverArrowWidth;
border-width: 0 @popoverArrowWidth @popoverArrowWidth;
border-bottom-color: @popoverTitleBackground;
&:after {
border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
border-bottom-color: @popoverArrowOuterColor;
top: -1px;
left: -@popoverArrowOuterWidth;
}
}
&.left .arrow {
top: 50%;
right: -@popoverArrowWidth;
margin-top: -@popoverArrowWidth;
border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth;
border-left-color: @popoverArrowColor;
&:after {
border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth;
border-left-color: @popoverArrowOuterColor;
bottom: -@popoverArrowOuterWidth;
right: -1px;
}
}
}
less/responsive-767px-max.less
View file @ f0ed383e
...@@ -51,6 +51,9 @@ ...@@ -51,6 +51,9 @@
.thumbnails { .thumbnails {
margin-left: 0; margin-left: 0;
} }
.thumbnails > li {
float: none;
}
// Make all grid-sized elements block level again // Make all grid-sized elements block level again
[class*="span"], [class*="span"],
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
......
less/scaffolding.less
View file @ f0ed383e
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
// Body reset // Body reset
// ---------- // -------------------------
body { body {
margin: 0; margin: 0;
...@@ -17,7 +17,7 @@ body { ...@@ -17,7 +17,7 @@ body {
// Links // Links
// ----- // -------------------------
a { a {
color: @linkColor; color: @linkColor;
......
less/tooltip.less
View file @ f0ed383e
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
// -------------------------------------------------- // --------------------------------------------------
// Base class
.tooltip { .tooltip {
position: absolute; position: absolute;
z-index: @zindexTooltip; z-index: @zindexTooltip;
...@@ -12,26 +13,58 @@ ...@@ -12,26 +13,58 @@
font-size: 11px; font-size: 11px;
.opacity(0); .opacity(0);
&.in { .opacity(80); } &.in { .opacity(80); }
&.top { margin-top: -2px; } &.top { margin-top: -3px; }
&.right { margin-left: 2px; } &.right { margin-left: 3px; }
&.bottom { margin-top: 2px; } &.bottom { margin-top: 3px; }
&.left { margin-left: -2px; } &.left { margin-left: -3px; }
&.top .tooltip-arrow { #popoverArrow > .top(); }
&.left .tooltip-arrow { #popoverArrow > .left(); }
&.bottom .tooltip-arrow { #popoverArrow > .bottom(); }
&.right .tooltip-arrow { #popoverArrow > .right(); }
} }
// Wrapper for the tooltip content
.tooltip-inner { .tooltip-inner {
max-width: 200px; max-width: 200px;
padding: 3px 8px; padding: 3px 8px;
color: @white; color: @tooltipColor;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
background-color: @black; background-color: @tooltipBackground;
.border-radius(4px); .border-radius(4px);
} }
// Arrows
.tooltip-arrow { .tooltip-arrow {
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth @tooltipArrowWidth 0;
border-top-color: @tooltipArrowColor;
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0;
border-right-color: @tooltipArrowColor;
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltipArrowWidth;
border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth;
border-left-color: @tooltipArrowColor;
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltipArrowWidth;
border-width: 0 @tooltipArrowWidth @tooltipArrowWidth;
border-bottom-color: @tooltipArrowColor;
}
} }
less/variables.less
View file @ f0ed383e
...@@ -198,6 +198,22 @@ ...@@ -198,6 +198,22 @@
@infoBorder: darken(spin(@infoBackground, -10), 7%); @infoBorder: darken(spin(@infoBackground, -10), 7%);
// Tooltips and popovers
// -------------------------
@tooltipColor: #fff;
@tooltipBackground: #000;
@tooltipArrowWidth: 5px;
@tooltipArrowColor: @tooltipBackground;
@popoverArrowWidth: 10px;
@popoverArrowColor: #fff;
@popoverTitleBackground: #f5f5f5;
// Special enhancement for popovers
@popoverArrowOuterWidth: @popoverArrowWidth + 1;
@popoverArrowOuterColor: rgba(0,0,0,.2);
// GRID // GRID
// -------------------------------------------------- // --------------------------------------------------
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment