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

sql-version-freeze
Ro 6 years ago
parent 47f76e65fc
commit 2b26d3b525

@ -2189,7 +2189,6 @@ select {
width: 100%; width: 100%;
} }
#entries-edit-index #entries-edit-index-wrapper #entry-header { #entries-edit-index #entries-edit-index-wrapper #entry-header {
width: 100%;
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
padding: 0.75rem; padding: 0.75rem;
@ -2206,9 +2205,23 @@ select {
background: #91867a; background: #91867a;
font-family: 'Apercu'; font-family: 'Apercu';
width: 100%; width: 100%;
height: 150px; height: 115px;
color: #4c463f; 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 #featured-click,
#entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image { #entries-edit-index #entries-edit-index-wrapper #entry-header #entry-meta #post-image {
display: none; display: none;
@ -2257,75 +2270,6 @@ select {
white-space: pre-wrap; white-space: pre-wrap;
line-break: normal; 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 { .dp-modal {
position: fixed; position: fixed;
top: 0; top: 0;
@ -2635,11 +2579,113 @@ select {
transform: translate(-50%, -50%); 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 { .hljs {
display: block; display: block;
overflow-x: auto; overflow-x: auto;
padding: 0.5em; padding: 0.5em;
background: none; background: #897e71;
} }
.hljs, .hljs,
.hljs-subst { .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

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

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

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

@ -11,6 +11,10 @@ export const PROJECT_UPDATED = 'projectUpdated';
export const PROJECT_ADDED = 'projectAdded'; export const PROJECT_ADDED = 'projectAdded';
export const PROJECTS_SORTED = 'projectsSorted'; export const PROJECTS_SORTED = 'projectsSorted';
export const POST_IMAGE_ADDED = 'postImageAdded'; 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 class DataEvent
{ {

@ -8,13 +8,14 @@ import DataUtils, {
} from './DataUtils'; } from './DataUtils';
import * as DataEvent from '../events/DataEvent'; import * as DataEvent from '../events/DataEvent';
import DateUtils from './DateUtils'; import DateUtils from './DateUtils';
import TinyDatePicker from 'tiny-date-picker';
import { import {
position, position,
offset offset
} from 'caret-pos'; } from 'caret-pos';
import Animate from '../effects/Animate';
class TextEditor { class TextEditor {
//-------------------------- //--------------------------
@ -28,14 +29,6 @@ class TextEditor {
this.url = ''; this.url = '';
let self = this; 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 => { window.addEventListener("scroll", f => {
var fixLimit = document.getElementById('header').offsetHeight + document.getElementById('entry-header').offsetHeight + document.getElementById('entry-feature').offsetHeight var fixLimit = document.getElementById('header').offsetHeight + document.getElementById('entry-header').offsetHeight + document.getElementById('entry-feature').offsetHeight
if (window.pageYOffset >= fixLimit) { if (window.pageYOffset >= fixLimit) {
@ -74,6 +67,24 @@ class TextEditor {
position(document.getElementById('edit-text-code'), caret) 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 // event handlers
//-------------------------- //--------------------------

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

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

@ -1,5 +1,5 @@
#edit-control #edit-control
margin 10px 0 0 0 margin 10px
top 1px top 1px
padding 5px padding 5px
border-radius 5px border-radius 5px
@ -10,9 +10,28 @@
margin 5px margin 5px
#post-sumbit-btn #post-sumbit-btn
object-transitions(0.3s)
height 30px 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 // float right
#option-date #option-date
@ -63,245 +82,11 @@
text-decoration line-through text-decoration line-through
font-style italic 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%)

@ -49,7 +49,7 @@
width 100% width 100%
#entry-header #entry-header
width 100% //width 100%
max-width 900px max-width 900px
margin 0 auto margin 0 auto
padding 0.75rem padding 0.75rem
@ -68,8 +68,20 @@
background $primary - 4% background $primary - 4%
font-family 'Apercu' font-family 'Apercu'
width 100% width 100%
height 150px height 115px
color $primary - 50% 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 #featured-click, #post-image
display none display none
@ -120,3 +132,245 @@
word-wrap normal word-wrap normal
white-space pre-wrap white-space pre-wrap
line-break normal 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%)

Loading…
Cancel
Save