diff --git a/.gitignore b/.gitignore index afa0159a6..218ceb9f3 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ # Ignore compiled docs _gh_pages +_site # Numerous always-ignore extensions *.diff diff --git a/CHANGELOG.md b/CHANGELOG.md index f33f97937..c7609beab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -196,7 +196,7 @@ Running makefile now require JSHint and Recess. - Add jshint support - Add travis-ci support w/ headless phantom integration -- Replace UA sniffing in bootstrap-transitions.js +- Replace UA sniffing in transitions.js - Add MSTransitionEnd event to transition plugin - Fix pause method in carousel (shouldn't restart when hovering over controls) - Fix crazy opera bug #1776 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 463bfca78..43c716180 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -23,12 +23,6 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso -## Notes on the repo - -As of v2.0.0, Bootstrap's documentation is powered by Mustache templates and built via `make` before each commit and release. This was done to enable internationalization (translation) in a future release by uploading our strings to the [Twitter Translation Center](http://translate.twttr.com/). Any edits to the docs should be first done in the Mustache files and then recompiled into the HTML. - - - ## Pull requests - Try to submit pull requests against the latest `*-wip` branch for easier merging @@ -40,16 +34,16 @@ As of v2.0.0, Bootstrap's documentation is powered by Mustache templates and bui -## Coding standards: HTML +## Coding standards + +### HTML - Two spaces for indentation, never tabs - Double quotes only, never single quotes - Always use proper indentation - Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags) - - -## Coding standards: CSS +### CSS - Adhere to the [Recess CSS property order](http://markdotto.com/2011/11/29/css-property-order/) - Multiple-line approach (one property and value per line) @@ -58,9 +52,7 @@ As of v2.0.0, Bootstrap's documentation is powered by Mustache templates and bui - For multiple, comma-separated selectors, place each selector on it's 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). - - -## Coding standards: JS +### JS - No semicolons - Comma first diff --git a/Makefile b/Makefile index 7c95b1900..40f5a44f0 100644 --- a/Makefile +++ b/Makefile @@ -23,11 +23,10 @@ build: @echo " ${CHECK}" @printf "Prepping documentation assets..." @cp fonts/* docs/assets/fonts/ - @cp js/*.js docs/assets/js/ @cp js/tests/vendor/jquery.js docs/assets/js/ @echo " ${CHECK}" @printf "Compiling and minifying JavaScript..." - @cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > docs/assets/js/bootstrap.js + @cat 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 > docs/assets/js/bootstrap.js @uglifyjs -nc docs/assets/js/bootstrap.js > docs/assets/js/bootstrap.min.tmp.js @echo "/**\n* Bootstrap.js v3.0.0 by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > docs/assets/js/copyright.js @cat docs/assets/js/copyright.js docs/assets/js/bootstrap.min.tmp.js > docs/assets/js/bootstrap.min.js @@ -72,14 +71,14 @@ bootstrap-js: bootstrap/js/*.js bootstrap/js/*.js: js/*.js mkdir -p bootstrap/js - cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js js/bootstrap-affix.js > bootstrap/js/bootstrap.js + cat 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 > bootstrap/js/bootstrap.js uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.tmp.js echo "/*!\n* Bootstrap.js by @fat & @mdo\n* Copyright 2012 Twitter, Inc.\n* http://www.apache.org/licenses/LICENSE-2.0.txt\n*/" > bootstrap/js/copyright.js cat bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js > bootstrap/js/bootstrap.min.js rm bootstrap/js/copyright.js bootstrap/js/bootstrap.min.tmp.js # -# CSS COMPLILE +# CSS COMPILE # bootstrap-css: bootstrap/css/*.css @@ -100,18 +99,6 @@ bootstrap/fonts/*: fonts/* cp fonts/* bootstrap/fonts/ -# -# MAKE FOR GH-PAGES 4 FAT & MDO ONLY (O_O ) -# - -gh-pages: bootstrap docs - rm -f docs/assets/bootstrap.zip - zip -r docs/assets/bootstrap.zip bootstrap - rm -r bootstrap - rm -f ../bootstrap-gh-pages/assets/bootstrap.zip - node docs/build production - cp -r docs/* ../bootstrap-gh-pages - # # WATCH LESS FILES # @@ -120,5 +107,11 @@ watch: echo "Watching less files..."; \ watchr -e "watch('less/.*\.less') { system 'make' }" +# +# BUILD AND START SERVER +# + +run: build + jekyll build && jekyll server .PHONY: docs watch gh-pages bootstrap-img bootstrap-css bootstrap-js diff --git a/README.md b/README.md index 7579d3a99..ae96923cf 100644 --- a/README.md +++ b/README.md @@ -12,18 +12,9 @@ Three quick start options are available: * [Download the latest release](https://github.com/twitter/bootstrap/zipball/master). * Clone the repo: `git clone git://github.com/twitter/bootstrap.git`. -* Install with Twitter's [Bower](http://github.com/bower/bower): `bower install bootstrap`. +* Install with [Bower](http://bower.io): `bower install bootstrap`. -Read the [Getting Started page](http://getbootstrap.com/getting-started/) for information on the framework contents, basic template guidelines, and more. - - -## Bootstrap elsewhere - -Beyond getting started with the Bootstrap core, there are ways to use Bootstrap in other tools and services: - -* [Roots WordPress theme](https://github.com/retlehs/roots) - A WordPress starter theme based on HTML5 Boilerplate & Bootstrap from Twitter. - -Have suggestions? Let us know with a [new issue](https://github.com/twitter/bootstrap/issues). +Read the [Getting Started page](http://getbootstrap.com/getting-started/) for information on the framework contents, templates and examples, and more. @@ -35,21 +26,35 @@ Have a bug or a feature request? [Please open a new issue](https://github.com/tw ## Documentation -Bootstrap's docs are built using [Jekyll](http://jekyllrb.com) and hosted on GitHub Pages at [http://getbootstrap.com](http://getbootstrap.com). To view our docs locally, you'll need to [install Jekyll](https://github.com/mojombo/jekyll/wiki/install) to run a local server. +Bootstrap's documentation, included in this repo in the `/docs` directory, is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at [http://getbootstrap.com](http://getbootstrap.com). The docs maybe also be run locally. -Documentation for [previous versions](https://github.com/twitter/bootstrap/tags) is also available via tags. +### Running documentation locally + +1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation). +2. From the `/bootstrap` directory, run `jekyll serve` in the command line. +3. Open [http://getbootstrap.dev:9001](http://getbootstrap.dev:9001) in your browser, and voilĂ . + +Learn more about using Jekyll by reading their [documentation](http://jekyllrb.com/docs/home/). + +### Documentation for previous releases + +Documentation for v2.3.2 has been made available for the time being at [http://getbootstrap.com/2.3.2/docs](http://getbootstrap.com/2.3.2/docs) while folks transition to Bootstrap 3. + +For previous releases, documentation is available for [download via Git tags](https://github.com/twitter/bootstrap/tags). ## Compiling CSS and JavaScript -Bootstrap includes a [makefile](Makefile) with convenient methods for working with the framework. Before getting started, be sure to install [the necessary local dependencies](package.json): +Bootstrap includes a [makefile](Makefile) with convenient methods for working with the framework. Before getting started, install [the necessary local dependencies](package.json): ``` $ npm install ``` -When completed, you'll be able to run the various make commands provided: +When completed, you'll be able to run the various make commands provided. + +### Available makefile commands #### Build - `make` `make` runs the Recess compiler to rebuild the `/less` files and compile the docs. **Requires recess and uglify-js.** @@ -63,15 +68,19 @@ Runs jshint and qunit tests headlessly in [phantomjs](http://code.google.com/p/p #### Watch - `make watch` This is a convenience method for watching just Less files and automatically building them whenever you save. **Requires the watchr gem.** -Should you encounter problems with installing dependencies or running the makefile commands, uninstall any previous versions (global and local) you may have installed, and then rerun `npm install`. +### Troubleshooting dependencies + +Should you encounter problems with installing dependencies or running makefile commands, uninstall all previous dependency versions (global and local). Then, rerun `npm install`. ## Contributing -Please submit all pull requests against *-wip branches. If your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo). +Please read through our guidelines for contributing to Bootstrap. Included are directions for opening issues, coding standards, and notes on development. -Editor preferences are also available in the [editor config](.editorconfig) for easy application in common text editors. Read more and download plugins at [http://editorconfig.com](http://editorconfig.com). +More over, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the [Code Guide](http://github.com/mdo/code-guide), maintained by [Mark Otto](http://github.com/mdo). + +Editor preferences are available in the [editor config](.editorconfig) for easy use in common text editors. Read more and download plugins at [http://editorconfig.com](http://editorconfig.com). diff --git a/_config.yml b/_config.yml index 57a28e0a7..d99935872 100644 --- a/_config.yml +++ b/_config.yml @@ -8,5 +8,5 @@ permalink: pretty # Server source: ./docs destination: ./_gh_pages -url: http://bootstrap.dev:9001 -server_port: 9001 +port: 9001 +url: http://getbootstrap.dev:9001 diff --git a/docs/_includes/colophon.html b/docs/_includes/colophon.html index 5018113b4..fa7958ef8 100644 --- a/docs/_includes/colophon.html +++ b/docs/_includes/colophon.html @@ -1,35 +1,16 @@ - diff --git a/docs/_includes/docs-nav.html b/docs/_includes/docs-nav.html deleted file mode 100644 index 2c001a3f4..000000000 --- a/docs/_includes/docs-nav.html +++ /dev/null @@ -1,226 +0,0 @@ -
- -
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 048f31359..fcfc7c482 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -2,19 +2,7 @@ ================================================== --> - - - - - - - - - - - - - + diff --git a/docs/_includes/nav-components.html b/docs/_includes/nav-components.html new file mode 100644 index 000000000..4f49d68b2 --- /dev/null +++ b/docs/_includes/nav-components.html @@ -0,0 +1,122 @@ +
  • + Glyphicons + +
  • +
  • + Dropdowns + +
  • +
  • + Button groups + +
  • +
  • + Button dropdowns + +
  • +
  • + Navs + +
  • +
  • + Navbar + +
  • +
  • Breadcrumbs
  • +
  • + Pagination + +
  • +
  • Labels
  • +
  • Badges
  • +
  • + Typography + +
  • +
  • Thumbnails
  • +
  • + Alerts + +
  • +
  • + Progress bars + +
  • +
  • Media object
  • +
  • + List group + +
  • +
  • + Panels + +
  • +
  • Wells
  • diff --git a/docs/_includes/nav-css.html b/docs/_includes/nav-css.html new file mode 100644 index 000000000..437b2e3bd --- /dev/null +++ b/docs/_includes/nav-css.html @@ -0,0 +1,71 @@ +
  • + Overview + +
  • +
  • + Grid system + +
  • +
  • + Typography + +
  • +
  • Code
  • +
  • + Tables + +
  • +
  • + Forms + +
  • +
  • + Buttons + +
  • +
  • Images
  • +
  • Helper classes
  • +
  • Responsive utilities
  • diff --git a/docs/_includes/nav-customize.html b/docs/_includes/nav-customize.html new file mode 100644 index 000000000..38c96d543 --- /dev/null +++ b/docs/_includes/nav-customize.html @@ -0,0 +1,32 @@ +
  • + LESS components +
  • +
  • + jQuery plugins +
  • +
  • + LESS variables + +
  • +
  • + Download +
  • \ No newline at end of file diff --git a/docs/_includes/nav-getting-started.html b/docs/_includes/nav-getting-started.html new file mode 100644 index 000000000..fd6f8c98b --- /dev/null +++ b/docs/_includes/nav-getting-started.html @@ -0,0 +1,20 @@ +
  • + Download Bootstrap + +
  • +
  • + What's included +
  • +
  • + Templates and examples + +
  • +
  • + Customizing Bootstrap +
  • \ No newline at end of file diff --git a/docs/_includes/nav-javascript.html b/docs/_includes/nav-javascript.html new file mode 100644 index 000000000..9422b27fb --- /dev/null +++ b/docs/_includes/nav-javascript.html @@ -0,0 +1,28 @@ +
  • + Overview + +
  • +
  • Transitions
  • +
  • + Modal + +
  • +
  • Dropdown
  • +
  • Scrollspy
  • +
  • Tab
  • +
  • Tooltip
  • +
  • Popover
  • +
  • Alert
  • +
  • Button
  • +
  • Collapse
  • +
  • Carousel
  • +
  • Affix
  • diff --git a/docs/_includes/nav-main.html b/docs/_includes/nav-main.html new file mode 100644 index 000000000..fceeb7a86 --- /dev/null +++ b/docs/_includes/nav-main.html @@ -0,0 +1,29 @@ + diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html deleted file mode 100644 index 5e6c5ae63..000000000 --- a/docs/_includes/navbar.html +++ /dev/null @@ -1,34 +0,0 @@ - - diff --git a/docs/_includes/social-buttons.html b/docs/_includes/social-buttons.html new file mode 100644 index 000000000..5cef71a19 --- /dev/null +++ b/docs/_includes/social-buttons.html @@ -0,0 +1,16 @@ +
    + +
    diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 8015c1587..d7d49e1b6 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -5,13 +5,49 @@ {% include header.html %} - + - - {% include docs-nav.html %} + + {% include nav-main.html %} - - {{ content }} + +
    +
    +

    {{ page.title }}

    +

    {{ page.lead }}

    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + {{ content }} +
    +
    + + + + Back to top + + +
    {% include colophon.html %} diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html index 184936f38..9230184dc 100644 --- a/docs/_layouts/home.html +++ b/docs/_layouts/home.html @@ -7,6 +7,9 @@ + + {% include nav-main.html %} + {{ content }} diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 67b0bd18e..53dcf2edc 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -251,7 +251,7 @@ table { max-width: 100% !important; } @page { - margin: 0.5cm; + margin: 2cm .5cm; } p, h2, @@ -263,7 +263,7 @@ table { h3 { page-break-after: avoid; } - .navbar-toggle { + .navbar { display: none; } } @@ -280,17 +280,10 @@ html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -@media screen and (max-device-width: 480px) { - html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - } -} - body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; - line-height: 20px; + line-height: 1.428571429; color: #333333; background-color: #ffffff; } @@ -422,9 +415,8 @@ h6, .h4, .h5, .h6 { - font-family: inherit; font-weight: 500; - line-height: 20px; + line-height: 1.1; } h1 small, @@ -449,11 +441,6 @@ h2, h3 { margin-top: 20px; margin-bottom: 10px; - line-height: 40px; -} - -h3 { - line-height: 30px; } h4, @@ -465,22 +452,22 @@ h6 { h1, .h1 { - font-size: 38.5px; + font-size: 38px; } h2, .h2 { - font-size: 31.5px; + font-size: 32px; } h3, .h3 { - font-size: 24.5px; + font-size: 24px; } h4, .h4 { - font-size: 17.5px; + font-size: 18px; } h5, @@ -490,24 +477,21 @@ h5, h6, .h6 { - font-size: 11.9px; + font-size: 12px; } h1 small, .h1 small { - font-size: 24.5px; + font-size: 24px; } h2 small, .h2 small { - font-size: 17.5px; + font-size: 18px; } h3 small, -.h3 small { - font-size: 14px; -} - +.h3 small, h4 small, .h4 small { font-size: 14px; @@ -533,7 +517,7 @@ ol ul { } li { - line-height: 20px; + line-height: 1.428571429; } .list-unstyled { @@ -558,7 +542,7 @@ dl { dt, dd { - line-height: 20px; + line-height: 1.428571429; } dt { @@ -640,7 +624,7 @@ blockquote p:last-child { blockquote small { display: block; - line-height: 20px; + line-height: 1.428571429; color: #999999; } @@ -680,7 +664,7 @@ address { display: block; margin-bottom: 20px; font-style: normal; - line-height: 20px; + line-height: 1.428571429; } code, @@ -705,7 +689,7 @@ pre { padding: 9.5px; margin: 0 0 10px; font-size: 13px; - line-height: 20px; + line-height: 1.428571429; word-break: break-all; word-wrap: break-word; white-space: pre; @@ -992,10 +976,6 @@ pre code { .container { max-width: 728px; } - .row { - margin-right: -15px; - margin-left: -15px; - } } @media screen and (min-width: 992px) { @@ -1033,7 +1013,7 @@ th { .table thead > tr > td, .table tbody > tr > td { padding: 8px; - line-height: 20px; + line-height: 1.428571429; vertical-align: top; border-top: 1px solid #dddddd; } @@ -1221,7 +1201,7 @@ legend { padding: 0; margin-bottom: 20px; font-size: 21px; - line-height: 40px; + line-height: inherit; color: #333333; border: 0; border-bottom: 1px solid #e5e5e5; @@ -1249,11 +1229,11 @@ input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { - display: inline-block; - min-height: 34px; - padding: 6px 9px; + display: block; + min-height: 36px; + padding: 8px 12px; font-size: 14px; - line-height: 20px; + line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; @@ -1261,10 +1241,32 @@ input[type="color"] { border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border-color linear 0.2s, box-shadow linear 0.2s; - -moz-transition: border-color linear 0.2s, box-shadow linear 0.2s; - -o-transition: border-color linear 0.2s, box-shadow linear 0.2s; - transition: border-color linear 0.2s, box-shadow linear 0.2s; + -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; +} + +select:focus, +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); } input, @@ -1293,30 +1295,6 @@ textarea { height: auto; } -textarea:focus, -input[type="text"]:focus, -input[type="password"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -input[type="date"]:focus, -input[type="month"]:focus, -input[type="time"]:focus, -input[type="week"]:focus, -input[type="number"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="search"]:focus, -input[type="tel"]:focus, -input[type="color"]:focus { - border-color: rgba(82, 168, 236, 0.8); - outline: 0; - outline: thin dotted \9; - /* IE6-9 */ - - -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6); - box-shadow: 0 0 8px rgba(82, 168, 236, 0.6); -} - input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; @@ -1328,10 +1306,10 @@ input[type="checkbox"] { select, input[type="file"] { - height: 34px; + height: 36px; /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */ - line-height: 34px; + line-height: 36px; } select[multiple], @@ -1339,7 +1317,12 @@ select[size] { height: auto; } -select:focus, +select optgroup { + font-family: inherit; + font-size: inherit; + font-style: inherit; +} + input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { @@ -1373,7 +1356,9 @@ textarea::-webkit-input-placeholder { display: block; min-height: 20px; padding-left: 20px; + margin-top: 10px; margin-bottom: 10px; + vertical-align: middle; } .radio label, @@ -1437,8 +1422,8 @@ input[type="url"].input-large, input[type="search"].input-large, input[type="tel"].input-large, input[type="color"].input-large { - padding: 11px 14px; - font-size: 17.5px; + padding: 14px 16px; + font-size: 18px; border-radius: 6px; } @@ -1458,31 +1443,12 @@ input[type="url"].input-small, input[type="search"].input-small, input[type="tel"].input-small, input[type="color"].input-small { - min-height: 26px; - padding: 2px 10px; - font-size: 11.9px; + min-height: 30px; + padding: 5px 10px; + font-size: 12px; border-radius: 3px; } -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - float: none; - margin-right: 0; - margin-left: 0; -} - -.input-append input[class*="span"], -.input-prepend input[class*="span"] { - display: inline-block; -} - -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - height: 34px; -} - input[disabled], select[disabled], textarea[disabled], @@ -1571,81 +1537,38 @@ select:focus:invalid:focus { box-shadow: 0 0 6px #f8b9b7; } -.form-actions { - padding: 19px 20px 20px; - margin-top: 20px; - margin-bottom: 20px; - background-color: #f5f5f5; - border-top: 1px solid #e5e5e5; -} - -.form-actions:before, -.form-actions:after { - display: table; - content: " "; -} - -.form-actions:after { - clear: both; -} - -.form-actions:before, -.form-actions:after { - display: table; - content: " "; -} - -.form-actions:after { - clear: both; -} - -.help-block, -.help-inline { - color: #737373; -} - .help-block { display: block; + margin-top: 5px; margin-bottom: 10px; -} - -.help-inline { - display: inline-block; - padding-left: 5px; - vertical-align: middle; + color: #737373; } .input-group { display: table; } -.input-group[class*="span"] { +.input-group.col { float: none; - padding: 0; + padding-right: 0; + padding-left: 0; } .input-group input, .input-group select { width: 100%; + margin-bottom: 0; } .input-group-addon, .input-group-btn, .input-group input { display: table-cell; - margin: 0; - border-radius: 0; } -.input-group-addon.input-small, -.input-group-btn.input-small, -.input-group input.input-small { - border-radius: 0; -} - -.input-group-addon.input-large, -.input-group-btn.input-large, -.input-group input.input-large { +.input-group-addon:not(:first-child):not(:last-child), +.input-group-btn:not(:first-child):not(:last-child), +.input-group input:not(:first-child):not(:last-child) { border-radius: 0; } @@ -1656,45 +1579,39 @@ select:focus:invalid:focus { } .input-group-addon { - padding: 6px 8px; + padding: 8px 12px; font-size: 14px; font-weight: normal; - line-height: 20px; + line-height: 1.428571429; text-align: center; text-shadow: 0 1px 0 #fff; background-color: #eeeeee; border: 1px solid #ccc; + border-radius: 4px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .input-group-addon.input-small { - padding: 2px 10px; - font-size: 11.9px; + padding: 5px 10px; + font-size: 12px; + border-radius: 3px; } .input-group-addon.input-large { - padding: 11px 14px; - font-size: 17.5px; + padding: 14px 16px; + font-size: 18px; + border-radius: 6px; } .input-group input:first-child, -.input-group-addon:first-child { - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; -} - -.input-group input:first-child.input-small, -.input-group-addon:first-child.input-small { - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; -} - -.input-group input:first-child.input-large, -.input-group-addon:first-child.input-large { - border-bottom-left-radius: 6px; - border-top-left-radius: 6px; +.input-group-addon:first-child, +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } .input-group-addon:first-child { @@ -1702,21 +1619,12 @@ select:focus:invalid:focus { } .input-group input:last-child, -.input-group-addon:last-child { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; -} - -.input-group input:last-child.input-small, -.input-group-addon:last-child.input-small { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -.input-group input:last-child.input-large, -.input-group-addon:last-child.input-large { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; +.input-group-addon:last-child, +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } .input-group-addon:last-child { @@ -1731,7 +1639,6 @@ select:focus:invalid:focus { .input-group-btn > .btn { position: relative; float: left; - border-radius: 0; } .input-group-btn > .btn + .btn { @@ -1743,94 +1650,46 @@ select:focus:invalid:focus { z-index: 2; } -.input-group-btn:first-child > .btn:first-child, -.input-group-btn:first-child > .dropdown-toggle:first-child { - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; +.form-inline input, +.form-inline select, +.form-inline textarea, +.form-inline .radio, +.form-inline .checkbox { + display: inline-block; } -.input-group-btn:first-child > .btn:first-child.btn-large, -.input-group-btn:first-child > .dropdown-toggle:first-child.btn-large { - border-bottom-left-radius: 6px; - border-top-left-radius: 6px; +.form-inline .radio, +.form-inline .checkbox { + margin-top: 0; + margin-bottom: 0; } -.input-group-btn:first-child > .btn:first-child.btn-small, -.input-group-btn:first-child > .dropdown-toggle:first-child.btn-small { - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; +.form-horizontal .row + .row { + margin-top: 15px; } -.input-group-btn:last-child > .btn:last-child, -.input-group-btn:last-child > .dropdown-toggle { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; +.form-horizontal .control-label { + padding-top: 6px; } -.input-group-btn:last-child > .btn:last-child.btn-large, -.input-group-btn:last-child > .dropdown-toggle.btn-large { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; -} - -.input-group-btn:last-child > .btn:last-child.btn-small, -.input-group-btn:last-child > .dropdown-toggle.btn-small { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; -} - -@media screen and (min-width: 768px) { - .form-horizontal .control-group { - position: relative; - margin-bottom: 20px; - } - .form-horizontal .control-group:before, - .form-horizontal .control-group:after { - display: table; - content: " "; - } - .form-horizontal .control-group:after { - clear: both; - } - .form-horizontal .control-group:before, - .form-horizontal .control-group:after { - display: table; - content: " "; - } - .form-horizontal .control-group:after { - clear: both; - } - .form-horizontal .control-group input, - .form-horizontal .control-group select, - .form-horizontal .control-group textarea { - margin-bottom: 0; - } - .form-horizontal .control-group > .control-label { - float: left; - width: 160px; - padding-top: 6px; +@media (min-width: 768px) { + .form-horizontal .control-label { text-align: right; } - .form-horizontal .control-group > .controls { - margin-left: 180px; - } - .form-horizontal .form-actions { - padding-left: 180px; - } } .btn { display: inline-block; - padding: 6px 12px; + padding: 8px 12px; margin-bottom: 0; font-size: 14px; font-weight: 500; - line-height: 20px; + line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; - border: 1px solid #a7a9aa; + border: 1px solid transparent; border-radius: 4px; } @@ -1865,72 +1724,38 @@ fieldset[disabled] .btn { box-shadow: none; } -.btn-large { - padding: 11px 14px; - font-size: 17.5px; - border-radius: 6px; -} - -.btn-small { - padding: 2px 10px; - font-size: 11.9px; - border-radius: 3px; -} - -.btn-mini { - padding: 0 6px; - font-size: 10.5px; - border-radius: 3px; -} - -.btn-block { - display: block; - width: 100%; - padding-right: 0; - padding-left: 0; -} - -.btn-block + .btn-block { - margin-top: 5px; -} - -input[type="submit"].btn-block, -input[type="reset"].btn-block, -input[type="button"].btn-block { - width: 100%; -} - -.btn { +.btn-default { color: #ffffff; background-color: #a7a9aa; border-color: #a7a9aa; } -.btn:hover, -.btn:focus, -.btn:active, -.btn.active { +.btn-default:hover, +.btn-default:focus, +.btn-default:active, +.btn-default.active { background-color: #9a9c9d; border-color: #8d9091; } -.btn.disabled:hover, -.btn[disabled]:hover, -fieldset[disabled] .btn:hover, -.btn.disabled:focus, -.btn[disabled]:focus, -fieldset[disabled] .btn:focus, -.btn.disabled:active, -.btn[disabled]:active, -fieldset[disabled] .btn:active, -.btn.disabled.active, -.btn[disabled].active, -fieldset[disabled] .btn.active { +.btn-default.disabled:hover, +.btn-default[disabled]:hover, +fieldset[disabled] .btn-default:hover, +.btn-default.disabled:focus, +.btn-default[disabled]:focus, +fieldset[disabled] .btn-default:focus, +.btn-default.disabled:active, +.btn-default[disabled]:active, +fieldset[disabled] .btn-default:active, +.btn-default.disabled.active, +.btn-default[disabled].active, +fieldset[disabled] .btn-default.active { background-color: #a7a9aa; border-color: #a7a9aa; } .btn-primary { + color: #ffffff; background-color: #428bca; border-color: #428bca; } @@ -1960,6 +1785,7 @@ fieldset[disabled] .btn-primary.active { } .btn-warning { + color: #ffffff; background-color: #f0ad4e; border-color: #f0ad4e; } @@ -1989,6 +1815,7 @@ fieldset[disabled] .btn-warning.active { } .btn-danger { + color: #ffffff; background-color: #d9534f; border-color: #d9534f; } @@ -2018,6 +1845,7 @@ fieldset[disabled] .btn-danger.active { } .btn-success { + color: #ffffff; background-color: #5cb85c; border-color: #5cb85c; } @@ -2047,6 +1875,7 @@ fieldset[disabled] .btn-success.active { } .btn-info { + color: #ffffff; background-color: #5bc0de; border-color: #5bc0de; } @@ -2114,6 +1943,36 @@ fieldset[disabled] .btn-link:focus { text-decoration: none; } +.btn-large { + padding: 14px 16px; + font-size: 18px; + border-radius: 6px; +} + +.btn-small { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} + +.btn-block { + display: block; + width: 100%; + padding-right: 0; + padding-left: 0; +} + +.btn-block + .btn-block { + margin-top: 5px; +} + +input[type="submit"].btn-block, +input[type="reset"].btn-block, +input[type="button"].btn-block { + width: 100%; +} + .fade { opacity: 0; -webkit-transition: opacity 0.15s linear; @@ -2126,16 +1985,6 @@ fieldset[disabled] .btn-link:focus { opacity: 1; } -/*.collapse { - position: relative; - height: 0; - overflow: hidden; - .transition(height .35s ease); - &.in { - height: auto; - } -}*/ - .collapse { position: relative; height: 0; @@ -2158,6 +2007,7 @@ fieldset[disabled] .btn-link:focus { .glyphicon:before { font-family: 'Glyphicons Halflings'; + -webkit-font-smoothing: antialiased; font-style: normal; font-weight: normal; line-height: 1; @@ -2803,32 +2653,18 @@ fieldset[disabled] .btn-link:focus { content: "\e160"; } -.dropup, -.dropdown { - position: relative; -} - -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} - .caret { display: inline-block; width: 0; height: 0; - vertical-align: top; + margin-left: 2px; + vertical-align: middle; border-top: 4px solid #000; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - .dropdown-menu { position: absolute; top: 100%; @@ -2869,7 +2705,7 @@ fieldset[disabled] .btn-link:focus { padding: 3px 20px; clear: both; font-weight: normal; - line-height: 20px; + line-height: 1.428571429; color: #333333; white-space: nowrap; } @@ -2923,6 +2759,19 @@ fieldset[disabled] .btn-link:focus { display: block; } +.open > a { + outline: 0; +} + +.dropdown-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 990; +} + .pull-right > .dropdown-menu { right: 0; left: auto; @@ -3101,6 +2950,15 @@ a.list-group-item.active .list-group-item-text { border-top-left-radius: 3px; } +.panel-footer { + padding: 10px 15px; + margin: 15px -15px -15px; + background-color: #f5f5f5; + border-top: 1px solid #dddddd; + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; +} + .panel-primary { border-color: #428bca; } @@ -3250,6 +3108,7 @@ button.close { } .nav > li { + position: relative; display: block; } @@ -3281,11 +3140,26 @@ button.close { margin-top: 9px; } +.nav.open > a, +.nav.open > a:hover, +.nav.open > a:focus { + color: #fff; + background-color: #428bca; + border-color: #428bca; +} + +.nav.open > a .caret, +.nav.open > a:hover .caret, +.nav.open > a:focus .caret { + border-top-color: #fff; + border-bottom-color: #fff; +} + .nav > .pull-right { float: right; } -.nav .divider { +.nav .nav-divider { height: 2px; margin: 9px 0; overflow: hidden; @@ -3304,7 +3178,7 @@ button.close { .nav-tabs > li > a { margin-right: 2px; - line-height: 20px; + line-height: 1.428571429; border: 1px solid transparent; border-radius: 4px 4px 0 0; } @@ -3392,9 +3266,9 @@ button.close { .nav-header { display: block; padding: 3px 15px; - font-size: 10.5px; + font-size: 11px; font-weight: bold; - line-height: 20px; + line-height: 1.428571429; color: #999999; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); text-transform: uppercase; @@ -3430,75 +3304,22 @@ button.close { display: block; } -/* -// Prevent IE8 from misplacing imgs -// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 -.nav > li > a > img { - max-width: none; +.nav .caret { + border-top-color: #428bca; + border-bottom-color: #428bca; } -// Dropdowns -// ------------------------- +.nav a:hover .caret { + border-top-color: #2a6496; + border-bottom-color: #2a6496; +} .nav-tabs .dropdown-menu { - // Remove the top rounded corners here since there is a hard edge above the menu - .border-top-radius(0); + margin-top: -1px; + border-top-right-radius: 0; + border-top-left-radius: 0; } -// Default dropdown links -// ------------------------- -// Make carets use linkColor to start -.nav .dropdown-toggle .caret { - border-top-color: @link-color; - border-bottom-color: @link-color; - margin-top: 8px; -} -.nav .dropdown-toggle:hover .caret { - border-top-color: @link-hover-color; - border-bottom-color: @link-hover-color; -} - -// Active dropdown links -// ------------------------- -.nav .active .dropdown-toggle .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .dropdown-toggle .caret { - border-top-color: @gray; - border-bottom-color: @gray; -} - -// Active:hover dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover { - cursor: pointer; -} - -// Open dropdowns -// ------------------------- -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, -.nav > li.dropdown.open.active > a:hover { - color: #fff; - background-color: @gray-light; - border-color: @gray-light; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open a:hover .caret { - border-top-color: #fff; - border-bottom-color: #fff; - .opacity(1); -} - -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover { - border-color: @gray-light; -} - -*/ - .navbar { position: relative; padding-right: 15px; @@ -3529,7 +3350,8 @@ button.close { } .navbar-nav { - margin-top: 5px; + margin-top: 10px; + margin-bottom: 15px; } .navbar-nav > li > a { @@ -3537,6 +3359,7 @@ button.close { padding-bottom: 15px; line-height: 20px; color: #777777; + border-radius: 4px; } .navbar-nav > li > a:hover, @@ -3587,7 +3410,7 @@ button.close { padding: 15px; margin-right: auto; margin-left: auto; - font-size: 17.5px; + font-size: 18px; font-weight: 500; line-height: 20px; color: #777777; @@ -3629,8 +3452,22 @@ button.close { } .navbar-form { - margin-top: 8px; - margin-bottom: 8px; + margin-top: 7px; + margin-bottom: 7px; +} + +.navbar-form input, +.navbar-form select, +.navbar-form textarea, +.navbar-form .radio, +.navbar-form .checkbox { + display: inline-block; +} + +.navbar-form .radio, +.navbar-form .checkbox { + margin-top: 0; + margin-bottom: 0; } .navbar-nav > li > .dropdown-menu { @@ -3644,27 +3481,27 @@ button.close { border-bottom-left-radius: 0; } -.navbar-nav li.dropdown > a:hover .caret, -.navbar-nav li.dropdown > a:focus .caret { +.navbar-nav > .dropdown > a:hover .caret, +.navbar-nav > .dropdown > a:focus .caret { border-top-color: #333333; border-bottom-color: #333333; } -.navbar-nav li.dropdown.open > .dropdown-toggle, -.navbar-nav li.dropdown.active > .dropdown-toggle, -.navbar-nav li.dropdown.open.active > .dropdown-toggle { +.navbar-nav > .open > a, +.navbar-nav > .open > a:hover, +.navbar-nav > .open > a:focus { color: #555555; background-color: #d5d5d5; } -.navbar-nav li.dropdown > .dropdown-toggle .caret { +.navbar-nav > .dropdown > a .caret { border-top-color: #777777; border-bottom-color: #777777; } -.navbar-nav li.dropdown.open > .dropdown-toggle .caret, -.navbar-nav li.dropdown.active > .dropdown-toggle .caret, -.navbar-nav li.dropdown.open.active > .dropdown-toggle .caret { +.navbar-nav > .open > a .caret, +.navbar-nav > .open > a:hover .caret, +.navbar-nav > .open > a:focus .caret { border-top-color: #555555; border-bottom-color: #555555; } @@ -3730,26 +3567,26 @@ button.close { background-color: #fff; } -.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle, -.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle, -.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle { +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { color: #ffffff; background-color: #080808; } -.navbar-inverse .navbar-nav li.dropdown > a:hover .caret { +.navbar-inverse .navbar-nav > .dropdown > a:hover .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } -.navbar-inverse .navbar-nav li.dropdown > .dropdown-toggle .caret { +.navbar-inverse .navbar-nav > .dropdown > a .caret { border-top-color: #999999; border-bottom-color: #999999; } -.navbar-inverse .navbar-nav li.dropdown.open > .dropdown-toggle .caret, -.navbar-inverse .navbar-nav li.dropdown.active > .dropdown-toggle .caret, -.navbar-inverse .navbar-nav li.dropdown.open.active > .dropdown-toggle .caret { +.navbar-inverse .navbar-nav > .open > a .caret, +.navbar-inverse .navbar-nav > .open > a:hover .caret, +.navbar-inverse .navbar-nav > .open > a:focus .caret { border-top-color: #ffffff; border-bottom-color: #ffffff; } @@ -3763,10 +3600,14 @@ button.close { .navbar .nav { float: left; margin-top: 0; + margin-bottom: 0; } .navbar .nav > li { float: left; } + .navbar .nav > li > a { + border-radius: 0; + } .navbar .nav.pull-right { float: right; } @@ -3783,7 +3624,12 @@ button.close { } .navbar-btn { - margin-top: 8px; + margin-top: 7px; +} + +.navbar-text { + margin-top: 15px; + margin-bottom: 15px; } .navbar-link { @@ -3810,24 +3656,28 @@ button.close { border-bottom-color: #ffffff; } -.btn-group { +.btn-group, +.btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; } -.btn-group > .btn { +.btn-group > .btn, +.btn-group-vertical > .btn { position: relative; float: left; } -.btn-group > .btn + btn { - margin-left: -1px; +.btn-group > .btn:hover, +.btn-group-vertical > .btn:hover, +.btn-group > .btn:active, +.btn-group-vertical > .btn:active { + z-index: 2; } -.btn-group > .btn:hover, -.btn-group > .btn:active { - z-index: 2; +.btn-group .btn + .btn { + margin-left: -1px; } .btn-toolbar:before, @@ -3861,52 +3711,42 @@ button.close { margin-left: 5px; } -.btn-group > .btn { - position: relative; +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; } .btn-group > .btn:first-child { margin-left: 0; - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; } -.btn-group > .btn:last-child, -.btn-group > .dropdown-toggle { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; +.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.btn-group > .btn.large:first-child { - margin-left: 0; - border-bottom-left-radius: 6px; - border-top-left-radius: 6px; -} - -.btn-group > .btn.large:last-child, -.btn-group > .large.dropdown-toggle { - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } .btn-group > .btn-group { float: left; } -.btn-group > .btn-group > .btn { +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:last-child > .btn { - border-top-right-radius: 4px; - border-bottom-right-radius: 4px; +.btn-group > .btn-group:first-child > .btn:last-child, +.btn-group > .btn-group:first-child > .dropdown-toggle { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.btn-group > .btn-group:first-child > .btn { - margin-left: 0; - border-bottom-left-radius: 4px; - border-top-left-radius: 4px; +.btn-group > .btn-group:last-child > .btn:first-child { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } .btn-group .dropdown-toggle:active, @@ -3935,7 +3775,6 @@ button.close { } .btn .caret { - margin-top: 8px; margin-left: 0; } @@ -3954,26 +3793,22 @@ button.close { max-width: 100%; } -.btn-group-vertical .btn:first-child { +.btn-group-vertical > .btn + .btn { + margin-top: -1px; +} + +.btn-group-vertical .btn:not(:first-child):not(:last-child) { border-radius: 0; - border-top-right-radius: 4px; - border-top-left-radius: 4px; +} + +.btn-group-vertical .btn:first-child { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } .btn-group-vertical .btn:last-child { - border-radius: 0; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; -} - -.btn-group-vertical .btn-large:first-child { - border-top-right-radius: 6px; - border-top-left-radius: 6px; -} - -.btn-group-vertical .btn-large:last-child { - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; + border-top-right-radius: 0; + border-top-left-radius: 0; } .btn-group-justified { @@ -4034,7 +3869,7 @@ button.close { .pagination > li > span { float: left; padding: 4px 12px; - line-height: 20px; + line-height: 1.428571429; text-decoration: none; background-color: #ffffff; border: 1px solid #dddddd; @@ -4078,8 +3913,8 @@ button.close { .pagination-large > li > a, .pagination-large > li > span { - padding: 11px 14px; - font-size: 17.5px; + padding: 14px 16px; + font-size: 18px; } .pagination-large > li:first-child > a, @@ -4094,34 +3929,24 @@ button.close { border-bottom-right-radius: 6px; } -.pagination-mini > li:first-child > a, +.pagination-small > li > a, +.pagination-small > li > span { + padding: 5px 10px; + font-size: 12px; +} + .pagination-small > li:first-child > a, -.pagination-mini > li:first-child > span, .pagination-small > li:first-child > span { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } -.pagination-mini > li:last-child > a, .pagination-small > li:last-child > a, -.pagination-mini > li:last-child > span, .pagination-small > li:last-child > span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; } -.pagination-small > li > a, -.pagination-small > li > span { - padding: 2px 10px; - font-size: 11.9px; -} - -.pagination-mini > li > a, -.pagination-mini > li > span { - padding: 0 6px; - font-size: 10.5px; -} - .pager { margin: 20px 0; text-align: center; @@ -4260,7 +4085,7 @@ button.close { } .modal-header { - min-height: 35px; + min-height: 16.428571429px; padding: 15px; border-bottom: 1px solid #e5e5e5; } @@ -4271,7 +4096,7 @@ button.close { .modal-title { margin: 0; - line-height: 20px; + line-height: 1.428571429; } .modal-body { @@ -4338,7 +4163,7 @@ button.close { position: absolute; z-index: 1030; display: block; - font-size: 10.5px; + font-size: 11px; line-height: 1.4; opacity: 0; filter: alpha(opacity=0); @@ -4560,7 +4385,7 @@ button.close { } .alert { - padding: 8px 35px 8px 14px; + padding: 10px 35px 10px 15px; margin-bottom: 20px; color: #c09853; background-color: #fcf8e3; @@ -4577,8 +4402,7 @@ button.close { border-top-color: #f8e5be; } -.alert > a, -.alert > p > a { +.alert .alert-link { font-weight: 500; color: #a47e3c; } @@ -4600,8 +4424,7 @@ button.close { border-top-color: #c9e2b3; } -.alert-success > a, -.alert-success > p > a { +.alert-success .alert-link { color: #356635; } @@ -4615,8 +4438,7 @@ button.close { border-top-color: #e6c1c7; } -.alert-danger > a, -.alert-danger > p > a { +.alert-danger .alert-link { color: #953b39; } @@ -4630,14 +4452,13 @@ button.close { border-top-color: #a6e1ec; } -.alert-info > a, -.alert-info > p > a { +.alert-info .alert-link { color: #2d6987; } .alert-block { - padding-top: 14px; - padding-bottom: 14px; + padding-top: 15px; + padding-bottom: 15px; } .alert-block > p, @@ -4652,7 +4473,7 @@ button.close { .thumbnail, .img-thumbnail { padding: 4px; - line-height: 20px; + line-height: 1.428571429; background-color: #ffffff; border: 1px solid #dddddd; border-radius: 4px; @@ -4785,7 +4606,7 @@ a.thumbnail:focus { display: inline-block; min-width: 10px; padding: 3px 7px; - font-size: 11.9px; + font-size: 12px; font-weight: bold; line-height: 1; color: #fff; @@ -4885,7 +4706,7 @@ a.list-group-item.active > .badge, float: left; width: 0; height: 100%; - font-size: 11.9px; + font-size: 12px; color: #fff; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); @@ -4896,9 +4717,6 @@ a.list-group-item.active > .badge, -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; } .progress-striped .progress-bar { @@ -5122,7 +4940,7 @@ a.list-group-item.active > .badge, position: absolute; bottom: 20px; left: 50%; - z-index: 5; + z-index: 15; width: 100px; margin: 0 0 0 -50px; text-align: center; @@ -5182,7 +5000,7 @@ a.list-group-item.active > .badge, margin-bottom: 30px; font-size: 21px; font-weight: 200; - line-height: 30px; + line-height: 2.1428571435; color: inherit; background-color: #eeeeee; } @@ -5263,68 +5081,68 @@ a.list-group-item.active > .badge, visibility: hidden; } -.visible-phone { - display: inherit !important; +.visible-sm { + display: block !important; } -.visible-tablet { +.visible-md { display: none !important; } -.visible-desktop { +.visible-lg { display: none !important; } -.hidden-phone { +.hidden-sm { display: none !important; } -.hidden-tablet { - display: inherit !important; +.hidden-md { + display: block !important; } -.hidden-desktop { - display: inherit !important; +.hidden-lg { + display: block !important; } @media (min-width: 768px) and (max-width: 991px) { - .visible-phone { + .visible-sm { display: none !important; } - .visible-tablet { - display: inherit !important; + .visible-md { + display: block !important; } - .visible-desktop { + .visible-lg { display: none !important; } - .hidden-phone { - display: inherit !important; + .hidden-sm { + display: block !important; } - .hidden-tablet { + .hidden-md { display: none !important; } - .hidden-desktop { - display: inherit !important; + .hidden-lg { + display: block !important; } } @media (min-width: 992px) { - .visible-phone { + .visible-sm { display: none !important; } - .visible-tablet { + .visible-md { display: none !important; } - .visible-desktop { - display: inherit !important; + .visible-lg { + display: block !important; } - .hidden-phone { - display: inherit !important; + .hidden-sm { + display: block !important; } - .hidden-tablet { - display: inherit !important; + .hidden-md { + display: block !important; } - .hidden-desktop { + .hidden-lg { display: none !important; } } @@ -5335,7 +5153,7 @@ a.list-group-item.active > .badge, @media print { .visible-print { - display: inherit !important; + display: block !important; } .hidden-print { display: none !important; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index aca8df213..305247251 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -10,94 +10,60 @@ body { position: relative; /* For scrollyspy */ - /* We add the padding to the body for >768px only */ -} - -hr { - margin-top: 30px; - margin-bottom: 30px; -} - -.bs-docs-dl-options h4 { - margin-top: 15px; - margin-bottom: 5px; -} - -.bs-docs-container, -.bs-home-container { - padding-left: 15px; - padding-right: 15px; -} -.bs-docs-container { - max-width: 860px; -} -.bs-docs-container .row { - margin-left: -15px; - margin-right: -15px; -} - -/* Side notes for calling out things */ -.bs-docs-sidenote { - margin: 20px 0; - padding: 15px 30px 15px 15px; - background-color: #fcf2f2; - border-left: 5px solid #df7c7b; -} -.bs-docs-sidenote h4 { - margin-top: 0; -} -.bs-docs-sidenote p:last-child { - margin-bottom: 0; -} -.bs-docs-sidenote code, -.bs-docs-sidenote .highlight { - background-color: #fff; + padding-top: 50px; /* Account for fixed navbar */ } -/* Sections + +/* Top nav and header -------------------------------------------------- */ -/* Padding for in-page bookmarks */ -section, -.bs-docs-section { - padding-top: 30px; +.bs-docs-nav { + background-color: #b94a48; } - -/* Few stylistic typography tweaks */ -section > .page-header, -section > .lead { - color: #5a5a5a; +.bs-docs-nav .navbar-brand { + color: #fff; } -section > ul li { - margin-bottom: 5px; +.bs-docs-nav .navbar-nav > li > a { + color: #e6cac8; +} +.bs-docs-nav .navbar-nav > li > a:hover { + color: #fff; +} +.bs-docs-nav .navbar-nav > .active > a, +.bs-docs-nav .navbar-nav > .active > a:hover { + color: #fff; + background-color: #993c3a; +} +.bs-docs-nav .navbar-toggle { + border-color: #b94a48; +} +.bs-docs-nav .navbar-toggle:hover { + background-color: #993c3a; + border-color: #993c3a; } -/* Jumbotrons +/* Homepage masthead -------------------------------------------------- */ -.bs-docs-section-header { - padding-top: 60px; - color: #b94a48; - border-bottom: 5px solid #b94a48; -} - -/* Base class */ -.bs-docs-jumbotron { +.bs-masthead { position: relative; margin-bottom: 20px; padding: 30px 15px; text-align: center; } -.bs-docs-jumbotron h1 { +.bs-masthead h1 { font-size: 50px; line-height: 1; } +.bs-masthead .bs-social { + margin-top: 80px; +} /* Download button */ -.bs-docs-jumbotron .btn { +.bs-masthead .btn { margin-top: 5px; margin-bottom: 5px; padding: 18px 24px; @@ -106,28 +72,174 @@ section > ul li { background-color: #fff; border-color: #e5e5e5; } -.bs-docs-jumbotron .btn:hover, -.bs-docs-jumbotron .btn:active { +.bs-masthead .btn:hover, +.bs-masthead .btn:active { color: #fff; /* redeclare to override the `.jumbotron a` */ background-color: #b94a48; border-color: #b94a48; } -/* Textual links in masthead */ -.masthead-links { +/* Textual links */ +.bs-masthead-links { margin: 20px 0; list-style: none; } -.masthead-links li { +.bs-masthead-links li { display: inline; color: #999; } -.masthead-links li + li { +.bs-masthead-links li + li { margin-left: 20px; } +/* Customize and Download button +-------------------------------------------------- */ + +.bs-customizer { + +} +.bs-customizer .toggle { + float: right; +} +.bs-customizer label { + margin-top: 10px; + font-weight: 500; + color: #555; +} +.bs-customizer h4 { + margin-top: 15px; +} +.bs-customizer input[type="text"] { + background-color: #fafafa; +} + + +.bs-customize-download { + text-align:center; +} +.bs-customize-download .btn { + margin-top: 5px; + margin-bottom: 5px; + padding: 18px 24px; + font-size: 21px; + color: #b94a48; + background-color: #fff; + border-color: #b94a48; +} +.bs-customize-download .btn:hover, +.bs-customize-download .btn:active { + color: #fff; + background-color: #b94a48; +} + + + +/* Docs pages and sections +-------------------------------------------------- */ + +/* Page headers */ +.bs-header { + padding: 30px 30px 40px; + font-size: 16px; + color: #5a5a5a; + text-align: center; + border-bottom: 1px solid #ddd; +} +.bs-header h1 { + color: #b94a48; +} +.bs-header p { + font-weight: 300; + line-height: 1.5; +} + +/* Padding for in-page bookmarks */ +.bs-docs-section { + padding-top: 30px; +} + + + +/* Docs sidebar +-------------------------------------------------- */ + +/* By default it's not affixed in mobile views, so undo that */ +.bs-sidebar.affix { + position: static; +} + +/* First level of nav */ +.bs-sidenav { + margin-top: 30px; + margin-bottom: 30px; + padding-top: 15px; + padding-bottom: 15px; + text-shadow: 0 1px 0 #fff; + background-color: #f5f5f5; + border-radius: 5px; +} + +/* All levels of nav */ +.bs-sidebar .nav > li > a { + display: block; + color: #666; + padding: 4px 20px; +} +.bs-sidebar .nav > li > a:hover, +.bs-sidebar .nav > li > a:focus { + text-decoration: none; + border-right: 1px solid #d5d5d5; +} +.bs-sidebar .nav > .active > a, +.bs-sidebar .nav > .active:hover > a, +.bs-sidebar .nav > .active:focus > a { + font-weight: 500; + color: #b94a48; + background-color: transparent; + border-right: 1px solid #b94a48; +} + +/* Nav: second level (shown on .active) */ +.bs-sidebar .nav .nav { + display: none; + margin-bottom: 5px; +} +.bs-sidebar .nav > .active > ul { + display: block; +} +.bs-sidebar .nav .nav > li > a { + padding-top: 2px; + padding-bottom: 2px; + padding-left: 30px; + font-size: 90%; +} + + + +/* Side notes for calling out things +-------------------------------------------------- */ + +.bs-callout { + margin: 20px 0; + padding: 15px 30px 15px 15px; + background-color: #fcf2f2; + border-left: 5px solid #df7c7b; +} +.bs-callout h4 { + margin-top: 0; +} +.bs-callout p:last-child { + margin-bottom: 0; +} +.bs-callout code, +.bs-callout .highlight { + background-color: #fff; +} + + + /* Special grid styles -------------------------------------------------- */ @@ -146,96 +258,11 @@ section > ul li { -/* Sidenav --------------------------------------------------- */ - -.bs-docs-sidebar { - display: none; - position: fixed; - top: 0; - left: 0; - bottom: 0; - width: 240px; - overflow-y: scroll; - text-shadow: 0 1px 0 #fff; - background-color: #f5f5f5; - box-shadow: inset -1px 0 0 #e5e5e5; -} - -/* Nav: first level */ -.bs-docs-sidebar > .nav { - margin: 0 0 25px 0; -} -.bs-docs-sidebar .nav > li > a { - display: block; - color: #666; - padding: 4px 25px; -} -.bs-docs-sidebar .nav > li > a:hover, -.bs-docs-sidebar .nav > li > a:focus { - text-decoration: none; - border-right: 1px solid #d5d5d5; -} -.bs-docs-sidebar .nav > .active > a, -.bs-docs-sidebar .nav > .active:hover > a, -.bs-docs-sidebar .nav > .active:focus > a { - font-weight: 500; - color: #b94a48; - background-color: transparent; - border-right: 1px solid #b94a48; -} - -/* Nav: second level (shown on .active) */ -.bs-docs-sidebar .nav .nav { - display: none; - margin-bottom: 5px; -} -.bs-docs-sidebar .nav > .active > ul { - display: block; -} -.bs-docs-sidebar .nav .nav > li > a { - padding-top: 2px; - padding-bottom: 2px; - padding-left: 40px; - font-size: 90%; -} - -.bs-docs-sidenav-heading { - margin: 0 0 25px; -} -.bs-docs-sidenav-heading a { - display: block; - padding: 15px 25px; - color: #b94a48; - border-bottom: 1px solid #e5e5e5; - box-shadow: 0 1px 0 #fff; -} -.bs-docs-sidenav-heading a:hover { - color: #a3403e; - text-decoration: none; -} - -/* Section headings for groups of links */ -.bs-docs-sidenav > li > .nav-header { - margin-top: 20px; - margin-bottom: 5px; - font-size: 14px; - font-weight: 500; - color: #333; -} -.bs-docs-sidenav > .active > .nav-header, -.bs-docs-sidenav > .active > .nav-header:hover { - color: #333; - border-color: #333; -} - - - /* Bootstrap code examples -------------------------------------------------- */ /* Base class */ -.bs-docs-example { +.bs-example { position: relative; padding: 39px 14px 14px; margin-bottom: -1px; @@ -244,7 +271,7 @@ section > ul li { border-top-right-radius: 4px; } /* Echo out a label for the example */ -.bs-docs-example:after { +.bs-example:after { content: "Example"; position: absolute; top: -1px; @@ -260,56 +287,70 @@ section > ul li { } /* Tweak display of the examples */ -.bs-docs-example + .prettyprint, -.bs-docs-example + .highlight { +.bs-example + .prettyprint, +.bs-example + .highlight { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } /* Tweak content of examples for optimum awesome */ -.bs-docs-example > p:last-child, -.bs-docs-example > ul:last-child, -.bs-docs-example > ol:last-child, -.bs-docs-example > blockquote:last-child, -.bs-docs-example > input:last-child, -.bs-docs-example > select:last-child, -.bs-docs-example > textarea:last-child, -.bs-docs-example > .table:last-child, -.bs-docs-example > .jumbotron:last-child, -.bs-docs-example > .alert:last-child, -.bs-docs-example > .panel:last-child, -.bs-docs-example > .list-group:last-child, -.bs-docs-example > .well:last-child { +.bs-example > p:last-child, +.bs-example > ul:last-child, +.bs-example > ol:last-child, +.bs-example > blockquote:last-child, +.bs-example > input:last-child, +.bs-example > select:last-child, +.bs-example > textarea:last-child, +.bs-example > .table:last-child, +.bs-example > .navbar:last-child +.bs-example > .jumbotron:last-child, +.bs-example > .alert:last-child, +.bs-example > .panel:last-child, +.bs-example > .list-group:last-child, +.bs-example > .well:last-child { margin-bottom: 0; } +.bs-example > .close { + float: none; +} /* Typography */ -.bs-docs-example-type .table td { +.bs-example-type .table td { color: #999; vertical-align: middle; border-color: ; } -.bs-docs-example-type .table td, -.bs-docs-example-type .table th { +.bs-example-type .table td, +.bs-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 { +.bs-example-type .table tr:first-child td, +.bs-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 { +.bs-example-type h1, +.bs-example-type h2, +.bs-example-type h3, +.bs-example-type h4, +.bs-example-type h5, +.bs-example-type h6 { margin: 0; } +/* Forms */ +.bs-example.form-inline select, +.bs-example.form-inline input[type="text"], +.bs-example.form-inline input[type="password"] { + width: 180px; +} +.bs-example-control-sizing input[type="text"] + input[type="text"] { + margin-top: 10px; +} + /* List groups */ -.bs-docs-example > .list-group { +.bs-example > .list-group { max-width: 400px; } @@ -355,10 +396,10 @@ section > ul li { } /* Example modals */ -.bs-docs-example-modal { +.bs-example-modal { background-color: #f5f5f5; } -.bs-docs-example-modal .modal { +.bs-example-modal .modal { position: relative; top: auto; right: auto; @@ -367,49 +408,49 @@ section > ul li { z-index: 1; display: block; } -.bs-docs-example-modal .modal-dialog { +.bs-example-modal .modal-dialog { left: auto; margin-left: auto; margin-right: auto; } /* Example dropdowns */ -.bs-docs-example > .dropdown > .dropdown-menu, -.bs-docs-example-submenu > .pull-left > .dropup > .dropdown-menu, -.bs-docs-example-submenu > .pull-left > .dropdown > .dropdown-menu { +.bs-example > .dropdown > .dropdown-menu, +.bs-example-submenu > .pull-left > .dropup > .dropdown-menu, +.bs-example-submenu > .pull-left > .dropdown > .dropdown-menu { position: static; display: block; margin-bottom: 5px; } -.bs-docs-example-submenu { +.bs-example-submenu { min-height: 230px; } -.bs-docs-example-submenu > .pull-left + .pull-left { +.bs-example-submenu > .pull-left + .pull-left { margin-left: 20px; } /* Example tabbable tabs */ -.bs-docs-example-tabs .nav-tabs { +.bs-example-tabs .nav-tabs { margin-bottom: 15px; } /* Tooltips */ -.bs-docs-tooltip-examples { +.bs-example-tooltips { text-align: center; margin: 0 0 10px; list-style: none; } -.bs-docs-tooltip-examples li { +.bs-example-tooltips li { display: inline; padding: 0 10px; } /* Popovers */ -.bs-docs-example-popover { +.bs-example-popover { padding-bottom: 24px; background-color: #f9f9f9; } -.bs-docs-example-popover .popover { +.bs-example-popover .popover { position: relative; display: block; float: left; @@ -418,13 +459,14 @@ section > ul li { } + /* Example templates -------------------------------------------------- */ -.bs-docs-examples h4 { +.bs-examples h4 { margin-bottom: 5px; } -.bs-docs-examples p { +.bs-examples p { margin-bottom: 20px; } @@ -510,31 +552,25 @@ section > ul li { position: relative; float: left; width: 25%; - height: 43px; - font-size: 14px; - font-weight: bold; - line-height: 43px; - color: #999; - text-align: center; - border: 1px solid #ddd; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; } .responsive-utilities-test li + li { margin-left: 10px; } .responsive-utilities-test span { - position: absolute; - top: -1px; - left: -1px; - right: -1px; - bottom: -1px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; + padding: 15px 10px; + font-size: 14px; + font-weight: bold; + line-height: 1.1; + text-align: center; + border-radius: 4px; } -.responsive-utilities-test span { +.responsive-utilities-test.visible-on [class*="hidden"], +.responsive-utilities-test.hidden-on [class*="visible"] { + color: #999; + border: 1px solid #ddd; +} +.responsive-utilities-test.visible-on [class*="visible"], +.responsive-utilities-test.hidden-on [class*="hidden"] { color: #468847; background-color: #dff0d8; border: 1px solid #d6e9c6; @@ -545,13 +581,14 @@ section > ul li { /* Footer -------------------------------------------------- */ -.bs-docs-footer { - padding-top: 30px; +.bs-footer { + padding-top: 40px; padding-bottom: 30px; margin-top: 100px; + text-align: center; border-top: 1px solid #e5e5e5; } -.bs-docs-footer p { +.bs-footer p { margin-bottom: 0; color: #777; } @@ -567,27 +604,25 @@ section > ul li { } /* Social proof buttons from GitHub & Twitter */ -.bs-docs-social { - margin-top: 80px; +.bs-social { margin-bottom: 20px; } -/* Quick links on Home */ -.bs-docs-social-buttons { +.bs-social-buttons { display: inline-block; margin: 0; list-style: none; } -.bs-docs-social-buttons li { +.bs-social-buttons li { display: inline-block; line-height: 1; } -.bs-docs-social-buttons li + li { +.bs-social-buttons li + li { margin-left: 15px; } -.bs-docs-social-buttons .twitter-follow-button { +.bs-social-buttons .twitter-follow-button { width: 225px !important; } -.bs-docs-social-buttons .twitter-share-button { +.bs-social-buttons .twitter-share-button { width: 98px !important; } @@ -622,6 +657,7 @@ input.focused { } .highlight pre { padding: 0; + margin-top: 0; margin-bottom: 0; background-color: transparent; border: 0; @@ -640,14 +676,15 @@ input.focused { color: #bebec5; } +/* Better spacing on download options in getting started */ +.bs-docs-dl-options h4 { + margin-top: 15px; + margin-bottom: 5px; +} - -/* Docs gallery --------------------------------------------------- */ - -.bs-docs-gallery .thumbnail { - max-width: 400px; - margin: 0 auto 20px; +/* Hide the top link initially */ +.bs-top { + display: none; } @@ -656,7 +693,7 @@ input.focused { /* Hide code snippets on mobile devices */ @media screen and (max-width: 480px) { - .bs-docs-example { + .bs-example { border-radius: 4px; } .highlight { @@ -667,8 +704,16 @@ input.focused { /* Tablets and up */ @media screen and (min-width: 768px) { + /* Reaffix the fixed sidebar */ + .bs-sidebar.affix { + position: fixed; /* Undo the static from mobile-first approach */ + top: 50px; + width: 160px; + } + /* Back to top link */ - .bs-docs-top { + .bs-top { + display: block; /* Unhide */ float: left; padding: 7px 15px; font-weight: 500; @@ -676,57 +721,44 @@ input.focused { background-color: #eee; border-radius: 4px; } - .bs-docs-top:hover { + .bs-top:hover { color: #fff; text-decoration: none; background-color: #999; } - .bs-docs-top.affix { + .bs-top.affix { position: fixed; right: 15px; bottom: 15px; } - .bs-docs-section-header h1 { - font-size: 80px; - font-size: 8rem; + .bs-header { + font-size: 21px; + text-align: left; + } + .bs-header h1 { + font-size: 60px; line-height: 1; } - /* Account for fixed navbar (which is static to start) */ - .bs-docs-docs { - padding-left: 260px; - } - - /* Undo custom padding */ - .bs-docs-container { - padding-left: 0; - padding-right: 0; - } - /* Show the docs nav */ - .bs-docs-sidebar { + .bs-sidebar { display: block; } /* Tweak display of docs jumbotrons */ - .masthead { + .bs-masthead { padding-top: 100px; padding-bottom: 100px; } - .masthead h1 { + .bs-masthead h1 { font-size: 100px; } - .masthead p { + .bs-masthead p { margin-left: 15%; margin-right: 15%; font-size: 30px; } - .subhead { - padding-top: 60px; - padding-bottom: 60px; - text-align: left; - } .bs-navbar-top-example .navbar-fixed-top, .bs-navbar-bottom-example .navbar-fixed-bottom { @@ -738,8 +770,9 @@ input.focused { /* Tablets/desktops and up */ @media screen and (min-width: 992px) { - .bs-docs-docs { - padding-left: 280px; + /* Widen the fixed sidebar */ + .bs-sidebar.affix { + width: 213px; } /* Icons */ @@ -751,8 +784,10 @@ input.focused { /* Large desktops and up */ @media screen and (min-width: 1200px) { - .bs-docs-docs { - padding-left: 300px; + + /* Widen the fixed sidebar again */ + .bs-sidebar.affix { + width: 270px; } } diff --git a/docs/assets/js/README.md b/docs/assets/js/README.md deleted file mode 100644 index b72826a2b..000000000 --- a/docs/assets/js/README.md +++ /dev/null @@ -1,106 +0,0 @@ -## 2.0 BOOTSTRAP JS PHILOSOPHY -These are the high-level design rules which guide the development of Bootstrap's plugin apis. - ---- - -### DATA-ATTRIBUTE API - -We believe you should be able to use all plugins provided by Bootstrap purely through the markup API without writing a single line of javascript. - -We acknowledge that this isn't always the most performant and sometimes it may be desirable to turn this functionality off altogether. Therefore, as of 2.0 we provide the ability to disable the data attribute API by unbinding all events on the body namespaced with `'data-api'`. This looks like this: - - $('body').off('.data-api') - -To target a specific plugin, just include the plugins name as a namespace along with the data-api namespace like this: - - $('body').off('.alert.data-api') - ---- - -### PROGRAMMATIC API - -We also believe you should be able to use all plugins provided by Bootstrap purely through the JS API. - -All public APIs should be single, chainable methods, and return the collection acted upon. - - $(".btn.danger").button("toggle").addClass("fat") - -All methods should accept an optional options object, a string which targets a particular method, or null which initiates the default behavior: - - $("#myModal").modal() // initialized with defaults - $("#myModal").modal({ keyboard: false }) // initialized with now keyboard - $("#myModal").modal('show') // initializes and invokes show immediately afterqwe2 - ---- - -### OPTIONS - -Options should be sparse and add universal value. We should pick the right defaults. - -All plugins should have a default object which can be modified to effect all instance's default options. The defaults object should be available via `$.fn.plugin.defaults`. - - $.fn.modal.defaults = { … } - -An options definition should take the following form: - - *noun*: *adjective* - describes or modifies a quality of an instance - -examples: - - backdrop: true - keyboard: false - placement: 'top' - ---- - -### EVENTS - -All events should have an infinitive and past participle form. The infinitive is fired just before an action takes place, the past participle on completion of the action. - - show | shown - hide | hidden - ---- - -### CONSTRUCTORS - -Each plugin should expose it's raw constructor on a `Constructor` property -- accessed in the following way: - - - $.fn.popover.Constructor - ---- - -### DATA ACCESSOR - -Each plugin stores a copy of the invoked class on an object. This class instance can be accessed directly through jQuery's data API like this: - - $('[rel=popover]').data('popover') instanceof $.fn.popover.Constructor - ---- - -### DATA ATTRIBUTES - -Data attributes should take the following form: - -- data-{{verb}}={{plugin}} - defines main interaction -- data-target || href^=# - defined on "control" element (if element controls an element other than self) -- data-{{noun}} - defines class instance options - -examples: - - // control other targets - data-toggle="modal" data-target="#foo" - data-toggle="collapse" data-target="#foo" data-parent="#bar" - - // defined on element they control - data-spy="scroll" - - data-dismiss="modal" - data-dismiss="alert" - - data-toggle="dropdown" - - data-toggle="button" - data-toggle="buttons-checkbox" - data-toggle="buttons-radio" diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js index 170a1953d..30a7c0d6e 100644 --- a/docs/assets/js/application.js +++ b/docs/assets/js/application.js @@ -14,28 +14,18 @@ }) // back to top - // setTimeout(function () { - // $('.bs-docs-sidenav').affix({ - // offset: { - // top: function () { return $window.width() <= 980 ? 290 : 210 } - // , bottom: 270 - // } - // }) - // }, 100) - setTimeout(function () { - $('.bs-docs-top').affix() + $('.bs-sidebar').affix({ + offset: { + top: function () { return $window.width() <= 980 ? 290 : 210 } + , bottom: 270 + } + }) }, 100) - // make code pretty - window.prettyPrint && prettyPrint() - - // add-ons - $('.add-on :checkbox').on('click', function () { - var $this = $(this) - , method = $this.attr('checked') ? 'addClass' : 'removeClass' - $(this).parents('.add-on')[method]('active') - }) + setTimeout(function () { + $('.bs-top').affix() + }, 100) // add tipsies to grid for scaffolding if ($('#grid-system').length) { @@ -79,22 +69,22 @@ $('.bs-docs-carousel-example').carousel() // javascript build logic - var inputsComponent = $("#components.download input") - , inputsPlugin = $("#plugins.download input") - , inputsVariables = $("#variables.download input") + var inputsComponent = $("#less input") + , inputsPlugin = $("#plugins input") + , inputsVariables = $("#variables input") // toggle all plugin checkboxes - $('#components.download .toggle-all').on('click', function (e) { + $('#components .toggle').on('click', function (e) { e.preventDefault() - inputsComponent.attr('checked', !inputsComponent.is(':checked')) + inputsComponent.prop('checked', !inputsComponent.is(':checked')) }) - $('#plugins.download .toggle-all').on('click', function (e) { + $('#plugins .toggle').on('click', function (e) { e.preventDefault() - inputsPlugin.attr('checked', !inputsPlugin.is(':checked')) + inputsPlugin.prop('checked', !inputsPlugin.is(':checked')) }) - $('#variables.download .toggle-all').on('click', function (e) { + $('#variables .toggle').on('click', function (e) { e.preventDefault() inputsVariables.val('') }) @@ -102,16 +92,16 @@ // request built javascript $('.download-btn .btn').on('click', function () { - var css = $("#components.download input:checked") + var css = $("#components input:checked") .map(function () { return this.value }) .toArray() - , js = $("#plugins.download input:checked") + , js = $("#plugins input:checked") .map(function () { return this.value }) .toArray() , vars = {} , img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png'] - $("#variables.download input") + $("#variables input") .each(function () { $(this).val() && (vars[ $(this).prev().text() ] = $(this).val()) }) diff --git a/docs/assets/js/bootstrap-affix.js b/docs/assets/js/bootstrap-affix.js deleted file mode 100644 index e9a730654..000000000 --- a/docs/assets/js/bootstrap-affix.js +++ /dev/null @@ -1,117 +0,0 @@ -/* ========================================================== - * bootstrap-affix.js v3.0.0 - * http://twitter.github.com/bootstrap/javascript.html#affix - * ========================================================== - * Copyright 2012 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ========================================================== */ - - -!function ($) { - - "use strict"; // jshint ;_; - - - /* AFFIX CLASS DEFINITION - * ====================== */ - - var Affix = function (element, options) { - this.options = $.extend({}, $.fn.affix.defaults, options) - this.$window = $(window) - .on('scroll.affix.data-api', $.proxy(this.checkPosition, this)) - .on('click.affix.data-api', $.proxy(function () { setTimeout($.proxy(this.checkPosition, this), 1) }, this)) - this.$element = $(element) - this.checkPosition() - } - - Affix.prototype.checkPosition = function () { - if (!this.$element.is(':visible')) return - - var scrollHeight = $(document).height() - , scrollTop = this.$window.scrollTop() - , position = this.$element.offset() - , offset = this.options.offset - , offsetBottom = offset.bottom - , offsetTop = offset.top - , reset = 'affix affix-top affix-bottom' - , affix - - if (typeof offset != 'object') offsetBottom = offsetTop = offset - if (typeof offsetTop == 'function') offsetTop = offset.top() - if (typeof offsetBottom == 'function') offsetBottom = offset.bottom() - - affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ? - false : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? - 'bottom' : offsetTop != null && scrollTop <= offsetTop ? - 'top' : false - - if (this.affixed === affix) return - - this.affixed = affix - this.unpin = affix == 'bottom' ? position.top - scrollTop : null - - this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : '')) - } - - - /* AFFIX PLUGIN DEFINITION - * ======================= */ - - var old = $.fn.affix - - $.fn.affix = function (option) { - return this.each(function () { - var $this = $(this) - , data = $this.data('affix') - , options = typeof option == 'object' && option - if (!data) $this.data('affix', (data = new Affix(this, options))) - if (typeof option == 'string') data[option]() - }) - } - - $.fn.affix.Constructor = Affix - - $.fn.affix.defaults = { - offset: 0 - } - - - /* AFFIX NO CONFLICT - * ================= */ - - $.fn.affix.noConflict = function () { - $.fn.affix = old - return this - } - - - /* AFFIX DATA-API - * ============== */ - - $(window).on('load', function () { - $('[data-spy="affix"]').each(function () { - var $spy = $(this) - , data = $spy.data() - - data.offset = data.offset || {} - - data.offsetBottom && (data.offset.bottom = data.offsetBottom) - data.offsetTop && (data.offset.top = data.offsetTop) - - $spy.affix(data) - }) - }) - - -}(window.jQuery); diff --git a/docs/assets/js/bootstrap-carousel.js b/docs/assets/js/bootstrap-carousel.js deleted file mode 100644 index 0dfb70f8d..000000000 --- a/docs/assets/js/bootstrap-carousel.js +++ /dev/null @@ -1,207 +0,0 @@ -/* ========================================================== - * bootstrap-carousel.js v3.0.0 - * http://twitter.github.com/bootstrap/javascript.html#carousel - * ========================================================== - * Copyright 2012 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ========================================================== */ - - -!function ($) { - - "use strict"; // jshint ;_; - - - /* CAROUSEL CLASS DEFINITION - * ========================= */ - - var Carousel = function (element, options) { - this.$element = $(element) - this.$indicators = this.$element.find('.carousel-indicators') - this.options = options - this.options.pause == 'hover' && this.$element - .on('mouseenter', $.proxy(this.pause, this)) - .on('mouseleave', $.proxy(this.cycle, this)) - } - - Carousel.prototype = { - - cycle: function (e) { - if (!e) this.paused = false - if (this.interval) clearInterval(this.interval); - this.options.interval - && !this.paused - && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) - return this - } - - , getActiveIndex: function () { - this.$active = this.$element.find('.item.active') - this.$items = this.$active.parent().children() - return this.$items.index(this.$active) - } - - , to: function (pos) { - var activeIndex = this.getActiveIndex() - , that = this - - if (pos > (this.$items.length - 1) || pos < 0) return - - if (this.sliding) { - return this.$element.one('slid', function () { - that.to(pos) - }) - } - - if (activeIndex == pos) { - return this.pause().cycle() - } - - return this.slide(pos > activeIndex ? 'next' : 'prev', $(this.$items[pos])) - } - - , pause: function (e) { - if (!e) this.paused = true - if (this.$element.find('.next, .prev').length && $.support.transition.end) { - this.$element.trigger($.support.transition.end) - this.cycle(true) - } - clearInterval(this.interval) - this.interval = null - return this - } - - , next: function () { - if (this.sliding) return - return this.slide('next') - } - - , prev: function () { - if (this.sliding) return - return this.slide('prev') - } - - , slide: function (type, next) { - var $active = this.$element.find('.item.active') - , $next = next || $active[type]() - , isCycling = this.interval - , direction = type == 'next' ? 'left' : 'right' - , fallback = type == 'next' ? 'first' : 'last' - , that = this - , e - - this.sliding = true - - isCycling && this.pause() - - $next = $next.length ? $next : this.$element.find('.item')[fallback]() - - e = $.Event('slide', { - relatedTarget: $next[0] - , direction: direction - }) - - if ($next.hasClass('active')) return - - if (this.$indicators.length) { - this.$indicators.find('.active').removeClass('active') - this.$element.one('slid', function () { - var $nextIndicator = $(that.$indicators.children()[that.getActiveIndex()]) - $nextIndicator && $nextIndicator.addClass('active') - }) - } - - if ($.support.transition && this.$element.hasClass('slide')) { - this.$element.trigger(e) - if (e.isDefaultPrevented()) return - $next.addClass(type) - $next[0].offsetWidth // force reflow - $active.addClass(direction) - $next.addClass(direction) - this.$element.one($.support.transition.end, function () { - $next.removeClass([type, direction].join(' ')).addClass('active') - $active.removeClass(['active', direction].join(' ')) - that.sliding = false - setTimeout(function () { that.$element.trigger('slid') }, 0) - }) - } else { - this.$element.trigger(e) - if (e.isDefaultPrevented()) return - $active.removeClass('active') - $next.addClass('active') - this.sliding = false - this.$element.trigger('slid') - } - - isCycling && this.cycle() - - return this - } - - } - - - /* CAROUSEL PLUGIN DEFINITION - * ========================== */ - - var old = $.fn.carousel - - $.fn.carousel = function (option) { - return this.each(function () { - var $this = $(this) - , data = $this.data('carousel') - , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option) - , action = typeof option == 'string' ? option : options.slide - if (!data) $this.data('carousel', (data = new Carousel(this, options))) - if (typeof option == 'number') data.to(option) - else if (action) data[action]() - else if (options.interval) data.pause().cycle() - }) - } - - $.fn.carousel.defaults = { - interval: 5000 - , pause: 'hover' - } - - $.fn.carousel.Constructor = Carousel - - - /* CAROUSEL NO CONFLICT - * ==================== */ - - $.fn.carousel.noConflict = function () { - $.fn.carousel = old - return this - } - - /* CAROUSEL DATA-API - * ================= */ - - $(document).on('click.carousel.data-api', '[data-slide], [data-slide-to]', function (e) { - var $this = $(this), href - , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7 - , options = $.extend({}, $target.data(), $this.data()) - , slideIndex - - $target.carousel(options) - - if (slideIndex = $this.attr('data-slide-to')) { - $target.data('carousel').pause().to(slideIndex).cycle() - } - - e.preventDefault() - }) - -}(window.jQuery); diff --git a/docs/assets/js/bootstrap-collapse.js b/docs/assets/js/bootstrap-collapse.js deleted file mode 100644 index 7bd40c233..000000000 --- a/docs/assets/js/bootstrap-collapse.js +++ /dev/null @@ -1,167 +0,0 @@ -/* ============================================================= - * bootstrap-collapse.js v3.0.0 - * http://twitter.github.com/bootstrap/javascript.html#collapse - * ============================================================= - * Copyright 2012 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============================================================ */ - - -!function ($) { - - "use strict"; // jshint ;_; - - - /* COLLAPSE PUBLIC CLASS DEFINITION - * ================================ */ - - var Collapse = function (element, options) { - this.$element = $(element) - this.options = $.extend({}, $.fn.collapse.defaults, options) - - if (this.options.parent) { - this.$parent = $(this.options.parent) - } - - this.options.toggle && this.toggle() - } - - Collapse.prototype = { - - constructor: Collapse - - , dimension: function () { - var hasWidth = this.$element.hasClass('width') - return hasWidth ? 'width' : 'height' - } - - , show: function () { - var dimension - , scroll - , actives - , hasData - - if (this.transitioning || this.$element.hasClass('in')) return - - dimension = this.dimension() - scroll = $.camelCase(['scroll', dimension].join('-')) - actives = this.$parent && this.$parent.find('> .accordion-group > .in') - - if (actives && actives.length) { - hasData = actives.data('collapse') - if (hasData && hasData.transitioning) return - actives.collapse('hide') - hasData || actives.data('collapse', null) - } - - this.$element[dimension](0) - this.transition('addClass', $.Event('show'), 'shown') - $.support.transition && this.$element[dimension](this.$element[0][scroll]) - } - - , hide: function () { - var dimension - if (this.transitioning || !this.$element.hasClass('in')) return - dimension = this.dimension() - this.reset(this.$element[dimension]()) - this.transition('removeClass', $.Event('hide'), 'hidden') - this.$element[dimension](0) - } - - , reset: function (size) { - var dimension = this.dimension() - - this.$element - .removeClass('collapse') - [dimension](size || 'auto') - [0].offsetWidth - - this.$element[size !== null ? 'addClass' : 'removeClass']('collapse') - - return this - } - - , transition: function (method, startEvent, completeEvent) { - var that = this - , complete = function () { - if (startEvent.type == 'show') that.reset() - that.transitioning = 0 - that.$element.trigger(completeEvent) - } - - this.$element.trigger(startEvent) - - if (startEvent.isDefaultPrevented()) return - - this.transitioning = 1 - - this.$element[method]('in') - - $.support.transition && this.$element.hasClass('collapse') ? - this.$element.one($.support.transition.end, complete) : - complete() - } - - , toggle: function () { - this[this.$element.hasClass('in') ? 'hide' : 'show']() - } - - } - - - /* COLLAPSE PLUGIN DEFINITION - * ========================== */ - - var old = $.fn.collapse - - $.fn.collapse = function (option) { - return this.each(function () { - var $this = $(this) - , data = $this.data('collapse') - , options = $.extend({}, $.fn.collapse.defaults, $this.data(), typeof option == 'object' && option) - if (!data) $this.data('collapse', (data = new Collapse(this, options))) - if (typeof option == 'string') data[option]() - }) - } - - $.fn.collapse.defaults = { - toggle: true - } - - $.fn.collapse.Constructor = Collapse - - - /* COLLAPSE NO CONFLICT - * ==================== */ - - $.fn.collapse.noConflict = function () { - $.fn.collapse = old - return this - } - - - /* COLLAPSE DATA-API - * ================= */ - - $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) { - var $this = $(this), href - , target = $this.attr('data-target') - || e.preventDefault() - || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7 - , option = $(target).data('collapse') ? 'toggle' : $this.data() - $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed') - $(target).collapse(option) - }) - -}(window.jQuery); diff --git a/docs/assets/js/bootstrap-dropdown.js b/docs/assets/js/bootstrap-dropdown.js deleted file mode 100644 index 0b1663f48..000000000 --- a/docs/assets/js/bootstrap-dropdown.js +++ /dev/null @@ -1,165 +0,0 @@ -/* ============================================================ - * bootstrap-dropdown.js v3.0.0 - * http://twitter.github.com/bootstrap/javascript.html#dropdowns - * ============================================================ - * Copyright 2012 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ============================================================ */ - - -!function ($) { - - "use strict"; // jshint ;_; - - - /* DROPDOWN CLASS DEFINITION - * ========================= */ - - var toggle = '[data-toggle=dropdown]' - , Dropdown = function (element) { - var $el = $(element).on('click.dropdown.data-api', this.toggle) - $('html').on('click.dropdown.data-api', function () { - $el.parent().removeClass('open') - }) - } - - Dropdown.prototype = { - - constructor: Dropdown - - , toggle: function (e) { - var $this = $(this) - , $parent - , isActive - - if ($this.is('.disabled, :disabled')) return - - $parent = getParent($this) - - isActive = $parent.hasClass('open') - - clearMenus() - - if (!isActive) { - $parent.toggleClass('open') - } - - $this.focus() - - return false - } - - , keydown: function (e) { - var $this - , $items - , $active - , $parent - , isActive - , index - - if (!/(38|40|27)/.test(e.keyCode)) return - - $this = $(this) - - e.preventDefault() - e.stopPropagation() - - if ($this.is('.disabled, :disabled')) return - - $parent = getParent($this) - - isActive = $parent.hasClass('open') - - if (!isActive || (isActive && e.keyCode == 27)) { - if (e.which == 27) $parent.find(toggle).focus() - return $this.click() - } - - $items = $('[role=menu] li:not(.divider):visible a', $parent) - - if (!$items.length) return - - index = $items.index($items.filter(':focus')) - - if (e.keyCode == 38 && index > 0) index-- // up - if (e.keyCode == 40 && index < $items.length - 1) index++ // down - if (!~index) index = 0 - - $items - .eq(index) - .focus() - } - - } - - function clearMenus() { - $(toggle).each(function () { - getParent($(this)).removeClass('open') - }) - } - - function getParent($this) { - var selector = $this.attr('data-target') - , $parent - - if (!selector) { - selector = $this.attr('href') - selector = selector && /#/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 - } - - $parent = selector && $(selector) - - if (!$parent || !$parent.length) $parent = $this.parent() - - return $parent - } - - - /* DROPDOWN PLUGIN DEFINITION - * ========================== */ - - var old = $.fn.dropdown - - $.fn.dropdown = function (option) { - return this.each(function () { - var $this = $(this) - , data = $this.data('dropdown') - if (!data) $this.data('dropdown', (data = new Dropdown(this))) - if (typeof option == 'string') data[option].call($this) - }) - } - - $.fn.dropdown.Constructor = Dropdown - - - /* DROPDOWN NO CONFLICT - * ==================== */ - - $.fn.dropdown.noConflict = function () { - $.fn.dropdown = old - return this - } - - - /* APPLY TO STANDARD DROPDOWN ELEMENTS - * =================================== */ - - $(document) - .on('click.dropdown.data-api', clearMenus) - .on('click.dropdown.data-api', '.dropdown form', 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) - -}(window.jQuery); diff --git a/docs/assets/js/bootstrap-modal.js b/docs/assets/js/bootstrap-modal.js deleted file mode 100644 index 34249a406..000000000 --- a/docs/assets/js/bootstrap-modal.js +++ /dev/null @@ -1,251 +0,0 @@ -/* ========================================================= - * bootstrap-modal.js v3.0.0 - * http://twitter.github.com/bootstrap/javascript.html#modals - * ========================================================= - * Copyright 2012 Twitter, Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ========================================================= */ - - -!function ($) { - - "use strict"; // jshint ;_; - - - /* MODAL CLASS DEFINITION - * ====================== */ - - var Modal = function (element, options) { - this.options = options - this.$element = $(element) - .delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this)) - this.options.remote && this.$element.find('.modal-body').load(this.options.remote) - } - - Modal.prototype = { - - constructor: Modal - - , toggle: function () { - return this[!this.isShown ? 'show' : 'hide']() - } - - , show: function () { - var that = this - , e = $.Event('show') - - this.$element.trigger(e) - - if (this.isShown || e.isDefaultPrevented()) return - - this.isShown = true - - this.escape() - - this.backdrop(function () { - var transition = $.support.transition && that.$element.hasClass('fade') - - if (!that.$element.parent().length) { - that.$element.appendTo(document.body) //don't move modals dom position - } - - that.$element.show() - - if (transition) { - that.$element[0].offsetWidth // force reflow - } - - that.$element - .addClass('in') - .attr('aria-hidden', false) - - that.enforceFocus() - - transition ? - that.$element.one($.support.transition.end, function () { that.$element.focus().trigger('shown') }) : - that.$element.focus().trigger('shown') - - }) - } - - , hide: function (e) { - e && e.preventDefault() - - var that = this - - e = $.Event('hide') - - this.$element.trigger(e) - - if (!this.isShown || e.isDefaultPrevented()) return - - this.isShown = false - - this.escape() - - $(document).off('focusin.modal') - - this.$element - .removeClass('in') - .attr('aria-hidden', true) - - $.support.transition && this.$element.hasClass('fade') ? - this.hideWithTransition() : - this.hideModal() - } - - , enforceFocus: function () { - var that = this - $(document).on('focusin.modal', function (e) { - if (that.$element[0] !== e.target && !that.$element.has(e.target).length) { - that.$element.focus() - } - }) - } - - , escape: function () { - var that = this - if (this.isShown && this.options.keyboard) { - this.$element.on('keyup.dismiss.modal', function ( e ) { - e.which == 27 && that.hide() - }) - } else if (!this.isShown) { - this.$element.off('keyup.dismiss.modal') - } - } - - , hideWithTransition: function () { - var that = this - , timeout = setTimeout(function () { - that.$element.off($.support.transition.end) - that.hideModal() - }, 500) - - this.$element.one($.support.transition.end, function () { - clearTimeout(timeout) - that.hideModal() - }) - } - - , hideModal: function () { - var that = this - this.$element.hide() - this.backdrop(function () { - that.removeBackdrop() - that.$element.trigger('hidden') - }) - } - - , removeBackdrop: function () { - this.$backdrop && this.$backdrop.remove() - this.$backdrop = null - } - - , backdrop: function (callback) { - var that = this - , animate = this.$element.hasClass('fade') ? 'fade' : '' - - if (this.isShown && this.options.backdrop) { - var doAnimate = $.support.transition && animate - - this.$backdrop = $('