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

This commit is contained in:
Ro 2018-11-05 17:32:33 -05:00
parent 47f76e65fc
commit 2b26d3b525
13 changed files with 1208 additions and 1070 deletions

View file

@ -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 {

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -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

View file

@ -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() {
new TextEffects().scramble(document.getElementById('the-title'), 50, function() {
complete: function () {
if (document.getElementById('the-intro'))
document.getElementById('the-intro').style.opacity = 1;
if (document.getElementById('blog-entry'))
document.getElementById('blog-entry').style.opacity = 1;
//START SEcTION
});
}
});
}
@ -59,9 +67,8 @@ class Entry {
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'))
{
document.getElementById('new-upload-link').addEventListener('click', e=>{
if (document.getElementById('new-upload-link')) {
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) {
return function(f) {
reader.onload = (function (theFile) {
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) {
return function(f) {
reader.onload = (function (theFile) {
return function (f) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = [

View file

@ -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;

View file

@ -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
{

View file

@ -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
//--------------------------

View file

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

View file

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

View file

@ -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
color #65b16c - 30%
width 30px
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%
max-width 900px
margin 0 auto
border-radius 5px
code
border-radius: 5px
.dp-modal
position fixed
top 0
left 0
right 0
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%)

View file

@ -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%)