From e9444e66e22c655e20195e1b16f6ca6fcfb5fc03 Mon Sep 17 00:00:00 2001 From: Lichun Dai Date: Thu, 16 Nov 2017 13:53:55 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=9B=B4=E6=96=B0=E4=B8=BAst?= =?UTF-8?q?ylus?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/gulpfile.js | 9 ++- dist/image-clip.css | 146 +++++++++++++++-------------------- dist/image-process.css | 114 +-------------------------- dist/image-process.min.css | 2 +- package.json | 1 + src/clip/css/imgclip.css | 112 --------------------------- src/clip/styl/imageclip.styl | 94 ++++++++++++++++++++++ src/clip/styl/index.styl | 1 + src/css/common.css | 3 - src/styl/common.styl | 2 + src/styl/index.styl | 1 + 11 files changed, 171 insertions(+), 314 deletions(-) delete mode 100644 src/clip/css/imgclip.css create mode 100644 src/clip/styl/imageclip.styl create mode 100644 src/clip/styl/index.styl delete mode 100644 src/css/common.css create mode 100644 src/styl/common.styl create mode 100644 src/styl/index.styl diff --git a/build/gulpfile.js b/build/gulpfile.js index 2ef4fc5..fe13559 100644 --- a/build/gulpfile.js +++ b/build/gulpfile.js @@ -8,6 +8,7 @@ const gulpCleanCSS = require('gulp-clean-css'); const gulpEslint = require('gulp-eslint'); const gulpRename = require('gulp-rename'); const gulpHeader = require('gulp-header'); +const gulpStylus = require('gulp-stylus'); const babel = require('rollup-plugin-babel'); const eslint = require('rollup-plugin-eslint'); const pkg = require('../package.json'); @@ -104,14 +105,16 @@ gulp.task('eslint_others', () => gulp.src([ // .pipe(gulpEslint.failAfterError()); gulp.task('concat_css', () => gulp.src([ - resolvePath(`${SOURCE_ROOT_PATH}/**/*.css`), + resolvePath(`${SOURCE_ROOT_PATH}/styl/index.styl`), ]) + .pipe(gulpStylus()) .pipe(gulpConcat('image-process.css')) .pipe(gulp.dest(resolvePath(RELEASE_ROOT_PATH)))); - + gulp.task('concat_css_clip', () => gulp.src([ - resolvePath(`${SOURCE_ROOT_PATH}/clip/css/*.css`), + resolvePath(`${SOURCE_ROOT_PATH}/clip/styl/index.styl`), ]) + .pipe(gulpStylus()) .pipe(gulpConcat('image-clip.css')) .pipe(gulp.dest(resolvePath(RELEASE_ROOT_PATH)))); diff --git a/dist/image-clip.css b/dist/image-clip.css index 2f08fd7..556f604 100644 --- a/dist/image-clip.css +++ b/dist/image-clip.css @@ -1,112 +1,94 @@ -/** - * img-clip - */ .img-clip { - position: relative; - width: 95%; - margin: 0 auto; - padding: 0; + position: relative; + width: 95%; + margin: 0 auto; + padding: 0; } - .img-clip canvas { - display: block; + display: block; } - .img-clip .magnifier { - position: absolute; - top: -90px; - right: 0; - /** - * 显示的值，真实的宽高内部会设置 - */ - width: 80px; - height: 80px; - border-radius: 50%; - border: 2px solid #fff; + position: absolute; + top: -90px; + right: 0; +/** + * 显示的值，真实的宽高内部会设置 + */ + width: 80px; + height: 80px; + border-radius: 50%; + border: 2px solid #fff; } - .img-clip .clip-hidden { - display: none; + display: none; } - .img-clip .clip-rect { - position: absolute; - border: 1px dashed #de3c50; - top: 10px; - left: 10px; - width: 100px; - height: 100px; + position: absolute; + border: 1px dashed #de3c50; + top: 10px; + left: 10px; + width: 100px; + height: 100px; } - .img-clip .clip-rect .clip-tips { - position: absolute; - top: -40px; - left: 0; - padding: 5px; - font-size: 13px; - background-color: #333333; - border-radius: 5px; - color: #fff; + position: absolute; + top: -40px; + left: 0; + padding: 5px; + font-size: 13px; + background-color: #333; + border-radius: 5px; + color: #fff; } - .img-clip .clip-rect-horn { - position: absolute; - display: block; - background-color: rgba(222, 60, 80, .7); - border-radius: 50%; - width: 20px; - height: 20px; + position: absolute; + display: block; + background-color: rgba(222,60,80,0.7); + border-radius: 50%; + width: 20px; + height: 20px; } - .img-clip .horn-n { - top: -10px; - left: 50%; - margin-left: -10px; - cursor: n-resize; + top: -10px; + left: 50%; + margin-left: -10px; + cursor: n-resize; } - .img-clip .horn-s { - bottom: -10px; - left: 50%; - margin-left: -10px; - cursor: s-resize; + bottom: -10px; + left: 50%; + margin-left: -10px; + cursor: s-resize; } - .img-clip .horn-w { - top: 50%; - left: -10px; - margin-top: -10px; - cursor: w-resize; + top: 50%; + left: -10px; + margin-top: -10px; + cursor: w-resize; } - .img-clip .horn-e { - top: 50%; - right: -10px; - margin-top: -10px; - cursor: e-resize; + top: 50%; + right: -10px; + margin-top: -10px; + cursor: e-resize; } - .img-clip .horn-nw { - top: -10px; - left: -10px; - cursor: nw-resize; + top: -10px; + left: -10px; + cursor: nw-resize; } - .img-clip .horn-ne { - top: -10px; - right: -10px; - cursor: ne-resize; + top: -10px; + right: -10px; + cursor: ne-resize; } - .img-clip .horn-sw { - bottom: -10px; - left: -10px; - cursor: sw-resize; + bottom: -10px; + left: -10px; + cursor: sw-resize; } - .img-clip .horn-se { - bottom: -10px; - right: -10px; - cursor: se-resize; + bottom: -10px; + right: -10px; + cursor: se-resize; } - diff --git a/dist/image-process.css b/dist/image-process.css index c634bff..f4d336f 100644 --- a/dist/image-process.css +++ b/dist/image-process.css @@ -1,115 +1,3 @@ .hidden { - display: none; + display: none; } -/** - * img-clip - */ -.img-clip { - position: relative; - width: 95%; - margin: 0 auto; - padding: 0; -} - -.img-clip canvas { - display: block; -} - -.img-clip .magnifier { - position: absolute; - top: -90px; - right: 0; - /** - * 显示的值，真实的宽高内部会设置 - */ - width: 80px; - height: 80px; - border-radius: 50%; - border: 2px solid #fff; -} - -.img-clip .clip-hidden { - display: none; -} - -.img-clip .clip-rect { - position: absolute; - border: 1px dashed #de3c50; - top: 10px; - left: 10px; - width: 100px; - height: 100px; -} - -.img-clip .clip-rect .clip-tips { - position: absolute; - top: -40px; - left: 0; - padding: 5px; - font-size: 13px; - background-color: #333333; - border-radius: 5px; - color: #fff; -} - -.img-clip .clip-rect-horn { - position: absolute; - display: block; - background-color: rgba(222, 60, 80, .7); - border-radius: 50%; - width: 20px; - height: 20px; -} - -.img-clip .horn-n { - top: -10px; - left: 50%; - margin-left: -10px; - cursor: n-resize; -} - -.img-clip .horn-s { - bottom: -10px; - left: 50%; - margin-left: -10px; - cursor: s-resize; -} - -.img-clip .horn-w { - top: 50%; - left: -10px; - margin-top: -10px; - cursor: w-resize; -} - -.img-clip .horn-e { - top: 50%; - right: -10px; - margin-top: -10px; - cursor: e-resize; -} - -.img-clip .horn-nw { - top: -10px; - left: -10px; - cursor: nw-resize; -} - -.img-clip .horn-ne { - top: -10px; - right: -10px; - cursor: ne-resize; -} - -.img-clip .horn-sw { - bottom: -10px; - left: -10px; - cursor: sw-resize; -} - -.img-clip .horn-se { - bottom: -10px; - right: -10px; - cursor: se-resize; -} - diff --git a/dist/image-process.min.css b/dist/image-process.min.css index c34d87f..d596293 100644 --- a/dist/image-process.min.css +++ b/dist/image-process.min.css @@ -1 +1 @@ -.hidden{display:none}.img-clip{position:relative;width:95%;margin:0 auto;padding:0}.img-clip canvas{display:block}.img-clip .magnifier{position:absolute;top:-90px;right:0;width:80px;height:80px;border-radius:50%;border:2px solid #fff}.img-clip .clip-hidden{display:none}.img-clip .clip-rect{position:absolute;border:1px dashed #de3c50;top:10px;left:10px;width:100px;height:100px}.img-clip .clip-rect .clip-tips{position:absolute;top:-40px;left:0;padding:5px;font-size:13px;background-color:#333;border-radius:5px;color:#fff}.img-clip .clip-rect-horn{position:absolute;display:block;background-color:rgba(222,60,80,.7);border-radius:50%;width:20px;height:20px}.img-clip .horn-n{top:-10px;left:50%;margin-left:-10px;cursor:n-resize}.img-clip .horn-s{bottom:-10px;left:50%;margin-left:-10px;cursor:s-resize}.img-clip .horn-w{top:50%;left:-10px;margin-top:-10px;cursor:w-resize}.img-clip .horn-e{top:50%;right:-10px;margin-top:-10px;cursor:e-resize}.img-clip .horn-nw{top:-10px;left:-10px;cursor:nw-resize}.img-clip .horn-ne{top:-10px;right:-10px;cursor:ne-resize}.img-clip .horn-sw{bottom:-10px;left:-10px;cursor:sw-resize}.img-clip .horn-se{bottom:-10px;right:-10px;cursor:se-resize} \ No newline at end of file +.hidden{display:none} \ No newline at end of file diff --git a/package.json b/package.json index f26d861..fb74520 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "gulp-header": "^1.8.9", "gulp-rename": "^1.2.2", "gulp-sequence": "^0.4.6", + "gulp-stylus": "^2.6.0", "gulp-uglify": "^3.0.0", "karma": "^1.7.1", "karma-chai": "^0.1.0", diff --git a/src/clip/css/imgclip.css b/src/clip/css/imgclip.css deleted file mode 100644 index 2f08fd7..0000000 --- a/src/clip/css/imgclip.css +++ /dev/null @@ -1,112 +0,0 @@ -/** - * img-clip - */ -.img-clip { - position: relative; - width: 95%; - margin: 0 auto; - padding: 0; -} - -.img-clip canvas { - display: block; -} - -.img-clip .magnifier { - position: absolute; - top: -90px; - right: 0; - /** - * 显示的值，真实的宽高内部会设置 - */ - width: 80px; - height: 80px; - border-radius: 50%; - border: 2px solid #fff; -} - -.img-clip .clip-hidden { - display: none; -} - -.img-clip .clip-rect { - position: absolute; - border: 1px dashed #de3c50; - top: 10px; - left: 10px; - width: 100px; - height: 100px; -} - -.img-clip .clip-rect .clip-tips { - position: absolute; - top: -40px; - left: 0; - padding: 5px; - font-size: 13px; - background-color: #333333; - border-radius: 5px; - color: #fff; -} - -.img-clip .clip-rect-horn { - position: absolute; - display: block; - background-color: rgba(222, 60, 80, .7); - border-radius: 50%; - width: 20px; - height: 20px; -} - -.img-clip .horn-n { - top: -10px; - left: 50%; - margin-left: -10px; - cursor: n-resize; -} - -.img-clip .horn-s { - bottom: -10px; - left: 50%; - margin-left: -10px; - cursor: s-resize; -} - -.img-clip .horn-w { - top: 50%; - left: -10px; - margin-top: -10px; - cursor: w-resize; -} - -.img-clip .horn-e { - top: 50%; - right: -10px; - margin-top: -10px; - cursor: e-resize; -} - -.img-clip .horn-nw { - top: -10px; - left: -10px; - cursor: nw-resize; -} - -.img-clip .horn-ne { - top: -10px; - right: -10px; - cursor: ne-resize; -} - -.img-clip .horn-sw { - bottom: -10px; - left: -10px; - cursor: sw-resize; -} - -.img-clip .horn-se { - bottom: -10px; - right: -10px; - cursor: se-resize; -} - diff --git a/src/clip/styl/imageclip.styl b/src/clip/styl/imageclip.styl new file mode 100644 index 0000000..553a1b1 --- /dev/null +++ b/src/clip/styl/imageclip.styl @@ -0,0 +1,94 @@ +.img-clip + position: relative; + width: 95%; + margin: 0 auto; + padding: 0; + + canvas + display: block; + + .magnifier + position: absolute; + top: -90px; + right: 0; + /** + * 显示的值，真实的宽高内部会设置 + */ + width: 80px; + height: 80px; + border-radius: 50%; + border: 2px solid #fff; + + .clip-hidden + display: none; + + .clip-rect + position: absolute; + border: 1px dashed #de3c50; + top: 10px; + left: 10px; + width: 100px; + height: 100px; + + .clip-tips + position: absolute; + top: -40px; + left: 0; + padding: 5px; + font-size: 13px; + background-color: #333333; + border-radius: 5px; + color: #fff; + + .clip-rect-horn + position: absolute; + display: block; + background-color: rgba(222, 60, 80, .7); + border-radius: 50%; + width: 20px; + height: 20px; + + .horn-n + top: -10px; + left: 50%; + margin-left: -10px; + cursor: n-resize; + + .horn-s + bottom: -10px; + left: 50%; + margin-left: -10px; + cursor: s-resize; + + .horn-w + top: 50%; + left: -10px; + margin-top: -10px; + cursor: w-resize; + + .horn-e + top: 50%; + right: -10px; + margin-top: -10px; + cursor: e-resize; + + .horn-nw + top: -10px; + left: -10px; + cursor: nw-resize; + + .horn-ne + top: -10px; + right: -10px; + cursor: ne-resize; + + .horn-sw + bottom: -10px; + left: -10px; + cursor: sw-resize; + + .horn-se + bottom: -10px; + right: -10px; + cursor: se-resize; + \ No newline at end of file diff --git a/src/clip/styl/index.styl b/src/clip/styl/index.styl new file mode 100644 index 0000000..bd91599 --- /dev/null +++ b/src/clip/styl/index.styl @@ -0,0 +1 @@ +@import "./imageclip.styl" \ No newline at end of file diff --git a/src/css/common.css b/src/css/common.css deleted file mode 100644 index 226db6c..0000000 --- a/src/css/common.css +++ /dev/null @@ -1,3 +0,0 @@ -.hidden { - display: none; -} \ No newline at end of file diff --git a/src/styl/common.styl b/src/styl/common.styl new file mode 100644 index 0000000..0080eac --- /dev/null +++ b/src/styl/common.styl @@ -0,0 +1,2 @@ +.hidden + display: none; \ No newline at end of file diff --git a/src/styl/index.styl b/src/styl/index.styl new file mode 100644 index 0000000..bab4b69 --- /dev/null +++ b/src/styl/index.styl @@ -0,0 +1 @@ +@import "./common.styl" \ No newline at end of file