mirror of
https://github.com/papercss/papercss
synced 2024-06-01 13:32:42 +02:00
Use gulp autoprefixer instead of manually adding prefixes
This commit is contained in:
parent
2e176d3cef
commit
a9ae07d8d6
|
@ -5,8 +5,6 @@
|
||||||
],
|
],
|
||||||
"rules": {
|
"rules": {
|
||||||
"max-nesting-depth": 5,
|
"max-nesting-depth": 5,
|
||||||
"property-no-vendor-prefix": null,
|
|
||||||
"value-no-vendor-prefix": null,
|
|
||||||
"selector-no-qualifying-type": null,
|
"selector-no-qualifying-type": null,
|
||||||
"selector-max-compound-selectors": null,
|
"selector-max-compound-selectors": null,
|
||||||
"scss/selector-no-redundant-nesting-selector": null,
|
"scss/selector-no-redundant-nesting-selector": null,
|
||||||
|
|
|
@ -7,11 +7,13 @@ const gulp = require('gulp'),
|
||||||
exec = require('child_process').execFile,
|
exec = require('child_process').execFile,
|
||||||
optional = require('optional'),
|
optional = require('optional'),
|
||||||
hugo = optional('hugo-bin'),
|
hugo = optional('hugo-bin'),
|
||||||
gulpStylelint = optional('gulp-stylelint');
|
gulpStylelint = optional('gulp-stylelint'),
|
||||||
|
autoprefixer = require('gulp-autoprefixer');
|
||||||
|
|
||||||
gulp.task('sass', function() {
|
gulp.task('sass', function() {
|
||||||
gulp.src('src/**/*.scss')
|
gulp.src('src/**/*.scss')
|
||||||
.pipe(sass.sync().on('error', sass.logError))
|
.pipe(sass.sync().on('error', sass.logError))
|
||||||
|
.pipe(autoprefixer())
|
||||||
.pipe(cleanCSS({format: 'beautify'}))
|
.pipe(cleanCSS({format: 'beautify'}))
|
||||||
.pipe(rename('paper.css'))
|
.pipe(rename('paper.css'))
|
||||||
.pipe(gulp.dest('dist'))
|
.pipe(gulp.dest('dist'))
|
||||||
|
@ -49,6 +51,7 @@ gulp.task('hugo-build', function (cb) {
|
||||||
gulp.task('minify-css', () => {
|
gulp.task('minify-css', () => {
|
||||||
return gulp.src('src/**/*.scss')
|
return gulp.src('src/**/*.scss')
|
||||||
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
|
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
|
||||||
|
.pipe(autoprefixer())
|
||||||
.pipe(rename('paper.min.css'))
|
.pipe(rename('paper.min.css'))
|
||||||
.pipe(gulp.dest('dist'))
|
.pipe(gulp.dest('dist'))
|
||||||
.pipe(gulp.dest('docs/static/assets'));
|
.pipe(gulp.dest('docs/static/assets'));
|
||||||
|
|
6736
package-lock.json
generated
6736
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -22,6 +22,7 @@
|
||||||
"homepage": "https://www.getpapercss.com",
|
"homepage": "https://www.getpapercss.com",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"gulp": "3.9.1",
|
"gulp": "3.9.1",
|
||||||
|
"gulp-autoprefixer": "^6.0.0",
|
||||||
"gulp-clean-css": "3.9.0",
|
"gulp-clean-css": "3.9.0",
|
||||||
"gulp-connect": "5.0.0",
|
"gulp-connect": "5.0.0",
|
||||||
"gulp-plumber": "1.1.0",
|
"gulp-plumber": "1.1.0",
|
||||||
|
@ -74,5 +75,8 @@
|
||||||
},
|
},
|
||||||
"pre-commit": [
|
"pre-commit": [
|
||||||
"stylelint"
|
"stylelint"
|
||||||
|
],
|
||||||
|
"browserslist": [
|
||||||
|
"last 4 versions"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -44,8 +44,6 @@ button,
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border: 2px solid $secondary;
|
border: 2px solid $secondary;
|
||||||
-webkit-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
|
||||||
-moz-box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
|
||||||
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -25,7 +25,6 @@ nav {
|
||||||
|
|
||||||
.collapsible input[id^=collapsible]:checked + button {
|
.collapsible input[id^=collapsible]:checked + button {
|
||||||
.bar1 {
|
.bar1 {
|
||||||
-webkit-transform: rotate(-45deg) translate(-9px, 7px);
|
|
||||||
transform: rotate(-45deg) translate(-9px, 7px);
|
transform: rotate(-45deg) translate(-9px, 7px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,7 +33,6 @@ nav {
|
||||||
}
|
}
|
||||||
|
|
||||||
.bar3 {
|
.bar3 {
|
||||||
-webkit-transform: rotate(45deg) translate(-8px, -9px);
|
|
||||||
transform: rotate(45deg) translate(-8px, -9px);
|
transform: rotate(45deg) translate(-8px, -9px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -155,16 +155,11 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin center-all() {
|
@mixin center-all() {
|
||||||
-webkit-align-items: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
-webkit-justify-content: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin col-size($percent) {
|
@mixin col-size($percent) {
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 $percent;
|
|
||||||
-ms-flex: 0 0 $percent;
|
|
||||||
flex: 0 0 $percent;
|
flex: 0 0 $percent;
|
||||||
max-width: $percent;
|
max-width: $percent;
|
||||||
}
|
}
|
||||||
|
@ -176,7 +171,7 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
Add transform: translate() with browser prefixes.
|
Add transform: translate().
|
||||||
Same syntax for translate() and translate3d()
|
Same syntax for translate() and translate3d()
|
||||||
To get 3D add a $z value and set 'true'
|
To get 3D add a $z value and set 'true'
|
||||||
@param string | boolean
|
@param string | boolean
|
||||||
|
@ -184,12 +179,8 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
||||||
*/
|
*/
|
||||||
@mixin translate($x, $y, $z: 0, $transform3d: false) {
|
@mixin translate($x, $y, $z: 0, $transform3d: false) {
|
||||||
@if $transform3d {
|
@if $transform3d {
|
||||||
-webkit-transform: translate3d($x, $y, $z);
|
|
||||||
-ms-transform: translate3d($x, $y, $z);
|
|
||||||
transform: translate3d($x, $y, $z);
|
transform: translate3d($x, $y, $z);
|
||||||
} @else {
|
} @else {
|
||||||
-webkit-transform: translate($x, $y);
|
|
||||||
-ms-transform: translate($x, $y);
|
|
||||||
transform: translate($x, $y);
|
transform: translate($x, $y);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -200,9 +191,6 @@ $shadow-hover: 2px 8px 8px -5px $shadow-color-hover !default;
|
||||||
@default all | 235ms | ease-in-out | 0
|
@default all | 235ms | ease-in-out | 0
|
||||||
*/
|
*/
|
||||||
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
|
@mixin transition($name:all, $duration:235ms, $animation:ease-in-out, $delay: 0s) {
|
||||||
-webkit-transition: $name $duration $animation $delay;
|
|
||||||
-moz-transition: $name $duration $animation $delay;
|
|
||||||
-o-transition: $name $duration $animation $delay;
|
|
||||||
transition: $name $duration $animation $delay;
|
transition: $name $duration $animation $delay;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -33,8 +33,6 @@ hr {
|
||||||
.paper {
|
.paper {
|
||||||
background-color: $main-background;
|
background-color: $main-background;
|
||||||
border: 1px solid $primary-light;
|
border: 1px solid $primary-light;
|
||||||
-moz-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
|
|
||||||
-webkit-box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
|
|
||||||
box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
|
box-shadow: -1px 5px 35px -9px hsla(0, 0%, 0%, 0.2);
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
|
|
@ -4,9 +4,6 @@ $number-columns: 12;
|
||||||
@include resp($min: $breakpoint) {
|
@include resp($min: $breakpoint) {
|
||||||
@for $i from 1 through $number-columns {
|
@for $i from 1 through $number-columns {
|
||||||
.#{$colName}-#{$i} {
|
.#{$colName}-#{$i} {
|
||||||
-webkit-box-flex: 0;
|
|
||||||
-webkit-flex: 0 0 $i * 100% / $number-columns;
|
|
||||||
-ms-flex: 0 0 $i * 100% / $number-columns;
|
|
||||||
flex: 0 0 $i * 100% / $number-columns;
|
flex: 0 0 $i * 100% / $number-columns;
|
||||||
max-width: $i * 100% / $number-columns;
|
max-width: $i * 100% / $number-columns;
|
||||||
}
|
}
|
||||||
|
@ -15,65 +12,38 @@ $number-columns: 12;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
-webkit-flex-flow: row wrap;
|
|
||||||
-ms-flex-flow: row wrap;
|
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
|
|
||||||
&.flex-right {
|
&.flex-right {
|
||||||
-webkit-box-pack: end;
|
|
||||||
-ms-flex-pack: end;
|
|
||||||
-webkit-justify-content: flex-end;
|
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flex-center {
|
&.flex-center {
|
||||||
-webkit-box-pack: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flex-edges {
|
&.flex-edges {
|
||||||
-webkit-box-pack: justify;
|
|
||||||
-ms-flex-pack: justify;
|
|
||||||
-webkit-justify-content: space-between;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flex-spaces {
|
&.flex-spaces {
|
||||||
-ms-flex-pack: distribute;
|
|
||||||
-webkit-justify-content: space-around;
|
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flex-top {
|
&.flex-top {
|
||||||
-webkit-align-items: flex-start;
|
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
-webkit-box-align: start;
|
|
||||||
-ms-flex-align: start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flex-middle {
|
&.flex-middle {
|
||||||
-webkit-align-items: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.flex-bottom {
|
&.flex-bottom {
|
||||||
-webkit-align-items: flex-end;
|
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
-webkit-box-align: end;
|
|
||||||
-ms-flex-align: end;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -97,22 +67,15 @@ $number-columns: 12;
|
||||||
@include create-flex-classes(lg, $large-screen);
|
@include create-flex-classes(lg, $large-screen);
|
||||||
|
|
||||||
.align-top {
|
.align-top {
|
||||||
-webkit-align-self: flex-start;
|
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
-ms-flex-item-align: start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-middle {
|
.align-middle {
|
||||||
-webkit-align-self: center;
|
|
||||||
align-self: center;
|
align-self: center;
|
||||||
-ms-flex-item-align: center;
|
|
||||||
-ms-grid-row-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.align-bottom {
|
.align-bottom {
|
||||||
-webkit-align-self: flex-end;
|
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
-ms-flex-item-align: end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
|
|
Loading…
Reference in a new issue