Commit 1f160d4c authored by Mark Otto's avatar Mark Otto

Merge branch '3.0.0-wip' into bs3_makefile_separated_done

Conflicts:
	Makefile
parents f59e4fdb e0647e82
## 2.3.1 (February 28, 2013)
Patch release for @fat's n00bery
- fix missing event type in dropdown
- fix delegated data-attrs for popover/tooltip
- make carousel actually pause when you click cycle
- fix jshint ref in makefile
- fix trying to remove backdrop when no backdrop
## 2.3.0 (February 7, 2013)
Minor release to add carousel indicators, improve tooltips, improve dev setup, and fix hella bugs.
......
......@@ -6,7 +6,6 @@ pygments: true
permalink: pretty
# Server
auto: true
source: ./docs
destination: ./_gh_pages
url: http://bootstrap.dev:9001
......
<!-- Footer
================================================== -->
<footer class="footer">
<footer class="bs-docs-footer">
<div class="container">
<div class="bs-docs-social">
......
......@@ -14,9 +14,11 @@
<!-- Bootstrap core CSS -->
<link href="/assets/css/bootstrap.css" rel="stylesheet">
{% if page.layout == "default" %}
<!-- Documentation extras -->
<link href="/assets/css/docs.css" rel="stylesheet">
<link href="/assets/css/pygments-manni.css" rel="stylesheet">
{% endif %}
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
......
{% raw %}
<header class="bs-docs-jumbotron subhead">
<div class="container">
<h1>{{ page.title }}</h1>
<p class="lead">{{ page.description }}</p>
</div>
</header>
{% endraw %}
\ No newline at end of file
<!-- Navbar
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar navbar-fixed-top bs-docs-navbar">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/">Bootstrap</a>
<a class="navbar-brand" href="/">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li {% if page.title == "Bootstrap" %}class="active"{% endif %}>
......
......@@ -5,7 +5,7 @@
{% include header.html %}
<!-- Place anything custom after this. -->
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<body class="bs-docs-body" data-spy="scroll" data-target=".bs-docs-sidebar">
<!-- Main navbar for all docs pages. -->
{% include navbar.html %}
......@@ -20,4 +20,4 @@
{% include footer.html %}
</body>
</html>
\ No newline at end of file
</html>
This diff is collapsed.
......@@ -9,13 +9,14 @@
-------------------------------------------------- */
body {
padding-top: 54px;
position: relative; /* For scrollyspy */
/* We add the padding to the body for >768px only */
}
/* */
body > .container,
.footer .container {
.bs-docs-body > .container,
.bs-docs-footer .container {
padding-left: 15px;
padding-right: 15px;
}
......@@ -41,6 +42,22 @@ section > ul li {
/* Navbar
-------------------------------------------------- */
.bs-docs-navbar {
background-color: #fff;
border-bottom: 1px solid #ccc; /* IE8 */
border-bottom: 1px solid rgba(0,0,0,.1);
}
.bs-docs-navbar .nav > .active > a,
.bs-docs-navbar .nav > .active > a:hover {
font-weight: 500;
background-color: transparent;
}
/* Jumbotrons
-------------------------------------------------- */
......@@ -106,23 +123,23 @@ section > ul li {
/* Marketing section of Overview
-------------------------------------------------- */
.marketing {
.bs-docs-marketing {
text-align: center;
color: #5a5a5a;
}
.marketing h1 {
.bs-docs-marketing h1 {
margin: 60px 0 10px;
font-size: 50px;
line-height: 1;
}
.marketing h2 {
.bs-docs-marketing h2 {
margin-bottom: 5px;
}
.marketing p {
.bs-docs-marketing p {
font-size: 16px;
line-height: 1.4;
}
.marketing .marketing-byline {
.bs-docs-marketing .marketing-byline {
margin-bottom: 40px;
font-size: 21px;
font-weight: 300;
......@@ -242,6 +259,31 @@ section > ul li {
margin-bottom: 0;
}
/* Typography */
.bs-docs-example-type .table td {
color: #999;
vertical-align: middle;
border-color: ;
}
.bs-docs-example-type .table td,
.bs-docs-example-type .table th {
padding: 15px 0;
border-color: #eee;
}
.bs-docs-example-type .table tr:first-child td,
.bs-docs-example-type .table tr:first-child th {
border-top: 0;
}
.bs-docs-example-type h1,
.bs-docs-example-type h2,
.bs-docs-example-type h3,
.bs-docs-example-type h4,
.bs-docs-example-type h5,
.bs-docs-example-type h6 {
margin: 0;
}
/* Navbar examples */
.bs-navbar-top-example,
.bs-navbar-bottom-example {
......@@ -310,6 +352,11 @@ section > ul li {
margin-left: 20px;
}
/* Example tabbable tabs */
.bs-docs-example-tabs .nav-tabs {
margin-bottom: 15px;
}
/* Example templates
-------------------------------------------------- */
......@@ -436,13 +483,13 @@ section > ul li {
/* Footer
-------------------------------------------------- */
.footer {
.bs-docs-footer {
text-align: center;
padding: 30px 0;
margin-top: 100px;
border-top: 1px solid #e5e5e5;
}
.footer p {
.bs-docs-footer p {
margin-bottom: 0;
color: #777;
}
......@@ -545,6 +592,16 @@ input.focused {
/* Responsive variations
-------------------------------------------------- */
/* Hide code snippets on mobile devices */
@media screen and (max-width: 480px) {
.bs-docs-example {
border-radius: 4px;
}
.highlight {
display: none;
}
}
/* Tablets and up */
@media screen and (min-width: 768px) {
......
......@@ -34,8 +34,8 @@
})
// add tipsies to grid for scaffolding
if ($('#gridSystem').length) {
$('#gridSystem').tooltip({
if ($('#grid-system').length) {
$('#grid-system').tooltip({
selector: '.show-grid > [class*="span"]'
, title: function () { return $(this).width() + 'px' }
})
......
......@@ -75,7 +75,7 @@
if (!e) this.paused = true
if (this.$element.find('.next, .prev').length && $.support.transition.end) {
this.$element.trigger($.support.transition.end)
this.cycle()
this.cycle(true)
}
clearInterval(this.interval)
this.interval = null
......
......@@ -158,7 +158,7 @@
$(document)
.on('click.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
......
......@@ -148,7 +148,7 @@
}
, removeBackdrop: function () {
this.$backdrop.remove()
this.$backdrop && this.$backdrop.remove()
this.$backdrop = null
}
......
......@@ -80,7 +80,15 @@
}
, enter: function (e) {
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
var defaults = $.fn[this.type].defaults
, options = {}
, self
this._options && $.each(this._options, function (key, value) {
if (defaults[key] != value) options[key] = value
}, this)
self = $(e.currentTarget)[this.type](options).data(this.type)
if (!self.options.delay || !self.options.delay.show) return self.show()
......
......@@ -336,7 +336,7 @@
if (!e) this.paused = true
if (this.$element.find('.next, .prev').length && $.support.transition.end) {
this.$element.trigger($.support.transition.end)
this.cycle()
this.cycle(true)
}
clearInterval(this.interval)
this.interval = null
......@@ -791,7 +791,7 @@
$(document)
.on('click.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
......@@ -946,7 +946,7 @@
}
, removeBackdrop: function () {
this.$backdrop.remove()
this.$backdrop && this.$backdrop.remove()
this.$backdrop = null
}
......@@ -1129,7 +1129,15 @@
}
, enter: function (e) {
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
var defaults = $.fn[this.type].defaults
, options = {}
, self
this._options && $.each(this._options, function (key, value) {
if (defaults[key] != value) options[key] = value
}, this)
self = $(e.currentTarget)[this.type](options).data(this.type)
if (!self.options.delay || !self.options.delay.show) return self.show()
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -44,6 +44,7 @@ title: Customize and download
<div class="span3">
<h3>Scaffolding</h3>
<label class="checkbox"><input checked="checked" type="checkbox" value="reset.less"> Normalize and reset</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="print.less"> Print</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="scaffolding.less"> Body type and links</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="grid.less"> Grid system</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="layouts.less"> Layouts</label>
......
---
layout: example
title: Grid template
---
<!-- Custom styles for this template -->
<style>
/* Show grid styles from docs.css
-------------------------------------------------- */
.show-grid {
margin-bottom: 15px;
}
.show-grid [class^="span"] {
padding-top: 10px;
padding-bottom: 10px;
background-color: #eee;
border: 1px solid #ddd;
}
.show-grid [class*="span"]:hover {
background-color: #ddd;
}
</style>
<div class="container">
<div class="page-header">
<h1>Grids</h1>
</div>
<h2>Default grid columns</h2>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row show-grid">
<div class="span12">12</div>
</div>
</div>
</div> <!-- /container -->
......@@ -12,7 +12,7 @@ title: Narrow page template
}
/* Everything but the jumbotron gets side spacing for mobile-first views */
.masthead,
.header,
.marketing,
.footer {
padding-left: 15px;
......@@ -20,17 +20,24 @@ title: Narrow page template
}
/* Custom page header */
.masthead {
.header {
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.masthead h3 {
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
padding-bottom: 19px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
......@@ -43,10 +50,7 @@ title: Narrow page template
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
}
.jumbotron h1 {
font-size: 72px;
line-height: 1;
border-bottom: 1px solid #e5e5e5;
}
.jumbotron .btn {
font-size: 21px;
......@@ -64,23 +68,27 @@ title: Narrow page template
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.masthead,
.header,
.marketing,
.footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */
.masthead {
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
</style>
<div class="container-narrow">
<div class="masthead">
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
......@@ -90,7 +98,7 @@ title: Narrow page template
</div>
<div class="jumbotron">
<h1>Super awesome marketing speak!</h1>
<h1>Jumbotron heading</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a class="btn btn-large btn-success" href="#">Sign up today</a></p>
</div>
......@@ -119,8 +127,6 @@ title: Narrow page template
</div>
</div>
<hr>
<div class="footer">
<p>&copy; Company 2013</p>
</div>
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
---
layout: example
title: Fixed navbar template
---
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 60px;
padding-bottom: 30px;
}
</style>
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Custom styles for this template -->
<style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
body {
padding-top: 60px;
}
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
.jumbotron {
margin-top: 20px;
}
</style>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-fixed-top">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
......@@ -60,9 +45,9 @@
</li>
</ul>
<ul class="nav pull-right">
<li><a href="./navbar.html">Default</a></li>
<li><a href="./navbar-static-top.html">Static top</a></li>
<li class="active"><a href="./navbar-fixed-top.html">Fixed top</a></li>
<li><a href="/examples/navbar/">Default</a></li>
<li><a href="/examples/navbar-static-top/">Static top</a></li>
<li class="active"><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
......@@ -70,33 +55,13 @@
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-large btn-primary" href="../../docs/components.html#navbar">View navbar docs &raquo;</a>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
<script src="../../docs/assets/js/bootstrap-button.js"></script>
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
---
layout: example
title: Static navbar template
---
<!-- Custom styles for this template -->
<style>
.jumbotron {
margin-top: 30px;
}
</style>
<!-- Static navbar -->
<div class="navbar navbar-static-top">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li><a href="/examples/navbar/">Default</a></li>
<li class="active"><a href="/examples/navbar-static-top/">Static top</a></li>
<li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p>
</div>
</div> <!-- /container -->
---
layout: example
title: Navbar template
---
<!-- Custom styles for this template -->
<style>
body {
padding: 30px;
}
.navbar {
margin-bottom: 30px;
}
</style>
<div class="container">
<!-- Static navbar -->
<div class="navbar">
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li class="active"><a href="/examples/navbar/">Default</a></li>
<li><a href="/examples/navbar-static-top/">Static top</a></li>
<li><a href="/examples/navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-large btn-primary" href="../../components/#navbar">View navbar docs &raquo;</a>
</p>
</div>
</div> <!-- /container -->
......@@ -69,7 +69,7 @@ title: Gallery
</div>
<div class="span4">
<a class="thumbnail" href="http://www.gathercontent.com/" target="_blank">
<img src="assets/img/example-sites/example-gathercontent.jpg" alt="Gather Content">
<img src="/assets/img/example-sites/example-gathercontent.jpg" alt="Gather Content">
</a>
</div>
<div class="span4">
......
......@@ -175,61 +175,91 @@ description: Overview of the project, its contents, and how to get started with
<p class="lead">Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
<div class="row bs-docs-examples">
<div class="span4">
<a class="thumbnail" href="/examples/starter-template/">
<a class="thumbnail" href="/examples/starter-template/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-starter.png" alt="">
</a>
<h4>Starter template</h4>
<p>A barebones HTML document with all the Bootstrap CSS and JavaScript included.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/jumbotron/">
<a class="thumbnail" href="/examples/jumbotron/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-marketing.png" alt="">
</a>
<h4>Basic marketing site</h4>
<p>Featuring a hero unit for a primary message and three supporting elements.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/jumbotron-narrow/">
<a class="thumbnail" href="/examples/jumbotron-narrow/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-jumbotron-narrow.png" alt="">
</a>
<h4>Narrow marketing</h4>
<p>Slim, lightweight marketing template for small projects or teams.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/justified-nav/">
<a class="thumbnail" href="/examples/justified-nav/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-justified-nav.png" alt="">
</a>
<h4>Justified nav</h4>
<p>Marketing page with equal-width navigation links in a modified navbar.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/signin/">
<a class="thumbnail" href="/examples/signin/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-signin.png" alt="">
</a>
<h4>Sign in</h4>
<p>Barebones sign in form with custom, larger form controls and a flexible layout.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/sticky-footer/">
<a class="thumbnail" href="/examples/sticky-footer/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer.png" alt="">
</a>
<h4>Sticky footer</h4>
<p>Pin a fixed-height footer to the bottom of the user's viewport.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/sticky-footer-navbar/">
<a class="thumbnail" href="/examples/sticky-footer-navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-sticky-footer-navbar.png" alt="">
</a>
<h4>Sticky footer w/ navbar</h4>
<p>Add a fixed navbar to the default sticky footer template.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/carousel/">
<a class="thumbnail" href="/examples/carousel/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-carousel.png" alt="">
</a>
<h4>Carousel jumbotron</h4>
<p>An interactive riff on the basic marketing site featuring a prominent carousel.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/navbar/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar.png" alt="">
</a>
<h4>Navbar</h4>
<p>Basic template for showcasing how the navbar works.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/navbar-static-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-static-top.png" alt="">
</a>
<h4>Static top navbar</h4>
<p>Basic template for showcasing the static navbar variation.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/navbar-fixed-top/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-navbar-fixed-top.png" alt="">
</a>
<h4>Fixed top navbar</h4>
<p>Basic template for showcasing the fixed navbar variation.</p>
</div>
<div class="span4">
<a class="thumbnail" href="/examples/grid/" target="_blank">
<img src="/assets/img/examples/bootstrap-example-.png" alt="">
</a>
<h4>Grid examples</h4>
<p></p>
</div>
</div>
</section>
......
......@@ -15,7 +15,7 @@ title: Bootstrap
<a href="http://github.com/twitter/bootstrap" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
</li>
<li>
<a href="./getting-started.html#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
<a href="./getting-started/#examples" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Examples']);">Examples</a>
</li>
<li>Version 3.0.0</li>
</ul>
......@@ -24,7 +24,7 @@ title: Bootstrap
<div class="container">
<div class="marketing">
<div class="bs-docs-marketing">
<h1>Introducing Bootstrap.</h1>
<p class="marketing-byline">Need reasons to love Bootstrap? Look no further.</p>
......@@ -43,12 +43,12 @@ title: Bootstrap
<div class="span4">
<img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
<h2>Packed with features.</h2>
<p>A 12-column responsive <a href="./scaffolding.html#gridSystem">grid</a>, dozens of components, <a href="./javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
<p>A 12-column responsive <a href="./css/#grid-system">grid</a>, dozens of components, <a href="./javascript/">JavaScript plugins</a>, typography, form controls, and even a <a href="./customize/">web-based Customizer</a> to make Bootstrap your own.</p>
</div>
</div>
<h1>Built with Bootstrap.</h1>
<p class="marketing-byline">For more sites built with Bootstrap, <a href="./gallery.html">visit the gallery</a> or <a href="./getting-started.html#examples">browse the examples</a>.</p>
<p class="marketing-byline">For more sites built with Bootstrap, <a href="./gallery/">visit the gallery</a> or <a href="./getting-started/#examples">browse the examples</a>.</p>
<div class="row bs-docs-gallery">
<div class="span3">
<a class="thumbnail" href="http://delicious.com">
......
......@@ -622,7 +622,7 @@ $('[data-spy="scroll"]').each(function () {
<h2>Example tabs</h2>
<p>Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.</p>
<div class="bs-docs-example">
<div class="bs-docs-example bs-docs-example-tabs">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
......
......@@ -75,7 +75,7 @@
if (!e) this.paused = true
if (this.$element.find('.next, .prev').length && $.support.transition.end) {
this.$element.trigger($.support.transition.end)
this.cycle()
this.cycle(true)
}
clearInterval(this.interval)
this.interval = null
......
......@@ -158,7 +158,7 @@
$(document)
.on('click.dropdown.data-api', clearMenus)
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
......
......@@ -148,7 +148,7 @@
}
, removeBackdrop: function () {
this.$backdrop.remove()
this.$backdrop && this.$backdrop.remove()
this.$backdrop = null
}
......
......@@ -80,7 +80,15 @@
}
, enter: function (e) {
var self = $(e.currentTarget)[this.type](this._options).data(this.type)
var defaults = $.fn[this.type].defaults
, options = {}
, self
this._options && $.each(this._options, function (key, value) {
if (defaults[key] != value) options[key] = value
}, this)
self = $(e.currentTarget)[this.type](options).data(this.type)
if (!self.options.delay || !self.options.delay.show) return self.show()
......
......@@ -117,4 +117,21 @@ $(function () {
})
.modal("toggle")
})
test("should allow modal close with 'backdrop:false'", function () {
stop()
$.support.transition = false
var div = $("<div>", { id: 'modal-test', "data-backdrop": false })
div
.bind("shown", function () {
ok($('#modal-test').is(":visible"), 'modal visible')
div.modal("hide")
})
.bind("hidden", function() {
ok(!$('#modal-test').is(":visible"), 'modal hidden')
div.remove()
start()
})
.modal("show")
})
})
\ No newline at end of file
//
// Labels and badges
// Badges
// --------------------------------------------------
// Base classes
.counter {
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
......@@ -25,7 +25,7 @@
}
// Hover state, but only for links
a.counter {
a.badge {
&:hover,
&:focus {
color: #fff;
......@@ -36,23 +36,23 @@ a.counter {
// Quick fix for labels/badges in buttons
.btn {
.counter {
.badge {
position: relative;
top: -1px;
}
}
.btn-mini {
.counter {
.badge {
top: 0;
}
}
// Account for counters in navs
.nav-list > .active > a > .counter,
.nav-pills > .active > a > .counter {
.nav-list > .active > a > .badge,
.nav-pills > .active > a > .badge {
color: @link-color;
background-color: #fff;
}
.nav-pills > li > a > .counter {
.nav-pills > li > a > .badge {
margin-left: 3px;
}
/*!
* Bootstrap v3.0.0
*
* Copyright 2012 Twitter, Inc
* Copyright 2013 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
......@@ -9,11 +9,12 @@
*/
// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "variables.less";
@import "mixins.less";
// Reset
@import "normalize.less";
@import "print.less";
// Core CSS
@import "scaffolding.less";
......@@ -49,7 +50,8 @@
@import "alerts.less";
@import "thumbnails.less";
@import "media.less";
@import "counters.less";
@import "labels.less";
@import "badges.less";
@import "progress-bars.less";
@import "accordion.less";
@import "carousel.less";
......
......@@ -16,7 +16,17 @@
display: inline-block;
vertical-align: middle; // match .btn alignment given font-size hack above
> .btn {
position: relative;
float: left;
// Prevent double borders when buttons are next to each other
+ btn {
margin-left: -1px;
}
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
}
}
}
......@@ -41,32 +51,26 @@
position: relative;
border-radius: 0;
}
.btn-group > .btn + .btn {
margin-left: 1px;
}
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
.btn-group > .btn:first-child {
margin-left: 0;
border-top-left-radius: @border-radius-base;
border-bottom-left-radius: @border-radius-base;
.border-left-radius(@border-radius-base);
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
border-top-right-radius: @border-radius-base;
border-bottom-right-radius: @border-radius-base;
.border-right-radius(@border-radius-base);
}
// Reset corners for large buttons
.btn-group > .btn.large:first-child {
margin-left: 0;
border-top-left-radius: @border-radius-large;
border-bottom-left-radius: @border-radius-large;
.border-left-radius(@border-radius-large);
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
border-top-right-radius: @border-radius-large;
border-bottom-right-radius: @border-radius-large;
.border-right-radius(@border-radius-large);
}
// On active and open, don't show outline
......@@ -119,29 +123,24 @@
// Vertical button groups
// ----------------------
.btn-group-vertical {
}
.btn-group-vertical > .btn {
display: block;
float: none;
border-radius: 0;
max-width: 100%;
}
.btn-group-vertical > .btn + .btn {
margin-left: 0;
margin-top: 1px;
}
.btn-group-vertical .btn:first-child {
border-radius: @border-radius-base @border-radius-base 0 0;
border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
.border-top-radius(@border-radius-base);
}
.btn-group-vertical .btn:last-child {
border-radius: 0 0 @border-radius-base @border-radius-base;
border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again
.border-bottom-radius(@border-radius-base);
}
.btn-group-vertical .btn-large:first-child {
border-radius: @border-radius-large @border-radius-large 0 0;
.border-top-radius(@border-radius-large);
}
.btn-group-vertical .btn-large:last-child {
border-radius: 0 0 @border-radius-large @border-radius-large;
.border-bottom-radius(@border-radius-large);
}
......
......@@ -19,6 +19,7 @@
cursor: pointer;
border: 1px solid @btn-border;
border-radius: @border-radius-base;
white-space: nowrap;
&:focus {
.tab-focus();
......@@ -41,7 +42,7 @@
&[disabled],
fieldset[disabled] & {
cursor: default;
.opacity(65);
.opacity(.65);
.box-shadow(none);
}
......@@ -64,10 +65,6 @@
font-size: @font-size-small;
border-radius: @border-radius-small;
}
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
margin-top: -1px;
}
// Mini
.btn-mini {
......@@ -80,10 +77,7 @@
// Icons in buttons
// -------------------------
.btn [class^="glyphicon-"]::before { vertical-align: -2px; }
.btn-small [class^="glyphicon-"]::before,
.btn-mini [class^="glyphicon-"]::before { vertical-align: -1px; }
// TODO: figure this shit out
// Block button
// -------------------------
......
......@@ -75,7 +75,7 @@
left: 0;
bottom: 0;
width: 15%;
.opacity(50);
.opacity(.5);
font-size: 20px;
color: #fff;
text-align: center;
......@@ -105,7 +105,7 @@
&:focus {
color: #fff;
text-decoration: none;
.opacity(90);
.opacity(.9);
}
// Toggles
......
......@@ -10,13 +10,13 @@
line-height: @line-height-base;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(20);
.opacity(.2);
&:hover,
&:focus {
color: #000;
text-decoration: none;
cursor: pointer;
.opacity(50);
.opacity(.5);
}
}
......
......@@ -138,12 +138,6 @@ input[type="file"] {
line-height: @input-height-base;
}
// Make select elements obey height by applying a border
// TODO: See if this can be part of the above selector stack
select {
border: 1px solid @input-border;
}
// Make multiple select elements height not fixed
select[multiple],
select[size] {
......@@ -231,7 +225,6 @@ textarea {
}
// Radios and checkboxes on same line
// TODO v3: Convert .inline to .control-inline
.radio-inline,
.checkbox-inline {
display: inline-block;
......@@ -510,52 +503,43 @@ select:focus:invalid {
// Button input groups
// -------------------------
.input-group-btn,
.input-group-btn .btn {
.input-group-btn {
position: relative;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
float: left; // Collapse white-space
border-radius: 0;
+ .btn {
border-left: 0;
margin-left: -1px;
}
}
.input-group-btn.btn-group {
display: table-cell;
}
// Prepend
.input-group-btn {
&:first-child > .btn,
&.btn-group:first-child > .btn {
border-right: 0;
}
&:first-child > .btn,
&.btn-group:first-child > .btn {
border-radius: @border-radius-base 0 0 @border-radius-base;
&.btn-large {
border-radius:@border-radius-large 0 0 @border-radius-large;
}
&.btn-small {
border-radius:@border-radius-small 0 0 @border-radius-small;
}
// Bring the "active" button to the front
&:hover,
&:active {
z-index: 2;
}
}
// Append
.input-group-btn {
&:last-child > .btn,
&.btn-group:last-child > .btn:first-child {
border-left: 0;
// Prepended buttons
.input-group-btn:first-child {
// Round the left corners only
> .btn:first-child,
> .dropdown-toggle:first-child {
.border-left-radius(@border-radius-base);
&.btn-large { .border-left-radius(@border-radius-large); }
&.btn-small { .border-left-radius(@border-radius-small); }
}
&:last-child > .btn,
&.btn-group:last-child > .btn {
border-radius: 0 @border-radius-base @border-radius-base 0;
&.btn-large {
border-radius: 0 @border-radius-large @border-radius-large 0;
}
&.btn-small {
border-radius: 0 @border-radius-small @border-radius-small 0;
}
}
// Appended buttons
.input-group-btn:last-child {
// Round the right corners only
> .btn:last-child,
> .dropdown-toggle {
.border-right-radius(@border-radius-base);
&.btn-large { .border-right-radius(@border-radius-large); }
&.btn-small { .border-right-radius(@border-radius-small); }
}
}
......@@ -564,7 +548,6 @@ select:focus:invalid {
// Horizontal forms
// --------------------------------------------------
@media screen and (min-width: 768px) {
.form-horizontal {
......
//
// Labels
// --------------------------------------------------
// Base classes
.label {
padding: .25em .6em;
font-size: 75%;
font-weight: 500;
color: #fff;
line-height: 1;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: @grayLight;
border-radius: .25em;
}
// Hover state, but only for links
a.label {
&:hover,
&:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
}
// Colors
// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
.label {
// Danger (red)
&-danger { background-color: @label-danger-background; }
&-danger[href] { background-color: darken(@label-danger-background, 10%); }
// Warnings (orange)
&-warning { background-color: @label-warning-background; }
&-warning[href] { background-color: darken(@label-warning-background, 10%); }
// Success (green)
&-success { background-color: @label-success-background; }
&-success[href] { background-color: darken(@label-success-background, 10%); }
// Info (turquoise)
&-info { background-color: @label-info-background; }
&-info[href] { background-color: darken(@label-info-background, 10%); }
}
......@@ -291,8 +291,10 @@
// Opacity
.opacity(@opacity) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})"; // IE8
opacity: @opacity;
// IE8 filter
@opacity-ie: @opacity * 100;
filter: ~"alpha(opacity=@{opacity-ie})";
}
......
......@@ -67,8 +67,8 @@
z-index: @zindex-modal-background - 10;
background-color: #000;
// Fade for backdrop
&.fade { opacity: 0; }
&.fade.in { .opacity(50);}
&.fade { .opacity(0); }
&.fade.in { .opacity(.5); }
}
// Modal header
......
......@@ -4,7 +4,8 @@
// Wrapper and base class
.navbar {
padding: 15px;
position: relative;
padding: 10px 15px;
background-color: @navbar-bg;
border-radius: @border-radius-base;
// Prevent floats from breaking the navbar
......@@ -16,7 +17,8 @@
.navbar {
.nav {
margin-top: 15px; // space out from .navbar .brand and .btn-navbar
// space out from .navbar .brand and .btn-navbar
margin-top: 15px;
}
.nav > li > a {
padding-top: (@navbar-height - @line-height-base) / 2;
......@@ -35,6 +37,12 @@
color: @navbar-link-color-active;
background-color: @navbar-link-bg-active;
}
.nav > .disabled > a,
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @navbar-link-color-disabled;
background-color: @navbar-link-bg-disabled;
}
}
......@@ -45,15 +53,20 @@
// Static navbar
.navbar-static-top {
position: static;
border-radius: 0;
}
// Fixed navbars aren't fixed to start; that comes at >768px
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
border-radius: 0;
}
.navbar-fixed-top { top: 0; }
.navbar-fixed-bottom { bottom: 0; }
......@@ -62,13 +75,17 @@
// --------------------------------------------------
// Brand/project name
.navbar .brand {
display: inline-block;
.navbar-brand {
display: block;
max-width: 200px;
margin-left: auto;
margin-right: auto;
padding: 7px 15px;
font-size: 18px;
font-weight: 500;
line-height: @line-height-base;
color: @navbar-brand-color;
text-align: center;
&:hover,
&:focus {
color: @navbar-brand-color-hover;
......@@ -78,23 +95,30 @@
}
// Collapsible navbar toggle
.btn-navbar {
float: right;
padding: 10px 12px;
background-color: #ddd;
border: 0;
.navbar-toggle {
position: absolute;
top: 10px;
right: 10px;
padding: 8px 12px;
background-color: transparent;
border: 1px solid #ddd;
border-radius: 4px;
&:hover,
&:focus {
background-color: #ddd;
}
// Bars
.icon-bar {
display: block;
width: 20px;
width: 22px;
height: 2px;
background-color: #fff;
background-color: #ccc;
border-radius: 1px;
}
.icon-bar + .icon-bar {
margin-top: 3px;
margin-top: 4px;
}
}
......@@ -165,7 +189,7 @@
.navbar-inverse {
background-color: @navbar-inverse-bg;
.brand {
.navbar-brand {
color: @navbar-inverse-brand-color;
&:hover,
&:focus {
......@@ -192,10 +216,23 @@
color: @navbar-inverse-link-color-active;
background-color: @navbar-inverse-link-bg-active;
}
.nav > .disabled > a,
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @navbar-inverse-link-color-disabled;
background-color: @navbar-inverse-link-bg-disabled;
}
// Darken the responsive nav toggle
.btn-navbar {
background-color: #444;
.navbar-toggle {
border-color: #333;
&:hover,
&:focus {
background-color: #333;
}
.icon-bar {
background-color: #fff;
}
}
// Darken dividers
......@@ -237,11 +274,11 @@
padding-top: 0;
padding-bottom: 0;
}
.navbar .brand {
.navbar-brand {
float: left;
padding-top: (@navbar-height - @line-height-base) / 2;
padding-bottom: (@navbar-height - @line-height-base) / 2;
margin-left: -15px;
margin-left: -10px;
}
.navbar .nav {
float: left;
......@@ -270,19 +307,11 @@
border-right-color: lighten(@navbar-inverse-bg, 5%);
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
}
.navbar-fixed-top { top: 0; }
.navbar-fixed-bottom { bottom: 0; }
// Required to make the collapsing navbar work on regular desktops
.navbar .btn-navbar {
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none;
}
.nav-collapse.collapse {
......
......@@ -156,6 +156,7 @@
// Nuke hover effects
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @grayLight;
text-decoration: none;
background-color: transparent;
cursor: default;
......@@ -186,6 +187,26 @@
// Tabbable tabs
// -------------------------
// Clear any floats
.tabbable {
.clearfix();
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
/*
// Prevent IE8 from misplacing imgs
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
......@@ -245,7 +266,7 @@
.nav li.dropdown.open a:hover .caret {
border-top-color: #fff;
border-bottom-color: #fff;
.opacity(100);
.opacity(1);
}
// Dropdowns in stacked tabs
......@@ -253,24 +274,4 @@
border-color: @grayLight;
}
// Tabbable tabs
// -------------------------
// Clear any floats
.tabbable {
.clearfix();
}
// Show/hide tabbable areas
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
*/
......@@ -35,7 +35,7 @@
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: @grayLight;
background-color: transparent;
background-color: @pagination-background;
cursor: default;
}
.pagination > li:first-child > a,
......
//
// Basic print styles
// --------------------------------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print {
* {
text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
......@@ -85,73 +85,3 @@ img {
.img-circle {
border-radius: 500px; // crank the border-radius so it works with most reasonably sized images
}
// Printing
// -------------------------
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
@media print {
* {
text-shadow: none !important;
color: #000 !important; // Black prints faster: h5bp.com/s
background: transparent !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
// Don't show links for images, or javascript/internal links
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; // h5bp.com/t
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
......@@ -177,12 +177,15 @@ th {
// TABLE CELL SIZING
// -----------------
// Reset default grid behavior
table td[class*="span"],
table th[class*="span"] {
// Reset default table behavior
table col[class^="span"] {
float: none;
display: table-column;
}
table td[class^="span"],
table th[class^="span"] {
float: none;
display: table-cell;
float: none; // undo default grid column styles
margin-left: 0; // undo default grid column styles
}
// TABLE BACKGROUNDS
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Buttons &middot; Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<style>
body {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<div class="container">
<h2>Icons in buttons</h2>
<p>
<button class="btn btn-large" type="button">
Profile
</button>
<button class="btn btn-large" type="button">
<span class="glyphicon glyphicon-user"></span> Profile
</button>
<button class="btn btn-large" type="button">
<span class="glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-large" type="button">
<span class="glyphicon glyphicon-link"></span> Link
</button>
</p>
<p>
<button class="btn" type="button">
Profile
</button>
<button class="btn" type="button">
<span class="glyphicon glyphicon-user"></span> Profile
</button>
<button class="btn" type="button">
<span class="glyphicon glyphicon-home"></span> Home
</button>
<button class="btn" type="button">
<span class="glyphicon glyphicon-link"></span> Link
</button>
</p>
<p>
<button class="btn btn-small" type="button">
Profile
</button>
<button class="btn btn-small" type="button">
<span class="glyphicon glyphicon-user"></span> Profile
</button>
<button class="btn btn-small" type="button">
<span class="glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-small" type="button">
<span class="glyphicon glyphicon-link"></span> Link
</button>
</p>
<p>
<button class="btn btn-mini" type="button">
Profile
</button>
<button class="btn btn-mini" type="button">
<span class="glyphicon glyphicon-user"></span> Profile
</button>
<button class="btn btn-mini" type="button">
<span class="glyphicon glyphicon-home"></span> Home
</button>
<button class="btn btn-mini" type="button">
<span class="glyphicon glyphicon-link"></span> Link
</button>
</p>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn" href="#"><i class="glyphicon glyphicon-align-left"></i></a>
<a class="btn" href="#"><i class="glyphicon glyphicon-align-center"></i></a>
<a class="btn" href="#"><i class="glyphicon glyphicon-align-right"></i></a>
<a class="btn" href="#"><i class="glyphicon glyphicon-align-justify"></i></a>
</div>
</div>
<hr>
<h2>Dropups</h2>
<div class="btn-toolbar">
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-primary">Dropup</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-danger">Dropup</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-warning">Dropup</button>
<button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-success">Dropup</button>
<button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-info">Dropup</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn btn-inverse">Dropup</button>
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../docs/assets/js/jquery.js"></script>
<script src="../../docs/assets/js/bootstrap-transition.js"></script>
<script src="../../docs/assets/js/bootstrap-alert.js"></script>
<script src="../../docs/assets/js/bootstrap-modal.js"></script>
<script src="../../docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../../docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="../../docs/assets/js/bootstrap-tab.js"></script>
<script src="../../docs/assets/js/bootstrap-tooltip.js"></script>
<script src="../../docs/assets/js/bootstrap-popover.js"></script>
<script src="../../docs/assets/js/bootstrap-button.js"></script>
<script src="../../docs/assets/js/bootstrap-collapse.js"></script>
<script src="../../docs/assets/js/bootstrap-carousel.js"></script>
<script src="../../docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
/*!
* Bootstrap CSS Tests
*/
/* Remove background image */
body {
background-image: none;
}
/* Space out subhead */
.subhead {
margin-bottom: 36px;
}
/*h4 {
margin-bottom: 5px;
}
*/
.type-test {
margin-bottom: 20px;
padding: 0 20px 20px;
background: url(../../docs/assets/img/grid-baseline-20px.png);
}
.type-test h1,
.type-test h2,
.type-test h3,
.type-test h4,
.type-test h5,
.type-test h6 {
background-color: rgba(255,0,0,.2);
}
/* colgroup tests */
.col1 {
background-color: rgba(255,0,0,.1);
}
.col2 {
background-color: rgba(0,255,0,.1);
}
.col3 {
background-color: rgba(0,0,255,.1);
}
/* Gradients */
[class^="gradient-"] {
width: 100%;
height: 400px;
margin: 20px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.gradient-horizontal {
background-color: #333333;
background-image: -moz-linear-gradient(left, #555555, #333333);
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#555555), to(#333333));
background-image: -webkit-linear-gradient(left, #555555, #333333);
background-image: -o-linear-gradient(left, #555555, #333333);
background-image: linear-gradient(to right, #555555, #333333);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1);
}
.gradient-vertical {
background-color: #474747;
background-image: -moz-linear-gradient(top, #555555, #333333);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333));
background-image: -webkit-linear-gradient(top, #555555, #333333);
background-image: -o-linear-gradient(top, #555555, #333333);
background-image: linear-gradient(to bottom, #555555, #333333);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0);
}
.gradient-directional {
background-color: #333333;
background-image: -moz-linear-gradient(45deg, #555555, #333333);
background-image: -webkit-linear-gradient(45deg, #555555, #333333);
background-image: -o-linear-gradient(45deg, #555555, #333333);
background-image: linear-gradient(45deg, #555555, #333333);
background-repeat: repeat-x;
}
.gradient-vertical-three {
background-color: #8940a5;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
background-image: -webkit-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
background-image: -moz-linear-gradient(top, #00b3ee, #7a43b6 50%, #c3325f);
background-image: -o-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
background-image: linear-gradient(#00b3ee, #7a43b6 50%, #c3325f);
background-repeat: no-repeat;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00b3ee', endColorstr='#ffc3325f', GradientType=0);
}
.gradient-radial {
background-color: #333333;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#555555), to(#333333));
background-image: -webkit-radial-gradient(circle, #555555, #333333);
background-image: -moz-radial-gradient(circle, #555555, #333333);
background-image: -o-radial-gradient(circle, #555555, #333333);
background-repeat: no-repeat;
}
.gradient-striped {
background-color: #555555;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.gradient-horizontal-three {
background-color: #00b3ee;
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f));
background-image: -webkit-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
background-image: -moz-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
background-image: -o-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f);
background-image: linear-gradient(to right, #00b3ee, #7a43b6 50%, #c3325f);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b3ee', endColorstr='#c3325f', GradientType=0);
}
This diff is collapsed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.png">
</head>
<body>
<form class="container">
<div class="page-header">
<h1>Fixed grid</h1>
</div>
<h3>Vertical alignment</h3>
<input type="text" class="span2" placeholder="span2">
<select class="span2"><option>span2</option></select>
<span class="uneditable-input span2">span1</span>
<h3>Width across elements</h3>
<div>
<input type="text" class="span2" placeholder="span2">
</div>
<div>
<select class="span2"><option>span2</option></select>
</div>
<div>
<span class="uneditable-input span2">span2</span>
</div>
</form> <!-- /container -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
body {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<form class="container">
<div class="page-header">
<h1>Form controls</h1>
</div>
<div class="row">
<div class="span4">
<label>Select</label>
<select>
<option>Select</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<hr>
<label>textarea</label>
<textarea>Textarea</textarea>
<hr>
<label>text</label>
<input type="text" value="Text input">
<hr>
<label>password</label>
<input type="password" value="Password input">
<hr>
<label>checkbox</label>
<input type="checkbox" value="">
<hr>
<label>radio</label>
<input type="radio" value="">
<hr>
<label>button</label>
<input type="button" value="Button">
<hr>
<label>submit</label>
<input type="submit" value="Submit">
<hr>
<label>reset</label>
<input type="reset" value="Reset">
</div><!-- /span4 -->
<div class="span4">
<label>file</label>
<input type="file" value="">
<hr>
<label>hidden</label>
<input type="hidden" value="hidden">
<hr>
<label>image</label>
<input type="image" value="">
<hr>
<label>datetime</label>
<input type="datetime" value="">
<hr>
<label>datetime-local</label>
<input type="datetime-local" value="">
<hr>
<label>date</label>
<input type="date" value="">
<hr>
<label>month</label>
<input type="month" value="">
<hr>
<label>time</label>
<input type="time" value="">
<hr>
<label>week</label>
<input type="week" value="">
</div><!-- /span4 -->
<div class="span4">
<label>number</label>
<input type="number" value="">
<hr>
<label>range</label>
<input type="range" value="">
<hr>
<label>email</label>
<input type="email" value="">
<hr>
<label>url</label>
<input type="url" value="">
<hr>
<label>search</label>
<input type="search" value="">
<hr>
<label>tel</label>
<input type="tel" value="">
<hr>
<label>color</label>
<input type="color" value="">
</div><!-- /span4 -->
</div><!-- /row -->
<div class="page-header">
<h1>Form components</h1>
</div>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<p class="help-block">Example block-level help text here.</p>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form> <!-- /container -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../../docs/assets/css/bootstrap.css" rel="stylesheet">
<link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="../../docs/assets/css/docs.css" rel="stylesheet">
<style>
body {
padding-top: 30px;
padding-bottom: 30px;
}
.container {
background-color: rgba(255,0,0,.1);
}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<form class="container">
<div class="page-header">
<h1>Grids</h1>
</div>
<h2>Default grid columns</h2>
<div class="bs-docs-grid">
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row show-grid">
<div class="span12">12</div>
</div>
</div>
<h2>Inputs</h2>
<!-- <input type="text" class="span1" placeholder=".span1">
<input type="text" class="span2" placeholder=".span2">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span5" placeholder=".span5">
<div class="row">
<input type="text" class="span1" placeholder=".span1">
<input type="text" class="span2" placeholder=".span2">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span5" placeholder=".span5">
</div>
<div class="controls-row">
<input type="text" class="span1" placeholder=".span1">
<input type="text" class="span2" placeholder=".span2">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span5" placeholder=".span5">
</div>
-->
<div class="controls-row">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span4" placeholder=".span4">
<input type="text" class="span4" placeholder=".span4">
</div>
</form> <!-- /container -->
</body>
</html>
This diff is collapsed.
This diff is collapsed.
......@@ -13,7 +13,7 @@
line-height: 1.4;
.opacity(0);
&.in { .opacity(100); }
&.in { .opacity(1); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }
......
......@@ -64,11 +64,6 @@
@padding-small: 2px 10px; // 26px
@padding-mini: 0 6px; // 22px
/*@padding-large-input: 10px 14px; // 44px
// firefox hack since it doesn't accept custom line-height for inputs and automatically sets line-height as font-size + 4 px.
// input-large at 18 + 4 = 22, so I tried to compensate on padding.
*/
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
......@@ -189,9 +184,11 @@
// Navbar links
@navbar-link-color: #777;
@navbar-link-color-hover: #333;
@navbar-link-color-active: #555;
@navbar-link-bg-hover: transparent;
@navbar-link-color-active: #555;
@navbar-link-bg-active: darken(@navbar-bg, 10%);
@navbar-link-color-disabled: #ccc;
@navbar-link-bg-disabled: transparent;
// Inverted navbar
@navbar-inverse-text: @grayLight;
......@@ -205,9 +202,11 @@
// Inverted navbar links
@navbar-inverse-link-color: @grayLight;
@navbar-inverse-link-color-hover: #fff;
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-bg-hover: transparent;
@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-bg-active: darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-color-disabled: #444;
@navbar-inverse-link-bg-disabled: transparent;
// Inverted navbar search
// Normal navbar needs no special styles or vars
......@@ -271,6 +270,14 @@
@popover-arrow-outer-color: rgba(0,0,0,.25);
// Labels
// -------------------------
@label-success-background: @brand-success;
@label-info-background: @brand-info;
@label-warning-background: @brand-warning;
@label-danger-background: @brand-danger;
// Modals
// -------------------------
......
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