diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dbccc8761e..8c437df9af 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -169,6 +169,7 @@ license your work under the terms of the [MIT License](LICENSE.md). - Always a space after a property's colon (e.g., `display: block;` and not `display:block;`). - End all lines with a semi-colon. - For multiple, comma-separated selectors, place each selector on its own line. +- Don't add vendor prefixed properties to their unprefixed counterparts (e.g., only `box-sizing` and not also include `-webkit-box-sizing`), as this is done automagically at build time. - 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`). diff --git a/Gruntfile.js b/Gruntfile.js index 34580951b2..08664d1ca0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -202,6 +202,33 @@ module.exports = function (grunt) { } }, + autoprefixer: { + options: { + browsers: ['last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12'] + }, + core: { + options: { + map: true + }, + src: 'dist/css/<%= pkg.name %>.css' + }, + theme: { + options: { + map: true + }, + src: 'dist/css/<%= pkg.name %>-theme.css' + }, + docs: { + src: 'docs/assets/css/docs.css' + }, + examples: { + expand: true, + cwd: 'docs/examples/', + src: ['**/*.css'], + dest: 'docs/examples/' + } + }, + css_flip: { rtl: { files: { @@ -420,7 +447,7 @@ module.exports = function (grunt) { // CSS distribution task. grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']); - grunt.registerTask('dist-css', ['less-compile', 'css_flip', 'less:minify', 'cssmin', 'csscomb', 'usebanner']); + grunt.registerTask('dist-css', ['less-compile', 'autoprefixer', 'css_flip', 'less:minify', 'cssmin', 'csscomb', 'usebanner']); // Docs distribution task. grunt.registerTask('dist-docs', 'copy:docs'); diff --git a/dist/css/bootstrap-rtl.css b/dist/css/bootstrap-rtl.css index c954e4c49c..c818361aae 100644 --- a/dist/css/bootstrap-rtl.css +++ b/dist/css/bootstrap-rtl.css @@ -115,8 +115,9 @@ figure { hr { height: 0; - -moz-box-sizing: content-box; - box-sizing: content-box; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } pre { @@ -175,7 +176,9 @@ input { input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; padding: 0; } @@ -230,7 +233,8 @@ th { color: #000 !important; text-shadow: none !important; background: transparent !important; - box-shadow: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } a, @@ -1220,6 +1224,7 @@ img { border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } @@ -1667,7 +1672,8 @@ kbd { color: #fff; background-color: #333; border-radius: 3px; - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); } pre { @@ -3015,7 +3021,8 @@ output { border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } @@ -3783,6 +3790,7 @@ input[type="button"].btn-block { .fade { opacity: 0; -webkit-transition: opacity .15s linear; + -o-transition: opacity .15s linear; transition: opacity .15s linear; } @@ -3811,6 +3819,7 @@ tbody.collapse.in { height: 0; overflow: hidden; -webkit-transition: height .35s ease; + -o-transition: height .35s ease; transition: height .35s ease; } @@ -3846,7 +3855,8 @@ tbody.collapse.in { font-size: 14px; list-style: none; background-color: #fff; - background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; @@ -4617,7 +4627,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .navbar-collapse.in { @@ -4628,7 +4639,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .navbar-collapse { width: auto; border-top: 0; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .navbar-collapse.collapse { @@ -4777,7 +4789,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { margin-top: 0; background-color: transparent; border: 0; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, @@ -5548,6 +5561,7 @@ a.list-group-item.active > .badge, border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } @@ -5670,6 +5684,16 @@ a.thumbnail.active { } } +@-o-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + + to { + background-position: 100% 0; + } +} + @keyframes progress-bar-stripes { from { background-position: 40px 0; @@ -5702,17 +5726,21 @@ a.thumbnail.active { -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; + -o-transition: width .6s ease; transition: width .6s ease; } .progress-striped .progress-bar { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); - background-size: 40px 40px; + -webkit-background-size: 40px 40px; + background-size: 40px 40px; } .progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } @@ -5726,7 +5754,8 @@ a.thumbnail.active { color: #999; background-color: transparent; background-image: none; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .progress-bar-success { @@ -5735,6 +5764,7 @@ a.thumbnail.active { .progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } @@ -5744,6 +5774,7 @@ a.thumbnail.active { .progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } @@ -5753,6 +5784,7 @@ a.thumbnail.active { .progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } @@ -5762,6 +5794,7 @@ a.thumbnail.active { .progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } @@ -6447,17 +6480,18 @@ button.close { .modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; - -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); + -o-transform: translate(0, -25%); transform: translate(0, -25%); } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); transform: translate(0, 0); } @@ -6470,7 +6504,8 @@ button.close { .modal-content { position: relative; background-color: #fff; - background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; @@ -6685,7 +6720,8 @@ button.close { text-align: right; white-space: normal; background-color: #fff; - background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; @@ -6825,6 +6861,7 @@ button.close { position: relative; display: none; -webkit-transition: .6s ease-in-out left; + -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left; } @@ -6887,6 +6924,9 @@ button.close { .carousel-control.left { background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .5) 0%), color-stop(rgba(0, 0, 0, .0001) 100%)); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; @@ -6896,6 +6936,9 @@ button.close { right: auto; left: 0; background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .0001) 0%), color-stop(rgba(0, 0, 0, .5) 100%)); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5))); + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; diff --git a/dist/css/bootstrap-theme.css b/dist/css/bootstrap-theme.css index a4069929bc..e9d9a17eba 100644 --- a/dist/css/bootstrap-theme.css +++ b/dist/css/bootstrap-theme.css @@ -36,6 +36,8 @@ .btn-default { text-shadow: 0 1px 0 #fff; background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%); + background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0)); background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); @@ -55,6 +57,8 @@ } .btn-primary { background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%); + background-image: -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2)); 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); @@ -73,6 +77,8 @@ } .btn-success { background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%); + background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641)); 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); @@ -91,6 +97,8 @@ } .btn-info { background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); + background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2)); 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); @@ -109,6 +117,8 @@ } .btn-warning { background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); + background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316)); 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); @@ -127,6 +137,8 @@ } .btn-danger { background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%); + background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a)); 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); @@ -152,6 +164,8 @@ .dropdown-menu > li > a:focus { background-color: #e8e8e8; background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); + background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); background-repeat: repeat-x; @@ -161,12 +175,16 @@ .dropdown-menu > .active > a:focus { background-color: #357ebd; background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); + background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd)); background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); background-repeat: repeat-x; } .navbar-default { background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%); + background-image: -o-linear-gradient(top, #fff 0%, #f8f8f8 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8)); background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); @@ -177,6 +195,8 @@ } .navbar-default .navbar-nav > .active > a { background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%); + background-image: -o-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f3f3f3)); background-image: linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0); background-repeat: repeat-x; @@ -189,6 +209,8 @@ } .navbar-inverse { background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%); + background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222)); background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); @@ -196,6 +218,8 @@ } .navbar-inverse .navbar-nav > .active > a { background-image: -webkit-linear-gradient(top, #222 0%, #282828 100%); + background-image: -o-linear-gradient(top, #222 0%, #282828 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#282828)); background-image: linear-gradient(to bottom, #222 0%, #282828 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0); background-repeat: repeat-x; @@ -218,6 +242,8 @@ } .alert-success { background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); + background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc)); background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0); background-repeat: repeat-x; @@ -225,6 +251,8 @@ } .alert-info { background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%); + background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0)); background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0); background-repeat: repeat-x; @@ -232,6 +260,8 @@ } .alert-warning { background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); + background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0)); background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0); background-repeat: repeat-x; @@ -239,6 +269,8 @@ } .alert-danger { background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); + background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3)); background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0); background-repeat: repeat-x; @@ -246,36 +278,48 @@ } .progress { background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); + background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5)); background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); background-repeat: repeat-x; } .progress-bar { background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%); + background-image: -o-linear-gradient(top, #428bca 0%, #3071a9 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9)); background-image: linear-gradient(to bottom, #428bca 0%, #3071a9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0); background-repeat: repeat-x; } .progress-bar-success { background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%); + background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44)); background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); background-repeat: repeat-x; } .progress-bar-info { background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); + background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5)); background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0); background-repeat: repeat-x; } .progress-bar-warning { background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); + background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f)); background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); background-repeat: repeat-x; } .progress-bar-danger { background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%); + background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c)); background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); background-repeat: repeat-x; @@ -290,6 +334,8 @@ .list-group-item.active:focus { text-shadow: 0 -1px 0 #3071a9; background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%); + background-image: -o-linear-gradient(top, #428bca 0%, #3278b3 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3278b3)); background-image: linear-gradient(to bottom, #428bca 0%, #3278b3 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0); background-repeat: repeat-x; @@ -301,42 +347,56 @@ } .panel-default > .panel-heading { background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); + background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); background-repeat: repeat-x; } .panel-primary > .panel-heading { background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%); + background-image: -o-linear-gradient(top, #428bca 0%, #357ebd 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd)); background-image: linear-gradient(to bottom, #428bca 0%, #357ebd 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0); background-repeat: repeat-x; } .panel-success > .panel-heading { background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); + background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6)); background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0); background-repeat: repeat-x; } .panel-info > .panel-heading { background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); + background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3)); background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0); background-repeat: repeat-x; } .panel-warning > .panel-heading { background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); + background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc)); background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0); background-repeat: repeat-x; } .panel-danger > .panel-heading { background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%); + background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc)); background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0); background-repeat: repeat-x; } .well { background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%); + background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%); + background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5)); background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0); background-repeat: repeat-x; diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index b6dad76ca1..e739f23005 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -94,8 +94,9 @@ figure { } hr { height: 0; - -moz-box-sizing: content-box; - box-sizing: content-box; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } pre { overflow: auto; @@ -144,7 +145,9 @@ input { } input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, @@ -189,7 +192,8 @@ th { color: #000 !important; text-shadow: none !important; background: transparent !important; - box-shadow: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } a, a:visited { @@ -947,6 +951,7 @@ img { border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .img-circle { @@ -1323,7 +1328,8 @@ kbd { color: #fff; background-color: #333; border-radius: 3px; - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); } pre { display: block; @@ -2318,7 +2324,8 @@ output { border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; + -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .form-control:focus { @@ -2982,6 +2989,7 @@ input[type="button"].btn-block { .fade { opacity: 0; -webkit-transition: opacity .15s linear; + -o-transition: opacity .15s linear; transition: opacity .15s linear; } .fade.in { @@ -3004,6 +3012,7 @@ tbody.collapse.in { height: 0; overflow: hidden; -webkit-transition: height .35s ease; + -o-transition: height .35s ease; transition: height .35s ease; } .caret { @@ -3035,7 +3044,8 @@ tbody.collapse.in { font-size: 14px; list-style: none; background-color: #fff; - background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; @@ -3677,7 +3687,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { overflow-x: visible; -webkit-overflow-scrolling: touch; border-top: 1px solid transparent; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); + -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); + box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); } .navbar-collapse.in { overflow-y: auto; @@ -3686,7 +3697,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { .navbar-collapse { width: auto; border-top: 0; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .navbar-collapse.collapse { display: block !important; @@ -3813,7 +3825,8 @@ select[multiple].input-group-sm > .input-group-btn > .btn { margin-top: 0; background-color: transparent; border: 0; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { @@ -4452,6 +4465,7 @@ a.list-group-item.active > .badge, border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; + -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .thumbnail > img, @@ -4549,6 +4563,14 @@ a.thumbnail.active { background-position: 0 0; } } +@-o-keyframes progress-bar-stripes { + from { + background-position: 40px 0; + } + to { + background-position: 0 0; + } +} @keyframes progress-bar-stripes { from { background-position: 40px 0; @@ -4578,15 +4600,19 @@ a.thumbnail.active { -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; + -o-transition: width .6s ease; transition: width .6s ease; } .progress-striped .progress-bar { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); - background-size: 40px 40px; + -webkit-background-size: 40px 40px; + background-size: 40px 40px; } .progress.active .progress-bar { -webkit-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } .progress-bar[aria-valuenow="1"], @@ -4598,13 +4624,15 @@ a.thumbnail.active { color: #999; background-color: transparent; background-image: none; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .progress-bar-success { background-color: #5cb85c; } .progress-striped .progress-bar-success { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .progress-bar-info { @@ -4612,6 +4640,7 @@ a.thumbnail.active { } .progress-striped .progress-bar-info { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .progress-bar-warning { @@ -4619,6 +4648,7 @@ a.thumbnail.active { } .progress-striped .progress-bar-warning { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .progress-bar-danger { @@ -4626,6 +4656,7 @@ a.thumbnail.active { } .progress-striped .progress-bar-danger { background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); } .media, @@ -5194,16 +5225,17 @@ button.close { } .modal.fade .modal-dialog { -webkit-transition: -webkit-transform .3s ease-out; - -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); + -o-transform: translate(0, -25%); transform: translate(0, -25%); } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); + -o-transform: translate(0, 0); transform: translate(0, 0); } .modal-dialog { @@ -5214,7 +5246,8 @@ button.close { .modal-content { position: relative; background-color: #fff; - background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; @@ -5397,7 +5430,8 @@ button.close { text-align: left; white-space: normal; background-color: #fff; - background-clip: padding-box; + -webkit-background-clip: padding-box; + background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; @@ -5517,6 +5551,7 @@ button.close { position: relative; display: none; -webkit-transition: .6s ease-in-out left; + -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left; } .carousel-inner > .item > img, @@ -5568,6 +5603,9 @@ button.close { } .carousel-control.left { background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .5) 0%), color-stop(rgba(0, 0, 0, .0001) 100%)); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, .0001))); + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .0001) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1); background-repeat: repeat-x; @@ -5576,6 +5614,9 @@ button.close { right: 0; left: auto; background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, .0001) 0%), color-stop(rgba(0, 0, 0, .5) 100%)); + background-image: -o-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); + background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .0001)), to(rgba(0, 0, 0, .5))); + background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0%, rgba(0, 0, 0, .5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1); background-repeat: repeat-x; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 6e8d301567..aba85096b3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -231,7 +231,9 @@ body { text-align: center; text-shadow: 0 1px 0 rgba(0,0,0,.1); background-color: #6f5499; + background-image: -webkit-gradient(linear, left top, left bottom, from(#563d7c), to(#6f5499)); background-image: -webkit-linear-gradient(top, #563d7c 0%, #6f5499 100%); + background-image: -o-linear-gradient(top, #563d7c 0%, #6f5499 100%); background-image: linear-gradient(to bottom, #563d7c 0%, #6f5499 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#563d7c', endColorstr='#6F5499', GradientType=0); background-repeat: repeat-x; @@ -837,7 +839,8 @@ h1[id] { border-color: #e5e5e5 #eee #eee; border-style: solid; border-width: 1px 0; - box-shadow: inset 0 3px 6px rgba(0,0,0,.05); + -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.05); + box-shadow: inset 0 3px 6px rgba(0,0,0,.05); } /* Echo out a label for the example */ .bs-example:after { @@ -868,7 +871,8 @@ h1[id] { border-color: #ddd; border-width: 1px; border-radius: 4px 4px 0 0; - box-shadow: none; + -webkit-box-shadow: none; + box-shadow: none; } .bs-example + .highlight { margin-top: -16px; @@ -1329,7 +1333,8 @@ h1[id] { color: #fff; background-color: #d9534f; border-bottom: 1px solid #b94441; - box-shadow: inset 0 1px 0 rgba(255,255,255,.25); + -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.25); + box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .bs-customizer-alert .close { margin-top: -4px; @@ -1346,7 +1351,8 @@ h1[id] { color: #fff; background-color: #a83c3a; border-color: #973634; - box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); + box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); } @@ -1449,6 +1455,6 @@ h1[id] { border-color: rgba(82,168,236,.8); outline: 0; outline: thin dotted \9; /* IE6-9 */ - -moz-box-shadow: 0 0 8px rgba(82,168,236,.6); - box-shadow: 0 0 8px rgba(82,168,236,.6); + -webkit-box-shadow: 0 0 8px rgba(82,168,236,.6); + box-shadow: 0 0 8px rgba(82,168,236,.6); } diff --git a/docs/css.html b/docs/css.html index bbfb515aad..9cd635cd7a 100644 --- a/docs/css.html +++ b/docs/css.html @@ -2972,6 +2972,7 @@ a {
Reset your components' box model with a single mixin. For context, see this helpful article from Mozilla.
+The mixin is deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.
{% highlight scss %} .box-sizing(@box-model) { -webkit-box-sizing: @box-model; // Safari <= 5 @@ -3014,6 +3015,7 @@ a {Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.
+The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
{% highlight scss %} .transition(@transition) { -webkit-transition: @transition; @@ -3041,6 +3043,7 @@ a {Rotate, scale, translate (move), or skew any object.
+The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
{% highlight scss %} .rotate(@degrees) { -webkit-transform: rotate(@degrees); @@ -3097,6 +3100,7 @@ a {A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.
+The mixins are deprecated as of v3.2.0, with the introduction of autoprefixer. To preserve backwards-compatibility, Bootstrap will continue to use the mixins internally until Bootstrap v4.
{% highlight scss %} .animation(@animation) { -webkit-animation: @animation; @@ -3143,8 +3147,7 @@ a {Provide context for form controls within each field.
{% highlight scss %} .placeholder(@color: @input-color-placeholder) { - &:-moz-placeholder { color: @color; } // Firefox 4-18 - &::-moz-placeholder { color: @color; } // Firefox 19+ + &::-moz-placeholder { color: @color; } // Firefox &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome } diff --git a/docs/examples/blog/blog.css b/docs/examples/blog/blog.css index 575076a8d4..9d7298160e 100644 --- a/docs/examples/blog/blog.css +++ b/docs/examples/blog/blog.css @@ -37,7 +37,8 @@ h6, .h6 { .blog-masthead { background-color: #428bca; - box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); + -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); + box-shadow: inset 0 -2px 5px rgba(0,0,0,.1); } /* Nav links */ diff --git a/docs/examples/cover/cover.css b/docs/examples/cover/cover.css index 9fcc9274f1..aee9449e6c 100644 --- a/docs/examples/cover/cover.css +++ b/docs/examples/cover/cover.css @@ -33,7 +33,8 @@ 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); + -webkit-box-shadow: inset 0 0 100px 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 */ diff --git a/docs/examples/justified-nav/justified-nav.css b/docs/examples/justified-nav/justified-nav.css index 50125876f5..fd71b43a94 100644 --- a/docs/examples/justified-nav/justified-nav.css +++ b/docs/examples/justified-nav/justified-nav.css @@ -34,11 +34,10 @@ body { color: #777; text-align: center; background-color: #e5e5e5; /* Old browsers */ - background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */ - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ - background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */ - background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */ - background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */ + background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); + background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); + background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); + background-image: linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */ background-repeat: repeat-x; /* Repeat the gradient */ border-bottom: 1px solid #d5d5d5; @@ -48,7 +47,8 @@ body { .nav-justified > .active > a:focus { background-color: #ddd; background-image: none; - box-shadow: inset 0 3px 7px rgba(0,0,0,.15); + -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15); + box-shadow: inset 0 3px 7px rgba(0,0,0,.15); } .nav-justified > li:first-child > a { border-radius: 5px 5px 0 0; diff --git a/docs/examples/offcanvas/offcanvas.css b/docs/examples/offcanvas/offcanvas.css index eeace16010..2a72199d59 100644 --- a/docs/examples/offcanvas/offcanvas.css +++ b/docs/examples/offcanvas/offcanvas.css @@ -21,7 +21,7 @@ footer { .row-offcanvas { position: relative; -webkit-transition: all .25s ease-out; - -moz-transition: all .25s ease-out; + -o-transition: all .25s ease-out; transition: all .25s ease-out; } diff --git a/less/mixins.less b/less/mixins.less index 9a3fdd3ac9..e394b8a1e3 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -124,26 +124,39 @@ } // Transitions +// +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition(@transition) { -webkit-transition: @transition; + -o-transition: @transition; transition: @transition; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition-property(@transition-property) { -webkit-transition-property: @transition-property; transition-property: @transition-property; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition-delay(@transition-delay) { -webkit-transition-delay: @transition-delay; transition-delay: @transition-delay; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition-duration(@transition-duration) { -webkit-transition-duration: @transition-duration; transition-duration: @transition-duration; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition-timing-function(@timing-function) { -webkit-animation-timing-function: @timing-function; animation-timing-function: @timing-function; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transition-transform(@transition) { -webkit-transition: -webkit-transform @transition; -moz-transition: -moz-transform @transition; @@ -152,65 +165,100 @@ } // Transformations +// +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .scale(@ratio) { -webkit-transform: scale(@ratio); -ms-transform: scale(@ratio); // IE9 only + -o-transform: scale(@ratio); transform: scale(@ratio); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .scale(@ratioX; @ratioY) { -webkit-transform: scale(@ratioX, @ratioY); -ms-transform: scale(@ratioX, @ratioY); // IE9 only + -o-transform: scale(@ratioX, @ratioY); transform: scale(@ratioX, @ratioY); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .scaleX(@ratio) { -webkit-transform: scaleX(@ratio); -ms-transform: scaleX(@ratio); // IE9 only + -o-transform: scaleX(@ratio); transform: scaleX(@ratio); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .scaleY(@ratio) { -webkit-transform: scaleY(@ratio); -ms-transform: scaleY(@ratio); // IE9 only + -o-transform: scaleY(@ratio); transform: scaleY(@ratio); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .skew(@x; @y) { -webkit-transform: skew(@x, @y); -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ + -o-transform: skew(@x, @y); transform: skew(@x, @y); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .translate(@x; @y) { -webkit-transform: translate(@x, @y); -ms-transform: translate(@x, @y); // IE9 only + -o-transform: translate(@x, @y); transform: translate(@x, @y); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); // IE9 only + -o-transform: rotate(@degrees); transform: rotate(@degrees); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .rotateX(@degrees) { -webkit-transform: rotateX(@degrees); -ms-transform: rotateX(@degrees); // IE9 only + -o-transform: rotateX(@degrees); transform: rotateX(@degrees); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .rotateY(@degrees) { -webkit-transform: rotateY(@degrees); -ms-transform: rotateY(@degrees); // IE9 only + -o-transform: rotateY(@degrees); transform: rotateY(@degrees); } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .perspective(@perspective) { -webkit-perspective: @perspective; -moz-perspective: @perspective; perspective: @perspective; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .perspective-origin(@perspective) { -webkit-perspective-origin: @perspective; -moz-perspective-origin: @perspective; perspective-origin: @perspective; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .transform-origin(@origin) { -webkit-transform-origin: @origin; -moz-transform-origin: @origin; @@ -219,30 +267,45 @@ } // Animations +// +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation(@animation) { -webkit-animation: @animation; + -o-animation: @animation; animation: @animation; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-name(@name) { -webkit-animation-name: @name; animation-name: @name; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-duration(@duration) { -webkit-animation-duration: @duration; animation-duration: @duration; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-timing-function(@timing-function) { -webkit-animation-timing-function: @timing-function; animation-timing-function: @timing-function; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-delay(@delay) { -webkit-animation-delay: @delay; animation-delay: @delay; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-iteration-count(@iteration-count) { -webkit-animation-iteration-count: @iteration-count; animation-iteration-count: @iteration-count; } + +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .animation-direction(@direction) { -webkit-animation-direction: @direction; animation-direction: @direction; @@ -255,6 +318,7 @@ // Backface visibility // Prevent browsers from flickering when using CSS 3D transforms. // Default value is `visible`, but can be changed to `hidden` +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .backface-visibility(@visibility){ -webkit-backface-visibility: @visibility; -moz-backface-visibility: @visibility; @@ -262,6 +326,7 @@ } // Box sizing +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .box-sizing(@boxmodel) { -webkit-box-sizing: @boxmodel; -moz-box-sizing: @boxmodel; @@ -270,6 +335,7 @@ // User select // For selecting text on the page +// Deprecated as of v3.2.0 due to the introduction of autoprefixer (will be removed in v4) .user-select(@select) { -webkit-user-select: @select; -moz-user-select: @select; @@ -324,7 +390,8 @@ // Color stops are not available in IE9 and below. .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { 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: 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: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12 + 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-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down } @@ -335,6 +402,7 @@ // Color stops are not available in IE9 and below. .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12 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-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down @@ -343,16 +411,19 @@ .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { background-repeat: repeat-x; background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ } .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: -o-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-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 } .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: -o-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; 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 @@ -364,6 +435,7 @@ } .striped(@color: rgba(255,255,255,.15); @angle: 45deg) { background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: -o-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); } } diff --git a/less/progress-bars.less b/less/progress-bars.less index 6598218523..74b7028438 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -6,13 +6,6 @@ // Bar animations // ------------------------- -// WebKit -@-webkit-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// Spec and IE10+ @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } diff --git a/package.json b/package.json index eae9e933ec..8168fddca2 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "canonical-json": "~0.0.4", "css-flip": "~0.3.0", "grunt": "~0.4.2", + "grunt-autoprefixer": "~0.7.2", "grunt-banner": "~0.2.1", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-concat": "~0.3.0",