Skip to content

B
bootstrap
Commit 402dbfb6 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Merge branch '3.0.0-wip' into bs3_theme 

Conflicts:
	dist/css/bootstrap.min.css
parents 7e19b6b0 41bdd1a4
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1669 additions and 1035 deletions
.travis.yml
View file @ 402dbfb6
......@@ -2,4 +2,8 @@ language: node_js
node_js:
- 0.8
before_script:
- npm install -g grunt-cli
\ No newline at end of file
- npm install -g grunt-cli
env:
global:
- secure: Besg41eyU+2mfxrywQ4ydOShMdc34ImaO0S0ENP+aCOBuyNBIgP59wy5tBMmyai2/8eInYeVps4Td96mWInMMxzTe3Bar7eTLG5tWVKRSr/wc4NBPZ/ppoPAmCEsz9Y+VptRH9/FO8n7hsL9EFZ+xBKbG+C0SccGoyBDpA5j7/w=
- secure: Ptiv7phCImFP3ALIz+sMQzrZg8k7C1gLZbFBhWxjnQr3g06wIfX3Ls5y9OHvxid+lOZZjISui3wzBVgpVHqwHUYf96+r0mo6/mJ+F4ffUmShZANVaIMD/JRTnXhUQJbvntGLvxn1EYWPdNM+2IHJrMipnjHxU9tkgAnlel4Zdew=
CONTRIBUTING.md
View file @ 402dbfb6
......@@ -48,7 +48,7 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
- Multiple-line approach (one property and value per line)
- Always a space after a property's colon (.e.g, `display: block;` and not `display:block;`)
- End all lines with a semi-colon
- For multiple, comma-separated selectors, place each selector on it's own line
- For multiple, comma-separated selectors, place each selector on its own line
- Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
### JS
......
Gruntfile.js
View file @ 402dbfb6
/* jshint node: true */
module.exports = function(grunt) {
"use strict";
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('package.json'),
banner: '/**\n' +
'* <%= pkg.name %>.js v<%= pkg.version %> by @fat and @mdo\n' +
'* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
'* <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
'*/\n',
jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\n\n',
// Task configuration.
clean: {
dist: ['dist']
},
concat: {
options: {
banner: '<%= banner %><%= jqueryCheck %>',
stripBanners: false
},
bootstrap: {
src: ['js/transition.js', 'js/alert.js', 'js/button.js', 'js/carousel.js', 'js/collapse.js', 'js/dropdown.js', 'js/modal.js', 'js/tooltip.js', 'js/popover.js', 'js/scrollspy.js', 'js/tab.js', 'js/affix.js'],
dest: 'dist/js/<%= pkg.name %>.js'
}
},
jshint: {
options: {
jshintrc: 'js/.jshintrc'
},
gruntfile: {
src: 'Gruntfile.js'
},
src: {
src: ['js/*.js']
},
test: {
src: ['js/tests/unit/*.js']
}
},
recess: {
options: {
compile: true
},
bootstrap: {
files: {
'dist/css/bootstrap.css': ['less/bootstrap.less']
}
},
min: {
options: {
compress: true
},
files: {
'dist/css/bootstrap.min.css': ['less/bootstrap.less']
}
}
},
uglify: {
options: {
banner: '<%= banner %>'
},
bootstrap: {
files: {
'dist/js/<%= pkg.name %>.min.js': ['<%= concat.bootstrap.dest %>']
}
}
},
qunit: {
options: {
inject: 'js/tests/unit/phantom.js'
},
files: ['js/tests/*.html']
},
connect: {
server: {
options: {
port: 3000,
base: '.'
}
}
"use strict";
// Project configuration.
grunt.initConfig({
// Metadata.
pkg: grunt.file.readJSON('package.json'),
banner: '/**\n' +
'* <%= pkg.name %>.js v<%= pkg.version %> by @fat and @mdo\n' +
'* Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
'* <%= _.pluck(pkg.licenses, "url").join(", ") %>\n' +
'*/\n',
jqueryCheck: 'if (!jQuery) { throw new Error(\"Bootstrap requires jQuery\") }\n\n',
// Task configuration.
clean: {
dist: ['dist']
},
jshint: {
options: {
jshintrc: 'js/.jshintrc'
},
gruntfile: {
src: 'Gruntfile.js'
},
src: {
src: ['js/*.js']
},
test: {
src: ['js/tests/unit/*.js']
}
},
concat: {
options: {
banner: '<%= banner %><%= jqueryCheck %>',
stripBanners: false
},
bootstrap: {
src: [
'js/transition.js',
'js/alert.js',
'js/button.js',
'js/carousel.js',
'js/collapse.js',
'js/dropdown.js',
'js/modal.js',
'js/tooltip.js',
'js/popover.js',
'js/scrollspy.js',
'js/tab.js',
'js/affix.js'
],
dest: 'dist/js/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '<%= banner %>'
},
bootstrap: {
src: ['<%= concat.bootstrap.dest %>'],
dest: 'dist/js/<%= pkg.name %>.min.js'
}
},
recess: {
options: {
compile: true
},
bootstrap: {
src: ['less/bootstrap.less'],
dest: 'dist/css/<%= pkg.name %>.css'
},
min: {
options: {
compress: true
},
watch: {
src: {
files: '<%= jshint.src.src %>',
tasks: ['jshint:src', 'qunit']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
recess: {
files: 'less/*.less',
tasks: ['recess']
}
src: ['less/bootstrap.less'],
dest: 'dist/css/<%= pkg.name %>.min.css'
}
},
qunit: {
options: {
inject: 'js/tests/unit/phantom.js'
},
files: ['js/tests/*.html']
},
connect: {
server: {
options: {
port: 3000,
base: '.'
}
});
}
},
watch: {
src: {
files: '<%= jshint.src.src %>',
tasks: ['jshint:src', 'qunit']
},
test: {
files: '<%= jshint.test.src %>',
tasks: ['jshint:test', 'qunit']
},
recess: {
files: 'less/*.less',
tasks: ['recess']
}
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-recess');
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('browserstack-runner');
// Test task.
grunt.registerTask('test', ['jshint', 'qunit']);
// Test task.
var testSubtasks = ['jshint', 'qunit'];
if (process.env.TRAVIS) {
testSubtasks.push('browserstack_runner');
}
grunt.registerTask('test', testSubtasks);
// JS distribution task.
grunt.registerTask('dist-js', ['concat', 'uglify']);
// JS distribution task.
grunt.registerTask('dist-js', ['concat', 'uglify']);
// CSS distribution task.
grunt.registerTask('dist-css', ['recess']);
// CSS distribution task.
grunt.registerTask('dist-css', ['recess']);
// Full distribution task.
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
// Full distribution task.
grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);
// Default task.
grunt.registerTask('default', ['test', 'dist']);
// Default task.
grunt.registerTask('default', ['test', 'dist']);
};
README.md
View file @ 402dbfb6
......@@ -63,13 +63,13 @@ When completed, you'll be able to run the various Grunt commands provided from t
### Available Grunt commands
#### Build - `grunt`
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires recess and uglify-js.**
Run `grunt` to run tests locally and compile the CSS and JavaScript into `/dist`. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
#### Only compile CSS and JavaScript - `grunt dist`
`grunt dist` creates the `/dist` directory with compiled files. **Requires recess and uglify-js.**
`grunt dist` creates the `/dist` directory with compiled files. **Requires [recess](https://github.com/twitter/recess) and [uglify-js](https://github.com/mishoo/UglifyJS).**
#### Tests - `grunt test`
Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/phantomjs/) (used for ci). **Requires phantomjs.**
Runs jshint and qunit tests headlessly in [phantomjs](https://github.com/ariya/phantomjs/) (used for CI). **Requires [phantomjs](https://github.com/ariya/phantomjs/).**
#### Watch - `grunt watch`
This is a convenience method for watching just Less files and automatically building them whenever you save.
......
_includes/ads.html
View file @ 402dbfb6
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
\ No newline at end of file
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
_includes/footer.html
View file @ 402dbfb6
......@@ -4,7 +4,7 @@
<script src="{{ page.base_url }}assets/js/jquery.js"></script>
<script src="{{ page.base_url }}dist/js/bootstrap.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="{{ page.base_url }}assets/js/holder.js"></script>
<script src="{{ page.base_url }}assets/js/application.js"></script>
......@@ -15,7 +15,6 @@
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
......
_includes/header.html
View file @ 402dbfb6
......@@ -31,12 +31,12 @@
<link rel="apple-touch-icon-precomposed" href="{{ page.base_url }}assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="{{ page.base_url }}assets/ico/favicon.png">
<script type="text/javascript">
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-146052-10']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
var ga = document.createElement('script'); ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
......
_includes/nav-components.html
View file @ 402dbfb6
......@@ -61,6 +61,8 @@
<li><a href="#navbar-fixed-bottom">Fixed bottom navbar</a></li>
<li><a href="#navbar-static-top">Static top navbar</a></li>
<li><a href="#navbar-responsive">Responsive navbar</a></li>
<li><a href="#navbar-scrollable">Scrollable responsive navbar</a></li>
<li><a href="#navbar-inverted">Inverted navbar</a></li>
</ul>
</li>
<li><a href="#breadcrumbs">Breadcrumbs</a></li>
......@@ -80,12 +82,17 @@
<li><a href="#type-components-page-header">Page header</a></li>
</ul>
</li>
<li><a href="#thumbnails">Thumbnails</a></li>
<li>
<a href="#thumbnails">Thumbnails</a>
<ul class="nav">
<li><a href="#thumbnails-default">Default thumbnails</a></li>
<li><a href="#thumbnails-custom-content">Custom content</a></li>
</ul>
</li>
<li>
<a href="#alerts">Alerts</a>
<ul class="nav">
<li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-block">Block alerts</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li>
<li><a href="#alerts-links">Links in alerts</a></li>
</ul>
......@@ -100,7 +107,13 @@
<li><a href="#progress-stacked">Stacked</a></li>
</ul>
</li>
<li><a href="#media">Media object</a></li>
<li>
<a href="#media">Media object</a>
<ul class="nav">
<li><a href="#media-default">Default media</a></li>
<li><a href="#media-list">Media list</a></li>
</ul>
</li>
<li>
<a href="#list-group">List group</a>
<ul class="nav">
......
_includes/nav-css.html
View file @ 402dbfb6
......@@ -56,6 +56,7 @@
<li><a href="#forms-inline">Inline variation</a></li>
<li><a href="#forms-horizontal">Horizontal variation</a></li>
<li><a href="#forms-controls">Supported controls</a></li>
<li><a href="#forms-controls-static">Static form control</a></li>
<li><a href="#forms-control-states">Control states</a></li>
<li><a href="#forms-control-sizes">Control sizing</a></li>
<li><a href="#forms-help-text">Help text</a></li>
......
_includes/nav-getting-started.html
View file @ 402dbfb6
......@@ -14,9 +14,12 @@
<li>
<a href="#browsers">Browser support</a>
</li>
<li>
<a href="#third-parties">Third party support</a>
</li>
<li>
<a href="#license-faqs">License FAQs</a>
</li>
<li>
<a href="#customizing">Customizing Bootstrap</a>
</li>
\ No newline at end of file
</li>
_includes/nav-main.html
View file @ 402dbfb6
<div class="navbar navbar-inverse navbar-fixed-top bs-docs-nav">
<div class="container">
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{{ page.base_url }}" class="navbar-brand">Bootstrap 3 RC1</a>
<div class="nav-collapse collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li{% if page.slug == "getting-started" %} class="active"{% endif %}>
......
assets/css/docs.css
View file @ 402dbfb6
......@@ -123,8 +123,8 @@ body {
/* Download button */
.bs-masthead .btn-outline {
margin-top: 5px;
margin-bottom: 5px;
margin-top: 20px;
margin-bottom: 20px;
padding: 18px 24px;
font-size: 21px;
}
......@@ -208,8 +208,8 @@ body {
position: relative;
}
.bs-docs-section + .bs-docs-section {
margin-top: 80px;
.bs-docs-section h1[id] {
padding-top: 80px;
}
/* Ads in page headers */
......@@ -833,7 +833,7 @@ input.focused {
.bs-masthead h1 {
font-size: 100px;
}
.bs-masthead p {
.bs-masthead .lead {
margin-left: 15%;
margin-right: 15%;
font-size: 30px;
......@@ -878,7 +878,6 @@ input.focused {
width: 330px !important;
min-height: 132px;
}
}
/* Large desktops and up */
......
assets/js/application.js
View file @ 402dbfb6
......@@ -20,14 +20,6 @@
e.preventDefault()
})
$body.on('click', '.bs-sidenav [href^=#]', function (e) {
var $target = $(this.getAttribute('href'))
e.preventDefault() // prevent browser scroll
$window.scrollTop($target.offset().top - navHeight + 5)
})
// back to top
setTimeout(function () {
var $sideBar = $('.bs-sidebar')
......
browserstack.json 0 → 100644
View file @ 402dbfb6
{
"username": "--secure--",
"key": "--secure--",
"test_path": "js/tests/index.html",
"browsers": [
{
"browser": "firefox",
"browser_version": "latest",
"os": "OS X",
"os_version": "Mountain Lion"
},
{
"browser": "safari",
"browser_version": "latest",
"os": "OS X",
"os_version": "Mountain Lion"
},
{
"browser": "chrome",
"browser_version": "latest",
"os": "OS X",
"os_version": "Mountain Lion"
},
{
"browser": "firefox",
"browser_version": "latest",
"os": "Windows",
"os_version": "7"
},
{
"browser": "chrome",
"browser_version": "latest",
"os": "Windows",
"os_version": "7"
}
]
}
components.html
View file @ 402dbfb6
This diff is collapsed.
css.html
View file @ 402dbfb6
This diff is collapsed.
customize.html
View file @ 402dbfb6
......@@ -486,7 +486,7 @@ base_url: "../"
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<div class="row">
<div class="col-lg-6">
<label>@screen-tiny</label>
<label>@screen-xsmall</label>
<input type="text" class="form-control" placeholder="480px">
<label>@screen-small</label>
<input type="text" class="form-control" placeholder="768px">
......@@ -660,12 +660,21 @@ base_url: "../"
</div>
<h2 id="variables-alerts">Alerts</h2>
<p>Define alert colors and border radius.</p>
<p>Define alert colors, border radius, and padding.</p>
<h4>Border radius</h4>
<label>@alert-padding</label>
<input type="text" class="form-control" placeholder="15px">
<label>@alert-border-radius</label>
<input type="text" class="form-control" placeholder="@border-radius-base">
<div class="row">
<div class="col-lg-6">
<h4>Default (Warning)</h4>
<label>@alert-text</label>
<input type="text" class="form-control" placeholder="@state-warning-text">
<label>@alert-bg</label>
<input type="text" class="form-control" placeholder="@state-warning-bg">
<label>@alert-border</label>
<input type="text" class="form-control" placeholder="@state-warning-border">
<h4>Success</h4>
<label>@alert-success-text</label>
<input type="text" class="form-control" placeholder="@state-success-text">
......@@ -673,13 +682,6 @@ base_url: "../"
<input type="text" class="form-control" placeholder="@state-success-bg">
<label>@alert-success-border</label>
<input type="text" class="form-control" placeholder="@state-success-border">
<h4>Warning</h4>
<label>@alert-warning-text</label>
<input type="text" class="form-control" placeholder="@state-warning-text">
<label>@alert-warning-bg</label>
<input type="text" class="form-control" placeholder="@state-warning-bg">
<label>@alert-warning-border</label>
<input type="text" class="form-control" placeholder="@state-warning-border">
</div>
<div class="col-lg-6">
<h4>Danger</h4>
......@@ -710,6 +712,8 @@ base_url: "../"
<input type="text" class="form-control" placeholder="#777">
<label>@navbar-bg</label>
<input type="text" class="form-control" placeholder="#eee">
<label>@navbar-border-radius</label>
<input type="text" class="form-control" placeholder="@border-radius-base">
<h4>Links</h4>
<label>@navbar-link-color</label>
<input type="text" class="form-control" placeholder="#777">
......@@ -1439,7 +1443,7 @@ base_url: "../"
</div>
<p class="lead">Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
<div class="bs-customize-download">
<a class="btn btn-block btn-large btn-bs" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
<a class="btn btn-block btn-lg btn-bs" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
</div>
<div class="bs-callout bs-callout-danger">
<h4>What's included?</h4>
......
dist/css/bootstrap.css
View file @ 402dbfb6
This diff is collapsed.
dist/css/bootstrap.min.css
View file @ 402dbfb6
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/js/bootstrap.js
View file @ 402dbfb6
......@@ -219,7 +219,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent.length) {
var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
var $input = this.$element.find('input')
.prop('checked', !this.$element.hasClass('active'))
.trigger('change')
if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
}
......@@ -533,7 +535,7 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
if (actives && actives.length) {
var hasData = actives.data('bs.collapse')
......@@ -1243,12 +1245,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
.addClass(placement)
}
var tp = placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
var calculatedOffset = this.getCalcuatedOffset(placement, pos, actualWidth, actualHeight)
this.applyPlacement(tp, placement)
this.applyPlacement(calculatedOffset, placement)
this.$element.trigger('shown.bs.' + this.type)
}
}
......@@ -1260,25 +1259,33 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var height = $tip[0].offsetHeight
// manually read margins because getBoundingClientRect includes difference
offset.top = offset.top + parseInt($tip.css('margin-top'), 10)
offset.left = offset.left + parseInt($tip.css('margin-left'), 10)
var marginTop = parseInt($tip.css('margin-top'), 10)
var marginLeft = parseInt($tip.css('margin-left'), 10)
// we must check for NaN for ie 8/9
if (isNaN(marginTop)) marginTop = 0
if (isNaN(marginLeft)) marginLeft = 0
offset.top = offset.top + marginTop
offset.left = offset.left + marginLeft
$tip
.offset(offset)
.addClass('in')
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (placement == 'top' && actualHeight != height) {
replace = true
offset.top = offset.top + height - actualHeight
offset.top = offset.top + height - actualHeight
}
if (placement == 'bottom' || placement == 'top') {
if (/bottom|top/.test(placement)) {
var delta = 0
if (offset.left < 0){
if (offset.left < 0) {
delta = offset.left * -2
offset.left = 0
......@@ -1313,6 +1320,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() }
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
......@@ -1321,9 +1330,9 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
$.support.transition && this.$tip.hasClass('fade') ?
$tip
.one($.support.transition.end, $tip.detach)
.one($.support.transition.end, complete)
.emulateTransitionEnd(150) :
$tip.detach()
complete()
this.$element.trigger('hidden.bs.' + this.type)
......@@ -1349,6 +1358,13 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
}, this.$element.offset())
}
Tooltip.prototype.getCalcuatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
}
Tooltip.prototype.getTitle = function () {
var title
var $e = this.$element
......@@ -1364,8 +1380,8 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
return this.$tip = this.$tip || $(this.options.template)
}
Tooltip.prototype.arrow =function(){
return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
Tooltip.prototype.arrow = function () {
return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow')
}
Tooltip.prototype.validate = function () {
......@@ -1487,7 +1503,13 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
$tip.removeClass('fade top bottom left right in')
$tip.find('.popover-title:empty').hide()
// Hide empty titles
//
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if ($tip.find('.popover-title').html() === '') {
$tip.find('.popover-title').hide();
}
}
Popover.prototype.hasContent = function () {
......@@ -1504,6 +1526,10 @@ if (!jQuery) { throw new Error("Bootstrap requires jQuery") }
o.content)
}
Popover.prototype.arrow = function () {
return this.$arrow = this.$arrow || this.tip().find('.arrow')
}
Popover.prototype.tip = function () {
if (!this.$tip) this.$tip = $(this.options.template)
return this.$tip
......
dist/js/bootstrap.min.js
View file @ 402dbfb6
This diff is collapsed.
getting-started.html
View file @ 402dbfb6
......@@ -17,9 +17,7 @@ base_url: "../"
<h3>Download compiled CSS and JS</h3>
<p class="lead">The fastest way to get started is to get the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
<p><a class="btn btn-large btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
<hr>
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a></p>
<h3 id="download-options">More download options</h3>
<div class="bs-docs-dl-options">
......@@ -38,8 +36,6 @@ base_url: "../"
{% highlight bash %}$ bower install bootstrap{% endhighlight %}
</div>
<hr>
<h3 id="download-cdn">Use the Bootstrap CDN</h3>
<p>The folks over at <a href="https://www.netdna.com/">NetDNA</a> have graciously provided CDN support for Bootstrap's CSS and JavaScript. To use, swap your local instances for the <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links listed below.</p>
{% highlight html linenos %}
......@@ -77,7 +73,7 @@ bootstrap/
│ ├── bootstrap.min.js
{% endhighlight %}
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>). The image files are compressed using <a href="http://imageoptim.com/">ImageOptim</a>, a Mac app for compressing PNGs.</p>
<p>This is the most basic form of Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code>).</p>
<div class="bs-callout bs-callout-danger">
<h4>jQuery required</h4>
<p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>.</p>
......@@ -112,7 +108,7 @@ bootstrap/
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Optionally enable responsive features in IE8 -->
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
</html>
......@@ -124,11 +120,11 @@ bootstrap/
<!-- Browser compatibility
<!-- Browser support
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="browsers">Browser compatibility</h1>
<h1 id="browsers">Browser support</h1>
</div>
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older and less advanced browsers might receive a less stylized, though fully functional, version of certain components.</p>
......@@ -153,10 +149,64 @@ bootstrap/
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% endhighlight %}
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
<h3>Windows Phone 8 and Internet Explorer 10</h3>
<p>Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.</p>
{% highlight css %}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
{% endhighlight %}
{% highlight js %}
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"@-ms-viewport{width:auto!important}"
)
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
{% endhighlight %}
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
</div>
<!-- Third party support
================================================== -->
<div class="bs-docs-section">
<div class="page-header">
<h1 id="third-parties">Third party support</h1>
</div>
<p class="lead">While we don't officially support any third party plugins or add-ons, we do offer some helpful advice to help avoid potential issues in your projects.</p>
<h3>Google Maps</h3>
<p>If you're using Google Maps on a Bootstrapped project, you might run into some display problems due to our use of <code>* { box-sizing: border-box; }</code>. Previously, you may have also ran into issues with the use of <code>max-width</code> on images. The following snippet should avoid all those problems.</p>
{% highlight css %}
/* Fix Google Maps canvas
*
* Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
* global `box-sizing` changes. You may optionally need to reset the `max-width`
* on images in case you've applied that anywhere else. (That shouldn't be as
* necessary with Bootstrap 3 though as that behavior is relegated to the
* `.img-responsive` class.)
*/
.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }
/* Optional responsive image override */
img { max-width: none; }
{% endhighlight %}
</div>
<!-- License FAQs
================================================== -->
<div class="bs-docs-section">
......
index.html
View file @ 402dbfb6
......@@ -9,7 +9,8 @@ base_url: "./"
<h1>Bootstrap 3</h1>
<p class="lead">Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
<p>
<a href="{{ site.download_dist }}" class="btn btn-outline btn-large" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC1']);">Download Bootstrap</a>
<a href="{{ site.download }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download 3.0.0 RC1']);">Download latest BS3</a>
</p>
<p><strong>Heads up!</strong> Downloads are pulled directly from the latest commited code on GitHub, and as a result our docs may at times be out of sync.</p>
</div>
</div>
javascript.html
View file @ 402dbfb6
This diff is collapsed.
js/button.js
View file @ 402dbfb6
......@@ -56,7 +56,9 @@
var $parent = this.$element.closest('[data-toggle="buttons"]')
if ($parent.length) {
var $input = this.$element.find('input').prop('checked', !this.$element.hasClass('active'))
var $input = this.$element.find('input')
.prop('checked', !this.$element.hasClass('active'))
.trigger('change')
if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
}
......
js/collapse.js
View file @ 402dbfb6
......@@ -48,7 +48,7 @@
this.$element.trigger(startEvent)
if (startEvent.isDefaultPrevented()) return
var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
var actives = this.$parent && this.$parent.find('> .accordion-group > .in')
if (actives && actives.length) {
var hasData = actives.data('bs.collapse')
......
js/popover.js
View file @ 402dbfb6
......@@ -58,7 +58,13 @@
$tip.removeClass('fade top bottom left right in')
$tip.find('.popover-title:empty').hide()
// Hide empty titles
//
// IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do
// this manually by checking the contents.
if ($tip.find('.popover-title').html() === '') {
$tip.find('.popover-title').hide();
}
}
Popover.prototype.hasContent = function () {
......@@ -75,6 +81,10 @@
o.content)
}
Popover.prototype.arrow = function () {
return this.$arrow = this.$arrow || this.tip().find('.arrow')
}
Popover.prototype.tip = function () {
if (!this.$tip) this.$tip = $(this.options.template)
return this.$tip
......
js/tooltip.js
View file @ 402dbfb6
......@@ -179,12 +179,9 @@
.addClass(placement)
}
var tp = placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
var calculatedOffset = this.getCalcuatedOffset(placement, pos, actualWidth, actualHeight)
this.applyPlacement(tp, placement)
this.applyPlacement(calculatedOffset, placement)
this.$element.trigger('shown.bs.' + this.type)
}
}
......@@ -196,25 +193,33 @@
var height = $tip[0].offsetHeight
// manually read margins because getBoundingClientRect includes difference
offset.top = offset.top + parseInt($tip.css('margin-top'), 10)
offset.left = offset.left + parseInt($tip.css('margin-left'), 10)
var marginTop = parseInt($tip.css('margin-top'), 10)
var marginLeft = parseInt($tip.css('margin-left'), 10)
// we must check for NaN for ie 8/9
if (isNaN(marginTop)) marginTop = 0
if (isNaN(marginLeft)) marginLeft = 0
offset.top = offset.top + marginTop
offset.left = offset.left + marginLeft
$tip
.offset(offset)
.addClass('in')
// check to see if placing tip in new offset caused the tip to resize itself
var actualWidth = $tip[0].offsetWidth
var actualHeight = $tip[0].offsetHeight
if (placement == 'top' && actualHeight != height) {
replace = true
offset.top = offset.top + height - actualHeight
offset.top = offset.top + height - actualHeight
}
if (placement == 'bottom' || placement == 'top') {
if (/bottom|top/.test(placement)) {
var delta = 0
if (offset.left < 0){
if (offset.left < 0) {
delta = offset.left * -2
offset.left = 0
......@@ -249,6 +254,8 @@
var $tip = this.tip()
var e = $.Event('hide.bs.' + this.type)
function complete() { $tip.detach() }
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
......@@ -257,9 +264,9 @@
$.support.transition && this.$tip.hasClass('fade') ?
$tip
.one($.support.transition.end, $tip.detach)
.one($.support.transition.end, complete)
.emulateTransitionEnd(150) :
$tip.detach()
complete()
this.$element.trigger('hidden.bs.' + this.type)
......@@ -285,6 +292,13 @@
}, this.$element.offset())
}
Tooltip.prototype.getCalcuatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
/* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
}
Tooltip.prototype.getTitle = function () {
var title
var $e = this.$element
......@@ -300,8 +314,8 @@
return this.$tip = this.$tip || $(this.options.template)
}
Tooltip.prototype.arrow =function(){
return this.$arrow = this.$arrow || this.tip().find(".tooltip-arrow")
Tooltip.prototype.arrow = function () {
return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow')
}
Tooltip.prototype.validate = function () {
......
less/alerts.less
View file @ 402dbfb6
......@@ -7,7 +7,7 @@
// -------------------------
.alert {
padding: 10px 35px 10px 15px;
padding: @alert-padding (@alert-padding + 20) @alert-padding @alert-padding;
margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
......@@ -26,7 +26,7 @@
}
// Provide class for links that match alerts
.alert-link {
font-weight: 500;
font-weight: @alert-link-font-weight;
color: darken(@alert-text, 10%);
}
......@@ -37,33 +37,26 @@
right: -21px;
color: inherit;
}
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
}
// Alternate styles
// -------------------------
.alert-success {
.alert-variant(@alert-success-bg, @alert-success-border, @alert-success-text);
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
}
.alert-danger {
.alert-variant(@alert-danger-bg, @alert-danger-border, @alert-danger-text);
.alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
}
.alert-info {
.alert-variant(@alert-info-bg, @alert-info-border, @alert-info-text);
}
// Block alerts
// -------------------------
.alert-block {
padding-top: 15px;
padding-bottom: 15px;
> p,
> ul {
margin-bottom: 0;
}
p + p {
margin-top: 5px;
}
.alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text);
}
less/badges.less
View file @ 402dbfb6
......@@ -9,14 +9,14 @@
min-width: 10px;
padding: 3px 7px;
font-size: @font-size-small;
font-weight: bold;
font-weight: @badge-font-weight;
color: @badge-color;
line-height: 1;
line-height: @badge-line-height;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
background-color: @badge-bg;
border-radius: 10px;
border-radius: @badge-border-radius;
// Empty labels/badges collapse
&:empty {
......
less/button-groups.less
View file @ 402dbfb6
......@@ -3,11 +3,32 @@
// --------------------------------------------------
// Button carets
.btn .caret {
border-top-color: @btn-default-color;
//
// Match the button text color to the arrow/caret for indicating dropdown-ness.
.caret {
.btn-default & {
border-top-color: @btn-default-color;
}
.btn-primary &,
.btn-success &,
.btn-warning &,
.btn-danger &,
.btn-info & {
border-top-color: #fff;
}
}
.dropup .btn .caret {
border-bottom-color: @btn-default-color;
.dropup .caret {
.btn-default & {
border-bottom-color: @btn-default-color;
}
.btn-primary &,
.btn-success &,
.btn-warning &,
.btn-danger &,
.btn-info & {
border-bottom-color: #fff;
}
}
// Make the div behave like a button
......@@ -22,9 +43,14 @@
// Bring the "active" button to the front
&:hover,
&:focus,
&:active {
&:active,
&.active {
z-index: 2;
}
&:focus {
// Remove focus outline when dropdown JS adds it after closing the menu
outline: none;
}
}
}
......@@ -100,7 +126,7 @@
padding-left: 8px;
padding-right: 8px;
}
.btn-group > .btn-large + .dropdown-toggle {
.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
......@@ -117,12 +143,12 @@
margin-left: 0;
}
// Carets in other button sizes
.btn-large .caret {
border-width: 5px;
.btn-lg .caret {
border-width: @caret-width-large;
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
border-bottom-width: 5px;
.dropup .btn-lg .caret {
border-bottom-width: @caret-width-large;
}
......@@ -142,10 +168,10 @@
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child {
&:first-child:not(:last-child) {
.border-bottom-radius(0);
}
&:last-child {
&:last-child:not(:first-child) {
.border-top-radius(0);
}
}
......@@ -157,6 +183,7 @@
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
.btn {
float: none;
display: table-cell;
......
less/buttons.less
View file @ 402dbfb6
......@@ -12,7 +12,7 @@
padding: @padding-base-vertical @padding-base-horizontal;
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
font-weight: 500;
font-weight: @btn-font-weight;
line-height: @line-height-base;
text-align: center;
vertical-align: middle;
......@@ -28,7 +28,7 @@
&:hover,
&:focus {
color: @btn-hover-color;
color: @btn-default-color;
text-decoration: none;
}
......@@ -54,26 +54,26 @@
// --------------------------------------------------
.btn-default {
.btn-pseudo-states(@btn-default-color, @btn-default-bg, @btn-default-border);
.btn-pseudo-states(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-primary {
.btn-pseudo-states(@btn-primary-color, @btn-primary-bg, @btn-primary-border);
.btn-pseudo-states(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Warning appears as orange
.btn-warning {
.btn-pseudo-states(@btn-warning-color, @btn-warning-bg, @btn-warning-border);
.btn-pseudo-states(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.btn-danger {
.btn-pseudo-states(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
.btn-pseudo-states(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}
// Success appears as green
.btn-success {
.btn-pseudo-states(@btn-success-color, @btn-success-bg, @btn-success-border);
.btn-pseudo-states(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.btn-info {
.btn-pseudo-states(@btn-info-color, @btn-info-bg, @btn-info-border);
.btn-pseudo-states(@btn-info-color; @btn-info-bg; @btn-info-border);
}
......@@ -110,7 +110,7 @@
fieldset[disabled] & {
&:hover,
&:focus {
color: @gray-dark;
color: @btn-link-disabled-color;
text-decoration: none;
}
}
......@@ -120,19 +120,20 @@
// Button Sizes
// --------------------------------------------------
.btn-large {
.btn-lg {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large; // ensure even-numbered height of button next to large input
border-radius: @border-radius-large;
}
.btn-small,
.btn-mini {
.btn-sm,
.btn-xs {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: 1.5; // ensure proper height of button next to small input
line-height: @line-height-small; // ensure proper height of button next to small input
border-radius: @border-radius-small;
}
.btn-mini {
.btn-xs {
padding: 3px 5px;
}
......
less/carousel.less
View file @ 402dbfb6
......@@ -69,9 +69,9 @@
top: 0;
left: 0;
bottom: 0;
width: 15%;
.opacity(.5);
font-size: 20px;
width: @carousel-control-width;
.opacity(@carousel-control-opacity);
font-size: @carousel-control-font-size;
color: @carousel-control-color;
text-align: center;
text-shadow: @carousel-text-shadow;
......@@ -81,13 +81,11 @@
// Set gradients for backgrounds
&.left {
#gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
background-color: transparent;
}
&.right {
left: auto;
right: 0;
#gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
background-color: transparent;
}
// Hover/focus state
......@@ -127,14 +125,17 @@
}
// Optional indicator pips
// -----------------------------
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.
.carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
z-index: 15;
width: 120px;
margin-left: -60px;
width: 60%;
margin-left: -30%;
padding-left: 0;
list-style: none;
text-align: center;
......
less/close.less
View file @ 402dbfb6
......@@ -6,7 +6,7 @@
.close {
float: right;
font-size: (@font-size-base * 1.5);
font-weight: bold;
font-weight: @close-font-weight;
line-height: 1;
color: @close-color;
text-shadow: @close-text-shadow;
......
less/dropdowns.less
View file @ 402dbfb6
......@@ -11,12 +11,18 @@
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid @dropdown-caret-color;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top: @caret-width-base solid @dropdown-caret-color;
border-right: @caret-width-base solid transparent;
border-left: @caret-width-base solid transparent;
content: "";
}
// The dropdown wrapper (div)
// --------------------------
.dropdown {
position: relative;
}
// The dropdown menu (ul)
// ----------------------
.dropdown-menu {
......@@ -68,6 +74,7 @@
text-decoration: none;
color: @dropdown-link-hover-color;
#gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
background-color: darken(@dropdown-link-hover-bg, 5%);
}
}
......@@ -81,6 +88,7 @@
text-decoration: none;
outline: 0;
#gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
background-color: darken(@dropdown-link-active-bg, 5%);
}
}
......
less/forms.less
View file @ 402dbfb6
......@@ -129,11 +129,8 @@ input[type="number"] {
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
.transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
&:focus {
border-color: rgba(82,168,236,.8);
outline: 0;
.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
}
// Customize the `:focus` state to imitate native WebKit styles.
.form-control-focus();
// Disabled and read-only inputs
// Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
......@@ -218,32 +215,34 @@ input[type="number"] {
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
.input-large {
.input-lg {
height: @input-height-large;
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
line-height: @line-height-large;
border-radius: @border-radius-large;
}
.input-small {
.input-sm {
height: @input-height-small;
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
line-height: @line-height-small;
border-radius: @border-radius-small;
}
select {
&.input-large {
&.input-lg {
height: @input-height-large;
line-height: @input-height-large;
}
&.input-small {
&.input-sm {
height: @input-height-small;
line-height: @input-height-small;
}
}
textarea {
&.input-large,
&.input-small {
&.input-lg,
&.input-sm {
height: auto;
}
}
......@@ -255,15 +254,26 @@ textarea {
// Warning
.has-warning {
.form-control-validation(@state-warning-text, @state-warning-text, @state-warning-bg);
.form-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
}
// Error
.has-error {
.form-control-validation(@state-danger-text, @state-danger-text, @state-danger-bg);
.form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
}
// Success
.has-success {
.form-control-validation(@state-success-text, @state-success-text, @state-success-bg);
.form-control-validation(@state-success-text; @state-success-text; @state-success-bg);
}
// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.
.form-control-static {
margin-bottom: 0; // Remove default margin from `p`
padding-top: @padding-base-vertical;
}
......@@ -278,3 +288,57 @@ textarea {
margin-bottom: 10px;
color: lighten(@text-color, 25%); // lighten the text some for contrast
}
// Inline forms
//
// Make forms appear inline(-block).
.form-inline {
.form-control,
.radio,
.checkbox {
display: inline-block;
}
// Remove default margin on radios/checkboxes that were used for stacking, and
// then undo the floating of radios and checkboxes to match (which also avoids
// a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969).
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
float: none;
margin-left: 0;
}
}
// Horizontal forms
//
// Horizontal forms are built on grid classes and allow you to create forms with
// labels on the left and inputs on the right.
.form-horizontal .control-label,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
padding-top: @padding-base-vertical;
}
.form-horizontal {
.form-group {
.make-row();
}
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
.form-horizontal .control-label {
text-align: right;
}
}
less/grid.less
View file @ 402dbfb6
......@@ -63,7 +63,7 @@
// Container and grid column sizing
//
// Tiny device columns (smartphones)
// Extra small device columns (smartphones)
.col-1,
.col-2,
.col-3,
......@@ -92,7 +92,7 @@
.col-12 { width: 100%; }
// Small device columns (phones to tablets)
@media (min-width: @screen-tablet) {
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
.container {
max-width: @container-tablet;
}
......@@ -125,29 +125,42 @@
.col-sm-12 { width: 100%; }
// Push and pull columns for source order changes
.col-push-1 { left: percentage((1 / @grid-columns)); }
.col-push-2 { left: percentage((2 / @grid-columns)); }
.col-push-3 { left: percentage((3 / @grid-columns)); }
.col-push-4 { left: percentage((4 / @grid-columns)); }
.col-push-5 { left: percentage((5 / @grid-columns)); }
.col-push-6 { left: percentage((6 / @grid-columns)); }
.col-push-7 { left: percentage((7 / @grid-columns)); }
.col-push-8 { left: percentage((8 / @grid-columns)); }
.col-push-9 { left: percentage((9 / @grid-columns)); }
.col-push-10 { left: percentage((10/ @grid-columns)); }
.col-push-11 { left: percentage((11/ @grid-columns)); }
.col-pull-1 { right: percentage((1 / @grid-columns)); }
.col-pull-2 { right: percentage((2 / @grid-columns)); }
.col-pull-3 { right: percentage((3 / @grid-columns)); }
.col-pull-4 { right: percentage((4 / @grid-columns)); }
.col-pull-5 { right: percentage((5 / @grid-columns)); }
.col-pull-6 { right: percentage((6 / @grid-columns)); }
.col-pull-7 { right: percentage((7 / @grid-columns)); }
.col-pull-8 { right: percentage((8 / @grid-columns)); }
.col-pull-9 { right: percentage((9 / @grid-columns)); }
.col-pull-10 { right: percentage((10/ @grid-columns)); }
.col-pull-11 { right: percentage((11/ @grid-columns)); }
.col-sm-push-1 { left: percentage((1 / @grid-columns)); }
.col-sm-push-2 { left: percentage((2 / @grid-columns)); }
.col-sm-push-3 { left: percentage((3 / @grid-columns)); }
.col-sm-push-4 { left: percentage((4 / @grid-columns)); }
.col-sm-push-5 { left: percentage((5 / @grid-columns)); }
.col-sm-push-6 { left: percentage((6 / @grid-columns)); }
.col-sm-push-7 { left: percentage((7 / @grid-columns)); }
.col-sm-push-8 { left: percentage((8 / @grid-columns)); }
.col-sm-push-9 { left: percentage((9 / @grid-columns)); }
.col-sm-push-10 { left: percentage((10/ @grid-columns)); }
.col-sm-push-11 { left: percentage((11/ @grid-columns)); }
.col-sm-pull-1 { right: percentage((1 / @grid-columns)); }
.col-sm-pull-2 { right: percentage((2 / @grid-columns)); }
.col-sm-pull-3 { right: percentage((3 / @grid-columns)); }
.col-sm-pull-4 { right: percentage((4 / @grid-columns)); }
.col-sm-pull-5 { right: percentage((5 / @grid-columns)); }
.col-sm-pull-6 { right: percentage((6 / @grid-columns)); }
.col-sm-pull-7 { right: percentage((7 / @grid-columns)); }
.col-sm-pull-8 { right: percentage((8 / @grid-columns)); }
.col-sm-pull-9 { right: percentage((9 / @grid-columns)); }
.col-sm-pull-10 { right: percentage((10/ @grid-columns)); }
.col-sm-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Medium and large device columns (desktop and up)
......@@ -182,18 +195,43 @@
.col-lg-11 { width: percentage((11/ @grid-columns)); }
.col-lg-12 { width: 100%; }
// Push and pull columns for source order changes
.col-lg-push-1 { left: percentage((1 / @grid-columns)); }
.col-lg-push-2 { left: percentage((2 / @grid-columns)); }
.col-lg-push-3 { left: percentage((3 / @grid-columns)); }
.col-lg-push-4 { left: percentage((4 / @grid-columns)); }
.col-lg-push-5 { left: percentage((5 / @grid-columns)); }
.col-lg-push-6 { left: percentage((6 / @grid-columns)); }
.col-lg-push-7 { left: percentage((7 / @grid-columns)); }
.col-lg-push-8 { left: percentage((8 / @grid-columns)); }
.col-lg-push-9 { left: percentage((9 / @grid-columns)); }
.col-lg-push-10 { left: percentage((10/ @grid-columns)); }
.col-lg-push-11 { left: percentage((11/ @grid-columns)); }
.col-lg-pull-1 { right: percentage((1 / @grid-columns)); }
.col-lg-pull-2 { right: percentage((2 / @grid-columns)); }
.col-lg-pull-3 { right: percentage((3 / @grid-columns)); }
.col-lg-pull-4 { right: percentage((4 / @grid-columns)); }
.col-lg-pull-5 { right: percentage((5 / @grid-columns)); }
.col-lg-pull-6 { right: percentage((6 / @grid-columns)); }
.col-lg-pull-7 { right: percentage((7 / @grid-columns)); }
.col-lg-pull-8 { right: percentage((8 / @grid-columns)); }
.col-lg-pull-9 { right: percentage((9 / @grid-columns)); }
.col-lg-pull-10 { right: percentage((10/ @grid-columns)); }
.col-lg-pull-11 { right: percentage((11/ @grid-columns)); }
// Offsets
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
.col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); }
.col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); }
.col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); }
.col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); }
.col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); }
.col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); }
.col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); }
.col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); }
.col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); }
.col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); }
.col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); }
}
// Large desktops and up
......
less/input-groups.less
View file @ 402dbfb6
......@@ -5,6 +5,7 @@
// Base styles
// -------------------------
.input-group {
position: relative; // For dropdowns
display: table;
border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
......@@ -43,23 +44,22 @@
// Text input groups
// -------------------------
.input-group-addon {
.box-sizing(border-box);
padding: @padding-base-vertical @padding-base-horizontal;
font-size: @font-size-base;
font-weight: normal;
line-height: @line-height-base;
line-height: 1;
text-align: center;
background-color: @gray-lighter;
border: 1px solid @input-group-addon-border-color;
border-radius: @border-radius-base;
// Sizing
&.input-small {
&.input-sm {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
border-radius: @border-radius-small;
}
&.input-large {
&.input-lg {
padding: @padding-large-vertical @padding-large-horizontal;
font-size: @font-size-large;
border-radius: @border-radius-large;
......@@ -112,42 +112,3 @@
z-index: 2;
}
}
// Inline forms
// --------------------------------------------------
.form-inline {
.form-control,
.radio,
.checkbox {
display: inline-block;
}
.radio,
.checkbox {
margin-top: 0;
margin-bottom: 0;
}
}
// Horizontal forms
// --------------------------------------------------
// Horizontal forms are built on grid classes.
.form-horizontal .control-label {
padding-top: 9px;
}
.form-horizontal {
.form-group {
.make-row();
}
}
// Only right align form labels here when the columns stop stacking
@media (min-width: @screen-tablet) {
.form-horizontal .control-label {
text-align: right;
}
}
less/labels.less
View file @ 402dbfb6
......@@ -12,7 +12,6 @@
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: @gray-light;
border-radius: .25em;
// Add hover effects, but only for links
......@@ -22,13 +21,17 @@
color: @label-link-hover-color;
text-decoration: none;
cursor: pointer;
background-color: darken(@gray-light, 10%);
}
}
}
// Colors
// Contextual variations (linked labels get darker on :hover)
.label-default {
.label-variant(@label-default-bg);
}
.label-danger {
.label-variant(@label-danger-bg);
}
......
less/list-group.less
View file @ 402dbfb6
......@@ -37,6 +37,9 @@
float: right;
margin-right: -15px;
}
> .badge + .badge {
margin-right: 0;
}
}
// Custom content options
......
less/mixins.less
View file @ 402dbfb6
This diff is collapsed.
less/modals.less
View file @ 402dbfb6
......@@ -29,7 +29,7 @@
.translate(0, -25%);
.transition-transform(~"0.3s ease-out");
}
&.fade.in .modal-dialog { .translate(0, 0)}
&.in .modal-dialog { .translate(0, 0)}
}
// Shell div to position the modal with bottom padding
......@@ -65,7 +65,7 @@
background-color: @modal-backdrop-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.fade.in { .opacity(.5); }
&.in { .opacity(.5); }
}
// Modal header
......
less/navbar.less
View file @ 402dbfb6
......@@ -10,7 +10,7 @@
padding-left: @navbar-padding-horizontal;
padding-right: @navbar-padding-horizontal;
background-color: @navbar-bg;
border-radius: @border-radius-base;
border-radius: @navbar-border-radius;
// Prevent floats from breaking the navbar
.clearfix();
......@@ -20,15 +20,13 @@
// -------------------------
.navbar-nav {
// Space out from .navbar .brand and .btn-navbar when stacked in mobile views
margin-top: 10px;
margin-bottom: 15px;
> li > a {
padding-top: ((@navbar-height - @line-height-computed) / 2);
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
color: @navbar-link-color;
line-height: 20px;
line-height: @line-height-computed;
border-radius: @border-radius-base;
&:hover,
&:focus {
......@@ -88,6 +86,39 @@
margin-bottom: 0; // override .navbar defaults
}
.nav-collapse {
// Space out collapsed contents within the mobile navbar
padding-bottom: @navbar-padding-vertical;
// Clear floated elements and prevent collapsing of padding
.clearfix();
// When there is no `.navbar-brand` present (which normally sits between the
// navbar brand and toggle), prevent the nav from overlapping the toggle.
.navbar-toggle + & {
width: 100%;
margin-top: @navbar-height;
}
}
// Scrollable navbar navigation
//
// Sometimes you might have too many links in your fixed navbar and you need to
// maintain access to all that content. To help, add `.nav-collapse-scrollable`
// to your `.nav-collapse` to prevent the the content from flowing past the max-
// height of your browser.
//
// This is not automatically added to the `.navbar-fixed-top` because it causes
// z-index bugs in iOS7 (possibly earlier).
@media (max-width: @screen-small) {
.nav-collapse-scrollable {
margin-bottom: @navbar-padding-vertical;
max-height: 360px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
}
//
......@@ -116,12 +147,12 @@
// Collapsible navbar toggle
.navbar-toggle {
position: absolute;
top: floor((@navbar-height - 32) / 2);
right: 10px;
position: relative;
float: right;
height: 34px;
width: 48px;
height: 32px;
padding: 8px 12px;
.navbar-vertical-align(34px);
padding: @padding-base-vertical @padding-base-horizontal;
background-color: transparent;
border: 1px solid @navbar-toggle-border-color;
border-radius: @border-radius-base;
......@@ -302,6 +333,7 @@
float: left;
margin-left: -(@navbar-padding-horizontal);
margin-right: 5px;
max-width: none; // Disables the default mobile setting
}
.navbar-nav {
float: left;
......@@ -317,7 +349,6 @@
}
&.pull-right {
float: right;
width: auto;
}
}
......@@ -332,6 +363,7 @@
.nav-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
......@@ -354,6 +386,8 @@
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
float: left;
padding: 0 @navbar-padding-horizontal;
.navbar-vertical-align(@line-height-computed);
}
......
less/navs.less
View file @ 402dbfb6
......@@ -56,12 +56,6 @@
}
}
// Redeclare pull classes because of specificity
// Todo: consider making these utilities !important to avoid this bullshit
> .pull-right {
float: right;
}
// Dividers (basically an hr) within the dropdown
.nav-divider {
.nav-divider();
......@@ -69,40 +63,6 @@
}
// Nav variations
// --------------------------------------------------
// Justified nav links
// -------------------------
.nav-justified {
width: 100%;
> li {
float: none;
display: table-cell;
width: 1%;
> a {
text-align: center;
}
}
}
// Move borders to anchors instead of bottom of list
.nav-tabs-justified {
border-bottom: 0;
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
// Override margin from .nav-tabs
margin-right: 0;
}
> .active > a {
border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
}
// Tabs
// -------------------------
......@@ -185,6 +145,39 @@
}
// Nav variations
// --------------------------------------------------
// Justified nav links
// -------------------------
.nav-justified {
width: 100%;
> li {
float: none;
display: table-cell;
width: 1%;
> a {
text-align: center;
}
}
}
// Move borders to anchors instead of bottom of list
.nav-tabs-justified {
border-bottom: 0;
> li > a {
border-bottom: 1px solid @nav-tabs-justified-link-border-color;
// Override margin from .nav-tabs
margin-right: 0;
}
> .active > a {
border-bottom-color: @nav-tabs-justified-active-link-border-color;
}
}
// Tabbable tabs
// -------------------------
......
less/pagination.less
View file @ 402dbfb6
......@@ -12,7 +12,7 @@
> a,
> span {
float: left; // Collapse white-space
padding: 4px 12px;
padding: @padding-base-vertical @padding-base-horizontal;
line-height: @line-height-base;
text-decoration: none;
background-color: @pagination-bg;
......@@ -62,7 +62,7 @@
// --------------------------------------------------
// Large
.pagination-large {
.pagination-lg {
> li {
> a,
> span {
......@@ -85,7 +85,7 @@
}
// Small
.pagination-small {
.pagination-sm {
> li {
> a,
> span {
......
less/panels.less
View file @ 402dbfb6
......@@ -11,6 +11,24 @@
border: 1px solid @panel-border;
border-radius: @panel-border-radius;
.box-shadow(0 1px 1px rgba(0,0,0,.05));
// List groups in panels
.list-group {
margin: 15px -15px -15px;
.list-group-item {
border-width: 1px 0;
// Remove border radius for top one
&:first-child {
.border-top-radius(0);
}
// But keep it for the last one
&:last-child {
border-bottom: 0;
}
}
}
}
// Optional heading
......@@ -29,6 +47,9 @@
margin-bottom: 0;
font-size: (@font-size-base * 1.25);
font-weight: 500;
> a {
color: inherit;
}
}
// Optional footer (stays gray in every modifier class)
......@@ -82,21 +103,3 @@
border-color: @panel-info-border;
}
}
// List groups in panels
.list-group-flush {
margin: 15px -15px -15px;
.list-group-item {
border-width: 1px 0;
// Remove border radius for top one
&:first-child {
.border-top-radius(0);
}
// But keep it for the last one
&:last-child {
border-bottom: 0;
}
}
}
less/progress-bars.less
View file @ 402dbfb6
......@@ -18,19 +18,13 @@
to { background-position: 0 0; }
}
// IE9
@-ms-keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
}
// Opera
@-o-keyframes progress-bar-stripes {
from { background-position: 0 0; }
to { background-position: 40px 0; }
}
// Spec
// Spec and IE10+
@keyframes progress-bar-stripes {
from { background-position: 40px 0; }
to { background-position: 0 0; }
......
less/tables.less
View file @ 402dbfb6
......@@ -162,7 +162,7 @@ table {
> th.active,
&.active > td,
&.active > th {
background-color: @table-bg-hover;
background-color: @table-bg-active;
}
> td.success,
> th.success,
......
less/tooltip.less
View file @ 402dbfb6
......@@ -13,7 +13,7 @@
line-height: 1.4;
.opacity(0);
&.in { .opacity(1); }
&.in { .opacity(.9); }
&.top { margin-top: -3px; padding: 5px 0; }
&.right { margin-left: 3px; padding: 0 5px; }
&.bottom { margin-top: 3px; padding: 5px 0; }
......
less/type.less
View file @ 402dbfb6
......@@ -141,18 +141,25 @@ dt {
dd {
margin-left: 0; // Undo browser default
}
// Horizontal layout (like forms)
.dl-horizontal {
dt {
float: left;
width: (@component-offset-horizontal - 20);
clear: left;
text-align: right;
.text-overflow();
}
dd {
.clearfix(); // Clear the floated `dt` if an empty `dd` is present
margin-left: @component-offset-horizontal;
// Horizontal description lists
//
// Defaults to being stacked without any of the below styles applied, until the
// grid breakpoint is reached (default of ~768px).
@media (min-width: @grid-float-breakpoint) {
.dl-horizontal {
dt {
float: left;
width: (@component-offset-horizontal - 20);
clear: left;
text-align: right;
.text-overflow();
}
dd {
margin-left: @component-offset-horizontal;
.clearfix(); // Clear the floated `dt` if an empty `dd` is present
}
}
}
......@@ -195,7 +202,6 @@ blockquote {
// Float right with text-align: right
&.pull-right {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid @blockquote-border-color;
......
less/utilities.less
View file @ 402dbfb6
......@@ -10,10 +10,10 @@
.clearfix();
}
.pull-right {
float: right;
float: right !important;
}
.pull-left {
float: left;
float: left !important;
}
......
less/variables.less
View file @ 402dbfb6
This diff is collapsed.
less/wells.less
View file @ 402dbfb6
......@@ -19,11 +19,11 @@
}
// Sizes
.well-large {
.well-lg {
padding: 24px;
border-radius: @border-radius-large;
}
.well-small {
.well-sm {
padding: 9px;
border-radius: @border-radius-small;
}
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