add: initial

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,11 @@
+node_modules
+bower_components
+coverage
+npm-debug.log
+yarn.lock
+Gemfile.lock
+yarn-error.log
+package-lock.json
+.DS_Store
+.idea
+.vscode

.npmignore

@@ -0,0 +1,15 @@
+build
+node_modules
+src
+docs
+test
+__tests__
+.prettierrc
+.editorconfig
+bower.json
+Gemfile
+gulpfile.js
+LICENSE.txt
+Rakefile
+server.js
+.prettierrc

.npmrc

@@ -0,0 +1,2 @@
+sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
+package-lock=false

.prettierrc

@@ -0,0 +1,27 @@
+{
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.scss",
+      "options": {
+        "trailingComma": "none",
+        "tabWidth": 2,
+        "parser": "scss"
+      }
+    },
+    {
+      "files": "*.json",
+      "options": {
+        "trailingComma": "none",
+        "tabWidth": 2,
+        "parser": "json"
+      }
+    }
+  ]
+}

Gemfile

@@ -0,0 +1,5 @@
+source 'https://rubygems.org'
+
+gem 'fileutils'
+gem 'sshkit'
+gem 'semver'

LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,17 @@
+# webkit-sassui-rotatable
+> Rotatable element.
+
+## installation
+```shell
+npm i -S @feizheng/webkit-sassui-rotatable
+```
+
+## usage
++ https://afeiship.github.io/webkit-sassui-rotatable/
+
+```scss
+@import 'node_modules/webkit-sassui-rotatable/dist/index.scss';
+```
+
+## resources
++ https://github.com/afeiship/generator-webkit-sassui

Rakefile

@@ -0,0 +1,4 @@
+
+Dir["./node_modules/@feizheng/rake-*/index.rake"].each do |task|
+  load task
+end

bower.json

@@ -0,0 +1,29 @@
+{
+  "name": "webkit-sassui-rotatable",
+  "description": "Rotatable element.",
+  "main": [
+    "dist/webkit-sassui-rotatable.css",
+    "dist/webkit-sassui-rotatable.scss"
+  ],
+  "authors": [
+    "afei"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "webkit",
+    "cssui",
+    "sassui"
+  ],
+  "homepage": "https://github.com/afeiship/webkit-sassui-rotatable",
+  "moduleType": [
+    "amd"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "src"
+  ]
+}

build/clean.js

@@ -0,0 +1,12 @@
+(function() {
+  'use strict';
+  var gulp = require('gulp');
+  var $ = require('gulp-load-plugins')({
+    pattern: ['gulp-*', 'gulp.*', 'del'],
+  });
+
+  //clean
+  gulp.task('clean', function() {
+    return $.del('dist');
+  });
+})();

build/styles.js

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

build/test.js

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

dist/index.css

@@ -0,0 +1,26 @@
+/*webkit-sassui-rotatable Start*/
+.webkit-sassui-rotatable {
+  /* prettier-ignore */
+  /* prettier-ignore-end */ }
+  .webkit-sassui-rotatable .is-rotatable {
+    -webkit-transform: rotate(0);
+            transform: rotate(0);
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s; }
+  .webkit-sassui-rotatable.is-45:hover .is-rotatable {
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg); }
+  .webkit-sassui-rotatable.is-90:hover .is-rotatable {
+    -webkit-transform: rotate(90deg);
+            transform: rotate(90deg); }
+  .webkit-sassui-rotatable.is-180:hover .is-rotatable {
+    -webkit-transform: rotate(180deg);
+            transform: rotate(180deg); }
+  .webkit-sassui-rotatable.is-270:hover .is-rotatable {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg); }
+  .webkit-sassui-rotatable.is-360:hover .is-rotatable {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg); }
+
+/*webkit-sassui-rotatable End*/

dist/index.scss

@@ -0,0 +1,34 @@
+/*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 */
+
+  .is-rotatable {
+    transform: rotate(0);
+    transition: all $duration;
+  }
+
+  @each $item in $items {
+    &.is-#{$item} {
+      &:hover {
+        .is-rotatable {
+          transform: rotate(#{$item}deg);
+        }
+      }
+    }
+  }
+}
+/*webkit-sassui-rotatable End*/

docs/index.html

@@ -0,0 +1,33 @@
+<!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">
+</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>
+</body>
+
+</html>

docs/test.css

@@ -0,0 +1,52 @@
+/*webkit-sassui-rotatable Start*/
+.webkit-sassui-rotatable {
+  /* prettier-ignore */
+  /* prettier-ignore-end */
+}
+
+.webkit-sassui-rotatable .is-rotatable {
+  transform: rotate(0);
+  transition: all 0.3s;
+}
+
+.webkit-sassui-rotatable.is-45:hover .is-rotatable {
+  transform: rotate(45deg);
+}
+
+.webkit-sassui-rotatable.is-90:hover .is-rotatable {
+  transform: rotate(90deg);
+}
+
+.webkit-sassui-rotatable.is-180:hover .is-rotatable {
+  transform: rotate(180deg);
+}
+
+.webkit-sassui-rotatable.is-270:hover .is-rotatable {
+  transform: rotate(270deg);
+}
+
+.webkit-sassui-rotatable.is-360:hover .is-rotatable {
+  transform: rotate(360deg);
+}
+
+/*webkit-sassui-rotatable End*/
+.test-webkit-sassui-rotatable {
+  border: 1px solid red;
+}
+
+.container {
+  width: 100px;
+  margin: 30px auto;
+  padding: 20px;
+  border: 2px dashed #eee;
+}
+
+.container img {
+  height: 100%;
+  width: 100%;
+}
+
+.container .webkit-sassui-rotatable {
+  width: 100px;
+  margin-bottom: 20px;
+}

docs/test.scss

@@ -0,0 +1,22 @@
+@import "../dist/index.scss";
+
+.test-webkit-sassui-rotatable {
+  border: 1px solid red;
+}
+
+.container {
+  width: 100px;
+  margin: 30px auto;
+  padding:20px;
+  border:2px dashed #eee;
+
+  img {
+    height: 100%;
+    width: 100%;
+  }
+
+  .webkit-sassui-rotatable {
+    width: 100px;
+    margin-bottom: 20px;
+  }
+}

gulpfile.js

@@ -0,0 +1,20 @@
+(function() {
+
+  'use strict';
+
+  var path = require('path');
+  var gulp = require('gulp');
+  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']));
+
+}());