[feature] add controls for header border width

css/base.css

@@ -67,7 +67,14 @@
   --header-shade-color: transparent;
   --header-shade-opacity: none;
   --header-height: 0;
-  --header-shade-padding: 4;
+  --header-shade-padding-top: calc(var(--line-width) * var(--header-shade-padding-multiplier-top));
+  --header-shade-padding-bottom: calc(var(--line-width) * var(--header-shade-padding-multiplier-bottom));
+  --header-shade-padding-multiplier-top: 4;
+  --header-shade-padding-multiplier-bottom: 4;
+  --header-border-width-top: calc(var(--line-width) * var(--header-border-width-multiplier-top));
+  --header-border-width-bottom: calc(var(--line-width) * var(--header-border-width-multiplier-bottom));
+  --header-border-width-multiplier-top: 1;
+  --header-border-width-multiplier-bottom: 1;
   --background-image: none;
   --background-opacity: 1;
   --background-accent-opacity: 0;

css/header.css

@@ -1,5 +1,6 @@
 .header {
-  padding: calc(var(--gutter) * var(--header-shade-padding)) 0;
+  padding-top: var(--header-shade-padding-top);
+  padding-bottom: var(--header-shade-padding-bottom);
   width: 100%;
   position: relative;
   z-index: var(--z-index-header);
@@ -33,12 +34,12 @@
   opacity: var(--header-shade-opacity);
 }
 
-.is-header-shade-border-top .header .header-border {
+.is-header-shade-border-top-show .header .header-border {
-  border-top: var(--line-width) solid rgb(var(--accent));
+  border-top: var(--header-border-width-top) solid rgb(var(--accent));
 }
 
-.is-header-shade-border-bottom .header .header-border {
+.is-header-shade-border-bottom-show .header .header-border {
-  border-bottom: var(--line-width) solid rgb(var(--accent));
+  border-bottom: var(--header-border-width-bottom) solid rgb(var(--accent));
 }
 
 .header-edge {

index.html

@@ -298,16 +298,28 @@
               <input id="control-header-shade-opacity" class="control-header-shade-opacity" type="range" min="0" max="100" value="0" tabindex="1">
             </div>
             <div class="input-wrap form-indent-1">
-              <label for="control-header-shade-padding">Top & bottom padding</label>
+              <label for="control-header-shade-padding-top">Top padding</label>
-              <input id="control-header-shade-padding" class="control-header-shade-padding" type="range" min="1" max="25" value="0" tabindex="1">
+              <input id="control-header-shade-padding-top" class="control-header-shade-padding-top" type="range" min="1" max="50" value="0" tabindex="1">
+            </div>
+            <div class="input-wrap form-indent-1">
+              <label for="control-header-shade-padding-bottom">Bottom padding</label>
+              <input id="control-header-shade-padding-bottom" class="control-header-shade-padding-bottom" type="range" min="1" max="50" value="0" tabindex="1">
             </div>
             <div class="checkbox-wrap form-indent-1">
-              <input id="control-header-shade-border-top" class="control-header-shade-border-top" type="checkbox" value="always" tabindex="1">
+              <input id="control-header-shade-border-top-show" class="control-header-shade-border-top-show" type="checkbox" value="always" tabindex="1">
-              <label for="control-header-shade-border-top"><span class="label-icon"></span>Top border</label>
+              <label for="control-header-shade-border-top-show"><span class="label-icon"></span>Top border</label>
+            </div>
+            <div class="input-wrap form-indent-2">
+              <label for="control-header-shade-border-top-width">Border width</label>
+              <input id="control-header-shade-border-top-width" class="control-header-shade-border-top-width" type="range" min="1" max="10" value="0" tabindex="1">
             </div>
             <div class="checkbox-wrap form-indent-1">
-              <input id="control-header-shade-border-bottom" class="control-header-shade-border-bottom" type="checkbox" value="always" tabindex="1">
+              <input id="control-header-shade-border-bottom-show" class="control-header-shade-border-bottom-show" type="checkbox" value="always" tabindex="1">
-              <label for="control-header-shade-border-bottom"><span class="label-icon"></span>Bottom border</label>
+              <label for="control-header-shade-border-bottom-show"><span class="label-icon"></span>Bottom border</label>
+            </div>
+            <div class="input-wrap form-indent-2">
+              <label for="control-header-shade-border-bottom-width">Border width</label>
+              <input id="control-header-shade-border-bottom-width" class="control-header-shade-border-bottom-width" type="range" min="1" max="10" value="0" tabindex="1">
             </div>
           </div>
         </div>

js/control.js

@@ -319,8 +319,8 @@ var control = (function() {
       header.render();
     }
   }, {
-    element: helper.e(".control-header-shade-padding"),
+    element: helper.e(".control-header-shade-padding-top"),
-    path: "header.shade.padding",
+    path: "header.shade.padding.top",
     type: "range",
     additionalEvents: [{
       event: "mousedown",
@@ -338,19 +338,54 @@ var control = (function() {
       header.render();
     }
   }, {
-    element: helper.e(".control-header-shade-border-top"),
+    element: helper.e(".control-header-shade-padding-bottom"),
-    path: "header.shade.border.top",
+    path: "header.shade.padding.bottom",
-    type: "checkbox",
+    type: "range",
+    additionalEvents: [{
+      event: "mousedown",
+      action: function() {
+        header.edge("show");
+      }
+    }, {
+      event: "mouseup",
+      action: function() {
+        header.edge("hide");
+      }
+    }],
     func: function() {
       render();
       header.render();
     }
   }, {
-    element: helper.e(".control-header-shade-border-bottom"),
+    element: helper.e(".control-header-shade-border-top-show"),
-    path: "header.shade.border.bottom",
+    path: "header.shade.border.top.show",
     type: "checkbox",
     func: function() {
       render();
+      dependents();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-shade-border-top-width"),
+    path: "header.shade.border.top.width",
+    type: "range",
+    func: function() {
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-shade-border-bottom-show"),
+    path: "header.shade.border.bottom.show",
+    type: "checkbox",
+    func: function() {
+      render();
+      dependents();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-shade-border-bottom-width"),
+    path: "header.shade.border.bottom.width",
+    type: "range",
+    func: function() {
       header.render();
     }
   }, {
@@ -691,10 +726,10 @@ var control = (function() {
           path: object.path,
           newValue: newValue
         });
-        console.log(object.path, helper.getObject({
+        // console.log(object.path, helper.getObject({
-          object: state.get(),
+        //   object: state.get(),
-          path: object.path
+        //   path: object.path
-        }));
+        // }));
       };
     };
     var bindControl = function(object) {
@@ -862,22 +897,22 @@ var control = (function() {
       if (state.get().header.shade.show) {
         helper.addClass(html, "is-header-shade-show");
         helper.addClass(html, "is-header-shade-style-" + state.get().header.shade.style);
-        if (state.get().header.shade.border.top) {
+        if (state.get().header.shade.border.top.show) {
-          helper.addClass(html, "is-header-shade-border-top");
+          helper.addClass(html, "is-header-shade-border-top-show");
         } else {
-          helper.removeClass(html, "is-header-shade-border-top");
+          helper.removeClass(html, "is-header-shade-border-top-show");
         };
-        if (state.get().header.shade.border.bottom) {
+        if (state.get().header.shade.border.bottom.show) {
-          helper.addClass(html, "is-header-shade-border-bottom");
+          helper.addClass(html, "is-header-shade-border-bottom-show");
         } else {
-          helper.removeClass(html, "is-header-shade-border-bottom");
+          helper.removeClass(html, "is-header-shade-border-bottom-show");
         };
       } else {
         helper.removeClass(html, "is-header-shade-show");
         helper.removeClass(html, "is-header-shade-style-always");
         helper.removeClass(html, "is-header-shade-style-scroll");
-        helper.removeClass(html, "is-header-shade-border-top");
+        helper.removeClass(html, "is-header-shade-border-top-show");
-        helper.removeClass(html, "is-header-shade-border-bottom");
+        helper.removeClass(html, "is-header-shade-border-bottom-show");
       };
     };
     _menu();
@@ -1071,19 +1106,45 @@ var control = (function() {
         helper.e(".control-header-shade-style-scroll").disabled = false;
         helper.e("[for=control-header-shade-opacity]").removeAttribute("disabled");
         helper.e(".control-header-shade-opacity").disabled = false;
-        helper.e("[for=control-header-shade-padding]").removeAttribute("disabled");
+        helper.e("[for=control-header-shade-padding-top]").removeAttribute("disabled");
-        helper.e(".control-header-shade-padding").disabled = false;
+        helper.e(".control-header-shade-padding-top").disabled = false;
-        helper.e(".control-header-shade-border-top").disabled = false;
+        helper.e("[for=control-header-shade-padding-bottom]").removeAttribute("disabled");
-        helper.e(".control-header-shade-border-bottom").disabled = false;
+        helper.e(".control-header-shade-padding-bottom").disabled = false;
+        helper.e(".control-header-shade-border-top-show").disabled = false;
+        helper.e(".control-header-shade-border-bottom-show").disabled = false;
+        helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
+        helper.e(".control-header-shade-border-top-width").disabled = false;
+        helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
+        helper.e(".control-header-shade-border-bottom-width").disabled = false;
       } else {
         helper.e(".control-header-shade-style-always").disabled = true;
         helper.e(".control-header-shade-style-scroll").disabled = true;
         helper.e("[for=control-header-shade-opacity]").setAttribute("disabled", "");
         helper.e(".control-header-shade-opacity").disabled = true;
-        helper.e("[for=control-header-shade-padding]").setAttribute("disabled", "");
+        helper.e("[for=control-header-shade-padding-top]").setAttribute("disabled", "");
-        helper.e(".control-header-shade-padding").disabled = true;
+        helper.e(".control-header-shade-padding-top").disabled = true;
-        helper.e(".control-header-shade-border-top").disabled = true;
+        helper.e("[for=control-header-shade-padding-bottom]").setAttribute("disabled", "");
-        helper.e(".control-header-shade-border-bottom").disabled = true;
+        helper.e(".control-header-shade-padding-bottom").disabled = true;
+        helper.e(".control-header-shade-border-top-show").disabled = true;
+        helper.e(".control-header-shade-border-bottom-show").disabled = true;
+        helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled", "");
+        helper.e(".control-header-shade-border-top-width").disabled = true;
+        helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled", "");
+        helper.e(".control-header-shade-border-bottom-width").disabled = true;
+      };
+      if (state.get().header.shade.show && state.get().header.shade.border.top.show) {
+        helper.e("[for=control-header-shade-border-top-width]").removeAttribute("disabled");
+        helper.e(".control-header-shade-border-top-width").disabled = false;
+      } else {
+        helper.e("[for=control-header-shade-border-top-width]").setAttribute("disabled", "");
+        helper.e(".control-header-shade-border-top-width").disabled = true;
+      };
+      if (state.get().header.shade.show && state.get().header.shade.border.bottom.show) {
+        helper.e("[for=control-header-shade-border-bottom-width]").removeAttribute("disabled");
+        helper.e(".control-header-shade-border-bottom-width").disabled = false;
+      } else {
+        helper.e("[for=control-header-shade-border-bottom-width]").setAttribute("disabled", "");
+        helper.e(".control-header-shade-border-bottom-width").disabled = true;
       };
     };
     _edit();

js/header.js

@@ -73,11 +73,17 @@ var header = (function() {
       };
     };
     var _padding = function() {
-      html.style.setProperty("--header-shade-padding", state.get().header.shade.padding);
+      html.style.setProperty("--header-shade-padding-multiplier-top", state.get().header.shade.padding.top);
+      html.style.setProperty("--header-shade-padding-multiplier-bottom", state.get().header.shade.padding.bottom);
+    };
+    var _border = function() {
+      html.style.setProperty("--header-border-width-multiplier-top", state.get().header.shade.border.top.width);
+      html.style.setProperty("--header-border-width-multiplier-bottom", state.get().header.shade.border.bottom.width);
     };
     _color();
     _opacity();
     _padding();
+    _border();
     _margin();
   };
 

js/state.js

@@ -56,12 +56,21 @@ var state = (function() {
       },
       shade: {
         show: true,
-        padding: 4,
+        padding: {
+          top: 4,
+          bottom: 4
+        },
         style: "scroll",
         opacity: 0.95,
         border: {
-          top: false,
+          top: {
-          bottom: false
+            show: false,
+            width: 1
+          },
+          bottom: {
+            show: false,
+            width: 1
+          }
         }
       },
       greeting: {

js/update.js

@@ -236,6 +236,24 @@ var update = (function() {
         data.state.layout.width = 72;
         data.version = "2.14.0";
       };
+      if (version.compare(data.version, "2.16.0") == -1) {
+        console.log("\t -- running update", "2.16.0");
+        data.state.header.shade.padding = {
+          top: data.state.header.shade.padding,
+          bottom: data.state.header.shade.padding
+        };
+        data.state.header.shade.border = {
+          top: {
+            show: data.state.header.shade.border.top,
+            width: 1
+          },
+          bottom: {
+            show: data.state.header.shade.border.bottom,
+            width: 1
+          }
+        };
+        data.version = "2.16.0";
+      };
     };
     // if no update is needed
     // version bump

js/version.js

@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.15.0";
+  var current = "2.16.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");