Skip to content

Commit

Permalink
样式更新为stylus
Browse files Browse the repository at this point in the history
  • Loading branch information
@dailc
dailc committed Nov 16, 2017
1 parent b02a6ac commit e9444e6
Show file tree
Hide file tree
Showing 11 changed files with 171 additions and 314 deletions.
9 changes: 6 additions & 3 deletions build/gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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))));

Expand Down
146 changes: 64 additions & 82 deletions dist/image-clip.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

114 changes: 1 addition & 113 deletions dist/image-process.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

2 changes: 1 addition & 1 deletion dist/image-process.min.css
View file
Original file line number Diff line number Diff line change
@@ -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}
.hidden{display:none}
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading

0 comments on commit e9444e6

Please sign in to comment.