chore: use jswork scope

.npmignore

@@ -6,10 +6,9 @@ test
 __tests__
 .prettierrc
 .editorconfig
-bower.json
-Gemfile
 gulpfile.js
 LICENSE.txt
 Rakefile
 server.js
 .prettierrc
+.release-it.json

.release-it.json

@@ -0,0 +1,16 @@
+{
+  "git": {
+    "requireCleanWorkingDir": false
+  },
+  "hooks": {
+    "after:init": [
+      "t2k"
+    ],
+    "after:bump": [
+      "npm run build"
+    ]
+  },
+  "github": {
+    "release": true
+  }
+}

LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 afei <[email protected]>
+Copyright (c) 2020 afei <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,17 +1,36 @@
-# webkit-sassui-rotatable
+# wsui-rotatable
 > Rotatable element.
 
+[![version][version-image]][version-url]
+[![license][license-image]][license-url]
+[![size][size-image]][size-url]
+[![download][download-image]][download-url]
+
 ## installation
 ```shell
-npm i -S @feizheng/webkit-sassui-rotatable
+npm i @jswork/wsui-rotatable
 ```
 
 ## usage
-+ https://afeiship.github.io/webkit-sassui-rotatable/
-
 ```scss
-@import 'node_modules/webkit-sassui-rotatable/dist/index.scss';
+// use sass
+@import '~@jswork/wsui-rotatable/dist/index.scss';
+// use css
+@import '~@jswork/wsui-rotatable/dist/style.css';
 ```
 
-## resources
-+ https://github.com/afeiship/generator-webkit-sassui
+## license
+Code released under [the MIT license](https://github.com/afeiship/wsui-rotatable/blob/master/LICENSE.txt).
+
+[version-image]: https://img.shields.io/npm/v/@jswork/wsui-rotatable
+[version-url]: https://npmjs.org/package/@jswork/wsui-rotatable
+
+[license-image]: https://img.shields.io/npm/l/@jswork/wsui-rotatable
+[license-url]: https://github.com/afeiship/wsui-rotatable/blob/master/LICENSE.txt
+
+[size-image]: https://img.shields.io/bundlephobia/minzip/@jswork/wsui-rotatable
+[size-url]: https://github.com/afeiship/wsui-rotatable/blob/master/dist/wsui-rotatable.min.js
+
+[download-image]: https://img.shields.io/npm/dm/@jswork/wsui-rotatable
+[download-url]: https://www.npmjs.com/package/@jswork/wsui-rotatable
+

build/test.js → build/docs.js

@@ -1,15 +1,14 @@
-(function() {
+(function () {
   'use strict';
 
   var gulp = require('gulp');
   var $ = require('gulp-load-plugins')({
     pattern: ['gulp-*', 'gulp.*', 'del'],
   });
-
   //styles
-  gulp.task('test', function() {
+  gulp.task('docs', function () {
     return gulp
-      .src('docs/test.scss')
+      .src('docs/style.scss')
       .pipe($.sass({ outputStyle: 'expanded' }).on('error', $.sass.logError))
       .pipe(gulp.dest('docs'));
   });

build/styles.js

@@ -1,19 +1,21 @@
-(function() {
+(function () {
   'use strict';
 
   var gulp = require('gulp');
   var autoprefixer = require('autoprefixer');
   var $ = require('gulp-load-plugins')({
-    pattern: ['gulp-*', 'gulp.*', 'del'],
+    pattern: ['gulp-*', 'gulp.*', 'del', '@jswork/gulp-*'],
   });
 
   //styles
-  gulp.task('styles', function() {
+  gulp.task('styles', function () {
     return gulp
       .src('src/*.scss')
+      .pipe($.jswork.pkgHeader())
       .pipe(gulp.dest('dist'))
       .pipe($.sass())
       .pipe($.postcss([autoprefixer()]))
+      .pipe($.rename('style.css'))
       .pipe(gulp.dest('dist'));
   });
 })();

dist/index.scss

@@ -1,34 +1,18 @@
-/*webkit-sassui-rotatable Start*/
-$webkit-sassui-rotatable-options: (
-  duration: 0.3s,
-  items: (
-    45,
-    90,
-    180,
-    270,
-    360
-  )
-) !default;
-
-.webkit-sassui-rotatable {
-  /* prettier-ignore */
-  $items: map-get($map: $webkit-sassui-rotatable-options, $key: items );
-  $duration: map-get( $map: $webkit-sassui-rotatable-options, $key: duration );
-  /* prettier-ignore-end */
+/*!
+ * name: @jswork/wsui-rotatable
+ * description: Rotatable element.
+ * homepage: https://github.com/afeiship/wsui-rotatable
+ * version: 1.0.0
+ * date: 2020-12-23 15:01:37
+ * license: MIT
+ */
 
-  .is-rotatable {
-    transform: rotate(0);
-    transition: all $duration;
-  }
+/*wsui-rotatable Start*/
+$wsui-rotatable-options: (
+  color: #f00
+) !default;
 
-  @each $item in $items {
-    &.is-#{$item} {
-      &:hover {
-        .is-rotatable {
-          transform: rotate(#{$item}deg);
-        }
-      }
-    }
-  }
+.wsui-rotatable {
+  //Your code goes here.
 }
-/*webkit-sassui-rotatable End*/
+/*wsui-rotatable End*/

dist/style.css

@@ -0,0 +1,10 @@
+/*!
+ * name: @jswork/wsui-rotatable
+ * description: Rotatable element.
+ * homepage: https://github.com/afeiship/wsui-rotatable
+ * version: 1.0.0
+ * date: 2020-12-23 15:01:37
+ * license: MIT
+ */
+/*wsui-rotatable Start*/
+/*wsui-rotatable End*/

docs/index.html

@@ -1,33 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>webkit-sassui-rotatable</title>
-  <link rel="stylesheet" href="./test.css">
+  <title>wsui-rotatable</title>
+  <link rel="stylesheet" href="./style.css">
 </head>
 
 <body>
-  <div class="container">
-    <div class="webkit-sassui-rotatable is-45">
-      <h4>is-45</h4>
-      <img class="is-rotatable" src="http://avatar.chsword.net/avatar/1" alt="">
-    </div>
-    <div class="webkit-sassui-rotatable is-90">
-      <h4>is-90</h4>
-      <img class="is-rotatable" src="http://avatar.chsword.net/avatar/2" alt="">
-    </div>
-    <div class="webkit-sassui-rotatable is-270">
-      <h4>is-270</h4>
-      <img class="is-rotatable" src="http://avatar.chsword.net/avatar/3" alt="">
-    </div>
-    <div class="webkit-sassui-rotatable is-360">
-      <h4>is-360</h4>
-      <img class="is-rotatable" src="http://avatar.chsword.net/avatar/4" alt="">
-    </div>
+<div class="container">
+  <div class="wsui-rotatable is-45">
+    <h4>is-45</h4>
+    <img class="is-rotatable" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
+  </div>
+  <div class="wsui-rotatable is-90">
+    <h4>is-90</h4>
+    <img class="is-rotatable" src="https://randomuser.me/api/portraits/women/2.jpg" alt="">
+  </div>
+  <div class="wsui-rotatable is-270">
+    <h4>is-270</h4>
+    <img class="is-rotatable" src="https://randomuser.me/api/portraits/women/3.jpg" alt="">
+  </div>
+  <div class="wsui-rotatable is-360">
+    <h4>is-360</h4>
+    <img class="is-rotatable" src="https://randomuser.me/api/portraits/women/4.jpg" alt="">
   </div>
+</div>
 </body>
 
 </html>

docs/test.css → docs/style.css

@@ -1,39 +1,35 @@
-/*webkit-sassui-rotatable Start*/
-.webkit-sassui-rotatable {
+/*wsui-rotatable Start*/
+.wsui-rotatable {
   /* prettier-ignore */
   /* prettier-ignore-end */
 }
 
-.webkit-sassui-rotatable .is-rotatable {
+.wsui-rotatable .is-rotatable {
   transform: rotate(0);
   transition: all 0.3s;
 }
 
-.webkit-sassui-rotatable.is-45:hover .is-rotatable {
+.wsui-rotatable.is-45:hover .is-rotatable {
   transform: rotate(45deg);
 }
 
-.webkit-sassui-rotatable.is-90:hover .is-rotatable {
+.wsui-rotatable.is-90:hover .is-rotatable {
   transform: rotate(90deg);
 }
 
-.webkit-sassui-rotatable.is-180:hover .is-rotatable {
+.wsui-rotatable.is-180:hover .is-rotatable {
   transform: rotate(180deg);
 }
 
-.webkit-sassui-rotatable.is-270:hover .is-rotatable {
+.wsui-rotatable.is-270:hover .is-rotatable {
   transform: rotate(270deg);
 }
 
-.webkit-sassui-rotatable.is-360:hover .is-rotatable {
+.wsui-rotatable.is-360:hover .is-rotatable {
   transform: rotate(360deg);
 }
 
-/*webkit-sassui-rotatable End*/
-.test-webkit-sassui-rotatable {
-  border: 1px solid red;
-}
-
+/*wsui-rotatable End*/
 .container {
   width: 100px;
   margin: 30px auto;

docs/test.scss → docs/style.scss

@@ -1,8 +1,4 @@
-@import "../dist/index.scss";
-
-.test-webkit-sassui-rotatable {
-  border: 1px solid red;
-}
+@import "../src/index.scss";
 
 .container {
   width: 100px;

gulpfile.js

@@ -1,20 +1,14 @@
 (function() {
-
   'use strict';
 
-  var path = require('path');
   var gulp = require('gulp');
+  var path = require('path');
   var fs = require('fs');
-  var $ = require('gulp-load-plugins')({
-    pattern: ['gulp-*', 'gulp.*', 'del']
-  });
 
   //import
   fs.readdirSync('./build').map(function(file) {
     require('./build/' + file);
   });
 
-
-  gulp.task('default', gulp.series(['clean', 'styles']));
-
-}());
+  gulp.task('default', gulp.series(['clean', 'styles', 'docs']));
+})();