├── .gitignore ├── LICENSE ├── Makefile ├── README.md ├── bootstrap.css ├── bootstrap.min.css ├── build.bat ├── build ├── BatchSubstitute.bat ├── less.js └── lessc.wsf ├── docs ├── assets │ ├── css │ │ └── docs.css │ ├── ico │ │ ├── bootstrap-apple-114x114.png │ │ ├── bootstrap-apple-57x57.png │ │ ├── bootstrap-apple-72x72.png │ │ └── favicon.ico │ ├── img │ │ ├── bird.png │ │ ├── browsers.png │ │ ├── example-diagram-01.png │ │ ├── example-diagram-02.png │ │ ├── example-diagram-03.png │ │ ├── grid-18px.png │ │ └── twitter-logo-no-bird.png │ └── js │ │ ├── application.js │ │ └── google-code-prettify │ │ ├── prettify.css │ │ └── prettify.js ├── index.html └── javascript.html ├── examples ├── container-app.html ├── fluid.html └── hero.html ├── fonts ├── iconic_stroke.eot ├── iconic_stroke.svg ├── iconic_stroke.ttf └── iconic_stroke.woff ├── js ├── bootstrap-alerts.js ├── bootstrap-buttons.js ├── bootstrap-dropdown.js ├── bootstrap-modal.js ├── bootstrap-popover.js ├── bootstrap-scrollspy.js ├── bootstrap-tabs.js ├── bootstrap-twipsy.js └── tests │ ├── index.html │ ├── unit │ ├── bootstrap-alerts.js │ ├── bootstrap-buttons.js │ ├── bootstrap-dropdown.js │ ├── bootstrap-modal.js │ ├── bootstrap-popover.js │ ├── bootstrap-scrollspy.js │ ├── bootstrap-tabs.js │ └── bootstrap-twipsy.js │ └── vendor │ ├── qunit.css │ └── qunit.js └── lib ├── bootstrap.less ├── bootstrap_xtra.less ├── forms.less ├── mixins.less ├── mixins_xtra.less ├── patterns.less ├── patterns_xtra.less ├── reset.less ├── scaffolding.less ├── tables.less ├── type.less ├── type_xtra.less ├── variables.less └── variables_xtra.less /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | .DS_Store 3 | thumbs.db 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | VERSION=1.4.0 2 | DATE=$(shell DATE) 3 | BOOTSTRAP = ./bootstrap.css 4 | BOOTSTRAP_MIN = ./bootstrap.min.css 5 | BOOTSTRAP_LESS = ./lib/bootstrap.less 6 | LESS_COMPRESSOR ?= `which lessc` 7 | WATCHR ?= `which watchr` 8 | 9 | build: 10 | @@if test ! -z ${LESS_COMPRESSOR}; then \ 11 | sed -e 's/@VERSION/'"v${VERSION}"'/' -e 's/@DATE/'"${DATE}"'/' <${BOOTSTRAP_LESS} >${BOOTSTRAP_LESS}.tmp; \ 12 | lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP}; \ 13 | lessc ${BOOTSTRAP_LESS}.tmp > ${BOOTSTRAP_MIN} --compress; \ 14 | rm -f ${BOOTSTRAP_LESS}.tmp; \ 15 | echo "Bootstrap successfully built! - `date`"; \ 16 | else \ 17 | echo "You must have the LESS compiler installed in order to build Bootstrap."; \ 18 | echo "You can install it by running: npm install less -g"; \ 19 | fi 20 | 21 | watch: 22 | @@if test ! -z ${WATCHR}; then \ 23 | echo "Watching less files..."; \ 24 | watchr -e "watch('lib/.*\.less') { system 'make' }"; \ 25 | else \ 26 | echo "You must have the watchr installed in order to watch Bootstrap less files."; \ 27 | echo "You can install it by running: gem install watchr"; \ 28 | fi 29 | 30 | .PHONY: build watch -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | TWITTER BOOTSTRAP 2 | ================= 3 | 4 | Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more. 5 | 6 | To get started -- checkout http://twitter.github.com/bootstrap! 7 | 8 | 9 | Usage 10 | ----- 11 | 12 | You can use Twitter Bootstrap in one of two ways: just drop the compiled CSS into any new project and start cranking, or run LESS on your site and compile on the fly like a boss. 13 | 14 | Here's what the LESS version looks like: 15 | 16 | ``` html 17 | 18 | 19 | ``` 20 | 21 | Or if you prefer, the standard css way: 22 | 23 | ``` html 24 | 25 | ``` 26 | 27 | For more info, refer to the docs! 28 | 29 | 30 | Versioning 31 | ---------- 32 | 33 | For transparency and insight into our release cycle, and for striving to maintain backwards compatibility, Bootstrap will be maintained under the Semantic Versioning guidelines as much as possible. 34 | 35 | Releases will be numbered with the follow format: 36 | 37 | `..` 38 | 39 | And constructed with the following guidelines: 40 | 41 | * Breaking backwards compatibility bumps the major 42 | * New additions without breaking backwards compatibility bumps the minor 43 | * Bug fixes and misc changes bump the patch 44 | 45 | For more information on SemVer, please visit http://semver.org/. 46 | 47 | 48 | Bug tracker 49 | ----------- 50 | 51 | Have a bug? Please create an issue here on GitHub! 52 | 53 | https://github.com/twitter/bootstrap/issues 54 | 55 | 56 | Twitter account 57 | --------------- 58 | 59 | Keep up to date on announcements and more by following Bootstrap on Twitter, @TwBootstrap. 60 | 61 | 62 | Mailing list 63 | ------------ 64 | 65 | Have a question? Ask on our mailing list! 66 | 67 | twitter-bootstrap@googlegroups.com 68 | 69 | http://groups.google.com/group/twitter-bootstrap 70 | 71 | 72 | Developers 73 | ---------- 74 | 75 | We have included a makefile with convenience methods for working with the bootstrap library. 76 | 77 | + **build** - `make build` 78 | This will run the less compiler on the bootstrap lib and generate a bootstrap.css and bootstrap.min.css file. 79 | The lessc compiler is required for this command to run. 80 | 81 | + **watch** - `make watch` 82 | This is a convenience method for watching your less files and automatically building them whenever you save. 83 | Watchr is required for this command to run. 84 | 85 | 86 | Authors 87 | ------- 88 | 89 | **Mark Otto** 90 | 91 | + http://twitter.com/mdo 92 | + http://github.com/markdotto 93 | 94 | **Jacob Thornton** 95 | 96 | + http://twitter.com/fat 97 | + http://github.com/fat 98 | 99 | 100 | License 101 | --------------------- 102 | 103 | Copyright 2011 Twitter, Inc. 104 | 105 | Licensed under the Apache License, Version 2.0: http://www.apache.org/licenses/LICENSE-2.0 -------------------------------------------------------------------------------- /build.bat: -------------------------------------------------------------------------------- 1 | call .\build\BatchSubstitute.bat "@VERSION" "1.4.0" .\lib\bootstrap_xtra.less > .\lib\bootstrap_xtra.tmp.less 2 | call .\build\BatchSubstitute.bat "@DATE" "%date% %time%" .\lib\bootstrap_xtra.tmp.less > .\lib\bootstrap_xtra.tmp.1.less 3 | cd lib 4 | @cscript //nologo "../build/lessc.wsf" bootstrap_xtra.tmp.1.less ../bootstrap.css 5 | @cscript //nologo "../build/lessc.wsf" bootstrap_xtra.tmp.1.less ../bootstrap.min.css -compress 6 | del /f bootstrap_xtra.tmp.less 7 | del /f bootstrap_xtra.tmp.1.less 8 | cd .. -------------------------------------------------------------------------------- /build/BatchSubstitute.bat: -------------------------------------------------------------------------------- 1 | @echo off 2 | REM -- Prepare the Command Processor -- 3 | SETLOCAL ENABLEEXTENSIONS 4 | SETLOCAL DISABLEDELAYEDEXPANSION 5 | 6 | ::BatchSubstitude - parses a File line by line and replaces a substring" 7 | ::syntax: BatchSubstitude.bat OldStr NewStr File 8 | :: OldStr [in] - string to be replaced 9 | :: NewStr [in] - string to replace with 10 | :: File [in] - file to be parsed 11 | :$changed 20100115 12 | :$source http://www.dostips.com 13 | if "%~1"=="" findstr "^::" "%~f0"&GOTO:EOF 14 | for /f "tokens=1,* delims=]" %%A in ('"type %3|find /n /v """') do ( 15 | set "line=%%B" 16 | if defined line ( 17 | call set "line=echo.%%line:%~1=%~2%%" 18 | for /f "delims=" %%X in ('"echo."%%line%%""') do %%~X 19 | ) ELSE echo. 20 | ) 21 | -------------------------------------------------------------------------------- /build/lessc.wsf: -------------------------------------------------------------------------------- 1 | 8 | 9 | 77 | 78 | 79 | 154 | -------------------------------------------------------------------------------- /docs/assets/css/docs.css: -------------------------------------------------------------------------------- 1 | /* Add additional stylesheets below 2 | -------------------------------------------------- */ 3 | /* 4 | Bootstrap's documentation styles 5 | Special styles for presenting Bootstrap's documentation and examples 6 | */ 7 | 8 | /* Body and structure 9 | -------------------------------------------------- */ 10 | body { 11 | background-color: #fff; 12 | position: relative; 13 | } 14 | section { 15 | padding-top: 60px; 16 | } 17 | section > .row { 18 | margin-bottom: 10px; 19 | } 20 | 21 | 22 | /* Jumbotrons 23 | -------------------------------------------------- */ 24 | .jumbotron { 25 | min-width: 940px; 26 | padding-top: 40px; 27 | } 28 | .jumbotron .inner { 29 | background: transparent url(../img/grid-18px.png) top center; 30 | padding: 45px 0; 31 | -webkit-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); 32 | -moz-box-shadow: inset 0 10px 30px rgba(0,0,0,.3); 33 | /* box-shadow: inset 0 10px 30px rgba(0,0,0,.3); 34 | */} 35 | .jumbotron h1, 36 | .jumbotron p { 37 | margin-bottom: 9px; 38 | color: #fff; 39 | text-align: center; 40 | text-shadow: 0 1px 1px rgba(0,0,0,.3); 41 | } 42 | .jumbotron h1 { 43 | font-size: 54px; 44 | line-height: 1; 45 | text-shadow: 0 1px 2px rgba(0,0,0,.5); 46 | } 47 | .jumbotron p { 48 | font-weight: 300; 49 | } 50 | .jumbotron .lead { 51 | font-size: 20px; 52 | line-height: 27px; 53 | } 54 | .jumbotron p a { 55 | color: #fff; 56 | font-weight: bold; 57 | } 58 | 59 | /* Specific jumbotrons 60 | ------------------------- */ 61 | /* main docs page */ 62 | .masthead { 63 | background-color: #049cd9; 64 | background-repeat: no-repeat; 65 | background-image: -webkit-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); 66 | background-image: -webkit-linear-gradient(#004D9F, #049cd9); 67 | background-image: -moz-linear-gradient(#004D9F, #049cd9); 68 | background-image: -o-linear-gradient(top, #004D9F, #049cd9); 69 | background-image: -khtml-gradient(linear, left top, left bottom, from(#004D9F), to(#049cd9)); 70 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004D9F', endColorstr='#049cd9', GradientType=0); /* IE8 and down */ 71 | } 72 | /* supporting docs pages */ 73 | .subhead { 74 | background-color: #767d80; 75 | background-repeat: no-repeat; 76 | background-image: -webkit-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); 77 | background-image: -webkit-linear-gradient(#565d60, #767d80); 78 | background-image: -moz-linear-gradient(#565d60, #767d80); 79 | background-image: -o-linear-gradient(top, #565d60, #767d80); 80 | background-image: -khtml-gradient(linear, left top, left bottom, from(#565d60), to(#767d80)); 81 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565d60', endColorstr='#767d80', GradientType=0); /* IE8 and down */ 82 | } 83 | .subhead .inner { 84 | padding: 36px 0 27px; 85 | } 86 | .subhead h1, 87 | .subhead p { 88 | text-align: left; 89 | } 90 | .subhead h1 { 91 | font-size: 40px; 92 | } 93 | .subhead p a { 94 | font-weight: normal; 95 | } 96 | 97 | 98 | /* Footer 99 | -------------------------------------------------- */ 100 | .footer { 101 | background-color: #eee; 102 | min-width: 940px; 103 | padding: 30px 0; 104 | text-shadow: 0 1px 0 #fff; 105 | border-top: 1px solid #e5e5e5; 106 | -webkit-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); 107 | -moz-box-shadow: inset 0 5px 15px rgba(0,0,0,.025); 108 | /* box-shadow: inset 0 5px 15px rgba(0,0,0,.025); 109 | */} 110 | .footer p { 111 | color: #555; 112 | } 113 | 114 | 115 | /* Quickstart section for getting le code 116 | -------------------------------------------------- */ 117 | .quickstart { 118 | background-color: #f5f5f5; 119 | background-repeat: repeat-x; 120 | background-image: -khtml-gradient(linear, left top, left bottom, from(#f9f9f9), to(#f5f5f5)); 121 | background-image: -moz-linear-gradient(#f9f9f9, #f5f5f5); 122 | background-image: -ms-linear-gradient(#f9f9f9, #f5f5f5); 123 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f9f9f9), color-stop(100%, #f5f5f5)); 124 | background-image: -webkit-linear-gradient(#f9f9f9, #f5f5f5); 125 | background-image: -o-linear-gradient(#f9f9f9, #f5f5f5); 126 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0)"; 127 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#f5f5f5', GradientType=0); 128 | background-image: linear-gradient(#f9f9f9, #f5f5f5); 129 | border-top: 1px solid #fff; 130 | border-bottom: 1px solid #eee; 131 | } 132 | .quickstart .container { 133 | margin-bottom: 0; 134 | } 135 | .quickstart .row { 136 | margin: 0 -20px; 137 | -webkit-box-shadow: 1px 0 0 #f9f9f9; 138 | -moz-box-shadow: 1px 0 0 #f9f9f9; 139 | box-shadow: 1px 0 0 #f9f9f9; 140 | } 141 | .quickstart [class*="span"] { 142 | width: 285px; 143 | height: 117px; 144 | margin-left: 0; 145 | padding: 17px 20px 26px; 146 | border-left: 1px solid #eee; 147 | -webkit-box-shadow: inset 1px 0 0 #f9f9f9; 148 | -moz-box-shadow: inset 1px 0 0 #f9f9f9; 149 | box-shadow: inset 1px 0 0 #f9f9f9; 150 | } 151 | .quickstart [class*="span"]:last-child { 152 | border-right: 1px solid #eee; 153 | width: 286px; 154 | } 155 | .quickstart h6, 156 | .quickstart p { 157 | line-height: 18px; 158 | text-align: center; 159 | margin-bottom: 9px; 160 | color: #333; 161 | } 162 | .quickstart .current-version, 163 | .quickstart .current-version a { 164 | color: #999; 165 | } 166 | .quickstart h6 { 167 | color: #999; 168 | } 169 | .quickstart textarea { 170 | display: block; 171 | width: 275px; 172 | height: auto; 173 | margin: 0 0 9px; 174 | line-height: 21px; 175 | white-space: nowrap; 176 | overflow: hidden; 177 | } 178 | 179 | 180 | /* Special grid styles 181 | -------------------------------------------------- */ 182 | .show-grid { 183 | margin-top: 10px; 184 | margin-bottom: 10px; 185 | } 186 | .show-grid [class*="span"] { 187 | background: #eee; 188 | text-align: center; 189 | -webkit-border-radius: 3px; 190 | -moz-border-radius: 3px; 191 | border-radius: 3px; 192 | min-height: 30px; 193 | line-height: 30px; 194 | } 195 | .show-grid:hover [class*="span"] { 196 | background: #ddd; 197 | } 198 | .show-grid .show-grid { 199 | margin-top: 0; 200 | margin-bottom: 0; 201 | } 202 | .show-grid .show-grid [class*="span"] { 203 | background-color: #ccc; 204 | } 205 | 206 | 207 | /* Render mini layout previews 208 | -------------------------------------------------- */ 209 | .mini-layout { 210 | border: 1px solid #ddd; 211 | -webkit-border-radius: 6px; 212 | -moz-border-radius: 6px; 213 | border-radius: 6px; 214 | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075); 215 | -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075); 216 | box-shadow: 0 1px 2px rgba(0,0,0,.075); 217 | } 218 | .mini-layout { 219 | height: 240px; 220 | margin-bottom: 20px; 221 | padding: 9px; 222 | } 223 | .mini-layout div { 224 | -webkit-border-radius: 3px; 225 | -moz-border-radius: 3px; 226 | border-radius: 3px; 227 | } 228 | .mini-layout .mini-layout-body { 229 | background-color: #dceaf4; 230 | margin: 0 auto; 231 | width: 240px; 232 | height: 240px; 233 | } 234 | .mini-layout.fluid .mini-layout-sidebar, 235 | .mini-layout.fluid .mini-layout-header, 236 | .mini-layout.fluid .mini-layout-body { 237 | float: left; 238 | } 239 | .mini-layout.fluid .mini-layout-sidebar { 240 | background-color: #bbd8e9; 241 | width: 90px; 242 | height: 240px; 243 | } 244 | .mini-layout.fluid .mini-layout-body { 245 | width: 300px; 246 | margin-left: 10px; 247 | } 248 | 249 | 250 | /* Topbar special styles 251 | -------------------------------------------------- */ 252 | .topbar-wrapper { 253 | position: relative; 254 | height: 40px; 255 | margin: 5px 0 15px; 256 | } 257 | .topbar-wrapper .topbar { 258 | position: absolute; 259 | margin: 0 -20px; 260 | } 261 | .topbar-wrapper .topbar .topbar-inner { 262 | padding-left: 20px; 263 | padding-right: 20px; 264 | -webkit-border-radius: 4px; 265 | -moz-border-radius: 4px; 266 | border-radius: 4px; 267 | } 268 | 269 | /* Topbar in js docs 270 | ------------------------- */ 271 | #bootstrap-js .topbar-wrapper { 272 | z-index: 1; 273 | } 274 | #bootstrap-js .topbar-wrapper .topbar { 275 | position: absolute; 276 | margin: 0 -20px; 277 | } 278 | #bootstrap-js .topbar-wrapper .topbar .topbar-inner { 279 | padding-left: 20px; 280 | padding-right: 20px; 281 | -webkit-border-radius: 4px; 282 | -moz-border-radius: 4px; 283 | border-radius: 4px; 284 | } 285 | #bootstrap-js .topbar-wrapper .container { 286 | width: auto; 287 | } 288 | 289 | 290 | /* Popover docs 291 | -------------------------------------------------- */ 292 | .popover-well { 293 | min-height: 160px; 294 | } 295 | .popover-well .popover { 296 | display: block; 297 | } 298 | .popover-well .popover-wrapper { 299 | width: 50%; 300 | height: 160px; 301 | float: left; 302 | margin-left: 55px; 303 | position: relative; 304 | } 305 | .popover-well .popover-menu-wrapper { 306 | height: 80px; 307 | } 308 | img.large-bird { 309 | margin: 5px 0 0 310px; 310 | opacity: .1; 311 | } 312 | 313 | /* Pretty Print 314 | -------------------------------------------------- */ 315 | pre.prettyprint { 316 | overflow: hidden; 317 | } 318 | 319 | /* Icon Buttons Grid 320 | -------------------------------------------------- */ 321 | .icon-grid { 322 | margin-left: 0px; 323 | } 324 | 325 | .icon-grid li { 326 | background-color: #F5F5F5; 327 | display: block; 328 | float: left; 329 | margin: 5px; 330 | padding: 15px 10px; 331 | text-align: center; 332 | min-width: 110px; 333 | } 334 | 335 | .icon-grid li code { 336 | display: block; 337 | margin-bottom: 15px; 338 | padding: 12px 3px; 339 | font-size: 11px; 340 | } 341 | 342 | .btn.icon.newcolor:before { 343 | color: #FFFF00; 344 | } 345 | -------------------------------------------------------------------------------- /docs/assets/ico/bootstrap-apple-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/ico/bootstrap-apple-114x114.png -------------------------------------------------------------------------------- /docs/assets/ico/bootstrap-apple-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/ico/bootstrap-apple-57x57.png -------------------------------------------------------------------------------- /docs/assets/ico/bootstrap-apple-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/ico/bootstrap-apple-72x72.png -------------------------------------------------------------------------------- /docs/assets/ico/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/ico/favicon.ico -------------------------------------------------------------------------------- /docs/assets/img/bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/img/bird.png -------------------------------------------------------------------------------- /docs/assets/img/browsers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/img/browsers.png -------------------------------------------------------------------------------- /docs/assets/img/example-diagram-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/img/example-diagram-01.png -------------------------------------------------------------------------------- /docs/assets/img/example-diagram-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/img/example-diagram-02.png -------------------------------------------------------------------------------- /docs/assets/img/example-diagram-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/img/example-diagram-03.png -------------------------------------------------------------------------------- /docs/assets/img/grid-18px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/img/grid-18px.png -------------------------------------------------------------------------------- /docs/assets/img/twitter-logo-no-bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/docs/assets/img/twitter-logo-no-bird.png -------------------------------------------------------------------------------- /docs/assets/js/application.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | 3 | // table sort example 4 | // ================== 5 | 6 | $("#sortTableExample").tablesorter( { sortList: [[ 1, 0 ]] } ) 7 | 8 | 9 | // add on logic 10 | // ============ 11 | 12 | $('.add-on :checkbox').click(function () { 13 | if ($(this).attr('checked')) { 14 | $(this).parents('.add-on').addClass('active') 15 | } else { 16 | $(this).parents('.add-on').removeClass('active') 17 | } 18 | }) 19 | 20 | 21 | // Disable certain links in docs 22 | // ============================= 23 | // Please do not carry these styles over to your projects, it's merely here to prevent button clicks form taking you away from your spot on page 24 | 25 | $('ul.tabs a, ul.pills a, .pagination a, .well .btn, .actions .btn, .alert-message .btn, a.close').click(function (e) { 26 | e.preventDefault() 27 | }) 28 | 29 | // Copy code blocks in docs 30 | $(".copy-code").focus(function () { 31 | var el = this; 32 | // push select to event loop for chrome :{o 33 | setTimeout(function () { $(el).select(); }, 0); 34 | }); 35 | 36 | 37 | // POSITION STATIC TWIPSIES 38 | // ======================== 39 | 40 | $(window).bind( 'load resize', function () { 41 | $(".twipsies a").each(function () { 42 | $(this) 43 | .twipsy({ 44 | live: false 45 | , placement: $(this).attr('title') 46 | , trigger: 'manual' 47 | , offset: 2 48 | }) 49 | .twipsy('show') 50 | }) 51 | }) 52 | }); 53 | -------------------------------------------------------------------------------- /docs/assets/js/google-code-prettify/prettify.css: -------------------------------------------------------------------------------- 1 | .com { color: #93a1a1; } 2 | .lit { color: #195f91; } 3 | .pun, .opn, .clo { color: #93a1a1; } 4 | .fun { color: #dc322f; } 5 | .str, .atv { color: #268bd2; } 6 | .kwd, .tag { color: #195f91; } 7 | .typ, .atn, .dec, .var { color: #CB4B16; } 8 | .pln { color: #93a1a1; } 9 | .prettyprint { 10 | background-color: #fefbf3; 11 | padding: 9px; 12 | border: 1px solid rgba(0,0,0,.2); 13 | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); 14 | -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1); 15 | box-shadow: 0 1px 2px rgba(0,0,0,.1); 16 | } 17 | 18 | /* Specify class=linenums on a pre to get line numbering */ 19 | ol.linenums { 20 | margin: 0 0 0 40px; 21 | } 22 | /* IE indents via margin-left */ 23 | ol.linenums li { 24 | padding: 0 5px; 25 | color: rgba(0,0,0,.15); 26 | line-height: 20px; 27 | -webkit-border-radius: 2px; 28 | -moz-border-radius: 2px; 29 | border-radius: 2px; 30 | } 31 | /* Alternate shading for lines */ 32 | li.L1, li.L3, li.L5, li.L7, li.L9 { } 33 | 34 | /* 35 | $base03: #002b36; 36 | $base02: #073642; 37 | $base01: #586e75; 38 | $base00: #657b83; 39 | $base0: #839496; 40 | $base1: #93a1a1; 41 | $base2: #eee8d5; 42 | $base3: #fdf6e3; 43 | $yellow: #b58900; 44 | $orange: #cb4b16; 45 | $red: #dc322f; 46 | $magenta: #d33682; 47 | $violet: #6c71c4; 48 | $blue: #268bd2; 49 | $cyan: #2aa198; 50 | $green: #859900; 51 | */ 52 | 53 | 54 | /* 55 | #1d1f21 Background 56 | #282a2e Current Line 57 | #373b41 Selection 58 | #c5c8c6 Foreground 59 | #969896 Comment 60 | #cc6666 Red 61 | #de935f Orange 62 | #f0c674 Yellow 63 | #b5bd68 Green 64 | #8abeb7 Aqua 65 | #81a2be Blue 66 | #b294bb Purple 67 | */ 68 | 69 | 70 | /* DARK THEME */ 71 | /* ---------- */ 72 | 73 | .prettyprint-dark { 74 | background-color: #1d1f21; 75 | border: 0; 76 | padding: 10px; 77 | } 78 | .prettyprint-dark .linenums li { 79 | color: #444; 80 | } 81 | .prettyprint-dark .linenums li:hover { 82 | background-color: #282a2e; 83 | } 84 | /* tags in html */ 85 | .prettyprint-dark .kwd, 86 | .prettyprint-dark .tag { color: #cc6666; } 87 | /* html attr */ 88 | .prettyprint-dark .typ, 89 | .prettyprint-dark .atn, 90 | .prettyprint-dark .dec, 91 | .prettyprint-dark .var { color: #de935f; } 92 | /* html attr values */ 93 | .prettyprint-dark .str, 94 | .prettyprint-dark .atv { color: #b5bd68; } 95 | -------------------------------------------------------------------------------- /docs/assets/js/google-code-prettify/prettify.js: -------------------------------------------------------------------------------- 1 | var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; 2 | (function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a= 3 | [],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;ci[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m), 9 | l=[],p={},d=0,g=e.length;d=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, 10 | q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/, 11 | q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g, 12 | "");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a), 13 | a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e} 14 | for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], 18 | "catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"], 19 | H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], 20 | J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+ 21 | I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]), 22 | ["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css", 23 | /^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}), 24 | ["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes", 25 | hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p=0){var k=k.match(g),f,b;if(b= 26 | !k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p 2 | 3 | 4 | 5 | Bootstrap, from Twitter 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 |
80 |
81 | Project name 82 | 87 |
88 | 89 | 90 | 91 |
92 |
93 |
94 |
95 | 96 |
97 | 98 |
99 |
100 |

Page name Supporting text or tagline

101 |
102 |
103 |
104 |

Main content

105 |
106 |
107 |

Secondary content

108 |
109 |
110 |
111 | 112 |
113 |

© Company 2011

114 |
115 | 116 |
117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /examples/fluid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bootstrap, from Twitter 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 |
34 | Project name 35 | 40 |

Logged in as username

41 |
42 |
43 |
44 | 45 |
46 |
47 |
48 |
Sidebar
49 | 55 |
Sidebar
56 | 64 |
Sidebar
65 | 69 |
70 |
71 |
72 | 73 |
74 |

Hello, world!

75 |

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

76 |

Learn more »

77 |
78 | 79 |
80 |
81 |

Heading

82 |

Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

83 |

View details »

84 |
85 |
86 |

Heading

87 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

88 |

View details »

89 |
90 |
91 |

Heading

92 |

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

93 |

View details »

94 |
95 |
96 |
97 | 98 |
99 |
100 |

Heading

101 |

Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

102 |

View details »

103 |
104 |
105 |

Heading

106 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

107 |

View details »

108 |
109 |
110 |

Heading

111 |

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

112 |

View details »

113 |
114 |
115 |
116 |

© Company 2011

117 |
118 |
119 |
120 | 121 | 122 | -------------------------------------------------------------------------------- /examples/hero.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bootstrap, from Twitter 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 |
34 | Project name 35 | 40 |
41 |
42 |
43 | 44 |
45 | 46 | 47 |
48 |

Hello, world!

49 |

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

50 |

Learn more »

51 |
52 | 53 | 54 |
55 |
56 |

Heading

57 |

Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

58 |

View details »

59 |
60 |
61 |

Heading

62 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

63 |

View details »

64 |
65 |
66 |

Heading

67 |

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

68 |

View details »

69 |
70 |
71 | 72 |
73 |

© Company 2011

74 |
75 | 76 |
77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /fonts/iconic_stroke.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/fonts/iconic_stroke.eot -------------------------------------------------------------------------------- /fonts/iconic_stroke.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG webfont generated by Font Squirrel. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /fonts/iconic_stroke.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/fonts/iconic_stroke.ttf -------------------------------------------------------------------------------- /fonts/iconic_stroke.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lightglitch/bootstrap-xtra/f0930cce924cc6b26b5113ab6f6a8610458fe5a2/fonts/iconic_stroke.woff -------------------------------------------------------------------------------- /js/bootstrap-alerts.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * bootstrap-alerts.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#alerts 4 | * ========================================================== 5 | * Copyright 2011 Twitter, Inc. 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ========================================================== */ 19 | 20 | 21 | !function( $ ){ 22 | 23 | "use strict" 24 | 25 | /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) 26 | * ======================================================= */ 27 | 28 | var transitionEnd 29 | 30 | $(document).ready(function () { 31 | 32 | $.support.transition = (function () { 33 | var thisBody = document.body || document.documentElement 34 | , thisStyle = thisBody.style 35 | , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined 36 | return support 37 | })() 38 | 39 | // set CSS transition event type 40 | if ( $.support.transition ) { 41 | transitionEnd = "TransitionEnd" 42 | if ( $.browser.webkit ) { 43 | transitionEnd = "webkitTransitionEnd" 44 | } else if ( $.browser.mozilla ) { 45 | transitionEnd = "transitionend" 46 | } else if ( $.browser.opera ) { 47 | transitionEnd = "oTransitionEnd" 48 | } 49 | } 50 | 51 | }) 52 | 53 | /* ALERT CLASS DEFINITION 54 | * ====================== */ 55 | 56 | var Alert = function ( content, options ) { 57 | if (options == 'close') return this.close.call(content) 58 | this.settings = $.extend({}, $.fn.alert.defaults, options) 59 | this.$element = $(content) 60 | .delegate(this.settings.selector, 'click', this.close) 61 | } 62 | 63 | Alert.prototype = { 64 | 65 | close: function (e) { 66 | var $element = $(this) 67 | , className = 'alert-message' 68 | 69 | $element = $element.hasClass(className) ? $element : $element.parent() 70 | 71 | e && e.preventDefault() 72 | $element.removeClass('in') 73 | 74 | function removeElement () { 75 | $element.remove() 76 | } 77 | 78 | $.support.transition && $element.hasClass('fade') ? 79 | $element.bind(transitionEnd, removeElement) : 80 | removeElement() 81 | } 82 | 83 | } 84 | 85 | 86 | /* ALERT PLUGIN DEFINITION 87 | * ======================= */ 88 | 89 | $.fn.alert = function ( options ) { 90 | 91 | if ( options === true ) { 92 | return this.data('alert') 93 | } 94 | 95 | return this.each(function () { 96 | var $this = $(this) 97 | , data 98 | 99 | if ( typeof options == 'string' ) { 100 | 101 | data = $this.data('alert') 102 | 103 | if (typeof data == 'object') { 104 | return data[options].call( $this ) 105 | } 106 | 107 | } 108 | 109 | $(this).data('alert', new Alert( this, options )) 110 | 111 | }) 112 | } 113 | 114 | $.fn.alert.defaults = { 115 | selector: '.close' 116 | } 117 | 118 | $(document).ready(function () { 119 | new Alert($('body'), { 120 | selector: '.alert-message[data-alert] .close' 121 | }) 122 | }) 123 | 124 | }( window.jQuery || window.ender ); -------------------------------------------------------------------------------- /js/bootstrap-buttons.js: -------------------------------------------------------------------------------- 1 | /* ============================================================ 2 | * bootstrap-buttons.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#buttons 4 | * ============================================================ 5 | * Copyright 2011 Twitter, Inc. 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ============================================================ */ 19 | 20 | !function( $ ){ 21 | 22 | "use strict" 23 | 24 | function setState(el, state) { 25 | var d = 'disabled' 26 | , $el = $(el) 27 | , data = $el.data() 28 | 29 | state = state + 'Text' 30 | data.resetText || $el.data('resetText', $el.html()) 31 | 32 | $el.html( data[state] || $.fn.button.defaults[state] ) 33 | 34 | state == 'loadingText' ? 35 | $el.addClass(d).attr(d, d) : 36 | $el.removeClass(d).removeAttr(d) 37 | } 38 | 39 | function toggle(el) { 40 | $(el).toggleClass('active') 41 | } 42 | 43 | $.fn.button = function(options) { 44 | return this.each(function () { 45 | if (options == 'toggle') { 46 | return toggle(this) 47 | } 48 | options && setState(this, options) 49 | }) 50 | } 51 | 52 | $.fn.button.defaults = { 53 | loadingText: 'loading...' 54 | } 55 | 56 | $(function () { 57 | $('body').delegate('.btn[data-toggle]', 'click', function () { 58 | $(this).button('toggle') 59 | }) 60 | }) 61 | 62 | }( window.jQuery || window.ender ); -------------------------------------------------------------------------------- /js/bootstrap-dropdown.js: -------------------------------------------------------------------------------- 1 | /* ============================================================ 2 | * bootstrap-dropdown.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#dropdown 4 | * ============================================================ 5 | * Copyright 2011 Twitter, Inc. 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ============================================================ */ 19 | 20 | 21 | !function( $ ){ 22 | 23 | "use strict" 24 | 25 | /* DROPDOWN PLUGIN DEFINITION 26 | * ========================== */ 27 | 28 | $.fn.dropdown = function ( selector ) { 29 | return this.each(function () { 30 | $(this).delegate(selector || d, 'click', function (e) { 31 | var li = $(this).parent('li') 32 | , isActive = li.hasClass('open') 33 | 34 | clearMenus() 35 | !isActive && li.toggleClass('open') 36 | return false 37 | }) 38 | }) 39 | } 40 | 41 | /* APPLY TO STANDARD DROPDOWN ELEMENTS 42 | * =================================== */ 43 | 44 | var d = 'a.menu, .dropdown-toggle' 45 | 46 | function clearMenus() { 47 | $(d).parent('li').removeClass('open') 48 | } 49 | 50 | $(function () { 51 | $('html').bind("click", clearMenus) 52 | $('body').dropdown( '[data-dropdown] a.menu, [data-dropdown] .dropdown-toggle' ) 53 | }) 54 | 55 | }( window.jQuery || window.ender ); 56 | -------------------------------------------------------------------------------- /js/bootstrap-modal.js: -------------------------------------------------------------------------------- 1 | /* ========================================================= 2 | * bootstrap-modal.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#modal 4 | * ========================================================= 5 | * Copyright 2011 Twitter, Inc. 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ========================================================= */ 19 | 20 | 21 | !function( $ ){ 22 | 23 | "use strict" 24 | 25 | /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) 26 | * ======================================================= */ 27 | 28 | var transitionEnd 29 | 30 | $(document).ready(function () { 31 | 32 | $.support.transition = (function () { 33 | var thisBody = document.body || document.documentElement 34 | , thisStyle = thisBody.style 35 | , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined 36 | return support 37 | })() 38 | 39 | // set CSS transition event type 40 | if ( $.support.transition ) { 41 | transitionEnd = "TransitionEnd" 42 | if ( $.browser.webkit ) { 43 | transitionEnd = "webkitTransitionEnd" 44 | } else if ( $.browser.mozilla ) { 45 | transitionEnd = "transitionend" 46 | } else if ( $.browser.opera ) { 47 | transitionEnd = "oTransitionEnd" 48 | } 49 | } 50 | 51 | }) 52 | 53 | 54 | /* MODAL PUBLIC CLASS DEFINITION 55 | * ============================= */ 56 | 57 | var Modal = function ( content, options ) { 58 | this.settings = $.extend({}, $.fn.modal.defaults, options) 59 | this.$element = $(content) 60 | .delegate('.close', 'click.modal', $.proxy(this.hide, this)) 61 | 62 | if ( this.settings.show ) { 63 | this.show() 64 | } 65 | 66 | return this 67 | } 68 | 69 | Modal.prototype = { 70 | 71 | toggle: function () { 72 | return this[!this.isShown ? 'show' : 'hide']() 73 | } 74 | 75 | , show: function () { 76 | var that = this 77 | this.isShown = true 78 | this.$element.trigger('show') 79 | 80 | escape.call(this) 81 | backdrop.call(this, function () { 82 | var transition = $.support.transition && that.$element.hasClass('fade') 83 | 84 | that.$element 85 | .appendTo(document.body) 86 | .show() 87 | 88 | if (transition) { 89 | that.$element[0].offsetWidth // force reflow 90 | } 91 | 92 | that.$element.addClass('in') 93 | 94 | transition ? 95 | that.$element.one(transitionEnd, function () { that.$element.trigger('shown') }) : 96 | that.$element.trigger('shown') 97 | 98 | }) 99 | 100 | return this 101 | } 102 | 103 | , hide: function (e) { 104 | e && e.preventDefault() 105 | 106 | if ( !this.isShown ) { 107 | return this 108 | } 109 | 110 | var that = this 111 | this.isShown = false 112 | 113 | escape.call(this) 114 | 115 | this.$element 116 | .trigger('hide') 117 | .removeClass('in') 118 | 119 | $.support.transition && this.$element.hasClass('fade') ? 120 | hideWithTransition.call(this) : 121 | hideModal.call(this) 122 | 123 | return this 124 | } 125 | 126 | } 127 | 128 | 129 | /* MODAL PRIVATE METHODS 130 | * ===================== */ 131 | 132 | function hideWithTransition() { 133 | // firefox drops transitionEnd events :{o 134 | var that = this 135 | , timeout = setTimeout(function () { 136 | that.$element.unbind(transitionEnd) 137 | hideModal.call(that) 138 | }, 500) 139 | 140 | this.$element.one(transitionEnd, function () { 141 | clearTimeout(timeout) 142 | hideModal.call(that) 143 | }) 144 | } 145 | 146 | function hideModal (that) { 147 | this.$element 148 | .hide() 149 | .trigger('hidden') 150 | 151 | backdrop.call(this) 152 | } 153 | 154 | function backdrop ( callback ) { 155 | var that = this 156 | , animate = this.$element.hasClass('fade') ? 'fade' : '' 157 | if ( this.isShown && this.settings.backdrop ) { 158 | var doAnimate = $.support.transition && animate 159 | 160 | this.$backdrop = $('
') 161 | .appendTo(document.body) 162 | 163 | if ( this.settings.backdrop != 'static' ) { 164 | this.$backdrop.click($.proxy(this.hide, this)) 165 | } 166 | 167 | if ( doAnimate ) { 168 | this.$backdrop[0].offsetWidth // force reflow 169 | } 170 | 171 | this.$backdrop.addClass('in') 172 | 173 | doAnimate ? 174 | this.$backdrop.one(transitionEnd, callback) : 175 | callback() 176 | 177 | } else if ( !this.isShown && this.$backdrop ) { 178 | this.$backdrop.removeClass('in') 179 | 180 | $.support.transition && this.$element.hasClass('fade')? 181 | this.$backdrop.one(transitionEnd, $.proxy(removeBackdrop, this)) : 182 | removeBackdrop.call(this) 183 | 184 | } else if ( callback ) { 185 | callback() 186 | } 187 | } 188 | 189 | function removeBackdrop() { 190 | this.$backdrop.remove() 191 | this.$backdrop = null 192 | } 193 | 194 | function escape() { 195 | var that = this 196 | if ( this.isShown && this.settings.keyboard ) { 197 | $(document).bind('keyup.modal', function ( e ) { 198 | if ( e.which == 27 ) { 199 | that.hide() 200 | } 201 | }) 202 | } else if ( !this.isShown ) { 203 | $(document).unbind('keyup.modal') 204 | } 205 | } 206 | 207 | 208 | /* MODAL PLUGIN DEFINITION 209 | * ======================= */ 210 | 211 | $.fn.modal = function ( options ) { 212 | var modal = this.data('modal') 213 | 214 | if (!modal) { 215 | 216 | if (typeof options == 'string') { 217 | options = { 218 | show: /show|toggle/.test(options) 219 | } 220 | } 221 | 222 | return this.each(function () { 223 | $(this).data('modal', new Modal(this, options)) 224 | }) 225 | } 226 | 227 | if ( options === true ) { 228 | return modal 229 | } 230 | 231 | if ( typeof options == 'string' ) { 232 | modal[options]() 233 | } else if ( modal ) { 234 | modal.toggle() 235 | } 236 | 237 | return this 238 | } 239 | 240 | $.fn.modal.Modal = Modal 241 | 242 | $.fn.modal.defaults = { 243 | backdrop: false 244 | , keyboard: false 245 | , show: false 246 | } 247 | 248 | 249 | /* MODAL DATA- IMPLEMENTATION 250 | * ========================== */ 251 | 252 | $(document).ready(function () { 253 | $('body').delegate('[data-controls-modal]', 'click', function (e) { 254 | e.preventDefault() 255 | var $this = $(this).data('show', true) 256 | $('#' + $this.attr('data-controls-modal')).modal( $this.data() ) 257 | }) 258 | }) 259 | 260 | }( window.jQuery || window.ender ); 261 | -------------------------------------------------------------------------------- /js/bootstrap-popover.js: -------------------------------------------------------------------------------- 1 | /* =========================================================== 2 | * bootstrap-popover.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#popover 4 | * =========================================================== 5 | * Copyright 2011 Twitter, Inc. 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * =========================================================== */ 19 | 20 | 21 | !function( $ ) { 22 | 23 | "use strict" 24 | 25 | var Popover = function ( element, options ) { 26 | this.$element = $(element) 27 | this.options = options 28 | this.enabled = true 29 | this.fixTitle() 30 | } 31 | 32 | /* NOTE: POPOVER EXTENDS BOOTSTRAP-TWIPSY.js 33 | ========================================= */ 34 | 35 | Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, { 36 | 37 | setContent: function () { 38 | var $tip = this.tip() 39 | $tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle()) 40 | $tip.find('.content > *')[this.options.html ? 'html' : 'text'](this.getContent()) 41 | $tip[0].className = 'popover' 42 | } 43 | 44 | , hasContent: function () { 45 | return this.getTitle() || this.getContent() 46 | } 47 | 48 | , getContent: function () { 49 | var content 50 | , $e = this.$element 51 | , o = this.options 52 | 53 | if (typeof this.options.content == 'string') { 54 | content = $e.attr(this.options.content) 55 | } else if (typeof this.options.content == 'function') { 56 | content = this.options.content.call(this.$element[0]) 57 | } 58 | 59 | return content 60 | } 61 | 62 | , tip: function() { 63 | if (!this.$tip) { 64 | this.$tip = $('
') 65 | .html(this.options.template) 66 | } 67 | return this.$tip 68 | } 69 | 70 | }) 71 | 72 | 73 | /* POPOVER PLUGIN DEFINITION 74 | * ======================= */ 75 | 76 | $.fn.popover = function (options) { 77 | if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options) 78 | $.fn.twipsy.initWith.call(this, options, Popover, 'popover') 79 | return this 80 | } 81 | 82 | $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { 83 | placement: 'right' 84 | , content: 'data-content' 85 | , template: '

' 86 | }) 87 | 88 | $.fn.twipsy.rejectAttrOptions.push( 'content' ) 89 | 90 | }( window.jQuery || window.ender ); 91 | -------------------------------------------------------------------------------- /js/bootstrap-scrollspy.js: -------------------------------------------------------------------------------- 1 | /* ============================================================= 2 | * bootstrap-scrollspy.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#scrollspy 4 | * ============================================================= 5 | * Copyright 2011 Twitter, Inc. 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ============================================================== */ 19 | 20 | 21 | !function ( $ ) { 22 | 23 | "use strict" 24 | 25 | var $window = $(window) 26 | 27 | function ScrollSpy( topbar, selector ) { 28 | var processScroll = $.proxy(this.processScroll, this) 29 | this.$topbar = $(topbar) 30 | this.selector = selector || 'li > a' 31 | this.refresh() 32 | this.$topbar.delegate(this.selector, 'click', processScroll) 33 | $window.scroll(processScroll) 34 | this.processScroll() 35 | } 36 | 37 | ScrollSpy.prototype = { 38 | 39 | refresh: function () { 40 | this.targets = this.$topbar.find(this.selector).map(function () { 41 | var href = $(this).attr('href') 42 | return /^#\w/.test(href) && $(href).length ? href : null 43 | }) 44 | 45 | this.offsets = $.map(this.targets, function (id) { 46 | return $(id).offset().top 47 | }) 48 | } 49 | 50 | , processScroll: function () { 51 | var scrollTop = $window.scrollTop() + 10 52 | , offsets = this.offsets 53 | , targets = this.targets 54 | , activeTarget = this.activeTarget 55 | , i 56 | 57 | for (i = offsets.length; i--;) { 58 | activeTarget != targets[i] 59 | && scrollTop >= offsets[i] 60 | && (!offsets[i + 1] || scrollTop <= offsets[i + 1]) 61 | && this.activateButton( targets[i] ) 62 | } 63 | } 64 | 65 | , activateButton: function (target) { 66 | this.activeTarget = target 67 | 68 | this.$topbar 69 | .find(this.selector).parent('.active') 70 | .removeClass('active') 71 | 72 | this.$topbar 73 | .find(this.selector + '[href="' + target + '"]') 74 | .parent('li') 75 | .addClass('active') 76 | } 77 | 78 | } 79 | 80 | /* SCROLLSPY PLUGIN DEFINITION 81 | * =========================== */ 82 | 83 | $.fn.scrollSpy = function( options ) { 84 | var scrollspy = this.data('scrollspy') 85 | 86 | if (!scrollspy) { 87 | return this.each(function () { 88 | $(this).data('scrollspy', new ScrollSpy( this, options )) 89 | }) 90 | } 91 | 92 | if ( options === true ) { 93 | return scrollspy 94 | } 95 | 96 | if ( typeof options == 'string' ) { 97 | scrollspy[options]() 98 | } 99 | 100 | return this 101 | } 102 | 103 | $(document).ready(function () { 104 | $('body').scrollSpy('[data-scrollspy] li > a') 105 | }) 106 | 107 | }( window.jQuery || window.ender ); -------------------------------------------------------------------------------- /js/bootstrap-tabs.js: -------------------------------------------------------------------------------- 1 | /* ======================================================== 2 | * bootstrap-tabs.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#tabs 4 | * ======================================================== 5 | * Copyright 2011 Twitter, Inc. 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | * 13 | * Unless required by applicable law or agreed to in writing, software 14 | * distributed under the License is distributed on an "AS IS" BASIS, 15 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 16 | * See the License for the specific language governing permissions and 17 | * limitations under the License. 18 | * ======================================================== */ 19 | 20 | 21 | !function( $ ){ 22 | 23 | "use strict" 24 | 25 | function activate ( element, container ) { 26 | container 27 | .find('> .active') 28 | .removeClass('active') 29 | .find('> .dropdown-menu > .active') 30 | .removeClass('active') 31 | 32 | element.addClass('active') 33 | 34 | if ( element.parent('.dropdown-menu') ) { 35 | element.closest('li.dropdown').addClass('active') 36 | } 37 | } 38 | 39 | function tab( e ) { 40 | var $this = $(this) 41 | , $ul = $this.closest('ul:not(.dropdown-menu)') 42 | , href = $this.attr('href') 43 | , previous 44 | , $href 45 | 46 | if ( /^#\w+/.test(href) ) { 47 | e.preventDefault() 48 | 49 | if ( $this.parent('li').hasClass('active') ) { 50 | return 51 | } 52 | 53 | previous = $ul.find('.active a').last()[0] 54 | $href = $(href) 55 | 56 | activate($this.parent('li'), $ul) 57 | activate($href, $href.parent()) 58 | 59 | $this.trigger({ 60 | type: 'change' 61 | , relatedTarget: previous 62 | }) 63 | } 64 | } 65 | 66 | 67 | /* TABS/PILLS PLUGIN DEFINITION 68 | * ============================ */ 69 | 70 | $.fn.tabs = $.fn.pills = function ( selector ) { 71 | return this.each(function () { 72 | $(this).delegate(selector || '.tabs li > a, .pills > li > a', 'click', tab) 73 | }) 74 | } 75 | 76 | $(document).ready(function () { 77 | $('body').tabs('ul[data-tabs] li > a, ul[data-pills] > li > a') 78 | }) 79 | 80 | }( window.jQuery || window.ender ); 81 | -------------------------------------------------------------------------------- /js/bootstrap-twipsy.js: -------------------------------------------------------------------------------- 1 | /* ========================================================== 2 | * bootstrap-twipsy.js v1.4.0 3 | * http://twitter.github.com/bootstrap/javascript.html#twipsy 4 | * Adapted from the original jQuery.tipsy by Jason Frame 5 | * ========================================================== 6 | * Copyright 2011 Twitter, Inc. 7 | * 8 | * Licensed under the Apache License, Version 2.0 (the "License"); 9 | * you may not use this file except in compliance with the License. 10 | * You may obtain a copy of the License at 11 | * 12 | * http://www.apache.org/licenses/LICENSE-2.0 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | * ========================================================== */ 20 | 21 | 22 | !function( $ ) { 23 | 24 | "use strict" 25 | 26 | /* CSS TRANSITION SUPPORT (https://gist.github.com/373874) 27 | * ======================================================= */ 28 | 29 | var transitionEnd 30 | 31 | $(document).ready(function () { 32 | 33 | $.support.transition = (function () { 34 | var thisBody = document.body || document.documentElement 35 | , thisStyle = thisBody.style 36 | , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined 37 | return support 38 | })() 39 | 40 | // set CSS transition event type 41 | if ( $.support.transition ) { 42 | transitionEnd = "TransitionEnd" 43 | if ( $.browser.webkit ) { 44 | transitionEnd = "webkitTransitionEnd" 45 | } else if ( $.browser.mozilla ) { 46 | transitionEnd = "transitionend" 47 | } else if ( $.browser.opera ) { 48 | transitionEnd = "oTransitionEnd" 49 | } 50 | } 51 | 52 | }) 53 | 54 | 55 | /* TWIPSY PUBLIC CLASS DEFINITION 56 | * ============================== */ 57 | 58 | var Twipsy = function ( element, options ) { 59 | this.$element = $(element) 60 | this.options = options 61 | this.enabled = true 62 | this.fixTitle() 63 | } 64 | 65 | Twipsy.prototype = { 66 | 67 | show: function() { 68 | var pos 69 | , actualWidth 70 | , actualHeight 71 | , placement 72 | , $tip 73 | , tp 74 | 75 | if (this.hasContent() && this.enabled) { 76 | $tip = this.tip() 77 | this.setContent() 78 | 79 | if (this.options.animate) { 80 | $tip.addClass('fade') 81 | } 82 | 83 | $tip 84 | .remove() 85 | .css({ top: 0, left: 0, display: 'block' }) 86 | .prependTo(document.body) 87 | 88 | pos = $.extend({}, this.$element.offset(), { 89 | width: this.$element[0].offsetWidth 90 | , height: this.$element[0].offsetHeight 91 | }) 92 | 93 | actualWidth = $tip[0].offsetWidth 94 | actualHeight = $tip[0].offsetHeight 95 | 96 | placement = maybeCall(this.options.placement, this, [ $tip[0], this.$element[0] ]) 97 | 98 | switch (placement) { 99 | case 'below': 100 | tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} 101 | break 102 | case 'above': 103 | tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2} 104 | break 105 | case 'left': 106 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset} 107 | break 108 | case 'right': 109 | tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset} 110 | break 111 | } 112 | 113 | $tip 114 | .css(tp) 115 | .addClass(placement) 116 | .addClass('in') 117 | } 118 | } 119 | 120 | , setContent: function () { 121 | var $tip = this.tip() 122 | $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle()) 123 | $tip[0].className = 'twipsy' 124 | } 125 | 126 | , hide: function() { 127 | var that = this 128 | , $tip = this.tip() 129 | 130 | $tip.removeClass('in') 131 | 132 | function removeElement () { 133 | $tip.remove() 134 | } 135 | 136 | $.support.transition && this.$tip.hasClass('fade') ? 137 | $tip.bind(transitionEnd, removeElement) : 138 | removeElement() 139 | } 140 | 141 | , fixTitle: function() { 142 | var $e = this.$element 143 | if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { 144 | $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title') 145 | } 146 | } 147 | 148 | , hasContent: function () { 149 | return this.getTitle() 150 | } 151 | 152 | , getTitle: function() { 153 | var title 154 | , $e = this.$element 155 | , o = this.options 156 | 157 | this.fixTitle() 158 | 159 | if (typeof o.title == 'string') { 160 | title = $e.attr(o.title == 'title' ? 'data-original-title' : o.title) 161 | } else if (typeof o.title == 'function') { 162 | title = o.title.call($e[0]) 163 | } 164 | 165 | title = ('' + title).replace(/(^\s*|\s*$)/, "") 166 | 167 | return title || o.fallback 168 | } 169 | 170 | , tip: function() { 171 | return this.$tip = this.$tip || $('
').html(this.options.template) 172 | } 173 | 174 | , validate: function() { 175 | if (!this.$element[0].parentNode) { 176 | this.hide() 177 | this.$element = null 178 | this.options = null 179 | } 180 | } 181 | 182 | , enable: function() { 183 | this.enabled = true 184 | } 185 | 186 | , disable: function() { 187 | this.enabled = false 188 | } 189 | 190 | , toggleEnabled: function() { 191 | this.enabled = !this.enabled 192 | } 193 | 194 | , toggle: function () { 195 | this[this.tip().hasClass('in') ? 'hide' : 'show']() 196 | } 197 | 198 | } 199 | 200 | 201 | /* TWIPSY PRIVATE METHODS 202 | * ====================== */ 203 | 204 | function maybeCall ( thing, ctx, args ) { 205 | return typeof thing == 'function' ? thing.apply(ctx, args) : thing 206 | } 207 | 208 | /* TWIPSY PLUGIN DEFINITION 209 | * ======================== */ 210 | 211 | $.fn.twipsy = function (options) { 212 | $.fn.twipsy.initWith.call(this, options, Twipsy, 'twipsy') 213 | return this 214 | } 215 | 216 | $.fn.twipsy.initWith = function (options, Constructor, name) { 217 | var twipsy 218 | , binder 219 | , eventIn 220 | , eventOut 221 | 222 | if (options === true) { 223 | return this.data(name) 224 | } else if (typeof options == 'string') { 225 | twipsy = this.data(name) 226 | if (twipsy) { 227 | twipsy[options]() 228 | } 229 | return this 230 | } 231 | 232 | options = $.extend({}, $.fn[name].defaults, options) 233 | 234 | function get(ele) { 235 | var twipsy = $.data(ele, name) 236 | 237 | if (!twipsy) { 238 | twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options)) 239 | $.data(ele, name, twipsy) 240 | } 241 | 242 | return twipsy 243 | } 244 | 245 | function enter() { 246 | var twipsy = get(this) 247 | twipsy.hoverState = 'in' 248 | 249 | if (options.delayIn == 0) { 250 | twipsy.show() 251 | } else { 252 | twipsy.fixTitle() 253 | setTimeout(function() { 254 | if (twipsy.hoverState == 'in') { 255 | twipsy.show() 256 | } 257 | }, options.delayIn) 258 | } 259 | } 260 | 261 | function leave() { 262 | var twipsy = get(this) 263 | twipsy.hoverState = 'out' 264 | if (options.delayOut == 0) { 265 | twipsy.hide() 266 | } else { 267 | setTimeout(function() { 268 | if (twipsy.hoverState == 'out') { 269 | twipsy.hide() 270 | } 271 | }, options.delayOut) 272 | } 273 | } 274 | 275 | if (!options.live) { 276 | this.each(function() { 277 | get(this) 278 | }) 279 | } 280 | 281 | if (options.trigger != 'manual') { 282 | binder = options.live ? 'live' : 'bind' 283 | eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus' 284 | eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur' 285 | this[binder](eventIn, enter)[binder](eventOut, leave) 286 | } 287 | 288 | return this 289 | } 290 | 291 | $.fn.twipsy.Twipsy = Twipsy 292 | 293 | $.fn.twipsy.defaults = { 294 | animate: true 295 | , delayIn: 0 296 | , delayOut: 0 297 | , fallback: '' 298 | , placement: 'above' 299 | , html: false 300 | , live: false 301 | , offset: 0 302 | , title: 'title' 303 | , trigger: 'hover' 304 | , template: '
' 305 | } 306 | 307 | $.fn.twipsy.rejectAttrOptions = [ 'title' ] 308 | 309 | $.fn.twipsy.elementOptions = function(ele, options) { 310 | var data = $(ele).data() 311 | , rejects = $.fn.twipsy.rejectAttrOptions 312 | , i = rejects.length 313 | 314 | while (i--) { 315 | delete data[rejects[i]] 316 | } 317 | 318 | return $.extend({}, options, data) 319 | } 320 | 321 | }( window.jQuery || window.ender ); -------------------------------------------------------------------------------- /js/tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bootstrap Plugin Test Suite 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |

Bootstrap Plugin Test Suite

34 |

35 |

36 |
    37 |
    38 |
    39 | 40 | -------------------------------------------------------------------------------- /js/tests/unit/bootstrap-alerts.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | module("bootstrap-alerts") 4 | 5 | test("should be defined on jquery object", function () { 6 | ok($(document.body).alert, 'alert method is defined') 7 | }) 8 | 9 | test("should return element", function () { 10 | ok($(document.body).alert()[0] == document.body, 'document.body returned') 11 | }) 12 | 13 | test("should fade element out on clicking .close", function () { 14 | var alertHTML = '
    ' 15 | + '×' 16 | + '

    Holy guacamole! Best check yo self, you’re not looking too good.

    ' 17 | + '
    ' 18 | , alert = $(alertHTML).alert() 19 | 20 | alert.find('.close').click() 21 | 22 | ok(!alert.hasClass('in'), 'remove .in class on .close click') 23 | }) 24 | 25 | test("should remove element when clicking .close", function () { 26 | $.support.transition = false 27 | 28 | var alertHTML = '
    ' 29 | + '×' 30 | + '

    Holy guacamole! Best check yo self, you’re not looking too good.

    ' 31 | + '
    ' 32 | , alert = $(alertHTML).appendTo('#qunit-runoff').alert() 33 | 34 | ok($('#qunit-runoff').find('.alert-message').length, 'element added to dom') 35 | 36 | alert.find('.close').click() 37 | 38 | ok(!$('#qunit-runoff').find('.alert-message').length, 'element removed from dom') 39 | }) 40 | 41 | }) -------------------------------------------------------------------------------- /js/tests/unit/bootstrap-buttons.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | module("bootstrap-buttons") 4 | 5 | test("should be defined on jquery object", function () { 6 | ok($(document.body).button, 'tabs method is defined') 7 | }) 8 | 9 | test("should return element", function () { 10 | ok($(document.body).button()[0] == document.body, 'document.body returned') 11 | }) 12 | 13 | test("should return set state to loading", function () { 14 | var btn = $('') 15 | equals(btn.html(), 'mdo', 'btn text equals mdo') 16 | btn.button('loading') 17 | equals(btn.html(), 'fat', 'btn text equals fat') 18 | ok(btn.attr('disabled'), 'btn is disabled') 19 | ok(btn.hasClass('disabled'), 'btn has disabled class') 20 | }) 21 | 22 | test("should return reset state", function () { 23 | var btn = $('') 24 | equals(btn.html(), 'mdo', 'btn text equals mdo') 25 | btn.button('loading') 26 | equals(btn.html(), 'fat', 'btn text equals fat') 27 | ok(btn.attr('disabled'), 'btn is disabled') 28 | ok(btn.hasClass('disabled'), 'btn is disabled') 29 | btn.button('reset') 30 | equals(btn.html(), 'mdo', 'btn text equals mdo') 31 | ok(!btn.attr('disabled'), 'btn is not disabled') 32 | ok(!btn.hasClass('disabled'), 'btn does not have disabled class') 33 | }) 34 | 35 | test("should toggle active", function () { 36 | var btn = $('') 37 | ok(!btn.hasClass('active'), 'btn does not have active class') 38 | btn.button('toggle') 39 | ok(btn.hasClass('active'), 'btn has class active') 40 | }) 41 | 42 | }) -------------------------------------------------------------------------------- /js/tests/unit/bootstrap-dropdown.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | module("bootstrap-dropdowns") 4 | 5 | test("should be defined on jquery object", function () { 6 | ok($(document.body).dropdown, 'dropdown method is defined') 7 | }) 8 | 9 | test("should return element", function () { 10 | ok($(document.body).dropdown()[0] == document.body, 'document.body returned') 11 | }) 12 | 13 | test("should add class open to menu if clicked", function () { 14 | var dropdownHTML = '' 25 | , dropdown = $(dropdownHTML).dropdown() 26 | 27 | dropdown.find('.dropdown-toggle').click() 28 | ok(dropdown.find('.dropdown').hasClass('open'), 'open class added on click') 29 | }) 30 | 31 | test("should remove open class if body clicked", function () { 32 | var dropdownHTML = '' 43 | , dropdown = $(dropdownHTML).dropdown().appendTo('#qunit-runoff') 44 | 45 | dropdown.find('.dropdown-toggle').click() 46 | ok(dropdown.find('.dropdown').hasClass('open'), 'open class added on click') 47 | $('body').click() 48 | ok(!dropdown.find('.dropdown').hasClass('open'), 'open class removed') 49 | dropdown.remove() 50 | }) 51 | 52 | }) -------------------------------------------------------------------------------- /js/tests/unit/bootstrap-modal.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | module("bootstrap-modal") 4 | 5 | test("should be defined on jquery object", function () { 6 | var div = $("") 7 | ok(div.modal, 'modal method is defined') 8 | }) 9 | 10 | test("should return element", function () { 11 | var div = $("") 12 | ok(div.modal() == div, 'div element returned') 13 | }) 14 | 15 | test("should expose defaults var for settings", function () { 16 | ok($.fn.modal.defaults, 'default object exposed') 17 | }) 18 | 19 | test("should insert into dom when show method is called", function () { 20 | stop() 21 | $.support.transition = false 22 | var div = $("") 23 | div 24 | .modal() 25 | .bind("shown", function () { 26 | ok($('#modal-test').length, 'modal insterted into dom') 27 | start() 28 | div.remove() 29 | }) 30 | .modal("show") 31 | }) 32 | 33 | test("should hide modal when hide is called", function () { 34 | stop() 35 | $.support.transition = false 36 | var div = $("") 37 | div 38 | .modal() 39 | .bind("shown", function () { 40 | ok($('#modal-test').is(":visible"), 'modal visible') 41 | ok($('#modal-test').length, 'modal insterted into dom') 42 | div.modal("hide") 43 | }) 44 | .bind("hidden", function() { 45 | ok(!$('#modal-test').is(":visible"), 'modal hidden') 46 | start() 47 | div.remove() 48 | }) 49 | .modal("show") 50 | }) 51 | 52 | test("should toggle when toggle is called", function () { 53 | stop() 54 | $.support.transition = false 55 | var div = $("") 56 | div 57 | .modal() 58 | .bind("shown", function () { 59 | ok($('#modal-test').is(":visible"), 'modal visible') 60 | ok($('#modal-test').length, 'modal insterted into dom') 61 | div.modal("toggle") 62 | }) 63 | .bind("hidden", function() { 64 | ok(!$('#modal-test').is(":visible"), 'modal hidden') 65 | start() 66 | div.remove() 67 | }) 68 | .modal("toggle") 69 | }) 70 | 71 | test("should remove from dom when click .close", function () { 72 | stop() 73 | $.support.transition = false 74 | var div = $("") 75 | div 76 | .modal() 77 | .bind("shown", function () { 78 | ok($('#modal-test').is(":visible"), 'modal visible') 79 | ok($('#modal-test').length, 'modal insterted into dom') 80 | div.find('.close').click() 81 | }) 82 | .bind("hidden", function() { 83 | ok(!$('#modal-test').is(":visible"), 'modal hidden') 84 | start() 85 | div.remove() 86 | }) 87 | .modal("toggle") 88 | }) 89 | 90 | test("should add backdrop when desired", function () { 91 | stop() 92 | $.support.transition = false 93 | var div = $("") 94 | div 95 | .modal({ backdrop:true }) 96 | .bind("shown", function () { 97 | equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') 98 | start() 99 | div.remove() 100 | $('.modal-backdrop').remove() 101 | }) 102 | .modal("show") 103 | }) 104 | 105 | test("should not add backdrop when not desired", function () { 106 | stop() 107 | $.support.transition = false 108 | var div = $("") 109 | div 110 | .modal({backdrop:false}) 111 | .bind("shown", function () { 112 | equal($('.modal-backdrop').length, 0, 'modal backdrop not inserted into dom') 113 | start() 114 | div.remove() 115 | }) 116 | .modal("show") 117 | }) 118 | 119 | test("should close backdrop when clicked", function () { 120 | stop() 121 | $.support.transition = false 122 | var div = $("") 123 | div 124 | .modal({backdrop:true}) 125 | .bind("shown", function () { 126 | equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') 127 | $('.modal-backdrop').click() 128 | equal($('.modal-backdrop').length, 0, 'modal backdrop removed from dom') 129 | start() 130 | div.remove() 131 | }) 132 | .modal("show") 133 | }) 134 | 135 | test("should not close backdrop when click disabled", function () { 136 | stop() 137 | $.support.transition = false 138 | var div = $("") 139 | div 140 | .modal({backdrop: 'static'}) 141 | .bind("shown", function () { 142 | equal($('.modal-backdrop').length, 1, 'modal backdrop inserted into dom') 143 | $('.modal-backdrop').click() 144 | equal($('.modal-backdrop').length, 1, 'modal backdrop still in dom') 145 | start() 146 | div.remove() 147 | $('.modal-backdrop').remove() 148 | }) 149 | .modal("show") 150 | }) 151 | }) 152 | -------------------------------------------------------------------------------- /js/tests/unit/bootstrap-popover.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | module("bootstrap-popover") 4 | 5 | test("should be defined on jquery object", function () { 6 | var div = $('
    ') 7 | ok(div.popover, 'popover method is defined') 8 | }) 9 | 10 | test("should return element", function () { 11 | var div = $('
    ') 12 | ok(div.popover() == div, 'document.body returned') 13 | }) 14 | 15 | test("should render popover element", function () { 16 | $.support.transition = false 17 | var popover = $('@mdo') 18 | .appendTo('#qunit-runoff') 19 | .popover() 20 | .popover('show') 21 | 22 | ok($('.popover').length, 'popover was inserted') 23 | popover.popover('hide') 24 | ok(!$(".popover").length, 'popover removed') 25 | $('#qunit-runoff').empty() 26 | }) 27 | 28 | test("should store popover instance in popover data object", function () { 29 | $.support.transition = false 30 | var popover = $('@mdo') 31 | .popover() 32 | 33 | ok(!!popover.data('popover'), 'popover instance exists') 34 | }) 35 | 36 | test("should get title and content from options", function () { 37 | $.support.transition = false 38 | var popover = $('@fat') 39 | .appendTo('#qunit-runoff') 40 | .popover({ 41 | title: function () { 42 | return '@fat' 43 | } 44 | , content: function () { 45 | return 'loves writing tests （╯°□°）╯︵ ┻━┻' 46 | } 47 | }) 48 | 49 | popover.popover('show') 50 | 51 | ok($('.popover').length, 'popover was inserted') 52 | equals($('.popover .title').text(), '@fat', 'title correctly inserted') 53 | equals($('.popover .content').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted') 54 | 55 | popover.popover('hide') 56 | ok(!$('.popover').length, 'popover was removed') 57 | $('#qunit-runoff').empty() 58 | }) 59 | 60 | test("should get title and content from attributes", function () { 61 | $.support.transition = false 62 | var popover = $('@mdo') 63 | .appendTo('#qunit-runoff') 64 | .popover() 65 | .popover('show') 66 | 67 | ok($('.popover').length, 'popover was inserted') 68 | equals($('.popover .title').text(), '@mdo', 'title correctly inserted') 69 | equals($('.popover .content').text(), "loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻", 'content correctly inserted') 70 | 71 | popover.popover('hide') 72 | ok(!$('.popover').length, 'popover was removed') 73 | $('#qunit-runoff').empty() 74 | }) 75 | 76 | }) 77 | -------------------------------------------------------------------------------- /js/tests/unit/bootstrap-scrollspy.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | module("bootstrap-scrollspy") 4 | 5 | test("should be defined on jquery object", function () { 6 | ok($(document.body).scrollspy, 'scrollspy method is defined') 7 | }) 8 | 9 | test("should return element", function () { 10 | ok($(document.body).scrollspy()[0] == document.body, 'document.body returned') 11 | }) 12 | 13 | test("should switch active class on scroll", function () { 14 | var sectionHTML = '
    ' 15 | , $section = $(sectionHTML).append('#qunit-runoff') 16 | , topbarHTML ='
    ' 17 | + '
    ' 18 | + '
    ' 19 | + '

    Bootstrap

    ' 20 | + '' 23 | + '
    ' 24 | + '
    ' 25 | + '
    ' 26 | , $topbar = $(topbarHTML).topbar() 27 | 28 | ok(topbar.find('.active', true) 29 | }) 30 | 31 | }) -------------------------------------------------------------------------------- /js/tests/unit/bootstrap-tabs.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | module("bootstrap-tabs") 4 | 5 | test("should be defined on jquery object", function () { 6 | ok($(document.body).tabs, 'tabs method is defined') 7 | }) 8 | 9 | test("should return element", function () { 10 | ok($(document.body).tabs()[0] == document.body, 'document.body returned') 11 | }) 12 | 13 | test("should activate element by tab id", function () { 14 | var $tabsHTML = $('') 18 | 19 | 20 | $('
    ').appendTo("#qunit-runoff") 21 | 22 | $tabsHTML.tabs().find('a').last().click() 23 | equals($("#qunit-runoff").find('.active').attr('id'), "profile") 24 | 25 | $tabsHTML.tabs().find('a').first().click() 26 | equals($("#qunit-runoff").find('.active').attr('id'), "home") 27 | 28 | $("#qunit-runoff").empty() 29 | }) 30 | 31 | test("should activate element by pill id", function () { 32 | var $pillsHTML = $('') 36 | 37 | 38 | $('
    ').appendTo("#qunit-runoff") 39 | 40 | $pillsHTML.pills().find('a').last().click() 41 | equals($("#qunit-runoff").find('.active').attr('id'), "profile") 42 | 43 | $pillsHTML.pills().find('a').first().click() 44 | equals($("#qunit-runoff").find('.active').attr('id'), "home") 45 | 46 | $("#qunit-runoff").empty() 47 | }) 48 | 49 | test( "should trigger change event on activate", function () { 50 | var $tabsHTML = $('') 54 | , $target 55 | , count = 0 56 | , relatedTarget 57 | , target 58 | 59 | $tabsHTML 60 | .tabs() 61 | .bind( "change", function (e) { 62 | target = e.target 63 | relatedTarget = e.relatedTarget 64 | count++ 65 | }) 66 | 67 | $target = $tabsHTML 68 | .find('a') 69 | .last() 70 | .click() 71 | 72 | equals(relatedTarget, $tabsHTML.find('a').first()[0]) 73 | equals(target, $target[0]) 74 | equals(count, 1) 75 | }) 76 | 77 | }) -------------------------------------------------------------------------------- /js/tests/unit/bootstrap-twipsy.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | 3 | module("bootstrap-twipsy") 4 | 5 | test("should be defined on jquery object", function () { 6 | var div = $("
    ") 7 | ok(div.twipsy, 'popover method is defined') 8 | }) 9 | 10 | test("should return element", function () { 11 | var div = $("
    ") 12 | ok(div.twipsy() == div, 'document.body returned') 13 | }) 14 | 15 | test("should expose default settings", function () { 16 | ok(!!$.fn.twipsy.defaults, 'defaults is defined') 17 | }) 18 | 19 | test("should remove title attribute", function () { 20 | var twipsy = $('').twipsy() 21 | ok(!twipsy.attr('title'), 'title tag was removed') 22 | }) 23 | 24 | test("should add data attribute for referencing original title", function () { 25 | var twipsy = $('').twipsy() 26 | equals(twipsy.attr('data-original-title'), 'Another twipsy', 'original title preserved in data attribute') 27 | }) 28 | 29 | test("should place tooltips relative to placement option", function () { 30 | $.support.transition = false 31 | var twipsy = $('') 32 | .appendTo('#qunit-runoff') 33 | .twipsy({placement: 'below'}) 34 | .twipsy('show') 35 | 36 | ok($(".twipsy").hasClass('fade below in'), 'has correct classes applied') 37 | twipsy.twipsy('hide') 38 | ok(!$(".twipsy").length, 'twipsy removed') 39 | $('#qunit-runoff').empty() 40 | }) 41 | 42 | test("should add a fallback in cases where elements have no title tag", function () { 43 | $.support.transition = false 44 | var twipsy = $('') 45 | .appendTo('#qunit-runoff') 46 | .twipsy({fallback: '@fat'}) 47 | .twipsy('show') 48 | 49 | equals($(".twipsy").text(), "@fat", 'has correct default text') 50 | twipsy.twipsy('hide') 51 | ok(!$(".twipsy").length, 'twipsy removed') 52 | $('#qunit-runoff').empty() 53 | }) 54 | 55 | test("should not allow html entities", function () { 56 | $.support.transition = false 57 | var twipsy = $('') 58 | .appendTo('#qunit-runoff') 59 | .twipsy() 60 | .twipsy('show') 61 | 62 | ok(!$('.twipsy b').length, 'b tag was not inserted') 63 | twipsy.twipsy('hide') 64 | ok(!$(".twipsy").length, 'twipsy removed') 65 | $('#qunit-runoff').empty() 66 | }) 67 | 68 | test("should allow html entities if html option set to true", function () { 69 | $.support.transition = false 70 | var twipsy = $('') 71 | .appendTo('#qunit-runoff') 72 | .twipsy({html: true}) 73 | .twipsy('show') 74 | 75 | ok($('.twipsy b').length, 'b tag was inserted') 76 | twipsy.twipsy('hide') 77 | ok(!$(".twipsy").length, 'twipsy removed') 78 | $('#qunit-runoff').empty() 79 | }) 80 | 81 | }) -------------------------------------------------------------------------------- /js/tests/vendor/qunit.css: -------------------------------------------------------------------------------- 1 | /** 2 | * QUnit - A JavaScript Unit Testing Framework 3 | * 4 | * http://docs.jquery.com/QUnit 5 | * 6 | * Copyright (c) 2011 John Resig, Jörn Zaefferer 7 | * Dual licensed under the MIT (MIT-LICENSE.txt) 8 | * or GPL (GPL-LICENSE.txt) licenses. 9 | */ 10 | 11 | /** Font Family and Sizes */ 12 | 13 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult { 14 | font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif; 15 | } 16 | 17 | #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } 18 | #qunit-tests { font-size: smaller; } 19 | 20 | 21 | /** Resets */ 22 | 23 | #qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult { 24 | margin: 0; 25 | padding: 0; 26 | } 27 | 28 | 29 | /** Header */ 30 | 31 | #qunit-header { 32 | padding: 0.5em 0 0.5em 1em; 33 | 34 | color: #8699a4; 35 | background-color: #0d3349; 36 | 37 | font-size: 1.5em; 38 | line-height: 1em; 39 | font-weight: normal; 40 | 41 | border-radius: 15px 15px 0 0; 42 | -moz-border-radius: 15px 15px 0 0; 43 | -webkit-border-top-right-radius: 15px; 44 | -webkit-border-top-left-radius: 15px; 45 | } 46 | 47 | #qunit-header a { 48 | text-decoration: none; 49 | color: #c2ccd1; 50 | } 51 | 52 | #qunit-header a:hover, 53 | #qunit-header a:focus { 54 | color: #fff; 55 | } 56 | 57 | #qunit-banner { 58 | height: 5px; 59 | } 60 | 61 | #qunit-testrunner-toolbar { 62 | padding: 0.5em 0 0.5em 2em; 63 | color: #5E740B; 64 | background-color: #eee; 65 | } 66 | 67 | #qunit-userAgent { 68 | padding: 0.5em 0 0.5em 2.5em; 69 | background-color: #2b81af; 70 | color: #fff; 71 | text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; 72 | } 73 | 74 | 75 | /** Tests: Pass/Fail */ 76 | 77 | #qunit-tests { 78 | list-style-position: inside; 79 | } 80 | 81 | #qunit-tests li { 82 | padding: 0.4em 0.5em 0.4em 2.5em; 83 | border-bottom: 1px solid #fff; 84 | list-style-position: inside; 85 | } 86 | 87 | #qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running { 88 | display: none; 89 | } 90 | 91 | #qunit-tests li strong { 92 | cursor: pointer; 93 | } 94 | 95 | #qunit-tests li a { 96 | padding: 0.5em; 97 | color: #c2ccd1; 98 | text-decoration: none; 99 | } 100 | #qunit-tests li a:hover, 101 | #qunit-tests li a:focus { 102 | color: #000; 103 | } 104 | 105 | #qunit-tests ol { 106 | margin-top: 0.5em; 107 | padding: 0.5em; 108 | 109 | background-color: #fff; 110 | 111 | border-radius: 15px; 112 | -moz-border-radius: 15px; 113 | -webkit-border-radius: 15px; 114 | 115 | box-shadow: inset 0px 2px 13px #999; 116 | -moz-box-shadow: inset 0px 2px 13px #999; 117 | -webkit-box-shadow: inset 0px 2px 13px #999; 118 | } 119 | 120 | #qunit-tests table { 121 | border-collapse: collapse; 122 | margin-top: .2em; 123 | } 124 | 125 | #qunit-tests th { 126 | text-align: right; 127 | vertical-align: top; 128 | padding: 0 .5em 0 0; 129 | } 130 | 131 | #qunit-tests td { 132 | vertical-align: top; 133 | } 134 | 135 | #qunit-tests pre { 136 | margin: 0; 137 | white-space: pre-wrap; 138 | word-wrap: break-word; 139 | } 140 | 141 | #qunit-tests del { 142 | background-color: #e0f2be; 143 | color: #374e0c; 144 | text-decoration: none; 145 | } 146 | 147 | #qunit-tests ins { 148 | background-color: #ffcaca; 149 | color: #500; 150 | text-decoration: none; 151 | } 152 | 153 | /*** Test Counts */ 154 | 155 | #qunit-tests b.counts { color: black; } 156 | #qunit-tests b.passed { color: #5E740B; } 157 | #qunit-tests b.failed { color: #710909; } 158 | 159 | #qunit-tests li li { 160 | margin: 0.5em; 161 | padding: 0.4em 0.5em 0.4em 0.5em; 162 | background-color: #fff; 163 | border-bottom: none; 164 | list-style-position: inside; 165 | } 166 | 167 | /*** Passing Styles */ 168 | 169 | #qunit-tests li li.pass { 170 | color: #5E740B; 171 | background-color: #fff; 172 | border-left: 26px solid #C6E746; 173 | } 174 | 175 | #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; } 176 | #qunit-tests .pass .test-name { color: #366097; } 177 | 178 | #qunit-tests .pass .test-actual, 179 | #qunit-tests .pass .test-expected { color: #999999; } 180 | 181 | #qunit-banner.qunit-pass { background-color: #C6E746; } 182 | 183 | /*** Failing Styles */ 184 | 185 | #qunit-tests li li.fail { 186 | color: #710909; 187 | background-color: #fff; 188 | border-left: 26px solid #EE5757; 189 | white-space: pre; 190 | } 191 | 192 | #qunit-tests > li:last-child { 193 | border-radius: 0 0 15px 15px; 194 | -moz-border-radius: 0 0 15px 15px; 195 | -webkit-border-bottom-right-radius: 15px; 196 | -webkit-border-bottom-left-radius: 15px; 197 | } 198 | 199 | #qunit-tests .fail { color: #000000; background-color: #EE5757; } 200 | #qunit-tests .fail .test-name, 201 | #qunit-tests .fail .module-name { color: #000000; } 202 | 203 | #qunit-tests .fail .test-actual { color: #EE5757; } 204 | #qunit-tests .fail .test-expected { color: green; } 205 | 206 | #qunit-banner.qunit-fail { background-color: #EE5757; } 207 | 208 | 209 | /** Result */ 210 | 211 | #qunit-testresult { 212 | padding: 0.5em 0.5em 0.5em 2.5em; 213 | 214 | color: #2b81af; 215 | background-color: #D2E0E6; 216 | 217 | border-bottom: 1px solid white; 218 | } 219 | 220 | /** Fixture */ 221 | 222 | #qunit-fixture { 223 | position: absolute; 224 | top: -10000px; 225 | left: -10000px; 226 | } 227 | 228 | /** Runoff */ 229 | 230 | #qunit-runoff { 231 | display:none; 232 | } -------------------------------------------------------------------------------- /lib/bootstrap.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap @VERSION 3 | * 4 | * Copyright 2011 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | * Date: @DATE 10 | */ 11 | 12 | // CSS Reset 13 | @import "reset.less"; 14 | 15 | // Core variables and mixins 16 | @import "variables.less"; // Modify this for custom colors, font-sizes, etc 17 | @import "mixins.less"; 18 | 19 | // Grid system and page structure 20 | @import "scaffolding.less"; 21 | 22 | // Styled patterns and elements 23 | @import "type.less"; 24 | @import "forms.less"; 25 | @import "tables.less"; 26 | @import "patterns.less"; -------------------------------------------------------------------------------- /lib/bootstrap_xtra.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Xtra @VERSION 3 | * 4 | * Copyright 2011 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | * Date: @DATE 10 | */ 11 | 12 | // CSS Reset 13 | @import "reset.less"; 14 | 15 | // Core variables and mixins 16 | @import "variables.less"; // Modify this for custom colors, font-sizes, etc 17 | @import "variables_xtra.less"; // Modify this for custom colors, font-sizes, etc 18 | @import "mixins.less"; 19 | @import "mixins_xtra.less"; 20 | 21 | // Grid system and page structure 22 | @import "scaffolding.less"; 23 | 24 | // Styled patterns and elements 25 | @import "type.less"; 26 | @import "type_xtra.less"; 27 | @import "forms.less"; 28 | @import "tables.less"; 29 | @import "patterns.less"; 30 | @import "patterns_xtra.less"; -------------------------------------------------------------------------------- /lib/forms.less: -------------------------------------------------------------------------------- 1 | /* Forms.less 2 | * Base styles for various input types, form layouts, and states 3 | * ------------------------------------------------------------- */ 4 | 5 | 6 | // FORM STYLES 7 | // ----------- 8 | 9 | form { 10 | margin-bottom: @baseline; 11 | } 12 | 13 | // Groups of fields with labels on top (legends) 14 | fieldset { 15 | margin-bottom: @baseline; 16 | padding-top: @baseline; 17 | legend { 18 | display: block; 19 | padding-left: 150px; 20 | font-size: @basefont * 1.5; 21 | line-height: 1; 22 | color: @grayDark; 23 | *padding: 0 0 5px 145px; /* IE6-7 */ 24 | *line-height: 1.5; /* IE6-7 */ 25 | } 26 | } 27 | 28 | // Parent element that clears floats and wraps labels and fields together 29 | form .clearfix { 30 | margin-bottom: @baseline; 31 | .clearfix() 32 | } 33 | 34 | // Set font for forms 35 | label, 36 | input, 37 | select, 38 | textarea { 39 | #font > .sans-serif(normal,13px,normal); 40 | } 41 | 42 | // Float labels left 43 | label { 44 | padding-top: 6px; 45 | font-size: @basefont; 46 | line-height: @baseline; 47 | float: left; 48 | width: 130px; 49 | text-align: right; 50 | color: @grayDark; 51 | } 52 | 53 | // Shift over the inside div to align all label's relevant content 54 | form .input { 55 | margin-left: 150px; 56 | } 57 | 58 | // Checkboxs and radio buttons 59 | input[type=checkbox], 60 | input[type=radio] { 61 | cursor: pointer; 62 | } 63 | 64 | // Inputs, Textareas, Selects 65 | input, 66 | textarea, 67 | select, 68 | .uneditable-input { 69 | display: inline-block; 70 | width: 210px; 71 | height: @baseline; 72 | padding: 4px; 73 | font-size: @basefont; 74 | line-height: @baseline; 75 | color: @gray; 76 | border: 1px solid #ccc; 77 | .border-radius(3px); 78 | } 79 | 80 | // remove padding from select 81 | select { 82 | padding: initial; 83 | } 84 | 85 | // mini reset for non-html5 file types 86 | input[type=checkbox], 87 | input[type=radio] { 88 | width: auto; 89 | height: auto; 90 | padding: 0; 91 | margin: 3px 0; 92 | *margin-top: 0; /* IE6-7 */ 93 | line-height: normal; 94 | border: none; 95 | } 96 | 97 | input[type=file] { 98 | background-color: @white; 99 | padding: initial; 100 | border: initial; 101 | line-height: initial; 102 | .box-shadow(none); 103 | } 104 | 105 | input[type=button], 106 | input[type=reset], 107 | input[type=submit] { 108 | width: auto; 109 | height: auto; 110 | } 111 | 112 | select, 113 | input[type=file] { 114 | height: @baseline * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size 115 | *height: auto; // Reset for IE7 116 | line-height: @baseline * 1.5; 117 | *margin-top: 4px; /* For IE7, add top margin to align select with labels */ 118 | } 119 | 120 | // Make multiple select elements height not fixed 121 | select[multiple] { 122 | height: inherit; 123 | background-color: @white; // Fixes Chromium bug of unreadable items 124 | } 125 | 126 | textarea { 127 | height: auto; 128 | } 129 | 130 | // For text that needs to appear as an input but should not be an input 131 | .uneditable-input { 132 | background-color: @white; 133 | display: block; 134 | border-color: #eee; 135 | .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); 136 | cursor: not-allowed; 137 | } 138 | 139 | // Placeholder text gets special styles; can't be bundled together though for some reason 140 | :-moz-placeholder { 141 | color: @grayLight; 142 | } 143 | ::-webkit-input-placeholder { 144 | color: @grayLight; 145 | } 146 | 147 | // Focus states 148 | input, 149 | textarea { 150 | @transition: border linear .2s, box-shadow linear .2s; 151 | .transition(@transition); 152 | .box-shadow(inset 0 1px 3px rgba(0,0,0,.1)); 153 | } 154 | input:focus, 155 | textarea:focus { 156 | outline: 0; 157 | border-color: rgba(82,168,236,.8); 158 | @shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6); 159 | .box-shadow(@shadow); 160 | } 161 | input[type=file]:focus, 162 | input[type=checkbox]:focus, 163 | select:focus { 164 | .box-shadow(none); // override for file inputs 165 | outline: 1px dotted #666; // Selet elements don't get box-shadow styles, so instead we do outline 166 | } 167 | 168 | 169 | // FORM FIELD FEEDBACK STATES 170 | // -------------------------- 171 | 172 | // Mixin for form field states 173 | .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { 174 | // Set the text color 175 | > label, 176 | .help-block, 177 | .help-inline { 178 | color: @textColor; 179 | } 180 | // Style inputs accordingly 181 | input, 182 | textarea { 183 | color: @textColor; 184 | border-color: @borderColor; 185 | &:focus { 186 | border-color: darken(@borderColor, 10%); 187 | .box-shadow(0 0 6px lighten(@borderColor, 20%)); 188 | } 189 | } 190 | // Give a small background color for input-prepend/-append 191 | .input-prepend .add-on, 192 | .input-append .add-on { 193 | color: @textColor; 194 | background-color: @backgroundColor; 195 | border-color: @textColor; 196 | } 197 | } 198 | // Error 199 | form .clearfix.error { 200 | .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%)); 201 | } 202 | // Warning 203 | form .clearfix.warning { 204 | .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%)); 205 | } 206 | // Success 207 | form .clearfix.success { 208 | .formFieldState(#468847, #57a957, lighten(#57a957, 30%)); 209 | } 210 | 211 | 212 | // Form element sizes 213 | // TODO v2: remove duplication here and just stick to .input-[size] in light of adding .spanN sizes 214 | .input-mini, 215 | input.mini, 216 | textarea.mini, 217 | select.mini { 218 | width: 60px; 219 | } 220 | .input-small, 221 | input.small, 222 | textarea.small, 223 | select.small { 224 | width: 90px; 225 | } 226 | .input-medium, 227 | input.medium, 228 | textarea.medium, 229 | select.medium { 230 | width: 150px; 231 | } 232 | .input-large, 233 | input.large, 234 | textarea.large, 235 | select.large { 236 | width: 210px; 237 | } 238 | .input-xlarge, 239 | input.xlarge, 240 | textarea.xlarge, 241 | select.xlarge { 242 | width: 270px; 243 | } 244 | .input-xxlarge, 245 | input.xxlarge, 246 | textarea.xxlarge, 247 | select.xxlarge { 248 | width: 530px; 249 | } 250 | textarea.xxlarge { 251 | overflow-y: auto; 252 | } 253 | 254 | // Grid style input sizes 255 | // This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border 256 | .formColumns(@columnSpan: 1) { 257 | display: inline-block; 258 | float: none; 259 | width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10; 260 | margin-left: 0; 261 | } 262 | input, 263 | textarea { 264 | // Default columns 265 | &.span1 { .formColumns(1); } 266 | &.span2 { .formColumns(2); } 267 | &.span3 { .formColumns(3); } 268 | &.span4 { .formColumns(4); } 269 | &.span5 { .formColumns(5); } 270 | &.span6 { .formColumns(6); } 271 | &.span7 { .formColumns(7); } 272 | &.span8 { .formColumns(8); } 273 | &.span9 { .formColumns(9); } 274 | &.span10 { .formColumns(10); } 275 | &.span11 { .formColumns(11); } 276 | &.span12 { .formColumns(12); } 277 | &.span13 { .formColumns(13); } 278 | &.span14 { .formColumns(14); } 279 | &.span15 { .formColumns(15); } 280 | &.span16 { .formColumns(16); } 281 | } 282 | 283 | // Disabled and read-only inputs 284 | input[disabled], 285 | select[disabled], 286 | textarea[disabled], 287 | input[readonly], 288 | select[readonly], 289 | textarea[readonly] { 290 | background-color: #f5f5f5; 291 | border-color: #ddd; 292 | cursor: not-allowed; 293 | } 294 | 295 | // Actions (the buttons) 296 | .actions { 297 | background: #f5f5f5; 298 | margin-top: @baseline; 299 | margin-bottom: @baseline; 300 | padding: (@baseline - 1) 20px @baseline 150px; 301 | border-top: 1px solid #ddd; 302 | .border-radius(0 0 3px 3px); 303 | .secondary-action { 304 | float: right; 305 | a { 306 | line-height: 30px; 307 | &:hover { 308 | text-decoration: underline; 309 | } 310 | } 311 | } 312 | } 313 | 314 | // Help Text 315 | // TODO: Do we need to set basefont and baseline here? 316 | .help-inline, 317 | .help-block { 318 | font-size: @basefont; 319 | line-height: @baseline; 320 | color: @grayLight; 321 | } 322 | .help-inline { 323 | padding-left: 5px; 324 | *position: relative; /* IE6-7 */ 325 | *top: -5px; /* IE6-7 */ 326 | } 327 | 328 | // Big blocks of help text 329 | .help-block { 330 | display: block; 331 | max-width: 600px; 332 | } 333 | 334 | // Inline Fields (input fields that appear as inline objects 335 | .inline-inputs { 336 | color: @gray; 337 | span { 338 | padding: 0 2px 0 1px; 339 | } 340 | } 341 | 342 | // Allow us to put symbols and text within the input field for a cleaner look 343 | .input-prepend, 344 | .input-append { 345 | input { 346 | .border-radius(0 3px 3px 0); 347 | } 348 | .add-on { 349 | position: relative; 350 | background: #f5f5f5; 351 | border: 1px solid #ccc; 352 | z-index: 2; 353 | float: left; 354 | display: block; 355 | width: auto; 356 | min-width: 16px; 357 | height: 18px; 358 | padding: 4px 4px 4px 5px; 359 | margin-right: -1px; 360 | font-weight: normal; 361 | line-height: 18px; 362 | color: @grayLight; 363 | text-align: center; 364 | text-shadow: 0 1px 0 @white; 365 | .border-radius(3px 0 0 3px); 366 | } 367 | .active { 368 | background: lighten(@green, 30); 369 | border-color: @green; 370 | } 371 | } 372 | .input-prepend { 373 | .add-on { 374 | *margin-top: 1px; /* IE6-7 */ 375 | } 376 | } 377 | .input-append { 378 | input { 379 | float: left; 380 | .border-radius(3px 0 0 3px); 381 | } 382 | .add-on { 383 | .border-radius(0 3px 3px 0); 384 | margin-right: 0; 385 | margin-left: -1px; 386 | } 387 | } 388 | 389 | // Stacked options for forms (radio buttons or checkboxes) 390 | .inputs-list { 391 | margin: 0 0 5px; 392 | width: 100%; 393 | li { 394 | display: block; 395 | padding: 0; 396 | width: 100%; 397 | } 398 | label { 399 | display: block; 400 | float: none; 401 | width: auto; 402 | padding: 0; 403 | margin-left: 20px; 404 | line-height: @baseline; 405 | text-align: left; 406 | white-space: normal; 407 | strong { 408 | color: @gray; 409 | } 410 | small { 411 | font-size: @basefont - 2; 412 | font-weight: normal; 413 | } 414 | } 415 | .inputs-list { 416 | margin-left: 25px; 417 | margin-bottom: 10px; 418 | padding-top: 0; 419 | } 420 | &:first-child { 421 | padding-top: 6px; 422 | } 423 | li + li { 424 | padding-top: 2px; 425 | } 426 | input[type=radio], 427 | input[type=checkbox] { 428 | margin-bottom: 0; 429 | margin-left: -20px; 430 | float: left; 431 | } 432 | } 433 | 434 | // Stacked forms 435 | .form-stacked { 436 | padding-left: 20px; 437 | fieldset { 438 | padding-top: @baseline / 2; 439 | } 440 | legend { 441 | padding-left: 0; 442 | } 443 | label { 444 | display: block; 445 | float: none; 446 | width: auto; 447 | font-weight: bold; 448 | text-align: left; 449 | line-height: 20px; 450 | padding-top: 0; 451 | } 452 | .clearfix { 453 | margin-bottom: @baseline / 2; 454 | div.input { 455 | margin-left: 0; 456 | } 457 | } 458 | .inputs-list { 459 | margin-bottom: 0; 460 | li { 461 | padding-top: 0; 462 | label { 463 | font-weight: normal; 464 | padding-top: 0; 465 | } 466 | } 467 | } 468 | div.clearfix.error { 469 | padding-top: 10px; 470 | padding-bottom: 10px; 471 | padding-left: 10px; 472 | margin-top: 0; 473 | margin-left: -10px; 474 | } 475 | .actions { 476 | margin-left: -20px; 477 | padding-left: 20px; 478 | } 479 | } 480 | -------------------------------------------------------------------------------- /lib/mixins.less: -------------------------------------------------------------------------------- 1 | /* Mixins.less 2 | * Snippets of reusable CSS to develop faster and keep code readable 3 | * ----------------------------------------------------------------- */ 4 | 5 | 6 | // Clearfix for clearing floats like a boss h5bp.com/q 7 | .clearfix() { 8 | zoom: 1; 9 | &:before, 10 | &:after { 11 | display: table; 12 | content: ""; 13 | zoom: 1; 14 | } 15 | &:after { 16 | clear: both; 17 | } 18 | } 19 | 20 | // Center-align a block level element 21 | .center-block() { 22 | display: block; 23 | margin-left: auto; 24 | margin-right: auto; 25 | } 26 | 27 | // Sizing shortcuts 28 | .size(@height: 5px, @width: 5px) { 29 | height: @height; 30 | width: @width; 31 | } 32 | .square(@size: 5px) { 33 | .size(@size, @size); 34 | } 35 | 36 | // Input placeholder text 37 | .placeholder(@color: @grayLight) { 38 | :-moz-placeholder { 39 | color: @color; 40 | } 41 | ::-webkit-input-placeholder { 42 | color: @color; 43 | } 44 | } 45 | 46 | // Font Stacks 47 | #font { 48 | .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) { 49 | font-size: @size; 50 | font-weight: @weight; 51 | line-height: @lineHeight; 52 | } 53 | .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { 54 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 55 | font-size: @size; 56 | font-weight: @weight; 57 | line-height: @lineHeight; 58 | } 59 | .serif(@weight: normal, @size: 14px, @lineHeight: 20px) { 60 | font-family: "Georgia", Times New Roman, Times, serif; 61 | font-size: @size; 62 | font-weight: @weight; 63 | line-height: @lineHeight; 64 | } 65 | .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) { 66 | font-family: "Monaco", Courier New, monospace; 67 | font-size: @size; 68 | font-weight: @weight; 69 | line-height: @lineHeight; 70 | } 71 | } 72 | 73 | // Grid System 74 | .fixed-container() { 75 | width: @siteWidth; 76 | margin-left: auto; 77 | margin-right: auto; 78 | .clearfix(); 79 | } 80 | .columns(@columnSpan: 1) { 81 | width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); 82 | } 83 | .offset(@columnOffset: 1) { 84 | margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; 85 | } 86 | // Necessary grid styles for every column to make them appear next to each other horizontally 87 | .gridColumn() { 88 | display: inline; 89 | float: left; 90 | margin-left: @gridGutterWidth; 91 | } 92 | // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something 93 | .makeColumn(@columnSpan: 1) { 94 | .gridColumn(); 95 | .columns(@columnSpan); 96 | } 97 | 98 | // Border Radius 99 | .border-radius(@radius: 5px) { 100 | -webkit-border-radius: @radius; 101 | -moz-border-radius: @radius; 102 | border-radius: @radius; 103 | } 104 | 105 | // Drop shadows 106 | .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { 107 | -webkit-box-shadow: @shadow; 108 | -moz-box-shadow: @shadow; 109 | box-shadow: @shadow; 110 | } 111 | 112 | // Transitions 113 | .transition(@transition) { 114 | -webkit-transition: @transition; 115 | -moz-transition: @transition; 116 | -ms-transition: @transition; 117 | -o-transition: @transition; 118 | transition: @transition; 119 | } 120 | 121 | // Background clipping 122 | .background-clip(@clip) { 123 | -webkit-background-clip: @clip; 124 | -moz-background-clip: @clip; 125 | background-clip: @clip; 126 | } 127 | 128 | // CSS3 Content Columns 129 | .content-columns(@columnCount, @columnGap: 20px) { 130 | -webkit-column-count: @columnCount; 131 | -moz-column-count: @columnCount; 132 | column-count: @columnCount; 133 | -webkit-column-gap: @columnGap; 134 | -moz-column-gap: @columnGap; 135 | column-gap: @columnGap; 136 | } 137 | 138 | // Make any element resizable for prototyping 139 | .resizable(@direction: both) { 140 | resize: @direction; // Options are horizontal, vertical, both 141 | overflow: auto; // Safari fix 142 | } 143 | 144 | // Add an alphatransparency value to any background or border color (via Elyse Holladay) 145 | #translucent { 146 | .background(@color: @white, @alpha: 1) { 147 | background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); 148 | } 149 | .border(@color: @white, @alpha: 1) { 150 | border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); 151 | background-clip: padding-box; 152 | } 153 | } 154 | 155 | // Gradient Bar Colors for buttons and allerts 156 | .gradientBar(@primaryColor, @secondaryColor) { 157 | #gradient > .vertical(@primaryColor, @secondaryColor); 158 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 159 | border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); 160 | border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); 161 | } 162 | 163 | // Gradients 164 | #gradient { 165 | .horizontal (@startColor: #555, @endColor: #333) { 166 | background-color: @endColor; 167 | background-repeat: repeat-x; 168 | background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror 169 | background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ 170 | background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 171 | background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ 172 | background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 173 | background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 174 | background-image: linear-gradient(left, @startColor, @endColor); // Le standard 175 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down 176 | } 177 | .vertical (@startColor: #555, @endColor: #333) { 178 | background-color: @endColor; 179 | background-repeat: repeat-x; 180 | background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror 181 | background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ 182 | background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 183 | background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ 184 | background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 185 | background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 186 | background-image: linear-gradient(top, @startColor, @endColor); // The standard 187 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down 188 | } 189 | .directional (@startColor: #555, @endColor: #333, @deg: 45deg) { 190 | background-color: @endColor; 191 | background-repeat: repeat-x; 192 | background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ 193 | background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 194 | background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ 195 | background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 196 | background-image: linear-gradient(@deg, @startColor, @endColor); // The standard 197 | } 198 | .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 199 | background-color: @endColor; 200 | background-repeat: no-repeat; 201 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); 202 | background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); 203 | background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); 204 | background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); 205 | background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); 206 | background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); 207 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback 208 | } 209 | } 210 | 211 | // Reset filters for IE 212 | .reset-filter() { 213 | filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); 214 | } 215 | 216 | // Opacity 217 | .opacity(@opacity: 100) { 218 | filter: e(%("alpha(opacity=%d)", @opacity)); 219 | -khtml-opacity: @opacity / 100; 220 | -moz-opacity: @opacity / 100; 221 | opacity: @opacity / 100; 222 | } -------------------------------------------------------------------------------- /lib/mixins_xtra.less: -------------------------------------------------------------------------------- 1 | /* MixinsXtra.less 2 | * Snippets of reusable CSS to develop faster and keep code readable 3 | * ----------------------------------------------------------------- */ 4 | 5 | 6 | // Font face generator 7 | .font-face(@fontFamily, @fileName, @style, @weight) { 8 | @font-face { 9 | font-family: @fontFamily; 10 | font-style: @style; 11 | font-weight: @weight; 12 | src: url('@{fileName}.eot'); 13 | src: local('@fontFamily'), 14 | url('@{fileName}.eot?#iefix') format('embedded-opentype'), 15 | url('@{fileName}.woff') format('woff'), 16 | url('@{fileName}.ttf') format('truetype'), 17 | url('@{fileName}.svg#@{fontFamily}') format('svg'), 18 | url("@{fileName}.otf") format('opentype'); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lib/patterns.less: -------------------------------------------------------------------------------- 1 | /* Patterns.less 2 | * Repeatable UI elements outside the base styles provided from the scaffolding 3 | * ---------------------------------------------------------------------------- */ 4 | 5 | 6 | // TOPBAR 7 | // ------ 8 | 9 | // Topbar for Branding and Nav 10 | .topbar { 11 | height: 40px; 12 | position: fixed; 13 | top: 0; 14 | left: 0; 15 | right: 0; 16 | z-index: 10000; 17 | overflow: visible; 18 | 19 | // Links get text shadow 20 | a { 21 | color: @grayLight; 22 | text-shadow: 0 -1px 0 rgba(0,0,0,.25); 23 | } 24 | 25 | // Hover and active states 26 | // h3 for backwards compatibility 27 | h3 a:hover, 28 | .brand:hover, 29 | ul .active > a { 30 | background-color: #333; 31 | background-color: rgba(255,255,255,.05); 32 | color: @white; 33 | text-decoration: none; 34 | } 35 | 36 | // Website name 37 | // h3 left for backwards compatibility 38 | h3 { 39 | position: relative; 40 | } 41 | h3 a, 42 | .brand { 43 | float: left; 44 | display: block; 45 | padding: 8px 20px 12px; 46 | margin-left: -20px; // negative indent to left-align the text down the page 47 | color: @white; 48 | font-size: 20px; 49 | font-weight: 200; 50 | line-height: 1; 51 | } 52 | 53 | // Plain text in topbar 54 | p { 55 | margin: 0; 56 | line-height: 40px; 57 | a:hover { 58 | background-color: transparent; 59 | color: @white; 60 | } 61 | } 62 | 63 | // Search Form 64 | form { 65 | float: left; 66 | margin: 5px 0 0 0; 67 | position: relative; 68 | .opacity(100); 69 | } 70 | // Todo: remove from v2.0 when ready, added for legacy 71 | form.pull-right { 72 | float: right; 73 | } 74 | input { 75 | background-color: #444; 76 | background-color: rgba(255,255,255,.3); 77 | #font > .sans-serif(13px, normal, 1); 78 | padding: 4px 9px; 79 | color: @white; 80 | color: rgba(255,255,255,.75); 81 | border: 1px solid #111; 82 | .border-radius(4px); 83 | @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); 84 | .box-shadow(@shadow); 85 | .transition(none); 86 | 87 | // Placeholder text gets special styles; can't be bundled together though for some reason 88 | &:-moz-placeholder { 89 | color: @grayLighter; 90 | } 91 | &::-webkit-input-placeholder { 92 | color: @grayLighter; 93 | } 94 | // Hover states 95 | &:hover { 96 | background-color: @grayLight; 97 | background-color: rgba(255,255,255,.5); 98 | color: @white; 99 | } 100 | // Focus states (we use .focused since IE8 and down doesn't support :focus) 101 | &:focus, 102 | &.focused { 103 | outline: 0; 104 | background-color: @white; 105 | color: @grayDark; 106 | text-shadow: 0 1px 0 @white; 107 | border: 0; 108 | padding: 5px 10px; 109 | .box-shadow(0 0 3px rgba(0,0,0,.15)); 110 | } 111 | } 112 | } 113 | 114 | // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present 115 | // For backwards compatibility, include .topbar .fill 116 | .topbar-inner, 117 | .topbar .fill { 118 | background-color: #222; 119 | #gradient > .vertical(#333, #222); 120 | @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); 121 | .box-shadow(@shadow); 122 | } 123 | 124 | 125 | // NAVIGATION 126 | // ---------- 127 | 128 | // Topbar Nav 129 | // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity 130 | // For backwards compatibility, leave in .topbar div > ul 131 | .topbar div > ul, 132 | .nav { 133 | display: block; 134 | float: left; 135 | margin: 0 10px 0 0; 136 | position: relative; 137 | left: 0; 138 | > li { 139 | display: block; 140 | float: left; 141 | } 142 | a { 143 | display: block; 144 | float: none; 145 | padding: 10px 10px 11px; 146 | line-height: 19px; 147 | text-decoration: none; 148 | &:hover { 149 | color: @white; 150 | text-decoration: none; 151 | } 152 | } 153 | .active > a { 154 | background-color: #222; 155 | background-color: rgba(0,0,0,.5); 156 | } 157 | 158 | // Secondary (floated right) nav in topbar 159 | &.secondary-nav { 160 | float: right; 161 | margin-left: 10px; 162 | margin-right: 0; 163 | // backwards compatibility 164 | .menu-dropdown, 165 | .dropdown-menu { 166 | right: 0; 167 | border: 0; 168 | } 169 | } 170 | // Dropdowns within the .nav 171 | // a.menu:hover and li.open .menu for backwards compatibility 172 | a.menu:hover, 173 | li.open .menu, 174 | .dropdown-toggle:hover, 175 | .dropdown.open .dropdown-toggle { 176 | background: #444; 177 | background: rgba(255,255,255,.05); 178 | } 179 | // .menu-dropdown for backwards compatibility 180 | .menu-dropdown, 181 | .dropdown-menu { 182 | background-color: #333; 183 | // a.menu for backwards compatibility 184 | a.menu, 185 | .dropdown-toggle { 186 | color: @white; 187 | &.open { 188 | background: #444; 189 | background: rgba(255,255,255,.05); 190 | } 191 | } 192 | li a { 193 | color: #999; 194 | text-shadow: 0 1px 0 rgba(0,0,0,.5); 195 | &:hover { 196 | #gradient > .vertical(#292929,#191919); 197 | color: @white; 198 | } 199 | } 200 | .active a { 201 | color: @white; 202 | } 203 | .divider { 204 | background-color: #222; 205 | border-color: #444; 206 | } 207 | } 208 | } 209 | 210 | // For backwards compatibility with new dropdowns, redeclare dropdown link padding 211 | .topbar ul .menu-dropdown li a, 212 | .topbar ul .dropdown-menu li a { 213 | padding: 4px 15px; 214 | } 215 | 216 | // Dropdown Menus 217 | // Use the .menu class on any
  1. element within the topbar or ul.tabs and you'll get some superfancy dropdowns 218 | // li.menu for backwards compatibility 219 | li.menu, 220 | .dropdown { 221 | position: relative; 222 | } 223 | // The link that is clicked to toggle the dropdown 224 | // a.menu for backwards compatibility 225 | a.menu:after, 226 | .dropdown-toggle:after { 227 | width: 0; 228 | height: 0; 229 | display: inline-block; 230 | content: "↓"; 231 | text-indent: -99999px; 232 | vertical-align: top; 233 | margin-top: 8px; 234 | margin-left: 4px; 235 | border-left: 4px solid transparent; 236 | border-right: 4px solid transparent; 237 | border-top: 4px solid @white; 238 | .opacity(50); 239 | } 240 | // The dropdown menu (ul) 241 | // .menu-dropdown for backwards compatibility 242 | .menu-dropdown, 243 | .dropdown-menu { 244 | background-color: @white; 245 | float: left; 246 | display: none; // None by default, but block on "open" of the menu 247 | position: absolute; 248 | top: 40px; 249 | z-index: 900; 250 | min-width: 160px; 251 | max-width: 220px; 252 | _width: 160px; 253 | margin-left: 0; // override default ul styles 254 | margin-right: 0; 255 | padding: 6px 0; 256 | zoom: 1; // do we need this? 257 | border-color: #999; 258 | border-color: rgba(0,0,0,.2); 259 | border-style: solid; 260 | border-width: 0 1px 1px; 261 | .border-radius(0 0 6px 6px); 262 | .box-shadow(0 2px 4px rgba(0,0,0,.2)); 263 | .background-clip(padding-box); 264 | 265 | // Unfloat any li's to make them stack 266 | li { 267 | float: none; 268 | display: block; 269 | background-color: none; 270 | } 271 | // Dividers (basically an hr) within the dropdown 272 | .divider { 273 | height: 1px; 274 | margin: 5px 0; 275 | overflow: hidden; 276 | background-color: #eee; 277 | border-bottom: 1px solid @white; 278 | } 279 | } 280 | 281 | .topbar .dropdown-menu, 282 | .dropdown-menu { 283 | // Links within the dropdown menu 284 | a { 285 | display: block; 286 | padding: 4px 15px; 287 | clear: both; 288 | font-weight: normal; 289 | line-height: 18px; 290 | color: @gray; 291 | text-shadow: 0 1px 0 @white; 292 | // Hover state 293 | &:hover, 294 | &.hover { 295 | #gradient > .vertical(#eeeeee, #dddddd); 296 | color: @grayDark; 297 | text-decoration: none; 298 | @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025); 299 | .box-shadow(@shadow); 300 | } 301 | } 302 | } 303 | 304 | // Open state for the dropdown 305 | // .open for backwards compatibility 306 | .open, 307 | .dropdown.open { 308 | // .menu for backwards compatibility 309 | .menu, 310 | .dropdown-toggle { 311 | color: @white; 312 | background: #ccc; 313 | background: rgba(0,0,0,.3); 314 | } 315 | // .menu-dropdown for backwards compatibility 316 | .menu-dropdown, 317 | .dropdown-menu { 318 | display: block; 319 | } 320 | } 321 | 322 | 323 | // TABS AND PILLS 324 | // -------------- 325 | 326 | // Common styles 327 | .tabs, 328 | .pills { 329 | margin: 0 0 @baseline; 330 | padding: 0; 331 | list-style: none; 332 | .clearfix(); 333 | > li { 334 | float: left; 335 | > a { 336 | display: block; 337 | } 338 | } 339 | } 340 | 341 | // Tabs 342 | .tabs { 343 | border-color: #ddd; 344 | border-style: solid; 345 | border-width: 0 0 1px; 346 | > li { 347 | position: relative; // For the dropdowns mostly 348 | margin-bottom: -1px; 349 | > a { 350 | padding: 0 15px; 351 | margin-right: 2px; 352 | line-height: (@baseline * 2) - 2; 353 | border: 1px solid transparent; 354 | .border-radius(4px 4px 0 0); 355 | &:hover { 356 | text-decoration: none; 357 | background-color: #eee; 358 | border-color: #eee #eee #ddd; 359 | } 360 | } 361 | } 362 | // Active state, and it's :hover to override normal :hover 363 | .active > a, 364 | .active > a:hover { 365 | color: @gray; 366 | background-color: @white; 367 | border: 1px solid #ddd; 368 | border-bottom-color: transparent; 369 | cursor: default; 370 | } 371 | } 372 | 373 | // Dropdowns in tabs 374 | .tabs { 375 | // first one for backwards compatibility 376 | .menu-dropdown, 377 | .dropdown-menu { 378 | top: 35px; 379 | border-width: 1px; 380 | .border-radius(0 6px 6px 6px); 381 | } 382 | // first one for backwards compatibility 383 | a.menu:after, 384 | .dropdown-toggle:after { 385 | border-top-color: #999; 386 | margin-top: 15px; 387 | margin-left: 5px; 388 | } 389 | // first one for backwards compatibility 390 | li.open.menu .menu, 391 | .open.dropdown .dropdown-toggle { 392 | border-color: #999; 393 | } 394 | // first one for backwards compatibility 395 | li.open a.menu:after, 396 | .dropdown.open .dropdown-toggle:after { 397 | border-top-color: #555; 398 | } 399 | } 400 | 401 | // Pills 402 | .pills { 403 | a { 404 | margin: 5px 3px 5px 0; 405 | padding: 0 15px; 406 | line-height: 30px; 407 | text-shadow: 0 1px 1px @white; 408 | .border-radius(15px); 409 | &:hover { 410 | color: @white; 411 | text-decoration: none; 412 | text-shadow: 0 1px 1px rgba(0,0,0,.25); 413 | background-color: @linkColorHover; 414 | } 415 | } 416 | .active a { 417 | color: @white; 418 | text-shadow: 0 1px 1px rgba(0,0,0,.25); 419 | background-color: @linkColor; 420 | } 421 | } 422 | 423 | // Stacked pills 424 | .pills-vertical > li { 425 | float: none; 426 | } 427 | 428 | // Tabbable areas 429 | .tab-content, 430 | .pill-content { 431 | } 432 | .tab-content > .tab-pane, 433 | .pill-content > .pill-pane, 434 | .tab-content > div, 435 | .pill-content > div { 436 | display: none; 437 | } 438 | .tab-content > .active, 439 | .pill-content > .active { 440 | display: block; 441 | } 442 | 443 | 444 | // BREADCRUMBS 445 | // ----------- 446 | 447 | .breadcrumb { 448 | padding: 7px 14px; 449 | margin: 0 0 @baseline; 450 | #gradient > .vertical(#ffffff, #f5f5f5); 451 | border: 1px solid #ddd; 452 | .border-radius(3px); 453 | .box-shadow(inset 0 1px 0 @white); 454 | li { 455 | display: inline; 456 | text-shadow: 0 1px 0 @white; 457 | } 458 | .divider { 459 | padding: 0 5px; 460 | color: @grayLight; 461 | } 462 | .active a { 463 | color: @grayDark; 464 | } 465 | } 466 | 467 | 468 | // PAGE HEADERS 469 | // ------------ 470 | 471 | .hero-unit { 472 | background-color: #f5f5f5; 473 | margin-bottom: 30px; 474 | padding: 60px; 475 | .border-radius(6px); 476 | h1 { 477 | margin-bottom: 0; 478 | font-size: 60px; 479 | line-height: 1; 480 | letter-spacing: -1px; 481 | } 482 | p { 483 | font-size: 18px; 484 | font-weight: 200; 485 | line-height: @baseline * 1.5; 486 | } 487 | } 488 | footer { 489 | margin-top: @baseline - 1; 490 | padding-top: @baseline - 1; 491 | border-top: 1px solid #eee; 492 | } 493 | 494 | 495 | // PAGE HEADERS 496 | // ------------ 497 | 498 | .page-header { 499 | margin-bottom: @baseline - 1; 500 | border-bottom: 1px solid #ddd; 501 | .box-shadow(0 1px 0 rgba(255,255,255,.5)); 502 | h1 { 503 | margin-bottom: (@baseline / 2) - 1px; 504 | } 505 | } 506 | 507 | 508 | // BUTTON STYLES 509 | // ------------- 510 | 511 | // Shared colors for buttons and alerts 512 | .btn, 513 | .alert-message { 514 | // Set text color 515 | &.danger, 516 | &.danger:hover, 517 | &.error, 518 | &.error:hover, 519 | &.success, 520 | &.success:hover, 521 | &.info, 522 | &.info:hover { 523 | color: @white 524 | } 525 | // Sets the close button to the middle of message 526 | .close{ 527 | font-family: Arial, sans-serif; 528 | line-height: 18px; 529 | } 530 | // Danger and error appear as red 531 | &.danger, 532 | &.error { 533 | .gradientBar(#ee5f5b, #c43c35); 534 | } 535 | // Success appears as green 536 | &.success { 537 | .gradientBar(#62c462, #57a957); 538 | } 539 | // Info appears as a neutral blue 540 | &.info { 541 | .gradientBar(#5bc0de, #339bb9); 542 | } 543 | } 544 | 545 | // Base .btn styles 546 | .btn { 547 | // Button Base 548 | cursor: pointer; 549 | display: inline-block; 550 | #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient 551 | padding: 5px 14px 6px; 552 | text-shadow: 0 1px 1px rgba(255,255,255,.75); 553 | color: #333; 554 | font-size: @basefont; 555 | line-height: normal; 556 | border: 1px solid #ccc; 557 | border-bottom-color: #bbb; 558 | .border-radius(4px); 559 | @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); 560 | .box-shadow(@shadow); 561 | 562 | &:hover { 563 | background-position: 0 -15px; 564 | color: #333; 565 | text-decoration: none; 566 | } 567 | 568 | // Focus state for keyboard and accessibility 569 | &:focus { 570 | outline: 1px dotted #666; 571 | } 572 | 573 | // Primary Button Type 574 | &.primary { 575 | color: @white; 576 | .gradientBar(@blue, @blueDark) 577 | } 578 | 579 | // Transitions 580 | .transition(.1s linear all); 581 | 582 | // Active and Disabled states 583 | &.active, 584 | &:active { 585 | @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05); 586 | .box-shadow(@shadow); 587 | } 588 | &.disabled { 589 | cursor: default; 590 | background-image: none; 591 | .reset-filter(); 592 | .opacity(65); 593 | .box-shadow(none); 594 | } 595 | &[disabled] { 596 | // disabled pseudo can't be included with .disabled 597 | // def because IE8 and below will drop it ;_; 598 | cursor: default; 599 | background-image: none; 600 | .reset-filter(); 601 | .opacity(65); 602 | .box-shadow(none); 603 | } 604 | 605 | // Button Sizes 606 | &.large { 607 | font-size: @basefont + 2px; 608 | line-height: normal; 609 | padding: 9px 14px 9px; 610 | .border-radius(6px); 611 | } 612 | &.small { 613 | padding: 7px 9px 7px; 614 | font-size: @basefont - 2px; 615 | } 616 | } 617 | // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons 618 | :root .alert-message, 619 | :root .btn { 620 | border-radius: 0 \0; 621 | } 622 | 623 | // Help Firefox not be a jerk about adding extra padding to buttons 624 | button.btn, 625 | input[type=submit].btn { 626 | &::-moz-focus-inner { 627 | padding: 0; 628 | border: 0; 629 | } 630 | } 631 | 632 | 633 | // CLOSE ICONS 634 | // ----------- 635 | .close { 636 | float: right; 637 | color: @black; 638 | font-size: 20px; 639 | font-weight: bold; 640 | line-height: @baseline * .75; 641 | text-shadow: 0 1px 0 rgba(255,255,255,1); 642 | .opacity(25); 643 | &:hover { 644 | color: @black; 645 | text-decoration: none; 646 | .opacity(40); 647 | } 648 | } 649 | 650 | 651 | // ERROR STYLES 652 | // ------------ 653 | 654 | // Base alert styles 655 | .alert-message { 656 | position: relative; 657 | padding: 7px 15px; 658 | margin-bottom: @baseline; 659 | color: @grayDark; 660 | .gradientBar(#fceec1, #eedc94); // warning by default 661 | text-shadow: 0 1px 0 rgba(255,255,255,.5); 662 | border-width: 1px; 663 | border-style: solid; 664 | .border-radius(4px); 665 | .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); 666 | 667 | // Adjust close icon 668 | .close { 669 | margin-top: 1px; 670 | *margin-top: 0; // For IE7 671 | } 672 | 673 | // Make links same color as text and stand out more 674 | a { 675 | font-weight: bold; 676 | color: @grayDark; 677 | } 678 | &.danger p a, 679 | &.error p a, 680 | &.success p a, 681 | &.info p a { 682 | color: @white; 683 | } 684 | 685 | // Remove extra margin from content 686 | h5 { 687 | line-height: @baseline; 688 | } 689 | p { 690 | margin-bottom: 0; 691 | } 692 | div { 693 | margin-top: 5px; 694 | margin-bottom: 2px; 695 | line-height: 28px; 696 | } 697 | .btn { 698 | // Provide actions with buttons 699 | .box-shadow(0 1px 0 rgba(255,255,255,.25)); 700 | } 701 | 702 | &.block-message { 703 | background-image: none; 704 | background-color: lighten(#fceec1, 5%); 705 | .reset-filter(); 706 | padding: 14px; 707 | border-color: #fceec1; 708 | .box-shadow(none); 709 | ul, p { 710 | margin-right: 30px; 711 | } 712 | ul { 713 | margin-bottom: 0; 714 | } 715 | li { 716 | color: @grayDark; 717 | } 718 | .alert-actions { 719 | margin-top: 5px; 720 | } 721 | &.error, 722 | &.success, 723 | &.info { 724 | color: @grayDark; 725 | text-shadow: 0 1px 0 rgba(255,255,255,.5); 726 | } 727 | &.error { 728 | background-color: lighten(#f56a66, 25%); 729 | border-color: lighten(#f56a66, 20%); 730 | } 731 | &.success { 732 | background-color: lighten(#62c462, 30%); 733 | border-color: lighten(#62c462, 25%); 734 | } 735 | &.info { 736 | background-color: lighten(#6bd0ee, 25%); 737 | border-color: lighten(#6bd0ee, 20%); 738 | } 739 | // Change link color back 740 | &.danger p a, 741 | &.error p a, 742 | &.success p a, 743 | &.info p a { 744 | color: @grayDark; 745 | } 746 | 747 | } 748 | } 749 | 750 | 751 | // PAGINATION 752 | // ---------- 753 | 754 | .pagination { 755 | height: @baseline * 2; 756 | margin: @baseline 0; 757 | ul { 758 | float: left; 759 | margin: 0; 760 | border: 1px solid #ddd; 761 | border: 1px solid rgba(0,0,0,.15); 762 | .border-radius(3px); 763 | .box-shadow(0 1px 2px rgba(0,0,0,.05)); 764 | } 765 | li { 766 | display: inline; 767 | } 768 | a { 769 | float: left; 770 | padding: 0 14px; 771 | line-height: (@baseline * 2) - 2; 772 | border-right: 1px solid; 773 | border-right-color: #ddd; 774 | border-right-color: rgba(0,0,0,.15); 775 | *border-right-color: #ddd; /* IE6-7 */ 776 | text-decoration: none; 777 | } 778 | a:hover, 779 | .active a { 780 | background-color: lighten(@blue, 45%); 781 | } 782 | .disabled a, 783 | .disabled a:hover { 784 | background-color: transparent; 785 | color: @grayLight; 786 | } 787 | .next a { 788 | border: 0; 789 | } 790 | } 791 | 792 | 793 | // WELLS 794 | // ----- 795 | 796 | .well { 797 | background-color: #f5f5f5; 798 | margin-bottom: 20px; 799 | padding: 19px; 800 | min-height: 20px; 801 | border: 1px solid #eee; 802 | border: 1px solid rgba(0,0,0,.05); 803 | .border-radius(4px); 804 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 805 | blockquote { 806 | border-color: #ddd; 807 | border-color: rgba(0,0,0,.15); 808 | } 809 | } 810 | 811 | 812 | // MODALS 813 | // ------ 814 | 815 | .modal-backdrop { 816 | background-color: @black; 817 | position: fixed; 818 | top: 0; 819 | left: 0; 820 | right: 0; 821 | bottom: 0; 822 | z-index: 10000; 823 | // Fade for backdrop 824 | &.fade { opacity: 0; } 825 | } 826 | 827 | .modal-backdrop, 828 | .modal-backdrop.fade.in { 829 | .opacity(80); 830 | } 831 | 832 | .modal { 833 | position: fixed; 834 | top: 50%; 835 | left: 50%; 836 | z-index: 11000; 837 | width: 560px; 838 | margin: -250px 0 0 -280px; 839 | background-color: @white; 840 | border: 1px solid #999; 841 | border: 1px solid rgba(0,0,0,.3); 842 | *border: 1px solid #999; /* IE6-7 */ 843 | .border-radius(6px); 844 | .box-shadow(0 3px 7px rgba(0,0,0,0.3)); 845 | .background-clip(padding-box); 846 | .close { margin-top: 7px; } 847 | &.fade { 848 | .transition(e('opacity .3s linear, top .3s ease-out')); 849 | top: -25%; 850 | } 851 | &.fade.in { top: 50%; } 852 | } 853 | .modal-header { 854 | border-bottom: 1px solid #eee; 855 | padding: 5px 15px; 856 | } 857 | .modal-body { 858 | padding: 15px; 859 | } 860 | .modal-body form { 861 | margin-bottom: 0; 862 | } 863 | .modal-footer { 864 | background-color: #f5f5f5; 865 | padding: 14px 15px 15px; 866 | border-top: 1px solid #ddd; 867 | .border-radius(0 0 6px 6px); 868 | .box-shadow(inset 0 1px 0 @white); 869 | .clearfix(); 870 | margin-bottom: 0; 871 | .btn { 872 | float: right; 873 | margin-left: 5px; 874 | } 875 | } 876 | 877 | // Fix the stacking of these components when in modals 878 | .modal .popover, 879 | .modal .twipsy { 880 | z-index: 12000; 881 | } 882 | 883 | 884 | // POPOVER ARROWS 885 | // -------------- 886 | 887 | #popoverArrow { 888 | .above(@arrowWidth: 5px) { 889 | bottom: 0; 890 | left: 50%; 891 | margin-left: -@arrowWidth; 892 | border-left: @arrowWidth solid transparent; 893 | border-right: @arrowWidth solid transparent; 894 | border-top: @arrowWidth solid @black; 895 | } 896 | .left(@arrowWidth: 5px) { 897 | top: 50%; 898 | right: 0; 899 | margin-top: -@arrowWidth; 900 | border-top: @arrowWidth solid transparent; 901 | border-bottom: @arrowWidth solid transparent; 902 | border-left: @arrowWidth solid @black; 903 | } 904 | .below(@arrowWidth: 5px) { 905 | top: 0; 906 | left: 50%; 907 | margin-left: -@arrowWidth; 908 | border-left: @arrowWidth solid transparent; 909 | border-right: @arrowWidth solid transparent; 910 | border-bottom: @arrowWidth solid @black; 911 | } 912 | .right(@arrowWidth: 5px) { 913 | top: 50%; 914 | left: 0; 915 | margin-top: -@arrowWidth; 916 | border-top: @arrowWidth solid transparent; 917 | border-bottom: @arrowWidth solid transparent; 918 | border-right: @arrowWidth solid @black; 919 | } 920 | } 921 | 922 | // TWIPSY 923 | // ------ 924 | 925 | .twipsy { 926 | display: block; 927 | position: absolute; 928 | visibility: visible; 929 | padding: 5px; 930 | font-size: 11px; 931 | z-index: 1000; 932 | .opacity(80); 933 | &.fade.in { 934 | .opacity(80); 935 | } 936 | &.above .twipsy-arrow { #popoverArrow > .above(); } 937 | &.left .twipsy-arrow { #popoverArrow > .left(); } 938 | &.below .twipsy-arrow { #popoverArrow > .below(); } 939 | &.right .twipsy-arrow { #popoverArrow > .right(); } 940 | } 941 | .twipsy-inner { 942 | padding: 3px 8px; 943 | background-color: @black; 944 | color: white; 945 | text-align: center; 946 | max-width: 200px; 947 | text-decoration: none; 948 | .border-radius(4px); 949 | } 950 | .twipsy-arrow { 951 | position: absolute; 952 | width: 0; 953 | height: 0; 954 | } 955 | 956 | 957 | // POPOVERS 958 | // -------- 959 | 960 | .popover { 961 | position: absolute; 962 | top: 0; 963 | left: 0; 964 | z-index: 1000; 965 | padding: 5px; 966 | display: none; 967 | &.above .arrow { #popoverArrow > .above(); } 968 | &.right .arrow { #popoverArrow > .right(); } 969 | &.below .arrow { #popoverArrow > .below(); } 970 | &.left .arrow { #popoverArrow > .left(); } 971 | .arrow { 972 | position: absolute; 973 | width: 0; 974 | height: 0; 975 | } 976 | .inner { 977 | background: @black; 978 | background: rgba(0,0,0,.8); 979 | padding: 3px; 980 | overflow: hidden; 981 | width: 280px; 982 | .border-radius(6px); 983 | .box-shadow(0 3px 7px rgba(0,0,0,0.3)); 984 | } 985 | .title { 986 | background-color: #f5f5f5; 987 | padding: 9px 15px; 988 | line-height: 1; 989 | .border-radius(3px 3px 0 0); 990 | border-bottom:1px solid #eee; 991 | } 992 | .content { 993 | background-color: @white; 994 | padding: 14px; 995 | .border-radius(0 0 3px 3px); 996 | .background-clip(padding-box); 997 | p, ul, ol { 998 | margin-bottom: 0; 999 | } 1000 | } 1001 | } 1002 | 1003 | 1004 | // PATTERN ANIMATIONS 1005 | // ------------------ 1006 | 1007 | .fade { 1008 | .transition(opacity .15s linear); 1009 | opacity: 0; 1010 | &.in { 1011 | opacity: 1; 1012 | } 1013 | } 1014 | 1015 | 1016 | // LABELS 1017 | // ------ 1018 | 1019 | .label { 1020 | padding: 1px 3px 2px; 1021 | font-size: @basefont * .75; 1022 | font-weight: bold; 1023 | color: @white; 1024 | text-transform: uppercase; 1025 | white-space: nowrap; 1026 | background-color: @grayLight; 1027 | .border-radius(3px); 1028 | &.important { background-color: #c43c35; } 1029 | &.warning { background-color: @orange; } 1030 | &.success { background-color: @green; } 1031 | &.notice { background-color: lighten(@blue, 25%); } 1032 | } 1033 | 1034 | 1035 | // MEDIA GRIDS 1036 | // ----------- 1037 | 1038 | .media-grid { 1039 | margin-left: -@gridGutterWidth; 1040 | margin-bottom: 0; 1041 | .clearfix(); 1042 | li { 1043 | display: inline; 1044 | } 1045 | a { 1046 | float: left; 1047 | padding: 4px; 1048 | margin: 0 0 @baseline @gridGutterWidth; 1049 | border: 1px solid #ddd; 1050 | .border-radius(4px); 1051 | .box-shadow(0 1px 1px rgba(0,0,0,.075)); 1052 | img { 1053 | display: block; 1054 | } 1055 | &:hover { 1056 | border-color: @linkColor; 1057 | .box-shadow(0 1px 4px rgba(0,105,214,.25)); 1058 | } 1059 | } 1060 | } 1061 | -------------------------------------------------------------------------------- /lib/patterns_xtra.less: -------------------------------------------------------------------------------- 1 | /* PatternsXtra.less 2 | * Repeatable UI elements outside the base styles provided from the scaffolding 3 | * ---------------------------------------------------------------------------- */ 4 | 5 | 6 | // Base .btn styles 7 | .btn { 8 | // Button Icons 9 | &.icon { 10 | &:before { 11 | font-family: @iconFontFamily; 12 | font-size: @basefont + 1px; 13 | line-height: @basefont; 14 | color: @iconColor; 15 | content: ""; 16 | position:relative; 17 | float:left; 18 | top:1px; 19 | margin: 0 0.55em 0 -0.25em; 20 | } 21 | &.alternative:before { 22 | color: @alternativeIconColor; 23 | } 24 | &.right:before { 25 | float:right; 26 | margin: 0 -0.25em 0 0.5em; 27 | } 28 | &.large:before { 29 | font-size: @basefont + 3px; 30 | } 31 | &.small:before { 32 | font-size: @basefont; 33 | } 34 | 35 | // Icons 36 | &.arrowup:before { 37 | content: "0"; 38 | } 39 | &.arrowdown:before { 40 | content: "1"; 41 | } 42 | &.arrowleft:before { 43 | content: "2"; 44 | } 45 | &.arrowright:before { 46 | content: "3"; 47 | } 48 | &.approve:before { 49 | content: "4"; 50 | } 51 | &.remove:before { 52 | content: "5"; 53 | } 54 | &.log:before { 55 | content: "6"; 56 | } 57 | &.calendar:before { 58 | content: "7"; 59 | } 60 | &.chat:before { 61 | content: "8"; 62 | } 63 | &.clock:before { 64 | content: "9"; 65 | } 66 | &.settings:before { 67 | content: "a"; 68 | } 69 | &.comment:before { 70 | content: "b"; 71 | } 72 | &.fork:before { 73 | content: "c"; 74 | } 75 | &.like:before { 76 | content: "d"; 77 | } 78 | &.home:before { 79 | content: "e"; 80 | } 81 | &.key:before { 82 | content: "f"; 83 | } 84 | &.lock:before { 85 | content: "g"; 86 | } 87 | &.unlock:before { 88 | content: "h"; 89 | } 90 | &.loop:before { 91 | content: "i"; 92 | } 93 | &.search:before { 94 | content: "j"; 95 | } 96 | &.mail:before { 97 | content: "k"; 98 | } 99 | &.move:before { 100 | content: "l"; 101 | } 102 | &.edit:before { 103 | content: "m"; 104 | } 105 | &.pin:before { 106 | content: "n"; 107 | } 108 | &.add:before { 109 | content: "o"; 110 | } 111 | &.reload:before { 112 | content: "p"; 113 | } 114 | &.rss:before { 115 | content: "q"; 116 | } 117 | &.tag:before { 118 | content: "r"; 119 | } 120 | &.trash:before { 121 | content: "s"; 122 | } 123 | &.favorite:before { 124 | content: "t"; 125 | } 126 | &.user:before { 127 | content: "u"; 128 | } 129 | &.minus:before { 130 | content: "v"; 131 | } 132 | &.upload:before { 133 | content: "w"; 134 | } 135 | &.transfer:before { 136 | content: "x"; 137 | } 138 | &.stop:before { 139 | content: "y"; 140 | } 141 | &.movie:before { 142 | content: "z"; 143 | } 144 | &.pause:before { 145 | content: "A"; 146 | } 147 | &.play:before { 148 | content: "B"; 149 | } 150 | &.new-window:before { 151 | content: "C"; 152 | } 153 | &.link:before { 154 | content: "D"; 155 | } 156 | &.iinfo:before { 157 | content: "E"; 158 | } 159 | &.image:before { 160 | content: "F"; 161 | } 162 | &.folder:before { 163 | content: "G"; 164 | } 165 | &.fullscreen:before { 166 | content: "H"; 167 | } 168 | &.fullexit:before { 169 | content: "I"; 170 | } 171 | &.share:before { 172 | content: "J"; 173 | } 174 | &.undo:before { 175 | content: "K"; 176 | } 177 | &.quote:before { 178 | content: "L"; 179 | } 180 | &.printer:before { 181 | content: "M"; 182 | } 183 | } 184 | } 185 | -------------------------------------------------------------------------------- /lib/reset.less: -------------------------------------------------------------------------------- 1 | /* Reset.less 2 | * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). 3 | * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ 4 | 5 | 6 | // ERIC MEYER RESET 7 | // -------------------------------------------------- 8 | 9 | html, body { margin: 0; padding: 0; } 10 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; } 11 | table { border-collapse: collapse; border-spacing: 0; } 12 | ol, ul { list-style: none; } 13 | q:before, q:after, blockquote:before, blockquote:after { content: ""; } 14 | 15 | 16 | // Normalize.css 17 | // Pulling in select resets form the normalize.css project 18 | // -------------------------------------------------- 19 | 20 | // Display in IE6-9 and FF3 21 | // ------------------------- 22 | // Source: http://github.com/necolas/normalize.css 23 | html { 24 | overflow-y: scroll; 25 | font-size: 100%; 26 | -webkit-text-size-adjust: 100%; 27 | -ms-text-size-adjust: 100%; 28 | } 29 | // Focus states 30 | a:focus { 31 | outline: thin dotted; 32 | } 33 | // Hover & Active 34 | a:hover, 35 | a:active { 36 | outline: 0; 37 | } 38 | 39 | // Display in IE6-9 and FF3 40 | // ------------------------- 41 | // Source: http://github.com/necolas/normalize.css 42 | article, 43 | aside, 44 | details, 45 | figcaption, 46 | figure, 47 | footer, 48 | header, 49 | hgroup, 50 | nav, 51 | section { 52 | display: block; 53 | } 54 | 55 | // Display block in IE6-9 and FF3 56 | // ------------------------- 57 | // Source: http://github.com/necolas/normalize.css 58 | audio, 59 | canvas, 60 | video { 61 | display: inline-block; 62 | *display: inline; 63 | *zoom: 1; 64 | } 65 | 66 | // Prevents modern browsers from displaying 'audio' without controls 67 | // ------------------------- 68 | // Source: http://github.com/necolas/normalize.css 69 | audio:not([controls]) { 70 | display: none; 71 | } 72 | 73 | // Prevents sub and sup affecting line-height in all browsers 74 | // ------------------------- 75 | // Source: http://github.com/necolas/normalize.css 76 | sub, 77 | sup { 78 | font-size: 75%; 79 | line-height: 0; 80 | position: relative; 81 | vertical-align: baseline; 82 | } 83 | sup { 84 | top: -0.5em; 85 | } 86 | sub { 87 | bottom: -0.25em; 88 | } 89 | 90 | // Img border in a's and image quality 91 | // ------------------------- 92 | // Source: http://github.com/necolas/normalize.css 93 | img { 94 | border: 0; 95 | -ms-interpolation-mode: bicubic; 96 | } 97 | 98 | // Forms 99 | // ------------------------- 100 | // Source: http://github.com/necolas/normalize.css 101 | 102 | // Font size in all browsers, margin changes, misc consistency 103 | button, 104 | input, 105 | select, 106 | textarea { 107 | font-size: 100%; 108 | margin: 0; 109 | vertical-align: baseline; 110 | *vertical-align: middle; 111 | } 112 | button, 113 | input { 114 | line-height: normal; // FF3/4 have !important on line-height in UA stylesheet 115 | *overflow: visible; // Inner spacing ie IE6/7 116 | } 117 | button::-moz-focus-inner, 118 | input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 119 | border: 0; 120 | padding: 0; 121 | } 122 | button, 123 | input[type="button"], 124 | input[type="reset"], 125 | input[type="submit"] { 126 | cursor: pointer; // Cursors on all buttons applied consistently 127 | -webkit-appearance: button; // Style clicable inputs in iOS 128 | } 129 | input[type="search"] { // Appearance in Safari/Chrome 130 | -webkit-appearance: textfield; 131 | -webkit-box-sizing: content-box; 132 | -moz-box-sizing: content-box; 133 | box-sizing: content-box; 134 | } 135 | input[type="search"]::-webkit-search-decoration { 136 | -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 137 | } 138 | textarea { 139 | overflow: auto; // Remove vertical scrollbar in IE6-9 140 | vertical-align: top; // Readability and alignment cross-browser 141 | } -------------------------------------------------------------------------------- /lib/scaffolding.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Scaffolding 3 | * Basic and global styles for generating a grid system, structural layout, and page templates 4 | * ------------------------------------------------------------------------------------------- */ 5 | 6 | 7 | // STRUCTURAL LAYOUT 8 | // ----------------- 9 | 10 | body { 11 | background-color: @white; 12 | margin: 0; 13 | #font > .sans-serif(normal,@basefont,@baseline); 14 | color: @grayDark; 15 | } 16 | 17 | // Container (centered, fixed-width layouts) 18 | .container { 19 | .fixed-container(); 20 | } 21 | 22 | // Fluid layouts (left aligned, with sidebar, min- & max-width content) 23 | .container-fluid { 24 | position: relative; 25 | min-width: 940px; 26 | padding-left: 20px; 27 | padding-right: 20px; 28 | .clearfix(); 29 | > .sidebar { 30 | position: absolute; 31 | top: 0; 32 | left: 20px; 33 | width: 220px; 34 | } 35 | // TODO in v2: rename this and .popover .content to be more specific 36 | > .content { 37 | margin-left: 240px; 38 | } 39 | } 40 | 41 | 42 | // BASE STYLES 43 | // ----------- 44 | 45 | // Links 46 | a { 47 | color: @linkColor; 48 | text-decoration: none; 49 | line-height: inherit; 50 | font-weight: inherit; 51 | &:hover { 52 | color: @linkColorHover; 53 | text-decoration: underline; 54 | } 55 | } 56 | 57 | // Quick floats 58 | .pull-right { 59 | float: right; 60 | } 61 | .pull-left { 62 | float: left; 63 | } 64 | 65 | // Toggling content 66 | .hide { 67 | display: none; 68 | } 69 | .show { 70 | display: block; 71 | } 72 | 73 | 74 | // GRID SYSTEM 75 | // ----------- 76 | // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there 77 | 78 | .row { 79 | .clearfix(); 80 | margin-left: -@gridGutterWidth; 81 | } 82 | 83 | // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) 84 | // Credit to @dhg for the idea 85 | .row > [class*="span"] { 86 | .gridColumn(); 87 | } 88 | 89 | // Default columns 90 | .span1 { .columns(1); } 91 | .span2 { .columns(2); } 92 | .span3 { .columns(3); } 93 | .span4 { .columns(4); } 94 | .span5 { .columns(5); } 95 | .span6 { .columns(6); } 96 | .span7 { .columns(7); } 97 | .span8 { .columns(8); } 98 | .span9 { .columns(9); } 99 | .span10 { .columns(10); } 100 | .span11 { .columns(11); } 101 | .span12 { .columns(12); } 102 | .span13 { .columns(13); } 103 | .span14 { .columns(14); } 104 | .span15 { .columns(15); } 105 | .span16 { .columns(16); } 106 | 107 | // For optional 24-column grid 108 | .span17 { .columns(17); } 109 | .span18 { .columns(18); } 110 | .span19 { .columns(19); } 111 | .span20 { .columns(20); } 112 | .span21 { .columns(21); } 113 | .span22 { .columns(22); } 114 | .span23 { .columns(23); } 115 | .span24 { .columns(24); } 116 | 117 | // Offset column options 118 | .row { 119 | > .offset1 { .offset(1); } 120 | > .offset2 { .offset(2); } 121 | > .offset3 { .offset(3); } 122 | > .offset4 { .offset(4); } 123 | > .offset5 { .offset(5); } 124 | > .offset6 { .offset(6); } 125 | > .offset7 { .offset(7); } 126 | > .offset8 { .offset(8); } 127 | > .offset9 { .offset(9); } 128 | > .offset10 { .offset(10); } 129 | > .offset11 { .offset(11); } 130 | > .offset12 { .offset(12); } 131 | } 132 | 133 | // Unique column sizes for 16-column grid 134 | .span-one-third { width: 300px; } 135 | .span-two-thirds { width: 620px; } 136 | .row { 137 | > .offset-one-third { margin-left: 340px; } 138 | > .offset-two-thirds { margin-left: 660px; } 139 | } -------------------------------------------------------------------------------- /lib/tables.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Tables.less 3 | * Tables for, you guessed it, tabular data 4 | * ---------------------------------------- */ 5 | 6 | 7 | // BASELINE STYLES 8 | // --------------- 9 | 10 | table { 11 | width: 100%; 12 | margin-bottom: @baseline; 13 | padding: 0; 14 | font-size: @basefont; 15 | border-collapse: collapse; 16 | th, 17 | td { 18 | padding: 10px 10px 9px; 19 | line-height: @baseline; 20 | text-align: left; 21 | } 22 | th { 23 | padding-top: 9px; 24 | font-weight: bold; 25 | vertical-align: middle; 26 | } 27 | td { 28 | vertical-align: top; 29 | border-top: 1px solid #ddd; 30 | } 31 | // When scoped to row, fix th in tbody 32 | tbody th { 33 | border-top: 1px solid #ddd; 34 | vertical-align: top; 35 | } 36 | } 37 | 38 | 39 | // CONDENSED VERSION 40 | // ----------------- 41 | .condensed-table { 42 | th, 43 | td { 44 | padding: 5px 5px 4px; 45 | } 46 | } 47 | 48 | 49 | // BORDERED VERSION 50 | // ---------------- 51 | 52 | .bordered-table { 53 | border: 1px solid #ddd; 54 | border-collapse: separate; // Done so we can round those corners! 55 | *border-collapse: collapse; /* IE7, collapse table to remove spacing */ 56 | .border-radius(4px); 57 | th + th, 58 | td + td, 59 | th + td { 60 | border-left: 1px solid #ddd; 61 | } 62 | thead tr:first-child th:first-child, 63 | tbody tr:first-child td:first-child { 64 | .border-radius(4px 0 0 0); 65 | } 66 | thead tr:first-child th:last-child, 67 | tbody tr:first-child td:last-child { 68 | .border-radius(0 4px 0 0); 69 | } 70 | tbody tr:last-child td:first-child { 71 | .border-radius(0 0 0 4px); 72 | } 73 | tbody tr:last-child td:last-child { 74 | .border-radius(0 0 4px 0); 75 | } 76 | } 77 | 78 | 79 | // TABLE CELL SIZES 80 | // ---------------- 81 | 82 | // This is a duplication of the main grid .columns() mixin, but subtracts 20px to account for input padding and border 83 | .tableColumns(@columnSpan: 1) { 84 | width: ((@gridColumnWidth - 20) * @columnSpan) + ((@gridColumnWidth - 20) * (@columnSpan - 1)); 85 | } 86 | table { 87 | // Default columns 88 | .span1 { .tableColumns(1); } 89 | .span2 { .tableColumns(2); } 90 | .span3 { .tableColumns(3); } 91 | .span4 { .tableColumns(4); } 92 | .span5 { .tableColumns(5); } 93 | .span6 { .tableColumns(6); } 94 | .span7 { .tableColumns(7); } 95 | .span8 { .tableColumns(8); } 96 | .span9 { .tableColumns(9); } 97 | .span10 { .tableColumns(10); } 98 | .span11 { .tableColumns(11); } 99 | .span12 { .tableColumns(12); } 100 | .span13 { .tableColumns(13); } 101 | .span14 { .tableColumns(14); } 102 | .span15 { .tableColumns(15); } 103 | .span16 { .tableColumns(16); } 104 | } 105 | 106 | 107 | // ZEBRA-STRIPING 108 | // -------------- 109 | 110 | // Default zebra-stripe styles (alternating gray and transparent backgrounds) 111 | .zebra-striped { 112 | tbody { 113 | tr:nth-child(odd) td, 114 | tr:nth-child(odd) th { 115 | background-color: #f9f9f9; 116 | } 117 | tr:hover td, 118 | tr:hover th { 119 | background-color: #f5f5f5; 120 | } 121 | } 122 | } 123 | 124 | table { 125 | // Tablesorting styles w/ jQuery plugin 126 | .header { 127 | cursor: pointer; 128 | &:after { 129 | content: ""; 130 | float: right; 131 | margin-top: 7px; 132 | border-width: 0 4px 4px; 133 | border-style: solid; 134 | border-color: #000 transparent; 135 | visibility: hidden; 136 | } 137 | } 138 | // Style the sorted column headers (THs) 139 | .headerSortUp, 140 | .headerSortDown { 141 | background-color: rgba(141,192,219,.25); 142 | text-shadow: 0 1px 1px rgba(255,255,255,.75); 143 | } 144 | // Style the ascending (reverse alphabetical) column header 145 | .header:hover { 146 | &:after { 147 | visibility:visible; 148 | } 149 | } 150 | // Style the descending (alphabetical) column header 151 | .headerSortDown, 152 | .headerSortDown:hover { 153 | &:after { 154 | visibility:visible; 155 | .opacity(60); 156 | } 157 | } 158 | // Style the ascending (reverse alphabetical) column header 159 | .headerSortUp { 160 | &:after { 161 | border-bottom: none; 162 | border-left: 4px solid transparent; 163 | border-right: 4px solid transparent; 164 | border-top: 4px solid #000; 165 | visibility:visible; 166 | .box-shadow(none); //can't add boxshadow to downward facing arrow :( 167 | .opacity(60); 168 | } 169 | } 170 | // Blue Table Headings 171 | .blue { 172 | color: @blue; 173 | border-bottom-color: @blue; 174 | } 175 | .headerSortUp.blue, 176 | .headerSortDown.blue { 177 | background-color: lighten(@blue, 40%); 178 | } 179 | // Green Table Headings 180 | .green { 181 | color: @green; 182 | border-bottom-color: @green; 183 | } 184 | .headerSortUp.green, 185 | .headerSortDown.green { 186 | background-color: lighten(@green, 40%); 187 | } 188 | // Red Table Headings 189 | .red { 190 | color: @red; 191 | border-bottom-color: @red; 192 | } 193 | .headerSortUp.red, 194 | .headerSortDown.red { 195 | background-color: lighten(@red, 50%); 196 | } 197 | // Yellow Table Headings 198 | .yellow { 199 | color: @yellow; 200 | border-bottom-color: @yellow; 201 | } 202 | .headerSortUp.yellow, 203 | .headerSortDown.yellow { 204 | background-color: lighten(@yellow, 40%); 205 | } 206 | // Orange Table Headings 207 | .orange { 208 | color: @orange; 209 | border-bottom-color: @orange; 210 | } 211 | .headerSortUp.orange, 212 | .headerSortDown.orange { 213 | background-color: lighten(@orange, 40%); 214 | } 215 | // Purple Table Headings 216 | .purple { 217 | color: @purple; 218 | border-bottom-color: @purple; 219 | } 220 | .headerSortUp.purple, 221 | .headerSortDown.purple { 222 | background-color: lighten(@purple, 40%); 223 | } 224 | } -------------------------------------------------------------------------------- /lib/type.less: -------------------------------------------------------------------------------- 1 | /* Typography.less 2 | * Headings, body text, lists, code, and more for a versatile and durable typography system 3 | * ---------------------------------------------------------------------------------------- */ 4 | 5 | 6 | // BODY TEXT 7 | // --------- 8 | 9 | p { 10 | #font > .shorthand(normal,@basefont,@baseline); 11 | margin-bottom: @baseline / 2; 12 | small { 13 | font-size: @basefont - 2; 14 | color: @grayLight; 15 | } 16 | } 17 | 18 | 19 | // HEADINGS 20 | // -------- 21 | 22 | h1, h2, h3, h4, h5, h6 { 23 | font-weight: bold; 24 | color: @grayDark; 25 | small { 26 | color: @grayLight; 27 | } 28 | } 29 | h1 { 30 | margin-bottom: @baseline; 31 | font-size: 30px; 32 | line-height: @baseline * 2; 33 | small { 34 | font-size: 18px; 35 | } 36 | } 37 | h2 { 38 | font-size: 24px; 39 | line-height: @baseline * 2; 40 | small { 41 | font-size: 14px; 42 | } 43 | } 44 | h3, h4, h5, h6 { 45 | line-height: @baseline * 2; 46 | } 47 | h3 { 48 | font-size: 18px; 49 | small { 50 | font-size: 14px; 51 | } 52 | } 53 | h4 { 54 | font-size: 16px; 55 | small { 56 | font-size: 12px; 57 | } 58 | } 59 | h5 { 60 | font-size: 14px; 61 | } 62 | h6 { 63 | font-size: 13px; 64 | color: @grayLight; 65 | text-transform: uppercase; 66 | } 67 | 68 | 69 | // COLORS 70 | // ------ 71 | 72 | // Unordered and Ordered lists 73 | ul, ol { 74 | margin: 0 0 @baseline 25px; 75 | } 76 | ul ul, 77 | ul ol, 78 | ol ol, 79 | ol ul { 80 | margin-bottom: 0; 81 | } 82 | ul { 83 | list-style: disc; 84 | } 85 | ol { 86 | list-style: decimal; 87 | } 88 | li { 89 | line-height: @baseline; 90 | color: @gray; 91 | } 92 | ul.unstyled { 93 | list-style: none; 94 | margin-left: 0; 95 | } 96 | 97 | // Description Lists 98 | dl { 99 | margin-bottom: @baseline; 100 | dt, dd { 101 | line-height: @baseline; 102 | } 103 | dt { 104 | font-weight: bold; 105 | } 106 | dd { 107 | margin-left: @baseline / 2; 108 | } 109 | } 110 | 111 | // MISC 112 | // ---- 113 | 114 | // Horizontal rules 115 | hr { 116 | margin: 20px 0 19px; 117 | border: 0; 118 | border-bottom: 1px solid #eee; 119 | } 120 | 121 | // Emphasis 122 | strong { 123 | font-style: inherit; 124 | font-weight: bold; 125 | } 126 | em { 127 | font-style: italic; 128 | font-weight: inherit; 129 | line-height: inherit; 130 | } 131 | .muted { 132 | color: @grayLight; 133 | } 134 | 135 | // Blockquotes 136 | blockquote { 137 | margin-bottom: @baseline; 138 | border-left: 5px solid #eee; 139 | padding-left: 15px; 140 | p { 141 | #font > .shorthand(300,14px,@baseline); 142 | margin-bottom: 0; 143 | } 144 | small { 145 | display: block; 146 | #font > .shorthand(300,12px,@baseline); 147 | color: @grayLight; 148 | &:before { 149 | content: '\2014 \00A0'; 150 | } 151 | } 152 | } 153 | 154 | // Addresses 155 | address { 156 | display: block; 157 | line-height: @baseline; 158 | margin-bottom: @baseline; 159 | } 160 | 161 | // Inline and block code styles 162 | code, pre { 163 | padding: 0 3px 2px; 164 | font-family: Monaco, Andale Mono, Courier New, monospace; 165 | font-size: 12px; 166 | .border-radius(3px); 167 | } 168 | code { 169 | background-color: lighten(@orange, 40%); 170 | color: rgba(0,0,0,.75); 171 | padding: 1px 3px; 172 | } 173 | pre { 174 | background-color: #f5f5f5; 175 | display: block; 176 | padding: (@baseline - 1) / 2; 177 | margin: 0 0 @baseline; 178 | line-height: @baseline; 179 | font-size: 12px; 180 | border: 1px solid #ccc; 181 | border: 1px solid rgba(0,0,0,.15); 182 | .border-radius(3px); 183 | white-space: pre; 184 | white-space: pre-wrap; 185 | word-wrap: break-word; 186 | 187 | } -------------------------------------------------------------------------------- /lib/type_xtra.less: -------------------------------------------------------------------------------- 1 | /* TypographyXtra.less 2 | * Headings, body text, lists, code, and more for a versatile and durable typography system 3 | * ---------------------------------------------------------------------------------------- */ 4 | 5 | // ICON FONTS 6 | // --------- 7 | .font-face(@iconFontFamily, @iconFileName, normal, normal ); 8 | -------------------------------------------------------------------------------- /lib/variables.less: -------------------------------------------------------------------------------- 1 | /* Variables.less 2 | * Variables to customize the look and feel of Bootstrap 3 | * ----------------------------------------------------- */ 4 | 5 | 6 | // Links 7 | @linkColor: #0069d6; 8 | @linkColorHover: darken(@linkColor, 15); 9 | 10 | // Grays 11 | @black: #000; 12 | @grayDark: lighten(@black, 25%); 13 | @gray: lighten(@black, 50%); 14 | @grayLight: lighten(@black, 75%); 15 | @grayLighter: lighten(@black, 90%); 16 | @white: #fff; 17 | 18 | // Accent Colors 19 | @blue: #049CDB; 20 | @blueDark: #0064CD; 21 | @green: #46a546; 22 | @red: #9d261d; 23 | @yellow: #ffc40d; 24 | @orange: #f89406; 25 | @pink: #c3325f; 26 | @purple: #7a43b6; 27 | 28 | // Baseline grid 29 | @basefont: 13px; 30 | @baseline: 18px; 31 | 32 | // Griditude 33 | // Modify the grid styles in mixins.less 34 | @gridColumns: 16; 35 | @gridColumnWidth: 40px; 36 | @gridGutterWidth: 20px; 37 | @extraSpace: (@gridGutterWidth * 2); // For our grid calculations 38 | @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); 39 | 40 | // Color Scheme 41 | // Use this to roll your own color schemes if you like (unused by Bootstrap by default) 42 | @baseColor: @blue; // Set a base color 43 | @complement: spin(@baseColor, 180); // Determine a complementary color 44 | @split1: spin(@baseColor, 158); // Split complements 45 | @split2: spin(@baseColor, -158); 46 | @triad1: spin(@baseColor, 135); // Triads colors 47 | @triad2: spin(@baseColor, -135); 48 | @tetra1: spin(@baseColor, 90); // Tetra colors 49 | @tetra2: spin(@baseColor, -90); 50 | @analog1: spin(@baseColor, 22); // Analogs colors 51 | @analog2: spin(@baseColor, -22); 52 | 53 | 54 | 55 | // More variables coming soon: 56 | // - @basefont to @baseFontSize 57 | // - @baseline to @baseLineHeight 58 | // - @baseFontFamily 59 | // - @primaryButtonColor 60 | // - anything else? File an issue on GitHub -------------------------------------------------------------------------------- /lib/variables_xtra.less: -------------------------------------------------------------------------------- 1 | /* VariablesXtra.less 2 | * Variables to customize the look and feel of Bootstrap 3 | * ----------------------------------------------------- */ 4 | 5 | //Icons 6 | 7 | @iconFontFamily: "IconicStrokeRegular"; 8 | @iconFileName: "fonts/iconic_stroke"; 9 | @iconColor: #000000; 10 | @alternativeIconColor: #ffffff; 11 | @iconBasefont: 13px; 12 | @iconBaseline: 14px; 13 | --------------------------------------------------------------------------------