Commit 9902754a authored by MrMan's avatar MrMan

Decent looking LHSNavHeader

parent 3b5f3a1c
...@@ -10,7 +10,7 @@ var HeaderButton = { ...@@ -10,7 +10,7 @@ var HeaderButton = {
return m("button", {class: "component header-button"}, [ return m("button", {class: "component header-button"}, [
m("span", text), m("span", text),
m("img", {href: iconPrefix + iconName }), m("img", {class: "sm-margin-left icon", src: iconPrefix + iconName }),
]); ]);
} }
}; };
......
...@@ -4,6 +4,16 @@ html,body { ...@@ -4,6 +4,16 @@ html,body {
width: 100%; width: 100%;
} }
button img.icon {
height: 1em;
}
.sm-margin-top { margin-top: 1em; }
.sm-margin-left { margin-left: 1em; }
.sm-margin-right { margin-right: 1em; }
.sm-margin-bottom { margin-bottom: 1em; }
/*******/ /*******/
/* App */ /* App */
/*******/ /*******/
...@@ -11,6 +21,7 @@ html,body { ...@@ -11,6 +21,7 @@ html,body {
.component.app { .component.app {
display: flex; display: flex;
flex-direction: columns; flex-direction: columns;
min-height: 100%;
} }
...@@ -20,7 +31,6 @@ html,body { ...@@ -20,7 +31,6 @@ html,body {
.component .lhs-nav { .component .lhs-nav {
min-width: 25vw; min-width: 25vw;
height: 100%;
background-color: #2e3740; background-color: #2e3740;
color: white; color: white;
} }
...@@ -28,4 +38,26 @@ html,body { ...@@ -28,4 +38,26 @@ html,body {
.component .lhs-nav hr { .component .lhs-nav hr {
width: 80%; width: 80%;
border: 1px solid #202529; border: 1px solid #202529;
margin: 0 auto;
}
.component .lhs-nav header {
display: flex;
padding: 1em; 0;
justify-content: center;
align-items: center;
}
/****************/
/* HeaderButton */
/****************/
.component.header-button {
border-radius: 20em;
background-color: rgba(0,0,0,0.4);
color: white;
border: 1px solid black;
padding: 0.5em 2em;
box-shadow: inset 0px 0px 5px black;
cursor: pointer
} }
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
viewBox="0 0 640 640"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<metadata id="CorelCorpID_0Corel-Layer"/>
<path fill="white" d="M529.176 9.69697l98.0681 98.0563c12.945,12.945 12.945,34.1225 0,47.0675l-54.2605 54.2605 -145.136 -145.124 54.2605 -54.2605c12.945,-12.945 34.1225,-12.945 47.0675,0zm-116.612 218.589l0.0236223 0.0236223 0 0.0354335c4.02761,4.03942 6.04732,9.34263 6.04732,14.6104 0,5.25597 -2.01971,10.5474 -6.03551,14.5986l0 0.0354335 -0.0354335 0.0354335 -234.121 234.133 -0.0236223 0.0236223 -0.0354335 0c-1.15749,1.14568 -2.38586,2.1142 -3.66146,2.90555l-0.0354335 0c-1.31104,0.814971 -2.68114,1.46458 -4.08666,1.94884 -7.26387,2.52759 -15.6852,0.897649 -21.4609,-4.87801l-0.0472447 0 -0.0118112 -0.0118112 0 -0.0354335c-1.14568,-1.15749 -2.12601,-2.39767 -2.91736,-3.66146l0 -0.0472447c-0.803159,-1.29923 -1.46458,-2.68114 -1.94884,-4.07485 -2.52759,-7.26387 -0.885838,-15.697 4.87801,-21.4727l0 -0.0354335 234.133 -234.133 0.0236223 -0.0118112 0.0354335 0c4.03942,-4.02761 9.34263,-6.04732 14.6104,-6.04732 5.25597,0 10.5356,2.0079 14.5986,6.0237l0.0354335 0 0.0354335 0.0354335zm-210.57 351.489c-39.2603,12.1537 -78.5325,24.2956 -117.793,36.4375 -92.3161,28.5476 -91.9027,47.5872 -66.7095,-41.3037l39.6737 -139.962 0 -0.0118112 -0.153545 -0.141734 343.374 -343.386 145.136 145.136 -343.374 343.386 -0.153545 -0.153545zm-120.072 -120.072l95.3043 95.3161c-25.7956,7.94892 -51.5912,15.8978 -77.3868,23.8468 -60.6504,18.6971 -60.3669,31.2051 -43.8785,-27.2011l25.9609 -91.9618zm429.879 -392.261l57.6857 57.6976 -20.8231 20.8231 -57.6857 -57.6976 20.8231 -20.8231z"/>
</g>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment