Added login form
Change-Id: Ia297cfffdeb289363d9fee4e6751e9afa6a3f9d8
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
new file mode 100644
index 0000000..ddcf811
--- /dev/null
+++ b/dev/scss/sidebar/sidebar.scss
@@ -0,0 +1,222 @@
+@charset "utf-8";
+@import "../util";
+
+$border-size: 2px;
+$right-padding: 60px;
+
+aside {
+ outline: none;
+ font-size: 10pt;
+ display: block;
+ background-color: $dark-green;
+ position: fixed;
+ z-index: 7100;
+ color: $nearly-white;
+ width: $logo-left-distance;
+ top: 0;
+ left: 0;
+ height: 100%;
+ padding-top: 65px;
+ > div {
+ overflow-y: auto;
+ overflow-x: visible;
+ max-height: 100%;
+ }
+ > * {
+ opacity: 1;
+ }
+ &::after {
+ display: block;
+ opacity: 0;
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ margin-right: -1 * ($standard-margin / 2);
+ background-color: $dark-green;
+ font-family: FontAwesome;
+ content: $fa-bars;
+ font-size: 16pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
+ border-top-right-radius: $standard-border-radius;
+ }
+ h2, legend {
+ font: {
+ size: 100%;
+ weight: bold;
+ }
+ line-height: 2em;
+ text-align: center;
+ padding: 0;
+ margin: 0;
+ }
+
+ ul {
+ list-style-type: none;
+/*
+ background-color: $light-green;
+*/
+ margin: 0;
+ font-size: 10pt;
+ text-indent: 0;
+ padding: 0;
+ li {
+ padding: 0;
+ > a {
+ padding: $item-padding;
+ &:visited {
+ @include choose-item;
+ }
+
+ }
+
+ li.folded {
+ &.active ul {
+ display: block;
+ }
+ ul {
+ display: none;
+ }
+ }
+
+ &.active > a:link {
+ @include choose-active;
+ }
+
+ > a:link {
+ @include choose-item;
+ border-right: {
+ width: $border-size;
+ style: solid;
+ }
+
+ display: block;
+ &:hover {
+ // color: inherit;
+ transition: none;
+ @include choose-hover;
+ }
+ }
+ h3 {
+ font: {
+ weight: bold;
+ size: 100%;
+ }
+ padding: 0;
+ margin: 0;
+ }
+/*
+ &.active {
+ text-shadow: none;
+ h3 {
+ margin-bottom: 2pt;
+ padding-bottom: 2pt;
+ border-bottom: 1px solid black;
+ }
+ }
+*/
+ > a {
+ padding-left: 6pt;
+ }
+ li > a {
+ padding-left: 18pt;
+ }
+ li li > a {
+ padding-left: 36pt;
+ }
+ }
+ }
+ nav > ul > li > a {
+ font-weight: bold;
+ }
+
+ fieldset {
+ position: relative;
+ border-width: 0;
+ input[type=text], input[type=password] {
+ @include input-field;
+ width: 100%;
+ }
+ > form > div {
+ position: relative;
+ width: 100%;
+ margin-top: 4px;
+ padding-right: $button-width
+ }
+
+ button {
+ position: absolute;
+ // height: 100%;
+ top: 0;
+ right: 0;
+ &::after {
+ content: $fa-login;
+ }
+ }
+ }
+}
+
+aside:focus {
+ transition: all .3s ease-in-out;
+}
+
+aside.off, aside:not(:focus):not(.active) {
+ margin-left: -1 * ($logo-left-distance - ($standard-margin / 2));
+ &::after {
+ opacity: 1;
+ }
+ > * {
+ opacity: 0;
+ transition: {
+ property: opacity;
+ duration: .3s;
+ }
+ }
+}
+
+aside.off::after {
+ display:none;
+}
+
+/*
+#sidebar {
+ text-shadow: none;
+ height: 105%;
+ margin-top: -10px;
+ background-color: #496000;
+ left: 0;
+ top: 0;
+ &.active {
+ box-shadow: 2px 2px 5px darken($dark-green, 15%);
+ margin-left: 0px;
+ left: 0;
+ top: 0;
+ }
+ &:not(.active) > i.fa-bars {
+ opacity: 1;
+ cursor: pointer;
+ background-color: #496000;
+ position: fixed;
+ font-size: 16pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
+ bottom: 0;
+ left: 0;
+ border-top-right-radius: 5pt;
+ }
+ dl.info {
+ font-size: 9pt;
+ padding: 0 10pt;
+ > dt {
+ font-weight: bold;
+ float: left;
+ }
+ > dd {
+ text-align: right;
+ }
+ }
+}
+*/
\ No newline at end of file