cleaned up JS and made modal handler.

5 files changed, 247 insertions, 114 deletions

diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index cce0e0f..d8a6a03 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -148,6 +148,10 @@ table {
 }
 .btn-inline {
     display: inline;
+    width: auto;
+}
+.note-save {
+    float: right;
 }
 .form-narrow {
     margin: 0 auto;
@@ -171,7 +175,14 @@ select {
     background: white;
     border-radius: 4px;
 }
-#id_tags {
+.note-detail #id_tags {
     @include fontsize(13);
     padding: 8px;
 }
+#fs-notebook{
+    label {
+        top: -1.5rem;
+        left: .25rem;
+    }
+    margin: 3rem 0 1.5rem;
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index 9ef2e99..b858866 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -90,7 +90,7 @@ blockquote:before {
     @include fontsize(68);
     content: '\201C';
     position: absolute;
-    top: -1rem;
+    top: -1.35rem;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 3rem;
@@ -152,7 +152,7 @@ h3 {
     }
 }
 .wrapper {
-    @include constrain(1440px);
+    @include constrain(1280px);
     //margin-top: 5rem;
 }
 //**************  Universals ************************
@@ -189,6 +189,12 @@ h3 {
 .right-padding-0 {
     padding-right: 0 !important;
 }
+.top-margin-0 {
+    margin-top: 0 !important;
+}
+.bottom-margin-0 {
+    margin-bottom: 0 !important;
+}
 .center {
     text-align: center;
     margin-right: auto;
@@ -201,9 +207,15 @@ h3 {
 .vertical li {
     display: block;
 }
+.block {
+    display: block;
+}
+.inline-block {
+    display: inline-block;
+}
 .single-col {
     display: block;
-    @include constrain_narrow;
+    @include constrain(66%);
 }
 .wide{
     display: block;
@@ -212,6 +224,12 @@ h3 {
 .small > * {
     @include fontsize(14);
 }
+.hed-small {
+    @include fontsize(22);
+    @include fancy_sans;
+    margin-bottom: .5rem;
+    margin-top: 2rem;
+}
 //**************  other global classes ************************
 .sans {
     @include generic_sans;
diff --git a/design/sass/_modal.scss b/design/sass/_modal.scss
index 57a7e51..dd21816 100644
--- a/design/sass/_modal.scss
+++ b/design/sass/_modal.scss
@@ -1,112 +1,103 @@
-/**
- * Component: Overlay
- */
-/* BACKDROP */
-.novi-backdrop {
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 7000;
-  position: fixed;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background: rgba(0, 0, 0, 0.75);
-  opacity: 0;
-  animation-name: fadeIn;
-  animation-duration: .4s;
-  animation-fill-mode: forwards;
+#overlay{
+    font-family:Lato;
+    position:fixed;
+    width:100vw;
+    height:100vh;
+    overflow:hidden;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    animation:overlay .3s forwards ease;
+    background-color:rgba(0,0,0,.8);
+    transform:scale(1);
+    transform-origin:center center;
+    z-index: 2000;
+    display: block;  
+    > div {
+        position:absolute;
+        top:50%;
+        left:50%;
+        transform:translate(-50%,-50%);
+    }
+    header{
+        @include fancy_sans;
+        @include fontsize(18);
+        padding: 1rem 1rem 1rem 0;
+        margin-left: 0;
+    }
 }
-/* OVERLAY */
-.novi-overlay {
-  text-align: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
+.top {
+    z-index: 10000;
 }
-.novi-overlay:before {
-  content: '';
-  display: inline-block;
-  height: 10%;
-  vertical-align: middle;
-}
-.novi-overlay__container {
-  width: 100%;
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 auto;
-  text-align: left;
-  z-index: 8000;
-  padding: 0 15px;
-}
-.novi-overlay__content {
-  position: relative;
-  background: #FFF;
-  padding: 40px;
-  width: auto;
-  margin: 15px auto;
-  width: 100%;
-  max-width: 700px;
-  animation-name: fadeZoomIn;
-  animation-duration: .4s;
-  opacity: 0;
-  animation-fill-mode: forwards;
-  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
-  border-radius: 8px;
-}
-.novi-overlay__content--video {
-  padding: 0;
-  height: 360px;
-}
-.novi-overlay__content--video .novi-overlay-close {
-  top: -25px;
-  right: 0;
-}
-/* CLOSE BUTTON */
-.novi-overlay-close {
-  padding: 0;
-  background: none;
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  display: block;
-  width: 15px;
-  height: 15px;
-  z-index: 1;
-  border: 0;
-  background-size: 100%;
-  background-repeat: no-repeat;
-  background-position: 100% 0;
-  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIxLjkgMjEuOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjEuOSAyMS45IiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KICA8cGF0aCBkPSJNMTQuMSwxMS4zYy0wLjItMC4yLTAuMi0wLjUsMC0wLjdsNy41LTcuNWMwLjItMC4yLDAuMy0wLjUsMC4zLTAuN3MtMC4xLTAuNS0wLjMtMC43bC0xLjQtMS40QzIwLDAuMSwxOS43LDAsMTkuNSwwICBjLTAuMywwLTAuNSwwLjEtMC43LDAuM2wtNy41LDcuNWMtMC4yLDAuMi0wLjUsMC4yLTAuNywwTDMuMSwwLjNDMi45LDAuMSwyLjYsMCwyLjQsMFMxLjksMC4xLDEuNywwLjNMMC4zLDEuN0MwLjEsMS45LDAsMi4yLDAsMi40ICBzMC4xLDAuNSwwLjMsMC43bDcuNSw3LjVjMC4yLDAuMiwwLjIsMC41LDAsMC43bC03LjUsNy41QzAuMSwxOSwwLDE5LjMsMCwxOS41czAuMSwwLjUsMC4zLDAuN2wxLjQsMS40YzAuMiwwLjIsMC41LDAuMywwLjcsMC4zICBzMC41LTAuMSwwLjctMC4zbDcuNS03LjVjMC4yLTAuMiwwLjUtMC4yLDAuNywwbDcuNSw3LjVjMC4yLDAuMiwwLjUsMC4zLDAuNywwLjNzMC41LTAuMSwwLjctMC4zbDEuNC0xLjRjMC4yLTAuMiwwLjMtMC41LDAuMy0wLjcgIHMtMC4xLTAuNS0wLjMtMC43TDE0LjEsMTEuM3oiIGZpbGw9IiMwMDAwMDAiLz4KPC9zdmc+Cg==);
+@keyframes modal{
+  from{
+	-webkit-transform: scale(0.5);
+	-moz-transform: scale(0.5);
+	-ms-transform: scale(0.5);
+	transform: scale(0.5);
+	opacity: 0;
+	-webkit-transition: all 0.4s;
+	-moz-transition: all 0.4s;
+	transition: all 0.4s;
+  };
+  to{
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-ms-transform: scale(1);
+	transform: scale(1);
+	opacity: 1;
+  }
 }
-.novi-overlay-close:hover,
-.novi-overlay-close:focus,
-.novi-overlay-close:active {
-  outline: none;
-  cursor: pointer;
+@keyframes overlay{
+  from{
+    background-color:rgba(0,0,0,0);
+  };
+  to{
+    background-color:rgba(0,0,0,.8);
+  }
 }
-/* HELPER CLASSES */
-.no-scroll {
-  overflow: hidden;
+#overlay-wrapper {
+    max-width: 52%;
+    width: 90%;
 }
-@keyframes fadeZoomIn {
-  from {
-    opacity: 0;
-    transform: scale(0.5) translateY(300px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
+#modal {
+    min-height: 330px;
+    padding: 0 1rem 1rem 1rem;
+    background-color: white;
+    border-radius: 4px;
+    overflow:hidden;
+    animation:modal .2s forwards ease;
+    -webkit-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5);
+    -moz-box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5);
+    box-shadow: 0px 2px 16px 2px rgba(0,0,0,0.5);
+
+
+    & > div {
+        color: #424242;
+        background-color: white;
+    }
+    // specific fixes for notebook create form
+    #nb-create-form { width: 99%;}
+    .flex-wrapper {
+        display: block;
+        margin-top: .5rem;
+        #color-picker {
+            margin-top: 3rem; 
+            margin-left: .25rem; 
+        }
+        .nb-name { width: 100%;}
+    }
+    input[type="submit"] {
+        float: right;
+    }
+
 }
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+#hed-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    & > * {
+        width: auto;
+    }
 }
diff --git a/design/sass/_notes.scss b/design/sass/_notes.scss
index cde15a5..4ab42b4 100644
--- a/design/sass/_notes.scss
+++ b/design/sass/_notes.scss
@@ -85,7 +85,7 @@ main {
         font-weight: normal;
         overflow: hidden;
         white-space: nowrap;
-        color: $body_font_color;
+        color: darken($body_font_color, 10);
     }
     .notebook {
         padding-right: 8px;
@@ -176,18 +176,20 @@ main {
         input {
             width: 200%;
         }
+        a { margin-right: .25rem;}
     }
 }
 .notebook {
     display: block;
 }
 .note-container {
-    max-width: 60%;
+    max-width: 70%;
     position: relative;
     flex:1;
     order: 2;
     background: #fff;
     z-index: 4;
+    margin: 0 auto;
 }
 #note-body {
     @include fancy-sans;
@@ -211,14 +213,16 @@ main {
         font-size:inherit;
     }
 }
-#user-menu, #notebooks-menu {
+#user-menu, #notebooks-menu, #notebook-drop-menu, #tags-drop-menu {
     display: none;
 }
 .active {
     display: block !important;
 }
 .notebook-colored {
-    border-left: 3px solid #fff;
+    -webkit-background-clip: padding-box; /* for Safari */
+    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
+    border-left: 3px solid rgba(255, 255, 255, .5);
 }
 .notebook-title {
     @include fontsize(24);
@@ -249,6 +253,115 @@ main {
         cursor: pointer;
     }
 }
+#nb-create-form {
+    .color-picker-fieldset {
+        width: 30px;
+        height: 30px;
+        label { 
+            top: -25px;   
+            width: 140px;
+            left: -5px;
+        }
+    }
+    .nb-name {
+    margin: 1rem 2rem 1rem 0;
+    width: 90%;
+}
+}
+.small-circle {
+    width: 18px;
+    height: 18px;
+    margin-left: 6px;
+}
+.small-circle.plus:before {
+    width: 2px;
+    margin: 5px auto;
+}
+.small-circle.plus:after{
+    margin: auto 5px;
+    width: 8px;
+}
+
+
+.url-field {
+    input {
+        @include fontsize(16);
+        color: $body_font_color;
+    }
+}
+.note-hed-wrapper {
+    margin-bottom: 1.5rem;
+}
+.note-hed {
+    @include fontsize(22);
+    margin-bottom: 0;
+}
+.note-subhed {
+    @include fontsize(16);
+    margin-top: 0;
+}
+
+.nb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-top: 0;
+}
+.nb-list-item {
+    list-style-type: none;
+    padding: 2rem;
+    margin: 1rem;
+    flex-grow: 1; 
+    border: 1px #e7e2ee solid;
+    border-radius: 4px;
+    min-width: 160px;
+}
+.color-picker-inner {
+    width: 100%;
+    height: 100%;
+}
+
+.dropmenu-search {
+    margin: 0;
+    padding: 0;
+    .dropmenu-search-wrapper {
+        border-top: 1px solid #e9e9e9;
+        border-bottom: 1px solid #e9e9e9;
+        padding: 5px;
+    }
+    input {
+        @include fontsize(16);
+        padding: 4px;
+        width: auto;
+        border: none;
+    }
+    .dropmenu-list {
+        padding: 3px;
+        margin-top: 0;
+        max-height: 300px;
+        overflow-x: auto;
+    }
+    a {
+        display: block;
+        text-decoration: none;
+        padding: 4px 6px;
+        &:hover {
+            background: $link_color;
+        }
+    }
+}
+
+.ql-snow .ql-editor blockquote {
+    border-left: none !important;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    padding-left: none !important;
+    padding: 1rem .5rem;
+}
+.ql-container {
+    min-height: 300px;
+}
+
 /*
 
 Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
diff --git a/design/sass/screenv1.scss b/design/sass/screenv1.scss
index d54027e..f3df73e 100644
--- a/design/sass/screenv1.scss
+++ b/design/sass/screenv1.scss
@@ -1,10 +1,10 @@
 @import "_fonts.scss";
 @import "_mixins.scss";
 @import "_queries.scss";
+@import "_awesomeplete.scss";
 @import "_global.scss";
 @import "_header.scss";
 @import "_footer.scss";
 @import "_forms.scss";
 @import "_modal.scss";
-@import "_breadcrumbs.scss";
 @import "_notes.scss";