restructured scripts and styled note edit interface

4 files changed, 138 insertions, 9 deletions

diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index 5923e1f..cce0e0f 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -162,3 +162,16 @@ table {
     border-radius: 4px;
     padding: 6px;
 }
+select {
+    display: inline;
+    @include fontsize(13);
+    color: $body_font_color;
+    border: 1px solid lighten($body_font_light, 15);
+    padding: 5px;
+    background: white;
+    border-radius: 4px;
+}
+#id_tags {
+    @include fontsize(13);
+    padding: 8px;
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index c242ace..9ef2e99 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -201,6 +201,17 @@ h3 {
 .vertical li {
     display: block;
 }
+.single-col {
+    display: block;
+    @include constrain_narrow;
+}
+.wide{
+    display: block;
+    @include constrain_wide;
+}
+.small > * {
+    @include fontsize(14);
+}
 //**************  other global classes ************************
 .sans {
     @include generic_sans;
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 487f1fc..29e1ef2 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -16,6 +16,9 @@ header {
         margin-top: 4px;
         float: right;
     }
+    .nologin {
+        margin-top: -2px;
+    }
 }
 nav {
     @include fancy-sans-bold;
@@ -59,7 +62,7 @@ nav {
     position: absolute;
     z-index: 10;
     margin-top: 4px;
-    margin-left: 2rem;
+    margin-left: 4rem;
     background: #fff;
     color: #60516E;
     padding: 10px;
@@ -96,5 +99,41 @@ nav {
     }
 }
 #user-menu {
-    margin-left: 4rem;
+    margin-left: 8rem;
+}
+
+.circle{
+    width: 26px;
+    height: 20px;
+    border-radius: 100%;
+    position: relative;
+    margin: -2px 8px 0 0;
+    display: inline-block;
+    vertical-align: middle;
+    background: $link_color;
+    text-indent: -3000em;
+}
+.circle:hover{
+    background: $link_color;
+}
+.circle:active{
+    background: $link_color;
+}
+.circle:before,
+.circle:after{
+    content:'';position:absolute;top:0;left:0;right:0;bottom:0;
+}
+/* PLUS */
+.circle.plus:before,
+.circle.plus:after {
+    background: white;
+}
+.circle.plus:before{
+    width: 2px;
+    margin: 10px auto;
+}
+.circle.plus:after{
+    margin: auto 10px;
+    height: 2px;
+    box-shadow: none;
 }
diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss
index cd10e39..caec25b 100644
--- a/design/sass/_notes.scss
+++ b/design/sass/_notes.scss
@@ -46,6 +46,10 @@ main {
     order: 3;
     min-width: 320px;
 }
+.balance-container-left {
+    order: 1;
+    min-width: 320px;
+}
 .list-notebook {
 
 }
@@ -62,32 +66,53 @@ main {
     list-style-type: none;
     li {
         @include fontsize(13);
+        padding: 8px 0 12px;
         min-height: 4.5rem;
         box-shadow: 0 -1px 0 #e7e2ee inset;
         margin: 0;
         padding: 6px 12px;
         &:hover {
-            background: #f1f1f1;
+            background: #f7f7f7;
         }
         a {
-            color: lighten($body_font_color, 15);
+            color: lighten($body_font_color, 5);
             text-decoration: none;
         }
     }
     h4 {
         @include fontsize(16);
         margin: 0;
-        padding: 8px 0 8px 6px;
+        padding-bottom: 8px;
         font-weight: normal;
         overflow: hidden;
         white-space: nowrap;
+        color: $body_font_color;
+    }
+    .notebook {
+        padding-right: 8px;
+        &:after {
+            display: inline-block;
+            position: relative;
+            top: 3px;
+            left: 3px;
+            content: " ";
+            height: 14px;
+            width: 1px;
+            background-color: $body_font_light;
+        }
     }
     .note-preview {
-        padding-left: 6px;
         margin-bottom: 16px;
         margin-right: 6px;
     }
 }
+
+.color-box {
+    display: inline-block;
+    width: 9px;
+    height: 9px;
+    margin-right: 4px;
+}
 .note-title {
     @include fontsize(26);
 }
@@ -104,6 +129,7 @@ main {
     @include fancy-sans;
     @include fontsize(12);
     margin-bottom: 0;
+    margin-top: 0;
     text-transform: uppercase;
 }
 .note-url {
@@ -122,8 +148,6 @@ main {
     float: left;
     width: 50%;
     .label {
-        text-transform: uppercase;
-        @include fontsize(11);
         color: $body_font_light;
         margin-right: 4px;
     }
@@ -143,6 +167,17 @@ main {
             color: darken($body_font_light, 25);
         }
     }
+    .notebook {
+        width: auto; 
+        display: inline;
+        margin-right: 1rem;
+    }
+    .tags {
+        display: flex;
+        input {
+            width: 200%;
+        }
+    }
 }
 .notebook {
     display: block;
@@ -183,7 +218,38 @@ main {
 .active {
     display: block !important;
 }
-
+.notebook-colored {
+    border-left: 3px solid #fff;
+}
+.notebook-title {
+    @include fontsize(24);
+    @include fancy-sans;
+}
+.flex-wrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    @extend %clearfix;
+}
+#nb-edit-form {
+    width: 100%;
+}
+.color-picker-fieldset {
+    display: block;
+    margin-right: .5rem;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    border: 1px solid $body_font_light;
+    #id_color_rgb {
+        display: block;
+        text-indent: -1000em;
+        padding: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+    }
+}
 /*
 
 Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>