issue: update

afeiship · May 20, 2018 · ada562d · ada562d
1 parent df7c360
commit ada562d
Show file tree

Hide file tree

Showing 10 changed files with 725 additions and 78 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,8 @@
 node_modules
 bower_components
 coverage
+npm-debug.log
+yarn.lock
+package-lock.json
+.DS_Store
 .idea
diff --git a/bower.json b/bower.json
@@ -1,20 +1,22 @@
 {
-  "name": "webkit-sassui-overlay",
-  "description": "Webkit sass ui module for overlay/mask.",
+  "name": "webkit-sassui-backdrop",
+  "description": "Webkit sass ui module for overlay/mask/backdrop.",
   "main": [
-    "dist/webkit-sassui-overlay.css",
-    "dist/webkit-sassui-overlay.scss"
+    "dist/webkit-sassui-backdrop.css",
+    "dist/webkit-sassui-backdrop.scss"
   ],
   "authors": [
     "afei"
   ],
   "license": "MIT",
   "keywords": [
     "webkit",
-    "cssui",
-    "overlay"
+    "sassui",
+    "css",
+    "component",
+    "backdrop"
   ],
-  "homepage": "https://github.com/afeiship/webkit-sassui-overlay",
+  "homepage": "https://github.com/afeiship/webkit-sassui-backdrop",
   "moduleType": [
     "amd"
   ],

diff --git a/dist/webkit-sassui-backdrop.scss b/dist/webkit-sassui-backdrop.scss
@@ -0,0 +1,44 @@
+/*webkit-sassui-backdrop Start*/
+$webkit-sassui-backdrop-options:(
+  duration: 0.6s,
+  opacity: 0.3,
+  position-list: (fixed, absolute),
+  color-map:(
+    black: #000,
+    white: #fff
+  )
+);
+
+@import 'node_modules/webkit-sassui-short-name/dist/webkit-sassui-short-name.scss';
+
+.webkit-sassui-backdrop{
+  $duration: map-get($map: $webkit-sassui-backdrop-options, $key: duration);
+  $opacity: map-get($map: $webkit-sassui-backdrop-options, $key: opacity);
+  $position-list: map-get($map: $webkit-sassui-backdrop-options, $key: position-list);
+  $color-map: map-get($map: $webkit-sassui-backdrop-options, $key: color-map);
+
+  @each $value in $position-list{
+    &[data-position=#{$value}]{
+      position: $value;
+    }
+  }
+
+  @each $key,$value in $color-map{
+    &[data-color=#{$key}]{
+      background:$value;
+    }
+  }
+
+  &,
+  &[data-visible=true]{
+    opacity: $opacity;
+  }
+
+  &[data-visible=false]{
+    opacity: 0;
+  }
+
+  transition: opacity $duration;
+  @extend .trbl0;
+}
+/*webkit-sassui-backdrop End*/
diff --git a/dist/webkit-sassui-overlay.scss b/dist/webkit-sassui-overlay.scss
diff --git a/docs/index.html b/docs/index.html
@@ -1,13 +1,31 @@
 <!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-overlay</title>
+  <title>webkit-sassui-backdrop</title>
   <link rel="stylesheet" href="./test.css">
 </head>
+
 <body>
-  <div class="webkit-sassui-overlay" data-color=black data-position=fixed></div>
+  <div class="webkit-sassui-backdrop" style="top: 200px;" data-visible=false data-color=black data-position=fixed id="backdrop"></div>
+
+  <button id="show">SHOW</button>
+  <button id="hide">HIDE</button>
+  <script>
+    var el = document.getElementById('backdrop');
+    var btnShow = document.getElementById('show');
+    var btnHide = document.getElementById('hide');
+    btnShow.onclick = function () {
+      el.setAttribute('data-visible', true);
+    };
+
+    btnHide.onclick = function () {
+      el.setAttribute('data-visible', false);
+    };
+  </script>
 </body>
+
 </html>