From 17a1ae16cab1962f7e27de08f41665dac2c36da5 Mon Sep 17 00:00:00 2001 From: sbertal Date: Thu, 1 Dec 2016 22:38:56 -0800 Subject: [PATCH 1/4] add postcss, remove prefixes and < ie8 hacks --- Gruntfile.js | 22 ++++++++++++++++++++++ package.json | 2 ++ src/buttons/css/buttons-core.css | 6 ------ src/buttons/css/buttons.css | 5 ++--- src/forms/css/forms.css | 6 ------ src/grids/css/grids-core.css | 17 ++--------------- src/menus/css/menus-core.css | 2 -- 7 files changed, 28 insertions(+), 32 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 6a2d049ff..b89ae97d1 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -104,6 +104,26 @@ grunt.initConfig({ } }, + // -- PostCSS Config -------------------------------------------------------- + + postcss: { + options: { + processors: [ + require('autoprefixer')({ + browsers: [ + 'last 2 versions', + 'ie >= 8', + 'iOS >= 6', + 'Android >= 4' + ] + }) + ] + }, + dist: { + src: 'build/*.css' + } + }, + // -- CSSLint Config ------------------------------------------------------- csslint: { @@ -258,6 +278,7 @@ grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-compress'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-css-selectors'); +grunt.loadNpmTasks('grunt-postcss'); grunt.loadNpmTasks('grunt-pure-grids'); grunt.loadNpmTasks('grunt-stripmq'); @@ -275,6 +296,7 @@ grunt.registerTask('build', [ 'concat:build', 'clean:build_res', 'css_selectors:base', + 'postcss', 'cssmin', 'license' ]); diff --git a/package.json b/package.json index ae04f547a..699452ca9 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ }, "files": "build/", "devDependencies": { + "autoprefixer": "^6.3.1", "bower": "^1.3.7", "grunt": "^1.0.1", "grunt-cli": "^1.2.0", @@ -22,6 +23,7 @@ "grunt-contrib-cssmin": "^1.0.2", "grunt-contrib-watch": "^1.0.0", "grunt-css-selectors": "^1.1.0", + "grunt-postcss": "^0.7.1", "grunt-pure-grids": "^1.0.0", "grunt-stripmq": "0.0.6" }, diff --git a/src/buttons/css/buttons-core.css b/src/buttons/css/buttons-core.css index f007c91b5..5ce5b0e5e 100644 --- a/src/buttons/css/buttons-core.css +++ b/src/buttons/css/buttons-core.css @@ -1,19 +1,13 @@ .pure-button { /* Structure */ display: inline-block; - zoom: 1; line-height: normal; white-space: nowrap; vertical-align: middle; text-align: center; cursor: pointer; -webkit-user-drag: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } diff --git a/src/buttons/css/buttons.css b/src/buttons/css/buttons.css index 35009968a..777f0e112 100644 --- a/src/buttons/css/buttons.css +++ b/src/buttons/css/buttons.css @@ -17,7 +17,7 @@ .pure-button:hover, .pure-button:focus { /* csslint ignore:start */ - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000',GradientType=0); + filter: alpha(opacity=90); /* csslint ignore:end */ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10))); background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); @@ -31,7 +31,7 @@ .pure-button-active, .pure-button:active { box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset; - border-color: #000\9; + border-color: #000; } .pure-button[disabled], @@ -42,7 +42,6 @@ border: none; background-image: none; /* csslint ignore:start */ - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); filter: alpha(opacity=40); /* csslint ignore:end */ -khtml-opacity: 0.40; diff --git a/src/forms/css/forms.css b/src/forms/css/forms.css index 370d35033..83d7bf280 100644 --- a/src/forms/css/forms.css +++ b/src/forms/css/forms.css @@ -28,8 +28,6 @@ so we can ignore the csslint warning. box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; vertical-align: middle; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -43,8 +41,6 @@ since IE8 won't execute CSS that contains a CSS3 selector. border: 1px solid #ccc; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -209,8 +205,6 @@ since IE8 won't execute CSS that contains a CSS3 selector. .pure-form-aligned .pure-help-inline, .pure-form-message-inline { display: inline-block; - *display: inline; - *zoom: 1; vertical-align: middle; } .pure-form-aligned textarea { diff --git a/src/grids/css/grids-core.css b/src/grids/css/grids-core.css index 10294237e..92fde45cc 100644 --- a/src/grids/css/grids-core.css +++ b/src/grids/css/grids-core.css @@ -2,8 +2,6 @@ .pure-g { letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ - *letter-spacing: normal; /* reset IE < 8 */ - *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */ /* @@ -26,21 +24,12 @@ /* Use flexbox when possible to avoid `letter-spacing` side-effects. - - NOTE: Firefox (as of 25) does not currently support flex-wrap, so the - `-moz-` prefix version is omitted. */ - display: -webkit-flex; - -webkit-flex-flow: row wrap; + display: flex; + flex-flow: row wrap; - /* IE10 uses display: flexbox */ - display: -ms-flexbox; - -ms-flex-flow: row wrap; - /* Prevents distributing space between rows */ - -ms-align-content: flex-start; - -webkit-align-content: flex-start; align-content: flex-start; } @@ -55,8 +44,6 @@ .pure-u { display: inline-block; - *display: inline; /* IE < 8: fake inline-block */ - zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; diff --git a/src/menus/css/menus-core.css b/src/menus/css/menus-core.css index bfdc418c5..0ba775495 100644 --- a/src/menus/css/menus-core.css +++ b/src/menus/css/menus-core.css @@ -1,7 +1,5 @@ /*csslint adjoining-classes: false, box-model:false*/ .pure-menu { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } From 37ba088285bbd2eb6653dfd67f9b8ba426dcd81c Mon Sep 17 00:00:00 2001 From: sbertal Date: Thu, 1 Dec 2016 22:39:17 -0800 Subject: [PATCH 2/4] add styles to tfoot --- src/tables/css/tables.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/tables/css/tables.css b/src/tables/css/tables.css index fdd0e7898..9e24f391a 100644 --- a/src/tables/css/tables.css +++ b/src/tables/css/tables.css @@ -30,7 +30,8 @@ there's a rowspan on the first cell. Case added to the tests. issue#432 */ border-left-width: 0; } -.pure-table thead { +.pure-table thead, +.pure-table tfoot { background-color: #e0e0e0; color: #000; text-align: left; From 3a769cb3b160a4e0a3e9d3502f34b39d098c9f1a Mon Sep 17 00:00:00 2001 From: sbertal Date: Thu, 1 Dec 2016 22:39:57 -0800 Subject: [PATCH 3/4] remove gradient on button hover --- src/buttons/css/buttons.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/buttons/css/buttons.css b/src/buttons/css/buttons.css index 777f0e112..5405f1305 100644 --- a/src/buttons/css/buttons.css +++ b/src/buttons/css/buttons.css @@ -19,11 +19,9 @@ /* csslint ignore:start */ filter: alpha(opacity=90); /* csslint ignore:end */ - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.10))); - background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); - background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.05) 0%, rgba(0,0,0, 0.10)); - background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); - background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.10)); + -khtml-opacity: 0.90; + -moz-opacity: 0.90; + opacity: 0.90; } .pure-button:focus { outline: 0; From 28775edde1518562b50aa7cb0c5af61a41f796e1 Mon Sep 17 00:00:00 2001 From: sbertal Date: Thu, 1 Dec 2016 22:40:23 -0800 Subject: [PATCH 4/4] disable grid display in tables for ie10 --- src/grids/css/grids-core.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/grids/css/grids-core.css b/src/grids/css/grids-core.css index 92fde45cc..62d873f43 100644 --- a/src/grids/css/grids-core.css +++ b/src/grids/css/grids-core.css @@ -33,6 +33,13 @@ align-content: flex-start; } +/* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */ +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + table .pure-g { + display: block; + } +} + /* Opera as of 12 on Windows needs word-spacing. The ".opera-only" selector is used to prevent actual prefocus styling and is not required in markup.