Permalink
Browse files

Add autoprefixer

  • Loading branch information...
1 parent 84a7431 commit cb7eb674accd24b6b73f26ef23cf4a301b6ebfaf @BBosman BBosman committed Feb 22, 2014
View
@@ -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`).
View
@@ -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');
@@ -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;
Oops, something went wrong.

0 comments on commit cb7eb67

Please sign in to comment.