issue: intail & done

.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,5 @@
+build
+node_modules
+src
+docs
+test

.npmrc

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

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,8 @@
+# webkit-sassui-icon-circle-close
+> Webkit sass for circle close
+
+## usage:
++ https://afeiship.github.io/webkit-sassui-icon-circle-close/
+
+## resources:
++ https://github.com/afeiship/generator-webkit-sassui

bower.json

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

build/build.js

@@ -0,0 +1,18 @@
+(function() {
+
+  'use strict';
+
+  var gulp = require('gulp');
+  var config = require('./config');
+  var argv = require('yargs').argv;
+  var $ = require('gulp-load-plugins')({
+    pattern: ['gulp-*', 'gulp.*', 'del']
+  });
+
+  gulp.task('build', ['clean'], function() {
+    gulp.start(['styles']);
+  });
+
+
+
+}());

build/clean.js

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

build/config.js

@@ -0,0 +1,30 @@
+(function() {
+
+  'use strict';
+
+  var rootPath = process.cwd();
+  var gulp = require('gulp');
+  var argv = require('yargs').argv;
+  var $ = require('gulp-load-plugins')({
+    pattern: ['gulp-*', 'gulp.*', 'del']
+  });
+
+
+  module.exports = {
+    path: {
+      root: rootPath,
+      src: rootPath + '/src',
+      dist: rootPath + '/dist',
+      gulp: rootPath + '/gulp',
+    },
+    sassOptions: {
+      normal: {
+        outputStyle: 'expanded' /* nested | expanded | compact | compressed */
+      },
+      minify: {
+        outputStyle: 'compressed'
+      }
+    }
+  };
+
+}());

build/styles.js

@@ -0,0 +1,20 @@
+(function() {
+
+  'use strict';
+
+  var gulp = require('gulp');
+  var config = require('./config');
+  var argv = require('yargs').argv;
+  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(gulp.dest('dist'));
+  });
+
+}());

build/test.js

@@ -0,0 +1,20 @@
+(function() {
+
+  'use strict';
+
+  var gulp = require('gulp');
+  var config = require('./config');
+  var argv = require('yargs').argv;
+  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/webkit-sassui-icon-circle-close.css

@@ -0,0 +1,21 @@
+/*webkit-sassui-icon-circle-close Start*/
+.webkit-sassui-icon-circle-close {
+  background: none;
+  outline: none;
+  border: 0.55px solid #fff;
+  width: 6.4em;
+  height: 6.4em;
+  font-size: 10px;
+  border-radius: 1000px;
+  position: relative; }
+  .webkit-sassui-icon-circle-close:active {
+    opacity: 0.8; }
+  .webkit-sassui-icon-circle-close > .webkit-sassui-icon-close {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    width: 4.4em;
+    height: 4.4em;
+    top: 50%;
+    left: 50%; }
+
+/*webkit-sassui-icon-circle-close End*/

dist/webkit-sassui-icon-circle-close.scss

@@ -0,0 +1,35 @@
+/*webkit-sassui-icon-circle-close Start*/
+$webkit-sassui-icon-circle-close-options: (
+  font-size: 10px,
+  size: (
+    6.4em,
+    4.4em
+  )
+) !default;
+
+.webkit-sassui-icon-circle-close {
+  $font-size: map-get($map: $webkit-sassui-icon-circle-close-options, $key: font-size );
+  $size: map-get($map: $webkit-sassui-icon-circle-close-options, $key: size );
+  background: none;
+  outline:none;
+  border: 0.55px solid #fff;
+  width: nth($size,1);
+  height: nth($size,1);
+  font-size: $font-size;
+  border-radius: 1000px;
+  position: relative;
+
+  &:active{
+    opacity: 0.8;
+  }
+
+  > .webkit-sassui-icon-close {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    width: nth($size,2);
+    height: nth($size,2);
+    top: 50%;
+    left: 50%;
+  }
+}
+/*webkit-sassui-icon-circle-close End*/

docs/index.html

@@ -0,0 +1,18 @@
+<!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-icon-circle-close</title>
+  <link rel="stylesheet" href="./test.css">
+</head>
+
+<body class="text-align:center;">
+  <button class="webkit-sassui-icon-circle-close">
+    <i class="webkit-sassui-icon-close" data-type=hairline style="color:#fff"></i>
+  </button>
+</body>
+
+</html>

docs/test.css

@@ -0,0 +1,78 @@
+/*webkit-sassui-icon-circle-close Start*/
+.webkit-sassui-icon-circle-close {
+  background: none;
+  outline: none;
+  border: 0.55px solid #fff;
+  width: 6.4em;
+  height: 6.4em;
+  font-size: 10px;
+  border-radius: 1000px;
+  position: relative;
+}
+
+.webkit-sassui-icon-circle-close:active {
+  opacity: 0.8;
+}
+
+.webkit-sassui-icon-circle-close > .webkit-sassui-icon-close {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  width: 4.4em;
+  height: 4.4em;
+  top: 50%;
+  left: 50%;
+}
+
+/*webkit-sassui-icon-circle-close End*/
+/*webkit-sassui-icon-close Start*/
+.webkit-sassui-icon-close {
+  position: relative;
+  display: inline-block;
+  font-size: 10px;
+  color: #000;
+  width: 5em;
+  height: 5em;
+  overflow: hidden;
+}
+
+.webkit-sassui-icon-close:before, .webkit-sassui-icon-close:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  top: 50%;
+  left: 0;
+  border-top: 0.1em solid;
+}
+
+.webkit-sassui-icon-close:before {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.webkit-sassui-icon-close:after {
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.webkit-sassui-icon-close[data-type="hairline"]:before, .webkit-sassui-icon-close[data-type="hairline"]:after {
+  border-width: 0.1em;
+}
+
+.webkit-sassui-icon-close[data-type="thin"]:before, .webkit-sassui-icon-close[data-type="thin"]:after {
+  border-width: 0.2em;
+}
+
+.webkit-sassui-icon-close[data-type="heavy"]:before, .webkit-sassui-icon-close[data-type="heavy"]:after {
+  border-width: 0.4em;
+}
+
+/*webkit-sassui-icon-close End*/
+html,
+body {
+  height: 100%;
+  background: #000;
+}
+
+.test-webkit-sassui-icon-circle-close {
+  border: 1px solid red;
+}

docs/test.scss

@@ -0,0 +1,10 @@
+@import "../dist/webkit-sassui-icon-circle-close.scss";
+@import "node_modules/webkit-sassui-icon-close/dist/webkit-sassui-icon-close.scss";
+html,
+body{
+  height: 100%;
+  background: #000;
+}
+.test-webkit-sassui-icon-circle-close{
+  border:1px solid red;
+}

gulpfile.js

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