Merge branch 'master' into pr/11676
Conflicts: less/modals.less
@@ -0,0 +1,290 @@
|
|||||||
|
{
|
||||||
|
"always-semicolon": true,
|
||||||
|
"block-indent": 2,
|
||||||
|
"colon-space": true,
|
||||||
|
"color-case": "lower",
|
||||||
|
"color-shorthand": true,
|
||||||
|
"combinator-space": true,
|
||||||
|
"element-case": "lower",
|
||||||
|
"eof-newline": true,
|
||||||
|
"leading-zero": false,
|
||||||
|
"remove-empty-rulesets": true,
|
||||||
|
"rule-indent": 2,
|
||||||
|
"stick-brace": true,
|
||||||
|
"strip-spaces": true,
|
||||||
|
"unitless-zero": true,
|
||||||
|
"vendor-prefix-align": true,
|
||||||
|
"sort-order": [
|
||||||
|
[
|
||||||
|
"position",
|
||||||
|
"top",
|
||||||
|
"right",
|
||||||
|
"bottom",
|
||||||
|
"left",
|
||||||
|
"z-index",
|
||||||
|
"display",
|
||||||
|
"float",
|
||||||
|
"width",
|
||||||
|
"min-width",
|
||||||
|
"max-width",
|
||||||
|
"height",
|
||||||
|
"min-height",
|
||||||
|
"max-height",
|
||||||
|
"-webkit-box-sizing",
|
||||||
|
"-moz-box-sizing",
|
||||||
|
"box-sizing",
|
||||||
|
"padding",
|
||||||
|
"padding-top",
|
||||||
|
"padding-right",
|
||||||
|
"padding-bottom",
|
||||||
|
"padding-left",
|
||||||
|
"margin",
|
||||||
|
"margin-top",
|
||||||
|
"margin-right",
|
||||||
|
"margin-bottom",
|
||||||
|
"margin-left",
|
||||||
|
"overflow",
|
||||||
|
"overflow-x",
|
||||||
|
"overflow-y",
|
||||||
|
"-ms-overflow-x",
|
||||||
|
"-ms-overflow-y",
|
||||||
|
"clip",
|
||||||
|
"clear",
|
||||||
|
"font",
|
||||||
|
"font-family",
|
||||||
|
"font-size",
|
||||||
|
"font-style",
|
||||||
|
"font-weight",
|
||||||
|
"font-variant",
|
||||||
|
"font-size-adjust",
|
||||||
|
"font-stretch",
|
||||||
|
"font-effect",
|
||||||
|
"font-emphasize",
|
||||||
|
"font-emphasize-position",
|
||||||
|
"font-emphasize-style",
|
||||||
|
"font-smooth",
|
||||||
|
"-webkit-hyphens",
|
||||||
|
"-moz-hyphens",
|
||||||
|
"hyphens",
|
||||||
|
"line-height",
|
||||||
|
"color",
|
||||||
|
"text-align",
|
||||||
|
"-webkit-text-align-last",
|
||||||
|
"-moz-text-align-last",
|
||||||
|
"-ms-text-align-last",
|
||||||
|
"text-align-last",
|
||||||
|
"text-emphasis",
|
||||||
|
"text-emphasis-color",
|
||||||
|
"text-emphasis-style",
|
||||||
|
"text-emphasis-position",
|
||||||
|
"text-decoration",
|
||||||
|
"text-indent",
|
||||||
|
"text-justify",
|
||||||
|
"text-outline",
|
||||||
|
"-ms-text-overflow",
|
||||||
|
"text-overflow",
|
||||||
|
"text-overflow-ellipsis",
|
||||||
|
"text-overflow-mode",
|
||||||
|
"text-shadow",
|
||||||
|
"text-transform",
|
||||||
|
"text-wrap",
|
||||||
|
"letter-spacing",
|
||||||
|
"-ms-word-break",
|
||||||
|
"word-break",
|
||||||
|
"word-spacing",
|
||||||
|
"-ms-word-wrap",
|
||||||
|
"word-wrap",
|
||||||
|
"-moz-tab-size",
|
||||||
|
"-o-tab-size",
|
||||||
|
"tab-size",
|
||||||
|
"white-space",
|
||||||
|
"vertical-align",
|
||||||
|
"list-style",
|
||||||
|
"list-style-position",
|
||||||
|
"list-style-type",
|
||||||
|
"list-style-image",
|
||||||
|
"pointer-events",
|
||||||
|
"cursor",
|
||||||
|
"visibility",
|
||||||
|
"zoom",
|
||||||
|
"flex-direction",
|
||||||
|
"flex-order",
|
||||||
|
"flex-pack",
|
||||||
|
"flex-align",
|
||||||
|
"table-layout",
|
||||||
|
"empty-cells",
|
||||||
|
"caption-side",
|
||||||
|
"border-spacing",
|
||||||
|
"border-collapse",
|
||||||
|
"content",
|
||||||
|
"quotes",
|
||||||
|
"counter-reset",
|
||||||
|
"counter-increment",
|
||||||
|
"resize",
|
||||||
|
"-webkit-user-select",
|
||||||
|
"-moz-user-select",
|
||||||
|
"-ms-user-select",
|
||||||
|
"user-select",
|
||||||
|
"nav-index",
|
||||||
|
"nav-up",
|
||||||
|
"nav-right",
|
||||||
|
"nav-down",
|
||||||
|
"nav-left",
|
||||||
|
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
|
||||||
|
"background",
|
||||||
|
"background-color",
|
||||||
|
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
|
||||||
|
"filter:progid:DXImageTransform.Microsoft.gradient",
|
||||||
|
"background-image",
|
||||||
|
"background-repeat",
|
||||||
|
"background-attachment",
|
||||||
|
"background-position",
|
||||||
|
"background-position-x",
|
||||||
|
"background-position-y",
|
||||||
|
"-webkit-background-clip",
|
||||||
|
"-moz-background-clip",
|
||||||
|
"background-clip",
|
||||||
|
"background-origin",
|
||||||
|
"-webkit-background-size",
|
||||||
|
"-moz-background-size",
|
||||||
|
"-o-background-size",
|
||||||
|
"background-size",
|
||||||
|
"border",
|
||||||
|
"border-color",
|
||||||
|
"border-style",
|
||||||
|
"border-width",
|
||||||
|
"border-top",
|
||||||
|
"border-top-color",
|
||||||
|
"border-top-style",
|
||||||
|
"border-top-width",
|
||||||
|
"border-right",
|
||||||
|
"border-right-color",
|
||||||
|
"border-right-style",
|
||||||
|
"border-right-width",
|
||||||
|
"border-bottom",
|
||||||
|
"border-bottom-color",
|
||||||
|
"border-bottom-style",
|
||||||
|
"border-bottom-width",
|
||||||
|
"border-left",
|
||||||
|
"border-left-color",
|
||||||
|
"border-left-style",
|
||||||
|
"border-left-width",
|
||||||
|
"border-radius",
|
||||||
|
"border-top-left-radius",
|
||||||
|
"border-top-right-radius",
|
||||||
|
"border-bottom-right-radius",
|
||||||
|
"border-bottom-left-radius",
|
||||||
|
"-webkit-border-image",
|
||||||
|
"-moz-border-image",
|
||||||
|
"-o-border-image",
|
||||||
|
"border-image",
|
||||||
|
"-webkit-border-image-source",
|
||||||
|
"-moz-border-image-source",
|
||||||
|
"-o-border-image-source",
|
||||||
|
"border-image-source",
|
||||||
|
"-webkit-border-image-slice",
|
||||||
|
"-moz-border-image-slice",
|
||||||
|
"-o-border-image-slice",
|
||||||
|
"border-image-slice",
|
||||||
|
"-webkit-border-image-width",
|
||||||
|
"-moz-border-image-width",
|
||||||
|
"-o-border-image-width",
|
||||||
|
"border-image-width",
|
||||||
|
"-webkit-border-image-outset",
|
||||||
|
"-moz-border-image-outset",
|
||||||
|
"-o-border-image-outset",
|
||||||
|
"border-image-outset",
|
||||||
|
"-webkit-border-image-repeat",
|
||||||
|
"-moz-border-image-repeat",
|
||||||
|
"-o-border-image-repeat",
|
||||||
|
"border-image-repeat",
|
||||||
|
"outline",
|
||||||
|
"outline-width",
|
||||||
|
"outline-style",
|
||||||
|
"outline-color",
|
||||||
|
"outline-offset",
|
||||||
|
"-webkit-box-shadow",
|
||||||
|
"-moz-box-shadow",
|
||||||
|
"box-shadow",
|
||||||
|
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
|
||||||
|
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
|
||||||
|
"opacity",
|
||||||
|
"-ms-interpolation-mode",
|
||||||
|
"-webkit-transition",
|
||||||
|
"-moz-transition",
|
||||||
|
"-ms-transition",
|
||||||
|
"-o-transition",
|
||||||
|
"transition",
|
||||||
|
"-webkit-transition-delay",
|
||||||
|
"-moz-transition-delay",
|
||||||
|
"-ms-transition-delay",
|
||||||
|
"-o-transition-delay",
|
||||||
|
"transition-delay",
|
||||||
|
"-webkit-transition-timing-function",
|
||||||
|
"-moz-transition-timing-function",
|
||||||
|
"-ms-transition-timing-function",
|
||||||
|
"-o-transition-timing-function",
|
||||||
|
"transition-timing-function",
|
||||||
|
"-webkit-transition-duration",
|
||||||
|
"-moz-transition-duration",
|
||||||
|
"-ms-transition-duration",
|
||||||
|
"-o-transition-duration",
|
||||||
|
"transition-duration",
|
||||||
|
"-webkit-transition-property",
|
||||||
|
"-moz-transition-property",
|
||||||
|
"-ms-transition-property",
|
||||||
|
"-o-transition-property",
|
||||||
|
"transition-property",
|
||||||
|
"-webkit-transform",
|
||||||
|
"-moz-transform",
|
||||||
|
"-ms-transform",
|
||||||
|
"-o-transform",
|
||||||
|
"transform",
|
||||||
|
"-webkit-transform-origin",
|
||||||
|
"-moz-transform-origin",
|
||||||
|
"-ms-transform-origin",
|
||||||
|
"-o-transform-origin",
|
||||||
|
"transform-origin",
|
||||||
|
"-webkit-animation",
|
||||||
|
"-moz-animation",
|
||||||
|
"-ms-animation",
|
||||||
|
"-o-animation",
|
||||||
|
"animation",
|
||||||
|
"-webkit-animation-name",
|
||||||
|
"-moz-animation-name",
|
||||||
|
"-ms-animation-name",
|
||||||
|
"-o-animation-name",
|
||||||
|
"animation-name",
|
||||||
|
"-webkit-animation-duration",
|
||||||
|
"-moz-animation-duration",
|
||||||
|
"-ms-animation-duration",
|
||||||
|
"-o-animation-duration",
|
||||||
|
"animation-duration",
|
||||||
|
"-webkit-animation-play-state",
|
||||||
|
"-moz-animation-play-state",
|
||||||
|
"-ms-animation-play-state",
|
||||||
|
"-o-animation-play-state",
|
||||||
|
"animation-play-state",
|
||||||
|
"-webkit-animation-timing-function",
|
||||||
|
"-moz-animation-timing-function",
|
||||||
|
"-ms-animation-timing-function",
|
||||||
|
"-o-animation-timing-function",
|
||||||
|
"animation-timing-function",
|
||||||
|
"-webkit-animation-delay",
|
||||||
|
"-moz-animation-delay",
|
||||||
|
"-ms-animation-delay",
|
||||||
|
"-o-animation-delay",
|
||||||
|
"animation-delay",
|
||||||
|
"-webkit-animation-iteration-count",
|
||||||
|
"-moz-animation-iteration-count",
|
||||||
|
"-ms-animation-iteration-count",
|
||||||
|
"-o-animation-iteration-count",
|
||||||
|
"animation-iteration-count",
|
||||||
|
"-webkit-animation-direction",
|
||||||
|
"-moz-animation-direction",
|
||||||
|
"-ms-animation-direction",
|
||||||
|
"-o-animation-direction",
|
||||||
|
"animation-direction"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"adjoining-classes": false,
|
||||||
|
"box-sizing": false,
|
||||||
|
"box-model": false,
|
||||||
|
"compatible-vendor-prefixes": false,
|
||||||
|
"floats": false,
|
||||||
|
"font-sizes": false,
|
||||||
|
"gradients": false,
|
||||||
|
"important": false,
|
||||||
|
"known-properties": false,
|
||||||
|
"outline-none": false,
|
||||||
|
"qualified-headings": false,
|
||||||
|
"regex-selectors": false,
|
||||||
|
"text-indent": false,
|
||||||
|
"unique-headings": false,
|
||||||
|
"universal-selector": false,
|
||||||
|
"unqualified-attributes": false
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
# Enforce Unix newlines
|
||||||
|
*.css text eol=lf
|
||||||
|
*.html text eol=lf
|
||||||
|
*.js text eol=lf
|
||||||
|
*.json text eol=lf
|
||||||
|
*.less text eol=lf
|
||||||
|
*.md text eol=lf
|
||||||
|
*.yml text eol=lf
|
||||||
@@ -1,11 +1,24 @@
|
|||||||
language: node_js
|
language: node_js
|
||||||
node_js:
|
node_js:
|
||||||
- 0.10
|
- 0.10
|
||||||
before_script:
|
before_install:
|
||||||
- gem install jekyll
|
- time sudo pip install --use-mirrors -r ./test-infra/requirements.txt
|
||||||
- npm install -g grunt-cli
|
install:
|
||||||
|
- if [ "$TWBS_TEST" = validate-html ]; then time gem install jekyll; fi
|
||||||
|
- time npm install -g grunt-cli
|
||||||
|
- time ./test-infra/node_modules_cache.py download || time npm install
|
||||||
|
after_script:
|
||||||
|
- if [ "$TWBS_TEST" = core ]; then time ./test-infra/node_modules_cache.py upload; fi
|
||||||
env:
|
env:
|
||||||
global:
|
global:
|
||||||
- secure: Besg41eyU+2mfxrywQ4ydOShMdc34ImaO0S0ENP+aCOBuyNBIgP59wy5tBMmyai2/8eInYeVps4Td96mWInMMxzTe3Bar7eTLG5tWVKRSr/wc4NBPZ/ppoPAmCEsz9Y+VptRH9/FO8n7hsL9EFZ+xBKbG+C0SccGoyBDpA5j7/w=
|
- SAUCE_USERNAME: bootstrap
|
||||||
- secure: Ptiv7phCImFP3ALIz+sMQzrZg8k7C1gLZbFBhWxjnQr3g06wIfX3Ls5y9OHvxid+lOZZjISui3wzBVgpVHqwHUYf96+r0mo6/mJ+F4ffUmShZANVaIMD/JRTnXhUQJbvntGLvxn1EYWPdNM+2IHJrMipnjHxU9tkgAnlel4Zdew=
|
- secure: "pJkBwnuae9dKU5tEcCqccfS1QQw7/meEcfz63fM7ba7QJNjoA6BaXj08L5Z3Vb5vBmVPwBawxo5Hp0jC0r/Z/O0hGnAmz/Cz09L+cy7dSAZ9x4hvZePSja/UAusaB5ogMoO8l2b773MzgQeSmrLbExr9BWLeqEfjC2hFgdgHLaQ="
|
||||||
- TWBS_HAVE_OWN_BROWSERSTACK_KEY: ""
|
- secure: "gqjqISbxBJK6byFbsmr1AyP1qoWH+rap06A2gI7v72+Tn2PU2nYkIMUkCvhZw6K889jv+LhQ/ybcBxDOXHpNCExCnSgB4dcnmYp+9oeNZb37jSP0rQ+Ib4OTLjzc3/FawE/fUq5kukZTC7porzc/k0qJNLAZRx3YLALmK1GIdUY="
|
||||||
|
- secure: "Gghh/e3Gsbj1+4RR9Lh2aR/xJl35HWiHqlPIeSUqE9D7uDCVTAwNce/dGL3Ew7uJPfJ6Pgr70wD3zgu3stw0Zmzayax0hiDtGwcQCxVIER08wqGANK9C2Q7PYJkNTNtiTo6ehKWbdV4Z+/U+TEYyQfpQTDbAFYk/vVpsdjp0Lmc="
|
||||||
|
- secure: "RTbRdx4G/2OTLfrZtP1VbRljxEmd6A1F3GqXboeQTldsnAlwpsES65es5CE3ub/rmixLApOY9ot7OPmNixFgC2Y8xOsV7lNCC62QVpmqQEDyGFFQKb3yO6/dmwQxdsCqGfzf9Np6Wh5V22QFvr50ZLKLd7Uhd9oXMDIk/z1MJ3o="
|
||||||
|
matrix:
|
||||||
|
- TWBS_TEST=core
|
||||||
|
- TWBS_TEST=validate-html
|
||||||
|
- TWBS_TEST=sauce-js-unit
|
||||||
|
matrix:
|
||||||
|
fast_finish: true
|
||||||
|
|||||||
@@ -37,12 +37,15 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
|
|||||||
|
|
||||||
### CSS
|
### CSS
|
||||||
|
|
||||||
- Adhere to the [RECESS CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
|
- Adhere to the [CSS property order](http://markdotto.com/2011/11/29/css-property-order/)
|
||||||
- Multiple-line approach (one property and value per line)
|
- Multiple-line approach (one property and value per line)
|
||||||
- Always a space after a property's colon (e.g., `display: block;` and not `display:block;`)
|
- Always a space after a property's colon (e.g., `display: block;` and not `display:block;`)
|
||||||
- End all lines with a semi-colon
|
- End all lines with a semi-colon
|
||||||
- For multiple, comma-separated selectors, place each selector on its own line
|
- For multiple, comma-separated selectors, place each selector on its own line
|
||||||
- Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
|
- Attribute selectors, like `input[type="text"]` should always wrap the attribute's value in double quotes, for consistency and safety (see this [blog post on unquoted attribute values](http://mathiasbynens.be/notes/unquoted-attribute-values) that can lead to XSS attacks).
|
||||||
|
- Attribute selectors should only be used where absolutely necessary (e.g., form controls) and should be avoided on custom components for performance and explicitness.
|
||||||
|
- Series of classes for a component should include a base class (e.g., `.component`) and use the base class as a prefix for modifier and sub-components (e.g., `.component-lg`).
|
||||||
|
- Avoid inheritance and over nesting—use single, explicit classes whenever possible.
|
||||||
|
|
||||||
### JS
|
### JS
|
||||||
|
|
||||||
@@ -58,7 +61,7 @@ We only accept issues that are bug reports or feature requests. Bugs must be iso
|
|||||||
|
|
||||||
With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). We're in the process of collecting permissions from all Bootstrap contributors with code still part of the project to make this happen. For details, please see [#2054](https://github.com/twbs/bootstrap/issues/2054).
|
With v3.1, we're moving from the Apache 2 to the MIT license for the Bootstrap code (not the docs). We're in the process of collecting permissions from all Bootstrap contributors with code still part of the project to make this happen. For details, please see [#2054](https://github.com/twbs/bootstrap/issues/2054).
|
||||||
|
|
||||||
By contributing your code, you agree to dual-license your contribution under the [Apache 2](https://github.com/twbs/bootstrap/blob/master/LICENSE) and [MIT](https://github.com/twbs/bootstrap/blob/master/MIT) licenses.
|
By contributing your code, you agree to dual-license your contribution under the [Apache 2](https://github.com/twbs/bootstrap/blob/master/LICENSE) and [MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE-MIT) licenses.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,14 @@
|
|||||||
/* jshint node: true */
|
/* jshint node: true */
|
||||||
|
|
||||||
module.exports = function(grunt) {
|
module.exports = function (grunt) {
|
||||||
"use strict";
|
'use strict';
|
||||||
|
|
||||||
RegExp.quote = require('regexp-quote')
|
// Force use of Unix newlines
|
||||||
|
grunt.util.linefeed = '\n';
|
||||||
|
|
||||||
|
RegExp.quote = function (string) {
|
||||||
|
return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
|
||||||
|
}
|
||||||
var btoa = require('btoa')
|
var btoa = require('btoa')
|
||||||
// Project configuration.
|
// Project configuration.
|
||||||
grunt.initConfig({
|
grunt.initConfig({
|
||||||
@@ -34,9 +39,34 @@ module.exports = function(grunt) {
|
|||||||
},
|
},
|
||||||
test: {
|
test: {
|
||||||
src: ['js/tests/unit/*.js']
|
src: ['js/tests/unit/*.js']
|
||||||
|
},
|
||||||
|
assets: {
|
||||||
|
src: ['docs-assets/js/application.js', 'docs-assets/js/customizer.js']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
jscs: {
|
||||||
|
options: {
|
||||||
|
config: 'js/.jscs.json',
|
||||||
|
},
|
||||||
|
gruntfile: {
|
||||||
|
src: ['Gruntfile.js']
|
||||||
|
},
|
||||||
|
src: {
|
||||||
|
src: ['js/*.js']
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
src: ['js/tests/unit/*.js']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
csslint: {
|
||||||
|
options: {
|
||||||
|
csslintrc: '.csslintrc'
|
||||||
|
},
|
||||||
|
src: ['dist/css/bootstrap.css', 'dist/css/bootstrap-theme.css']
|
||||||
|
},
|
||||||
|
|
||||||
concat: {
|
concat: {
|
||||||
options: {
|
options: {
|
||||||
banner: '<%= banner %><%= jqueryCheck %>',
|
banner: '<%= banner %><%= jqueryCheck %>',
|
||||||
@@ -69,42 +99,74 @@ module.exports = function(grunt) {
|
|||||||
bootstrap: {
|
bootstrap: {
|
||||||
src: ['<%= concat.bootstrap.dest %>'],
|
src: ['<%= concat.bootstrap.dest %>'],
|
||||||
dest: 'dist/js/<%= pkg.name %>.min.js'
|
dest: 'dist/js/<%= pkg.name %>.min.js'
|
||||||
|
},
|
||||||
|
customize: {
|
||||||
|
src: [
|
||||||
|
'docs-assets/js/less.js',
|
||||||
|
'docs-assets/js/jszip.js',
|
||||||
|
'docs-assets/js/uglify.js',
|
||||||
|
'docs-assets/js/filesaver.js',
|
||||||
|
'docs-assets/js/customizer.js'
|
||||||
|
],
|
||||||
|
dest: 'docs-assets/js/customize.js'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
recess: {
|
less: {
|
||||||
options: {
|
compile: {
|
||||||
compile: true,
|
|
||||||
banner: '<%= banner %>'
|
|
||||||
},
|
|
||||||
bootstrap: {
|
|
||||||
src: ['less/bootstrap.less'],
|
|
||||||
dest: 'dist/css/<%= pkg.name %>.css'
|
|
||||||
},
|
|
||||||
min: {
|
|
||||||
options: {
|
options: {
|
||||||
compress: true
|
strictMath: true
|
||||||
},
|
},
|
||||||
src: ['less/bootstrap.less'],
|
files: {
|
||||||
dest: 'dist/css/<%= pkg.name %>.min.css'
|
'dist/css/<%= pkg.name %>.css': 'less/bootstrap.less',
|
||||||
|
'dist/css/<%= pkg.name %>-theme.css': 'less/theme.less'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
theme: {
|
minify: {
|
||||||
src: ['less/theme.less'],
|
|
||||||
dest: 'dist/css/<%= pkg.name %>-theme.css'
|
|
||||||
},
|
|
||||||
theme_min: {
|
|
||||||
options: {
|
options: {
|
||||||
compress: true
|
cleancss: true,
|
||||||
|
report: 'min'
|
||||||
},
|
},
|
||||||
src: ['less/theme.less'],
|
files: {
|
||||||
dest: 'dist/css/<%= pkg.name %>-theme.min.css'
|
'dist/css/<%= pkg.name %>.min.css': 'dist/css/<%= pkg.name %>.css',
|
||||||
|
'dist/css/<%= pkg.name %>-theme.min.css': 'dist/css/<%= pkg.name %>-theme.css'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
usebanner: {
|
||||||
|
dist: {
|
||||||
|
options: {
|
||||||
|
position: 'top',
|
||||||
|
banner: '<%= banner %>'
|
||||||
|
},
|
||||||
|
files: {
|
||||||
|
src: [
|
||||||
|
'dist/css/<%= pkg.name %>.css',
|
||||||
|
'dist/css/<%= pkg.name %>.min.css',
|
||||||
|
'dist/css/<%= pkg.name %>-theme.css',
|
||||||
|
'dist/css/<%= pkg.name %>-theme.min.css',
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
csscomb: {
|
||||||
|
sort: {
|
||||||
|
options: {
|
||||||
|
sortOrder: '.csscomb.json'
|
||||||
|
},
|
||||||
|
files: {
|
||||||
|
'dist/css/<%= pkg.name %>.css': ['dist/css/<%= pkg.name %>.css'],
|
||||||
|
'dist/css/<%= pkg.name %>-theme.css': ['dist/css/<%= pkg.name %>-theme.css'],
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
copy: {
|
copy: {
|
||||||
fonts: {
|
fonts: {
|
||||||
expand: true,
|
expand: true,
|
||||||
src: ["fonts/*"],
|
src: ['fonts/*'],
|
||||||
dest: 'dist/'
|
dest: 'dist/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -133,12 +195,12 @@ module.exports = function(grunt) {
|
|||||||
options: {
|
options: {
|
||||||
reset: true,
|
reset: true,
|
||||||
relaxerror: [
|
relaxerror: [
|
||||||
"Bad value X-UA-Compatible for attribute http-equiv on element meta.",
|
'Bad value X-UA-Compatible for attribute http-equiv on element meta.',
|
||||||
"Element img is missing required attribute src."
|
'Element img is missing required attribute src.'
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
files: {
|
files: {
|
||||||
src: ["_gh_pages/**/*.html"]
|
src: ['_gh_pages/**/*.html']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -151,9 +213,9 @@ module.exports = function(grunt) {
|
|||||||
files: '<%= jshint.test.src %>',
|
files: '<%= jshint.test.src %>',
|
||||||
tasks: ['jshint:test', 'qunit']
|
tasks: ['jshint:test', 'qunit']
|
||||||
},
|
},
|
||||||
recess: {
|
less: {
|
||||||
files: 'less/*.less',
|
files: 'less/*.less',
|
||||||
tasks: ['recess']
|
tasks: ['less']
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -166,36 +228,126 @@ module.exports = function(grunt) {
|
|||||||
replacement: grunt.option('newver'),
|
replacement: grunt.option('newver'),
|
||||||
recursive: true
|
recursive: true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'saucelabs-qunit': {
|
||||||
|
all: {
|
||||||
|
options: {
|
||||||
|
build: process.env.TRAVIS_JOB_ID,
|
||||||
|
concurrency: 3,
|
||||||
|
urls: ['http://127.0.0.1:3000/js/tests/index.html'],
|
||||||
|
browsers: [
|
||||||
|
// See https://saucelabs.com/docs/platforms/webdriver
|
||||||
|
{
|
||||||
|
browserName: 'safari',
|
||||||
|
version: '7',
|
||||||
|
platform: 'OS X 10.9'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
browserName: 'chrome',
|
||||||
|
version: '31',
|
||||||
|
platform: 'OS X 10.9'
|
||||||
|
},
|
||||||
|
/* FIXME: currently fails 1 tooltip test
|
||||||
|
{
|
||||||
|
browserName: 'firefox',
|
||||||
|
version: '25',
|
||||||
|
platform: 'OS X 10.6'
|
||||||
|
},*/
|
||||||
|
// Mac Opera not currently supported by Sauce Labs
|
||||||
|
/* FIXME: currently fails 1 tooltip test
|
||||||
|
{
|
||||||
|
browserName: 'internet explorer',
|
||||||
|
version: '11',
|
||||||
|
platform: 'Windows 8.1'
|
||||||
|
},*/
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
browserName: 'internet explorer',
|
||||||
|
version: '10',
|
||||||
|
platform: 'Windows 8'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
browserName: 'internet explorer',
|
||||||
|
version: '9',
|
||||||
|
platform: 'Windows 7'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
browserName: 'internet explorer',
|
||||||
|
version: '8',
|
||||||
|
platform: 'Windows 7'
|
||||||
|
},
|
||||||
|
{// unofficial
|
||||||
|
browserName: 'internet explorer',
|
||||||
|
version: '7',
|
||||||
|
platform: 'Windows XP'
|
||||||
|
},
|
||||||
|
*/
|
||||||
|
{
|
||||||
|
browserName: 'chrome',
|
||||||
|
version: '31',
|
||||||
|
platform: 'Windows 8.1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
browserName: 'firefox',
|
||||||
|
version: '25',
|
||||||
|
platform: 'Windows 8.1'
|
||||||
|
},
|
||||||
|
// Win Opera 15+ not currently supported by Sauce Labs
|
||||||
|
{
|
||||||
|
browserName: 'iphone',
|
||||||
|
version: '6.1',
|
||||||
|
platform: 'OS X 10.8'
|
||||||
|
},
|
||||||
|
// iOS Chrome not currently supported by Sauce Labs
|
||||||
|
// Linux (unofficial)
|
||||||
|
{
|
||||||
|
browserName: 'chrome',
|
||||||
|
version: '30',
|
||||||
|
platform: 'Linux'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
browserName: 'firefox',
|
||||||
|
version: '25',
|
||||||
|
platform: 'Linux'
|
||||||
|
}
|
||||||
|
// Android Chrome not currently supported by Sauce Labs
|
||||||
|
/* Android Browser (super-unofficial)
|
||||||
|
{
|
||||||
|
browserName: 'android',
|
||||||
|
version: '4.0',
|
||||||
|
platform: 'Linux'
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// These plugins provide necessary tasks.
|
// These plugins provide necessary tasks.
|
||||||
grunt.loadNpmTasks('browserstack-runner');
|
require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
|
||||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-concat');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-connect');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-copy');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
|
||||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
|
||||||
grunt.loadNpmTasks('grunt-html-validation');
|
|
||||||
grunt.loadNpmTasks('grunt-jekyll');
|
|
||||||
grunt.loadNpmTasks('grunt-recess');
|
|
||||||
grunt.loadNpmTasks('grunt-sed');
|
|
||||||
|
|
||||||
// Docs HTML validation task
|
// Docs HTML validation task
|
||||||
grunt.registerTask('validate-html', ['jekyll', 'validation']);
|
grunt.registerTask('validate-html', ['jekyll', 'validation']);
|
||||||
|
|
||||||
// Test task.
|
// Test task.
|
||||||
var testSubtasks = ['dist-css', 'jshint', 'qunit', 'validate-html'];
|
var testSubtasks = [];
|
||||||
// Only run BrowserStack tests under Travis
|
// Skip core tests if running a different subset of the test suite
|
||||||
if (process.env.TRAVIS) {
|
if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'core') {
|
||||||
// Only run BrowserStack tests if this is a mainline commit in twbs/bootstrap, or you have your own BrowserStack key
|
testSubtasks = testSubtasks.concat(['dist-css', 'jshint', 'jscs', 'qunit']);
|
||||||
if ((process.env.TRAVIS_REPO_SLUG === 'twbs/bootstrap' && process.env.TRAVIS_PULL_REQUEST === 'false') || process.env.TWBS_HAVE_OWN_BROWSERSTACK_KEY) {
|
}
|
||||||
testSubtasks.push('browserstack_runner');
|
// Skip HTML validation if running a different subset of the test suite
|
||||||
}
|
if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') {
|
||||||
|
testSubtasks.push('validate-html');
|
||||||
|
}
|
||||||
|
// Only run Sauce Labs tests if there's a Sauce access key
|
||||||
|
if (typeof process.env.SAUCE_ACCESS_KEY !== 'undefined'
|
||||||
|
// Skip Sauce if running a different subset of the test suite
|
||||||
|
&& (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'sauce-js-unit')) {
|
||||||
|
testSubtasks.push('connect');
|
||||||
|
testSubtasks.push('saucelabs-qunit');
|
||||||
}
|
}
|
||||||
grunt.registerTask('test', testSubtasks);
|
grunt.registerTask('test', testSubtasks);
|
||||||
|
|
||||||
@@ -203,7 +355,7 @@ module.exports = function(grunt) {
|
|||||||
grunt.registerTask('dist-js', ['concat', 'uglify']);
|
grunt.registerTask('dist-js', ['concat', 'uglify']);
|
||||||
|
|
||||||
// CSS distribution task.
|
// CSS distribution task.
|
||||||
grunt.registerTask('dist-css', ['recess']);
|
grunt.registerTask('dist-css', ['less', 'csscomb', 'usebanner']);
|
||||||
|
|
||||||
// Fonts distribution task.
|
// Fonts distribution task.
|
||||||
grunt.registerTask('dist-fonts', ['copy']);
|
grunt.registerTask('dist-fonts', ['copy']);
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
# [Bootstrap](http://getbootstrap.com) [](http://travis-ci.org/twbs/bootstrap) [](https://david-dm.org/twbs/bootstrap#info=devDependencies)
|
# [Bootstrap](http://getbootstrap.com) [](http://travis-ci.org/twbs/bootstrap) [](https://david-dm.org/twbs/bootstrap#info=devDependencies)
|
||||||
|
[](https://saucelabs.com/u/bootstrap)
|
||||||
|
|
||||||
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
|
Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development, created and maintained by [Mark Otto](http://twitter.com/mdo) and [Jacob Thornton](http://twitter.com/fat).
|
||||||
|
|
||||||
@@ -56,8 +57,9 @@ Bootstrap's documentation, included in this repo in the root directory, is built
|
|||||||
### Running documentation locally
|
### Running documentation locally
|
||||||
|
|
||||||
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
|
1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.x).
|
||||||
|
- **Windows users:** read [this unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems.
|
||||||
2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
|
2. From the root `/bootstrap` directory, run `jekyll serve` in the command line.
|
||||||
- **Windows users:** run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors.
|
- **Windows users:** For Ruby 2.0.0 run `chcp 65001` first to change the command prompt's character encoding ([code page](http://en.wikipedia.org/wiki/Windows_code_page)) to UTF-8 so Jekyll runs without errors. For Ruby 1.9.3 you can alternatively do `SET LANG=en_EN.UTF-8`. In addition, ensure you have Python installed and added in your `PATH` or the build will fail due to our Pygments dependency.
|
||||||
3. Open <http://localhost:9001> in your browser, and voilà.
|
3. Open <http://localhost:9001> in your browser, and voilà.
|
||||||
|
|
||||||
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
|
Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com/docs/home/).
|
||||||
@@ -122,7 +124,6 @@ Keep track of development and community news.
|
|||||||
|
|
||||||
* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
|
* Follow [@twbootstrap on Twitter](http://twitter.com/twbootstrap).
|
||||||
* Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
|
* Read and subscribe to [The Official Bootstrap Blog](http://blog.getbootstrap.com).
|
||||||
* Have a question that's not a feature request or bug report? [Ask on the mailing list.](http://groups.google.com/group/twitter-bootstrap)
|
|
||||||
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
|
* Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##twitter-bootstrap` channel.
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -2,19 +2,15 @@
|
|||||||
================================================== -->
|
================================================== -->
|
||||||
<!-- Placed at the end of the document so the pages load faster -->
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||||
<script src="{{ page.base_url }}dist/js/bootstrap.js"></script>
|
<script src="{{ page.base_url }}dist/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
<script src="{{ page.base_url }}docs-assets/js/holder.js"></script>
|
<script src="{{ page.base_url }}docs-assets/js/holder.js"></script>
|
||||||
|
|
||||||
<script src="{{ page.base_url }}docs-assets/js/application.js"></script>
|
<script src="{{ page.base_url }}docs-assets/js/application.js"></script>
|
||||||
|
|
||||||
{% if page.slug == "customize" %}
|
{% if page.slug == "customize" %}
|
||||||
<script src="{{ page.base_url }}docs-assets/js/less.js"></script>
|
|
||||||
<script src="{{ page.base_url }}docs-assets/js/jszip.js"></script>
|
|
||||||
<script src="{{ page.base_url }}docs-assets/js/uglify.js"></script>
|
|
||||||
<script src="{{ page.base_url }}docs-assets/js/filesaver.js"></script>
|
|
||||||
<script src="{{ page.base_url }}docs-assets/js/raw-files.js"></script>
|
<script src="{{ page.base_url }}docs-assets/js/raw-files.js"></script>
|
||||||
<script src="{{ page.base_url }}docs-assets/js/customizer.js"></script>
|
<script src="{{ page.base_url }}docs-assets/js/customize.js"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% comment %}
|
{% comment %}
|
||||||
|
|||||||
@@ -1,8 +1,9 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="description" content="">
|
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
|
||||||
<meta name="author" content="">
|
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
|
||||||
|
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||||
|
|
||||||
<title>
|
<title>
|
||||||
{% if page.title == "Bootstrap" %}
|
{% if page.title == "Bootstrap" %}
|
||||||
|
|||||||
@@ -121,6 +121,7 @@
|
|||||||
<li><a href="#list-group-basic">Basic example</a></li>
|
<li><a href="#list-group-basic">Basic example</a></li>
|
||||||
<li><a href="#list-group-badges">Badges</a></li>
|
<li><a href="#list-group-badges">Badges</a></li>
|
||||||
<li><a href="#list-group-linked">Linked items</a></li>
|
<li><a href="#list-group-linked">Linked items</a></li>
|
||||||
|
<li><a href="#list-group-contextual-classes">Contextual classes</a></li>
|
||||||
<li><a href="#list-group-custom-content">Custom content</a></li>
|
<li><a href="#list-group-custom-content">Custom content</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -16,6 +16,7 @@
|
|||||||
<li><a href="#grid-media-queries">Media queries</a></li>
|
<li><a href="#grid-media-queries">Media queries</a></li>
|
||||||
<li><a href="#grid-options">Grid options</a></li>
|
<li><a href="#grid-options">Grid options</a></li>
|
||||||
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
|
<li><a href="#grid-example-basic">Ex: Stacked-to-horizonal</a></li>
|
||||||
|
<li><a href="#grid-example-fluid">Ex: Fluid container</a></li>
|
||||||
<li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
|
<li><a href="#grid-example-mixed">Ex: Mobile and desktops</a></li>
|
||||||
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
|
<li><a href="#grid-example-mixed-complete">Ex: Mobile, tablet, desktops</a></li>
|
||||||
<li><a href="#grid-responsive-resets">Responsive column resets</a></li>
|
<li><a href="#grid-responsive-resets">Responsive column resets</a></li>
|
||||||
@@ -37,7 +38,14 @@
|
|||||||
<li><a href="#type-lists">Lists</a></li>
|
<li><a href="#type-lists">Lists</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="#code">Code</a></li>
|
<li>
|
||||||
|
<a href="#code">Code</a>
|
||||||
|
<ul class="nav">
|
||||||
|
<li><a href="#code-inline">Inline code</a></li>
|
||||||
|
<li><a href="#code-user-input">User input</a></li>
|
||||||
|
<li><a href="#code-block">Blocks of code</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#tables">Tables</a>
|
<a href="#tables">Tables</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
@@ -79,6 +87,8 @@
|
|||||||
<li>
|
<li>
|
||||||
<a href="#helper-classes">Helper classes</a>
|
<a href="#helper-classes">Helper classes</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
|
<li><a href="#helper-classes-colors">Contextual colors</a></li>
|
||||||
|
<li><a href="#helper-classes-backgrounds">Contextual backgrounds</a></li>
|
||||||
<li><a href="#helper-classes-close">Close icon</a></li>
|
<li><a href="#helper-classes-close">Close icon</a></li>
|
||||||
<li><a href="#helper-classes-carets">Carets</a></li>
|
<li><a href="#helper-classes-carets">Carets</a></li>
|
||||||
<li><a href="#helper-classes-floats">Quick floats</a></li>
|
<li><a href="#helper-classes-floats">Quick floats</a></li>
|
||||||
@@ -97,3 +107,11 @@
|
|||||||
<li><a href="#responsive-utilities-tests">Test cases</a></li>
|
<li><a href="#responsive-utilities-tests">Test cases</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#less">Using LESS</a>
|
||||||
|
<ul class="nav">
|
||||||
|
<li><a href="#less-variables">Variables</a></li>
|
||||||
|
<li><a href="#less-mixins-vendor">Vendor mixins</a></li>
|
||||||
|
<li><a href="#less-mixins-utility">Utility mixins</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|||||||
@@ -32,7 +32,19 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#browsers">Browser support</a>
|
<a href="#browsers">Browser and device support</a>
|
||||||
|
<ul class="nav">
|
||||||
|
<li><a href="#support-browsers">Supported browsers</a></li>
|
||||||
|
<li><a href="#support-ie8-ie9">Internet Explorer 8-9</a></li>
|
||||||
|
<li><a href="#support-ie8-respondjs">IE8 and Respond.js</a></li>
|
||||||
|
<li><a href="#support-ie8-box-sizing">IE8 and box-sizing</a></li>
|
||||||
|
<li><a href="#support-ie-compatibility-modes">IE Compatibility modes</a></li>
|
||||||
|
<li><a href="#support-ie10-width">IE10 and Windows (Phone) 8</a></li>
|
||||||
|
<li><a href="#support-safari-percentages">Safari percent rounding</a></li>
|
||||||
|
<li><a href="#support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</a></li>
|
||||||
|
<li><a href="#support-browser-zooming">Browser zooming</a></li>
|
||||||
|
<li><a href="#support-android-stock-browser">Android stock browser</a></li>
|
||||||
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#third-parties">Third party support</a>
|
<a href="#third-parties">Third party support</a>
|
||||||
|
|||||||
@@ -13,6 +13,7 @@
|
|||||||
<a href="#modals">Modal</a>
|
<a href="#modals">Modal</a>
|
||||||
<ul class="nav">
|
<ul class="nav">
|
||||||
<li><a href="#modals-examples">Examples</a></li>
|
<li><a href="#modals-examples">Examples</a></li>
|
||||||
|
<li><a href="#modals-sizes">Sizes</a></li>
|
||||||
<li><a href="#modals-usage">Usage</a></li>
|
<li><a href="#modals-usage">Usage</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -69,7 +69,6 @@ base_url: "../"
|
|||||||
<p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
|
<p class="lead">Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
|
<li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
|
||||||
<li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
|
|
||||||
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
|
<li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
|
||||||
<li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
|
<li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -88,6 +87,8 @@ base_url: "../"
|
|||||||
<li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
|
<li><a href="http://v3.bootcss.com/">Bootstrap 中文文档 (Chinese)</a></li>
|
||||||
<li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
|
<li><a href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap по-русски (Russian)</a></li>
|
||||||
<li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
|
<li><a href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a></li>
|
||||||
|
<li><a href="http://twbs.site-konstruktor.com.ua">Bootstrap ua Українською (Ukrainian)</a></li>
|
||||||
|
<li><a href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>Have another language to add, or perhaps a different or better translation? Let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a>.</p>
|
<p>Have another language to add, or perhaps a different or better translation? Let us know by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,8 +2,8 @@
|
|||||||
"name": "bootstrap",
|
"name": "bootstrap",
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"main": [
|
"main": [
|
||||||
"./dist/js/bootstrap.js",
|
"./dist/js/bootstrap.js",
|
||||||
"./dist/css/bootstrap.css",
|
"./dist/css/bootstrap.css",
|
||||||
"./dist/fonts/glyphicons-halflings-regular.eot",
|
"./dist/fonts/glyphicons-halflings-regular.eot",
|
||||||
"./dist/fonts/glyphicons-halflings-regular.svg",
|
"./dist/fonts/glyphicons-halflings-regular.svg",
|
||||||
"./dist/fonts/glyphicons-halflings-regular.ttf",
|
"./dist/fonts/glyphicons-halflings-regular.ttf",
|
||||||
@@ -18,10 +18,7 @@
|
|||||||
"js/tests",
|
"js/tests",
|
||||||
"CNAME",
|
"CNAME",
|
||||||
"CONTRIBUTING.md",
|
"CONTRIBUTING.md",
|
||||||
"Gruntfile.js",
|
|
||||||
"browserstack.json",
|
|
||||||
"composer.json",
|
"composer.json",
|
||||||
"package.json",
|
|
||||||
"*.html"
|
"*.html"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -1,37 +0,0 @@
|
|||||||
{
|
|
||||||
"username": "--secure--",
|
|
||||||
"key": "--secure--",
|
|
||||||
"test_path": "js/tests/index.html",
|
|
||||||
"browsers": [
|
|
||||||
{
|
|
||||||
"browser": "firefox",
|
|
||||||
"browser_version": "latest",
|
|
||||||
"os": "OS X",
|
|
||||||
"os_version": "Mountain Lion"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"browser": "safari",
|
|
||||||
"browser_version": "latest",
|
|
||||||
"os": "OS X",
|
|
||||||
"os_version": "Mountain Lion"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"browser": "chrome",
|
|
||||||
"browser_version": "latest",
|
|
||||||
"os": "OS X",
|
|
||||||
"os_version": "Mountain Lion"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"browser": "firefox",
|
|
||||||
"browser_version": "latest",
|
|
||||||
"os": "Windows",
|
|
||||||
"os_version": "7"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"browser": "chrome",
|
|
||||||
"browser_version": "latest",
|
|
||||||
"os": "Windows",
|
|
||||||
"os_version": "7"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -54,7 +54,8 @@ base_url: "../"
|
|||||||
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
|
<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize</a>, a project by <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallagher</a> and <a href="http://twitter.com/jon_neal" target="_blank">Jonathan Neal</a>.</p>
|
||||||
|
|
||||||
<h3 id="overview-container">Containers</h3>
|
<h3 id="overview-container">Containers</h3>
|
||||||
<p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>max-width</code> at various media query breakpoints to match our grid system.</p>
|
<p>Easily center a page's contents by wrapping its contents in a <code>.container</code>. Containers set <code>width</code> at various media query breakpoints to match our grid system.</p>
|
||||||
|
<p>Note that, due to <code>padding</code> and fixed widths, containers are not nestable by default.</p>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<div class="container">
|
<div class="container">
|
||||||
...
|
...
|
||||||
@@ -75,7 +76,7 @@ base_url: "../"
|
|||||||
<h3 id="grid-intro">Introduction</h3>
|
<h3 id="grid-intro">Introduction</h3>
|
||||||
<p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
|
<p>Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Rows must be placed within a <code>.container</code> for proper alignment and padding.</li>
|
<li>Rows must be placed within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width) for proper alignment and padding.</li>
|
||||||
<li>Use rows to create horizontal groups of columns.</li>
|
<li>Use rows to create horizontal groups of columns.</li>
|
||||||
<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
|
<li>Content should be placed within columns, and only columns may be immediate children of rows.</li>
|
||||||
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li>
|
<li>Predefined grid classes like <code>.row</code> and <code>.col-xs-4</code> are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.</li>
|
||||||
@@ -144,7 +145,7 @@ base_url: "../"
|
|||||||
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
|
<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Max container width</th>
|
<th>Container width</th>
|
||||||
<td>None (auto)</td>
|
<td>None (auto)</td>
|
||||||
<td>750px</td>
|
<td>750px</td>
|
||||||
<td>970px</td>
|
<td>970px</td>
|
||||||
@@ -178,13 +179,11 @@ base_url: "../"
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Offsets</th>
|
<th>Offsets</th>
|
||||||
<td colspan="1" class="text-muted">N/A</td>
|
<td colspan="4">Yes</td>
|
||||||
<td colspan="3">Yes</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Column ordering</th>
|
<th>Column ordering</th>
|
||||||
<td class="text-muted">N/A</td>
|
<td colspan="4">Yes</td>
|
||||||
<td colspan="3">Yes</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@@ -250,6 +249,16 @@ base_url: "../"
|
|||||||
<div class="col-md-6">.col-md-6</div>
|
<div class="col-md-6">.col-md-6</div>
|
||||||
<div class="col-md-6">.col-md-6</div>
|
<div class="col-md-6">.col-md-6</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="grid-example-fluid">Example: Fluid container</h3>
|
||||||
|
<p>Turn any fixed-width grid layout into a full-width layout by changing your outermost <code>.container</code> to <code>.container-fluid</code>.</p>
|
||||||
|
{% highlight html %}
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
|
<h3 id="grid-example-mixed">Example: Mobile and desktop</h3>
|
||||||
@@ -394,7 +403,7 @@ base_url: "../"
|
|||||||
|
|
||||||
|
|
||||||
<h3 id="grid-nesting">Nesting columns</h3>
|
<h3 id="grid-nesting">Nesting columns</h3>
|
||||||
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
|
<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12 or less.</p>
|
||||||
<div class="row show-grid">
|
<div class="row show-grid">
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
Level 1: .col-md-9
|
Level 1: .col-md-9
|
||||||
@@ -626,27 +635,27 @@ base_url: "../"
|
|||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><h1>h1. Bootstrap heading</h1></td>
|
<td><h1>h1. Bootstrap heading</h1></td>
|
||||||
<td class="info">Semibold 36px</td>
|
<td class="type-info">Semibold 36px</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><h2>h2. Bootstrap heading</h2></td>
|
<td><h2>h2. Bootstrap heading</h2></td>
|
||||||
<td class="info">Semibold 30px</td>
|
<td class="type-info">Semibold 30px</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><h3>h3. Bootstrap heading</h3></td>
|
<td><h3>h3. Bootstrap heading</h3></td>
|
||||||
<td class="info">Semibold 24px</td>
|
<td class="type-info">Semibold 24px</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><h4>h4. Bootstrap heading</h4></td>
|
<td><h4>h4. Bootstrap heading</h4></td>
|
||||||
<td class="info">Semibold 18px</td>
|
<td class="type-info">Semibold 18px</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><h5>h5. Bootstrap heading</h5></td>
|
<td><h5>h5. Bootstrap heading</h5></td>
|
||||||
<td class="info">Semibold 14px</td>
|
<td class="type-info">Semibold 14px</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><h6>h6. Bootstrap heading</h6></td>
|
<td><h6>h6. Bootstrap heading</h6></td>
|
||||||
<td class="info">Semibold 12px</td>
|
<td class="type-info">Semibold 12px</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@@ -773,29 +782,6 @@ base_url: "../"
|
|||||||
<p class="text-right">Right aligned text.</p>
|
<p class="text-right">Right aligned text.</p>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h3>Emphasis classes</h3>
|
|
||||||
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
|
|
||||||
<div class="bs-example">
|
|
||||||
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
|
||||||
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
||||||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
||||||
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
||||||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
|
||||||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
||||||
</div>
|
|
||||||
{% highlight html %}
|
|
||||||
<p class="text-muted">...</p>
|
|
||||||
<p class="text-primary">...</p>
|
|
||||||
<p class="text-success">...</p>
|
|
||||||
<p class="text-info">...</p>
|
|
||||||
<p class="text-warning">...</p>
|
|
||||||
<p class="text-danger">...</p>
|
|
||||||
{% endhighlight %}
|
|
||||||
<div class="bs-callout bs-callout-info">
|
|
||||||
<h4>Dealing with specificity</h4>
|
|
||||||
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Abbreviations -->
|
<!-- Abbreviations -->
|
||||||
<h2 id="type-abbreviations">Abbreviations</h2>
|
<h2 id="type-abbreviations">Abbreviations</h2>
|
||||||
@@ -1048,7 +1034,7 @@ base_url: "../"
|
|||||||
<h1 id="code">Code</h1>
|
<h1 id="code">Code</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2>Inline</h2>
|
<h2 id="code-inline">Inline</h2>
|
||||||
<p>Wrap inline snippets of code with <code><code></code>.</p>
|
<p>Wrap inline snippets of code with <code><code></code>.</p>
|
||||||
<div class="bs-example">
|
<div class="bs-example">
|
||||||
For example, <code><section></code> should be wrapped as inline.
|
For example, <code><section></code> should be wrapped as inline.
|
||||||
@@ -1057,7 +1043,16 @@ base_url: "../"
|
|||||||
For example, <code><section></code> should be wrapped as inline.
|
For example, <code><section></code> should be wrapped as inline.
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h2>Basic block</h2>
|
<h2 id="code-user-input">User input</h2>
|
||||||
|
<p>Use the <code><kbd></code> to indicate input that is typically entered via keyboard.</p>
|
||||||
|
<div class="bs-example">
|
||||||
|
To switch directories, type <kbd>cd</kbd> followed the name of the directory.
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
To switch directories, type <kbd>cd</kbd> followed the name of the directory.
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h2 id="code-block">Basic block</h2>
|
||||||
<p>Use <code><pre></code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
|
<p>Use <code><pre></code> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.</p>
|
||||||
<div class="bs-example">
|
<div class="bs-example">
|
||||||
<pre><p>Sample text here...</p></pre>
|
<pre><p>Sample text here...</p></pre>
|
||||||
@@ -1328,6 +1323,12 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
</td>
|
</td>
|
||||||
<td>Indicates a dangerous or potentially negative action</td>
|
<td>Indicates a dangerous or potentially negative action</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>.info</code>
|
||||||
|
</td>
|
||||||
|
<td>Indicates a neutral informative change or action</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
@@ -1384,6 +1385,18 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
<td>Column content</td>
|
<td>Column content</td>
|
||||||
<td>Column content</td>
|
<td>Column content</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>8</td>
|
||||||
|
<td>Column content</td>
|
||||||
|
<td>Column content</td>
|
||||||
|
<td>Column content</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="info">
|
||||||
|
<td>9</td>
|
||||||
|
<td>Column content</td>
|
||||||
|
<td>Column content</td>
|
||||||
|
<td>Column content</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div><!-- /example -->
|
</div><!-- /example -->
|
||||||
@@ -1393,6 +1406,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
<tr class="success">...</tr>
|
<tr class="success">...</tr>
|
||||||
<tr class="warning">...</tr>
|
<tr class="warning">...</tr>
|
||||||
<tr class="danger">...</tr>
|
<tr class="danger">...</tr>
|
||||||
|
<tr class="info">...</tr>
|
||||||
|
|
||||||
<!-- On cells (`td` or `th`) -->
|
<!-- On cells (`td` or `th`) -->
|
||||||
<tr>
|
<tr>
|
||||||
@@ -1400,6 +1414,7 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
<td class="success">...</td>
|
<td class="success">...</td>
|
||||||
<td class="warning">...</td>
|
<td class="warning">...</td>
|
||||||
<td class="danger">...</td>
|
<td class="danger">...</td>
|
||||||
|
<td class="info">...</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
@@ -2285,6 +2300,47 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
<h1 id="helper-classes">Helper classes</h1>
|
<h1 id="helper-classes">Helper classes</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h3 id="helper-classes-colors">Contextual colors</h3>
|
||||||
|
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
|
||||||
|
<div class="bs-example">
|
||||||
|
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||||||
|
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||||
|
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||||
|
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||||
|
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||||
|
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="text-muted">...</p>
|
||||||
|
<p class="text-primary">...</p>
|
||||||
|
<p class="text-success">...</p>
|
||||||
|
<p class="text-info">...</p>
|
||||||
|
<p class="text-warning">...</p>
|
||||||
|
<p class="text-danger">...</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
<div class="bs-callout bs-callout-info">
|
||||||
|
<h4>Dealing with specificity</h4>
|
||||||
|
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code><span></code> with the class.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
|
||||||
|
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
|
||||||
|
<div class="bs-example bs-example-bg-classes">
|
||||||
|
<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||||
|
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||||
|
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||||||
|
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||||||
|
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<p class="bg-muted">...</p>
|
||||||
|
<p class="bg-primary">...</p>
|
||||||
|
<p class="bg-success">...</p>
|
||||||
|
<p class="bg-info">...</p>
|
||||||
|
<p class="bg-warning">...</p>
|
||||||
|
<p class="bg-danger">...</p>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
<h3 id="helper-classes-close">Close icon</h3>
|
<h3 id="helper-classes-close">Close icon</h3>
|
||||||
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
|
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
|
||||||
@@ -2672,3 +2728,496 @@ For example, <code><section></code> should be wrapped as inline.
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Using Less
|
||||||
|
================================================== -->
|
||||||
|
<div class="bs-docs-section" id="less">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Using LESS</h1>
|
||||||
|
</div>
|
||||||
|
<p class="lead">Bootstrap's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. Thosing looking to use the source LESS files instead of our compiled CSS files can make use of the numerous variables and mixins we use throughout the framework.</p>
|
||||||
|
|
||||||
|
<p>Grid variables and mixins are covered <a href="{{ page.base_url }}css/#grid-less">within the Grid system section</a>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="less-variables">Variables</h2>
|
||||||
|
<p>Variables are used throughout the entire project as a way to centralize and share commonly used values like colors, spacing, or font stacks. For a complete breakdown, please see <a href="{{ page.base_url }}customize/#less-variables-section">the Customizer</a>.</p>
|
||||||
|
|
||||||
|
<h3 id="less-variables-colors">Colors</h3>
|
||||||
|
<p>Easily make use of two color schemes: grayscale and semantic. Grayscale colors provide quick access to commonly used shades of black while semantic include various colors assigned to meaningful contextual values.</p>
|
||||||
|
<div class="bs-example">
|
||||||
|
<div class="color-swatches">
|
||||||
|
<div class="color-swatch gray-darker"></div>
|
||||||
|
<div class="color-swatch gray-dark"></div>
|
||||||
|
<div class="color-swatch gray"></div>
|
||||||
|
<div class="color-swatch gray-light"></div>
|
||||||
|
<div class="color-swatch gray-lighter"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight css %}
|
||||||
|
@gray-darker: lighten(#000, 13.5%); // #222
|
||||||
|
@gray-dark: lighten(#000, 20%); // #333
|
||||||
|
@gray: lighten(#000, 33.5%); // #555
|
||||||
|
@gray-light: lighten(#000, 60%); // #999
|
||||||
|
@gray-lighter: lighten(#000, 93.5%); // #eee
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="bs-example">
|
||||||
|
<div class="color-swatches">
|
||||||
|
<div class="color-swatch brand-primary"></div>
|
||||||
|
<div class="color-swatch brand-success"></div>
|
||||||
|
<div class="color-swatch brand-warning"></div>
|
||||||
|
<div class="color-swatch brand-danger"></div>
|
||||||
|
<div class="color-swatch brand-info"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% highlight css %}
|
||||||
|
@brand-primary: #428bca;
|
||||||
|
@brand-success: #5cb85c;
|
||||||
|
@brand-warning: #f0ad4e;
|
||||||
|
@brand-danger: #d9534f;
|
||||||
|
@brand-info: #5bc0de;
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
// Use as-is
|
||||||
|
.masthead {
|
||||||
|
background-color: @brand-primary;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reassigned variables in LESS
|
||||||
|
@alert-message-background: @brand-info;
|
||||||
|
.alert {
|
||||||
|
background-color: @alert-message-background;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-variables-scaffolding">Scaffolding</h3>
|
||||||
|
<p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
// Scaffolding
|
||||||
|
@body-bg: #fff;
|
||||||
|
@text-color: @black-50;
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-variables-links">Links</h3>
|
||||||
|
<p>Easily style your links with the right color with only one value.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
// Variables
|
||||||
|
@link-color: @brand-primary;
|
||||||
|
@link-color-hover: darken(@link-color, 15%);
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
a {
|
||||||
|
color: @link-color;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @link-color-hover;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>Note that the <code>@link-color-hover</code> uses a function, another awesome tool from LESS, to automagically create the right hover color. You can use <code>darken</code>, <code>lighten</code>, <code>saturate</code>, and <code>desaturate</code>.</p>
|
||||||
|
|
||||||
|
<h3 id="less-variables-typography">Typography</h3>
|
||||||
|
<p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins as well.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
@font-family-serif: Georgia, "Times New Roman", Times, serif;
|
||||||
|
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||||
|
@font-family-base: @font-family-sans-serif;
|
||||||
|
|
||||||
|
@font-size-base: 14px;
|
||||||
|
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||||
|
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||||
|
|
||||||
|
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||||
|
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||||
|
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||||
|
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||||
|
@font-size-h5: @font-size-base;
|
||||||
|
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||||
|
|
||||||
|
@line-height-base: 1.428571429; // 20/14
|
||||||
|
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
||||||
|
|
||||||
|
@headings-font-family: inherit;
|
||||||
|
@headings-font-weight: 500;
|
||||||
|
@headings-line-height: 1.1;
|
||||||
|
@headings-color: inherit;
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-variables-icons">Icons</h3>
|
||||||
|
<p>Two quick variables for customizing the location and filename of your icons.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
@icon-font-path: "../fonts/";
|
||||||
|
@icon-font-name: "glyphicons-halflings-regular";
|
||||||
|
{% endhighlight %}}
|
||||||
|
|
||||||
|
<h3 id="less-variables-components">Components</h3>
|
||||||
|
<p>Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
@padding-base-vertical: 6px;
|
||||||
|
@padding-base-horizontal: 12px;
|
||||||
|
|
||||||
|
@padding-large-vertical: 10px;
|
||||||
|
@padding-large-horizontal: 16px;
|
||||||
|
|
||||||
|
@padding-small-vertical: 5px;
|
||||||
|
@padding-small-horizontal: 10px;
|
||||||
|
|
||||||
|
@padding-xs-vertical: 1px;
|
||||||
|
@padding-xs-horizontal: 5px;
|
||||||
|
|
||||||
|
@line-height-large: 1.33;
|
||||||
|
@line-height-small: 1.5;
|
||||||
|
|
||||||
|
@border-radius-base: 4px;
|
||||||
|
@border-radius-large: 6px;
|
||||||
|
@border-radius-small: 3px;
|
||||||
|
|
||||||
|
@component-active-color: #fff;
|
||||||
|
@component-active-bg: @brand-primary;
|
||||||
|
|
||||||
|
@caret-width-base: 4px;
|
||||||
|
@caret-width-large: 5px;
|
||||||
|
{% endhighlight %}}
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="less-mixins-vendor">Vendor mixins</h2>
|
||||||
|
<p>Vendor mixins are mixins to help support multiple browsers by including all relevant vendor prefixs in your compiled CSS.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<h3 id="less-mixins-box-sizing">Box-sizing</h3>
|
||||||
|
<p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.box-sizing(@box-model) {
|
||||||
|
-webkit-box-sizing: @box-model; // Safari <= 5
|
||||||
|
-moz-box-sizing: @box-model; // Firefox <= 19
|
||||||
|
box-sizing: @box-model;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-rounded-corners">Rounded corners</h3>
|
||||||
|
<p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Preboot does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.border-top-radius(@radius) {
|
||||||
|
border-top-right-radius: @radius;
|
||||||
|
border-top-left-radius: @radius;
|
||||||
|
}
|
||||||
|
.border-right-radius(@radius) {
|
||||||
|
border-bottom-right-radius: @radius;
|
||||||
|
border-top-right-radius: @radius;
|
||||||
|
}
|
||||||
|
.border-bottom-radius(@radius) {
|
||||||
|
border-bottom-right-radius: @radius;
|
||||||
|
border-bottom-left-radius: @radius;
|
||||||
|
}
|
||||||
|
.border-left-radius(@radius) {
|
||||||
|
border-bottom-left-radius: @radius;
|
||||||
|
border-top-left-radius: @radius;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-box-shadow">Box (Drop) shadows</h3>
|
||||||
|
<p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on it's own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use of the mixin to pick up the required <code>-webkit</code> prefix.</p>
|
||||||
|
<p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||||
|
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
|
||||||
|
box-shadow: @shadow;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-transitions">Transitions</h3>
|
||||||
|
<p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.transition(@transition) {
|
||||||
|
-webkit-transition: @transition;
|
||||||
|
transition: @transition;
|
||||||
|
}
|
||||||
|
.transition-property(@transition-property) {
|
||||||
|
-webkit-transition-property: @transition-property;
|
||||||
|
transition-property: @transition-property;
|
||||||
|
}
|
||||||
|
.transition-delay(@transition-delay) {
|
||||||
|
-webkit-transition-delay: @transition-delay;
|
||||||
|
transition-delay: @transition-delay;
|
||||||
|
}
|
||||||
|
.transition-duration(@transition-duration) {
|
||||||
|
-webkit-transition-duration: @transition-duration;
|
||||||
|
transition-duration: @transition-duration;
|
||||||
|
}
|
||||||
|
.transition-transform(@transition) {
|
||||||
|
-webkit-transition: -webkit-transform @transition;
|
||||||
|
-moz-transition: -moz-transform @transition;
|
||||||
|
-o-transition: -o-transform @transition;
|
||||||
|
transition: transform @transition;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-transformations">Transformations</h3>
|
||||||
|
<p>Rorate, scale, translate (move), or skew any object.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.rotate(@degrees) {
|
||||||
|
-webkit-transform: rotate(@degrees);
|
||||||
|
-ms-transform: rotate(@degrees); // IE9 only
|
||||||
|
transform: rotate(@degrees);
|
||||||
|
}
|
||||||
|
.scale(@ratio; @ratio-y...) {
|
||||||
|
-webkit-transform: scale(@ratio, @ratio-y);
|
||||||
|
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
|
||||||
|
transform: scale(@ratio, @ratio-y);
|
||||||
|
}
|
||||||
|
.translate(@x; @y) {
|
||||||
|
-webkit-transform: translate(@x, @y);
|
||||||
|
-ms-transform: translate(@x, @y); // IE9 only
|
||||||
|
transform: translate(@x, @y);
|
||||||
|
}
|
||||||
|
.skew(@x; @y) {
|
||||||
|
-webkit-transform: skew(@x, @y);
|
||||||
|
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
|
||||||
|
transform: skew(@x, @y);
|
||||||
|
}
|
||||||
|
.translate3d(@x; @y; @z) {
|
||||||
|
-webkit-transform: translate3d(@x, @y, @z);
|
||||||
|
transform: translate3d(@x, @y, @z);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rotateX(@degrees) {
|
||||||
|
-webkit-transform: rotateX(@degrees);
|
||||||
|
-ms-transform: rotateX(@degrees); // IE9 only
|
||||||
|
transform: rotateX(@degrees);
|
||||||
|
}
|
||||||
|
.rotateY(@degrees) {
|
||||||
|
-webkit-transform: rotateY(@degrees);
|
||||||
|
-ms-transform: rotateY(@degrees); // IE9 only
|
||||||
|
transform: rotateY(@degrees);
|
||||||
|
}
|
||||||
|
.perspective(@perspective) {
|
||||||
|
-webkit-perspective: @perspective;
|
||||||
|
-moz-perspective: @perspective;
|
||||||
|
perspective: @perspective;
|
||||||
|
}
|
||||||
|
.perspective-origin(@perspective) {
|
||||||
|
-webkit-perspective-origin: @perspective;
|
||||||
|
-moz-perspective-origin: @perspective;
|
||||||
|
perspective-origin: @perspective;
|
||||||
|
}
|
||||||
|
.transform-origin(@origin) {
|
||||||
|
-webkit-transform-origin: @origin;
|
||||||
|
-moz-transform-origin: @origin;
|
||||||
|
-ms-transform-origin: @origin; // IE9 only
|
||||||
|
transform-origin: @origin;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-animations">Animations</h3>
|
||||||
|
<p>A single mixin for using all CSS3's animation properties in one declarations and other mixins for individual properties.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.animation(@animation) {
|
||||||
|
-webkit-animation: @animation;
|
||||||
|
animation: @animation;
|
||||||
|
}
|
||||||
|
.animation-name(@name) {
|
||||||
|
-webkit-animation-name: @name;
|
||||||
|
animation-name: @name;
|
||||||
|
}
|
||||||
|
.animation-duration(@duration) {
|
||||||
|
-webkit-animation-duration: @duration;
|
||||||
|
animation-duration: @duration;
|
||||||
|
}
|
||||||
|
.animation-timing-function(@timing-function) {
|
||||||
|
-webkit-animation-timing-function: @timing-function;
|
||||||
|
animation-timing-function: @timing-function;
|
||||||
|
}
|
||||||
|
.animation-delay(@delay) {
|
||||||
|
-webkit-animation-delay: @delay;
|
||||||
|
animation-delay: @delay;
|
||||||
|
}
|
||||||
|
.animation-iteration-count(@iteration-count) {
|
||||||
|
-webkit-animation-iteration-count: @iteration-count;
|
||||||
|
animation-iteration-count: @iteration-count;
|
||||||
|
}
|
||||||
|
.animation-direction(@direction) {
|
||||||
|
-webkit-animation-direction: @direction;
|
||||||
|
animation-direction: @direction;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-opacity">Opacity</h3>
|
||||||
|
<p>Set the opacity for all browsers and provide a <code>filter</code> fallback for IE8.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.opacity(@opacity) {
|
||||||
|
opacity: @opacity;
|
||||||
|
// IE8 filter
|
||||||
|
@opacity-ie: (@opacity * 100);
|
||||||
|
filter: ~"alpha(opacity=@{opacity-ie})";
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-placeholder">Placeholder text</h3>
|
||||||
|
<p>Provide context for form controls within each field.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.placeholder(@color: @input-color-placeholder) {
|
||||||
|
&:-moz-placeholder { color: @color; } // Firefox 4-18
|
||||||
|
&::-moz-placeholder { color: @color; } // Firefox 19+
|
||||||
|
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
|
||||||
|
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-columns">Columns</h3>
|
||||||
|
<p>Generate columns via CSS within a single element.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.content-columns(@width; @count; @gap) {
|
||||||
|
-webkit-column-width: @width;
|
||||||
|
-moz-column-width: @width;
|
||||||
|
column-width: @width;
|
||||||
|
-webkit-column-count: @count;
|
||||||
|
-moz-column-count: @count;
|
||||||
|
column-count: @count;
|
||||||
|
-webkit-column-gap: @gap;
|
||||||
|
-moz-column-gap: @gap;
|
||||||
|
column-gap: @gap;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-gradients">Gradients</h3>
|
||||||
|
<p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
#gradient > .vertical(#333; #000);
|
||||||
|
#gradient > .horizontal(#333; #000);
|
||||||
|
#gradient > .radial(#333; #000);
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>You can also specify the angle of a standard two-color, linear gradient:</p>
|
||||||
|
{% highlight css %}
|
||||||
|
#gradient > .directional(#333; #000; 45deg);
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
#gradient > .striped(#333; #000; 45deg);
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p>
|
||||||
|
{% highlight css %}
|
||||||
|
#gradient > .vertical-three-colors(#777; #333; .25; #000);
|
||||||
|
#gradient > .horizontal-three-colors(#777; #333; .25; #000);
|
||||||
|
{% endhighlight %}
|
||||||
|
<p><strong>Heads up!</strong> Should you ever need to remove a gradient, be sure to remove any IE-specific <code>filter</code> you may have added. You can do that by using <code>.reset-filter()</code> mixin alignside <code>background-image: none;</code>.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="less-mixins-utility">Utility mixins</h2>
|
||||||
|
<p>Utility mixins are mixins that combine otherwise unrelated CSS properties to achieve a specific goal or task.</p>
|
||||||
|
|
||||||
|
<h3 id="less-mixins-clearfix">Clearfix</h3>
|
||||||
|
<p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clearfix</a> from <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallager</a>.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
// Mixin
|
||||||
|
.clearfix() {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
content: " ";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
.container {
|
||||||
|
.clearfix();
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-centering">Horizontal centering</h3>
|
||||||
|
<p>Quickly center any element within its parent. <strong>Requires <code>width</code> or <code>max-width</code> to be set.</strong></p>
|
||||||
|
{% highlight css %}
|
||||||
|
// Mixin
|
||||||
|
.center-block() {
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
.container {
|
||||||
|
width: 940px;
|
||||||
|
.center-block();
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-sizing">Sizing helpers</h3>
|
||||||
|
<p>Specify the dimensions of an object more easily.</p>
|
||||||
|
{% highlight css %}
|
||||||
|
// Mixins
|
||||||
|
.size(@width; @height) {
|
||||||
|
width: @width;
|
||||||
|
height: @height;
|
||||||
|
}
|
||||||
|
.square(@size) {
|
||||||
|
.size(@size; @size);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
.image { .size(400px; 300px); }
|
||||||
|
.avatar { .square(48px); }
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-resizable">Resizable textareas</h3>
|
||||||
|
<p>Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (<code>both</code>).</p>
|
||||||
|
{% highlight css %}
|
||||||
|
.resizable(@direction: both) {
|
||||||
|
// Options: horizontal, vertical, both
|
||||||
|
resize: @direction;
|
||||||
|
// Safari fix
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-truncating">Truncating text</h3>
|
||||||
|
<p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
|
||||||
|
{% highlight css %}
|
||||||
|
// Mixin
|
||||||
|
.text-truncate() {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
.branch-name {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 200px;
|
||||||
|
.text-truncate();
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<h3 id="less-mixins-retina-images">Retina images</h3>
|
||||||
|
<p>Specify two image paths and the @1x image dimensions, and Preboot will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
|
||||||
|
{% highlight css %}
|
||||||
|
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
|
||||||
|
background-image: url("@{file-1x}");
|
||||||
|
|
||||||
|
@media
|
||||||
|
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||||
|
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||||
|
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||||
|
only screen and ( min-device-pixel-ratio: 2),
|
||||||
|
only screen and ( min-resolution: 192dpi),
|
||||||
|
only screen and ( min-resolution: 2dppx) {
|
||||||
|
background-image: url("@{file-2x}");
|
||||||
|
background-size: @width-1x @height-1x;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Usage
|
||||||
|
.jumbotron {
|
||||||
|
.retina-image("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
|
||||||
|
}
|
||||||
|
{% endhighlight %}
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ base_url: "../"
|
|||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label>
|
<label>
|
||||||
<input type="checkbox" checked value="buttons.less">
|
<input type="checkbox" checked value="buttons.less" data-dependents="button-groups.less">
|
||||||
Buttons
|
Buttons
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@@ -436,7 +436,7 @@ base_url: "../"
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-6">
|
<div class="col-lg-6">
|
||||||
<label>@headings-font-family</label>
|
<label>@headings-font-family</label>
|
||||||
<input type="text" class="form-control" placeholder="@font-family-base" data-var="@headings-font-family">
|
<input type="text" class="form-control" placeholder="inherit" data-var="@headings-font-family">
|
||||||
<label>@headings-font-weight</label>
|
<label>@headings-font-weight</label>
|
||||||
<input type="text" class="form-control" placeholder="500" data-var="@headings-font-weight">
|
<input type="text" class="form-control" placeholder="500" data-var="@headings-font-weight">
|
||||||
</div>
|
</div>
|
||||||
@@ -1056,7 +1056,7 @@ base_url: "../"
|
|||||||
<p class="help-block">Hovered dropdown menu entry text color</p>
|
<p class="help-block">Hovered dropdown menu entry text color</p>
|
||||||
<label>@dropdown-link-hover-bg</label>
|
<label>@dropdown-link-hover-bg</label>
|
||||||
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@dropdown-link-hover-bg">
|
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@dropdown-link-hover-bg">
|
||||||
<p class="help-block">Hovered dropdown menu entry text color</p>
|
<p class="help-block">Hovered dropdown menu entry background color</p>
|
||||||
|
|
||||||
<label>@dropdown-link-active-color</label>
|
<label>@dropdown-link-active-color</label>
|
||||||
<input type="text" class="form-control" placeholder="@component-active-color" data-var="@dropdown-link-active-color">
|
<input type="text" class="form-control" placeholder="@component-active-color" data-var="@dropdown-link-active-color">
|
||||||
@@ -1147,6 +1147,8 @@ base_url: "../"
|
|||||||
<h3>Wells</h3>
|
<h3>Wells</h3>
|
||||||
<label>@well-bg</label>
|
<label>@well-bg</label>
|
||||||
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@well-bg">
|
<input type="text" class="form-control" placeholder="#f5f5f5" data-var="@well-bg">
|
||||||
|
<label>@well-border</label>
|
||||||
|
<input type="text" class="form-control" placeholder="darken(@well-bg, 7%)" data-var="@well-border">
|
||||||
|
|
||||||
|
|
||||||
<h2 id="variables-accordion">Accordion</h2>
|
<h2 id="variables-accordion">Accordion</h2>
|
||||||
@@ -1247,6 +1249,11 @@ base_url: "../"
|
|||||||
<input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
|
<input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
|
||||||
<p class="help-block">Modal backdrop background color</p>
|
<p class="help-block">Modal backdrop background color</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<label>@modal-backdrop-opacity</label>
|
||||||
|
<input type="text" class="form-control" placeholder=".5" data-var="@modal-backdrop-opacity">
|
||||||
|
<p class="help-block">Modal backdrop opacity</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Modal header and footer</h3>
|
<h3>Modal header and footer</h3>
|
||||||
|
|||||||
@@ -4,17 +4,17 @@
|
|||||||
* Licensed under http://www.apache.org/licenses/LICENSE-2.0
|
* Licensed under http://www.apache.org/licenses/LICENSE-2.0
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
.btn-default,
|
.btn-default,
|
||||||
.btn-primary,
|
.btn-primary,
|
||||||
.btn-success,
|
.btn-success,
|
||||||
.btn-info,
|
.btn-info,
|
||||||
.btn-warning,
|
.btn-warning,
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
|
||||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-default:active,
|
.btn-default:active,
|
||||||
.btn-primary:active,
|
.btn-primary:active,
|
||||||
.btn-success:active,
|
.btn-success:active,
|
||||||
@@ -27,431 +27,321 @@
|
|||||||
.btn-info.active,
|
.btn-info.active,
|
||||||
.btn-warning.active,
|
.btn-warning.active,
|
||||||
.btn-danger.active {
|
.btn-danger.active {
|
||||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
|
||||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:active,
|
.btn:active,
|
||||||
.btn.active {
|
.btn.active {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-default {
|
.btn-default {
|
||||||
text-shadow: 0 1px 0 #fff;
|
text-shadow: 0 1px 0 #fff;
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e0e0e0));
|
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
|
||||||
background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
|
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
|
||||||
background-image: -moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
|
||||||
background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #dbdbdb;
|
border-color: #dbdbdb;
|
||||||
border-color: #ccc;
|
border-color: #ccc;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-default:hover,
|
.btn-default:hover,
|
||||||
.btn-default:focus {
|
.btn-default:focus {
|
||||||
background-color: #e0e0e0;
|
background-color: #e0e0e0;
|
||||||
background-position: 0 -15px;
|
background-position: 0 -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-default:active,
|
.btn-default:active,
|
||||||
.btn-default.active {
|
.btn-default.active {
|
||||||
background-color: #e0e0e0;
|
background-color: #e0e0e0;
|
||||||
border-color: #dbdbdb;
|
border-color: #dbdbdb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.btn-primary {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#2d6ca2));
|
|
||||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
|
background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
|
||||||
background-image: -moz-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
|
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
|
||||||
background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #2b669a;
|
border-color: #2b669a;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover,
|
.btn-primary:hover,
|
||||||
.btn-primary:focus {
|
.btn-primary:focus {
|
||||||
background-color: #2d6ca2;
|
background-color: #2d6ca2;
|
||||||
background-position: 0 -15px;
|
background-position: 0 -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:active,
|
.btn-primary:active,
|
||||||
.btn-primary.active {
|
.btn-primary.active {
|
||||||
background-color: #2d6ca2;
|
background-color: #2d6ca2;
|
||||||
border-color: #2b669a;
|
border-color: #2b669a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-success {
|
.btn-success {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#419641));
|
|
||||||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
|
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
|
||||||
background-image: -moz-linear-gradient(top, #5cb85c 0%, #419641 100%);
|
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
|
||||||
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #3e8f3e;
|
border-color: #3e8f3e;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-success:hover,
|
.btn-success:hover,
|
||||||
.btn-success:focus {
|
.btn-success:focus {
|
||||||
background-color: #419641;
|
background-color: #419641;
|
||||||
background-position: 0 -15px;
|
background-position: 0 -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-success:active,
|
.btn-success:active,
|
||||||
.btn-success.active {
|
.btn-success.active {
|
||||||
background-color: #419641;
|
background-color: #419641;
|
||||||
border-color: #3e8f3e;
|
border-color: #3e8f3e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-warning {
|
.btn-warning {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#eb9316));
|
|
||||||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
|
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
|
||||||
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
|
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
|
||||||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #e38d13;
|
border-color: #e38d13;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-warning:hover,
|
.btn-warning:hover,
|
||||||
.btn-warning:focus {
|
.btn-warning:focus {
|
||||||
background-color: #eb9316;
|
background-color: #eb9316;
|
||||||
background-position: 0 -15px;
|
background-position: 0 -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-warning:active,
|
.btn-warning:active,
|
||||||
.btn-warning.active {
|
.btn-warning.active {
|
||||||
background-color: #eb9316;
|
background-color: #eb9316;
|
||||||
border-color: #e38d13;
|
border-color: #e38d13;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger {
|
.btn-danger {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c12e2a));
|
|
||||||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
|
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
|
||||||
background-image: -moz-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
|
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
|
||||||
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #b92c28;
|
border-color: #b92c28;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger:hover,
|
.btn-danger:hover,
|
||||||
.btn-danger:focus {
|
.btn-danger:focus {
|
||||||
background-color: #c12e2a;
|
background-color: #c12e2a;
|
||||||
background-position: 0 -15px;
|
background-position: 0 -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-danger:active,
|
.btn-danger:active,
|
||||||
.btn-danger.active {
|
.btn-danger.active {
|
||||||
background-color: #c12e2a;
|
background-color: #c12e2a;
|
||||||
border-color: #b92c28;
|
border-color: #b92c28;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-info {
|
.btn-info {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#2aabd2));
|
|
||||||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
|
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
|
||||||
background-image: -moz-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
|
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
|
||||||
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #28a4c9;
|
border-color: #28a4c9;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-info:hover,
|
.btn-info:hover,
|
||||||
.btn-info:focus {
|
.btn-info:focus {
|
||||||
background-color: #2aabd2;
|
background-color: #2aabd2;
|
||||||
background-position: 0 -15px;
|
background-position: 0 -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-info:active,
|
.btn-info:active,
|
||||||
.btn-info.active {
|
.btn-info.active {
|
||||||
background-color: #2aabd2;
|
background-color: #2aabd2;
|
||||||
border-color: #28a4c9;
|
border-color: #28a4c9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thumbnail,
|
.thumbnail,
|
||||||
.img-thumbnail {
|
.img-thumbnail {
|
||||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
|
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu > li > a:hover,
|
.dropdown-menu > li > a:hover,
|
||||||
.dropdown-menu > li > a:focus {
|
.dropdown-menu > li > a:focus {
|
||||||
background-color: #e8e8e8;
|
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#e8e8e8));
|
|
||||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
|
||||||
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
|
||||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
||||||
|
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
|
||||||
|
background-repeat: repeat-x;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu > .active > a,
|
.dropdown-menu > .active > a,
|
||||||
.dropdown-menu > .active > a:hover,
|
.dropdown-menu > .active > a:hover,
|
||||||
.dropdown-menu > .active > a:focus {
|
.dropdown-menu > .active > a:focus {
|
||||||
background-color: #357ebd;
|
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd));
|
|
||||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
|
||||||
background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
|
||||||
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
|
|
||||||
background-repeat: repeat-x;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
|
||||||
}
|
background-color: #357ebd;
|
||||||
|
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
||||||
.navbar-default {
|
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#f8f8f8));
|
|
||||||
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
|
|
||||||
background-image: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
|
|
||||||
background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-radius: 4px;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
||||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
|
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
|
|
||||||
}
|
}
|
||||||
|
.navbar-default {
|
||||||
|
background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
|
||||||
|
background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||||
|
border-radius: 4px;
|
||||||
|
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
|
||||||
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
|
||||||
|
}
|
||||||
.navbar-default .navbar-nav > .active > a {
|
.navbar-default .navbar-nav > .active > a {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ebebeb), to(#f3f3f3));
|
|
||||||
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
|
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
|
||||||
background-image: -moz-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
|
background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
|
||||||
background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
|
||||||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
|
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
|
||||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
|
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand,
|
.navbar-brand,
|
||||||
.navbar-nav > li > a {
|
.navbar-nav > li > a {
|
||||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
|
text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-inverse {
|
.navbar-inverse {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3c3c3c), to(#222222));
|
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
|
||||||
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
|
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
|
||||||
background-image: -moz-linear-gradient(top, #3c3c3c 0%, #222222 100%);
|
|
||||||
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222222 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-inverse .navbar-nav > .active > a {
|
.navbar-inverse .navbar-nav > .active > a {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#222222), to(#282828));
|
background-image: -webkit-linear-gradient(top, #222 0%, #282828 100%);
|
||||||
background-image: -webkit-linear-gradient(top, #222222 0%, #282828 100%);
|
background-image: linear-gradient(to bottom, #222 0%, #282828 100%);
|
||||||
background-image: -moz-linear-gradient(top, #222222 0%, #282828 100%);
|
|
||||||
background-image: linear-gradient(to bottom, #222222 0%, #282828 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
|
||||||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
|
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
|
||||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
|
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-inverse .navbar-brand,
|
.navbar-inverse .navbar-brand,
|
||||||
.navbar-inverse .navbar-nav > li > a {
|
.navbar-inverse .navbar-nav > li > a {
|
||||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-static-top,
|
.navbar-static-top,
|
||||||
.navbar-fixed-top,
|
.navbar-fixed-top,
|
||||||
.navbar-fixed-bottom {
|
.navbar-fixed-bottom {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
|
text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
|
||||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
|
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
|
||||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-success {
|
.alert-success {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#dff0d8), to(#c8e5bc));
|
|
||||||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
|
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
|
||||||
background-image: -moz-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
|
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
|
||||||
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #b2dba1;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
|
||||||
|
border-color: #b2dba1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-info {
|
.alert-info {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9edf7), to(#b9def0));
|
|
||||||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
|
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
|
||||||
background-image: -moz-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
|
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
|
||||||
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #9acfea;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
|
||||||
|
border-color: #9acfea;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-warning {
|
.alert-warning {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fcf8e3), to(#f8efc0));
|
|
||||||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
|
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
|
||||||
background-image: -moz-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
|
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
|
||||||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #f5e79e;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
|
||||||
|
border-color: #f5e79e;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert-danger {
|
.alert-danger {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f2dede), to(#e7c3c3));
|
|
||||||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
|
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
|
||||||
background-image: -moz-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
|
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
|
||||||
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #dca7a7;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
|
||||||
|
border-color: #dca7a7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress {
|
.progress {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ebebeb), to(#f5f5f5));
|
|
||||||
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
|
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
|
||||||
background-image: -moz-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
|
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
|
||||||
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar {
|
.progress-bar {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
|
|
||||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
|
background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
|
||||||
background-image: -moz-linear-gradient(top, #428bca 0%, #3071a9 100%);
|
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
|
||||||
background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-success {
|
.progress-bar-success {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5cb85c), to(#449d44));
|
|
||||||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
|
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
|
||||||
background-image: -moz-linear-gradient(top, #5cb85c 0%, #449d44 100%);
|
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
|
||||||
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-info {
|
.progress-bar-info {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#5bc0de), to(#31b0d5));
|
|
||||||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
|
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
|
||||||
background-image: -moz-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
|
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
|
||||||
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-warning {
|
.progress-bar-warning {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f0ad4e), to(#ec971f));
|
|
||||||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
|
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
|
||||||
background-image: -moz-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
|
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
|
||||||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-bar-danger {
|
.progress-bar-danger {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9534f), to(#c9302c));
|
|
||||||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
|
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
|
||||||
background-image: -moz-linear-gradient(top, #d9534f 0%, #c9302c 100%);
|
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
|
||||||
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-group {
|
.list-group {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
|
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-group-item.active,
|
.list-group-item.active,
|
||||||
.list-group-item.active:hover,
|
.list-group-item.active:hover,
|
||||||
.list-group-item.active:focus {
|
.list-group-item.active:focus {
|
||||||
text-shadow: 0 -1px 0 #3071a9;
|
text-shadow: 0 -1px 0 #3071a9;
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3278b3));
|
|
||||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
|
background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
|
||||||
background-image: -moz-linear-gradient(top, #428bca 0%, #3278b3 100%);
|
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
|
||||||
background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #3278b3;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
|
||||||
|
border-color: #3278b3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-default > .panel-heading {
|
.panel-default > .panel-heading {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#e8e8e8));
|
|
||||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
||||||
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
|
||||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-primary > .panel-heading {
|
.panel-primary > .panel-heading {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#357ebd));
|
|
||||||
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
||||||
background-image: -moz-linear-gradient(top, #428bca 0%, #357ebd 100%);
|
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
|
||||||
background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-success > .panel-heading {
|
.panel-success > .panel-heading {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#dff0d8), to(#d0e9c6));
|
|
||||||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
|
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
|
||||||
background-image: -moz-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
|
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
|
||||||
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-info > .panel-heading {
|
.panel-info > .panel-heading {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d9edf7), to(#c4e3f3));
|
|
||||||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
|
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
|
||||||
background-image: -moz-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
|
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
|
||||||
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-warning > .panel-heading {
|
.panel-warning > .panel-heading {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#fcf8e3), to(#faf2cc));
|
|
||||||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
|
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
|
||||||
background-image: -moz-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
|
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
|
||||||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel-danger > .panel-heading {
|
.panel-danger > .panel-heading {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f2dede), to(#ebcccc));
|
|
||||||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
|
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
|
||||||
background-image: -moz-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
|
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
|
||||||
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.well {
|
.well {
|
||||||
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#e8e8e8), to(#f5f5f5));
|
|
||||||
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
|
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
|
||||||
background-image: -moz-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
|
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
|
||||||
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
border-color: #dcdcdc;
|
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
|
||||||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
|
border-color: #dcdcdc;
|
||||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
|
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
|
||||||
}
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
|
||||||
|
}
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
|
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
|
||||||
// ============================================================
|
// ============================================================
|
||||||
@@ -83,7 +83,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// ALERT CLASS DEFINITION
|
// ALERT CLASS DEFINITION
|
||||||
// ======================
|
// ======================
|
||||||
@@ -182,7 +182,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// BUTTON PUBLIC CLASS DEFINITION
|
// BUTTON PUBLIC CLASS DEFINITION
|
||||||
// ==============================
|
// ==============================
|
||||||
@@ -298,7 +298,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// CAROUSEL CLASS DEFINITION
|
// CAROUSEL CLASS DEFINITION
|
||||||
// =========================
|
// =========================
|
||||||
@@ -516,7 +516,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// COLLAPSE PUBLIC CLASS DEFINITION
|
// COLLAPSE PUBLIC CLASS DEFINITION
|
||||||
// ================================
|
// ================================
|
||||||
@@ -696,7 +696,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// DROPDOWN CLASS DEFINITION
|
// DROPDOWN CLASS DEFINITION
|
||||||
// =========================
|
// =========================
|
||||||
@@ -704,7 +704,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
var backdrop = '.dropdown-backdrop'
|
var backdrop = '.dropdown-backdrop'
|
||||||
var toggle = '[data-toggle=dropdown]'
|
var toggle = '[data-toggle=dropdown]'
|
||||||
var Dropdown = function (element) {
|
var Dropdown = function (element) {
|
||||||
var $el = $(element).on('click.bs.dropdown', this.toggle)
|
$(element).on('click.bs.dropdown', this.toggle)
|
||||||
}
|
}
|
||||||
|
|
||||||
Dropdown.prototype.toggle = function (e) {
|
Dropdown.prototype.toggle = function (e) {
|
||||||
@@ -763,7 +763,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
|
|
||||||
if (e.keyCode == 38 && index > 0) index-- // up
|
if (e.keyCode == 38 && index > 0) index-- // up
|
||||||
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
|
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
|
||||||
if (!~index) index=0
|
if (!~index) index = 0
|
||||||
|
|
||||||
$items.eq(index).focus()
|
$items.eq(index).focus()
|
||||||
}
|
}
|
||||||
@@ -851,7 +851,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// MODAL CLASS DEFINITION
|
// MODAL CLASS DEFINITION
|
||||||
// ======================
|
// ======================
|
||||||
@@ -982,7 +982,6 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
}
|
}
|
||||||
|
|
||||||
Modal.prototype.backdrop = function (callback) {
|
Modal.prototype.backdrop = function (callback) {
|
||||||
var that = this
|
|
||||||
var animate = this.$element.hasClass('fade') ? 'fade' : ''
|
var animate = this.$element.hasClass('fade') ? 'fade' : ''
|
||||||
|
|
||||||
if (this.isShown && this.options.backdrop) {
|
if (this.isShown && this.options.backdrop) {
|
||||||
@@ -1013,7 +1012,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
} else if (!this.isShown && this.$backdrop) {
|
} else if (!this.isShown && this.$backdrop) {
|
||||||
this.$backdrop.removeClass('in')
|
this.$backdrop.removeClass('in')
|
||||||
|
|
||||||
$.support.transition && this.$element.hasClass('fade')?
|
$.support.transition && this.$element.hasClass('fade') ?
|
||||||
this.$backdrop
|
this.$backdrop
|
||||||
.one($.support.transition.end, callback)
|
.one($.support.transition.end, callback)
|
||||||
.emulateTransitionEnd(150) :
|
.emulateTransitionEnd(150) :
|
||||||
@@ -1099,7 +1098,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// TOOLTIP PUBLIC CLASS DEFINITION
|
// TOOLTIP PUBLIC CLASS DEFINITION
|
||||||
// ===============================
|
// ===============================
|
||||||
@@ -1213,7 +1212,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
}
|
}
|
||||||
|
|
||||||
Tooltip.prototype.show = function () {
|
Tooltip.prototype.show = function () {
|
||||||
var e = $.Event('show.bs.'+ this.type)
|
var e = $.Event('show.bs.' + this.type)
|
||||||
|
|
||||||
if (this.hasContent() && this.enabled) {
|
if (this.hasContent() && this.enabled) {
|
||||||
this.$element.trigger(e)
|
this.$element.trigger(e)
|
||||||
@@ -1272,7 +1271,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Tooltip.prototype.applyPlacement = function(offset, placement) {
|
Tooltip.prototype.applyPlacement = function (offset, placement) {
|
||||||
var replace
|
var replace
|
||||||
var $tip = this.tip()
|
var $tip = this.tip()
|
||||||
var width = $tip[0].offsetWidth
|
var width = $tip[0].offsetWidth
|
||||||
@@ -1323,8 +1322,8 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
if (replace) $tip.offset(offset)
|
if (replace) $tip.offset(offset)
|
||||||
}
|
}
|
||||||
|
|
||||||
Tooltip.prototype.replaceArrow = function(delta, dimension, position) {
|
Tooltip.prototype.replaceArrow = function (delta, dimension, position) {
|
||||||
this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
|
this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + '%') : '')
|
||||||
}
|
}
|
||||||
|
|
||||||
Tooltip.prototype.setContent = function () {
|
Tooltip.prototype.setContent = function () {
|
||||||
@@ -1485,7 +1484,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// POPOVER PUBLIC CLASS DEFINITION
|
// POPOVER PUBLIC CLASS DEFINITION
|
||||||
// ===============================
|
// ===============================
|
||||||
@@ -1603,7 +1602,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// SCROLLSPY CLASS DEFINITION
|
// SCROLLSPY CLASS DEFINITION
|
||||||
// ==========================
|
// ==========================
|
||||||
@@ -1762,7 +1761,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// TAB CLASS DEFINITION
|
// TAB CLASS DEFINITION
|
||||||
// ====================
|
// ====================
|
||||||
@@ -1898,7 +1897,7 @@ if (typeof jQuery === "undefined") { throw new Error("Bootstrap requires jQuery"
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// AFFIX CLASS DEFINITION
|
// AFFIX CLASS DEFINITION
|
||||||
// ======================
|
// ======================
|
||||||
|
|||||||
@@ -597,6 +597,35 @@ h1[id] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Color swatches
|
||||||
|
*
|
||||||
|
* Color swatches and associated values for our grayscale and brand colors.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.color-swatches {
|
||||||
|
margin: 0 -5px;
|
||||||
|
overflow: hidden; /* clearfix */
|
||||||
|
}
|
||||||
|
.color-swatch {
|
||||||
|
float: left;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.color-swatches .gray-darker { background-color: #222; }
|
||||||
|
.color-swatches .gray-dark { background-color: #333; }
|
||||||
|
.color-swatches .gray { background-color: #555; }
|
||||||
|
.color-swatches .gray-light { background-color: #999; }
|
||||||
|
.color-swatches .gray-lighter { background-color: #eee; }
|
||||||
|
.color-swatches .brand-primary { background-color: #428bca; }
|
||||||
|
.color-swatches .brand-success { background-color: #5cb85c; }
|
||||||
|
.color-swatches .brand-warning { background-color: #f0ad4e; }
|
||||||
|
.color-swatches .brand-danger { background-color: #d9534f; }
|
||||||
|
.color-swatches .brand-info { background-color: #5bc0de; }
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Team members
|
* Team members
|
||||||
*
|
*
|
||||||
@@ -730,7 +759,7 @@ h1[id] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Typography */
|
/* Typography */
|
||||||
.bs-example-type .table .info {
|
.bs-example-type .table .type-info {
|
||||||
color: #999;
|
color: #999;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
@@ -750,6 +779,11 @@ h1[id] {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Contextual background colors */
|
||||||
|
.bs-example-bg-classes p {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Images */
|
/* Images */
|
||||||
.bs-example > .img-circle,
|
.bs-example > .img-circle,
|
||||||
.bs-example > .img-rounded,
|
.bs-example > .img-rounded,
|
||||||
@@ -921,7 +955,6 @@ h1[id] {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.highlight {
|
.highlight {
|
||||||
display: none; /* hidden by default, until >480px */
|
|
||||||
padding: 9px 14px;
|
padding: 9px 14px;
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
background-color: #f7f7f9;
|
background-color: #f7f7f9;
|
||||||
@@ -949,13 +982,6 @@ h1[id] {
|
|||||||
color: #bebec5;
|
color: #bebec5;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show code snippets when we have the space */
|
|
||||||
@media (min-width: 481px) {
|
|
||||||
.highlight {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Responsive tests
|
* Responsive tests
|
||||||
@@ -998,6 +1024,7 @@ h1[id] {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.responsive-utilities-test span {
|
.responsive-utilities-test span {
|
||||||
|
display: block;
|
||||||
padding: 15px 10px;
|
padding: 15px 10px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@@ -1037,19 +1064,20 @@ h1[id] {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.bs-glyphicons {
|
.bs-glyphicons {
|
||||||
padding-left: 0;
|
margin: 0 -19px 20px -16px;
|
||||||
padding-bottom: 1px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
list-style: none;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
.bs-glyphicons-list {
|
||||||
|
padding-left: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
.bs-glyphicons li {
|
.bs-glyphicons li {
|
||||||
float: left;
|
float: left;
|
||||||
width: 25%;
|
width: 25%;
|
||||||
height: 115px;
|
height: 115px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin: 0 -1px -1px 0;
|
margin: 0 -1px -1px 0;
|
||||||
font-size: 12px;
|
font-size: 10px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
@@ -1069,8 +1097,13 @@ h1[id] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
|
.bs-glyphicons {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
.bs-glyphicons li {
|
.bs-glyphicons li {
|
||||||
width: 12.5%;
|
width: 12.5%;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -12,19 +12,19 @@
|
|||||||
|
|
||||||
!function ($) {
|
!function ($) {
|
||||||
|
|
||||||
$(function(){
|
$(function () {
|
||||||
|
|
||||||
// IE10 viewport hack for Surface/desktop Windows 8 bug
|
// IE10 viewport hack for Surface/desktop Windows 8 bug
|
||||||
//
|
//
|
||||||
// See Getting Started docs for more information
|
// See Getting Started docs for more information
|
||||||
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
||||||
var msViewportStyle = document.createElement("style");
|
var msViewportStyle = document.createElement('style');
|
||||||
msViewportStyle.appendChild(
|
msViewportStyle.appendChild(
|
||||||
document.createTextNode(
|
document.createTextNode(
|
||||||
"@-ms-viewport{width:auto!important}"
|
'@-ms-viewport{width:auto!important}'
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
document.getElementsByTagName("head")[0].
|
document.getElementsByTagName('head')[0].
|
||||||
appendChild(msViewportStyle);
|
appendChild(msViewportStyle);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -73,24 +73,24 @@
|
|||||||
|
|
||||||
// tooltip demo
|
// tooltip demo
|
||||||
$('.tooltip-demo').tooltip({
|
$('.tooltip-demo').tooltip({
|
||||||
selector: "[data-toggle=tooltip]",
|
selector: '[data-toggle=tooltip]',
|
||||||
container: "body"
|
container: 'body'
|
||||||
})
|
})
|
||||||
|
|
||||||
$('.tooltip-test').tooltip()
|
$('.tooltip-test').tooltip()
|
||||||
$('.popover-test').popover()
|
$('.popover-test').popover()
|
||||||
|
|
||||||
$('.bs-docs-navbar').tooltip({
|
$('.bs-docs-navbar').tooltip({
|
||||||
selector: "a[data-toggle=tooltip]",
|
selector: 'a[data-toggle=tooltip]',
|
||||||
container: ".bs-docs-navbar .nav"
|
container: '.bs-docs-navbar .nav'
|
||||||
})
|
})
|
||||||
|
|
||||||
// popover demo
|
// popover demo
|
||||||
$("[data-toggle=popover]")
|
$('[data-toggle=popover]')
|
||||||
.popover()
|
.popover()
|
||||||
|
|
||||||
// button state demo
|
// button state demo
|
||||||
$('#fat-btn')
|
$('#loading-example-btn')
|
||||||
.click(function () {
|
.click(function () {
|
||||||
var btn = $(this)
|
var btn = $(this)
|
||||||
btn.button('loading')
|
btn.button('loading')
|
||||||
@@ -98,6 +98,6 @@
|
|||||||
btn.button('reset')
|
btn.button('reset')
|
||||||
}, 3000)
|
}, 3000)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
}(jQuery)
|
}(jQuery)
|
||||||
|
|||||||
@@ -5,9 +5,10 @@
|
|||||||
* details, see http://creativecommons.org/licenses/by/3.0/.
|
* details, see http://creativecommons.org/licenses/by/3.0/.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/* jshint multistr:true */
|
||||||
|
|
||||||
window.onload = function () { // wait for load in a dumb way because B-0
|
window.onload = function () { // wait for load in a dumb way because B-0
|
||||||
var cw = '/*!\n * Bootstrap v3.0.3\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Designed and built with all the love in the world @twitter by @mdo and @fat.\n */\n\n'
|
var cw = '/*!\n * Bootstrap v3.0.3 (http://getbootstrap.com)\n\n *\n * Copyright 2013 Twitter, Inc\n * Licensed under the Apache License v2.0\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\n'
|
||||||
|
|
||||||
function showError(msg, err) {
|
function showError(msg, err) {
|
||||||
$('<div id="bsCustomizerAlert" class="bs-customizer-alert">\
|
$('<div id="bsCustomizerAlert" class="bs-customizer-alert">\
|
||||||
@@ -34,18 +35,18 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
}
|
}
|
||||||
|
|
||||||
function getQueryParam(key) {
|
function getQueryParam(key) {
|
||||||
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
|
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, '\\$&'); // escape RegEx meta chars
|
||||||
var match = location.search.match(new RegExp("[?&]"+key+"=([^&]+)(&|$)"));
|
var match = location.search.match(new RegExp('[?&]' + key + '=([^&]+)(&|$)'));
|
||||||
return match && decodeURIComponent(match[1].replace(/\+/g, " "));
|
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
|
||||||
}
|
}
|
||||||
|
|
||||||
function createGist(configJson) {
|
function createGist(configJson) {
|
||||||
var data = {
|
var data = {
|
||||||
"description": "Bootstrap Customizer Config",
|
'description': 'Bootstrap Customizer Config',
|
||||||
"public": true,
|
'public': true,
|
||||||
"files": {
|
'files': {
|
||||||
"config.json": {
|
'config.json': {
|
||||||
"content": configJson
|
'content': configJson
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -55,11 +56,11 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
data: JSON.stringify(data)
|
data: JSON.stringify(data)
|
||||||
})
|
})
|
||||||
.success(function(result) {
|
.success(function (result) {
|
||||||
var origin = window.location.protocol + "//" + window.location.host
|
var origin = window.location.protocol + '//' + window.location.host
|
||||||
history.replaceState(false, document.title, origin + window.location.pathname + '?id=' + result.id)
|
history.replaceState(false, document.title, origin + window.location.pathname + '?id=' + result.id)
|
||||||
})
|
})
|
||||||
.error(function(err) {
|
.error(function (err) {
|
||||||
showError('<strong>Ruh roh!</strong> Could not save gist file, configuration not saved.', err)
|
showError('<strong>Ruh roh!</strong> Could not save gist file, configuration not saved.', err)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -69,7 +70,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
|
|
||||||
$('#less-variables-section input')
|
$('#less-variables-section input')
|
||||||
.each(function () {
|
.each(function () {
|
||||||
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
|
$(this).val() && (vars[$(this).prev().text()] = $(this).val())
|
||||||
})
|
})
|
||||||
|
|
||||||
var data = {
|
var data = {
|
||||||
@@ -93,7 +94,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
type: 'GET',
|
type: 'GET',
|
||||||
dataType: 'json'
|
dataType: 'json'
|
||||||
})
|
})
|
||||||
.success(function(result) {
|
.success(function (result) {
|
||||||
var data = JSON.parse(result.files['config.json'].content)
|
var data = JSON.parse(result.files['config.json'].content)
|
||||||
if (data.js) {
|
if (data.js) {
|
||||||
$('#plugin-section input').each(function () {
|
$('#plugin-section input').each(function () {
|
||||||
@@ -111,7 +112,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.error(function(err) {
|
.error(function (err) {
|
||||||
showError('Error fetching bootstrap config file', err)
|
showError('Error fetching bootstrap config file', err)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -130,15 +131,15 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
|
|
||||||
if (js) {
|
if (js) {
|
||||||
var jsFolder = zip.folder('js')
|
var jsFolder = zip.folder('js')
|
||||||
for (var fileName in js) {
|
for (var jsFileName in js) {
|
||||||
jsFolder.file(fileName, js[fileName])
|
jsFolder.file(jsFileName, js[jsFileName])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (fonts) {
|
if (fonts) {
|
||||||
var fontsFolder = zip.folder('fonts')
|
var fontsFolder = zip.folder('fonts')
|
||||||
for (var fileName in fonts) {
|
for (var fontsFileName in fonts) {
|
||||||
fontsFolder.file(fileName, fonts[fileName], {base64: true})
|
fontsFolder.file(fontsFileName, fonts[fontsFileName], {base64: true})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -146,7 +147,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
zip.file('config.json', config)
|
zip.file('config.json', config)
|
||||||
}
|
}
|
||||||
|
|
||||||
var content = zip.generate({type:"blob"})
|
var content = zip.generate({ type: 'blob' })
|
||||||
|
|
||||||
complete(content)
|
complete(content)
|
||||||
}
|
}
|
||||||
@@ -201,7 +202,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
|
|
||||||
$('#less-variables-section input')
|
$('#less-variables-section input')
|
||||||
.each(function () {
|
.each(function () {
|
||||||
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
|
$(this).val() && (vars[$(this).prev().text()] = $(this).val())
|
||||||
})
|
})
|
||||||
|
|
||||||
$.each(bootstrapLessFilenames(), function(index, filename) {
|
$.each(bootstrapLessFilenames(), function(index, filename) {
|
||||||
@@ -231,7 +232,7 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
}
|
}
|
||||||
result = {
|
result = {
|
||||||
'bootstrap.css' : cw + tree.toCSS(),
|
'bootstrap.css' : cw + tree.toCSS(),
|
||||||
'bootstrap.min.css' : cw + tree.toCSS({ compress: true }).replace(/\n/g, '')
|
'bootstrap.min.css' : cw + tree.toCSS({ compress: true })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@@ -310,22 +311,22 @@ window.onload = function () { // wait for load in a dumb way because B-0
|
|||||||
|
|
||||||
generateZip(generateCSS(), generateJavascript(), generateFonts(), configJson, function (blob) {
|
generateZip(generateCSS(), generateJavascript(), generateFonts(), configJson, function (blob) {
|
||||||
$compileBtn.removeAttr('disabled')
|
$compileBtn.removeAttr('disabled')
|
||||||
saveAs(blob, "bootstrap.zip")
|
saveAs(blob, 'bootstrap.zip')
|
||||||
createGist(configJson)
|
createGist(configJson)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
// browser support alerts
|
// browser support alerts
|
||||||
if (!window.URL && navigator.userAgent.toLowerCase().indexOf('safari') != -1) {
|
if (!window.URL && navigator.userAgent.toLowerCase().indexOf('safari') != -1) {
|
||||||
showCallout("Looks like you're using safari, which sadly doesn't have the best support\
|
showCallout('Looks like you\'re using safari, which sadly doesn\'t have the best support\
|
||||||
for HTML5 blobs. Because of this your file will be downloaded with the name <code>\"untitled\"</code>.\
|
for HTML5 blobs. Because of this your file will be downloaded with the name <code>"untitled"</code>.\
|
||||||
However, if you check your downloads folder, just rename this <code>\"untitled\"</code> file\
|
However, if you check your downloads folder, just rename this <code>"untitled"</code> file\
|
||||||
to <code>\"bootstrap.zip\"</code> and you should be good to go!")
|
to <code>"bootstrap.zip"</code> and you should be good to go!')
|
||||||
} else if (!window.URL && !window.webkitURL) {
|
} else if (!window.URL && !window.webkitURL) {
|
||||||
$('.bs-docs-section, .bs-sidebar').css('display', 'none')
|
$('.bs-docs-section, .bs-sidebar').css('display', 'none')
|
||||||
|
|
||||||
showCallout("Looks like your current browser doesn't support the Bootstrap Customizer. Please take a second\
|
showCallout('Looks like your current browser doesn\'t support the Bootstrap Customizer. Please take a second\
|
||||||
to <a href=\"https://www.google.com/intl/en/chrome/browser/\"> upgrade to a more modern browser</a>.", true)
|
to <a href="https://www.google.com/intl/en/chrome/browser/"> upgrade to a more modern browser</a>.', true)
|
||||||
}
|
}
|
||||||
|
|
||||||
parseUrl()
|
parseUrl()
|
||||||
|
|||||||
@@ -14,156 +14,386 @@
|
|||||||
|
|
||||||
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
|
/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
|
||||||
|
|
||||||
if (typeof Blob !== "function" || typeof URL === "undefined")
|
if (!(typeof Blob === "function" || typeof Blob === "object") || typeof URL === "undefined")
|
||||||
if (typeof Blob === "function" && typeof webkitURL !== "undefined") self.URL = webkitURL;
|
if ((typeof Blob === "function" || typeof Blob === "object") && typeof webkitURL !== "undefined") self.URL = webkitURL;
|
||||||
else var Blob = (function (view) {
|
else var Blob = (function (view) {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || view.MSBlobBuilder || (function(view) {
|
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || view.MSBlobBuilder || (function(view) {
|
||||||
var
|
var
|
||||||
get_class = function(object) {
|
get_class = function(object) {
|
||||||
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
|
return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
|
||||||
}
|
}
|
||||||
, FakeBlobBuilder = function BlobBuilder() {
|
, FakeBlobBuilder = function BlobBuilder() {
|
||||||
this.data = [];
|
this.data = [];
|
||||||
}
|
}
|
||||||
, FakeBlob = function Blob(data, type, encoding) {
|
, FakeBlob = function Blob(data, type, encoding) {
|
||||||
this.data = data;
|
this.data = data;
|
||||||
this.size = data.length;
|
this.size = data.length;
|
||||||
this.type = type;
|
this.type = type;
|
||||||
this.encoding = encoding;
|
this.encoding = encoding;
|
||||||
}
|
}
|
||||||
, FBB_proto = FakeBlobBuilder.prototype
|
, FBB_proto = FakeBlobBuilder.prototype
|
||||||
, FB_proto = FakeBlob.prototype
|
, FB_proto = FakeBlob.prototype
|
||||||
, FileReaderSync = view.FileReaderSync
|
, FileReaderSync = view.FileReaderSync
|
||||||
, FileException = function(type) {
|
, FileException = function(type) {
|
||||||
this.code = this[this.name = type];
|
this.code = this[this.name = type];
|
||||||
}
|
}
|
||||||
, file_ex_codes = (
|
, file_ex_codes = (
|
||||||
"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
|
"NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
|
||||||
+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
|
+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
|
||||||
).split(" ")
|
).split(" ")
|
||||||
, file_ex_code = file_ex_codes.length
|
, file_ex_code = file_ex_codes.length
|
||||||
, real_URL = view.URL || view.webkitURL || view
|
, real_URL = view.URL || view.webkitURL || view
|
||||||
, real_create_object_URL = real_URL.createObjectURL
|
, real_create_object_URL = real_URL.createObjectURL
|
||||||
, real_revoke_object_URL = real_URL.revokeObjectURL
|
, real_revoke_object_URL = real_URL.revokeObjectURL
|
||||||
, URL = real_URL
|
, URL = real_URL
|
||||||
, btoa = view.btoa
|
, btoa = view.btoa
|
||||||
, atob = view.atob
|
, atob = view.atob
|
||||||
|
|
||||||
, ArrayBuffer = view.ArrayBuffer
|
, ArrayBuffer = view.ArrayBuffer
|
||||||
, Uint8Array = view.Uint8Array
|
, Uint8Array = view.Uint8Array
|
||||||
;
|
;
|
||||||
FakeBlob.fake = FB_proto.fake = true;
|
FakeBlob.fake = FB_proto.fake = true;
|
||||||
while (file_ex_code--) {
|
while (file_ex_code--) {
|
||||||
FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
|
FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
|
||||||
}
|
}
|
||||||
if (!real_URL.createObjectURL) {
|
if (!real_URL.createObjectURL) {
|
||||||
URL = view.URL = {};
|
URL = view.URL = {};
|
||||||
}
|
}
|
||||||
URL.createObjectURL = function(blob) {
|
URL.createObjectURL = function(blob) {
|
||||||
var
|
var
|
||||||
type = blob.type
|
type = blob.type
|
||||||
, data_URI_header
|
, data_URI_header
|
||||||
;
|
;
|
||||||
if (type === null) {
|
if (type === null) {
|
||||||
type = "application/octet-stream";
|
type = "application/octet-stream";
|
||||||
}
|
}
|
||||||
if (blob instanceof FakeBlob) {
|
if (blob instanceof FakeBlob) {
|
||||||
data_URI_header = "data:" + type;
|
data_URI_header = "data:" + type;
|
||||||
if (blob.encoding === "base64") {
|
if (blob.encoding === "base64") {
|
||||||
return data_URI_header + ";base64," + blob.data;
|
return data_URI_header + ";base64," + blob.data;
|
||||||
} else if (blob.encoding === "URI") {
|
} else if (blob.encoding === "URI") {
|
||||||
return data_URI_header + "," + decodeURIComponent(blob.data);
|
return data_URI_header + "," + decodeURIComponent(blob.data);
|
||||||
} if (btoa) {
|
} if (btoa) {
|
||||||
return data_URI_header + ";base64," + btoa(blob.data);
|
return data_URI_header + ";base64," + btoa(blob.data);
|
||||||
} else {
|
} else {
|
||||||
return data_URI_header + "," + encodeURIComponent(blob.data);
|
return data_URI_header + "," + encodeURIComponent(blob.data);
|
||||||
}
|
}
|
||||||
} else if (real_create_object_URL) {
|
} else if (real_create_object_URL) {
|
||||||
return real_create_object_URL.call(real_URL, blob);
|
return real_create_object_URL.call(real_URL, blob);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
URL.revokeObjectURL = function(object_URL) {
|
URL.revokeObjectURL = function(object_URL) {
|
||||||
if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
|
if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
|
||||||
real_revoke_object_URL.call(real_URL, object_URL);
|
real_revoke_object_URL.call(real_URL, object_URL);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
FBB_proto.append = function(data/*, endings*/) {
|
FBB_proto.append = function(data/*, endings*/) {
|
||||||
var bb = this.data;
|
var bb = this.data;
|
||||||
// decode data to a binary string
|
// decode data to a binary string
|
||||||
if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
|
if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
|
||||||
var
|
var
|
||||||
str = ""
|
str = ""
|
||||||
, buf = new Uint8Array(data)
|
, buf = new Uint8Array(data)
|
||||||
, i = 0
|
, i = 0
|
||||||
, buf_len = buf.length
|
, buf_len = buf.length
|
||||||
;
|
;
|
||||||
for (; i < buf_len; i++) {
|
for (; i < buf_len; i++) {
|
||||||
str += String.fromCharCode(buf[i]);
|
str += String.fromCharCode(buf[i]);
|
||||||
}
|
}
|
||||||
bb.push(str);
|
bb.push(str);
|
||||||
} else if (get_class(data) === "Blob" || get_class(data) === "File") {
|
} else if (get_class(data) === "Blob" || get_class(data) === "File") {
|
||||||
if (FileReaderSync) {
|
if (FileReaderSync) {
|
||||||
var fr = new FileReaderSync;
|
var fr = new FileReaderSync;
|
||||||
bb.push(fr.readAsBinaryString(data));
|
bb.push(fr.readAsBinaryString(data));
|
||||||
} else {
|
} else {
|
||||||
// async FileReader won't work as BlobBuilder is sync
|
// async FileReader won't work as BlobBuilder is sync
|
||||||
throw new FileException("NOT_READABLE_ERR");
|
throw new FileException("NOT_READABLE_ERR");
|
||||||
}
|
}
|
||||||
} else if (data instanceof FakeBlob) {
|
} else if (data instanceof FakeBlob) {
|
||||||
if (data.encoding === "base64" && atob) {
|
if (data.encoding === "base64" && atob) {
|
||||||
bb.push(atob(data.data));
|
bb.push(atob(data.data));
|
||||||
} else if (data.encoding === "URI") {
|
} else if (data.encoding === "URI") {
|
||||||
bb.push(decodeURIComponent(data.data));
|
bb.push(decodeURIComponent(data.data));
|
||||||
} else if (data.encoding === "raw") {
|
} else if (data.encoding === "raw") {
|
||||||
bb.push(data.data);
|
bb.push(data.data);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (typeof data !== "string") {
|
if (typeof data !== "string") {
|
||||||
data += ""; // convert unsupported types to strings
|
data += ""; // convert unsupported types to strings
|
||||||
}
|
}
|
||||||
// decode UTF-16 to binary string
|
// decode UTF-16 to binary string
|
||||||
bb.push(unescape(encodeURIComponent(data)));
|
bb.push(unescape(encodeURIComponent(data)));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
FBB_proto.getBlob = function(type) {
|
FBB_proto.getBlob = function(type) {
|
||||||
if (!arguments.length) {
|
if (!arguments.length) {
|
||||||
type = null;
|
type = null;
|
||||||
}
|
}
|
||||||
return new FakeBlob(this.data.join(""), type, "raw");
|
return new FakeBlob(this.data.join(""), type, "raw");
|
||||||
};
|
};
|
||||||
FBB_proto.toString = function() {
|
FBB_proto.toString = function() {
|
||||||
return "[object BlobBuilder]";
|
return "[object BlobBuilder]";
|
||||||
};
|
};
|
||||||
FB_proto.slice = function(start, end, type) {
|
FB_proto.slice = function(start, end, type) {
|
||||||
var args = arguments.length;
|
var args = arguments.length;
|
||||||
if (args < 3) {
|
if (args < 3) {
|
||||||
type = null;
|
type = null;
|
||||||
}
|
}
|
||||||
return new FakeBlob(
|
return new FakeBlob(
|
||||||
this.data.slice(start, args > 1 ? end : this.data.length)
|
this.data.slice(start, args > 1 ? end : this.data.length)
|
||||||
, type
|
, type
|
||||||
, this.encoding
|
, this.encoding
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
FB_proto.toString = function() {
|
FB_proto.toString = function() {
|
||||||
return "[object Blob]";
|
return "[object Blob]";
|
||||||
};
|
};
|
||||||
return FakeBlobBuilder;
|
return FakeBlobBuilder;
|
||||||
}(view));
|
}(view));
|
||||||
|
|
||||||
return function Blob(blobParts, options) {
|
return function Blob(blobParts, options) {
|
||||||
var type = options ? (options.type || "") : "";
|
var type = options ? (options.type || "") : "";
|
||||||
var builder = new BlobBuilder();
|
var builder = new BlobBuilder();
|
||||||
if (blobParts) {
|
if (blobParts) {
|
||||||
for (var i = 0, len = blobParts.length; i < len; i++) {
|
for (var i = 0, len = blobParts.length; i < len; i++) {
|
||||||
builder.append(blobParts[i]);
|
builder.append(blobParts[i]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return builder.getBlob(type);
|
return builder.getBlob(type);
|
||||||
};
|
};
|
||||||
}(self));
|
}(self));
|
||||||
|
|
||||||
|
/* FileSaver.js
|
||||||
|
* A saveAs() FileSaver implementation.
|
||||||
|
* 2013-10-21
|
||||||
|
*
|
||||||
|
* By Eli Grey, http://eligrey.com
|
||||||
|
* License: X11/MIT
|
||||||
|
* See LICENSE.md
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*global self */
|
||||||
|
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
|
||||||
|
plusplus: true */
|
||||||
|
|
||||||
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
|
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
|
||||||
var saveAs=saveAs||(navigator.msSaveOrOpenBlob&&navigator.msSaveOrOpenBlob.bind(navigator))||(function(h){"use strict";var r=h.document,l=function(){return h.URL||h.webkitURL||h},e=h.URL||h.webkitURL||h,n=r.createElementNS("http://www.w3.org/1999/xhtml","a"),g=!h.externalHost&&"download" in n,j=function(t){var s=r.createEvent("MouseEvents");s.initMouseEvent("click",true,false,h,0,0,0,0,0,false,false,false,false,0,null);t.dispatchEvent(s)},o=h.webkitRequestFileSystem,p=h.requestFileSystem||o||h.mozRequestFileSystem,m=function(s){(h.setImmediate||h.setTimeout)(function(){throw s},0)},c="application/octet-stream",k=0,b=[],i=function(){var t=b.length;while(t--){var s=b[t];if(typeof s==="string"){e.revokeObjectURL(s)}else{s.remove()}}b.length=0},q=function(t,s,w){s=[].concat(s);var v=s.length;while(v--){var x=t["on"+s[v]];if(typeof x==="function"){try{x.call(t,w||t)}catch(u){m(u)}}}},f=function(t,u){var v=this,B=t.type,E=false,x,w,s=function(){var F=l().createObjectURL(t);b.push(F);return F},A=function(){q(v,"writestart progress write writeend".split(" "))},D=function(){if(E||!x){x=s(t)}if(w){w.location.href=x}else{window.open(x,"_blank")}v.readyState=v.DONE;A()},z=function(F){return function(){if(v.readyState!==v.DONE){return F.apply(this,arguments)}}},y={create:true,exclusive:false},C;v.readyState=v.INIT;if(!u){u="download"}if(g){x=s(t);n.href=x;n.download=u;j(n);v.readyState=v.DONE;A();return}if(h.chrome&&B&&B!==c){C=t.slice||t.webkitSlice;t=C.call(t,0,t.size,c);E=true}if(o&&u!=="download"){u+=".download"}if(B===c||o){w=h}if(!p){D();return}k+=t.size;p(h.TEMPORARY,k,z(function(F){F.root.getDirectory("saved",y,z(function(G){var H=function(){G.getFile(u,y,z(function(I){I.createWriter(z(function(J){J.onwriteend=function(K){w.location.href=I.toURL();b.push(I);v.readyState=v.DONE;q(v,"writeend",K)};J.onerror=function(){var K=J.error;if(K.code!==K.ABORT_ERR){D()}};"writestart progress write abort".split(" ").forEach(function(K){J["on"+K]=v["on"+K]});J.write(t);v.abort=function(){J.abort();v.readyState=v.DONE};v.readyState=v.WRITING}),D)}),D)};G.getFile(u,{create:false},z(function(I){I.remove();H()}),z(function(I){if(I.code===I.NOT_FOUND_ERR){H()}else{D()}}))}),D)}),D)},d=f.prototype,a=function(s,t){return new f(s,t)};d.abort=function(){var s=this;s.readyState=s.DONE;q(s,"abort")};d.readyState=d.INIT=0;d.WRITING=1;d.DONE=2;d.error=d.onwritestart=d.onprogress=d.onwrite=d.onabort=d.onerror=d.onwriteend=null;h.addEventListener("unload",i,false);return a}(self));
|
|
||||||
|
var saveAs = saveAs
|
||||||
|
|| (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob && navigator.msSaveOrOpenBlob.bind(navigator))
|
||||||
|
|| (function(view) {
|
||||||
|
"use strict";
|
||||||
|
var
|
||||||
|
doc = view.document
|
||||||
|
// only get URL when necessary in case BlobBuilder.js hasn't overridden it yet
|
||||||
|
, get_URL = function() {
|
||||||
|
return view.URL || view.webkitURL || view;
|
||||||
|
}
|
||||||
|
, URL = view.URL || view.webkitURL || view
|
||||||
|
, save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a")
|
||||||
|
, can_use_save_link = !view.externalHost && "download" in save_link
|
||||||
|
, click = function(node) {
|
||||||
|
var event = doc.createEvent("MouseEvents");
|
||||||
|
event.initMouseEvent(
|
||||||
|
"click", true, false, view, 0, 0, 0, 0, 0
|
||||||
|
, false, false, false, false, 0, null
|
||||||
|
);
|
||||||
|
node.dispatchEvent(event);
|
||||||
|
}
|
||||||
|
, webkit_req_fs = view.webkitRequestFileSystem
|
||||||
|
, req_fs = view.requestFileSystem || webkit_req_fs || view.mozRequestFileSystem
|
||||||
|
, throw_outside = function (ex) {
|
||||||
|
(view.setImmediate || view.setTimeout)(function() {
|
||||||
|
throw ex;
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
, force_saveable_type = "application/octet-stream"
|
||||||
|
, fs_min_size = 0
|
||||||
|
, deletion_queue = []
|
||||||
|
, process_deletion_queue = function() {
|
||||||
|
var i = deletion_queue.length;
|
||||||
|
while (i--) {
|
||||||
|
var file = deletion_queue[i];
|
||||||
|
if (typeof file === "string") { // file is an object URL
|
||||||
|
URL.revokeObjectURL(file);
|
||||||
|
} else { // file is a File
|
||||||
|
file.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
deletion_queue.length = 0; // clear queue
|
||||||
|
}
|
||||||
|
, dispatch = function(filesaver, event_types, event) {
|
||||||
|
event_types = [].concat(event_types);
|
||||||
|
var i = event_types.length;
|
||||||
|
while (i--) {
|
||||||
|
var listener = filesaver["on" + event_types[i]];
|
||||||
|
if (typeof listener === "function") {
|
||||||
|
try {
|
||||||
|
listener.call(filesaver, event || filesaver);
|
||||||
|
} catch (ex) {
|
||||||
|
throw_outside(ex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
, FileSaver = function(blob, name) {
|
||||||
|
// First try a.download, then web filesystem, then object URLs
|
||||||
|
var
|
||||||
|
filesaver = this
|
||||||
|
, type = blob.type
|
||||||
|
, blob_changed = false
|
||||||
|
, object_url
|
||||||
|
, target_view
|
||||||
|
, get_object_url = function() {
|
||||||
|
var object_url = get_URL().createObjectURL(blob);
|
||||||
|
deletion_queue.push(object_url);
|
||||||
|
return object_url;
|
||||||
|
}
|
||||||
|
, dispatch_all = function() {
|
||||||
|
dispatch(filesaver, "writestart progress write writeend".split(" "));
|
||||||
|
}
|
||||||
|
// on any filesys errors revert to saving with object URLs
|
||||||
|
, fs_error = function() {
|
||||||
|
// don't create more object URLs than needed
|
||||||
|
if (blob_changed || !object_url) {
|
||||||
|
object_url = get_object_url(blob);
|
||||||
|
}
|
||||||
|
if (target_view) {
|
||||||
|
target_view.location.href = object_url;
|
||||||
|
} else {
|
||||||
|
window.open(object_url, "_blank");
|
||||||
|
}
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
dispatch_all();
|
||||||
|
}
|
||||||
|
, abortable = function(func) {
|
||||||
|
return function() {
|
||||||
|
if (filesaver.readyState !== filesaver.DONE) {
|
||||||
|
return func.apply(this, arguments);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
, create_if_not_found = {create: true, exclusive: false}
|
||||||
|
, slice
|
||||||
|
;
|
||||||
|
filesaver.readyState = filesaver.INIT;
|
||||||
|
if (!name) {
|
||||||
|
name = "download";
|
||||||
|
}
|
||||||
|
if (can_use_save_link) {
|
||||||
|
object_url = get_object_url(blob);
|
||||||
|
// FF for Android has a nasty garbage collection mechanism
|
||||||
|
// that turns all objects that are not pure javascript into 'deadObject'
|
||||||
|
// this means `doc` and `save_link` are unusable and need to be recreated
|
||||||
|
// `view` is usable though:
|
||||||
|
doc = view.document;
|
||||||
|
save_link = doc.createElementNS("http://www.w3.org/1999/xhtml", "a");
|
||||||
|
save_link.href = object_url;
|
||||||
|
save_link.download = name;
|
||||||
|
var event = doc.createEvent("MouseEvents");
|
||||||
|
event.initMouseEvent(
|
||||||
|
"click", true, false, view, 0, 0, 0, 0, 0
|
||||||
|
, false, false, false, false, 0, null
|
||||||
|
);
|
||||||
|
save_link.dispatchEvent(event);
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
dispatch_all();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Object and web filesystem URLs have a problem saving in Google Chrome when
|
||||||
|
// viewed in a tab, so I force save with application/octet-stream
|
||||||
|
// http://code.google.com/p/chromium/issues/detail?id=91158
|
||||||
|
if (view.chrome && type && type !== force_saveable_type) {
|
||||||
|
slice = blob.slice || blob.webkitSlice;
|
||||||
|
blob = slice.call(blob, 0, blob.size, force_saveable_type);
|
||||||
|
blob_changed = true;
|
||||||
|
}
|
||||||
|
// Since I can't be sure that the guessed media type will trigger a download
|
||||||
|
// in WebKit, I append .download to the filename.
|
||||||
|
// https://bugs.webkit.org/show_bug.cgi?id=65440
|
||||||
|
if (webkit_req_fs && name !== "download") {
|
||||||
|
name += ".download";
|
||||||
|
}
|
||||||
|
if (type === force_saveable_type || webkit_req_fs) {
|
||||||
|
target_view = view;
|
||||||
|
}
|
||||||
|
if (!req_fs) {
|
||||||
|
fs_error();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
fs_min_size += blob.size;
|
||||||
|
req_fs(view.TEMPORARY, fs_min_size, abortable(function(fs) {
|
||||||
|
fs.root.getDirectory("saved", create_if_not_found, abortable(function(dir) {
|
||||||
|
var save = function() {
|
||||||
|
dir.getFile(name, create_if_not_found, abortable(function(file) {
|
||||||
|
file.createWriter(abortable(function(writer) {
|
||||||
|
writer.onwriteend = function(event) {
|
||||||
|
target_view.location.href = file.toURL();
|
||||||
|
deletion_queue.push(file);
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
dispatch(filesaver, "writeend", event);
|
||||||
|
};
|
||||||
|
writer.onerror = function() {
|
||||||
|
var error = writer.error;
|
||||||
|
if (error.code !== error.ABORT_ERR) {
|
||||||
|
fs_error();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
"writestart progress write abort".split(" ").forEach(function(event) {
|
||||||
|
writer["on" + event] = filesaver["on" + event];
|
||||||
|
});
|
||||||
|
writer.write(blob);
|
||||||
|
filesaver.abort = function() {
|
||||||
|
writer.abort();
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
};
|
||||||
|
filesaver.readyState = filesaver.WRITING;
|
||||||
|
}), fs_error);
|
||||||
|
}), fs_error);
|
||||||
|
};
|
||||||
|
dir.getFile(name, {create: false}, abortable(function(file) {
|
||||||
|
// delete file if it already exists
|
||||||
|
file.remove();
|
||||||
|
save();
|
||||||
|
}), abortable(function(ex) {
|
||||||
|
if (ex.code === ex.NOT_FOUND_ERR) {
|
||||||
|
save();
|
||||||
|
} else {
|
||||||
|
fs_error();
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
}), fs_error);
|
||||||
|
}), fs_error);
|
||||||
|
}
|
||||||
|
, FS_proto = FileSaver.prototype
|
||||||
|
, saveAs = function(blob, name) {
|
||||||
|
return new FileSaver(blob, name);
|
||||||
|
}
|
||||||
|
;
|
||||||
|
FS_proto.abort = function() {
|
||||||
|
var filesaver = this;
|
||||||
|
filesaver.readyState = filesaver.DONE;
|
||||||
|
dispatch(filesaver, "abort");
|
||||||
|
};
|
||||||
|
FS_proto.readyState = FS_proto.INIT = 0;
|
||||||
|
FS_proto.WRITING = 1;
|
||||||
|
FS_proto.DONE = 2;
|
||||||
|
|
||||||
|
FS_proto.error =
|
||||||
|
FS_proto.onwritestart =
|
||||||
|
FS_proto.onprogress =
|
||||||
|
FS_proto.onwrite =
|
||||||
|
FS_proto.onabort =
|
||||||
|
FS_proto.onerror =
|
||||||
|
FS_proto.onwriteend =
|
||||||
|
null;
|
||||||
|
|
||||||
|
view.addEventListener("unload", process_deletion_queue, false);
|
||||||
|
return saveAs;
|
||||||
|
}(this.self || this.window || this.content));
|
||||||
|
// `self` is undefined in Firefox for Android content script context
|
||||||
|
// while `this` is nsIContentFrameMessageManager
|
||||||
|
// with an attribute `content` that corresponds to the window
|
||||||
|
|
||||||
|
if (typeof module !== 'undefined') module.exports = saveAs;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
/*
|
/*
|
||||||
|
|
||||||
Holder - 2.1 - client side image placeholders
|
Holder - 2.2 - client side image placeholders
|
||||||
(c) 2012-2013 Ivan Malopinsky / http://imsky.co
|
(c) 2012-2013 Ivan Malopinsky / http://imsky.co
|
||||||
|
|
||||||
Provided under the MIT License.
|
Provided under the MIT License.
|
||||||
@@ -14,6 +14,8 @@ var Holder = Holder || {};
|
|||||||
var preempted = false,
|
var preempted = false,
|
||||||
fallback = false,
|
fallback = false,
|
||||||
canvas = document.createElement('canvas');
|
canvas = document.createElement('canvas');
|
||||||
|
var dpr = 1, bsr = 1;
|
||||||
|
var resizable_images = [];
|
||||||
|
|
||||||
if (!canvas.getContext) {
|
if (!canvas.getContext) {
|
||||||
fallback = true;
|
fallback = true;
|
||||||
@@ -27,8 +29,6 @@ if (!canvas.getContext) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var dpr = 1, bsr = 1;
|
|
||||||
|
|
||||||
if(!fallback){
|
if(!fallback){
|
||||||
dpr = window.devicePixelRatio || 1,
|
dpr = window.devicePixelRatio || 1,
|
||||||
bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
|
bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
|
||||||
@@ -36,181 +36,6 @@ if(!fallback){
|
|||||||
|
|
||||||
var ratio = dpr / bsr;
|
var ratio = dpr / bsr;
|
||||||
|
|
||||||
//getElementsByClassName polyfill
|
|
||||||
document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
|
|
||||||
|
|
||||||
//getComputedStyle polyfill
|
|
||||||
window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
|
|
||||||
|
|
||||||
//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
|
|
||||||
function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}
|
|
||||||
|
|
||||||
//https://gist.github.com/991057 by Jed Schmidt with modifications
|
|
||||||
function selector(a){
|
|
||||||
a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
|
|
||||||
var ret=[]; b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]); return ret;
|
|
||||||
}
|
|
||||||
|
|
||||||
//shallow object property extend
|
|
||||||
function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c}
|
|
||||||
|
|
||||||
//hasOwnProperty polyfill
|
|
||||||
if (!Object.prototype.hasOwnProperty)
|
|
||||||
/*jshint -W001, -W103 */
|
|
||||||
Object.prototype.hasOwnProperty = function(prop) {
|
|
||||||
var proto = this.__proto__ || this.constructor.prototype;
|
|
||||||
return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
|
|
||||||
}
|
|
||||||
/*jshint +W001, +W103 */
|
|
||||||
|
|
||||||
function text_size(width, height, template) {
|
|
||||||
height = parseInt(height, 10);
|
|
||||||
width = parseInt(width, 10);
|
|
||||||
var bigSide = Math.max(height, width)
|
|
||||||
var smallSide = Math.min(height, width)
|
|
||||||
var scale = 1 / 12;
|
|
||||||
var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
|
|
||||||
return {
|
|
||||||
height: Math.round(Math.max(template.size, newHeight))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw(ctx, dimensions, template, ratio, literal) {
|
|
||||||
var ts = text_size(dimensions.width, dimensions.height, template);
|
|
||||||
var text_height = ts.height;
|
|
||||||
var width = dimensions.width * ratio,
|
|
||||||
height = dimensions.height * ratio;
|
|
||||||
var font = template.font ? template.font : "sans-serif";
|
|
||||||
canvas.width = width;
|
|
||||||
canvas.height = height;
|
|
||||||
ctx.textAlign = "center";
|
|
||||||
ctx.textBaseline = "middle";
|
|
||||||
ctx.fillStyle = template.background;
|
|
||||||
ctx.fillRect(0, 0, width, height);
|
|
||||||
ctx.fillStyle = template.foreground;
|
|
||||||
ctx.font = "bold " + text_height + "px " + font;
|
|
||||||
var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
|
|
||||||
if (literal) {
|
|
||||||
text = template.literalText;
|
|
||||||
}
|
|
||||||
var text_width = ctx.measureText(text).width;
|
|
||||||
if (text_width / width >= 0.75) {
|
|
||||||
text_height = Math.floor(text_height * 0.75 * (width / text_width));
|
|
||||||
}
|
|
||||||
//Resetting font size if necessary
|
|
||||||
ctx.font = "bold " + (text_height * ratio) + "px " + font;
|
|
||||||
ctx.fillText(text, (width / 2), (height / 2), width);
|
|
||||||
return canvas.toDataURL("image/png");
|
|
||||||
}
|
|
||||||
|
|
||||||
function render(mode, el, holder, src) {
|
|
||||||
var dimensions = holder.dimensions,
|
|
||||||
theme = holder.theme,
|
|
||||||
text = holder.text ? decodeURIComponent(holder.text) : holder.text;
|
|
||||||
var dimensions_caption = dimensions.width + "x" + dimensions.height;
|
|
||||||
theme = (text ? extend(theme, {
|
|
||||||
text: text
|
|
||||||
}) : theme);
|
|
||||||
theme = (holder.font ? extend(theme, {
|
|
||||||
font: holder.font
|
|
||||||
}) : theme);
|
|
||||||
el.setAttribute("data-src", src);
|
|
||||||
theme.literalText = dimensions_caption;
|
|
||||||
holder.originalTheme = holder.theme;
|
|
||||||
holder.theme = theme;
|
|
||||||
|
|
||||||
if (mode == "image") {
|
|
||||||
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
|
||||||
if (fallback || !holder.auto) {
|
|
||||||
el.style.width = dimensions.width + "px";
|
|
||||||
el.style.height = dimensions.height + "px";
|
|
||||||
}
|
|
||||||
if (fallback) {
|
|
||||||
el.style.backgroundColor = theme.background;
|
|
||||||
} else {
|
|
||||||
el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
|
|
||||||
}
|
|
||||||
} else if (mode == "background") {
|
|
||||||
if (!fallback) {
|
|
||||||
el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")";
|
|
||||||
el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
|
|
||||||
}
|
|
||||||
} else if (mode == "fluid") {
|
|
||||||
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
|
||||||
if (dimensions.height.slice(-1) == "%") {
|
|
||||||
el.style.height = dimensions.height
|
|
||||||
} else {
|
|
||||||
el.style.height = dimensions.height + "px"
|
|
||||||
}
|
|
||||||
if (dimensions.width.slice(-1) == "%") {
|
|
||||||
el.style.width = dimensions.width
|
|
||||||
} else {
|
|
||||||
el.style.width = dimensions.width + "px"
|
|
||||||
}
|
|
||||||
if (el.style.display == "inline" || el.style.display === "") {
|
|
||||||
el.style.display = "block";
|
|
||||||
}
|
|
||||||
if (fallback) {
|
|
||||||
el.style.backgroundColor = theme.background;
|
|
||||||
} else {
|
|
||||||
el.holderData = holder;
|
|
||||||
fluid_images.push(el);
|
|
||||||
fluid_update(el);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function fluid_update(element) {
|
|
||||||
var images;
|
|
||||||
if (element.nodeType == null) {
|
|
||||||
images = fluid_images;
|
|
||||||
} else {
|
|
||||||
images = [element]
|
|
||||||
}
|
|
||||||
for (var i in images) {
|
|
||||||
var el = images[i]
|
|
||||||
if (el.holderData) {
|
|
||||||
var holder = el.holderData;
|
|
||||||
el.setAttribute("src", draw(ctx, {
|
|
||||||
height: el.clientHeight,
|
|
||||||
width: el.clientWidth
|
|
||||||
}, holder.theme, ratio, !! holder.literal));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function parse_flags(flags, options) {
|
|
||||||
var ret = {
|
|
||||||
theme: settings.themes.gray
|
|
||||||
};
|
|
||||||
var render = false;
|
|
||||||
for (sl = flags.length, j = 0; j < sl; j++) {
|
|
||||||
var flag = flags[j];
|
|
||||||
if (app.flags.dimensions.match(flag)) {
|
|
||||||
render = true;
|
|
||||||
ret.dimensions = app.flags.dimensions.output(flag);
|
|
||||||
} else if (app.flags.fluid.match(flag)) {
|
|
||||||
render = true;
|
|
||||||
ret.dimensions = app.flags.fluid.output(flag);
|
|
||||||
ret.fluid = true;
|
|
||||||
} else if (app.flags.literal.match(flag)) {
|
|
||||||
ret.literal = true;
|
|
||||||
} else if (app.flags.colors.match(flag)) {
|
|
||||||
ret.theme = app.flags.colors.output(flag);
|
|
||||||
} else if (options.themes[flag]) {
|
|
||||||
//If a theme is specified, it will override custom colors
|
|
||||||
ret.theme = options.themes[flag];
|
|
||||||
} else if (app.flags.font.match(flag)) {
|
|
||||||
ret.font = app.flags.font.output(flag);
|
|
||||||
} else if (app.flags.auto.match(flag)) {
|
|
||||||
ret.auto = true;
|
|
||||||
} else if (app.flags.text.match(flag)) {
|
|
||||||
ret.text = app.flags.text.output(flag);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return render ? ret : false;
|
|
||||||
}
|
|
||||||
var fluid_images = [];
|
|
||||||
var settings = {
|
var settings = {
|
||||||
domain: "holder.js",
|
domain: "holder.js",
|
||||||
images: "img",
|
images: "img",
|
||||||
@@ -230,6 +55,21 @@ var settings = {
|
|||||||
background: "#434A52",
|
background: "#434A52",
|
||||||
foreground: "#C2F200",
|
foreground: "#C2F200",
|
||||||
size: 12
|
size: 12
|
||||||
|
},
|
||||||
|
"sky": {
|
||||||
|
background: "#0D8FDB",
|
||||||
|
foreground: "#fff",
|
||||||
|
size: 12
|
||||||
|
},
|
||||||
|
"vine": {
|
||||||
|
background: "#39DBAC",
|
||||||
|
foreground: "#1E292C",
|
||||||
|
size: 12
|
||||||
|
},
|
||||||
|
"lava": {
|
||||||
|
background: "#F8591A",
|
||||||
|
foreground: "#1C2846",
|
||||||
|
size: 12
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
stylesheet: ""
|
stylesheet: ""
|
||||||
@@ -281,10 +121,264 @@ app.flags = {
|
|||||||
auto: {
|
auto: {
|
||||||
regex: /^auto$/
|
regex: /^auto$/
|
||||||
},
|
},
|
||||||
literal: {
|
textmode: {
|
||||||
regex: /^literal$/
|
regex: /textmode\:(.*)/,
|
||||||
|
output: function(val){
|
||||||
|
return this.regex.exec(val)[1];
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//getElementsByClassName polyfill
|
||||||
|
document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
|
||||||
|
|
||||||
|
//getComputedStyle polyfill
|
||||||
|
window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
|
||||||
|
|
||||||
|
//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
|
||||||
|
function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}
|
||||||
|
|
||||||
|
//https://gist.github.com/991057 by Jed Schmidt with modifications
|
||||||
|
function selector(a){
|
||||||
|
a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
|
||||||
|
var ret=[]; b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]); return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
//shallow object property extend
|
||||||
|
function extend(a,b){
|
||||||
|
var c={};
|
||||||
|
for(var i in a){
|
||||||
|
if(a.hasOwnProperty(i)){
|
||||||
|
c[i]=a[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for(var i in b){
|
||||||
|
if(b.hasOwnProperty(i)){
|
||||||
|
c[i]=b[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return c
|
||||||
|
}
|
||||||
|
|
||||||
|
//hasOwnProperty polyfill
|
||||||
|
if (!Object.prototype.hasOwnProperty)
|
||||||
|
/*jshint -W001, -W103 */
|
||||||
|
Object.prototype.hasOwnProperty = function(prop) {
|
||||||
|
var proto = this.__proto__ || this.constructor.prototype;
|
||||||
|
return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
|
||||||
|
}
|
||||||
|
/*jshint +W001, +W103 */
|
||||||
|
|
||||||
|
function text_size(width, height, template) {
|
||||||
|
height = parseInt(height, 10);
|
||||||
|
width = parseInt(width, 10);
|
||||||
|
var bigSide = Math.max(height, width)
|
||||||
|
var smallSide = Math.min(height, width)
|
||||||
|
var scale = 1 / 12;
|
||||||
|
var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
|
||||||
|
return {
|
||||||
|
height: Math.round(Math.max(template.size, newHeight))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(args) {
|
||||||
|
var ctx = args.ctx;
|
||||||
|
var dimensions = args.dimensions;
|
||||||
|
var template = args.template;
|
||||||
|
var ratio = args.ratio;
|
||||||
|
var holder = args.holder;
|
||||||
|
var literal = holder.textmode == "literal";
|
||||||
|
var exact = holder.textmode == "exact";
|
||||||
|
|
||||||
|
var ts = text_size(dimensions.width, dimensions.height, template);
|
||||||
|
var text_height = ts.height;
|
||||||
|
var width = dimensions.width * ratio,
|
||||||
|
height = dimensions.height * ratio;
|
||||||
|
var font = template.font ? template.font : "sans-serif";
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.textBaseline = "middle";
|
||||||
|
ctx.fillStyle = template.background;
|
||||||
|
ctx.fillRect(0, 0, width, height);
|
||||||
|
ctx.fillStyle = template.foreground;
|
||||||
|
ctx.font = "bold " + text_height + "px " + font;
|
||||||
|
var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
|
||||||
|
if (literal) {
|
||||||
|
var dimensions = holder.dimensions;
|
||||||
|
text = dimensions.width + "x" + dimensions.height;
|
||||||
|
}
|
||||||
|
else if(exact && holder.exact_dimensions){
|
||||||
|
var dimensions = holder.exact_dimensions;
|
||||||
|
text = (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
|
||||||
|
}
|
||||||
|
var text_width = ctx.measureText(text).width;
|
||||||
|
if (text_width / width >= 0.75) {
|
||||||
|
text_height = Math.floor(text_height * 0.75 * (width / text_width));
|
||||||
|
}
|
||||||
|
//Resetting font size if necessary
|
||||||
|
ctx.font = "bold " + (text_height * ratio) + "px " + font;
|
||||||
|
ctx.fillText(text, (width / 2), (height / 2), width);
|
||||||
|
return canvas.toDataURL("image/png");
|
||||||
|
}
|
||||||
|
|
||||||
|
function render(mode, el, holder, src) {
|
||||||
|
|
||||||
|
var dimensions = holder.dimensions,
|
||||||
|
theme = holder.theme,
|
||||||
|
text = holder.text ? decodeURIComponent(holder.text) : holder.text;
|
||||||
|
var dimensions_caption = dimensions.width + "x" + dimensions.height;
|
||||||
|
theme = (text ? extend(theme, {
|
||||||
|
text: text
|
||||||
|
}) : theme);
|
||||||
|
theme = (holder.font ? extend(theme, {
|
||||||
|
font: holder.font
|
||||||
|
}) : theme);
|
||||||
|
el.setAttribute("data-src", src);
|
||||||
|
holder.theme = theme;
|
||||||
|
el.holder_data = holder;
|
||||||
|
|
||||||
|
if (mode == "image") {
|
||||||
|
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
||||||
|
if (fallback || !holder.auto) {
|
||||||
|
el.style.width = dimensions.width + "px";
|
||||||
|
el.style.height = dimensions.height + "px";
|
||||||
|
}
|
||||||
|
if (fallback) {
|
||||||
|
el.style.backgroundColor = theme.background;
|
||||||
|
} else {
|
||||||
|
el.setAttribute("src", draw({ctx: ctx, dimensions: dimensions, template: theme, ratio:ratio, holder: holder}));
|
||||||
|
|
||||||
|
if(holder.textmode && holder.textmode == "exact"){
|
||||||
|
resizable_images.push(el);
|
||||||
|
resizable_update(el);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
} else if (mode == "background") {
|
||||||
|
if (!fallback) {
|
||||||
|
el.style.backgroundImage = "url(" + draw({ctx:ctx, dimensions: dimensions, template: theme, ratio: ratio, holder: holder}) + ")";
|
||||||
|
el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
|
||||||
|
}
|
||||||
|
} else if (mode == "fluid") {
|
||||||
|
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
||||||
|
if (dimensions.height.slice(-1) == "%") {
|
||||||
|
el.style.height = dimensions.height
|
||||||
|
} else {
|
||||||
|
el.style.height = dimensions.height + "px"
|
||||||
|
}
|
||||||
|
if (dimensions.width.slice(-1) == "%") {
|
||||||
|
el.style.width = dimensions.width
|
||||||
|
} else {
|
||||||
|
el.style.width = dimensions.width + "px"
|
||||||
|
}
|
||||||
|
if (el.style.display == "inline" || el.style.display === "" || el.style.display == "none") {
|
||||||
|
el.style.display = "block";
|
||||||
|
}
|
||||||
|
if (fallback) {
|
||||||
|
el.style.backgroundColor = theme.background;
|
||||||
|
} else {
|
||||||
|
resizable_images.push(el);
|
||||||
|
resizable_update(el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dimension_check(el, callback) {
|
||||||
|
var dimensions = {
|
||||||
|
height: el.clientHeight,
|
||||||
|
width: el.clientWidth
|
||||||
|
};
|
||||||
|
if (!dimensions.height && !dimensions.width) {
|
||||||
|
if (el.hasAttribute("data-holder-invisible")) {
|
||||||
|
throw new Error("Holder: placeholder is not visible");
|
||||||
|
} else {
|
||||||
|
el.setAttribute("data-holder-invisible", true)
|
||||||
|
setTimeout(function () {
|
||||||
|
callback.call(this, el)
|
||||||
|
}, 1)
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
el.removeAttribute("data-holder-invisible")
|
||||||
|
}
|
||||||
|
return dimensions;
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizable_update(element) {
|
||||||
|
var images;
|
||||||
|
if (element.nodeType == null) {
|
||||||
|
images = resizable_images;
|
||||||
|
} else {
|
||||||
|
images = [element]
|
||||||
|
}
|
||||||
|
for (var i in images) {
|
||||||
|
if (!images.hasOwnProperty(i)) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
var el = images[i]
|
||||||
|
if (el.holder_data) {
|
||||||
|
var holder = el.holder_data;
|
||||||
|
var dimensions = dimension_check(el, resizable_update)
|
||||||
|
if(dimensions){
|
||||||
|
if(holder.fluid){
|
||||||
|
el.setAttribute("src", draw({
|
||||||
|
ctx: ctx,
|
||||||
|
dimensions: dimensions,
|
||||||
|
template: holder.theme,
|
||||||
|
ratio: ratio,
|
||||||
|
holder: holder
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
if(holder.textmode && holder.textmode == "exact"){
|
||||||
|
holder.exact_dimensions = dimensions;
|
||||||
|
el.setAttribute("src", draw({
|
||||||
|
ctx: ctx,
|
||||||
|
dimensions: holder.dimensions,
|
||||||
|
template: holder.theme,
|
||||||
|
ratio: ratio,
|
||||||
|
holder: holder
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function parse_flags(flags, options) {
|
||||||
|
var ret = {
|
||||||
|
theme: extend(settings.themes.gray, {})
|
||||||
|
};
|
||||||
|
var render = false;
|
||||||
|
for (sl = flags.length, j = 0; j < sl; j++) {
|
||||||
|
var flag = flags[j];
|
||||||
|
if (app.flags.dimensions.match(flag)) {
|
||||||
|
render = true;
|
||||||
|
ret.dimensions = app.flags.dimensions.output(flag);
|
||||||
|
} else if (app.flags.fluid.match(flag)) {
|
||||||
|
render = true;
|
||||||
|
ret.dimensions = app.flags.fluid.output(flag);
|
||||||
|
ret.fluid = true;
|
||||||
|
} else if (app.flags.textmode.match(flag)) {
|
||||||
|
ret.textmode = app.flags.textmode.output(flag)
|
||||||
|
} else if (app.flags.colors.match(flag)) {
|
||||||
|
ret.theme = app.flags.colors.output(flag);
|
||||||
|
} else if (options.themes[flag]) {
|
||||||
|
//If a theme is specified, it will override custom colors
|
||||||
|
if(options.themes.hasOwnProperty(flag)){
|
||||||
|
ret.theme = extend(options.themes[flag], {});
|
||||||
|
}
|
||||||
|
} else if (app.flags.font.match(flag)) {
|
||||||
|
ret.font = app.flags.font.output(flag);
|
||||||
|
} else if (app.flags.auto.match(flag)) {
|
||||||
|
ret.auto = true;
|
||||||
|
} else if (app.flags.text.match(flag)) {
|
||||||
|
ret.text = app.flags.text.output(flag);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return render ? ret : false;
|
||||||
|
}
|
||||||
|
|
||||||
for (var flag in app.flags) {
|
for (var flag in app.flags) {
|
||||||
if (!app.flags.hasOwnProperty(flag)) continue;
|
if (!app.flags.hasOwnProperty(flag)) continue;
|
||||||
app.flags[flag].match = function (val) {
|
app.flags[flag].match = function (val) {
|
||||||
@@ -307,6 +401,8 @@ app.add_image = function (src, el) {
|
|||||||
return app;
|
return app;
|
||||||
};
|
};
|
||||||
app.run = function (o) {
|
app.run = function (o) {
|
||||||
|
preempted = true;
|
||||||
|
|
||||||
var options = extend(settings, o),
|
var options = extend(settings, o),
|
||||||
images = [],
|
images = [],
|
||||||
imageNodes = [],
|
imageNodes = [],
|
||||||
@@ -318,6 +414,7 @@ app.run = function (o) {
|
|||||||
} else if (window.Node && options.images instanceof window.Node) {
|
} else if (window.Node && options.images instanceof window.Node) {
|
||||||
imageNodes = [options.images];
|
imageNodes = [options.images];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof (options.bgnodes) == "string") {
|
if (typeof (options.bgnodes) == "string") {
|
||||||
bgnodes = selector(options.bgnodes);
|
bgnodes = selector(options.bgnodes);
|
||||||
} else if (window.NodeList && options.elements instanceof window.NodeList) {
|
} else if (window.NodeList && options.elements instanceof window.NodeList) {
|
||||||
@@ -325,7 +422,6 @@ app.run = function (o) {
|
|||||||
} else if (window.Node && options.bgnodes instanceof window.Node) {
|
} else if (window.Node && options.bgnodes instanceof window.Node) {
|
||||||
bgnodes = [options.bgnodes];
|
bgnodes = [options.bgnodes];
|
||||||
}
|
}
|
||||||
preempted = true;
|
|
||||||
for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
|
for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
|
||||||
var holdercss = document.getElementById("holderjs-style");
|
var holdercss = document.getElementById("holderjs-style");
|
||||||
if (!holdercss) {
|
if (!holdercss) {
|
||||||
@@ -388,10 +484,10 @@ app.run = function (o) {
|
|||||||
};
|
};
|
||||||
contentLoaded(win, function () {
|
contentLoaded(win, function () {
|
||||||
if (window.addEventListener) {
|
if (window.addEventListener) {
|
||||||
window.addEventListener("resize", fluid_update, false);
|
window.addEventListener("resize", resizable_update, false);
|
||||||
window.addEventListener("orientationchange", fluid_update, false);
|
window.addEventListener("orientationchange", resizable_update, false);
|
||||||
} else {
|
} else {
|
||||||
window.attachEvent("onresize", fluid_update)
|
window.attachEvent("onresize", resizable_update)
|
||||||
}
|
}
|
||||||
preempted || app.run();
|
preempted || app.run();
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -16,7 +16,9 @@ Usage:
|
|||||||
base64zip = zip.generate();
|
base64zip = zip.generate();
|
||||||
|
|
||||||
**/
|
**/
|
||||||
"use strict";
|
// We use strict, but it should not be placed outside of a function because
|
||||||
|
// the environment is shared inside the browser.
|
||||||
|
// "use strict";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Representation a of zip file in js
|
* Representation a of zip file in js
|
||||||
@@ -93,8 +95,8 @@ JSZip.support = {
|
|||||||
catch(e) {}
|
catch(e) {}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var builder = new (window.BlobBuilder || window.WebKitBlobBuilder ||
|
var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
|
||||||
window.MozBlobBuilder || window.MSBlobBuilder)();
|
var builder = new BlobBuilder();
|
||||||
builder.append(buffer);
|
builder.append(buffer);
|
||||||
return builder.getBlob('application/zip').size === 0;
|
return builder.getBlob('application/zip').size === 0;
|
||||||
}
|
}
|
||||||
@@ -161,7 +163,7 @@ JSZip.prototype = (function () {
|
|||||||
return file.asBinary();
|
return file.asBinary();
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Transform this._data into a string.
|
* Transform this._data into a string.
|
||||||
@@ -287,9 +289,11 @@ JSZip.prototype = (function () {
|
|||||||
*/
|
*/
|
||||||
var prepareFileAttrs = function (o) {
|
var prepareFileAttrs = function (o) {
|
||||||
o = o || {};
|
o = o || {};
|
||||||
|
/*jshint -W041 */
|
||||||
if (o.base64 === true && o.binary == null) {
|
if (o.base64 === true && o.binary == null) {
|
||||||
o.binary = true;
|
o.binary = true;
|
||||||
}
|
}
|
||||||
|
/*jshint +W041 */
|
||||||
o = extend(o, JSZip.defaults);
|
o = extend(o, JSZip.defaults);
|
||||||
o.date = o.date || new Date();
|
o.date = o.date || new Date();
|
||||||
if (o.compression !== null) o.compression = o.compression.toUpperCase();
|
if (o.compression !== null) o.compression = o.compression.toUpperCase();
|
||||||
@@ -341,7 +345,9 @@ JSZip.prototype = (function () {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.files[name] = new ZipObject(name, data, o);
|
var object = new ZipObject(name, data, o);
|
||||||
|
this.files[name] = object;
|
||||||
|
return object;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@@ -399,7 +405,7 @@ JSZip.prototype = (function () {
|
|||||||
} else if (file._data.compressionMethod === compression.magic) {
|
} else if (file._data.compressionMethod === compression.magic) {
|
||||||
result.compressedContent = file._data.getCompressedContent();
|
result.compressedContent = file._data.getCompressedContent();
|
||||||
} else {
|
} else {
|
||||||
content = file._data.getContent()
|
content = file._data.getContent();
|
||||||
// need to decompress / recompress
|
// need to decompress / recompress
|
||||||
result.compressedContent = compression.compress(JSZip.utils.transformTo(compression.compressInputType, content));
|
result.compressedContent = compression.compress(JSZip.utils.transformTo(compression.compressInputType, content));
|
||||||
}
|
}
|
||||||
@@ -756,8 +762,9 @@ JSZip.prototype = (function () {
|
|||||||
case "nodebuffer" :
|
case "nodebuffer" :
|
||||||
writer = new Uint8ArrayWriter(localDirLength + centralDirLength + dirEnd.length);
|
writer = new Uint8ArrayWriter(localDirLength + centralDirLength + dirEnd.length);
|
||||||
break;
|
break;
|
||||||
case "base64" :
|
// case "base64" :
|
||||||
default : // case "string" :
|
// case "string" :
|
||||||
|
default :
|
||||||
writer = new StringWriter(localDirLength + centralDirLength + dirEnd.length);
|
writer = new StringWriter(localDirLength + centralDirLength + dirEnd.length);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@@ -1066,8 +1073,8 @@ JSZip.compressions = {
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// deprecated, browser only, old way
|
// deprecated, browser only, old way
|
||||||
var builder = new (window.BlobBuilder || window.WebKitBlobBuilder ||
|
var BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
|
||||||
window.MozBlobBuilder || window.MSBlobBuilder)();
|
var builder = new BlobBuilder();
|
||||||
builder.append(buffer);
|
builder.append(buffer);
|
||||||
return builder.getBlob('application/zip');
|
return builder.getBlob('application/zip');
|
||||||
}
|
}
|
||||||
@@ -1095,7 +1102,7 @@ JSZip.compressions = {
|
|||||||
*/
|
*/
|
||||||
function identity(input) {
|
function identity(input) {
|
||||||
return input;
|
return input;
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fill in an array with a string.
|
* Fill in an array with a string.
|
||||||
@@ -1108,7 +1115,7 @@ JSZip.compressions = {
|
|||||||
array[i] = str.charCodeAt(i) & 0xFF;
|
array[i] = str.charCodeAt(i) & 0xFF;
|
||||||
}
|
}
|
||||||
return array;
|
return array;
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Transform an array-like object to a string.
|
* Transform an array-like object to a string.
|
||||||
@@ -1165,7 +1172,7 @@ JSZip.compressions = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
return result.join("");
|
return result.join("");
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Copy the data from an array-like to an other array-like.
|
* Copy the data from an array-like to an other array-like.
|
||||||
@@ -1178,7 +1185,7 @@ JSZip.compressions = {
|
|||||||
arrayTo[i] = arrayFrom[i];
|
arrayTo[i] = arrayFrom[i];
|
||||||
}
|
}
|
||||||
return arrayTo;
|
return arrayTo;
|
||||||
};
|
}
|
||||||
|
|
||||||
// a matrix containing functions to transform everything into everything.
|
// a matrix containing functions to transform everything into everything.
|
||||||
var transform = {};
|
var transform = {};
|
||||||
|
|||||||
@@ -0,0 +1,168 @@
|
|||||||
|
/*
|
||||||
|
* Globals
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: Georgia, "Times New Roman", Times, serif;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, .h1,
|
||||||
|
h2, .h2,
|
||||||
|
h3, .h3,
|
||||||
|
h4, .h4,
|
||||||
|
h5, .h5,
|
||||||
|
h6, .h6 {
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #333;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Override Bootstrap's default container.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.container {
|
||||||
|
width: 970px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Masthead for nav
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-masthead {
|
||||||
|
background-color: #428bca;
|
||||||
|
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nav links */
|
||||||
|
.blog-nav {
|
||||||
|
|
||||||
|
}
|
||||||
|
.blog-nav-item {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #cdddeb;
|
||||||
|
}
|
||||||
|
.blog-nav-item:hover,
|
||||||
|
.blog-nav-item:focus {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active state gets a caret at the bottom */
|
||||||
|
.blog-nav .active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.blog-nav .active:after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
display: block;
|
||||||
|
content: " ";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
margin-left: -5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-right: 5px solid transparent;
|
||||||
|
border-left: 5px solid transparent;
|
||||||
|
border-bottom: 5px solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Blog name and description
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-header {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.blog-title {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 60px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.blog-description {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Main column and sidebar layout
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-main {
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar modules for boxing content */
|
||||||
|
.sidebar-module {
|
||||||
|
padding: 15px;
|
||||||
|
margin: 0 -15px 15px;
|
||||||
|
}
|
||||||
|
.sidebar-module-inset {
|
||||||
|
padding: 15px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.sidebar-module-inset p:last-child,
|
||||||
|
.sidebar-module-inset ul:last-child,
|
||||||
|
.sidebar-module-inset ol:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Pagination */
|
||||||
|
.pager {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.pager > li > a {
|
||||||
|
width: 140px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Blog posts
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-post {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
.blog-post-title {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
.blog-post-meta {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Footer
|
||||||
|
*/
|
||||||
|
|
||||||
|
.blog-footer {
|
||||||
|
padding: 40px 0;
|
||||||
|
color: #999;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
border-top: 1px solid #e5e5e5;
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,171 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
|
||||||
|
|
||||||
|
<title>Blog Template for Bootstrap</title>
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="blog.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Just for debugging purposes. Don't actually copy this line! -->
|
||||||
|
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||||
|
|
||||||
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||||
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="blog-masthead">
|
||||||
|
<div class="container">
|
||||||
|
<nav class="blog-nav">
|
||||||
|
<a class="blog-nav-item active" href="#">Home</a>
|
||||||
|
<a class="blog-nav-item" href="#">New features</a>
|
||||||
|
<a class="blog-nav-item" href="#">Press</a>
|
||||||
|
<a class="blog-nav-item" href="#">New hires</a>
|
||||||
|
<a class="blog-nav-item" href="#">About</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="blog-header">
|
||||||
|
<h1 class="blog-title">The Bootstrap Blog</h1>
|
||||||
|
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<div class="col-sm-8 blog-main">
|
||||||
|
|
||||||
|
<div class="blog-post">
|
||||||
|
<h2 class="blog-post-title">Sample blog post</h2>
|
||||||
|
<p class="blog-post-meta">December 1, 2013 by <a href="#">Mark</a></p>
|
||||||
|
|
||||||
|
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
|
||||||
|
<hr>
|
||||||
|
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||||
|
<blockquote>
|
||||||
|
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||||
|
<h2>Heading</h2>
|
||||||
|
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||||
|
<h3>Sub-heading</h3>
|
||||||
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||||
|
<pre><code>Example code block</code></pre>
|
||||||
|
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
|
||||||
|
<h3>Sub-heading</h3>
|
||||||
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
||||||
|
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
||||||
|
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
||||||
|
<ol>
|
||||||
|
<li>Vestibulum id ligula porta felis euismod semper.</li>
|
||||||
|
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
|
||||||
|
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
|
||||||
|
</ol>
|
||||||
|
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
|
||||||
|
</div><!-- /.blog-post -->
|
||||||
|
|
||||||
|
<div class="blog-post">
|
||||||
|
<h2 class="blog-post-title">Another blog post</h2>
|
||||||
|
<p class="blog-post-meta">November 23, 2013 by <a href="#">Jacob</a></p>
|
||||||
|
|
||||||
|
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||||
|
<blockquote>
|
||||||
|
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||||
|
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||||
|
</div><!-- /.blog-post -->
|
||||||
|
|
||||||
|
<div class="blog-post">
|
||||||
|
<h2 class="blog-post-title">New feature</h2>
|
||||||
|
<p class="blog-post-meta">November 14, 2013 by <a href="#">Chris</a></p>
|
||||||
|
|
||||||
|
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
||||||
|
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
||||||
|
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
||||||
|
</ul>
|
||||||
|
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||||
|
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
||||||
|
</div><!-- /.blog-post -->
|
||||||
|
|
||||||
|
<ul class="pager">
|
||||||
|
<li><a href="#">Previous</a></li>
|
||||||
|
<li><a href="#">Next</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div><!-- /.blog-main -->
|
||||||
|
|
||||||
|
<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
|
||||||
|
<div class="sidebar-module sidebar-module-inset">
|
||||||
|
<h4>About</h4>
|
||||||
|
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-module">
|
||||||
|
<h4>Archives</h4>
|
||||||
|
<ol class="list-unstyled">
|
||||||
|
<li><a href="#">December 2013</a></li>
|
||||||
|
<li><a href="#">November 2013</a></li>
|
||||||
|
<li><a href="#">October 2013</a></li>
|
||||||
|
<li><a href="#">September 2013</a></li>
|
||||||
|
<li><a href="#">August 2013</a></li>
|
||||||
|
<li><a href="#">July 2013</a></li>
|
||||||
|
<li><a href="#">June 2013</a></li>
|
||||||
|
<li><a href="#">May 2013</a></li>
|
||||||
|
<li><a href="#">April 2013</a></li>
|
||||||
|
<li><a href="#">March 2013</a></li>
|
||||||
|
<li><a href="#">February 2013</a></li>
|
||||||
|
<li><a href="#">January 2013</a></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="sidebar-module">
|
||||||
|
<h4>Elsewhere</h4>
|
||||||
|
<ol class="list-unstyled">
|
||||||
|
<li><a href="#">GitHub</a></li>
|
||||||
|
<li><a href="#">Twitter</a></li>
|
||||||
|
<li><a href="#">Facebook</a></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div><!-- /.blog-sidebar -->
|
||||||
|
|
||||||
|
</div><!-- /.row -->
|
||||||
|
|
||||||
|
</div><!-- /.container -->
|
||||||
|
|
||||||
|
<div class="blog-footer">
|
||||||
|
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||||
|
<p>
|
||||||
|
<a href="#">Back to top</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript
|
||||||
|
================================================== -->
|
||||||
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
|
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||||
|
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="../../docs-assets/js/holder.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,160 @@
|
|||||||
|
/*
|
||||||
|
* Globals
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a,
|
||||||
|
a:focus,
|
||||||
|
a:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom default button */
|
||||||
|
.btn-default,
|
||||||
|
.btn-default:hover,
|
||||||
|
.btn-default:focus {
|
||||||
|
color: #333;
|
||||||
|
text-shadow: none; /* Prevent inheritence from `body` */
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Base structure
|
||||||
|
*/
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,.5);
|
||||||
|
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Extra markup and styles for table-esque vertical and horizontal centering */
|
||||||
|
.site-wrapper {
|
||||||
|
display: table;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
.site-wrapper-inner {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.cover-container {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Padding for spacing */
|
||||||
|
.inner {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Header
|
||||||
|
*/
|
||||||
|
.masthead-brand {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.masthead-nav > li {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.masthead-nav > li + li {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.masthead-nav > li > a {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff; /* IE8 proofing */
|
||||||
|
color: rgba(255,255,255,.75);
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
}
|
||||||
|
.masthead-nav > li > a:hover,
|
||||||
|
.masthead-nav > li > a:focus {
|
||||||
|
background-color: transparent;
|
||||||
|
border-bottom-color: rgba(255,255,255,.25);
|
||||||
|
}
|
||||||
|
.masthead-nav > .active > a,
|
||||||
|
.masthead-nav > .active > a:hover,
|
||||||
|
.masthead-nav > .active > a:focus {
|
||||||
|
color: #fff;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.masthead-brand {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.masthead-nav {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Cover
|
||||||
|
*/
|
||||||
|
|
||||||
|
.cover {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.cover .btn-lg {
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Footer
|
||||||
|
*/
|
||||||
|
|
||||||
|
.mastfoot {
|
||||||
|
color: #999; /* IE8 proofing */
|
||||||
|
color: rgba(255,255,255,.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Affix and center
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
/* Pull out the header and footer */
|
||||||
|
.masthead {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.mastfoot {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
/* Start the vertical centering */
|
||||||
|
.site-wrapper-inner {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
/* Handle the widths */
|
||||||
|
.masthead,
|
||||||
|
.mastfoot,
|
||||||
|
.cover-container {
|
||||||
|
width: 100%; /* Must be percentage or pixels for horizontal alignment */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.masthead,
|
||||||
|
.mastfoot,
|
||||||
|
.cover-container {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
|
||||||
|
|
||||||
|
<title>Cover Template for Bootstrap</title>
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="cover.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Just for debugging purposes. Don't actually copy this line! -->
|
||||||
|
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||||
|
|
||||||
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||||
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="site-wrapper">
|
||||||
|
|
||||||
|
<div class="site-wrapper-inner">
|
||||||
|
|
||||||
|
<div class="cover-container">
|
||||||
|
|
||||||
|
<div class="masthead clearfix">
|
||||||
|
<div class="inner">
|
||||||
|
<h3 class="masthead-brand">Cover</h3>
|
||||||
|
<ul class="nav masthead-nav">
|
||||||
|
<li class="active"><a href="#">Home</a></li>
|
||||||
|
<li><a href="#">Features</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="inner cover">
|
||||||
|
<h1 class="cover-heading">Cover your page.</h1>
|
||||||
|
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
|
||||||
|
<p class="lead">
|
||||||
|
<a href="#" class="btn btn-lg btn-default">Learn more</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mastfoot">
|
||||||
|
<div class="inner">
|
||||||
|
<p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript
|
||||||
|
================================================== -->
|
||||||
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
|
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||||
|
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="../../docs-assets/js/holder.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,93 @@
|
|||||||
|
/*
|
||||||
|
* Base structure
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Move down content because we have a fixed navbar that is 50px tall */
|
||||||
|
body {
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Global add-ons
|
||||||
|
*/
|
||||||
|
|
||||||
|
.sub-header {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Sidebar
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Hide for mobile, show later */
|
||||||
|
.sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.sidebar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
display: block;
|
||||||
|
padding: 70px 20px 20px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-right: 1px solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar navigation */
|
||||||
|
.nav-sidebar {
|
||||||
|
margin-left: -20px;
|
||||||
|
margin-right: -21px; /* 20px padding + 1px border */
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.nav-sidebar > li > a {
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
.nav-sidebar > .active > a {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #428bca;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Main content
|
||||||
|
*/
|
||||||
|
|
||||||
|
.main {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.main {
|
||||||
|
padding-left: 40px;
|
||||||
|
pading-right: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main .page-header {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Placeholder dashboard ideas
|
||||||
|
*/
|
||||||
|
|
||||||
|
.placeholders {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.placeholders h4 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.placeholder {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.placeholder img {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="">
|
||||||
|
<meta name="author" content="">
|
||||||
|
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
|
||||||
|
|
||||||
|
<title>Dashboard Template for Bootstrap</title>
|
||||||
|
|
||||||
|
<!-- Bootstrap core CSS -->
|
||||||
|
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="dashboard.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<!-- Just for debugging purposes. Don't actually copy this line! -->
|
||||||
|
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
|
||||||
|
|
||||||
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||||
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="#">Project name</a>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-collapse collapse">
|
||||||
|
<ul class="nav navbar-nav navbar-right">
|
||||||
|
<li><a href="#">Dashboard</a></li>
|
||||||
|
<li><a href="#">Settings</a></li>
|
||||||
|
<li><a href="#">Profile</a></li>
|
||||||
|
<li><a href="#">Help</a></li>
|
||||||
|
</ul>
|
||||||
|
<form class="navbar-form navbar-right">
|
||||||
|
<input type="text" class="form-control" placeholder="Search...">
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-3 sidebar">
|
||||||
|
<ul class="nav nav-sidebar">
|
||||||
|
<li class="active"><a href="#">Overview</a></li>
|
||||||
|
<li><a href="#">Reports</a></li>
|
||||||
|
<li><a href="#">Analytics</a></li>
|
||||||
|
<li><a href="#">Export</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="nav nav-sidebar">
|
||||||
|
<li><a href="">Nav item</a></li>
|
||||||
|
<li><a href="">Nav item again</a></li>
|
||||||
|
<li><a href="">One more nav</a></li>
|
||||||
|
<li><a href="">Another nav item</a></li>
|
||||||
|
<li><a href="">More navigation</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="nav nav-sidebar">
|
||||||
|
<li><a href="">Nav item again</a></li>
|
||||||
|
<li><a href="">One more nav</a></li>
|
||||||
|
<li><a href="">Another nav item</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-9 col-sm-offset-3 main">
|
||||||
|
<h1 class="page-header">Dashboard</h1>
|
||||||
|
|
||||||
|
<div class="row placeholders">
|
||||||
|
<div class="col-xs-6 col-sm-3 placeholder">
|
||||||
|
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
|
||||||
|
<h4>Label</h4>
|
||||||
|
<span class="text-muted">Something else</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 placeholder">
|
||||||
|
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
|
||||||
|
<h4>Label</h4>
|
||||||
|
<span class="text-muted">Something else</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 placeholder">
|
||||||
|
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
|
||||||
|
<h4>Label</h4>
|
||||||
|
<span class="text-muted">Something else</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-sm-3 placeholder">
|
||||||
|
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
|
||||||
|
<h4>Label</h4>
|
||||||
|
<span class="text-muted">Something else</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2 class="sub-header">Section title</h2>
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>#</th>
|
||||||
|
<th>Header</th>
|
||||||
|
<th>Header</th>
|
||||||
|
<th>Header</th>
|
||||||
|
<th>Header</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>1,001</td>
|
||||||
|
<td>Lorem</td>
|
||||||
|
<td>ipsum</td>
|
||||||
|
<td>dolor</td>
|
||||||
|
<td>sit</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,002</td>
|
||||||
|
<td>amet</td>
|
||||||
|
<td>consectetur</td>
|
||||||
|
<td>adipiscing</td>
|
||||||
|
<td>elit</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,003</td>
|
||||||
|
<td>Integer</td>
|
||||||
|
<td>nec</td>
|
||||||
|
<td>odio</td>
|
||||||
|
<td>Praesent</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,003</td>
|
||||||
|
<td>libero</td>
|
||||||
|
<td>Sed</td>
|
||||||
|
<td>cursus</td>
|
||||||
|
<td>ante</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,004</td>
|
||||||
|
<td>dapibus</td>
|
||||||
|
<td>diam</td>
|
||||||
|
<td>Sed</td>
|
||||||
|
<td>nisi</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,005</td>
|
||||||
|
<td>Nulla</td>
|
||||||
|
<td>quis</td>
|
||||||
|
<td>sem</td>
|
||||||
|
<td>at</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,006</td>
|
||||||
|
<td>nibh</td>
|
||||||
|
<td>elementum</td>
|
||||||
|
<td>imperdiet</td>
|
||||||
|
<td>Duis</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,007</td>
|
||||||
|
<td>sagittis</td>
|
||||||
|
<td>ipsum</td>
|
||||||
|
<td>Praesent</td>
|
||||||
|
<td>mauris</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,008</td>
|
||||||
|
<td>Fusce</td>
|
||||||
|
<td>nec</td>
|
||||||
|
<td>tellus</td>
|
||||||
|
<td>sed</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,009</td>
|
||||||
|
<td>augue</td>
|
||||||
|
<td>semper</td>
|
||||||
|
<td>porta</td>
|
||||||
|
<td>Mauris</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,010</td>
|
||||||
|
<td>massa</td>
|
||||||
|
<td>Vestibulum</td>
|
||||||
|
<td>lacinia</td>
|
||||||
|
<td>arcu</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,011</td>
|
||||||
|
<td>eget</td>
|
||||||
|
<td>nulla</td>
|
||||||
|
<td>Class</td>
|
||||||
|
<td>aptent</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,012</td>
|
||||||
|
<td>taciti</td>
|
||||||
|
<td>sociosqu</td>
|
||||||
|
<td>ad</td>
|
||||||
|
<td>litora</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,013</td>
|
||||||
|
<td>torquent</td>
|
||||||
|
<td>per</td>
|
||||||
|
<td>conubia</td>
|
||||||
|
<td>nostra</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,014</td>
|
||||||
|
<td>per</td>
|
||||||
|
<td>inceptos</td>
|
||||||
|
<td>himenaeos</td>
|
||||||
|
<td>Curabitur</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>1,015</td>
|
||||||
|
<td>sodales</td>
|
||||||
|
<td>ligula</td>
|
||||||
|
<td>in</td>
|
||||||
|
<td>libero</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bootstrap core JavaScript
|
||||||
|
================================================== -->
|
||||||
|
<!-- Placed at the end of the document so the pages load faster -->
|
||||||
|
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
||||||
|
<script src="../../dist/js/bootstrap.min.js"></script>
|
||||||
|
<script src="../../docs-assets/js/holder.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 120 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 103 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 84 KiB |
@@ -17,7 +17,7 @@ base_url: "../"
|
|||||||
|
|
||||||
<h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
|
<h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
|
||||||
<p>The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.</p>
|
<p>The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.</p>
|
||||||
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download precompiled Bootstrap</a></p>
|
<p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download Bootstrap</a></p>
|
||||||
|
|
||||||
<h3 id="download-additional">Additional downloads</h3>
|
<h3 id="download-additional">Additional downloads</h3>
|
||||||
<div class="bs-docs-dl-options">
|
<div class="bs-docs-dl-options">
|
||||||
@@ -261,6 +261,31 @@ bootstrap/
|
|||||||
<h4>Carousel</h4>
|
<h4>Carousel</h4>
|
||||||
<p>Customize the navbar and carousel, then add some new components.</p>
|
<p>Customize the navbar and carousel, then add some new components.</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-4">
|
||||||
|
<a class="thumbnail" href="../examples/cover/">
|
||||||
|
<img src="../examples/screenshots/cover.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
<h4>Cover</h4>
|
||||||
|
<p>A one-page template for building simple and beautiful home pages.</p>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix visible-xs"></div>
|
||||||
|
|
||||||
|
<div class="col-xs-6 col-md-4">
|
||||||
|
<a class="thumbnail" href="../examples/dashboard/">
|
||||||
|
<img src="../examples/screenshots/dashboard.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
<h4>Dashboard</h4>
|
||||||
|
<p>Basic structure for a admin dashboard with fixed sidebar and navbar.</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6 col-md-4">
|
||||||
|
<a class="thumbnail" href="../examples/blog/">
|
||||||
|
<img src="../examples/screenshots/blog.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
<h4>Blog</h4>
|
||||||
|
<p>Simple two-column blog layout with custom navigation, header, and type.</p>
|
||||||
|
</div>
|
||||||
|
<div class="clearfix visible-xs"></div>
|
||||||
|
|
||||||
<div class="col-xs-6 col-md-4">
|
<div class="col-xs-6 col-md-4">
|
||||||
<a class="thumbnail" href="../examples/non-responsive/">
|
<a class="thumbnail" href="../examples/non-responsive/">
|
||||||
<img src="../examples/screenshots/non-responsive.jpg" alt="">
|
<img src="../examples/screenshots/non-responsive.jpg" alt="">
|
||||||
@@ -268,8 +293,6 @@ bootstrap/
|
|||||||
<h4>Non-responsive Bootstrap</h4>
|
<h4>Non-responsive Bootstrap</h4>
|
||||||
<p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
|
<p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="clearfix visible-xs"></div>
|
|
||||||
|
|
||||||
<div class="col-xs-6 col-md-4">
|
<div class="col-xs-6 col-md-4">
|
||||||
<a class="thumbnail" href="../examples/theme/">
|
<a class="thumbnail" href="../examples/theme/">
|
||||||
<img src="../examples/screenshots/theme.jpg" alt="">
|
<img src="../examples/screenshots/theme.jpg" alt="">
|
||||||
@@ -456,6 +479,14 @@ bootstrap/
|
|||||||
<td><code>.muted</code></td>
|
<td><code>.muted</code></td>
|
||||||
<td><code>.text-muted</code></td>
|
<td><code>.text-muted</code></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.label</code></td>
|
||||||
|
<td><code>.label .label-default</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><code>.label-important</code></td>
|
||||||
|
<td><code>.label-danger</code></td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>.text-error</code></td>
|
<td><code>.text-error</code></td>
|
||||||
<td><code>.text-danger</code></td>
|
<td><code>.text-danger</code></td>
|
||||||
@@ -679,6 +710,16 @@ bootstrap/
|
|||||||
<td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
|
<td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
|
||||||
<td class="text-muted">N/A</td>
|
<td class="text-muted">N/A</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Pill-based tabbable area</td>
|
||||||
|
<td><code>.pill-content</code></td>
|
||||||
|
<td><code>.tab-content</code></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Pill-based tabbable area pane</td>
|
||||||
|
<td><code>.pill-pane</code></td>
|
||||||
|
<td><code>.tab-pane</code></td>
|
||||||
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Nav lists</td>
|
<td>Nav lists</td>
|
||||||
<td><code>.nav-list</code> <code>.nav-header</code></td>
|
<td><code>.nav-list</code> <code>.nav-header</code></td>
|
||||||
@@ -712,11 +753,11 @@ bootstrap/
|
|||||||
================================================== -->
|
================================================== -->
|
||||||
<div class="bs-docs-section">
|
<div class="bs-docs-section">
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1 id="browsers">Browser support</h1>
|
<h1 id="support">Browser and device support</h1>
|
||||||
</div>
|
</div>
|
||||||
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
|
<p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>
|
||||||
|
|
||||||
<h3>Supported browsers</h3>
|
<h3 id="support-browsers">Supported browsers</h3>
|
||||||
<p>Specifically, we support the latest versions of the following:</p>
|
<p>Specifically, we support the latest versions of the following:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Chrome (Mac, Windows, iOS, and Android)</li>
|
<li>Chrome (Mac, Windows, iOS, and Android)</li>
|
||||||
@@ -727,7 +768,7 @@ bootstrap/
|
|||||||
</ul>
|
</ul>
|
||||||
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
|
<p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>
|
||||||
|
|
||||||
<h3>Internet Explorer 8 and 9</h3>
|
<h3 id="support-ie8-ie9">Internet Explorer 8 and 9</h3>
|
||||||
<p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
|
<p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
<table class="table table-bordered table-striped">
|
<table class="table table-bordered table-striped">
|
||||||
@@ -770,7 +811,7 @@ bootstrap/
|
|||||||
|
|
||||||
<p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
|
<p>Visit <a href="http://caniuse.com/">Can I use...</a> for details on browser support of CSS3 and HTML5 features.</p>
|
||||||
|
|
||||||
<h3>Internet Explorer 8 and Respond.js</h3>
|
<h3 id="support-ie8-respondjs">Internet Explorer 8 and Respond.js</h3>
|
||||||
<p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
|
<p>Beware of the following caveats when using Respond.js in your development and production environments for Internet Explorer 8.</p>
|
||||||
<h4 id="respond-js-x-domain">Respond.js and cross-domain CSS</h4>
|
<h4 id="respond-js-x-domain">Respond.js and cross-domain CSS</h4>
|
||||||
<p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
|
<p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
|
||||||
@@ -779,18 +820,19 @@ bootstrap/
|
|||||||
<h4 id="respond-import">Respond.js and <code>@import</code></h4>
|
<h4 id="respond-import">Respond.js and <code>@import</code></h4>
|
||||||
<p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
|
<p>Respond.js doesn't work with CSS that's referenced via <code>@import</code>. In particular, some Drupal configurations are known to use <code>@import</code>. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
|
||||||
|
|
||||||
<h3>Internet Explorer 8 and box-sizing</h3>
|
<h3 id="support-ie8-box-sizing">Internet Explorer 8 and box-sizing</h3>
|
||||||
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
|
<p>IE8 does not fully support <code>box-sizing: border-box;</code> when combined with <code>min-width</code>, <code>max-width</code>, <code>min-height</code>, or <code>max-height</code>. For that reason, as of v3.0.1, we no longer use <code>max-width</code> on <code>.container</code>s.</p>
|
||||||
|
|
||||||
<h3 id="ie-compat-modes">IE Compatibility modes</h3>
|
<h3 id="support-ie-compatibility-modes">IE Compatibility modes</h3>
|
||||||
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code><meta></code> tag in your pages:</p>
|
<p>Bootstrap is not supported in the old Internet Explorer compatibility modes. To be sure you're using the latest rendering mode for IE, consider including the appropriate <code><meta></code> tag in your pages:</p>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
<p>This tag is included in all docs pages and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
|
<p>Confirm the document mode by opening the debugging tools: press <kbd>F12</kbd> and check the "Document Mode".</p>
|
||||||
|
<p>This tag is included in all Bootstrap's documentation and examples to ensure the best rendering possible in each supported version of Internet Explorer.</p>
|
||||||
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
|
<p>See <a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge">this StackOverflow question</a> for more information.</p>
|
||||||
|
|
||||||
<h3 id="ie-10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
|
<h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
|
||||||
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
|
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
|
||||||
{% highlight css %}
|
{% highlight css %}
|
||||||
@-ms-viewport { width: device-width; }
|
@-ms-viewport { width: device-width; }
|
||||||
@@ -818,7 +860,7 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
|||||||
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
|
<p>For more information and usage guidelines, read <a href="http://timkadlec.com/2013/01/windows-phone-8-and-device-width/">Windows Phone 8 and Device-Width</a>.</p>
|
||||||
<p>As a heads up, we include this in the Bootstrap docs as an example.</p>
|
<p>As a heads up, we include this in the Bootstrap docs as an example.</p>
|
||||||
|
|
||||||
<h3 id="safari-percentages">Safari percent rounding</h3>
|
<h3 id="support-safari-percentages">Safari percent rounding</h3>
|
||||||
<p>As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
|
<p>As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some trouble with the number of decimal places used in our <code>.col-*-1</code> grid classes. So if you have 12 individual grid columns, you'll notice that they come up short compared to other rows of columns. We can't do much here (<a href="https://github.com/twbs/bootstrap/issues/9282">see #9282</a>) but you do have some options:</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
|
<li>Add <code>.pull-right</code> to your last grid column to get the hard-right alignment</li>
|
||||||
@@ -826,14 +868,30 @@ if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
|
|||||||
</ul>
|
</ul>
|
||||||
<p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
|
<p>We'll keep an eye on this though and update our code if we have an easy solution.</p>
|
||||||
|
|
||||||
<h3 id="mobile-modals">Modals and mobile devices</h3>
|
<h3 id="support-fixed-position-keyboards">Modals, navbars, and virtual keyboards</h3>
|
||||||
<h4>Overflow and scrolling</h4>
|
<h4>Overflow and scrolling</h4>
|
||||||
<p>Support for <code>overflow: hidden</code> on the <code><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code><body></code> content will begin to scroll.</p>
|
<p>Support for <code>overflow: hidden</code> on the <code><body></code> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <code><body></code> content will begin to scroll.</p>
|
||||||
<h4>Virtual keyboards</h4>
|
<h4>Virtual keyboards</h4>
|
||||||
<p>Also, note that if you're using inputs in your modal – iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
|
<p>Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to <code>position: absolute</code> or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.</p>
|
||||||
|
|
||||||
<h3 id="browser-zoom">Browser zooming</h3>
|
<h3 id="support-browser-zoom">Browser zooming</h3>
|
||||||
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
|
<p>Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.</p>
|
||||||
|
|
||||||
|
<h3 id="support-android-stock-browser">Android stock browser</h3>
|
||||||
|
<p>Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.</p>
|
||||||
|
<h4>Select menus</h4>
|
||||||
|
<p>On <code><select></code> elements, the Android stock browser will not display the side controls if there is a <code>border-radius</code> and/or <code>border</code> applied. Use the snippet of code below to remove the offending CSS and render the <code><select></code> as an unstyled element on the Android stock broswer. The useragent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.</p>
|
||||||
|
{% highlight html %}
|
||||||
|
<script>
|
||||||
|
var nua = navigator.userAgent;
|
||||||
|
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
|
||||||
|
if(is_android) {
|
||||||
|
$('select.form-control').removeClass('form-control').css('width', '100%');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
{% endhighlight %}
|
||||||
|
<p>Want to see an example? <a href="http://jsbin.com/OyaqoDO/2">Check out this JS Bin demo.</a></p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -30,7 +30,7 @@ base_url: "../"
|
|||||||
<h3 id="js-data-attrs">Data attributes</h3>
|
<h3 id="js-data-attrs">Data attributes</h3>
|
||||||
<p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
|
<p>You can use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
|
||||||
|
|
||||||
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
|
<p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:</p>
|
||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$(document).off('.data-api')
|
$(document).off('.data-api')
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
@@ -50,7 +50,7 @@ $('.btn.danger').button('toggle').addClass('fat')
|
|||||||
{% highlight js %}
|
{% highlight js %}
|
||||||
$('#myModal').modal() // initialized with defaults
|
$('#myModal').modal() // initialized with defaults
|
||||||
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
|
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
|
||||||
$('#myModal').modal('show') // initializes and invokes show immediately</p>
|
$('#myModal').modal('show') // initializes and invokes show immediately
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
|
<p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Constructor</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('[rel=popover]').data('popover')</code>.</p>
|
||||||
@@ -74,7 +74,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||||||
|
|
||||||
<div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
|
<div class="bs-callout bs-callout-warning" id="callout-third-party-libs">
|
||||||
<h4>Third-party libraries</h4>
|
<h4>Third-party libraries</h4>
|
||||||
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own. Ask on the <a href="http://groups.google.com/group/twitter-bootstrap">mailing list</a> if you need help.</p>
|
<p><strong>Bootstrap does not officially support third-party JavaScript libraries</strong> like Prototype or jQuery UI. Despite <code>.noConflict</code> and namespaced events, there may be compatibility problems that you need to fix on your own.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -110,7 +110,7 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||||||
</div>
|
</div>
|
||||||
<div class="bs-callout bs-callout-warning">
|
<div class="bs-callout bs-callout-warning">
|
||||||
<h4>Mobile device caveats</h4>
|
<h4>Mobile device caveats</h4>
|
||||||
<p>There are some caveats regarding using modals on mobile devices. <a href="{{ page.base_url }}getting-started#mobile-modals">See our browser support docs</a> for details.</p>
|
<p>There are some caveats regarding using modals on mobile devices. <a href="{{ page.base_url }}getting-started#fixed-position-keyboards">See our browser support docs</a> for details.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Static example</h3>
|
<h3>Static example</h3>
|
||||||
@@ -223,9 +223,9 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||||
<button type="button" class="btn btn-primary">Save changes</button>
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /.modal-content -->
|
</div>
|
||||||
</div><!-- /.modal-dialog -->
|
</div>
|
||||||
</div><!-- /.modal -->
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
|
||||||
@@ -235,6 +235,67 @@ $('#myModal').on('show.bs.modal', function (e) {
|
|||||||
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
|
<p>Additionally, you may give a description of your modal dialog with <code>aria-describedby</code> on <code>.modal</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h2 id="modals-sizes">Optional sizes</h2>
|
||||||
|
<p>Modals have two optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
|
||||||
|
<div class="bs-example">
|
||||||
|
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button>
|
||||||
|
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button>
|
||||||
|
</div>
|
||||||
|
{% highlight html %}
|
||||||
|
<!-- Large modal -->
|
||||||
|
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-lg">Large modal</button>
|
||||||
|
|
||||||
|
<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Small modal -->
|
||||||
|
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-modal-sm">Small modal</button>
|
||||||
|
|
||||||
|
<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-sm">
|
||||||
|
<div class="modal-content">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<!-- Modal content for the above example -->
|
||||||
|
<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-lg">
|
||||||
|
<div class="modal-content">
|
||||||
|
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
|
<h4 class="modal-title" id="myModalLabel">Large modal</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div><!-- /.modal-content -->
|
||||||
|
</div><!-- /.modal-dialog -->
|
||||||
|
</div><!-- /.modal -->
|
||||||
|
<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||||
|
<div class="modal-dialog modal-sm">
|
||||||
|
<div class="modal-content">
|
||||||
|
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||||
|
<h4 class="modal-title" id="myModalLabel">Small modal</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
...
|
||||||
|
</div>
|
||||||
|
</div><!-- /.modal-content -->
|
||||||
|
</div><!-- /.modal-dialog -->
|
||||||
|
</div><!-- /.modal -->
|
||||||
|
|
||||||
|
|
||||||
<h2 id="modals-usage">Usage</h2>
|
<h2 id="modals-usage">Usage</h2>
|
||||||
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.model-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
|
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <code>.model-open</code> to the <code><body></code> to override default scrolling behavior and generates a <code>.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
|
||||||
|
|
||||||
@@ -415,7 +476,7 @@ $('#myModal').on('hidden.bs.modal', function (e) {
|
|||||||
</nav> <!-- /navbar-example -->
|
</nav> <!-- /navbar-example -->
|
||||||
</div> <!-- /example -->
|
</div> <!-- /example -->
|
||||||
|
|
||||||
<h3>Within tabs</h3>
|
<h3>Within pills</h3>
|
||||||
<div class="bs-example">
|
<div class="bs-example">
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<li class="active"><a href="#">Regular link</a></li>
|
<li class="active"><a href="#">Regular link</a></li>
|
||||||
@@ -449,7 +510,7 @@ $('#myModal').on('hidden.bs.modal', function (e) {
|
|||||||
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul> <!-- /tabs -->
|
</ul> <!-- /pills -->
|
||||||
</div> <!-- /example -->
|
</div> <!-- /example -->
|
||||||
|
|
||||||
|
|
||||||
@@ -843,6 +904,15 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|||||||
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /example -->
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
<div class="bs-callout bs-callout-danger">
|
||||||
<h4>Opt-in functionality</h4>
|
<h4>Opt-in functionality</h4>
|
||||||
@@ -865,9 +935,17 @@ $('#example').tooltip(options)
|
|||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h3>Markup</h3>
|
<h3>Markup</h3>
|
||||||
<p>The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
|
<p>The required markup for a tooltip is only a <code>data</code> attribute and <code>title</code> on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to <code>top</code> by the plugin).</p>
|
||||||
|
<div class="bs-callout bs-callout-warning">
|
||||||
|
<h4>Multiple-line links</h4>
|
||||||
|
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
|
||||||
|
</div>
|
||||||
{% highlight html linenos %}
|
{% highlight html linenos %}
|
||||||
<div class="tooltip">
|
<!-- HTML to write -->
|
||||||
|
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
|
||||||
|
|
||||||
|
<!-- Generated markup by the plugin -->
|
||||||
|
<div class="tooltip top">
|
||||||
<div class="tooltip-inner">
|
<div class="tooltip-inner">
|
||||||
Tooltip!
|
Tooltip!
|
||||||
</div>
|
</div>
|
||||||
@@ -950,11 +1028,6 @@ $('#example').tooltip(options)
|
|||||||
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
<p>Options for individual tooltips can alternatively be specified through the use of data attributes, as explained above.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Markup</h3>
|
|
||||||
{% highlight html %}
|
|
||||||
<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>
|
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
<h3>Methods</h3>
|
<h3>Methods</h3>
|
||||||
|
|
||||||
<h4>$().tooltip(options)</h4>
|
<h4>$().tooltip(options)</h4>
|
||||||
@@ -1100,6 +1173,29 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /example -->
|
</div><!-- /example -->
|
||||||
|
{% highlight html %}
|
||||||
|
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||||
|
Popover on left
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||||
|
Popover on top
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||||||
|
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||||
|
Popover on bottom
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||||
|
Popover on right
|
||||||
|
</button>
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="bs-callout bs-callout-warning">
|
||||||
|
<h4>Multiple-line links</h4>
|
||||||
|
<p>Sometimes you want to add a tooltip to a hyperlink that wraps multiple lines. The default behavior of the tooltip plugin is to center it horizontally and vertically. Add <code>white-space: nowrap;</code> to your anchors to avoid this.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<h2 id="popovers-usage">Usage</h2>
|
<h2 id="popovers-usage">Usage</h2>
|
||||||
@@ -1123,7 +1219,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||||||
<td>animation</td>
|
<td>animation</td>
|
||||||
<td>boolean</td>
|
<td>boolean</td>
|
||||||
<td>true</td>
|
<td>true</td>
|
||||||
<td>apply a CSS fade transition to the tooltip</td>
|
<td>apply a CSS fade transition to the popover</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>html</td>
|
<td>html</td>
|
||||||
@@ -1141,7 +1237,7 @@ $('#myTooltip').on('hidden.bs.tooltip', function () {
|
|||||||
<td>selector</td>
|
<td>selector</td>
|
||||||
<td>string</td>
|
<td>string</td>
|
||||||
<td>false</td>
|
<td>false</td>
|
||||||
<td>if a selector is provided, tooltip objects will be delegated to the specified targets. in practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
|
<td>if a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="http://jsfiddle.net/fScua/">an informative example</a>.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>trigger</td>
|
<td>trigger</td>
|
||||||
@@ -1334,14 +1430,23 @@ $('#my-alert').bind('closed.bs.alert', function () {
|
|||||||
<h4>Stateful</h4>
|
<h4>Stateful</h4>
|
||||||
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
|
<p>Add <code>data-loading-text="Loading..."</code> to use a loading state on a button.</p>
|
||||||
<div class="bs-example" style="padding-bottom: 24px;">
|
<div class="bs-example" style="padding-bottom: 24px;">
|
||||||
<button type="button" id="fat-btn" data-loading-text="Loading..." class="btn btn-primary">
|
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
|
||||||
Loading state
|
Loading state
|
||||||
</button>
|
</button>
|
||||||
</div><!-- /example -->
|
</div><!-- /example -->
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<button type="button" data-loading-text="Loading..." class="btn btn-primary">
|
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
|
||||||
Loading state
|
Loading state
|
||||||
</button>
|
</button>
|
||||||
|
<script>
|
||||||
|
$('#loading-example-btn').click(function () {
|
||||||
|
var btn = $(this);
|
||||||
|
btn.button('loading');
|
||||||
|
$.ajax(...).always(function () {
|
||||||
|
btn.button('reset');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h4>Single toggle</h4>
|
<h4>Single toggle</h4>
|
||||||
@@ -1433,14 +1538,23 @@ $('.btn').button()
|
|||||||
<p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
|
<p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
|
||||||
</div>
|
</div>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<button type="button" class="btn" data-toggle="button">...</button>
|
<button type="button" class="btn btn-primary" data-toggle="button">...</button>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<h4>$().button('loading')</h4>
|
<h4>$().button('loading')</h4>
|
||||||
<p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
|
<p>Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute <code>data-loading-text</code>.
|
||||||
</p>
|
</p>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<button type="button" class="btn" data-loading-text="loading stuff...">...</button>
|
<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
|
||||||
|
<script>
|
||||||
|
$('#loading-example-btn').click(function () {
|
||||||
|
var btn = $(this);
|
||||||
|
btn.button('loading');
|
||||||
|
$.ajax(...).always(function () {
|
||||||
|
btn.button('reset');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
<div class="bs-callout bs-callout-danger">
|
<div class="bs-callout bs-callout-danger">
|
||||||
@@ -1454,7 +1568,7 @@ $('.btn').button()
|
|||||||
<h4>$().button(string)</h4>
|
<h4>$().button(string)</h4>
|
||||||
<p>Resets button state - swaps text to any data defined text state.</p>
|
<p>Resets button state - swaps text to any data defined text state.</p>
|
||||||
{% highlight html %}
|
{% highlight html %}
|
||||||
<button type="button" class="btn" data-complete-text="finished!" >...</button>
|
<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
|
||||||
<script>
|
<script>
|
||||||
$('.btn').button('complete')
|
$('.btn').button('complete')
|
||||||
</script>
|
</script>
|
||||||
@@ -1941,7 +2055,7 @@ $('#myCarousel').on('slide.bs.carousel', function () {
|
|||||||
<ol>
|
<ol>
|
||||||
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in it's top-most position. At this point no CSS positioning is required.</li>
|
<li>To start, the plugin adds <code>.affix-top</code> to indicate the element is in it's top-most position. At this point no CSS positioning is required.</li>
|
||||||
<li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li>
|
<li>Scrolling past the element you want affixed should trigger the actual affixing. This is where <code>.affix</code> replaces <code>.affix-top</code> and sets <code>position: fixed;</code> (provided by Bootstrap's code CSS).</li>
|
||||||
<li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the elemtn from there.</li>
|
<li>If a bottom offset is defined, scrolling past that should replace <code>.affix</code> with <code>.affix-bottom</code>. Since offsets are optional, setting one requires you to set the appropriate CSS. In this case, add <code>position: absolute;</code> when necessary. The plugin uses the data attribute or JavaScript option to determine where to position the element from there.</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>Follow the above steps to set your CSS for either of the usage options below.</p>
|
<p>Follow the above steps to set your CSS for either of the usage options below.</p>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
|
||||||
|
"requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true },
|
||||||
|
"disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
|
||||||
|
"requireRightStickedOperators": ["!"],
|
||||||
|
"disallowRightStickedOperators": ["?", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
|
||||||
|
"disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
|
||||||
|
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
|
||||||
|
"requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
|
||||||
|
"requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
|
||||||
|
"disallowKeywords": ["with"],
|
||||||
|
"validateLineBreaks": "LF",
|
||||||
|
"requireLineFeedAtFileEnd": true
|
||||||
|
}
|
||||||
@@ -10,5 +10,6 @@
|
|||||||
"expr" : true,
|
"expr" : true,
|
||||||
"laxbreak" : true,
|
"laxbreak" : true,
|
||||||
"laxcomma" : true,
|
"laxcomma" : true,
|
||||||
|
"quotmark" : "single",
|
||||||
"validthis": true
|
"validthis": true
|
||||||
}
|
}
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// AFFIX CLASS DEFINITION
|
// AFFIX CLASS DEFINITION
|
||||||
// ======================
|
// ======================
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// ALERT CLASS DEFINITION
|
// ALERT CLASS DEFINITION
|
||||||
// ======================
|
// ======================
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// BUTTON PUBLIC CLASS DEFINITION
|
// BUTTON PUBLIC CLASS DEFINITION
|
||||||
// ==============================
|
// ==============================
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// CAROUSEL CLASS DEFINITION
|
// CAROUSEL CLASS DEFINITION
|
||||||
// =========================
|
// =========================
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// COLLAPSE PUBLIC CLASS DEFINITION
|
// COLLAPSE PUBLIC CLASS DEFINITION
|
||||||
// ================================
|
// ================================
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// DROPDOWN CLASS DEFINITION
|
// DROPDOWN CLASS DEFINITION
|
||||||
// =========================
|
// =========================
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
var backdrop = '.dropdown-backdrop'
|
var backdrop = '.dropdown-backdrop'
|
||||||
var toggle = '[data-toggle=dropdown]'
|
var toggle = '[data-toggle=dropdown]'
|
||||||
var Dropdown = function (element) {
|
var Dropdown = function (element) {
|
||||||
var $el = $(element).on('click.bs.dropdown', this.toggle)
|
$(element).on('click.bs.dropdown', this.toggle)
|
||||||
}
|
}
|
||||||
|
|
||||||
Dropdown.prototype.toggle = function (e) {
|
Dropdown.prototype.toggle = function (e) {
|
||||||
@@ -85,7 +85,7 @@
|
|||||||
|
|
||||||
if (e.keyCode == 38 && index > 0) index-- // up
|
if (e.keyCode == 38 && index > 0) index-- // up
|
||||||
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
|
if (e.keyCode == 40 && index < $items.length - 1) index++ // down
|
||||||
if (!~index) index=0
|
if (!~index) index = 0
|
||||||
|
|
||||||
$items.eq(index).focus()
|
$items.eq(index).focus()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// MODAL CLASS DEFINITION
|
// MODAL CLASS DEFINITION
|
||||||
// ======================
|
// ======================
|
||||||
@@ -149,7 +149,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
Modal.prototype.backdrop = function (callback) {
|
Modal.prototype.backdrop = function (callback) {
|
||||||
var that = this
|
|
||||||
var animate = this.$element.hasClass('fade') ? 'fade' : ''
|
var animate = this.$element.hasClass('fade') ? 'fade' : ''
|
||||||
|
|
||||||
if (this.isShown && this.options.backdrop) {
|
if (this.isShown && this.options.backdrop) {
|
||||||
@@ -180,7 +179,7 @@
|
|||||||
} else if (!this.isShown && this.$backdrop) {
|
} else if (!this.isShown && this.$backdrop) {
|
||||||
this.$backdrop.removeClass('in')
|
this.$backdrop.removeClass('in')
|
||||||
|
|
||||||
$.support.transition && this.$element.hasClass('fade')?
|
$.support.transition && this.$element.hasClass('fade') ?
|
||||||
this.$backdrop
|
this.$backdrop
|
||||||
.one($.support.transition.end, callback)
|
.one($.support.transition.end, callback)
|
||||||
.emulateTransitionEnd(150) :
|
.emulateTransitionEnd(150) :
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// POPOVER PUBLIC CLASS DEFINITION
|
// POPOVER PUBLIC CLASS DEFINITION
|
||||||
// ===============================
|
// ===============================
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// SCROLLSPY CLASS DEFINITION
|
// SCROLLSPY CLASS DEFINITION
|
||||||
// ==========================
|
// ==========================
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// TAB CLASS DEFINITION
|
// TAB CLASS DEFINITION
|
||||||
// ====================
|
// ====================
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("affix")
|
module('affix')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var affix = $.fn.affix.noConflict()
|
var affix = $.fn.affix.noConflict()
|
||||||
ok(!$.fn.affix, 'affix was set back to undefined (org value)')
|
ok(!$.fn.affix, 'affix was set back to undefined (org value)')
|
||||||
$.fn.affix = affix
|
$.fn.affix = affix
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
ok($(document.body).affix, 'affix method is defined')
|
ok($(document.body).affix, 'affix method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
ok($(document.body).affix()[0] == document.body, 'document.body returned')
|
ok($(document.body).affix()[0] == document.body, 'document.body returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should exit early if element is not visible", function () {
|
test('should exit early if element is not visible', function () {
|
||||||
var $affix = $('<div style="display: none"></div>').affix()
|
var $affix = $('<div style="display: none"></div>').affix()
|
||||||
$affix.data('bs.affix').checkPosition()
|
$affix.data('bs.affix').checkPosition()
|
||||||
ok(!$affix.hasClass('affix'), 'affix class was not added')
|
ok(!$affix.hasClass('affix'), 'affix class was not added')
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("alert")
|
module('alert')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var alert = $.fn.alert.noConflict()
|
var alert = $.fn.alert.noConflict()
|
||||||
ok(!$.fn.alert, 'alert was set back to undefined (org value)')
|
ok(!$.fn.alert, 'alert was set back to undefined (org value)')
|
||||||
$.fn.alert = alert
|
$.fn.alert = alert
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
ok($(document.body).alert, 'alert method is defined')
|
ok($(document.body).alert, 'alert method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
ok($(document.body).alert()[0] == document.body, 'document.body returned')
|
ok($(document.body).alert()[0] == document.body, 'document.body returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should fade element out on clicking .close", function () {
|
test('should fade element out on clicking .close', function () {
|
||||||
var alertHTML = '<div class="alert-message warning fade in">'
|
var alertHTML = '<div class="alert-message warning fade in">'
|
||||||
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
|
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
|
||||||
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
|
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
|
||||||
@@ -28,7 +28,7 @@ $(function () {
|
|||||||
ok(!alert.hasClass('in'), 'remove .in class on .close click')
|
ok(!alert.hasClass('in'), 'remove .in class on .close click')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should remove element when clicking .close", function () {
|
test('should remove element when clicking .close', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
|
|
||||||
var alertHTML = '<div class="alert-message warning fade in">'
|
var alertHTML = '<div class="alert-message warning fade in">'
|
||||||
@@ -44,7 +44,7 @@ $(function () {
|
|||||||
ok(!$('#qunit-fixture').find('.alert-message').length, 'element removed from dom')
|
ok(!$('#qunit-fixture').find('.alert-message').length, 'element removed from dom')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not fire closed when close is prevented", function () {
|
test('should not fire closed when close is prevented', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop();
|
stop();
|
||||||
$('<div class="alert"/>')
|
$('<div class="alert"/>')
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("button")
|
module('button')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var button = $.fn.button.noConflict()
|
var button = $.fn.button.noConflict()
|
||||||
ok(!$.fn.button, 'button was set back to undefined (org value)')
|
ok(!$.fn.button, 'button was set back to undefined (org value)')
|
||||||
$.fn.button = button
|
$.fn.button = button
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
ok($(document.body).button, 'button method is defined')
|
ok($(document.body).button, 'button method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
ok($(document.body).button()[0] == document.body, 'document.body returned')
|
ok($(document.body).button()[0] == document.body, 'document.body returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return set state to loading", function () {
|
test('should return set state to loading', function () {
|
||||||
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
|
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
|
||||||
equal(btn.html(), 'mdo', 'btn text equals mdo')
|
equal(btn.html(), 'mdo', 'btn text equals mdo')
|
||||||
btn.button('loading')
|
btn.button('loading')
|
||||||
@@ -29,7 +29,7 @@ $(function () {
|
|||||||
}, 0)
|
}, 0)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return reset state", function () {
|
test('should return reset state', function () {
|
||||||
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
|
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
|
||||||
equal(btn.html(), 'mdo', 'btn text equals mdo')
|
equal(btn.html(), 'mdo', 'btn text equals mdo')
|
||||||
btn.button('loading')
|
btn.button('loading')
|
||||||
@@ -51,14 +51,14 @@ $(function () {
|
|||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should toggle active", function () {
|
test('should toggle active', function () {
|
||||||
var btn = $('<button class="btn">mdo</button>')
|
var btn = $('<button class="btn">mdo</button>')
|
||||||
ok(!btn.hasClass('active'), 'btn does not have active class')
|
ok(!btn.hasClass('active'), 'btn does not have active class')
|
||||||
btn.button('toggle')
|
btn.button('toggle')
|
||||||
ok(btn.hasClass('active'), 'btn has class active')
|
ok(btn.hasClass('active'), 'btn has class active')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should toggle active when btn children are clicked", function () {
|
test('should toggle active when btn children are clicked', function () {
|
||||||
var btn = $('<button class="btn" data-toggle="button">mdo</button>')
|
var btn = $('<button class="btn" data-toggle="button">mdo</button>')
|
||||||
, inner = $('<i></i>')
|
, inner = $('<i></i>')
|
||||||
btn
|
btn
|
||||||
@@ -69,7 +69,7 @@ $(function () {
|
|||||||
ok(btn.hasClass('active'), 'btn has class active')
|
ok(btn.hasClass('active'), 'btn has class active')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should toggle active when btn children are clicked within btn-group", function () {
|
test('should toggle active when btn children are clicked within btn-group', function () {
|
||||||
var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>')
|
var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>')
|
||||||
, btn = $('<button class="btn">fat</button>')
|
, btn = $('<button class="btn">fat</button>')
|
||||||
, inner = $('<i></i>')
|
, inner = $('<i></i>')
|
||||||
@@ -81,7 +81,7 @@ $(function () {
|
|||||||
ok(btn.hasClass('active'), 'btn has class active')
|
ok(btn.hasClass('active'), 'btn has class active')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should check for closest matching toggle", function () {
|
test('should check for closest matching toggle', function () {
|
||||||
var group = '<div class="btn-group" data-toggle="buttons">' +
|
var group = '<div class="btn-group" data-toggle="buttons">' +
|
||||||
'<label class="btn btn-primary active">' +
|
'<label class="btn btn-primary active">' +
|
||||||
'<input type="radio" name="options" id="option1" checked="true"> Option 1' +
|
'<input type="radio" name="options" id="option1" checked="true"> Option 1' +
|
||||||
|
|||||||
@@ -1,22 +1,22 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("carousel")
|
module('carousel')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var carousel = $.fn.carousel.noConflict()
|
var carousel = $.fn.carousel.noConflict()
|
||||||
ok(!$.fn.carousel, 'carousel was set back to undefined (org value)')
|
ok(!$.fn.carousel, 'carousel was set back to undefined (org value)')
|
||||||
$.fn.carousel = carousel
|
$.fn.carousel = carousel
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
ok($(document.body).carousel, 'carousel method is defined')
|
ok($(document.body).carousel, 'carousel method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
ok($(document.body).carousel()[0] == document.body, 'document.body returned')
|
ok($(document.body).carousel()[0] == document.body, 'document.body returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not fire sliden when slide is prevented", function () {
|
test('should not fire sliden when slide is prevented', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop()
|
stop()
|
||||||
$('<div class="carousel"/>')
|
$('<div class="carousel"/>')
|
||||||
@@ -31,7 +31,7 @@ $(function () {
|
|||||||
.carousel('next')
|
.carousel('next')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should fire slide event with direction", function () {
|
test('should fire slide event with direction', function () {
|
||||||
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>'
|
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>'
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop()
|
stop()
|
||||||
@@ -43,7 +43,7 @@ $(function () {
|
|||||||
}).carousel('next')
|
}).carousel('next')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should fire slide event with relatedTarget", function () {
|
test('should fire slide event with relatedTarget', function () {
|
||||||
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>'
|
var template = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active"><img alt=""><div class="carousel-caption"><h4>{{_i}}First Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Second Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div><div class="item"><img alt=""><div class="carousel-caption"><h4>{{_i}}Third Thumbnail label{{/i}}</h4><p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div></div></div><a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a><a class="right carousel-control" href="#myCarousel" data-slide="next">›</a></div>'
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop()
|
stop()
|
||||||
@@ -57,31 +57,31 @@ $(function () {
|
|||||||
.carousel('next')
|
.carousel('next')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should set interval from data attribute", 4, function () {
|
test('should set interval from data attribute', 4, function () {
|
||||||
var template = $('<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}First Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Second Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Third Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div>');
|
var template = $('<div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}First Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Second Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> <div class="item"> <img alt=""> <div class="carousel-caption"> <h4>{{_i}}Third Thumbnail label{{/i}}</h4> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div>');
|
||||||
template.attr("data-interval", 1814);
|
template.attr('data-interval', 1814);
|
||||||
|
|
||||||
template.appendTo("body");
|
template.appendTo('body');
|
||||||
$('[data-slide]').first().click();
|
$('[data-slide]').first().click();
|
||||||
ok($('#myCarousel').data('bs.carousel').options.interval == 1814);
|
ok($('#myCarousel').data('bs.carousel').options.interval == 1814);
|
||||||
$('#myCarousel').remove();
|
$('#myCarousel').remove();
|
||||||
|
|
||||||
template.appendTo("body").attr("data-modal", "foobar");
|
template.appendTo('body').attr('data-modal', 'foobar');
|
||||||
$('[data-slide]').first().click();
|
$('[data-slide]').first().click();
|
||||||
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, "even if there is an data-modal attribute set");
|
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'even if there is an data-modal attribute set');
|
||||||
$('#myCarousel').remove();
|
$('#myCarousel').remove();
|
||||||
|
|
||||||
template.appendTo("body");
|
template.appendTo('body');
|
||||||
$('[data-slide]').first().click();
|
$('[data-slide]').first().click();
|
||||||
$('#myCarousel').attr('data-interval', 1860);
|
$('#myCarousel').attr('data-interval', 1860);
|
||||||
$('[data-slide]').first().click();
|
$('[data-slide]').first().click();
|
||||||
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, "attributes should be read only on intitialization");
|
ok($('#myCarousel').data('bs.carousel').options.interval == 1814, 'attributes should be read only on intitialization');
|
||||||
$('#myCarousel').remove();
|
$('#myCarousel').remove();
|
||||||
|
|
||||||
template.attr("data-interval", false);
|
template.attr('data-interval', false);
|
||||||
template.appendTo("body");
|
template.appendTo('body');
|
||||||
$('#myCarousel').carousel(1);
|
$('#myCarousel').carousel(1);
|
||||||
ok($('#myCarousel').data('bs.carousel').options.interval === false, "data attribute has higher priority than default options");
|
ok($('#myCarousel').data('bs.carousel').options.interval === false, 'data attribute has higher priority than default options');
|
||||||
$('#myCarousel').remove();
|
$('#myCarousel').remove();
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,34 +1,34 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("collapse")
|
module('collapse')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var collapse = $.fn.collapse.noConflict()
|
var collapse = $.fn.collapse.noConflict()
|
||||||
ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
|
ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
|
||||||
$.fn.collapse = collapse
|
$.fn.collapse = collapse
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
ok($(document.body).collapse, 'collapse method is defined')
|
ok($(document.body).collapse, 'collapse method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
ok($(document.body).collapse()[0] == document.body, 'document.body returned')
|
ok($(document.body).collapse()[0] == document.body, 'document.body returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should show a collapsed element", function () {
|
test('should show a collapsed element', function () {
|
||||||
var el = $('<div class="collapse"></div>').collapse('show')
|
var el = $('<div class="collapse"></div>').collapse('show')
|
||||||
ok(el.hasClass('in'), 'has class in')
|
ok(el.hasClass('in'), 'has class in')
|
||||||
ok(/height/.test(el.attr('style')), 'has height set')
|
ok(/height/.test(el.attr('style')), 'has height set')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should hide a collapsed element", function () {
|
test('should hide a collapsed element', function () {
|
||||||
var el = $('<div class="collapse"></div>').collapse('hide')
|
var el = $('<div class="collapse"></div>').collapse('hide')
|
||||||
ok(!el.hasClass('in'), 'does not have class in')
|
ok(!el.hasClass('in'), 'does not have class in')
|
||||||
ok(/height/.test(el.attr('style')), 'has height set')
|
ok(/height/.test(el.attr('style')), 'has height set')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not fire shown when show is prevented", function () {
|
test('should not fire shown when show is prevented', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop()
|
stop()
|
||||||
$('<div class="collapse"/>')
|
$('<div class="collapse"/>')
|
||||||
@@ -43,7 +43,7 @@ $(function () {
|
|||||||
.collapse('show')
|
.collapse('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should reset style to auto after finishing opening collapse", function () {
|
test('should reset style to auto after finishing opening collapse', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop()
|
stop()
|
||||||
$('<div class="collapse" style="height: 0px"/>')
|
$('<div class="collapse" style="height: 0px"/>')
|
||||||
@@ -57,7 +57,7 @@ $(function () {
|
|||||||
.collapse('show')
|
.collapse('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should add active class to target when collapse shown", function () {
|
test('should add active class to target when collapse shown', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop()
|
stop()
|
||||||
|
|
||||||
@@ -74,7 +74,7 @@ $(function () {
|
|||||||
target.click()
|
target.click()
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should remove active class to target when collapse hidden", function () {
|
test('should remove active class to target when collapse hidden', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop()
|
stop()
|
||||||
|
|
||||||
@@ -91,7 +91,7 @@ $(function () {
|
|||||||
target.click()
|
target.click()
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should remove active class from inactive accordion targets", function () {
|
test('should remove active class from inactive accordion targets', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop()
|
stop()
|
||||||
|
|
||||||
@@ -126,7 +126,7 @@ $(function () {
|
|||||||
target3.click()
|
target3.click()
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should allow dots in data-parent", function () {
|
test('should allow dots in data-parent', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop()
|
stop()
|
||||||
|
|
||||||
|
|||||||
@@ -1,23 +1,23 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("dropdowns")
|
module('dropdowns')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var dropdown = $.fn.dropdown.noConflict()
|
var dropdown = $.fn.dropdown.noConflict()
|
||||||
ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)')
|
ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)')
|
||||||
$.fn.dropdown = dropdown
|
$.fn.dropdown = dropdown
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
ok($(document.body).dropdown, 'dropdown method is defined')
|
ok($(document.body).dropdown, 'dropdown method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
var el = $("<div />")
|
var el = $('<div />')
|
||||||
ok(el.dropdown()[0] === el[0], 'same element returned')
|
ok(el.dropdown()[0] === el[0], 'same element returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not open dropdown if target is disabled", function () {
|
test('should not open dropdown if target is disabled', function () {
|
||||||
var dropdownHTML = '<ul class="tabs">'
|
var dropdownHTML = '<ul class="tabs">'
|
||||||
+ '<li class="dropdown">'
|
+ '<li class="dropdown">'
|
||||||
+ '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
|
+ '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
|
||||||
@@ -34,7 +34,7 @@ $(function () {
|
|||||||
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
|
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not open dropdown if target is disabled", function () {
|
test('should not open dropdown if target is disabled', function () {
|
||||||
var dropdownHTML = '<ul class="tabs">'
|
var dropdownHTML = '<ul class="tabs">'
|
||||||
+ '<li class="dropdown">'
|
+ '<li class="dropdown">'
|
||||||
+ '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
|
+ '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
|
||||||
@@ -51,7 +51,7 @@ $(function () {
|
|||||||
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
|
ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should add class open to menu if clicked", function () {
|
test('should add class open to menu if clicked', function () {
|
||||||
var dropdownHTML = '<ul class="tabs">'
|
var dropdownHTML = '<ul class="tabs">'
|
||||||
+ '<li class="dropdown">'
|
+ '<li class="dropdown">'
|
||||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||||
@@ -68,7 +68,7 @@ $(function () {
|
|||||||
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
|
ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should test if element has a # before assuming it's a selector", function () {
|
test('should test if element has a # before assuming it\'s a selector', function () {
|
||||||
var dropdownHTML = '<ul class="tabs">'
|
var dropdownHTML = '<ul class="tabs">'
|
||||||
+ '<li class="dropdown">'
|
+ '<li class="dropdown">'
|
||||||
+ '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
+ '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||||
@@ -86,7 +86,7 @@ $(function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
test("should remove open class if body clicked", function () {
|
test('should remove open class if body clicked', function () {
|
||||||
var dropdownHTML = '<ul class="tabs">'
|
var dropdownHTML = '<ul class="tabs">'
|
||||||
+ '<li class="dropdown">'
|
+ '<li class="dropdown">'
|
||||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||||
@@ -110,7 +110,7 @@ $(function () {
|
|||||||
dropdown.remove()
|
dropdown.remove()
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should remove open class if body clicked, with multiple drop downs", function () {
|
test('should remove open class if body clicked, with multiple drop downs', function () {
|
||||||
var dropdownHTML =
|
var dropdownHTML =
|
||||||
'<ul class="nav">'
|
'<ul class="nav">'
|
||||||
+ ' <li><a href="#menu1">Menu 1</a></li>'
|
+ ' <li><a href="#menu1">Menu 1</a></li>'
|
||||||
@@ -132,24 +132,24 @@ $(function () {
|
|||||||
, first = dropdowns.first()
|
, first = dropdowns.first()
|
||||||
, last = dropdowns.last()
|
, last = dropdowns.last()
|
||||||
|
|
||||||
ok(dropdowns.length == 2, "Should be two dropdowns")
|
ok(dropdowns.length == 2, 'Should be two dropdowns')
|
||||||
|
|
||||||
first.click()
|
first.click()
|
||||||
ok(first.parents('.open').length == 1, 'open class added on click')
|
ok(first.parents('.open').length == 1, 'open class added on click')
|
||||||
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
|
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
|
||||||
$('body').click()
|
$('body').click()
|
||||||
ok($("#qunit-fixture .open").length === 0, 'open class removed')
|
ok($('#qunit-fixture .open').length === 0, 'open class removed')
|
||||||
|
|
||||||
last.click()
|
last.click()
|
||||||
ok(last.parent('.open').length == 1, 'open class added on click')
|
ok(last.parent('.open').length == 1, 'open class added on click')
|
||||||
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
|
ok($('#qunit-fixture .open').length == 1, 'only one object is open')
|
||||||
$('body').click()
|
$('body').click()
|
||||||
ok($("#qunit-fixture .open").length === 0, 'open class removed')
|
ok($('#qunit-fixture .open').length === 0, 'open class removed')
|
||||||
|
|
||||||
$("#qunit-fixture").html("")
|
$('#qunit-fixture').html('')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should fire show and hide event", function () {
|
test('should fire show and hide event', function () {
|
||||||
var dropdownHTML = '<ul class="tabs">'
|
var dropdownHTML = '<ul class="tabs">'
|
||||||
+ '<li class="dropdown">'
|
+ '<li class="dropdown">'
|
||||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||||
@@ -183,7 +183,7 @@ $(function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
test("should fire shown and hiden event", function () {
|
test('should fire shown and hiden event', function () {
|
||||||
var dropdownHTML = '<ul class="tabs">'
|
var dropdownHTML = '<ul class="tabs">'
|
||||||
+ '<li class="dropdown">'
|
+ '<li class="dropdown">'
|
||||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||||
|
|||||||
@@ -1,195 +1,195 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("modal")
|
module('modal')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var modal = $.fn.modal.noConflict()
|
var modal = $.fn.modal.noConflict()
|
||||||
ok(!$.fn.modal, 'modal was set back to undefined (org value)')
|
ok(!$.fn.modal, 'modal was set back to undefined (org value)')
|
||||||
$.fn.modal = modal
|
$.fn.modal = modal
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
var div = $("<div id='modal-test'></div>")
|
var div = $('<div id="modal-test"></div>')
|
||||||
ok(div.modal, 'modal method is defined')
|
ok(div.modal, 'modal method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
var div = $("<div id='modal-test'></div>")
|
var div = $('<div id="modal-test"></div>')
|
||||||
ok(div.modal() == div, 'document.body returned')
|
ok(div.modal() == div, 'document.body returned')
|
||||||
$('#modal-test').remove()
|
$('#modal-test').remove()
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should expose defaults var for settings", function () {
|
test('should expose defaults var for settings', function () {
|
||||||
ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed')
|
ok($.fn.modal.Constructor.DEFAULTS, 'default object exposed')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should insert into dom when show method is called", function () {
|
test('should insert into dom when show method is called', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
$("<div id='modal-test'></div>")
|
$('<div id="modal-test"></div>')
|
||||||
.on("shown.bs.modal", function () {
|
.on('shown.bs.modal', function () {
|
||||||
ok($('#modal-test').length, 'modal inserted into dom')
|
ok($('#modal-test').length, 'modal inserted into dom')
|
||||||
$(this).remove()
|
$(this).remove()
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.modal("show")
|
.modal('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should fire show event", function () {
|
test('should fire show event', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
$("<div id='modal-test'></div>")
|
$('<div id="modal-test"></div>')
|
||||||
.on("show.bs.modal", function () {
|
.on('show.bs.modal', function () {
|
||||||
ok(true, "show was called")
|
ok(true, 'show was called')
|
||||||
})
|
})
|
||||||
.on("shown.bs.modal", function () {
|
.on('shown.bs.modal', function () {
|
||||||
$(this).remove()
|
$(this).remove()
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.modal("show")
|
.modal('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not fire shown when default prevented", function () {
|
test('should not fire shown when default prevented', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
$("<div id='modal-test'></div>")
|
$('<div id="modal-test"></div>')
|
||||||
.on("show.bs.modal", function (e) {
|
.on('show.bs.modal', function (e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
ok(true, "show was called")
|
ok(true, 'show was called')
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.on("shown.bs.modal", function () {
|
.on('shown.bs.modal', function () {
|
||||||
ok(false, "shown was called")
|
ok(false, 'shown was called')
|
||||||
})
|
})
|
||||||
.modal("show")
|
.modal('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should hide modal when hide is called", function () {
|
test('should hide modal when hide is called', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
|
|
||||||
$("<div id='modal-test'></div>")
|
$('<div id="modal-test"></div>')
|
||||||
.on("shown.bs.modal", function () {
|
.on('shown.bs.modal', function () {
|
||||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
ok($('#modal-test').is(':visible'), 'modal visible')
|
||||||
ok($('#modal-test').length, 'modal inserted into dom')
|
ok($('#modal-test').length, 'modal inserted into dom')
|
||||||
$(this).modal("hide")
|
$(this).modal('hide')
|
||||||
})
|
})
|
||||||
.on("hidden.bs.modal", function() {
|
.on('hidden.bs.modal', function () {
|
||||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||||
$('#modal-test').remove()
|
$('#modal-test').remove()
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.modal("show")
|
.modal('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should toggle when toggle is called", function () {
|
test('should toggle when toggle is called', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var div = $("<div id='modal-test'></div>")
|
var div = $('<div id="modal-test"></div>')
|
||||||
div
|
div
|
||||||
.on("shown.bs.modal", function () {
|
.on('shown.bs.modal', function () {
|
||||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
ok($('#modal-test').is(':visible'), 'modal visible')
|
||||||
ok($('#modal-test').length, 'modal inserted into dom')
|
ok($('#modal-test').length, 'modal inserted into dom')
|
||||||
div.modal("toggle")
|
div.modal('toggle')
|
||||||
})
|
})
|
||||||
.on("hidden.bs.modal", function() {
|
.on('hidden.bs.modal', function () {
|
||||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||||
div.remove()
|
div.remove()
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.modal("toggle")
|
.modal('toggle')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should remove from dom when click [data-dismiss=modal]", function () {
|
test('should remove from dom when click [data-dismiss=modal]', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var div = $("<div id='modal-test'><span class='close' data-dismiss='modal'></span></div>")
|
var div = $('<div id="modal-test"><span class="close" data-dismiss="modal"></span></div>')
|
||||||
div
|
div
|
||||||
.on("shown.bs.modal", function () {
|
.on('shown.bs.modal', function () {
|
||||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
ok($('#modal-test').is(':visible'), 'modal visible')
|
||||||
ok($('#modal-test').length, 'modal inserted into dom')
|
ok($('#modal-test').length, 'modal inserted into dom')
|
||||||
div.find('.close').click()
|
div.find('.close').click()
|
||||||
})
|
})
|
||||||
.on("hidden.bs.modal", function() {
|
.on('hidden.bs.modal', function () {
|
||||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||||
div.remove()
|
div.remove()
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.modal("toggle")
|
.modal('toggle')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should allow modal close with 'backdrop:false'", function () {
|
test('should allow modal close with "backdrop:false"', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var div = $("<div>", { id: 'modal-test', "data-backdrop": false })
|
var div = $('<div>', { id: 'modal-test', 'data-backdrop': false })
|
||||||
div
|
div
|
||||||
.on("shown.bs.modal", function () {
|
.on('shown.bs.modal', function () {
|
||||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
ok($('#modal-test').is(':visible'), 'modal visible')
|
||||||
div.modal("hide")
|
div.modal('hide')
|
||||||
})
|
})
|
||||||
.on("hidden.bs.modal", function() {
|
.on('hidden.bs.modal', function () {
|
||||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||||
div.remove()
|
div.remove()
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.modal("show")
|
.modal('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should close modal when clicking outside of modal-content", function () {
|
test('should close modal when clicking outside of modal-content', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var div = $("<div id='modal-test'><div class='contents'></div></div>")
|
var div = $('<div id="modal-test"><div class="contents"></div></div>')
|
||||||
div
|
div
|
||||||
.bind("shown.bs.modal", function () {
|
.bind('shown.bs.modal', function () {
|
||||||
ok($('#modal-test').length, 'modal insterted into dom')
|
ok($('#modal-test').length, 'modal insterted into dom')
|
||||||
$('.contents').click()
|
$('.contents').click()
|
||||||
ok($('#modal-test').is(":visible"), 'modal visible')
|
ok($('#modal-test').is(':visible'), 'modal visible')
|
||||||
$('#modal-test').click()
|
$('#modal-test').click()
|
||||||
})
|
})
|
||||||
.bind("hidden.bs.modal", function() {
|
.bind('hidden.bs.modal', function () {
|
||||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||||
div.remove()
|
div.remove()
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.modal("show")
|
.modal('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should trigger hide event once when clicking outside of modal-content", function () {
|
test('should trigger hide event once when clicking outside of modal-content', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var div = $("<div id='modal-test'><div class='contents'></div></div>")
|
var div = $('<div id="modal-test"><div class="contents"></div></div>')
|
||||||
var triggered
|
var triggered
|
||||||
div
|
div
|
||||||
.bind("shown.bs.modal", function () {
|
.bind('shown.bs.modal', function () {
|
||||||
triggered = 0
|
triggered = 0
|
||||||
$('#modal-test').click()
|
$('#modal-test').click()
|
||||||
})
|
})
|
||||||
.one("hidden.bs.modal", function() {
|
.one('hidden.bs.modal', function () {
|
||||||
div.modal("show")
|
div.modal('show')
|
||||||
})
|
})
|
||||||
.bind("hide.bs.modal", function () {
|
.bind('hide.bs.modal', function () {
|
||||||
triggered += 1
|
triggered += 1
|
||||||
ok(triggered === 1, 'modal hide triggered once')
|
ok(triggered === 1, 'modal hide triggered once')
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.modal("show")
|
.modal('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should close reopened modal with [data-dismiss=modal] click", function () {
|
test('should close reopened modal with [data-dismiss=modal] click', function () {
|
||||||
stop()
|
stop()
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var div = $("<div id='modal-test'><div class='contents'><div id='close' data-dismiss='modal'></div></div></div>")
|
var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
|
||||||
div
|
div
|
||||||
.bind("shown.bs.modal", function () {
|
.bind('shown.bs.modal', function () {
|
||||||
$('#close').click()
|
$('#close').click()
|
||||||
ok(!$('#modal-test').is(":visible"), 'modal hidden')
|
ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||||
})
|
})
|
||||||
.one("hidden.bs.modal", function() {
|
.one('hidden.bs.modal', function () {
|
||||||
div.one('hidden.bs.modal', function () {
|
div.one('hidden.bs.modal', function () {
|
||||||
start()
|
start()
|
||||||
}).modal("show")
|
}).modal('show')
|
||||||
})
|
})
|
||||||
.modal("show")
|
.modal('show')
|
||||||
|
|
||||||
div.remove()
|
div.remove()
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* grunt-contrib-qunit
|
* grunt-contrib-qunit
|
||||||
* http://gruntjs.com/
|
* http://gruntjs.com/
|
||||||
*
|
*
|
||||||
* Copyright (c) 2013 "Cowboy" Ben Alman, contributors
|
* Copyright (c) 2013 'Cowboy' Ben Alman, contributors
|
||||||
* Licensed under the MIT license.
|
* Licensed under the MIT license.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// These methods connect QUnit to PhantomJS.
|
// These methods connect QUnit to PhantomJS.
|
||||||
QUnit.log = function(obj) {
|
QUnit.log = function (obj) {
|
||||||
// What is this I don’t even
|
// What is this I don’t even
|
||||||
if (obj.message === '[object Object], undefined:undefined') { return }
|
if (obj.message === '[object Object], undefined:undefined') { return }
|
||||||
// Parse some stuff before sending it.
|
// Parse some stuff before sending it.
|
||||||
@@ -32,37 +32,37 @@
|
|||||||
sendMessage('qunit.log', obj.result, actual, expected, obj.message, obj.source)
|
sendMessage('qunit.log', obj.result, actual, expected, obj.message, obj.source)
|
||||||
}
|
}
|
||||||
|
|
||||||
QUnit.testStart = function(obj) {
|
QUnit.testStart = function (obj) {
|
||||||
sendMessage('qunit.testStart', obj.name)
|
sendMessage('qunit.testStart', obj.name)
|
||||||
}
|
}
|
||||||
|
|
||||||
QUnit.testDone = function(obj) {
|
QUnit.testDone = function (obj) {
|
||||||
sendMessage('qunit.testDone', obj.name, obj.failed, obj.passed, obj.total)
|
sendMessage('qunit.testDone', obj.name, obj.failed, obj.passed, obj.total)
|
||||||
}
|
}
|
||||||
|
|
||||||
QUnit.moduleStart = function(obj) {
|
QUnit.moduleStart = function (obj) {
|
||||||
sendMessage('qunit.moduleStart', obj.name)
|
sendMessage('qunit.moduleStart', obj.name)
|
||||||
}
|
}
|
||||||
|
|
||||||
QUnit.begin = function () {
|
QUnit.begin = function () {
|
||||||
sendMessage('qunit.begin')
|
sendMessage('qunit.begin')
|
||||||
console.log("Starting test suite")
|
console.log('Starting test suite')
|
||||||
console.log("================================================\n")
|
console.log('================================================\n')
|
||||||
}
|
}
|
||||||
|
|
||||||
QUnit.moduleDone = function (opts) {
|
QUnit.moduleDone = function (opts) {
|
||||||
if (opts.failed === 0) {
|
if (opts.failed === 0) {
|
||||||
console.log("\r\u2714 All tests passed in '" + opts.name + "' module")
|
console.log('\r\u2714 All tests passed in "' + opts.name + '" module')
|
||||||
} else {
|
} else {
|
||||||
console.log("\u2716 " + opts.failed + " tests failed in '" + opts.name + "' module")
|
console.log('\u2716 ' + opts.failed + ' tests failed in "' + opts.name + '" module')
|
||||||
}
|
}
|
||||||
sendMessage('qunit.moduleDone', opts.name, opts.failed, opts.passed, opts.total)
|
sendMessage('qunit.moduleDone', opts.name, opts.failed, opts.passed, opts.total)
|
||||||
}
|
}
|
||||||
|
|
||||||
QUnit.done = function (opts) {
|
QUnit.done = function (opts) {
|
||||||
console.log("\n================================================")
|
console.log('\n================================================')
|
||||||
console.log("Tests completed in " + opts.runtime + " milliseconds")
|
console.log('Tests completed in ' + opts.runtime + ' milliseconds')
|
||||||
console.log(opts.passed + " tests of " + opts.total + " passed, " + opts.failed + " failed.")
|
console.log(opts.passed + ' tests of ' + opts.total + ' passed, ' + opts.failed + ' failed.')
|
||||||
sendMessage('qunit.done', opts.failed, opts.passed, opts.total, opts.runtime)
|
sendMessage('qunit.done', opts.failed, opts.passed, opts.total, opts.runtime)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("popover")
|
module('popover')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var popover = $.fn.popover.noConflict()
|
var popover = $.fn.popover.noConflict()
|
||||||
ok(!$.fn.popover, 'popover was set back to undefined (org value)')
|
ok(!$.fn.popover, 'popover was set back to undefined (org value)')
|
||||||
$.fn.popover = popover
|
$.fn.popover = popover
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
var div = $('<div></div>')
|
var div = $('<div></div>')
|
||||||
ok(div.popover, 'popover method is defined')
|
ok(div.popover, 'popover method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
var div = $('<div></div>')
|
var div = $('<div></div>')
|
||||||
ok(div.popover() == div, 'document.body returned')
|
ok(div.popover() == div, 'document.body returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should render popover element", function () {
|
test('should render popover element', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
|
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
@@ -26,10 +26,10 @@ $(function () {
|
|||||||
|
|
||||||
ok($('.popover').length, 'popover was inserted')
|
ok($('.popover').length, 'popover was inserted')
|
||||||
popover.popover('hide')
|
popover.popover('hide')
|
||||||
ok(!$(".popover").length, 'popover removed')
|
ok(!$('.popover').length, 'popover removed')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should store popover instance in popover data object", function () {
|
test('should store popover instance in popover data object', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
|
var popover = $('<a href="#" title="mdo" data-content="http://twitter.com/mdo">@mdo</a>')
|
||||||
.popover()
|
.popover()
|
||||||
@@ -37,7 +37,7 @@ $(function () {
|
|||||||
ok(!!popover.data('bs.popover'), 'popover instance exists')
|
ok(!!popover.data('bs.popover'), 'popover instance exists')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should get title and content from options", function () {
|
test('should get title and content from options', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var popover = $('<a href="#">@fat</a>')
|
var popover = $('<a href="#">@fat</a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
@@ -61,7 +61,7 @@ $(function () {
|
|||||||
$('#qunit-fixture').empty()
|
$('#qunit-fixture').empty()
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should get title and content from attributes", function () {
|
test('should get title and content from attributes', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
|
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
@@ -70,7 +70,7 @@ $(function () {
|
|||||||
|
|
||||||
ok($('.popover').length, 'popover was inserted')
|
ok($('.popover').length, 'popover was inserted')
|
||||||
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
|
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
|
||||||
equal($('.popover .popover-content').text(), "loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻", 'content correctly inserted')
|
equal($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
|
||||||
|
|
||||||
popover.popover('hide')
|
popover.popover('hide')
|
||||||
ok(!$('.popover').length, 'popover was removed')
|
ok(!$('.popover').length, 'popover was removed')
|
||||||
@@ -78,7 +78,7 @@ $(function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
test("should get title and content from attributes #2", function () {
|
test('should get title and content from attributes #2', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
|
var popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻" >@mdo</a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
@@ -90,14 +90,14 @@ $(function () {
|
|||||||
|
|
||||||
ok($('.popover').length, 'popover was inserted')
|
ok($('.popover').length, 'popover was inserted')
|
||||||
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
|
equal($('.popover .popover-title').text(), '@mdo', 'title correctly inserted')
|
||||||
equal($('.popover .popover-content').text(), "loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻", 'content correctly inserted')
|
equal($('.popover .popover-content').text(), 'loves data attributes (づ。◕‿‿◕。)づ ︵ ┻━┻', 'content correctly inserted')
|
||||||
|
|
||||||
popover.popover('hide')
|
popover.popover('hide')
|
||||||
ok(!$('.popover').length, 'popover was removed')
|
ok(!$('.popover').length, 'popover was removed')
|
||||||
$('#qunit-fixture').empty()
|
$('#qunit-fixture').empty()
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should respect custom classes", function() {
|
test('should respect custom classes', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var popover = $('<a href="#">@fat</a>')
|
var popover = $('<a href="#">@fat</a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
@@ -117,8 +117,8 @@ $(function () {
|
|||||||
$('#qunit-fixture').empty()
|
$('#qunit-fixture').empty()
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should destroy popover", function () {
|
test('should destroy popover', function () {
|
||||||
var popover = $('<div/>').popover({trigger: 'hover'}).on('click.foo', function(){})
|
var popover = $('<div/>').popover({trigger: 'hover'}).on('click.foo', function () {})
|
||||||
ok(popover.data('bs.popover'), 'popover has data')
|
ok(popover.data('bs.popover'), 'popover has data')
|
||||||
ok($._data(popover[0], 'events').mouseover && $._data(popover[0], 'events').mouseout, 'popover has hover event')
|
ok($._data(popover[0], 'events').mouseover && $._data(popover[0], 'events').mouseout, 'popover has hover event')
|
||||||
ok($._data(popover[0], 'events').click[0].namespace == 'foo', 'popover has extra click.foo event')
|
ok($._data(popover[0], 'events').click[0].namespace == 'foo', 'popover has extra click.foo event')
|
||||||
|
|||||||
@@ -1,25 +1,25 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("scrollspy")
|
module('scrollspy')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var scrollspy = $.fn.scrollspy.noConflict()
|
var scrollspy = $.fn.scrollspy.noConflict()
|
||||||
ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)')
|
ok(!$.fn.scrollspy, 'scrollspy was set back to undefined (org value)')
|
||||||
$.fn.scrollspy = scrollspy
|
$.fn.scrollspy = scrollspy
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
ok($(document.body).scrollspy, 'scrollspy method is defined')
|
ok($(document.body).scrollspy, 'scrollspy method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
ok($(document.body).scrollspy()[0] == document.body, 'document.body returned')
|
ok($(document.body).scrollspy()[0] == document.body, 'document.body returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should switch active class on scroll", function () {
|
test('should switch active class on scroll', function () {
|
||||||
var sectionHTML = '<div id="masthead"></div>'
|
var sectionHTML = '<div id="masthead"></div>'
|
||||||
, $section = $(sectionHTML).append('#qunit-fixture')
|
, $section = $(sectionHTML).append('#qunit-fixture')
|
||||||
, topbarHTML ='<div class="topbar">'
|
, topbarHTML = '<div class="topbar">'
|
||||||
+ '<div class="topbar-inner">'
|
+ '<div class="topbar-inner">'
|
||||||
+ '<div class="container">'
|
+ '<div class="container">'
|
||||||
+ '<h3><a href="#">Bootstrap</a></h3>'
|
+ '<h3><a href="#">Bootstrap</a></h3>'
|
||||||
|
|||||||
@@ -1,55 +1,55 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("tabs")
|
module('tabs')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var tab = $.fn.tab.noConflict()
|
var tab = $.fn.tab.noConflict()
|
||||||
ok(!$.fn.tab, 'tab was set back to undefined (org value)')
|
ok(!$.fn.tab, 'tab was set back to undefined (org value)')
|
||||||
$.fn.tab = tab
|
$.fn.tab = tab
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
ok($(document.body).tab, 'tabs method is defined')
|
ok($(document.body).tab, 'tabs method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
ok($(document.body).tab()[0] == document.body, 'document.body returned')
|
ok($(document.body).tab()[0] == document.body, 'document.body returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should activate element by tab id", function () {
|
test('should activate element by tab id', function () {
|
||||||
var tabsHTML =
|
var tabsHTML =
|
||||||
'<ul class="tabs">'
|
'<ul class="tabs">'
|
||||||
+ '<li><a href="#home">Home</a></li>'
|
+ '<li><a href="#home">Home</a></li>'
|
||||||
+ '<li><a href="#profile">Profile</a></li>'
|
+ '<li><a href="#profile">Profile</a></li>'
|
||||||
+ '</ul>'
|
+ '</ul>'
|
||||||
|
|
||||||
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-fixture")
|
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
|
||||||
|
|
||||||
$(tabsHTML).find('li:last a').tab('show')
|
$(tabsHTML).find('li:last a').tab('show')
|
||||||
equal($("#qunit-fixture").find('.active').attr('id'), "profile")
|
equal($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||||
|
|
||||||
$(tabsHTML).find('li:first a').tab('show')
|
$(tabsHTML).find('li:first a').tab('show')
|
||||||
equal($("#qunit-fixture").find('.active').attr('id'), "home")
|
equal($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should activate element by tab id", function () {
|
test('should activate element by tab id', function () {
|
||||||
var pillsHTML =
|
var pillsHTML =
|
||||||
'<ul class="pills">'
|
'<ul class="pills">'
|
||||||
+ '<li><a href="#home">Home</a></li>'
|
+ '<li><a href="#home">Home</a></li>'
|
||||||
+ '<li><a href="#profile">Profile</a></li>'
|
+ '<li><a href="#profile">Profile</a></li>'
|
||||||
+ '</ul>'
|
+ '</ul>'
|
||||||
|
|
||||||
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo("#qunit-fixture")
|
$('<ul><li id="home"></li><li id="profile"></li></ul>').appendTo('#qunit-fixture')
|
||||||
|
|
||||||
$(pillsHTML).find('li:last a').tab('show')
|
$(pillsHTML).find('li:last a').tab('show')
|
||||||
equal($("#qunit-fixture").find('.active').attr('id'), "profile")
|
equal($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||||
|
|
||||||
$(pillsHTML).find('li:first a').tab('show')
|
$(pillsHTML).find('li:first a').tab('show')
|
||||||
equal($("#qunit-fixture").find('.active').attr('id'), "home")
|
equal($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
test("should not fire closed when close is prevented", function () {
|
test('should not fire closed when close is prevented', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
stop();
|
stop();
|
||||||
$('<div class="tab"/>')
|
$('<div class="tab"/>')
|
||||||
@@ -64,7 +64,7 @@ $(function () {
|
|||||||
.tab('show')
|
.tab('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("show and shown events should reference correct relatedTarget", function () {
|
test('show and shown events should reference correct relatedTarget', function () {
|
||||||
var dropHTML =
|
var dropHTML =
|
||||||
'<ul class="drop">'
|
'<ul class="drop">'
|
||||||
+ '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
|
+ '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
|
||||||
@@ -76,10 +76,10 @@ $(function () {
|
|||||||
+ '</ul>'
|
+ '</ul>'
|
||||||
|
|
||||||
$(dropHTML).find('ul>li:first a').tab('show').end()
|
$(dropHTML).find('ul>li:first a').tab('show').end()
|
||||||
.find('ul>li:last a').on('show', function(event){
|
.find('ul>li:last a').on('show', function (event) {
|
||||||
equal(event.relatedTarget.hash, "#1-1")
|
equal(event.relatedTarget.hash, '#1-1')
|
||||||
}).on('shown', function(event){
|
}).on('shown', function (event) {
|
||||||
equal(event.relatedTarget.hash, "#1-1")
|
equal(event.relatedTarget.hash, '#1-1')
|
||||||
}).tab('show')
|
}).tab('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,49 +1,49 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("tooltip")
|
module('tooltip')
|
||||||
|
|
||||||
test("should provide no conflict", function () {
|
test('should provide no conflict', function () {
|
||||||
var tooltip = $.fn.tooltip.noConflict()
|
var tooltip = $.fn.tooltip.noConflict()
|
||||||
ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)')
|
ok(!$.fn.tooltip, 'tooltip was set back to undefined (org value)')
|
||||||
$.fn.tooltip = tooltip
|
$.fn.tooltip = tooltip
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should be defined on jquery object", function () {
|
test('should be defined on jquery object', function () {
|
||||||
var div = $("<div></div>")
|
var div = $('<div></div>')
|
||||||
ok(div.tooltip, 'popover method is defined')
|
ok(div.tooltip, 'popover method is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should return element", function () {
|
test('should return element', function () {
|
||||||
var div = $("<div></div>")
|
var div = $('<div></div>')
|
||||||
ok(div.tooltip() == div, 'document.body returned')
|
ok(div.tooltip() == div, 'document.body returned')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should expose default settings", function () {
|
test('should expose default settings', function () {
|
||||||
ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined')
|
ok(!!$.fn.tooltip.Constructor.DEFAULTS, 'defaults is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should empty title attribute", function () {
|
test('should empty title attribute', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
|
||||||
ok(tooltip.attr('title') === '', 'title attribute was emptied')
|
ok(tooltip.attr('title') === '', 'title attribute was emptied')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should add data attribute for referencing original title", function () {
|
test('should add data attribute for referencing original title', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>').tooltip()
|
||||||
equal(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
|
equal(tooltip.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should place tooltips relative to placement option", function () {
|
test('should place tooltips relative to placement option', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({placement: 'bottom'})
|
.tooltip({placement: 'bottom'})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
|
|
||||||
ok($(".tooltip").is('.fade.bottom.in'), 'has correct classes applied')
|
ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied')
|
||||||
tooltip.tooltip('hide')
|
tooltip.tooltip('hide')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should allow html entities", function () {
|
test('should allow html entities', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
@@ -52,10 +52,10 @@ $(function () {
|
|||||||
|
|
||||||
ok($('.tooltip b').length, 'b tag was inserted')
|
ok($('.tooltip b').length, 'b tag was inserted')
|
||||||
tooltip.tooltip('hide')
|
tooltip.tooltip('hide')
|
||||||
ok(!$(".tooltip").length, 'tooltip removed')
|
ok(!$('.tooltip').length, 'tooltip removed')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should respect custom classes", function () {
|
test('should respect custom classes', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'})
|
.tooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'})
|
||||||
@@ -63,87 +63,87 @@ $(function () {
|
|||||||
|
|
||||||
ok($('.tooltip').hasClass('some-class'), 'custom class is present')
|
ok($('.tooltip').hasClass('some-class'), 'custom class is present')
|
||||||
tooltip.tooltip('hide')
|
tooltip.tooltip('hide')
|
||||||
ok(!$(".tooltip").length, 'tooltip removed')
|
ok(!$('.tooltip').length, 'tooltip removed')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should fire show event", function () {
|
test('should fire show event', function () {
|
||||||
stop()
|
stop()
|
||||||
var tooltip = $('<div title="tooltip title"></div>')
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
.on("show.bs.tooltip", function() {
|
.on('show.bs.tooltip', function () {
|
||||||
ok(true, "show was called")
|
ok(true, 'show was called')
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should fire shown event", function () {
|
test('should fire shown event', function () {
|
||||||
stop()
|
stop()
|
||||||
var tooltip = $('<div title="tooltip title"></div>')
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
.on("shown.bs.tooltip", function() {
|
.on('shown.bs.tooltip', function () {
|
||||||
ok(true, "shown was called")
|
ok(true, 'shown was called')
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not fire shown event when default prevented", function () {
|
test('should not fire shown event when default prevented', function () {
|
||||||
stop()
|
stop()
|
||||||
var tooltip = $('<div title="tooltip title"></div>')
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
.on("show.bs.tooltip", function(e) {
|
.on('show.bs.tooltip', function (e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
ok(true, "show was called")
|
ok(true, 'show was called')
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.on("shown.bs.tooltip", function() {
|
.on('shown.bs.tooltip', function () {
|
||||||
ok(false, "shown was called")
|
ok(false, 'shown was called')
|
||||||
})
|
})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should fire hide event", function () {
|
test('should fire hide event', function () {
|
||||||
stop()
|
stop()
|
||||||
var tooltip = $('<div title="tooltip title"></div>')
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
.on("shown.bs.tooltip", function() {
|
.on('shown.bs.tooltip', function () {
|
||||||
$(this).tooltip('hide')
|
$(this).tooltip('hide')
|
||||||
})
|
})
|
||||||
.on("hide.bs.tooltip", function() {
|
.on('hide.bs.tooltip', function () {
|
||||||
ok(true, "hide was called")
|
ok(true, 'hide was called')
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should fire hidden event", function () {
|
test('should fire hidden event', function () {
|
||||||
stop()
|
stop()
|
||||||
var tooltip = $('<div title="tooltip title"></div>')
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
.on("shown.bs.tooltip", function() {
|
.on('shown.bs.tooltip', function () {
|
||||||
$(this).tooltip('hide')
|
$(this).tooltip('hide')
|
||||||
})
|
})
|
||||||
.on("hidden.bs.tooltip", function() {
|
.on('hidden.bs.tooltip', function () {
|
||||||
ok(true, "hidden was called")
|
ok(true, 'hidden was called')
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not fire hidden event when default prevented", function () {
|
test('should not fire hidden event when default prevented', function () {
|
||||||
stop()
|
stop()
|
||||||
var tooltip = $('<div title="tooltip title"></div>')
|
var tooltip = $('<div title="tooltip title"></div>')
|
||||||
.on("shown.bs.tooltip", function() {
|
.on('shown.bs.tooltip', function () {
|
||||||
$(this).tooltip('hide')
|
$(this).tooltip('hide')
|
||||||
})
|
})
|
||||||
.on("hide.bs.tooltip", function(e) {
|
.on('hide.bs.tooltip', function (e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
ok(true, "hide was called")
|
ok(true, 'hide was called')
|
||||||
start()
|
start()
|
||||||
})
|
})
|
||||||
.on("hidden.bs.tooltip", function() {
|
.on('hidden.bs.tooltip', function () {
|
||||||
ok(false, "hidden was called")
|
ok(false, 'hidden was called')
|
||||||
})
|
})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not show tooltip if leave event occurs before delay expires", function () {
|
test('should not show tooltip if leave event occurs before delay expires', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({ delay: 200 })
|
.tooltip({ delay: 200 })
|
||||||
@@ -153,16 +153,16 @@ $(function () {
|
|||||||
tooltip.trigger('mouseenter')
|
tooltip.trigger('mouseenter')
|
||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
|
||||||
tooltip.trigger('mouseout')
|
tooltip.trigger('mouseout')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
|
||||||
start()
|
start()
|
||||||
}, 200)
|
}, 200)
|
||||||
}, 100)
|
}, 100)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not show tooltip if leave event occurs before delay expires, even if hide delay is 0", function () {
|
test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({ delay: { show: 200, hide: 0} })
|
.tooltip({ delay: { show: 200, hide: 0} })
|
||||||
@@ -172,16 +172,16 @@ $(function () {
|
|||||||
tooltip.trigger('mouseenter')
|
tooltip.trigger('mouseenter')
|
||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
|
||||||
tooltip.trigger('mouseout')
|
tooltip.trigger('mouseout')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
|
||||||
start()
|
start()
|
||||||
}, 200)
|
}, 200)
|
||||||
}, 100)
|
}, 100)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should wait 200 ms before hiding the tooltip", 3, function () {
|
test('should wait 200 ms before hiding the tooltip', 3, function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({ delay: { show: 0, hide: 200} })
|
.tooltip({ delay: { show: 0, hide: 200} })
|
||||||
@@ -191,19 +191,19 @@ $(function () {
|
|||||||
tooltip.trigger('mouseenter')
|
tooltip.trigger('mouseenter')
|
||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
|
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
|
||||||
tooltip.trigger('mouseout')
|
tooltip.trigger('mouseout')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in')
|
ok($('.tooltip').is('.fade.in'), '100ms:tooltip is still faded in')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok(!$(".tooltip").is('.in'), 'tooltip removed')
|
ok(!$('.tooltip').is('.in'), 'tooltip removed')
|
||||||
start()
|
start()
|
||||||
}, 150)
|
}, 150)
|
||||||
}, 100)
|
}, 100)
|
||||||
}, 1)
|
}, 1)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not hide tooltip if leave event occurs, then tooltip is show immediately again", function () {
|
test('should not hide tooltip if leave event occurs, then tooltip is show immediately again', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({ delay: { show: 0, hide: 200} })
|
.tooltip({ delay: { show: 0, hide: 200} })
|
||||||
@@ -213,52 +213,52 @@ $(function () {
|
|||||||
tooltip.trigger('mouseenter')
|
tooltip.trigger('mouseenter')
|
||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
|
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
|
||||||
tooltip.trigger('mouseout')
|
tooltip.trigger('mouseout')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok($(".tooltip").is('.fade.in'), '100ms:tooltip is still faded in')
|
ok($('.tooltip').is('.fade.in'), '100ms:tooltip is still faded in')
|
||||||
tooltip.trigger('mouseenter')
|
tooltip.trigger('mouseenter')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok($(".tooltip").is('.in'), 'tooltip removed')
|
ok($('.tooltip').is('.in'), 'tooltip removed')
|
||||||
start()
|
start()
|
||||||
}, 150)
|
}, 150)
|
||||||
}, 100)
|
}, 100)
|
||||||
}, 1)
|
}, 1)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should not show tooltip if leave event occurs before delay expires", function () {
|
test('should not show tooltip if leave event occurs before delay expires', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({ delay: 100 })
|
.tooltip({ delay: 100 })
|
||||||
stop()
|
stop()
|
||||||
tooltip.trigger('mouseenter')
|
tooltip.trigger('mouseenter')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
|
||||||
tooltip.trigger('mouseout')
|
tooltip.trigger('mouseout')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
|
||||||
start()
|
start()
|
||||||
}, 100)
|
}, 100)
|
||||||
}, 50)
|
}, 50)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should show tooltip if leave event hasn't occured before delay expires", function () {
|
test('should show tooltip if leave event hasn\'t occured before delay expires', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({ delay: 150 })
|
.tooltip({ delay: 150 })
|
||||||
stop()
|
stop()
|
||||||
tooltip.trigger('mouseenter')
|
tooltip.trigger('mouseenter')
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok(!$(".tooltip").is('.fade.in'), 'tooltip is not faded in')
|
ok(!$('.tooltip').is('.fade.in'), 'tooltip is not faded in')
|
||||||
}, 100)
|
}, 100)
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
ok($(".tooltip").is('.fade.in'), 'tooltip has faded in')
|
ok($('.tooltip').is('.fade.in'), 'tooltip has faded in')
|
||||||
start()
|
start()
|
||||||
}, 200)
|
}, 200)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should destroy tooltip", function () {
|
test('should destroy tooltip', function () {
|
||||||
var tooltip = $('<div/>').tooltip().on('click.foo', function(){})
|
var tooltip = $('<div/>').tooltip().on('click.foo', function () {})
|
||||||
ok(tooltip.data('bs.tooltip'), 'tooltip has data')
|
ok(tooltip.data('bs.tooltip'), 'tooltip has data')
|
||||||
ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event')
|
ok($._data(tooltip[0], 'events').mouseover && $._data(tooltip[0], 'events').mouseout, 'tooltip has hover event')
|
||||||
ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event')
|
ok($._data(tooltip[0], 'events').click[0].namespace == 'foo', 'tooltip has extra click.foo event')
|
||||||
@@ -270,66 +270,66 @@ $(function () {
|
|||||||
ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events')
|
ok(!$._data(tooltip[0], 'events').mouseover && !$._data(tooltip[0], 'events').mouseout, 'tooltip does not have any events')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should show tooltip with delegate selector on click", function () {
|
test('should show tooltip with delegate selector on click', function () {
|
||||||
var div = $('<div><a href="#" rel="tooltip" title="Another tooltip"></a></div>')
|
var div = $('<div><a href="#" rel="tooltip" title="Another tooltip"></a></div>')
|
||||||
var tooltip = div.appendTo('#qunit-fixture')
|
var tooltip = div.appendTo('#qunit-fixture')
|
||||||
.tooltip({ selector: 'a[rel=tooltip]',
|
.tooltip({ selector: 'a[rel=tooltip]',
|
||||||
trigger: 'click' })
|
trigger: 'click' })
|
||||||
div.find('a').trigger('click')
|
div.find('a').trigger('click')
|
||||||
ok($(".tooltip").is('.fade.in'), 'tooltip is faded in')
|
ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should show tooltip when toggle is called", function () {
|
test('should show tooltip when toggle is called', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="tooltip on toggle"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({trigger: 'manual'})
|
.tooltip({trigger: 'manual'})
|
||||||
.tooltip('toggle')
|
.tooltip('toggle')
|
||||||
ok($(".tooltip").is('.fade.in'), 'tooltip should be toggled in')
|
ok($('.tooltip').is('.fade.in'), 'tooltip should be toggled in')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should place tooltips inside the body", function () {
|
test('should place tooltips inside the body', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({container:'body'})
|
.tooltip({container: 'body'})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
ok($("body > .tooltip").length, 'inside the body')
|
ok($('body > .tooltip').length, 'inside the body')
|
||||||
ok(!$("#qunit-fixture > .tooltip").length, 'not found in parent')
|
ok(!$('#qunit-fixture > .tooltip').length, 'not found in parent')
|
||||||
tooltip.tooltip('hide')
|
tooltip.tooltip('hide')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should place tooltip inside window", function(){
|
test('should place tooltip inside window', function () {
|
||||||
var container = $("<div />").appendTo("body")
|
var container = $('<div />').appendTo('body')
|
||||||
.css({position: "absolute", width: 200, height: 200, bottom: 0, left: 0})
|
.css({position: 'absolute', width: 200, height: 200, bottom: 0, left: 0})
|
||||||
, tooltip = $("<a href='#' title='Very very very very very very very very long tooltip'>Hover me</a>")
|
, tooltip = $('<a href="#" title="Very very very very very very very very long tooltip">Hover me</a>')
|
||||||
.css({position: "absolute", top:0, left: 0})
|
.css({position: 'absolute', top: 0, left: 0})
|
||||||
.appendTo(container)
|
.appendTo(container)
|
||||||
.tooltip({placement: "top", animate: false})
|
.tooltip({placement: 'top', animate: false})
|
||||||
.tooltip("show")
|
.tooltip('show')
|
||||||
|
|
||||||
stop()
|
stop()
|
||||||
|
|
||||||
setTimeout(function(){
|
setTimeout(function () {
|
||||||
ok($(".tooltip").offset().left >= 0)
|
ok($('.tooltip').offset().left >= 0)
|
||||||
|
|
||||||
start()
|
start()
|
||||||
container.remove()
|
container.remove()
|
||||||
}, 100)
|
}, 100)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should place tooltip on top of element", function(){
|
test('should place tooltip on top of element', function () {
|
||||||
var container = $("<div />").appendTo("body")
|
var container = $('<div />').appendTo('body')
|
||||||
.css({position: "absolute", bottom: 0, left: 0, textAlign: "right", width: 300, height: 300})
|
.css({position: 'absolute', bottom: 0, left: 0, textAlign: 'right', width: 300, height: 300})
|
||||||
, p = $("<p style='margin-top:200px' />").appendTo(container)
|
, p = $('<p style="margin-top:200px" />').appendTo(container)
|
||||||
, tooltiped = $("<a href='#' title='very very very very very very very long tooltip'>Hover me</a>")
|
, tooltiped = $('<a href="#" title="very very very very very very very long tooltip">Hover me</a>')
|
||||||
.css({marginTop: 200})
|
.css({marginTop: 200})
|
||||||
.appendTo(p)
|
.appendTo(p)
|
||||||
.tooltip({placement: "top", animate: false})
|
.tooltip({placement: 'top', animate: false})
|
||||||
.tooltip("show")
|
.tooltip('show')
|
||||||
|
|
||||||
stop()
|
stop()
|
||||||
|
|
||||||
setTimeout(function(){
|
setTimeout(function () {
|
||||||
var tooltip = container.find(".tooltip")
|
var tooltip = container.find('.tooltip')
|
||||||
|
|
||||||
start()
|
start()
|
||||||
ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top)
|
ok(tooltip.offset().top + tooltip.outerHeight() <= tooltiped.offset().top)
|
||||||
@@ -337,21 +337,21 @@ $(function () {
|
|||||||
}, 100)
|
}, 100)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should add position class before positioning so that position-specific styles are taken into account", function(){
|
test('should add position class before positioning so that position-specific styles are taken into account', function () {
|
||||||
$("head").append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>')
|
$('head').append('<style> .tooltip.right { white-space: nowrap; } .tooltip.right .tooltip-inner { max-width: none; } </style>')
|
||||||
|
|
||||||
var container = $("<div />").appendTo("body")
|
var container = $('<div />').appendTo('body')
|
||||||
, target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>')
|
, target = $('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"></a>')
|
||||||
.appendTo(container)
|
.appendTo(container)
|
||||||
.tooltip({placement: 'right'})
|
.tooltip({placement: 'right'})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
, tooltip = container.find(".tooltip")
|
, tooltip = container.find('.tooltip')
|
||||||
|
|
||||||
ok( Math.round(target.offset().top + target[0].offsetHeight/2 - tooltip[0].offsetHeight/2) === Math.round(tooltip.offset().top) )
|
ok( Math.round(target.offset().top + (target[0].offsetHeight / 2) - (tooltip[0].offsetHeight / 2)) === Math.round(tooltip.offset().top) )
|
||||||
target.tooltip('hide')
|
target.tooltip('hide')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("tooltip title test #1", function () {
|
test('tooltip title test #1', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({
|
.tooltip({
|
||||||
@@ -359,10 +359,10 @@ $(function () {
|
|||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')
|
equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')
|
||||||
tooltip.tooltip('hide')
|
tooltip.tooltip('hide')
|
||||||
ok(!$(".tooltip").length, 'tooltip removed')
|
ok(!$('.tooltip').length, 'tooltip removed')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("tooltip title test #2", function () {
|
test('tooltip title test #2', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({
|
.tooltip({
|
||||||
@@ -371,10 +371,10 @@ $(function () {
|
|||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option')
|
equal($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while prefered over title option')
|
||||||
tooltip.tooltip('hide')
|
tooltip.tooltip('hide')
|
||||||
ok(!$(".tooltip").length, 'tooltip removed')
|
ok(!$('.tooltip').length, 'tooltip removed')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("tooltip title test #3", function () {
|
test('tooltip title test #3', function () {
|
||||||
var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
|
var tooltip = $('<a href="#" rel="tooltip" style="display: inline-block; position: absolute; top: 0; left: 0;"></a>')
|
||||||
.appendTo('#qunit-fixture')
|
.appendTo('#qunit-fixture')
|
||||||
.tooltip({
|
.tooltip({
|
||||||
@@ -383,10 +383,10 @@ $(function () {
|
|||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
|
equal($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
|
||||||
tooltip.tooltip('hide')
|
tooltip.tooltip('hide')
|
||||||
ok(!$(".tooltip").length, 'tooltip removed')
|
ok(!$('.tooltip').length, 'tooltip removed')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("tooltips should be placed dynamically, with the dynamic placement option", function () {
|
test('tooltips should be placed dynamically, with the dynamic placement option', function () {
|
||||||
$.support.transition = false
|
$.support.transition = false
|
||||||
var ttContainer = $('<div id="dynamic-tt-test"/>').css({
|
var ttContainer = $('<div id="dynamic-tt-test"/>').css({
|
||||||
'height' : 400
|
'height' : 400
|
||||||
@@ -403,7 +403,7 @@ $(function () {
|
|||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
|
|
||||||
|
|
||||||
ok($(".tooltip").is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
|
ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned bottom')
|
||||||
|
|
||||||
topTooltip.tooltip('hide')
|
topTooltip.tooltip('hide')
|
||||||
|
|
||||||
@@ -412,7 +412,7 @@ $(function () {
|
|||||||
.tooltip({placement: 'right auto'})
|
.tooltip({placement: 'right auto'})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
|
|
||||||
ok($(".tooltip").is('.left'), 'right positioned tooltip is dynamically positioned left')
|
ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left')
|
||||||
rightTooltip.tooltip('hide')
|
rightTooltip.tooltip('hide')
|
||||||
|
|
||||||
var bottomTooltip = $('<div style="display: inline-block; position: absolute; bottom: 0;" rel="tooltip" title="Bottom tooltip">Bottom Dynamic Tooltip</div>')
|
var bottomTooltip = $('<div style="display: inline-block; position: absolute; bottom: 0;" rel="tooltip" title="Bottom tooltip">Bottom Dynamic Tooltip</div>')
|
||||||
@@ -420,7 +420,7 @@ $(function () {
|
|||||||
.tooltip({placement: 'auto bottom'})
|
.tooltip({placement: 'auto bottom'})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
|
|
||||||
ok($(".tooltip").is('.top'), 'bottom positioned tooltip is dynamically positioned top')
|
ok($('.tooltip').is('.top'), 'bottom positioned tooltip is dynamically positioned top')
|
||||||
bottomTooltip.tooltip('hide')
|
bottomTooltip.tooltip('hide')
|
||||||
|
|
||||||
var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
|
var leftTooltip = $('<div style="display: inline-block; position: absolute; left: 0;" rel="tooltip" title="Left tooltip">Left Dynamic Tooltip</div>')
|
||||||
@@ -428,7 +428,7 @@ $(function () {
|
|||||||
.tooltip({placement: 'auto left'})
|
.tooltip({placement: 'auto left'})
|
||||||
.tooltip('show')
|
.tooltip('show')
|
||||||
|
|
||||||
ok($(".tooltip").is('.right'), 'left positioned tooltip is dynamically positioned right')
|
ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right')
|
||||||
leftTooltip.tooltip('hide')
|
leftTooltip.tooltip('hide')
|
||||||
|
|
||||||
ttContainer.remove()
|
ttContainer.remove()
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
$(function () {
|
$(function () {
|
||||||
|
|
||||||
module("transition")
|
module('transition')
|
||||||
|
|
||||||
test("should be defined on jquery support object", function () {
|
test('should be defined on jquery support object', function () {
|
||||||
ok($.support.transition !== undefined, 'transition object is defined')
|
ok($.support.transition !== undefined, 'transition object is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
test("should provide an end object", function () {
|
test('should provide an end object', function () {
|
||||||
ok($.support.transition ? $.support.transition.end : true, 'end string is defined')
|
ok($.support.transition ? $.support.transition.end : true, 'end string is defined')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// TOOLTIP PUBLIC CLASS DEFINITION
|
// TOOLTIP PUBLIC CLASS DEFINITION
|
||||||
// ===============================
|
// ===============================
|
||||||
@@ -133,7 +133,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
Tooltip.prototype.show = function () {
|
Tooltip.prototype.show = function () {
|
||||||
var e = $.Event('show.bs.'+ this.type)
|
var e = $.Event('show.bs.' + this.type)
|
||||||
|
|
||||||
if (this.hasContent() && this.enabled) {
|
if (this.hasContent() && this.enabled) {
|
||||||
this.$element.trigger(e)
|
this.$element.trigger(e)
|
||||||
@@ -192,7 +192,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Tooltip.prototype.applyPlacement = function(offset, placement) {
|
Tooltip.prototype.applyPlacement = function (offset, placement) {
|
||||||
var replace
|
var replace
|
||||||
var $tip = this.tip()
|
var $tip = this.tip()
|
||||||
var width = $tip[0].offsetWidth
|
var width = $tip[0].offsetWidth
|
||||||
@@ -243,8 +243,8 @@
|
|||||||
if (replace) $tip.offset(offset)
|
if (replace) $tip.offset(offset)
|
||||||
}
|
}
|
||||||
|
|
||||||
Tooltip.prototype.replaceArrow = function(delta, dimension, position) {
|
Tooltip.prototype.replaceArrow = function (delta, dimension, position) {
|
||||||
this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + "%") : '')
|
this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + '%') : '')
|
||||||
}
|
}
|
||||||
|
|
||||||
Tooltip.prototype.setContent = function () {
|
Tooltip.prototype.setContent = function () {
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
* ======================================================================== */
|
* ======================================================================== */
|
||||||
|
|
||||||
|
|
||||||
+function ($) { "use strict";
|
+function ($) { 'use strict';
|
||||||
|
|
||||||
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
|
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
|
||||||
// ============================================================
|
// ============================================================
|
||||||
|
|||||||
@@ -16,7 +16,6 @@
|
|||||||
@import "buttons.less";
|
@import "buttons.less";
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
@import "component-animations.less";
|
|
||||||
@import "glyphicons.less";
|
@import "glyphicons.less";
|
||||||
@import "dropdowns.less";
|
@import "dropdowns.less";
|
||||||
@import "button-groups.less";
|
@import "button-groups.less";
|
||||||
@@ -45,5 +44,6 @@
|
|||||||
@import "carousel.less";
|
@import "carousel.less";
|
||||||
|
|
||||||
// Utility classes
|
// Utility classes
|
||||||
|
@import "component-animations.less";
|
||||||
@import "utilities.less";
|
@import "utilities.less";
|
||||||
@import "responsive-utilities.less";
|
@import "responsive-utilities.less";
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
|
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
padding: 8px 15px;
|
padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
|
||||||
margin-bottom: @line-height-computed;
|
margin-bottom: @line-height-computed;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background-color: @breadcrumb-bg;
|
background-color: @breadcrumb-bg;
|
||||||
|
|||||||
@@ -37,18 +37,17 @@
|
|||||||
|
|
||||||
// Optional: Group multiple button groups together for a toolbar
|
// Optional: Group multiple button groups together for a toolbar
|
||||||
.btn-toolbar {
|
.btn-toolbar {
|
||||||
.clearfix();
|
margin-left: -5px; // Offset the first child's margin
|
||||||
|
&:extend(.clearfix all);
|
||||||
|
|
||||||
.btn-group {
|
.btn-group,
|
||||||
|
.input-group {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
// Space out series of button groups
|
|
||||||
> .btn,
|
> .btn,
|
||||||
> .btn-group {
|
> .btn-group,
|
||||||
+ .btn,
|
> .input-group {
|
||||||
+ .btn-group {
|
margin-left: 5px;
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -157,7 +156,7 @@
|
|||||||
|
|
||||||
// Clear floats so dropdown menus can be properly placed
|
// Clear floats so dropdown menus can be properly placed
|
||||||
> .btn-group {
|
> .btn-group {
|
||||||
.clearfix();
|
&:extend(.clearfix all);
|
||||||
> .btn {
|
> .btn {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
// Base styles
|
// Base styles
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
// Core styles
|
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 0; // For input.btn
|
margin-bottom: 0; // For input.btn
|
||||||
@@ -45,7 +44,6 @@
|
|||||||
.opacity(.65);
|
.opacity(.65);
|
||||||
.box-shadow(none);
|
.box-shadow(none);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -58,6 +56,10 @@
|
|||||||
.btn-primary {
|
.btn-primary {
|
||||||
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
|
.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
|
||||||
}
|
}
|
||||||
|
// Success appears as green
|
||||||
|
.btn-success {
|
||||||
|
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
|
||||||
|
}
|
||||||
// Warning appears as orange
|
// Warning appears as orange
|
||||||
.btn-warning {
|
.btn-warning {
|
||||||
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
|
.button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
|
||||||
@@ -66,10 +68,6 @@
|
|||||||
.btn-danger {
|
.btn-danger {
|
||||||
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
|
.button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
|
||||||
}
|
}
|
||||||
// Success appears as green
|
|
||||||
.btn-success {
|
|
||||||
.button-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
|
|
||||||
}
|
|
||||||
// Info appears as blue-green
|
// Info appears as blue-green
|
||||||
.btn-info {
|
.btn-info {
|
||||||
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
|
.button-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
|
||||||
@@ -123,13 +121,12 @@
|
|||||||
// line-height: ensure even-numbered height of button next to large input
|
// line-height: ensure even-numbered height of button next to large input
|
||||||
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
.button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large);
|
||||||
}
|
}
|
||||||
.btn-sm,
|
.btn-sm {
|
||||||
.btn-xs {
|
|
||||||
// line-height: ensure proper height of button next to small input
|
// line-height: ensure proper height of button next to small input
|
||||||
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
.button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||||
}
|
}
|
||||||
.btn-xs {
|
.btn-xs {
|
||||||
padding: 1px 5px;
|
.button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -21,6 +21,16 @@ code {
|
|||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// User input typically entered via keyboard
|
||||||
|
kbd {
|
||||||
|
padding: 2px 4px;
|
||||||
|
font-size: 90%;
|
||||||
|
color: @kbd-color;
|
||||||
|
background-color: @kbd-bg;
|
||||||
|
border-radius: @border-radius-small;
|
||||||
|
box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
|
||||||
|
}
|
||||||
|
|
||||||
// Blocks of code
|
// Blocks of code
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
|
|||||||
@@ -46,6 +46,8 @@
|
|||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
|
|
||||||
// Aligns the dropdown menu to right
|
// Aligns the dropdown menu to right
|
||||||
|
//
|
||||||
|
// Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]`
|
||||||
&.pull-right {
|
&.pull-right {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
@@ -126,6 +128,25 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Menu positioning
|
||||||
|
//
|
||||||
|
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||||
|
// menu with the parent.
|
||||||
|
.dropdown-menu-right {
|
||||||
|
left: auto; // Reset the default from `.dropdown-menu`
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
// With v3, we enabled auto-flipping if you have a dropdown within a right
|
||||||
|
// aligned nav component. To enable the undoing of that, we provide an override
|
||||||
|
// to restore the default dropdown menu alignment.
|
||||||
|
//
|
||||||
|
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
|
||||||
|
// `.pull-right` nav component.
|
||||||
|
.dropdown-menu-left {
|
||||||
|
left: 0;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
// Dropdown section headers
|
// Dropdown section headers
|
||||||
.dropdown-header {
|
.dropdown-header {
|
||||||
display: block;
|
display: block;
|
||||||
@@ -142,7 +163,7 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: @zindex-dropdown - 10;
|
z-index: (@zindex-dropdown - 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Right aligned dropdowns
|
// Right aligned dropdowns
|
||||||
@@ -180,7 +201,12 @@
|
|||||||
@media (min-width: @grid-float-breakpoint) {
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
.navbar-right {
|
.navbar-right {
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
.pull-right > .dropdown-menu();
|
.dropdown-menu-right();
|
||||||
|
}
|
||||||
|
// Necessary for overrides of the default right aligned menu.
|
||||||
|
// Will remove come v4 in all likelihood.
|
||||||
|
.dropdown-menu-left {
|
||||||
|
.dropdown-menu-left();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -89,7 +89,6 @@ output {
|
|||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
line-height: @line-height-base;
|
line-height: @line-height-base;
|
||||||
color: @input-color;
|
color: @input-color;
|
||||||
vertical-align: middle;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -123,7 +122,6 @@ output {
|
|||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
line-height: @line-height-base;
|
line-height: @line-height-base;
|
||||||
color: @input-color;
|
color: @input-color;
|
||||||
vertical-align: middle;
|
|
||||||
background-color: @input-bg;
|
background-color: @input-bg;
|
||||||
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||||
border: 1px solid @input-border;
|
border: 1px solid @input-border;
|
||||||
@@ -179,10 +177,8 @@ output {
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
vertical-align: middle;
|
|
||||||
label {
|
label {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-bottom: 0;
|
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@@ -307,6 +303,7 @@ input[type="checkbox"],
|
|||||||
// In navbar-form, allow folks to *not* use `.form-group`
|
// In navbar-form, allow folks to *not* use `.form-group`
|
||||||
.form-control {
|
.form-control {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Override `width: 100%;` when not within a `.form-group`
|
// Override `width: 100%;` when not within a `.form-group`
|
||||||
@@ -323,6 +320,7 @@ input[type="checkbox"],
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.radio input[type="radio"],
|
.radio input[type="radio"],
|
||||||
.checkbox input[type="checkbox"] {
|
.checkbox input[type="checkbox"] {
|
||||||
@@ -354,7 +352,7 @@ input[type="checkbox"],
|
|||||||
// and other content below items
|
// and other content below items
|
||||||
.radio,
|
.radio,
|
||||||
.checkbox {
|
.checkbox {
|
||||||
min-height: @line-height-computed + (@padding-base-vertical + 1);
|
min-height: (@line-height-computed + (@padding-base-vertical + 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make form groups behave like rows
|
// Make form groups behave like rows
|
||||||
|
|||||||
@@ -2,14 +2,18 @@
|
|||||||
// Grid system
|
// Grid system
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
// Set the container width, and override it for fixed navbars in media queries
|
|
||||||
|
// Container widths
|
||||||
|
//
|
||||||
|
// Set the container width, and override it for fixed navbars in media queries.
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
.container-fixed();
|
.container-fixed();
|
||||||
|
|
||||||
@media (min-width: @screen-sm) {
|
@media (min-width: @screen-sm-min) {
|
||||||
width: @container-sm;
|
width: @container-sm;
|
||||||
}
|
}
|
||||||
@media (min-width: @screen-md) {
|
@media (min-width: @screen-md-min) {
|
||||||
width: @container-md;
|
width: @container-md;
|
||||||
}
|
}
|
||||||
@media (min-width: @screen-lg-min) {
|
@media (min-width: @screen-lg-min) {
|
||||||
@@ -17,12 +21,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// mobile first defaults
|
|
||||||
|
// Fluid container
|
||||||
|
//
|
||||||
|
// Utilizes the mixin meant for fixed width containers, but without any defined
|
||||||
|
// width for fluid, full width layouts.
|
||||||
|
|
||||||
|
.container-fluid {
|
||||||
|
.container-fixed();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Row
|
||||||
|
//
|
||||||
|
// Rows contain and clear the floats of your columns.
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
.make-row();
|
.make-row();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Columns
|
||||||
|
//
|
||||||
// Common styles for small and large grid columns
|
// Common styles for small and large grid columns
|
||||||
|
|
||||||
.make-grid-columns();
|
.make-grid-columns();
|
||||||
|
|
||||||
|
|
||||||
@@ -76,4 +98,3 @@
|
|||||||
.make-grid(@grid-columns, lg, push);
|
.make-grid(@grid-columns, lg, push);
|
||||||
.make-grid(@grid-columns, lg, offset);
|
.make-grid(@grid-columns, lg, offset);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -17,6 +17,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.form-control {
|
.form-control {
|
||||||
|
// IE9 fubars the placeholder attribute in text inputs and the arrows on
|
||||||
|
// select elements in input groups. To fix it, we float the input. Details:
|
||||||
|
// https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
|
||||||
|
float: left;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
@@ -121,16 +126,26 @@
|
|||||||
&:last-child > .btn {
|
&:last-child > .btn {
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.input-group-btn > .btn {
|
> .btn {
|
||||||
position: relative;
|
position: relative;
|
||||||
// Jankily prevent input button groups from wrapping
|
|
||||||
+ .btn {
|
&:not(:first-of-type):not(:last-of-type) {
|
||||||
margin-left: -4px;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
// Bring the "active" button to the front
|
|
||||||
&:hover,
|
// Jankily prevent input button groups from wrapping
|
||||||
&:active {
|
+ .btn {
|
||||||
z-index: 2;
|
margin-left: -4px;
|
||||||
|
}
|
||||||
|
+ .btn:last-of-type {
|
||||||
|
margin-left: -5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bring the "active" button to the front
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,19 +6,17 @@
|
|||||||
.jumbotron {
|
.jumbotron {
|
||||||
padding: @jumbotron-padding;
|
padding: @jumbotron-padding;
|
||||||
margin-bottom: @jumbotron-padding;
|
margin-bottom: @jumbotron-padding;
|
||||||
font-size: @jumbotron-font-size;
|
|
||||||
font-weight: 200;
|
|
||||||
line-height: (@line-height-base * 1.5);
|
|
||||||
color: @jumbotron-color;
|
color: @jumbotron-color;
|
||||||
background-color: @jumbotron-bg;
|
background-color: @jumbotron-bg;
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
.h1 {
|
.h1 {
|
||||||
line-height: 1;
|
|
||||||
color: @jumbotron-heading-color;
|
color: @jumbotron-heading-color;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
line-height: 1.4;
|
margin-bottom: (@jumbotron-padding / 2);
|
||||||
|
font-size: @jumbotron-font-size;
|
||||||
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container & {
|
.container & {
|
||||||
|
|||||||
@@ -2,17 +2,21 @@
|
|||||||
// List groups
|
// List groups
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
// Base class
|
// Base class
|
||||||
//
|
//
|
||||||
// Easily usable on <ul>, <ol>, or <div>.
|
// Easily usable on <ul>, <ol>, or <div>.
|
||||||
|
|
||||||
.list-group {
|
.list-group {
|
||||||
// No need to set list-style: none; since .list-group-item is block level
|
// No need to set list-style: none; since .list-group-item is block level
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
padding-left: 0; // reset padding because ul and ol
|
padding-left: 0; // reset padding because ul and ol
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Individual list items
|
// Individual list items
|
||||||
// -------------------------
|
//
|
||||||
|
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||||
|
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -41,7 +45,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Linked list items
|
// Linked list items
|
||||||
|
//
|
||||||
|
// Use anchor elements instead of `li`s or `div`s to create linked list items.
|
||||||
|
// Includes an extra `.active` modifier class for showing selected items.
|
||||||
|
|
||||||
a.list-group-item {
|
a.list-group-item {
|
||||||
color: @list-group-link-color;
|
color: @list-group-link-color;
|
||||||
|
|
||||||
@@ -70,13 +79,26 @@ a.list-group-item {
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
.list-group-item-text {
|
.list-group-item-text {
|
||||||
color: lighten(@list-group-active-bg, 40%);
|
color: @list-group-active-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Contextual variants
|
||||||
|
//
|
||||||
|
// Add modifier classes to change text and background color on individual items.
|
||||||
|
// Organizationally, this must come after the `:hover` states.
|
||||||
|
|
||||||
|
.list-group-item-variant(success; @state-success-bg; @state-success-text);
|
||||||
|
.list-group-item-variant(warning; @state-warning-bg; @state-warning-text);
|
||||||
|
.list-group-item-variant(danger; @state-danger-bg; @state-danger-text);
|
||||||
|
.list-group-item-variant(info; @state-info-bg; @state-info-text);
|
||||||
|
|
||||||
|
|
||||||
// Custom content options
|
// Custom content options
|
||||||
// -------------------------
|
//
|
||||||
|
// Extra classes for creating well-formatted content within `.list-group-item`s.
|
||||||
|
|
||||||
.list-group-item-heading {
|
.list-group-item-heading {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
.tab-focus() {
|
.tab-focus() {
|
||||||
// Default
|
// Default
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
//Webkit
|
// WebKit
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
@@ -147,17 +147,17 @@
|
|||||||
// Transformations
|
// Transformations
|
||||||
.rotate(@degrees) {
|
.rotate(@degrees) {
|
||||||
-webkit-transform: rotate(@degrees);
|
-webkit-transform: rotate(@degrees);
|
||||||
-ms-transform: rotate(@degrees); // IE9+
|
-ms-transform: rotate(@degrees); // IE9 only
|
||||||
transform: rotate(@degrees);
|
transform: rotate(@degrees);
|
||||||
}
|
}
|
||||||
.scale(@ratio) {
|
.scale(@ratio; @ratio-y...) {
|
||||||
-webkit-transform: scale(@ratio);
|
-webkit-transform: scale(@ratio, @ratio-y);
|
||||||
-ms-transform: scale(@ratio); // IE9+
|
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
|
||||||
transform: scale(@ratio);
|
transform: scale(@ratio, @ratio-y);
|
||||||
}
|
}
|
||||||
.translate(@x; @y) {
|
.translate(@x; @y) {
|
||||||
-webkit-transform: translate(@x, @y);
|
-webkit-transform: translate(@x, @y);
|
||||||
-ms-transform: translate(@x, @y); // IE9+
|
-ms-transform: translate(@x, @y); // IE9 only
|
||||||
transform: translate(@x, @y);
|
transform: translate(@x, @y);
|
||||||
}
|
}
|
||||||
.skew(@x; @y) {
|
.skew(@x; @y) {
|
||||||
@@ -172,12 +172,12 @@
|
|||||||
|
|
||||||
.rotateX(@degrees) {
|
.rotateX(@degrees) {
|
||||||
-webkit-transform: rotateX(@degrees);
|
-webkit-transform: rotateX(@degrees);
|
||||||
-ms-transform: rotateX(@degrees); // IE9+
|
-ms-transform: rotateX(@degrees); // IE9 only
|
||||||
transform: rotateX(@degrees);
|
transform: rotateX(@degrees);
|
||||||
}
|
}
|
||||||
.rotateY(@degrees) {
|
.rotateY(@degrees) {
|
||||||
-webkit-transform: rotateY(@degrees);
|
-webkit-transform: rotateY(@degrees);
|
||||||
-ms-transform: rotateY(@degrees); // IE9+
|
-ms-transform: rotateY(@degrees); // IE9 only
|
||||||
transform: rotateY(@degrees);
|
transform: rotateY(@degrees);
|
||||||
}
|
}
|
||||||
.perspective(@perspective) {
|
.perspective(@perspective) {
|
||||||
@@ -193,6 +193,7 @@
|
|||||||
.transform-origin(@origin) {
|
.transform-origin(@origin) {
|
||||||
-webkit-transform-origin: @origin;
|
-webkit-transform-origin: @origin;
|
||||||
-moz-transform-origin: @origin;
|
-moz-transform-origin: @origin;
|
||||||
|
-ms-transform-origin: @origin; // IE9 only
|
||||||
transform-origin: @origin;
|
transform-origin: @origin;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -201,6 +202,30 @@
|
|||||||
-webkit-animation: @animation;
|
-webkit-animation: @animation;
|
||||||
animation: @animation;
|
animation: @animation;
|
||||||
}
|
}
|
||||||
|
.animation-name(@name) {
|
||||||
|
-webkit-animation-name: @name;
|
||||||
|
animation-name: @name;
|
||||||
|
}
|
||||||
|
.animation-duration(@duration) {
|
||||||
|
-webkit-animation-duration: @duration;
|
||||||
|
animation-duration: @duration;
|
||||||
|
}
|
||||||
|
.animation-timing-function(@timing-function) {
|
||||||
|
-webkit-animation-timing-function: @timing-function;
|
||||||
|
animation-timing-function: @timing-function;
|
||||||
|
}
|
||||||
|
.animation-delay(@delay) {
|
||||||
|
-webkit-animation-delay: @delay;
|
||||||
|
animation-delay: @delay;
|
||||||
|
}
|
||||||
|
.animation-iteration-count(@iteration-count) {
|
||||||
|
-webkit-animation-iteration-count: @iteration-count;
|
||||||
|
animation-iteration-count: @iteration-count;
|
||||||
|
}
|
||||||
|
.animation-direction(@direction) {
|
||||||
|
-webkit-animation-direction: @direction;
|
||||||
|
animation-direction: @direction;
|
||||||
|
}
|
||||||
|
|
||||||
// Backface visibility
|
// Backface visibility
|
||||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||||
@@ -274,10 +299,8 @@
|
|||||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||||
// Color stops are not available in IE9 and below.
|
// Color stops are not available in IE9 and below.
|
||||||
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
|
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
|
||||||
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
|
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+
|
||||||
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
|
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||||
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
|
|
||||||
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
|
||||||
}
|
}
|
||||||
@@ -287,47 +310,36 @@
|
|||||||
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
||||||
// Color stops are not available in IE9 and below.
|
// Color stops are not available in IE9 and below.
|
||||||
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
|
.vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
|
||||||
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
|
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+
|
||||||
background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1+, Chrome 10+
|
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||||
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
|
|
||||||
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
|
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
|
||||||
}
|
}
|
||||||
|
|
||||||
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
|
.directional(@start-color: #555; @end-color: #333; @deg: 45deg) {
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
|
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+
|
||||||
background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
|
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
|
||||||
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
|
|
||||||
}
|
}
|
||||||
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
|
.horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
|
||||||
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
|
|
||||||
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
|
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
|
||||||
background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
|
|
||||||
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
|
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
||||||
}
|
}
|
||||||
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
|
.vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) {
|
||||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
|
|
||||||
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
||||||
background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
|
|
||||||
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
||||||
}
|
}
|
||||||
.radial(@inner-color: #555; @outer-color: #333) {
|
.radial(@inner-color: #555; @outer-color: #333) {
|
||||||
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
|
|
||||||
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
|
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
|
||||||
background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
|
|
||||||
background-image: radial-gradient(circle, @inner-color, @outer-color);
|
background-image: radial-gradient(circle, @inner-color, @outer-color);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
|
.striped(@color: rgba(255,255,255,.15); @angle: 45deg) {
|
||||||
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent));
|
|
||||||
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
||||||
background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
|
||||||
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -366,7 +378,7 @@
|
|||||||
//
|
//
|
||||||
// Keep images from scaling beyond the width of their parents.
|
// Keep images from scaling beyond the width of their parents.
|
||||||
|
|
||||||
.img-responsive(@display: block;) {
|
.img-responsive(@display: block) {
|
||||||
display: @display;
|
display: @display;
|
||||||
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
max-width: 100%; // Part 1: Set a maximum relative to the parent
|
||||||
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
|
||||||
@@ -427,29 +439,57 @@
|
|||||||
.table-row-variant(@state; @background) {
|
.table-row-variant(@state; @background) {
|
||||||
// Exact selectors below required to override `.table-striped` and prevent
|
// Exact selectors below required to override `.table-striped` and prevent
|
||||||
// inheritance to nested tables.
|
// inheritance to nested tables.
|
||||||
.table {
|
.table > thead > tr,
|
||||||
> thead,
|
.table > tbody > tr,
|
||||||
> tbody,
|
.table > tfoot > tr {
|
||||||
> tfoot {
|
> td.@{state},
|
||||||
> tr > .@{state},
|
> th.@{state},
|
||||||
> .@{state} > td,
|
&.@{state} > td,
|
||||||
> .@{state} > th {
|
&.@{state} > th {
|
||||||
background-color: @background;
|
background-color: @background;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hover states for `.table-hover`
|
// Hover states for `.table-hover`
|
||||||
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
// Note: this is not available for cells or rows within `thead` or `tfoot`.
|
||||||
.table-hover > tbody {
|
.table-hover > tbody > tr {
|
||||||
> tr > .@{state}:hover,
|
> td.@{state}:hover,
|
||||||
> .@{state}:hover > td,
|
> th.@{state}:hover,
|
||||||
> .@{state}:hover > th {
|
&.@{state}:hover > td,
|
||||||
|
&.@{state}:hover > th {
|
||||||
background-color: darken(@background, 5%);
|
background-color: darken(@background, 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// List Groups
|
||||||
|
// -------------------------
|
||||||
|
.list-group-item-variant(@state; @background; @color) {
|
||||||
|
.list-group-item-@{state} {
|
||||||
|
color: @color;
|
||||||
|
background-color: @background;
|
||||||
|
|
||||||
|
a& {
|
||||||
|
color: @color;
|
||||||
|
|
||||||
|
.list-group-item-heading { color: inherit; }
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: @color;
|
||||||
|
background-color: darken(@background, 5%);
|
||||||
|
}
|
||||||
|
&.active,
|
||||||
|
&.active:hover,
|
||||||
|
&.active:focus {
|
||||||
|
color: #fff;
|
||||||
|
background-color: @color;
|
||||||
|
border-color: @color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Button variants
|
// Button variants
|
||||||
// -------------------------
|
// -------------------------
|
||||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||||
@@ -488,7 +528,7 @@
|
|||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
color: @background;
|
color: @background;
|
||||||
background-color: #fff;
|
background-color: @color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -560,9 +600,10 @@
|
|||||||
// More easily include all the states for responsive-utilities.less.
|
// More easily include all the states for responsive-utilities.less.
|
||||||
.responsive-visibility() {
|
.responsive-visibility() {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
tr& { display: table-row !important; }
|
table& { display: table; }
|
||||||
|
tr& { display: table-row !important; }
|
||||||
th&,
|
th&,
|
||||||
td& { display: table-cell !important; }
|
td& { display: table-cell !important; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.responsive-invisibility() {
|
.responsive-invisibility() {
|
||||||
@@ -582,14 +623,14 @@
|
|||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
padding-left: (@grid-gutter-width / 2);
|
padding-left: (@grid-gutter-width / 2);
|
||||||
padding-right: (@grid-gutter-width / 2);
|
padding-right: (@grid-gutter-width / 2);
|
||||||
.clearfix();
|
&:extend(.clearfix all);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Creates a wrapper for a series of columns
|
// Creates a wrapper for a series of columns
|
||||||
.make-row(@gutter: @grid-gutter-width) {
|
.make-row(@gutter: @grid-gutter-width) {
|
||||||
margin-left: (@gutter / -2);
|
margin-left: (@gutter / -2);
|
||||||
margin-right: (@gutter / -2);
|
margin-right: (@gutter / -2);
|
||||||
.clearfix();
|
&:extend(.clearfix all);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate the extra small columns
|
// Generate the extra small columns
|
||||||
@@ -597,30 +638,39 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
float: left;
|
float: left;
|
||||||
width: percentage((@columns / @grid-columns));
|
width: percentage((@columns / @grid-columns));
|
||||||
// Prevent columns from collapsing when empty
|
|
||||||
min-height: 1px;
|
min-height: 1px;
|
||||||
// Inner gutter via padding
|
|
||||||
padding-left: (@gutter / 2);
|
padding-left: (@gutter / 2);
|
||||||
padding-right: (@gutter / 2);
|
padding-right: (@gutter / 2);
|
||||||
}
|
}
|
||||||
|
.make-xs-column-offset(@columns) {
|
||||||
|
@media (min-width: @screen-xs-min) {
|
||||||
|
margin-left: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.make-xs-column-push(@columns) {
|
||||||
|
@media (min-width: @screen-xs-min) {
|
||||||
|
left: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.make-xs-column-pull(@columns) {
|
||||||
|
@media (min-width: @screen-xs-min) {
|
||||||
|
right: percentage((@columns / @grid-columns));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Generate the small columns
|
// Generate the small columns
|
||||||
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
|
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
|
||||||
position: relative;
|
position: relative;
|
||||||
// Prevent columns from collapsing when empty
|
|
||||||
min-height: 1px;
|
min-height: 1px;
|
||||||
// Inner gutter via padding
|
|
||||||
padding-left: (@gutter / 2);
|
padding-left: (@gutter / 2);
|
||||||
padding-right: (@gutter / 2);
|
padding-right: (@gutter / 2);
|
||||||
|
|
||||||
// Calculate width based on number of columns available
|
|
||||||
@media (min-width: @screen-sm-min) {
|
@media (min-width: @screen-sm-min) {
|
||||||
float: left;
|
float: left;
|
||||||
width: percentage((@columns / @grid-columns));
|
width: percentage((@columns / @grid-columns));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate the small column offsets
|
|
||||||
.make-sm-column-offset(@columns) {
|
.make-sm-column-offset(@columns) {
|
||||||
@media (min-width: @screen-sm-min) {
|
@media (min-width: @screen-sm-min) {
|
||||||
margin-left: percentage((@columns / @grid-columns));
|
margin-left: percentage((@columns / @grid-columns));
|
||||||
@@ -637,23 +687,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Generate the medium columns
|
// Generate the medium columns
|
||||||
.make-md-column(@columns; @gutter: @grid-gutter-width) {
|
.make-md-column(@columns; @gutter: @grid-gutter-width) {
|
||||||
position: relative;
|
position: relative;
|
||||||
// Prevent columns from collapsing when empty
|
|
||||||
min-height: 1px;
|
min-height: 1px;
|
||||||
// Inner gutter via padding
|
|
||||||
padding-left: (@gutter / 2);
|
padding-left: (@gutter / 2);
|
||||||
padding-right: (@gutter / 2);
|
padding-right: (@gutter / 2);
|
||||||
|
|
||||||
// Calculate width based on number of columns available
|
|
||||||
@media (min-width: @screen-md-min) {
|
@media (min-width: @screen-md-min) {
|
||||||
float: left;
|
float: left;
|
||||||
width: percentage((@columns / @grid-columns));
|
width: percentage((@columns / @grid-columns));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate the medium column offsets
|
|
||||||
.make-md-column-offset(@columns) {
|
.make-md-column-offset(@columns) {
|
||||||
@media (min-width: @screen-md-min) {
|
@media (min-width: @screen-md-min) {
|
||||||
margin-left: percentage((@columns / @grid-columns));
|
margin-left: percentage((@columns / @grid-columns));
|
||||||
@@ -670,23 +716,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Generate the large columns
|
// Generate the large columns
|
||||||
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
|
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
|
||||||
position: relative;
|
position: relative;
|
||||||
// Prevent columns from collapsing when empty
|
|
||||||
min-height: 1px;
|
min-height: 1px;
|
||||||
// Inner gutter via padding
|
|
||||||
padding-left: (@gutter / 2);
|
padding-left: (@gutter / 2);
|
||||||
padding-right: (@gutter / 2);
|
padding-right: (@gutter / 2);
|
||||||
|
|
||||||
// Calculate width based on number of columns available
|
|
||||||
@media (min-width: @screen-lg-min) {
|
@media (min-width: @screen-lg-min) {
|
||||||
float: left;
|
float: left;
|
||||||
width: percentage((@columns / @grid-columns));
|
width: percentage((@columns / @grid-columns));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate the large column offsets
|
|
||||||
.make-lg-column-offset(@columns) {
|
.make-lg-column-offset(@columns) {
|
||||||
@media (min-width: @screen-lg-min) {
|
@media (min-width: @screen-lg-min) {
|
||||||
margin-left: percentage((@columns / @grid-columns));
|
margin-left: percentage((@columns / @grid-columns));
|
||||||
@@ -713,11 +755,11 @@
|
|||||||
// Common styles for all sizes of grid columns, widths 1-12
|
// Common styles for all sizes of grid columns, widths 1-12
|
||||||
.col(@index) when (@index = 1) { // initial
|
.col(@index) when (@index = 1) { // initial
|
||||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||||
.col(@index + 1, @item);
|
.col((@index + 1), @item);
|
||||||
}
|
}
|
||||||
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
|
.col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
|
||||||
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
@item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
|
||||||
.col(@index + 1, ~"@{list}, @{item}");
|
.col((@index + 1), ~"@{list}, @{item}");
|
||||||
}
|
}
|
||||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||||
@{list} {
|
@{list} {
|
||||||
@@ -735,11 +777,11 @@
|
|||||||
.make-grid-columns-float(@class) {
|
.make-grid-columns-float(@class) {
|
||||||
.col(@index) when (@index = 1) { // initial
|
.col(@index) when (@index = 1) { // initial
|
||||||
@item: ~".col-@{class}-@{index}";
|
@item: ~".col-@{class}-@{index}";
|
||||||
.col(@index + 1, @item);
|
.col((@index + 1), @item);
|
||||||
}
|
}
|
||||||
.col(@index, @list) when (@index =< @grid-columns) { // general
|
.col(@index, @list) when (@index =< @grid-columns) { // general
|
||||||
@item: ~".col-@{class}-@{index}";
|
@item: ~".col-@{class}-@{index}";
|
||||||
.col(@index + 1, ~"@{list}, @{item}");
|
.col((@index + 1), ~"@{list}, @{item}");
|
||||||
}
|
}
|
||||||
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
.col(@index, @list) when (@index > @grid-columns) { // terminal
|
||||||
@{list} {
|
@{list} {
|
||||||
@@ -774,7 +816,7 @@
|
|||||||
.make-grid(@index, @class, @type) when (@index >= 0) {
|
.make-grid(@index, @class, @type) when (@index >= 0) {
|
||||||
.calc-grid(@index, @class, @type);
|
.calc-grid(@index, @class, @type);
|
||||||
// next iteration
|
// next iteration
|
||||||
.make-grid(@index - 1, @class, @type);
|
.make-grid((@index - 1), @class, @type);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -22,9 +22,13 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: @zindex-modal-background;
|
z-index: @zindex-modal;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
|
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||||
|
// https://github.com/twbs/bootstrap/pull/10951.
|
||||||
|
outline: 0;
|
||||||
|
|
||||||
// When fading in the modal, animate it to slide down
|
// When fading in the modal, animate it to slide down
|
||||||
&.fade .modal-dialog {
|
&.fade .modal-dialog {
|
||||||
.translate(0, -25%);
|
.translate(0, -25%);
|
||||||
@@ -38,7 +42,6 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
z-index: (@zindex-modal-background + 10);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Actual modal
|
// Actual modal
|
||||||
@@ -61,11 +64,11 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: (@zindex-modal-background - 10);
|
z-index: @zindex-modal-background;
|
||||||
background-color: @modal-backdrop-bg;
|
background-color: @modal-backdrop-bg;
|
||||||
// Fade for backdrop
|
// Fade for backdrop
|
||||||
&.fade { .opacity(0); }
|
&.fade { .opacity(0); }
|
||||||
&.in { .opacity(.5); }
|
&.in { .opacity(@modal-backdrop-opacity); }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Modal header
|
// Modal header
|
||||||
@@ -99,7 +102,7 @@
|
|||||||
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
|
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
|
||||||
text-align: right; // right align buttons
|
text-align: right; // right align buttons
|
||||||
border-top: 1px solid @modal-footer-border-color;
|
border-top: 1px solid @modal-footer-border-color;
|
||||||
.clearfix(); // clear it in case folks use .pull-* classes on buttons
|
&:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
|
||||||
|
|
||||||
// Properly space out buttons
|
// Properly space out buttons
|
||||||
.btn + .btn {
|
.btn + .btn {
|
||||||
@@ -117,8 +120,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Scale up the modal
|
// Scale up the modal
|
||||||
@media screen and (min-width: @screen-sm-min) {
|
@media (min-width: @screen-sm-min) {
|
||||||
|
|
||||||
|
// Automatically set modal's width for larger viewports
|
||||||
.modal-dialog {
|
.modal-dialog {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
margin: 30px auto;
|
margin: 30px auto;
|
||||||
@@ -127,4 +131,8 @@
|
|||||||
.box-shadow(0 5px 15px rgba(0,0,0,.5));
|
.box-shadow(0 5px 15px rgba(0,0,0,.5));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Modal sizes
|
||||||
|
.modal-sm { width: @modal-sm; }
|
||||||
|
.modal-lg { width: @modal-lg; }
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
|
|
||||||
// Prevent floats from breaking the navbar
|
// Prevent floats from breaking the navbar
|
||||||
.clearfix();
|
&:extend(.clearfix all);
|
||||||
|
|
||||||
@media (min-width: @grid-float-breakpoint) {
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
border-radius: @navbar-border-radius;
|
border-radius: @navbar-border-radius;
|
||||||
@@ -29,7 +29,7 @@
|
|||||||
// styling of responsive aspects.
|
// styling of responsive aspects.
|
||||||
|
|
||||||
.navbar-header {
|
.navbar-header {
|
||||||
.clearfix();
|
&:extend(.clearfix all);
|
||||||
|
|
||||||
@media (min-width: @grid-float-breakpoint) {
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
float: left;
|
float: left;
|
||||||
@@ -54,7 +54,7 @@
|
|||||||
padding-left: @navbar-padding-horizontal;
|
padding-left: @navbar-padding-horizontal;
|
||||||
border-top: 1px solid transparent;
|
border-top: 1px solid transparent;
|
||||||
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
|
box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
|
||||||
.clearfix();
|
&:extend(.clearfix all);
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
&.in {
|
&.in {
|
||||||
@@ -93,14 +93,17 @@
|
|||||||
//
|
//
|
||||||
// When a container is present, change the behavior of the header and collapse.
|
// When a container is present, change the behavior of the header and collapse.
|
||||||
|
|
||||||
.container > .navbar-header,
|
.container,
|
||||||
.container > .navbar-collapse {
|
.container-fluid {
|
||||||
margin-right: -@navbar-padding-horizontal;
|
> .navbar-header,
|
||||||
margin-left: -@navbar-padding-horizontal;
|
> .navbar-collapse {
|
||||||
|
margin-right: -@navbar-padding-horizontal;
|
||||||
|
margin-left: -@navbar-padding-horizontal;
|
||||||
|
|
||||||
@media (min-width: @grid-float-breakpoint) {
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -158,8 +161,16 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Prevent Glyphicons from increasing height of navbar
|
||||||
|
> .glyphicon {
|
||||||
|
float: left;
|
||||||
|
margin-top: -2px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: @grid-float-breakpoint) {
|
@media (min-width: @grid-float-breakpoint) {
|
||||||
.navbar > .container & {
|
.navbar > .container &,
|
||||||
|
.navbar > .container-fluid & {
|
||||||
margin-left: -@navbar-padding-horizontal;
|
margin-left: -@navbar-padding-horizontal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -178,7 +189,7 @@
|
|||||||
padding: 9px 10px;
|
padding: 9px 10px;
|
||||||
.navbar-vertical-align(34px);
|
.navbar-vertical-align(34px);
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: none; // Fix for at least Firefox on Android, per #11468
|
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
|
|
||||||
@@ -213,7 +224,7 @@
|
|||||||
line-height: @line-height-computed;
|
line-height: @line-height-computed;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @grid-float-breakpoint-max) {
|
||||||
// Dropdowns get custom display when collapsed
|
// Dropdowns get custom display when collapsed
|
||||||
.open .dropdown-menu {
|
.open .dropdown-menu {
|
||||||
position: static;
|
position: static;
|
||||||
@@ -287,7 +298,7 @@
|
|||||||
.form-inline();
|
.form-inline();
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @grid-float-breakpoint-max) {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -325,13 +336,6 @@
|
|||||||
.border-bottom-radius(0);
|
.border-bottom-radius(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Right aligned menus need alt position
|
|
||||||
.navbar-nav.pull-right > li > .dropdown-menu,
|
|
||||||
.navbar-nav > li > .dropdown-menu.pull-right {
|
|
||||||
left: auto;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Buttons in navbars
|
// Buttons in navbars
|
||||||
//
|
//
|
||||||
@@ -445,7 +449,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @grid-float-breakpoint-max) {
|
||||||
// Dropdowns get custom display when collapsed
|
// Dropdowns get custom display when collapsed
|
||||||
.open .dropdown-menu {
|
.open .dropdown-menu {
|
||||||
> li > a {
|
> li > a {
|
||||||
@@ -565,7 +569,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @grid-float-breakpoint-max) {
|
||||||
// Dropdowns get custom display
|
// Dropdowns get custom display
|
||||||
.open .dropdown-menu {
|
.open .dropdown-menu {
|
||||||
> .dropdown-header {
|
> .dropdown-header {
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
padding-left: 0; // Override default ul/ol
|
padding-left: 0; // Override default ul/ol
|
||||||
list-style: none;
|
list-style: none;
|
||||||
.clearfix();
|
&:extend(.clearfix all);
|
||||||
|
|
||||||
> li {
|
> li {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -8,22 +8,22 @@
|
|||||||
margin: @line-height-computed 0;
|
margin: @line-height-computed 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.clearfix();
|
&:extend(.clearfix all);
|
||||||
li {
|
li {
|
||||||
display: inline;
|
display: inline;
|
||||||
> a,
|
> a,
|
||||||
> span {
|
> span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 5px 14px;
|
padding: 5px 14px;
|
||||||
background-color: @pagination-bg;
|
background-color: @pager-bg;
|
||||||
border: 1px solid @pagination-border;
|
border: 1px solid @pager-border;
|
||||||
border-radius: @pager-border-radius;
|
border-radius: @pager-border-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
> a:hover,
|
> a:hover,
|
||||||
> a:focus {
|
> a:focus {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: @pagination-hover-bg;
|
background-color: @pager-hover-bg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
> a:focus,
|
> a:focus,
|
||||||
> span {
|
> span {
|
||||||
color: @pager-disabled-color;
|
color: @pager-disabled-color;
|
||||||
background-color: @pagination-bg;
|
background-color: @pager-bg;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,8 +14,8 @@
|
|||||||
|
|
||||||
// Panel contents
|
// Panel contents
|
||||||
.panel-body {
|
.panel-body {
|
||||||
padding: 15px;
|
padding: @panel-body-padding;
|
||||||
.clearfix();
|
&:extend(.clearfix all);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -91,6 +91,10 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
> .table-responsive {
|
||||||
|
border: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -98,7 +102,7 @@
|
|||||||
.panel-heading {
|
.panel-heading {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
border-bottom: 1px solid transparent;
|
border-bottom: 1px solid transparent;
|
||||||
.border-top-radius(@panel-border-radius - 1);
|
.border-top-radius((@panel-border-radius - 1));
|
||||||
|
|
||||||
> .dropdown .dropdown-toggle {
|
> .dropdown .dropdown-toggle {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
@@ -122,7 +126,7 @@
|
|||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
background-color: @panel-footer-bg;
|
background-color: @panel-footer-bg;
|
||||||
border-top: 1px solid @panel-inner-border;
|
border-top: 1px solid @panel-inner-border;
|
||||||
.border-bottom-radius(@panel-border-radius - 1);
|
.border-bottom-radius((@panel-border-radius - 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -23,187 +23,71 @@
|
|||||||
|
|
||||||
|
|
||||||
// Visibility utilities
|
// Visibility utilities
|
||||||
|
|
||||||
.visible-xs {
|
.visible-xs {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
.responsive-visibility();
|
.responsive-visibility();
|
||||||
}
|
}
|
||||||
&.visible-sm {
|
|
||||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.visible-md {
|
|
||||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.visible-lg {
|
|
||||||
@media (min-width: @screen-lg-min) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.visible-sm {
|
.visible-sm {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
&.visible-xs {
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||||
.responsive-visibility();
|
.responsive-visibility();
|
||||||
}
|
}
|
||||||
&.visible-md {
|
|
||||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.visible-lg {
|
|
||||||
@media (min-width: @screen-lg-min) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.visible-md {
|
.visible-md {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
&.visible-xs {
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.visible-sm {
|
|
||||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||||
.responsive-visibility();
|
.responsive-visibility();
|
||||||
}
|
}
|
||||||
&.visible-lg {
|
|
||||||
@media (min-width: @screen-lg-min) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.visible-lg {
|
.visible-lg {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
&.visible-xs {
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.visible-sm {
|
|
||||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.visible-md {
|
|
||||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
|
||||||
.responsive-visibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: @screen-lg-min) {
|
@media (min-width: @screen-lg-min) {
|
||||||
.responsive-visibility();
|
.responsive-visibility();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden-xs {
|
.hidden-xs {
|
||||||
.responsive-visibility();
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
}
|
}
|
||||||
&.hidden-sm {
|
|
||||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.hidden-md {
|
|
||||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.hidden-lg {
|
|
||||||
@media (min-width: @screen-lg-min) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.hidden-sm {
|
.hidden-sm {
|
||||||
.responsive-visibility();
|
|
||||||
&.hidden-xs {
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
}
|
}
|
||||||
&.hidden-md {
|
|
||||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.hidden-lg {
|
|
||||||
@media (min-width: @screen-lg-min) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.hidden-md {
|
.hidden-md {
|
||||||
.responsive-visibility();
|
|
||||||
&.hidden-xs {
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.hidden-sm {
|
|
||||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
}
|
}
|
||||||
&.hidden-lg {
|
|
||||||
@media (min-width: @screen-lg-min) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.hidden-lg {
|
.hidden-lg {
|
||||||
.responsive-visibility();
|
|
||||||
&.hidden-xs {
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.hidden-sm {
|
|
||||||
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.hidden-md {
|
|
||||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
|
||||||
.responsive-invisibility();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: @screen-lg-min) {
|
@media (min-width: @screen-lg-min) {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Print utilities
|
// Print utilities
|
||||||
|
//
|
||||||
|
// Media queries are placed on the inside to be mixin-friendly.
|
||||||
|
|
||||||
.visible-print {
|
.visible-print {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
}
|
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
.visible-print {
|
|
||||||
.responsive-visibility();
|
.responsive-visibility();
|
||||||
}
|
}
|
||||||
.hidden-print {
|
}
|
||||||
|
|
||||||
|
.hidden-print {
|
||||||
|
@media print {
|
||||||
.responsive-invisibility();
|
.responsive-invisibility();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -156,8 +156,9 @@ table {
|
|||||||
// Generate the contextual variants
|
// Generate the contextual variants
|
||||||
.table-row-variant(active; @table-bg-active);
|
.table-row-variant(active; @table-bg-active);
|
||||||
.table-row-variant(success; @state-success-bg);
|
.table-row-variant(success; @state-success-bg);
|
||||||
.table-row-variant(danger; @state-danger-bg);
|
|
||||||
.table-row-variant(warning; @state-warning-bg);
|
.table-row-variant(warning; @state-warning-bg);
|
||||||
|
.table-row-variant(danger; @state-danger-bg);
|
||||||
|
.table-row-variant(info; @state-info-bg);
|
||||||
|
|
||||||
|
|
||||||
// Responsive tables
|
// Responsive tables
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
.opacity(0);
|
.opacity(0);
|
||||||
|
|
||||||
&.in { .opacity(.9); }
|
&.in { .opacity(@tooltip-opacity); }
|
||||||
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
|
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
|
||||||
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
|
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
|
||||||
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
|
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
|
||||||
|
|||||||
@@ -61,7 +61,7 @@ p {
|
|||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
margin-bottom: @line-height-computed;
|
margin-bottom: @line-height-computed;
|
||||||
font-size: floor(@font-size-base * 1.15);
|
font-size: floor((@font-size-base * 1.15));
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
|
|
||||||
@@ -81,7 +81,13 @@ small,
|
|||||||
// Undo browser default styling
|
// Undo browser default styling
|
||||||
cite { font-style: normal; }
|
cite { font-style: normal; }
|
||||||
|
|
||||||
// Contextual emphasis
|
// Alignment
|
||||||
|
.text-left { text-align: left; }
|
||||||
|
.text-right { text-align: right; }
|
||||||
|
.text-center { text-align: center; }
|
||||||
|
.text-justify { text-align: justify; }
|
||||||
|
|
||||||
|
// Contextual colors
|
||||||
.text-muted {
|
.text-muted {
|
||||||
color: @text-muted;
|
color: @text-muted;
|
||||||
}
|
}
|
||||||
@@ -116,10 +122,42 @@ cite { font-style: normal; }
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Alignment
|
// Contextual backgrounds
|
||||||
.text-left { text-align: left; }
|
// For now we'll leave these alongside the text classes until v4 when we can
|
||||||
.text-right { text-align: right; }
|
// safely shift things around (per SemVer rules).
|
||||||
.text-center { text-align: center; }
|
.bg-primary {
|
||||||
|
// Given the contrast here, this is the only class to have it's color inverted
|
||||||
|
// automatically.
|
||||||
|
color: #fff;
|
||||||
|
background-color: @brand-primary;
|
||||||
|
a&:hover {
|
||||||
|
background-color: darken(@brand-primary, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-warning {
|
||||||
|
background-color: @state-warning-bg;
|
||||||
|
a&:hover {
|
||||||
|
background-color: darken(@state-warning-bg, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-danger {
|
||||||
|
background-color: @state-danger-bg;
|
||||||
|
a&:hover {
|
||||||
|
background-color: darken(@state-danger-bg, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-success {
|
||||||
|
background-color: @state-success-bg;
|
||||||
|
a&:hover {
|
||||||
|
background-color: darken(@state-success-bg, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bg-info {
|
||||||
|
background-color: @state-info-bg;
|
||||||
|
a&:hover {
|
||||||
|
background-color: darken(@state-info-bg, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Page header
|
// Page header
|
||||||
@@ -201,7 +239,7 @@ dd {
|
|||||||
}
|
}
|
||||||
dd {
|
dd {
|
||||||
margin-left: @component-offset-horizontal;
|
margin-left: @component-offset-horizontal;
|
||||||
.clearfix(); // Clear the floated `dt` if an empty `dd` is present
|
&:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -228,8 +266,6 @@ blockquote {
|
|||||||
border-left: 5px solid @blockquote-border-color;
|
border-left: 5px solid @blockquote-border-color;
|
||||||
p {
|
p {
|
||||||
font-size: (@font-size-base * 1.25);
|
font-size: (@font-size-base * 1.25);
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.25;
|
|
||||||
}
|
}
|
||||||
p:last-child {
|
p:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|||||||
@@ -45,20 +45,20 @@
|
|||||||
@font-family-base: @font-family-sans-serif;
|
@font-family-base: @font-family-sans-serif;
|
||||||
|
|
||||||
@font-size-base: 14px;
|
@font-size-base: 14px;
|
||||||
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
|
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
||||||
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
|
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
||||||
|
|
||||||
@font-size-h1: floor(@font-size-base * 2.6); // ~36px
|
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
||||||
@font-size-h2: floor(@font-size-base * 2.15); // ~30px
|
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
||||||
@font-size-h3: ceil(@font-size-base * 1.7); // ~24px
|
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
||||||
@font-size-h4: ceil(@font-size-base * 1.25); // ~18px
|
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
||||||
@font-size-h5: @font-size-base;
|
@font-size-h5: @font-size-base;
|
||||||
@font-size-h6: ceil(@font-size-base * 0.85); // ~12px
|
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
||||||
|
|
||||||
@line-height-base: 1.428571429; // 20/14
|
@line-height-base: 1.428571429; // 20/14
|
||||||
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
|
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
|
||||||
|
|
||||||
@headings-font-family: @font-family-base;
|
@headings-font-family: inherit;
|
||||||
@headings-font-weight: 500;
|
@headings-font-weight: 500;
|
||||||
@headings-line-height: 1.1;
|
@headings-line-height: 1.1;
|
||||||
@headings-color: inherit;
|
@headings-color: inherit;
|
||||||
@@ -84,6 +84,9 @@
|
|||||||
@padding-small-vertical: 5px;
|
@padding-small-vertical: 5px;
|
||||||
@padding-small-horizontal: 10px;
|
@padding-small-horizontal: 10px;
|
||||||
|
|
||||||
|
@padding-xs-vertical: 1px;
|
||||||
|
@padding-xs-horizontal: 5px;
|
||||||
|
|
||||||
@line-height-large: 1.33;
|
@line-height-large: 1.33;
|
||||||
@line-height-small: 1.5;
|
@line-height-small: 1.5;
|
||||||
|
|
||||||
@@ -186,6 +189,9 @@
|
|||||||
|
|
||||||
@dropdown-header-color: @gray-light;
|
@dropdown-header-color: @gray-light;
|
||||||
|
|
||||||
|
// Note: Deprecated @dropdown-caret-color as of v3.1.0
|
||||||
|
@dropdown-caret-color: #000;
|
||||||
|
|
||||||
|
|
||||||
// COMPONENT VARIABLES
|
// COMPONENT VARIABLES
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
@@ -244,8 +250,13 @@
|
|||||||
@grid-columns: 12;
|
@grid-columns: 12;
|
||||||
// Padding, to be divided by two and applied to the left and right of all columns
|
// Padding, to be divided by two and applied to the left and right of all columns
|
||||||
@grid-gutter-width: 30px;
|
@grid-gutter-width: 30px;
|
||||||
// Point at which the navbar stops collapsing
|
|
||||||
|
// Navbar collapse
|
||||||
|
|
||||||
|
// Point at which the navbar becomes uncollapsed
|
||||||
@grid-float-breakpoint: @screen-sm-min;
|
@grid-float-breakpoint: @screen-sm-min;
|
||||||
|
// Point at which the navbar begins collapsing
|
||||||
|
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||||
|
|
||||||
|
|
||||||
// Navbar
|
// Navbar
|
||||||
@@ -255,7 +266,7 @@
|
|||||||
@navbar-height: 50px;
|
@navbar-height: 50px;
|
||||||
@navbar-margin-bottom: @line-height-computed;
|
@navbar-margin-bottom: @line-height-computed;
|
||||||
@navbar-border-radius: @border-radius-base;
|
@navbar-border-radius: @border-radius-base;
|
||||||
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
|
@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
|
||||||
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
|
||||||
|
|
||||||
@navbar-default-color: #777;
|
@navbar-default-color: #777;
|
||||||
@@ -278,7 +289,7 @@
|
|||||||
|
|
||||||
// Navbar toggle
|
// Navbar toggle
|
||||||
@navbar-default-toggle-hover-bg: #ddd;
|
@navbar-default-toggle-hover-bg: #ddd;
|
||||||
@navbar-default-toggle-icon-bar-bg: #ccc;
|
@navbar-default-toggle-icon-bar-bg: #888;
|
||||||
@navbar-default-toggle-border-color: #ddd;
|
@navbar-default-toggle-border-color: #ddd;
|
||||||
|
|
||||||
|
|
||||||
@@ -355,8 +366,16 @@
|
|||||||
// Pager
|
// Pager
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
|
@pager-bg: @pagination-bg;
|
||||||
|
@pager-border: @pagination-border;
|
||||||
@pager-border-radius: 15px;
|
@pager-border-radius: 15px;
|
||||||
@pager-disabled-color: @gray-light;
|
|
||||||
|
@pager-hover-bg: @pagination-hover-bg;
|
||||||
|
|
||||||
|
@pager-active-bg: @pagination-active-bg;
|
||||||
|
@pager-active-color: @pagination-active-color;
|
||||||
|
|
||||||
|
@pager-disabled-color: @pagination-disabled-color;
|
||||||
|
|
||||||
|
|
||||||
// Jumbotron
|
// Jumbotron
|
||||||
@@ -366,7 +385,7 @@
|
|||||||
@jumbotron-color: inherit;
|
@jumbotron-color: inherit;
|
||||||
@jumbotron-bg: @gray-lighter;
|
@jumbotron-bg: @gray-lighter;
|
||||||
@jumbotron-heading-color: inherit;
|
@jumbotron-heading-color: inherit;
|
||||||
@jumbotron-font-size: ceil(@font-size-base * 1.5);
|
@jumbotron-font-size: ceil((@font-size-base * 1.5));
|
||||||
|
|
||||||
|
|
||||||
// Form states and alerts
|
// Form states and alerts
|
||||||
@@ -394,6 +413,7 @@
|
|||||||
@tooltip-max-width: 200px;
|
@tooltip-max-width: 200px;
|
||||||
@tooltip-color: #fff;
|
@tooltip-color: #fff;
|
||||||
@tooltip-bg: #000;
|
@tooltip-bg: #000;
|
||||||
|
@tooltip-opacity: .9;
|
||||||
|
|
||||||
@tooltip-arrow-width: 5px;
|
@tooltip-arrow-width: 5px;
|
||||||
@tooltip-arrow-color: @tooltip-bg;
|
@tooltip-arrow-color: @tooltip-bg;
|
||||||
@@ -442,9 +462,13 @@
|
|||||||
@modal-content-fallback-border-color: #999;
|
@modal-content-fallback-border-color: #999;
|
||||||
|
|
||||||
@modal-backdrop-bg: #000;
|
@modal-backdrop-bg: #000;
|
||||||
|
@modal-backdrop-opacity: .5;
|
||||||
@modal-header-border-color: #e5e5e5;
|
@modal-header-border-color: #e5e5e5;
|
||||||
@modal-footer-border-color: @modal-header-border-color;
|
@modal-footer-border-color: @modal-header-border-color;
|
||||||
|
|
||||||
|
@modal-lg: 900px;
|
||||||
|
@modal-sm: 300px;
|
||||||
|
|
||||||
|
|
||||||
// Alerts
|
// Alerts
|
||||||
// -------------------------
|
// -------------------------
|
||||||
@@ -483,24 +507,26 @@
|
|||||||
|
|
||||||
// List group
|
// List group
|
||||||
// -------------------------
|
// -------------------------
|
||||||
@list-group-bg: #fff;
|
@list-group-bg: #fff;
|
||||||
@list-group-border: #ddd;
|
@list-group-border: #ddd;
|
||||||
@list-group-border-radius: @border-radius-base;
|
@list-group-border-radius: @border-radius-base;
|
||||||
|
|
||||||
@list-group-hover-bg: #f5f5f5;
|
@list-group-hover-bg: #f5f5f5;
|
||||||
@list-group-active-color: @component-active-color;
|
@list-group-active-color: @component-active-color;
|
||||||
@list-group-active-bg: @component-active-bg;
|
@list-group-active-bg: @component-active-bg;
|
||||||
@list-group-active-border: @list-group-active-bg;
|
@list-group-active-border: @list-group-active-bg;
|
||||||
|
@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
|
||||||
@list-group-link-color: #555;
|
|
||||||
@list-group-link-heading-color: #333;
|
|
||||||
|
|
||||||
|
@list-group-link-color: #555;
|
||||||
|
@list-group-link-heading-color: #333;
|
||||||
|
|
||||||
// Panels
|
// Panels
|
||||||
// -------------------------
|
// -------------------------
|
||||||
@panel-bg: #fff;
|
@panel-bg: #fff;
|
||||||
@panel-inner-border: #ddd;
|
@panel-body-padding: 15px;
|
||||||
@panel-border-radius: @border-radius-base;
|
@panel-border-radius: @border-radius-base;
|
||||||
|
|
||||||
|
@panel-inner-border: #ddd;
|
||||||
@panel-footer-bg: #f5f5f5;
|
@panel-footer-bg: #f5f5f5;
|
||||||
|
|
||||||
@panel-default-text: @gray-dark;
|
@panel-default-text: @gray-dark;
|
||||||
@@ -542,6 +568,7 @@
|
|||||||
// Wells
|
// Wells
|
||||||
// -------------------------
|
// -------------------------
|
||||||
@well-bg: #f5f5f5;
|
@well-bg: #f5f5f5;
|
||||||
|
@well-border: darken(@well-bg, 7%);
|
||||||
|
|
||||||
|
|
||||||
// Badges
|
// Badges
|
||||||
@@ -560,10 +587,12 @@
|
|||||||
|
|
||||||
// Breadcrumbs
|
// Breadcrumbs
|
||||||
// -------------------------
|
// -------------------------
|
||||||
@breadcrumb-bg: #f5f5f5;
|
@breadcrumb-padding-vertical: 8px;
|
||||||
@breadcrumb-color: #ccc;
|
@breadcrumb-padding-horizontal: 15px;
|
||||||
@breadcrumb-active-color: @gray-light;
|
@breadcrumb-bg: #f5f5f5;
|
||||||
@breadcrumb-separator: "/";
|
@breadcrumb-color: #ccc;
|
||||||
|
@breadcrumb-active-color: @gray-light;
|
||||||
|
@breadcrumb-separator: "/";
|
||||||
|
|
||||||
|
|
||||||
// Carousel
|
// Carousel
|
||||||
@@ -594,6 +623,9 @@
|
|||||||
@code-color: #c7254e;
|
@code-color: #c7254e;
|
||||||
@code-bg: #f9f2f4;
|
@code-bg: #f9f2f4;
|
||||||
|
|
||||||
|
@kbd-color: #fff;
|
||||||
|
@kbd-bg: #333;
|
||||||
|
|
||||||
@pre-bg: #f5f5f5;
|
@pre-bg: #f5f5f5;
|
||||||
@pre-color: @gray-dark;
|
@pre-color: @gray-dark;
|
||||||
@pre-border-color: #ccc;
|
@pre-border-color: #ccc;
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
padding: 19px;
|
padding: 19px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
background-color: @well-bg;
|
background-color: @well-bg;
|
||||||
border: 1px solid darken(@well-bg, 7%);
|
border: 1px solid @well-border;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
||||||
blockquote {
|
blockquote {
|
||||||
|
|||||||
@@ -1,51 +1,55 @@
|
|||||||
{
|
{
|
||||||
"name": "bootstrap"
|
"name": "bootstrap",
|
||||||
, "description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development."
|
"description": "Sleek, intuitive, and powerful front-end framework for faster and easier web development.",
|
||||||
, "version": "3.0.3"
|
"version": "3.0.3",
|
||||||
, "keywords": ["bootstrap", "css"]
|
"keywords": ["bootstrap", "css"],
|
||||||
, "homepage": "http://getbootstrap.com"
|
"homepage": "http://getbootstrap.com",
|
||||||
, "author": "Twitter, Inc."
|
"author": "Twitter, Inc.",
|
||||||
, "scripts": { "test": "grunt test" }
|
"scripts": { "test": "grunt test" },
|
||||||
, "repository": {
|
"repository": {
|
||||||
"type": "git"
|
"type": "git"
|
||||||
, "url": "https://github.com/twbs/bootstrap.git"
|
, "url": "https://github.com/twbs/bootstrap.git"
|
||||||
}
|
},
|
||||||
, "bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/twbs/bootstrap/issues"
|
"url": "https://github.com/twbs/bootstrap/issues"
|
||||||
}
|
},
|
||||||
, "licenses": [
|
"licenses": [
|
||||||
{
|
{
|
||||||
"type": "Apache-2.0"
|
"type": "Apache-2.0",
|
||||||
, "url": "http://www.apache.org/licenses/LICENSE-2.0"
|
"url": "http://www.apache.org/licenses/LICENSE-2.0"
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
, "devDependencies": {
|
"devDependencies": {
|
||||||
"browserstack-runner": "~0.0.12"
|
"btoa": "~1.1.1",
|
||||||
, "btoa": "~1.1.1"
|
"grunt": "~0.4.1",
|
||||||
, "grunt": "~0.4.1"
|
"grunt-banner": "~0.2.0",
|
||||||
, "grunt-contrib-clean": "~0.5.0"
|
"grunt-contrib-clean": "~0.5.0",
|
||||||
, "grunt-contrib-concat": "~0.3.0"
|
"grunt-contrib-concat": "~0.3.0",
|
||||||
, "grunt-contrib-connect": "~0.5.0"
|
"grunt-contrib-connect": "~0.5.0",
|
||||||
, "grunt-contrib-copy": "~0.4.1"
|
"grunt-contrib-copy": "~0.4.1",
|
||||||
, "grunt-contrib-jshint": "~0.7.0"
|
"grunt-contrib-csslint": "~0.2.0",
|
||||||
, "grunt-contrib-qunit": "~0.3.0"
|
"grunt-contrib-jshint": "~0.7.0",
|
||||||
, "grunt-contrib-uglify": "~0.2.4"
|
"grunt-contrib-less": "~0.8.0",
|
||||||
, "grunt-contrib-watch": "~0.5.3"
|
"grunt-contrib-qunit": "~0.3.0",
|
||||||
, "grunt-html-validation": "~0.1.6"
|
"grunt-contrib-uglify": "~0.2.4",
|
||||||
, "grunt-jekyll": "~0.4.0"
|
"grunt-contrib-watch": "~0.5.3",
|
||||||
, "grunt-recess": "~0.5.0"
|
"grunt-csscomb": "~1.1.0",
|
||||||
, "grunt-sed": "~0.1.1"
|
"grunt-html-validation": "~0.1.6",
|
||||||
, "regexp-quote": "~0.0.0"
|
"grunt-jekyll": "~0.4.0",
|
||||||
}
|
"grunt-jscs-checker": "~0.2.5",
|
||||||
, "jspm": {
|
"grunt-saucelabs": "~4.1.2",
|
||||||
"main": "js/bootstrap"
|
"grunt-sed": "~0.1.1",
|
||||||
, "directories": { "lib": "dist" }
|
"load-grunt-tasks": "~0.2.0"
|
||||||
, "shim": {
|
},
|
||||||
"js/bootstrap": {
|
"jspm": {
|
||||||
"imports": "jquery"
|
"main": "js/bootstrap",
|
||||||
, "exports": "$"
|
"directories": { "lib": "dist" },
|
||||||
}
|
"shim": {
|
||||||
}
|
"js/bootstrap": {
|
||||||
, "buildConfig": { "uglify": true }
|
"imports": "jquery",
|
||||||
|
"exports": "$"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"buildConfig": { "uglify": true }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,87 @@
|
|||||||
|
#!/usr/bin/env python2.7
|
||||||
|
from __future__ import absolute_import, unicode_literals, print_function, division
|
||||||
|
|
||||||
|
from sys import argv
|
||||||
|
from os import environ, stat, remove as _delete_file
|
||||||
|
from os.path import isfile
|
||||||
|
from hashlib import sha256
|
||||||
|
from subprocess import check_call as run
|
||||||
|
|
||||||
|
from boto.s3.connection import S3Connection
|
||||||
|
from boto.s3.key import Key
|
||||||
|
from boto.exception import S3ResponseError
|
||||||
|
|
||||||
|
|
||||||
|
NODE_MODULES_TARBALL = 'node_modules.tar.gz'
|
||||||
|
NEED_TO_UPLOAD_MARKER = '.need-to-upload'
|
||||||
|
BYTES_PER_MB = 1024 * 1024
|
||||||
|
try:
|
||||||
|
BUCKET_NAME = environ['TWBS_S3_BUCKET']
|
||||||
|
except KeyError:
|
||||||
|
raise SystemExit("TWBS_S3_BUCKET environment variable not set!")
|
||||||
|
|
||||||
|
|
||||||
|
def _sha256_of_file(filename):
|
||||||
|
hasher = sha256()
|
||||||
|
with open(filename, 'rb') as input_file:
|
||||||
|
hasher.update(input_file.read())
|
||||||
|
return hasher.hexdigest()
|
||||||
|
|
||||||
|
|
||||||
|
def _delete_file_quietly(filename):
|
||||||
|
try:
|
||||||
|
_delete_file(filename)
|
||||||
|
except (OSError, IOError):
|
||||||
|
pass
|
||||||
|
|
||||||
|
|
||||||
|
def _tarball_size():
|
||||||
|
kib = stat(NODE_MODULES_TARBALL).st_size // BYTES_PER_MB
|
||||||
|
return "{} MiB".format(kib)
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
# Uses environment variables:
|
||||||
|
# AWS_ACCESS_KEY_ID - AWS Access Key ID
|
||||||
|
# AWS_SECRET_ACCESS_KEY - AWS Secret Access Key
|
||||||
|
argv.pop(0)
|
||||||
|
if len(argv) != 1:
|
||||||
|
raise SystemExit("USAGE: node_modules_cache.py <download | upload>")
|
||||||
|
mode = argv.pop()
|
||||||
|
|
||||||
|
conn = S3Connection()
|
||||||
|
bucket = conn.lookup(BUCKET_NAME)
|
||||||
|
if bucket is None:
|
||||||
|
raise SystemExit("Could not access bucket!")
|
||||||
|
|
||||||
|
package_json_hash = _sha256_of_file('package.json')
|
||||||
|
print('sha256(package.json) = ' + package_json_hash)
|
||||||
|
|
||||||
|
key = Key(bucket, package_json_hash)
|
||||||
|
key.storage_class = 'REDUCED_REDUNDANCY'
|
||||||
|
|
||||||
|
if mode == 'download':
|
||||||
|
_delete_file_quietly(NEED_TO_UPLOAD_MARKER)
|
||||||
|
try:
|
||||||
|
print("Downloading tarball from S3...")
|
||||||
|
key.get_contents_to_filename(NODE_MODULES_TARBALL)
|
||||||
|
except S3ResponseError as err:
|
||||||
|
open(NEED_TO_UPLOAD_MARKER, 'a').close()
|
||||||
|
print(err)
|
||||||
|
raise SystemExit("Cached node_modules download failed!")
|
||||||
|
print("Downloaded {}.".format(_tarball_size()))
|
||||||
|
print("Extracting tarball...")
|
||||||
|
run(['tar', 'xzf', NODE_MODULES_TARBALL])
|
||||||
|
print("node_modules successfully installed from cache.")
|
||||||
|
elif mode == 'upload':
|
||||||
|
if isfile(NEED_TO_UPLOAD_MARKER):
|
||||||
|
print("Creating tarball...")
|
||||||
|
run(['tar', 'czf', NODE_MODULES_TARBALL, 'node_modules'])
|
||||||
|
print("Uploading tarball to S3... ({})".format(_tarball_size()))
|
||||||
|
key.set_contents_from_filename(NODE_MODULES_TARBALL)
|
||||||
|
print("node_modules cache successfully updated.")
|
||||||
|
_delete_file_quietly(NEED_TO_UPLOAD_MARKER)
|
||||||
|
else:
|
||||||
|
print("No need to upload anything.")
|
||||||
|
else:
|
||||||
|
raise SystemExit("Unrecognized mode {!r}".format(mode))
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
boto==2.20.0
|
||||||