started smoothing out rte notifcation handling, cleaned up styles for date picker

themes/dash/assets/css/dash.css

@@ -2189,7 +2189,6 @@ select {
   width: 100%;
 }
 #entries-edit-index #entries-edit-index-wrapper #entry-header {
-  width: 100%;
   max-width: 900px;
   margin: 0 auto;
   padding: 0.75rem;
@@ -2206,9 +2205,23 @@ select {
   background: #91867a;
   font-family: 'Apercu';
   width: 100%;
-  height: 150px;
+  height: 115px;
   color: #4c463f;
 }
+#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #entry-date {
+  background: #897e71;
+  border-radius: 0 3px 3px 0;
+  width: 105px;
+  font-family: 'Apercu';
+  color: #cd898d;
+}
+#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta label {
+  background: #81776b;
+  border-radius: 3px 0 0 3px;
+  display: inline-block;
+  padding: 5px;
+  color: #a69d93;
+}
 #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #featured-click,
 #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image {
   display: none;
@@ -2257,75 +2270,6 @@ select {
   white-space: pre-wrap;
   line-break: normal;
 }
-/**
--------------------------------
--- Editor
--------------------------------
-**/
-#edit-control {
-  margin: 10px 0 0 0;
-  top: 1px;
-  padding: 5px;
-  border-radius: 5px;
-  background: rgba(137,126,113,0.75);
-  z-index: 2000;
-}
-#edit-control button {
-  margin: 5px;
-}
-#edit-control #post-sumbit-btn {
-  height: 30px;
-  background: #65b16c;
-  color: #418147;
-}
-#edit-control #option-date {
-  height: 30px;
-  padding-top: 6px;
-}
-#edit-control #option-date svg {
-  margin: -13px 5px 0 0;
-  display: inline-block;
-  vertical-align: top;
-  fill: #eee;
-}
-#edit-control .content-editor-btn-icon {
-  height: 30px;
-  width: 30px;
-  background: #643c32;
-  padding: 5px 5px 1px 5px;
-  border-radius: 20px;
-  color: #968c80;
-  display: inline-block;
-  vertical-align: top;
-  text-align: center;
-}
-#edit-control .content-editor-btn-icon svg {
-  fill: #968c80;
-}
-#edit-control .content-editor-btn-text {
-  width: 30px;
-  background: #643c32;
-  padding: 5px;
-  border-radius: 20px;
-  color: #968c80;
-  vertical-align: top;
-  display: inline-block;
-  text-align: center;
-}
-#edit-control #option-bold {
-  font-weight: bold;
-  text-decoration: none;
-}
-#edit-control #option-italic {
-  font-weight: bold;
-  text-decoration: none;
-  font-style: italic;
-}
-#edit-control #option-strikethrough {
-  font-weight: bold;
-  text-decoration: line-through;
-  font-style: italic;
-}
 .dp-modal {
   position: fixed;
   top: 0;
@@ -2635,11 +2579,113 @@ select {
     transform: translate(-50%, -50%);
   }
 }
+/**
+-------------------------------
+-- Editor
+-------------------------------
+**/
+#edit-control {
+  margin: 10px;
+  top: 1px;
+  padding: 5px;
+  border-radius: 5px;
+  background: rgba(137,126,113,0.75);
+  z-index: 2000;
+}
+#edit-control button {
+  margin: 5px;
+}
+#edit-control #post-sumbit-btn {
+  -moz-transition: all 0.3s linear;
+  -webkit-transition: all 0.3s linear;
+  -o-transition: all 0.3s linear;
+  transition: all 0.3s linear;
+  height: 30px;
+  width: 30px;
+  padding: 5px 5px 1px 5px;
+  border-radius: 20px;
+  display: inline-block;
+  vertical-align: top;
+  text-align: center;
+}
+#edit-control .icon-hide {
+  display: none;
+  visibility: hidden;
+}
+#edit-control .submit-start {
+  background: #eee;
+}
+#edit-control .submit-start svg {
+  fill: #cd898d;
+}
+#edit-control .submit-cool {
+  background: #65b16c;
+}
+#edit-control .submit-cool svg {
+  fill: #eee;
+}
+#edit-control #option-date {
+  height: 30px;
+  padding-top: 6px;
+}
+#edit-control #option-date svg {
+  margin: -13px 5px 0 0;
+  display: inline-block;
+  vertical-align: top;
+  fill: #eee;
+}
+#edit-control .content-editor-btn-icon {
+  height: 30px;
+  width: 30px;
+  background: #643c32;
+  padding: 5px 5px 1px 5px;
+  border-radius: 20px;
+  color: #968c80;
+  display: inline-block;
+  vertical-align: top;
+  text-align: center;
+}
+#edit-control .content-editor-btn-icon svg {
+  fill: #968c80;
+}
+#edit-control .content-editor-btn-text {
+  width: 30px;
+  background: #643c32;
+  padding: 5px;
+  border-radius: 20px;
+  color: #968c80;
+  vertical-align: top;
+  display: inline-block;
+  text-align: center;
+}
+#edit-control #option-bold {
+  font-weight: bold;
+  text-decoration: none;
+}
+#edit-control #option-italic {
+  font-weight: bold;
+  text-decoration: none;
+  font-style: italic;
+}
+#edit-control #option-strikethrough {
+  font-weight: bold;
+  text-decoration: line-through;
+  font-style: italic;
+}
+#edit-content-wrapper {
+  width: 98%;
+  max-width: 900px;
+  margin: 0 auto;
+  border-radius: 5px;
+}
+#edit-content-wrapper code {
+  border-radius: 5px;
+}
 .hljs {
   display: block;
   overflow-x: auto;
   padding: 0.5em;
-  background: none;
+  background: #897e71;
 }
 .hljs,
 .hljs-subst {

themes/dash/entry-edit.pug

@@ -26,9 +26,12 @@ block main-content
                 #entry-meta.column
                     textarea(id='entry_tags' type='text', name='entry_tags' class='form-control', placeholder='tags [comma seperated]', autofocus)
                         =post_tags
+                    label Date Posted
+                    input(id="entry-date" type="text" value=post_date)
                     br
                     input(id="featured-click" type="file" name="featured-click")
                     input(id="post-image" type="file" name="post-image")
+
             #entry-feature
                 //label FEATURE IMAGE
                 if(post_feature == 'null')
@@ -45,31 +48,33 @@ block main-content
                             img(src=post_feature)
             #edit-content
                 #edit-control
-                    button#option-bold.content-editor-btn-text.editor-button(href="")
+                    button#option-bold.content-editor-btn-text.editor-button(title="bold")
                         | B
-                    button#option-italic.content-editor-btn-text.editor-button(href="")
+                    button#option-italic.content-editor-btn-text.editor-button(title="italics")
                         | I
-                    button#option-strikethrough.content-editor-btn-text.editor-button(href="")
+                    button#option-strikethrough.content-editor-btn-text.editor-button(title="strikethrough")
                         | S
-                    button#option-link.content-editor-btn-icon.editor-button(href="")
+                    button#option-link.content-editor-btn-icon.editor-button(title="insert link")
                         svg#option-link(viewBox="0 0 20 20" class="icons")
                             use(xlink:href='/dash/assets/images/sprite.svg#entypo-link')
-                    button#option-header1.content-editor-btn-text.editor-button(href="")
+                    button#option-header1.content-editor-btn-text.editor-button(title="header 1")
                         | H1
-                    button#option-header2.content-editor-btn-text.editor-button(href="")
+                    button#option-header2.content-editor-btn-text.editor-button(title="header 2")
                         | H2
-                    button#option-header3.content-editor-btn-text.editor-button(href="")
+                    button#option-header3.content-editor-btn-text.editor-button(title="header 3")
                         | H3
-                    button#option-image.content-editor-btn-icon(for="post-image")
+                    button#option-image.content-editor-btn-icon(for="post-image" title='insert image')
                         svg#option-link(viewBox="0 0 20 20" class="icons")
                             use(xlink:href='/dash/assets/images/sprite.svg#entypo-image')
-                    input(id="option-date" type="text" value=post_date)
+                    
-                    //button#option-date.editor-button
-                        svg#option-date(viewBox="0 0 20 20" class="icons")
-                            use(xlink:href='/dash/assets/images/sprite.svg#entypo-calendar')
-                        =post_date
                     if(edit)
-                        button#post-sumbit-btn.post-sumbit-btn(data-action='blog-update' data-id=post.id type='submit') UPDATE
+                        button#post-sumbit-btn.post-sumbit-btn.submit-start(data-action='blog-update' data-id=post.id type='submit')
+                            svg#submit-save(viewBox="0 0 20 20" class="icons")
+                                use(xlink:href='/dash/assets/images/sprite.svg#entypo-save' data-action='blog-update' data-id=post.id)  
+                            svg#submit-good.icon-hide(viewBox="0 0 20 20" class="icons")
+                                use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-up')
+                            svg#submit-error.icon-hide(viewBox="0 0 20 20" class="icons")
+                                use(xlink:href='/dash/assets/images/sprite.svg#entypo-thumbs-down')
                     else
                         button#post-sumbit-btn.post-sumbit-btn(data-action='blog-add' type='submit') ADD POST
                     

themes/dash/src/com/controllers/DashEntry.jsx

@@ -13,6 +13,9 @@ import * as Ease from '../tools/effects/Animate';
 import TextEffects from '../tools/effects/TextEffects';
 import EntryTasks from '../tasks/EntryTasks';
 import TextEditor from '../tools/utilities/TextEditor';
+import TinyDatePicker from 'tiny-date-picker';
+
+
 class Entry {
     //--------------------------
     // constructor
@@ -22,17 +25,26 @@ class Entry {
         this.uploadFiles;
         this.start();
         this.editor = new TextEditor();
+
+        TinyDatePicker(document.getElementById('entry-date'), {
+            mode: 'dp-below',
+            format(date) {
+                //return date;
+                return self.dateUtils.getDate('origin', date);
+            }
+        });
     }
     //--------------------------
     // methods
     //--------------------------
     start() {
+        let self = this;
         new Animate().object({
             targets: document.getElementById('loader'),
             duration: 300,
             opacity: 0,
             easing: 'easeInOutQuad',
-            complete: function() {
+            complete: function () {
                 document.getElementById('loader').style.display = 'none';
                 document.getElementById('loader').style.visibility = 'hidden';
                 new Animate().object({
@@ -40,15 +52,11 @@ class Entry {
                     duration: 10,
                     opacity: 1,
                     easing: 'easeInOutQuad',
-                    complete: function() {
+                    complete: function () {
-                        new TextEffects().scramble(document.getElementById('the-title'), 50, function() {
+                        if (document.getElementById('the-intro'))
-
+                            document.getElementById('the-intro').style.opacity = 1;
-                            if (document.getElementById('the-intro'))
+                        if (document.getElementById('blog-entry'))
-                                document.getElementById('the-intro').style.opacity = 1;
+                            document.getElementById('blog-entry').style.opacity = 1;
-                            if (document.getElementById('blog-entry'))
-                                document.getElementById('blog-entry').style.opacity = 1;
-                            //START SEcTION
-                        });
                     }
                 });
             }
@@ -58,10 +66,9 @@ class Entry {
             document.getElementById('featured-image-drop').addEventListener('dragover', this.handleDragOver, false);
             document.getElementById('featured-image-drop').addEventListener('drop', this.handleDrop, false);
             document.getElementById('featured-click').addEventListener('change', this.handleClicked, false);
-            
+
-            if(document.getElementById('new-upload-link'))
+            if (document.getElementById('new-upload-link')) {
-            {
+                document.getElementById('new-upload-link').addEventListener('click', e => {
-                document.getElementById('new-upload-link').addEventListener('click', e=>{
                     document.getElementById('featured-click').click();
                 })
             }
@@ -70,10 +77,9 @@ class Entry {
                 let edit = false;
                 if (f.target.getAttribute('data-action') == 'blog-update')
                     edit = true;
-                console.log('clicked')
                 new EntryTasks().submitPost(edit, Entry.uploadFiles).then((response) => {
                     let note = JSON.parse(response['response']['request'].response);
-                    console.log(note.message);
+                    self.editor.notify(note.message);
                 }).catch((err) => {
                     console.log(err)
                 });
@@ -101,8 +107,8 @@ class Entry {
             }
             var reader = new FileReader();
             // Closure to capture the file information.
-            reader.onload = (function(theFile) {
+            reader.onload = (function (theFile) {
-                return function(f) {
+                return function (f) {
                     // Render thumbnail.
                     var span = document.createElement('span');
                     span.innerHTML = [
@@ -135,8 +141,8 @@ class Entry {
             }
             var reader = new FileReader();
             // Closure to capture the file information.
-            reader.onload = (function(theFile) {
+            reader.onload = (function (theFile) {
-                return function(f) {
+                return function (f) {
                     // Render thumbnail.
                     var span = document.createElement('span');
                     span.innerHTML = [

themes/dash/src/com/tasks/EntryTasks.jsx

@@ -39,13 +39,12 @@ class EntryTasks {
             postData.append("title", document.getElementById('entry_title').value);
             postData.append('slug', new StringUtils().cleanString(document.getElementById('entry_title').value));
             postData.append("entry_plaintext", txt.value);
-            postData.append("created_date", document.getElementById('option-date').value);
+            postData.append("origin_date", document.getElementById('entry-date').value);
             postData.append("tags", document.getElementById('entry_tags').value);
             let postURL;
             let postEventType;
             if (edit) {
                 let postID = document.getElementById('post-sumbit-btn').getAttribute('data-id');
-                console.log("POST ID: "+postID);
                 postURL = "/api/blog/update/" + postID;
                 postEventType = DataEvent.POST_UPDATED;
                 

themes/dash/src/com/tools/events/DataEvent.jsx

@@ -11,6 +11,10 @@ export const PROJECT_UPDATED = 'projectUpdated';
 export const PROJECT_ADDED = 'projectAdded';
 export const PROJECTS_SORTED = 'projectsSorted';
 export const POST_IMAGE_ADDED = 'postImageAdded';
+export const POST_ERROR = 'postError';
+export const POST_ADDED = 'postAdded';
+export const POST_UPDATED = 'postUpdated';
+export const POST_DELETED = 'postImageAdded';
 
 class DataEvent
 {

themes/dash/src/com/tools/utilities/TextEditor.jsx

@@ -8,13 +8,14 @@ import DataUtils, {
 } from './DataUtils';
 import * as DataEvent from '../events/DataEvent';
 import DateUtils from './DateUtils';
-import TinyDatePicker from 'tiny-date-picker';
 import {
 
     position,
     offset
 } from 'caret-pos';
 
+import Animate from '../effects/Animate';
+
 class TextEditor {
 
     //--------------------------
@@ -28,14 +29,6 @@ class TextEditor {
         this.url = '';
         let self = this;
 
-        this.dp = TinyDatePicker('input');
-        TinyDatePicker(document.getElementById('option-date'), {
-            mode: 'dp-below',
-            format(date) {
-                //return date;
-                return self.dateUtils.getDate('origin', date);
-            }
-        });
         window.addEventListener("scroll", f => {
             var fixLimit = document.getElementById('header').offsetHeight + document.getElementById('entry-header').offsetHeight + document.getElementById('entry-feature').offsetHeight
             if (window.pageYOffset >= fixLimit) {
@@ -74,6 +67,24 @@ class TextEditor {
         position(document.getElementById('edit-text-code'), caret)
     }
 
+    notify(type) {
+        switch (type) {
+            case DataEvent.POST_UPDATED:
+                document.getElementById('submit-save').classList.add('icon-hide');
+                document.getElementById('submit-good').classList.remove('icon-hide');
+                document.getElementById('post-sumbit-btn').classList.remove('submit-start');
+                document.getElementById('post-sumbit-btn').classList.add('submit-cool');
+                setTimeout(f => {
+                    document.getElementById('submit-save').classList.remove('icon-hide');
+                    document.getElementById('submit-good').classList.add('icon-hide');
+                    document.getElementById('post-sumbit-btn').classList.add('submit-start');
+                    document.getElementById('post-sumbit-btn').classList.remove('submit-cool');
+                }, 2000);
+
+                break;
+        }
+    }
+
     //--------------------------
     // event handlers
     //--------------------------

themes/dash/src/styles/main/_colors.styl

@@ -5,4 +5,8 @@ $highlight = #cd898d;
 $white = #eee;
 $black = #32302f;
 
+//editor colors
+$eventCool = #65b16c
+$eventLame = #ce483b
+
 //Bulma overrides

themes/dash/src/styles/main/_editor-highlight.styl

@@ -3,7 +3,7 @@
     display block
     overflow-x auto
     padding 0.5em
-    background none
+    background $primary - 10%
 
 .hljs, .hljs-subst
     color #ebdbb2

themes/dash/src/styles/main/_editor.styl

@@ -1,5 +1,5 @@
 #edit-control
-    margin 10px 0 0 0
+    margin 10px
     top 1px
     padding 5px
     border-radius 5px
@@ -10,9 +10,28 @@
         margin 5px
 
     #post-sumbit-btn
+        object-transitions(0.3s)
         height 30px
-        background #65b16c
+        width 30px
-        color #65b16c - 30%
+        padding 5px 5px 1px 5px
+        border-radius 20px
+        display inline-block
+        vertical-align top
+        text-align center
+
+    .icon-hide
+        display none
+        visibility hidden
+
+    .submit-start
+        background $white
+        svg
+            fill $highlight
+
+    .submit-cool
+        background: $eventCool
+        svg
+            fill: $white
         // float right
 
     #option-date
@@ -63,245 +82,11 @@
         text-decoration line-through
         font-style italic
 
-// TINY DATE
+#edit-content-wrapper
-
+    width 98%
-.dp-modal
+    max-width 900px
-    position fixed
+    margin 0 auto
-    top 0
+    border-radius 5px
-    left 0
+    code 
-    right 0
+        border-radius: 5px
-    bottom 0
+    
-    //background rgba(255, 255, 255, 0.75)
-    background-opacity($primary - 70%, .75);
-    z-index 2000
-
-.dp
-    position relative
-    background $primary //#FFF
-    box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
-    line-height 1.4
-    border-radius 4px
-    max-height 400px
-    z-index 5000
-    padding-top 6px
-    overflow hidden
-    -webkit-tap-highlight-color transparent
-
-.dp:before
-    content ' '
-    height 6px
-    position absolute
-    top 0
-    left 0
-    right 0
-    background $highlight
-    //background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
-
-.dp-permanent .dp
-    padding-top 0
-    border 1px solid #EEE
-    box-shadow none
-
-.dp-permanent .dp:before
-    display none
-
-.dp-cal
-    min-height 300px
-
-.dp-below
-    position absolute
-    font-size 0.8em
-    width 400px
-    max-width 100vw
-
-.dp-permanent
-    position relative
-    font-size 0.8em
-    width 400px
-    max-width 100vw
-
-.dp-permanent .dp
-    z-index 0
-
-.dp-modal .dp
-    position absolute
-    top 50%
-    left 50%
-    max-width 600px
-    width calc(100% - 4em)
-    transform translate(-50%, -50%)
-    animation slide-up 0.3s forwards
-
-.dp-months
-    padding 24px
-
-.dp-years
-    box-sizing border-box
-    max-height 400px
-    padding 8px 0
-    overflow auto !important /* HACK for Chrome on Android */
-
-.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
-    box-sizing border-box
-    text-align center
-    text-decoration none
-    position relative
-    color $white
-    border-radius 2px
-    border 0
-    background transparent
-
-.dp-cal-header
-    position relative
-    text-align center
-    padding-bottom 16px
-    background $primary - 10%
-
-.dp-next, .dp-prev
-    position absolute
-    width 30px
-    height 30px
-    overflow hidden
-    top 14px
-    color $primary - 50%
-    border-radius 2px
-    border 0
-    background transparent
-
-.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
-    outline none
-    color inherit
-
-.dp-prev
-    left 24px
-
-.dp-next
-    right 24px
-
-.dp-prev:before, .dp-next:before
-    content ''
-    border 2px solid
-    width 10px
-    height 10px
-    display inline-block
-    transform rotate(-45deg)
-    transition border-color 0.2s
-    margin 9px 0 40px 4px
-
-.dp-prev:before
-    border-right 0
-    border-bottom 0
-
-.dp-next:before
-    border-left 0
-    border-top 0
-    margin-left 0
-    margin-right 4px
-
-.dp-cal-month, .dp-cal-year
-    display inline-block
-    font-size 1.4em
-    padding 16px 8px 8px
-    outline none
-
-.dp-cal-footer
-    text-align center
-    background $primary - 10%
-
-.dp-day-today:after
-    content ''
-    height 0
-    width 0
-    border 7px solid $highlight
-    border-bottom-color transparent
-    border-left-color transparent
-    position absolute
-    top 0
-    right 0
-
-.dp-close, .dp-clear, .dp-today
-    box-sizing border-box
-    display inline-block
-    width 33%
-    padding 8px
-    text-decoration none
-    color $primary - 50%
-    border 0
-    background transparent
-
-.dp-permanent .dp-close, .dp-permanent .dp-clear
-    display none
-
-.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
-    background $highlight
-    color $white
-
-@media screen and (min-device-width: 1200px)
-    .dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
-        background $highlight
-        color $white
-
-.dp-col-header, .dp-day
-    width 14.28571429%
-    display inline-block
-    padding 8px
-    text-align center
-
-.dp-col-header
-    color #AAA
-    text-transform uppercase
-    font-weight 300
-    font-size 0.8em
-    padding 8px 0
-
-.dp-month
-    width 33%
-    display inline-block
-    padding 8px
-
-.dp-year
-    display block
-    padding 8px 40px
-    width 100%
-
-.dp-edge-day
-    color #AAA
-
-.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
-    outline none
-    background $secondary + 10%
-    color $white
-
-.dp-selected:hover, .dp-selected:focus, .dp-selected
-    background $secondary
-    color $white
-
-.dp-day-disabled
-    background transparent
-    color #DDD
-
-.dp-day-disabled:focus, .dp-day-disabled:hover
-    background #DDD
-
-.dp-focuser
-    position absolute
-    z-index 0
-    top 50%
-    left 50%
-
-/* Responsive overrides */
-@media (max-width: 480px), (max-height: 480px)
-    .dp-modal .dp
-        font-size 0.9em
-        width auto
-        width 100%
-
-    .dp-day-of-week, .dp-day
-        padding 8px
-
-@keyframes slide-up
-    0%
-        transform translate(-50%, 100%)
-
-    100%
-        transform translate(-50%, -50%)

themes/dash/src/styles/main/_entries.styl

@@ -49,7 +49,7 @@
         width 100%
 
         #entry-header
-            width 100%
+            //width 100%
             max-width 900px
             margin 0 auto
             padding 0.75rem
@@ -68,8 +68,20 @@
                     background $primary - 4%
                     font-family 'Apercu'
                     width 100%
-                    height 150px
+                    height 115px
                     color $primary - 50%
+                #entry-date
+                    background $primary - 10%
+                    border-radius 0 3px 3px 0
+                    width: 105px
+                    font-family: 'Apercu'
+                    color: $highlight
+                label
+                    background: $primary - 15% 
+                    border-radius: 3px 0 0 3px
+                    display inline-block
+                    padding: 5px
+                    color $primary + 15%
 
                 #featured-click, #post-image
                     display none
@@ -120,3 +132,245 @@
                         word-wrap normal
                         white-space pre-wrap
                         line-break normal
+
+// TINY DATE
+.dp-modal
+    position fixed
+    top 0
+    left 0
+    right 0
+    bottom 0
+    // background rgba(255, 255, 255, 0.75)
+    background-opacity($primary - 70%, 0.75)
+    z-index 2000
+
+.dp
+    position relative
+    background $primary // #FFF
+    box-shadow 2px 2px 16px rgba(0, 0, 0, 0.25)
+    line-height 1.4
+    border-radius 4px
+    max-height 400px
+    z-index 5000
+    padding-top 6px
+    overflow hidden
+    -webkit-tap-highlight-color transparent
+
+.dp:before
+    content ' '
+    height 6px
+    position absolute
+    top 0
+    left 0
+    right 0
+    background $highlight
+    // background linear-gradient(-90deg, #3B99FC 0%, #8AEFC8 100%)
+
+.dp-permanent .dp
+    padding-top 0
+    border 1px solid #EEE
+    box-shadow none
+
+.dp-permanent .dp:before
+    display none
+
+.dp-cal
+    min-height 300px
+
+.dp-below
+    position absolute
+    font-size 0.8em
+    width 400px
+    max-width 100vw
+
+.dp-permanent
+    position relative
+    font-size 0.8em
+    width 400px
+    max-width 100vw
+
+.dp-permanent .dp
+    z-index 0
+
+.dp-modal .dp
+    position absolute
+    top 50%
+    left 50%
+    max-width 600px
+    width calc(100% - 4em)
+    transform translate(-50%, -50%)
+    animation slide-up 0.3s forwards
+
+.dp-months
+    padding 24px
+
+.dp-years
+    box-sizing border-box
+    max-height 400px
+    padding 8px 0
+    overflow auto !important /* HACK for Chrome on Android */
+
+.dp-cal-month, .dp-cal-year, .dp-day, .dp-month, .dp-year
+    box-sizing border-box
+    text-align center
+    text-decoration none
+    position relative
+    color $white
+    border-radius 2px
+    border 0
+    background transparent
+
+.dp-cal-header
+    position relative
+    text-align center
+    padding-bottom 16px
+    background $primary - 10%
+
+.dp-next, .dp-prev
+    position absolute
+    width 30px
+    height 30px
+    overflow hidden
+    top 14px
+    color $primary - 50%
+    border-radius 2px
+    border 0
+    background transparent
+
+.dp-next:focus, .dp-prev:focus, .dp-next:hover, .dp-prev:hover
+    outline none
+    color inherit
+
+.dp-prev
+    left 24px
+
+.dp-next
+    right 24px
+
+.dp-prev:before, .dp-next:before
+    content ''
+    border 2px solid
+    width 10px
+    height 10px
+    display inline-block
+    transform rotate(-45deg)
+    transition border-color 0.2s
+    margin 9px 0 40px 4px
+
+.dp-prev:before
+    border-right 0
+    border-bottom 0
+
+.dp-next:before
+    border-left 0
+    border-top 0
+    margin-left 0
+    margin-right 4px
+
+.dp-cal-month, .dp-cal-year
+    display inline-block
+    font-size 1.4em
+    padding 16px 8px 8px
+    outline none
+
+.dp-cal-footer
+    text-align center
+    background $primary - 10%
+
+.dp-day-today:after
+    content ''
+    height 0
+    width 0
+    border 7px solid $highlight
+    border-bottom-color transparent
+    border-left-color transparent
+    position absolute
+    top 0
+    right 0
+
+.dp-close, .dp-clear, .dp-today
+    box-sizing border-box
+    display inline-block
+    width 33%
+    padding 8px
+    text-decoration none
+    color $primary - 50%
+    border 0
+    background transparent
+
+.dp-permanent .dp-close, .dp-permanent .dp-clear
+    display none
+
+.dp-close:active, .dp-clear:active, .dp-today:active, .dp-next:active, .dp-prev:active, .dp-cal-month:active, .dp-cal-year:active
+    background $highlight
+    color $white
+
+@media screen and (min-device-width: 1200px)
+    .dp-close:hover, .dp-close:focus, .dp-clear:hover, .dp-clear:focus, .dp-today:hover, .dp-today:focus, .dp-next:hover, .dp-next:focus, .dp-prev:hover, .dp-prev:focus, .dp-cal-month:focus, .dp-cal-month:hover, .dp-cal-year:hover, .dp-cal-year:focus
+        background $highlight
+        color $white
+
+.dp-col-header, .dp-day
+    width 14.28571429%
+    display inline-block
+    padding 8px
+    text-align center
+
+.dp-col-header
+    color #AAA
+    text-transform uppercase
+    font-weight 300
+    font-size 0.8em
+    padding 8px 0
+
+.dp-month
+    width 33%
+    display inline-block
+    padding 8px
+
+.dp-year
+    display block
+    padding 8px 40px
+    width 100%
+
+.dp-edge-day
+    color #AAA
+
+.dp-day:hover, .dp-month:hover, .dp-year:hover, .dp-current:focus, .dp-current, .dp-day:focus, .dp-month:focus, .dp-year:focus
+    outline none
+    background $secondary + 10%
+    color $white
+
+.dp-selected:hover, .dp-selected:focus, .dp-selected
+    background $secondary
+    color $white
+
+.dp-day-disabled
+    background transparent
+    color #DDD
+
+.dp-day-disabled:focus, .dp-day-disabled:hover
+    background #DDD
+
+.dp-focuser
+    position absolute
+    z-index 0
+    top 50%
+    left 50%
+
+/* Responsive overrides */
+@media (max-width: 480px), (max-height: 480px)
+    .dp-modal .dp
+        font-size 0.9em
+        width auto
+        width 100%
+
+    .dp-day-of-week, .dp-day
+        padding 8px
+
+@keyframes slide-up
+    0%
+        transform translate(-50%, 100%)
+
+    100%
+        transform translate(-50%, -50%)