add: docs

afeiship · Feb 25, 2020 · f1335fe · f1335fe
1 parent 987edf1
commit f1335fe
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 9 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -3,7 +3,7 @@
  * description: Fixed header bar for sassui.
  * url: https://github.com/afeiship/webkit-sassui-layout-fixed-header
  * version: 1.0.0
- * date: 2020-02-25 12:27:03
+ * date: 2020-02-25 12:34:49
  * license: MIT
  */
 /*webkit-sassui-layout-fixed-header Start*/

diff --git a/dist/index.scss b/dist/index.scss
@@ -3,7 +3,7 @@
  * description: Fixed header bar for sassui.
  * url: https://github.com/afeiship/webkit-sassui-layout-fixed-header
  * version: 1.0.0
- * date: 2020-02-25 12:27:03
+ * date: 2020-02-25 12:34:49
  * license: MIT
  */
 

diff --git a/docs/index.html b/docs/index.html
@@ -1,15 +1,44 @@
 <!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-layout-fixed-header</title>
+  <title>webkit-sassui-layout-fixed-footer</title>
   <link rel="stylesheet" href="./style.css">
 </head>
 
 <body>
 
+
+  <div class="wrapper test-webkit-sassui-layout-fixed-footer" data-hasbar=true>
+    <div class="is-header">
+      <span>My header</span>
+      <button id='btn'>Close ME</button>
+    </div>
+
+    <div style="height:200px; background:salmon;"></div>
+    <div style="height:200px; background:royalblue;"></div>
+    <div style="height:200px; background:saddlebrown;"></div>
+    <div style="height:200px; background:salmon;"></div>
+    <div style="height:200px; background:seagreen;"></div>
+    <div style="height:200px; background:sienna;"></div>
+    <div style="height:200px; background:salmon;"></div>
+    <div style="height:200px; background:skyblue;"></div>
+    <div style="height:200px; background:salmon;"></div>
+
+
+  </div>
+
+  <script>
+    var btn = document.querySelector('#btn');
+    var wrapper = document.querySelector('.wrapper');
+    btn.onclick = function () {
+      wrapper.setAttribute('data-hasbar', false);
+    }
+  </script>
+
 </body>
 
 </html>
diff --git a/docs/style.css b/docs/style.css
@@ -3,11 +3,50 @@
  * description: Fixed header bar for sassui.
  * url: https://github.com/afeiship/webkit-sassui-layout-fixed-header
  * version: 1.0.0
- * date: 2020-02-25 12:27:03
+ * date: 2020-02-25 12:34:49
  * license: MIT
  */
 /*webkit-sassui-layout-fixed-header Start*/
 /*webkit-sassui-layout-fixed-header End*/
-.test-webkit-sassui-layout-fixed-header {
-  border: 1px solid red;
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+}
+
+.test-webkit-sassui-layout-fixed-footer > .is-header {
+  background: #eee;
+  line-height: 50px;
+  text-align: center;
+}
+
+.test-webkit-sassui-layout-fixed-footer > .is-header button {
+  background: #4cd964;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  margin-left: 20px;
+  padding: 10px 20px;
+}
+
+.test-webkit-sassui-layout-fixed-footer[data-hasbar="true"] {
+  padding-top: 60px;
+}
+
+.test-webkit-sassui-layout-fixed-footer[data-hasbar="false"] {
+  padding-top: 0;
+}
+
+.test-webkit-sassui-layout-fixed-footer[data-hasbar="false"] > .is-header {
+  display: none;
+}
+
+.test-webkit-sassui-layout-fixed-footer > .is-header {
+  position: fixed;
+  height: 50px;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
 }
diff --git a/docs/style.scss b/docs/style.scss
@@ -1,5 +1,27 @@
 @import "../dist/index.scss";
 
-.test-webkit-sassui-layout-fixed-header{
-  border:1px solid red;
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+}
+
+.test-webkit-sassui-layout-fixed-footer {
+  > .is-header {
+    background: #eee;
+    line-height: 50px;
+    text-align: center;
+
+    button {
+      background: #4cd964;
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      margin-left: 20px;
+      padding: 10px 20px;
+    }
+  }
+
+  @include webkit-sassui-layout-fixed-header();
 }
diff --git a/server.js b/server.js
@@ -1,6 +1,6 @@
 const express = require('express');
 const app = express();
-const portNumber = 3000;
+const portNumber = 3002;
 const sourceDir = 'docs';
 
 app.use(express.static(sourceDir));