Added initial css and html framework
Change-Id: I82fafe83852a45f8af7d959e496c6246a8865ec5
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/src/scss/layout/_all.scss b/src/scss/layout/_all.scss
new file mode 100644
index 0000000..1122ffe
--- /dev/null
+++ b/src/scss/layout/_all.scss
@@ -0,0 +1,2 @@
+@import 'header';
+@import 'navigation';
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
new file mode 100644
index 0000000..9bbe7e8
--- /dev/null
+++ b/src/scss/layout/_header.scss
@@ -0,0 +1,51 @@
+
+$logoHeight: 40px;
+$logoMaxHeight: 100px;
+$logoMaxWidth: 125px;
+
+#header__wrapper {
+ position: fixed;
+ top:0;
+ left: 0;
+ right:0;
+ z-index: 100;
+}
+.app__version {
+ margin-left: 1em;
+ display: none;
+ @include mediaQuery(x-small) {
+ display: inline-block;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+}
+header {
+ position: relative;
+ background: $black;
+ color: $white;
+ padding: .8em;
+
+ .logo__wrapper {
+ display: inline-block;
+ }
+
+ #header__logo {
+ vertical-align: middle;
+ margin-right: 1em;
+ float: left;
+ height:$logoHeight; //required for <SVG> logos - can remove if using img
+ max-height: $logoMaxHeight;
+ max-width: $logoMaxWidth;
+ width: auto;
+ }
+
+}
+
+.header__functions-wrapper {
+ color: $white;
+ background: green;
+ padding: 1em 1.1em;
+ box-sizing: border-box;
+ display: block;
+}
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
new file mode 100644
index 0000000..024e869
--- /dev/null
+++ b/src/scss/layout/_navigation.scss
@@ -0,0 +1,86 @@
+#nav__top-level {
+ background: $black;
+ height: 100%;
+ position: fixed;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ z-index: 99;
+ list-style-type: none;
+ margin: 0;
+ li { margin: 0; }
+ .button, button, a {
+ background: transparent;
+ height: auto;
+ border: 0;
+ color: $white;
+ fill: $white;
+ width: 100%;
+ padding: 1em;
+ display: block;
+ text-align: center;
+ margin-bottom: 0;
+ white-space: normal;
+ .nav__icon {
+ color: $white;
+ max-height: 40px;
+ stroke-width: .5;
+ margin-bottom: -.5em;
+ }
+ a {
+ margin-bottom: 5px;
+ }
+ p {
+ margin: 0;
+ font-size: .9em;
+ line-height:1.2rem;
+ }
+
+ .nav__icon-help__outer {
+ fill: transparent;
+ stroke: $white;
+ stroke-miterlimit: 10;
+ stroke-width: 1px;
+ }
+ .nav__icon-help__Inner {
+ fill: $white;
+ }
+ &:hover {
+ background: $white;
+ fill: $black;
+ color: $black;
+ padding: 1em;
+ border-radius: 0;
+ .nav__icon-help__outer {
+ stroke: $black;
+ }
+ .nav__icon-help__inner {
+ fill: $black;
+ }
+ }
+ }
+ .opened {
+ background: $white;
+ fill: $black;
+ color: $black;
+ }
+}
+
+.nav__second-level {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 97;
+ display: block;
+ background: $white;
+ padding: 10px .6em;
+ margin: 0;
+ list-style-type: none;
+ transition: all ease-out 0.5s;
+ box-shadow: 0 2px 5px 0 $black;
+ &.opened {
+ transition: all ease-out .8s;
+
+ }
+}