diff --git a/.gitignore b/.gitignore
index 0cf530c..d53c8c1 100644
--- 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
index f4837c4..343d6fb 100644
--- a/bower.json
+++ b/bower.json
@@ -1,9 +1,9 @@
{
- "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"
@@ -11,10 +11,12 @@
"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
new file mode 100644
index 0000000..fc8e3f8
--- /dev/null
+++ 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
deleted file mode 100644
index f6e12c0..0000000
--- a/dist/webkit-sassui-overlay.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/*webkit-sassui-overlay Start*/
-$webkit-sassui-overlay-position:(fixed, absolute);
-
-.webkit-sassui-overlay{
- //Your mixin code goes here.
-
- @each $value in $webkit-sassui-overlay-position{
- &[data-position=#{$value}]{
- position: $value;
- }
- }
-
- &[data-color=black]{
- background: rgba(#000,0.4);
- }
-
- &[data-color=white]{
- background: rgba(#FFF,0.4);
- }
-
- left:0;
- right:0;
- bottom:0;
- top:0;
-}
-/*webkit-sassui-overlay End*/
diff --git a/docs/index.html b/docs/index.html
index 8a6820c..c9b0d28 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,13 +1,31 @@
+
- webkit-sassui-overlay
+ webkit-sassui-backdrop
+
-
+
+
+
+
+
+
diff --git a/docs/test.css b/docs/test.css
index 9acd159..bc8978a 100644
--- a/docs/test.css
+++ b/docs/test.css
@@ -1,25 +1,596 @@
-/*webkit-sassui-overlay Start*/
-.webkit-sassui-overlay {
+/*webkit-sassui-backdrop Start*/
+/*align Start*/
+.vat,
+.vat_ > * {
+ vertical-align: top;
+}
+
+.vab,
+.vab_ > * {
+ vertical-align: bottom;
+}
+
+.vam,
+.vam_ > * {
+ vertical-align: middle;
+}
+
+/*align End*/
+/*background Start*/
+.bgn {
+ background: none !important;
+}
+
+/*background End*/
+/*border Start*/
+.bdn {
+ border: none !important;
+}
+
+/*border End*/
+/**box-sizing Start**/
+.bs-b {
+ box-sizing: border-box;
+}
+
+.bs-c {
+ box-sizing: content-box;
+}
+
+.bgdn {
+ border: none !important;
+ background: none !important;
+}
+
+/**box-sizing End**/
+/**clearfix Start**/
+/**
+ * http://nicolasgallagher.com/micro-clearfix-hack/
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * contenteditable attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that are clearfixed.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ * 3. Reference:http://nicolasgallagher.com/micro-clearfix-hack/
+ */
+.clearfix:before, .lfix_:before, .rfix_:before, .lrfix_:before,
+.clearfix:after,
+.lfix_:after,
+.rfix_:after,
+.lrfix_:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */
+}
+
+.clearfix:after, .lfix_:after, .rfix_:after, .lrfix_:after {
+ clear: both;
+}
+
+.clfix:after {
+ clear: both;
+ content: "\200B";
+ display: block;
+ height: 0;
+}
+
+/**clearfix End**/
+.cd {
+ cursor: default;
+}
+
+.cp {
+ cursor: pointer;
+}
+
+.pn {
+ pointer-events: none;
+}
+
+/**display Start**/
+.db,
+.db_ > * {
+ display: block;
+}
+
+.di,
+.di_ > * {
+ display: inline;
+}
+
+.dn {
+ display: none;
+}
+
+.dib,
+.dib_ > * {
+ display: inline-block;
+}
+
+.dtb {
+ display: table;
+}
+
+.dtbc,
+.dtbc_ > * {
+ display: table-cell;
+}
+
+/**display End**/
+/**float Start**/
+.l,
+.l_ > * {
+ float: left;
+}
+
+.r,
+.r_ > * {
+ float: right;
+}
+
+.lfix_ > * {
+ float: left;
+}
+
+.rfix_ > * {
+ float: right;
+}
+
+.lrfix_ > *:first-child {
+ float: left;
+}
+
+.lrfix_ > *:last-child {
+ float: right;
+}
+
+/**float End**/
+/*font-size Start*/
+.f0 {
+ font-size: 0;
+}
+
+/*font-size End*/
+.h100 {
+ height: 100%;
+}
+
+.min-h100 {
+ min-height: 100%;
+}
+
+.max-h100 {
+ max-height: 100%;
+}
+
+/**margin Start**/
+.auto {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.m0a {
+ margin: 0 auto;
+}
+
+.m0 {
+ margin: 0 !important;
+}
+
+.mt0 {
+ margin-top: 0 !important;
+}
+
+.mr0 {
+ margin-right: 0 !important;
+}
+
+.mb0 {
+ margin-bottom: 0 !important;
+}
+
+.ml0 {
+ margin-left: 0 !important;
+}
+
+/**margin End**/
+.ovh {
+ overflow: hidden;
+}
+
+.ovh-x {
+ overflow-x: hidden;
+}
+
+.ovh-y {
+ overflow-y: hidden;
+}
+
+.ovs {
+ overflow: scroll;
+}
+
+.ovs-x {
+ overflow-x: scroll;
+}
+
+.ovs-y {
+ overflow-y: scroll;
+}
+
+.ova {
+ overflow: auto;
+}
+
+/*padding Start*/
+.p0 {
+ padding: 0 !important;
+}
+
+.pt0 {
+ padding-top: 0 !important;
+}
+
+.pr0 {
+ padding-right: 0 !important;
+}
+
+.pb0 {
+ padding-bottom: 0 !important;
+}
+
+.pl0 {
+ padding-left: 0 !important;
+}
+
+/*padding End*/
+/**position Start**/
+.rel,
+.rel_ > * {
+ position: relative;
+}
+
+.fixed {
+ position: fixed;
+}
+
+.abs,
+.abs_ > * {
+ position: absolute;
+}
+
+.t0 {
+ top: 0 !important;
+}
+
+.r0 {
+ right: 0 !important;
+}
+
+.b0 {
+ bottom: 0 !important;
+}
+
+.l0 {
+ left: 0 !important;
+}
+
+.lr0, .p-top, .p-bottom {
left: 0;
right: 0;
+}
+
+.tb0 {
+ top: 0;
bottom: 0;
+}
+
+.tr0 {
+ right: 0;
top: 0;
}
-.webkit-sassui-overlay[data-position=fixed] {
+.rb0 {
+ right: 0;
+ bottom: 0;
+}
+
+.bl0 {
+ left: 0;
+ bottom: 0;
+}
+
+.lt0 {
+ left: 0;
+ top: 0;
+}
+
+.trbl0, .webkit-sassui-backdrop {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+.p-top {
+ top: 0;
+}
+
+.p-bottom {
+ bottom: 0;
+}
+
+.lt5 {
+ left: 50%;
+ top: 50%;
+}
+
+.t375 {
+ top: 37.5%;
+}
+
+.t125 {
+ top: 12.5%;
+}
+
+.t50 {
+ top: 50%;
+}
+
+.r50 {
+ right: 50%;
+}
+
+.b50 {
+ bottom: 50%;
+}
+
+.l50 {
+ left: 50%;
+}
+
+.t100 {
+ top: 100%;
+}
+
+.r100 {
+ right: 100%;
+}
+
+.b100 {
+ bottom: 100%;
+}
+
+.l100 {
+ left: 100%;
+}
+
+/**position End**/
+/**shadow-depth Start**/
+.shadow-1 {
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.shadow-2 {
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
+}
+
+.shadow-3 {
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
+}
+
+.shadow-4 {
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.19);
+}
+
+.shadow-5 {
+ box-shadow: 0 14px 45px rgba(0, 0, 0, 0.25);
+}
+
+.shadow-6 {
+ box-shadow: 0 19px 60px rgba(0, 0, 0, 0.3);
+}
+
+.shadow-in-1 {
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.shadow-in-2 {
+ box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.12);
+}
+
+.shadow-in-3 {
+ box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.16);
+}
+
+.shadow-in-4 {
+ box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.19);
+}
+
+.shadow-in-5 {
+ box-shadow: inset 0 14px 45px rgba(0, 0, 0, 0.25);
+}
+
+.shadow-in-6 {
+ box-shadow: inset 0 19px 60px rgba(0, 0, 0, 0.3);
+}
+
+/**shadow-depth End**/
+.circle {
+ border-radius: 50%;
+}
+
+.round {
+ border-radius: 1000px;
+}
+
+.radius-t0 {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+.radius-r0 {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.radius-b0 {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.radius-l0 {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+}
+
+/**status Start**/
+.disabled {
+ pointer-events: none;
+ opacity: 0.5;
+ user-select: none;
+}
+
+[hidden],
+.hidden {
+ display: none !important;
+}
+
+/**status End**/
+/**text-decoration Start**/
+.tdn {
+ text-decoration: none;
+}
+
+.tdu {
+ text-decoration: underline;
+}
+
+.tdlh {
+ text-decoration: line-through;
+}
+
+.tc {
+ text-align: center;
+}
+
+.tl {
+ text-align: left;
+}
+
+.tr {
+ text-align: right;
+}
+
+.tlr_ > *:first-child {
+ text-align: left;
+}
+
+.tlr_ > *:last-child {
+ text-align: right;
+}
+
+.ell {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ vertical-align: middle;
+ overflow: hidden;
+}
+
+.b {
+ font-weight: bold;
+}
+
+.n {
+ font-weight: normal;
+ font-style: normal;
+}
+
+/**text-decoration End**/
+/**transparent Start**/
+.tran-text {
+ color: transparent;
+}
+
+.tran-bg {
+ background: transparent;
+}
+
+.vis-v {
+ visibility: visible;
+}
+
+.vis-h {
+ visibility: hidden;
+}
+
+/**transparent End**/
+.w100 {
+ width: 100%;
+}
+
+.min-w100 {
+ min-width: 100%;
+}
+
+.max-w100 {
+ max-width: 100%;
+}
+
+/* z-index start */
+.z1 {
+ z-index: 1;
+}
+
+.z2 {
+ z-index: 2;
+}
+
+.z3 {
+ z-index: 3;
+}
+
+/* z-index end */
+.webkit-sassui-backdrop {
+ transition: opacity 0.6s;
+}
+
+.webkit-sassui-backdrop[data-position=fixed] {
position: fixed;
}
-.webkit-sassui-overlay[data-position=absolute] {
+.webkit-sassui-backdrop[data-position=absolute] {
position: absolute;
}
-.webkit-sassui-overlay[data-color=black] {
- background: rgba(0, 0, 0, 0.4);
+.webkit-sassui-backdrop[data-color=black] {
+ background: #000;
+}
+
+.webkit-sassui-backdrop[data-color=white] {
+ background: #fff;
}
-.webkit-sassui-overlay[data-color=white] {
- background: rgba(255, 255, 255, 0.4);
+.webkit-sassui-backdrop, .webkit-sassui-backdrop[data-visible=true] {
+ opacity: 0.3;
}
-/*webkit-sassui-overlay End*/
+.webkit-sassui-backdrop[data-visible=false] {
+ opacity: 0;
+}
+
+/*webkit-sassui-backdrop End*/
+button {
+ display: block;
+ width: 100%;
+ padding: 14px;
+ border-radius: 5px;
+ background: #007aff;
+ color: #fff;
+ border: none;
+ outline: none;
+ margin-bottom: 20px;
+}
diff --git a/docs/test.scss b/docs/test.scss
index 19f74f4..6dcf09b 100644
--- a/docs/test.scss
+++ b/docs/test.scss
@@ -1 +1,14 @@
-@import "../dist/webkit-sassui-overlay.scss";
+@import "../dist/webkit-sassui-backdrop.scss";
+
+
+button{
+ display: block;
+ width: 100%;
+ padding:14px;
+ border-radius: 5px;
+ background: #007aff;
+ color: #fff;
+ border: none;
+ outline: none;
+ margin-bottom: 20px;
+}
diff --git a/package.json b/package.json
index 2e5fba1..f5fe954 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,16 @@
{
- "name": "webkit-sassui-overlay",
- "version": "0.0.0",
- "description": "Webkit sass ui module for overlay/mask.",
- "homepage": "https://github.com/afeiship/webkit-sassui-overlay",
+ "name": "webkit-sassui-backdrop",
+ "version": "0.0.1",
+ "description": "Webkit sass ui module for overlay/mask/backdrop.",
+ "homepage": "https://github.com/afeiship/webkit-sassui-backdrop",
"author": {
"name": "afei",
"email": "1290657123@qq.com"
},
- "scripts":{
- "build":"gulp"
+ "scripts": {
+ "build": "gulp"
},
- "main":"dist/webkit-sassui-overlay.scss",
+ "main": "dist/webkit-sassui-backdrop.scss",
"license": "MIT",
"devDependencies": {
"del": "^2.2.1",
@@ -19,5 +19,8 @@
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.3.2",
"yargs": "^4.7.1"
+ },
+ "dependencies": {
+ "webkit-sassui-short-name": "github:afeiship/webkit-sassui-short-name"
}
}
diff --git a/src/webkit-sassui-backdrop.scss b/src/webkit-sassui-backdrop.scss
new file mode 100644
index 0000000..fc8e3f8
--- /dev/null
+++ b/src/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/src/webkit-sassui-overlay.scss b/src/webkit-sassui-overlay.scss
deleted file mode 100644
index f6e12c0..0000000
--- a/src/webkit-sassui-overlay.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/*webkit-sassui-overlay Start*/
-$webkit-sassui-overlay-position:(fixed, absolute);
-
-.webkit-sassui-overlay{
- //Your mixin code goes here.
-
- @each $value in $webkit-sassui-overlay-position{
- &[data-position=#{$value}]{
- position: $value;
- }
- }
-
- &[data-color=black]{
- background: rgba(#000,0.4);
- }
-
- &[data-color=white]{
- background: rgba(#FFF,0.4);
- }
-
- left:0;
- right:0;
- bottom:0;
- top:0;
-}
-/*webkit-sassui-overlay End*/