forked from projects/fipamo
responsive style for post editor, navigation, and settingsk
This commit is contained in:
Ro
parent
10946d5326
commit
ee82fcaa20
9 changed files with 482 additions and 269 deletions
|
|
@ -1884,7 +1884,7 @@ svg.icons {
|
|||
display: none;
|
||||
}
|
||||
#settings-index {
|
||||
width: 100%;
|
||||
width: 94%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -2047,6 +2047,30 @@ svg.icons {
|
|||
font-size: 0.8em;
|
||||
margin: 0 0 0 10px;
|
||||
}
|
||||
@media only screen and (max-width: 375px) {
|
||||
#nav-index #nav-index-wrapper #nav-pages .nav-item {
|
||||
width: 94.5%;
|
||||
font-size: 1em;
|
||||
}
|
||||
#nav-index #nav-index-wrapper #nav-pages .nav-item label {
|
||||
width: 47%;
|
||||
vertical-align: top;
|
||||
margin-top: 0px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 320px) {
|
||||
#nav-index #nav-index-wrapper #nav-pages .nav-item {
|
||||
width: 94.5%;
|
||||
font-size: 1em;
|
||||
}
|
||||
#nav-index #nav-index-wrapper #nav-pages .nav-item label {
|
||||
width: 37%;
|
||||
vertical-align: top;
|
||||
margin-top: 0px;
|
||||
line-height: 1em;
|
||||
}
|
||||
}
|
||||
/**
|
||||
-------------------------------
|
||||
-- Forms
|
||||
|
|
@ -2184,6 +2208,7 @@ select {
|
|||
}
|
||||
#post-edit-index {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper {
|
||||
width: 100%;
|
||||
|
|
@ -2206,20 +2231,19 @@ select {
|
|||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
|
||||
background: #32414e;
|
||||
border-radius: 0 3px 3px 0;
|
||||
width: 105px;
|
||||
width: 39.5%;
|
||||
font-family: 'Apercu';
|
||||
color: #fc6399;
|
||||
height: 30px;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title label {
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #calendar-icon {
|
||||
background: #2f3d4a;
|
||||
border-radius: 3px 0 0 3px;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
padding: 2.9px;
|
||||
color: #b2cce5;
|
||||
line-height: 30px;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
|
||||
display: inline-block;
|
||||
|
|
@ -2333,6 +2357,84 @@ select {
|
|||
width: 100%;
|
||||
max-width: 900px;
|
||||
}
|
||||
@media only screen and (max-width: 800px) {
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
|
||||
width: 37.6%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
|
||||
width: 43.1%;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control {
|
||||
max-width: 100%;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button {
|
||||
width: 9.91%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
|
||||
width: 42%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
#post-index #post-index-wrapper #post-index-menu a {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
#post-index #post-index-wrapper #post-index-menu a label {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
|
||||
margin: 5px 0 0 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
|
||||
width: 89.2%;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button {
|
||||
width: 9.91%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 320px) {
|
||||
#post-index #post-index-wrapper #post-index-menu a {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
#post-index #post-index-wrapper #post-index-menu a label {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post_title {
|
||||
width: 96.4%;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-options {
|
||||
margin: 5px 0 0 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-title #post-date {
|
||||
width: 83.1%;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #post_tags {
|
||||
width: 96.4%;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control .content-editor-btn-icon svg.icons {
|
||||
width: 20px;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control .post-sumbit-btn svg.icons {
|
||||
width: 20px;
|
||||
}
|
||||
#post-edit-index #post-edit-index-wrapper #post-header #post-meta #edit-control button {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
/**
|
||||
-------------------------------
|
||||
-- Editor
|
||||
-------------------------------
|
||||
* */
|
||||
.dp-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -2378,7 +2480,7 @@ select {
|
|||
position: absolute;
|
||||
font-size: 0.8em;
|
||||
width: 400px;
|
||||
max-width: 100vw;
|
||||
max-width: 90vw;
|
||||
}
|
||||
.dp-permanent {
|
||||
position: relative;
|
||||
|
|
@ -2576,14 +2678,14 @@ select {
|
|||
.dp-month:focus,
|
||||
.dp-year:focus {
|
||||
outline: none;
|
||||
background: #bad1e8;
|
||||
background: #212b34;
|
||||
color: #f2f1ef;
|
||||
}
|
||||
.dp-selected:hover,
|
||||
.dp-selected:focus,
|
||||
.dp-selected {
|
||||
background: #b2cce5;
|
||||
color: #f2f1ef;
|
||||
background: #fc6399;
|
||||
color: #161d23;
|
||||
}
|
||||
.dp-day-disabled {
|
||||
background: transparent;
|
||||
|
|
@ -2610,15 +2712,6 @@ select {
|
|||
padding: 8px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px) {
|
||||
#post-index #post-index-wrapper #post-index-menu a {
|
||||
font-size: 0.95em;
|
||||
}
|
||||
#post-index #post-index-wrapper #post-index-menu a label {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes slide-up {
|
||||
0% {
|
||||
transform: translate(-50%, 100%);
|
||||
|
|
@ -2651,11 +2744,6 @@ select {
|
|||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
/**
|
||||
-------------------------------
|
||||
-- Editor
|
||||
-------------------------------
|
||||
* */
|
||||
#edit-control {
|
||||
top: 1px;
|
||||
border-radius: 3px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
themes/dash/assets/js/dash.min.js
vendored
2
themes/dash/assets/js/dash.min.js
vendored
|
|
@ -9020,7 +9020,7 @@ var parent = module.bundle.parent;
|
|||
if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
|
||||
var hostname = "" || location.hostname;
|
||||
var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
|
||||
var ws = new WebSocket(protocol + '://' + hostname + ':' + "56361" + '/');
|
||||
var ws = new WebSocket(protocol + '://' + hostname + ':' + "55275" + '/');
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
var data = JSON.parse(event.data);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,9 @@ block main-content
|
|||
#post-title.column
|
||||
textarea(id="post_title" type='text', name='post_title' class='post-edit', placeholder='title', required, autofocus)
|
||||
=post_title
|
||||
label Date Posted
|
||||
#calendar-icon
|
||||
svg(viewBox="0 0 20 20" class="icons")
|
||||
use(xlink:href='/dash/assets/images/sprite.svg#entypo-calendar')
|
||||
input(id="post-date" type="text" value=post_date)
|
||||
#post-options
|
||||
button#option-page.option-inactive.post-option-btn(data-active= status[0])
|
||||
|
|
|
|||
|
|
@ -70,5 +70,6 @@
|
|||
-- Editor
|
||||
-------------------------------
|
||||
* */
|
||||
@import 'main/_calendar'
|
||||
@import 'main/_editor'
|
||||
@import 'main/_editor-highlight'
|
||||
|
|
|
|||
245
themes/dash/src/styles/main/_calendar.styl
Normal file
245
themes/dash/src/styles/main/_calendar.styl
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
// 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 90vw
|
||||
|
||||
.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 $primary - 40%
|
||||
color $white
|
||||
|
||||
.dp-selected:hover, .dp-selected:focus, .dp-selected
|
||||
background $highlight
|
||||
color $primary - 60%
|
||||
|
||||
.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
|
||||
-------------------------------
|
||||
* */
|
||||
@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%)
|
||||
|
|
@ -32,3 +32,31 @@
|
|||
button
|
||||
font-size 0.8em
|
||||
margin 0 0 0 10px
|
||||
|
||||
@media only screen and (max-width: 375px)
|
||||
#nav-index
|
||||
#nav-index-wrapper
|
||||
#nav-pages
|
||||
.nav-item
|
||||
width 94.5%
|
||||
font-size 1em
|
||||
|
||||
label
|
||||
width 47%
|
||||
vertical-align top
|
||||
margin-top 0px
|
||||
line-height 1em
|
||||
|
||||
@media only screen and (max-width: 320px)
|
||||
#nav-index
|
||||
#nav-index-wrapper
|
||||
#nav-pages
|
||||
.nav-item
|
||||
width 94.5%
|
||||
font-size 1em
|
||||
|
||||
label
|
||||
width 37%
|
||||
vertical-align top
|
||||
margin-top 0px
|
||||
line-height 1em
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@
|
|||
|
||||
#post-edit-index
|
||||
width 100%
|
||||
overflow hidden
|
||||
|
||||
#post-edit-index-wrapper
|
||||
width 100%
|
||||
|
|
@ -93,20 +94,19 @@
|
|||
#post-date
|
||||
background $primary - 10%
|
||||
border-radius 0 3px 3px 0
|
||||
width 105px
|
||||
width 39.5%
|
||||
font-family 'Apercu'
|
||||
color $highlight
|
||||
height 30px
|
||||
vertical-align top
|
||||
text-align center
|
||||
|
||||
label
|
||||
#calendar-icon
|
||||
background $primary - 15%
|
||||
border-radius 3px 0 0 3px
|
||||
display inline-block
|
||||
padding 5px
|
||||
padding 2.9px
|
||||
color $secondary
|
||||
line-height 30px
|
||||
|
||||
#post-options
|
||||
display inline-block
|
||||
|
|
@ -218,251 +218,41 @@
|
|||
width 100%
|
||||
max-width 900px
|
||||
|
||||
// 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
|
||||
-------------------------------
|
||||
* */
|
||||
@media (max-width: 480px), (max-height: 480px)
|
||||
.dp-modal .dp
|
||||
font-size 0.9em
|
||||
width auto
|
||||
width 100%
|
||||
@media only screen and (max-width: 800px)
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-date
|
||||
width 37.6%
|
||||
|
||||
.dp-day-of-week, .dp-day
|
||||
padding 8px
|
||||
@media only screen and (max-width: 768px)
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-date
|
||||
width 43.1%
|
||||
|
||||
@keyframes slide-up
|
||||
0%
|
||||
transform translate(-50%, 100%)
|
||||
#post-meta
|
||||
#edit-control
|
||||
max-width 100%
|
||||
|
||||
100%
|
||||
transform translate(-50%, -50%)
|
||||
button
|
||||
width 9.91%
|
||||
|
||||
@media only screen and (max-width: 640px)
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-date
|
||||
width 42%
|
||||
|
||||
@media only screen and (max-width: 480px)
|
||||
#post-index
|
||||
|
|
@ -474,3 +264,62 @@
|
|||
label
|
||||
display none
|
||||
visibility hidden
|
||||
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post-options
|
||||
margin 5px 0 0 0
|
||||
width 100%
|
||||
padding 0
|
||||
|
||||
#post-date
|
||||
width 89.2%
|
||||
|
||||
#post-meta
|
||||
#edit-control
|
||||
button
|
||||
width 9.91%
|
||||
|
||||
@media only screen and (max-width: 320px)
|
||||
#post-index
|
||||
#post-index-wrapper
|
||||
#post-index-menu
|
||||
a
|
||||
font-size 0.95em
|
||||
|
||||
label
|
||||
display none
|
||||
visibility hidden
|
||||
|
||||
#post-edit-index
|
||||
#post-edit-index-wrapper
|
||||
#post-header
|
||||
#post-title
|
||||
#post_title
|
||||
width 96.4%
|
||||
|
||||
#post-options
|
||||
margin 5px 0 0 0
|
||||
width 100%
|
||||
padding 0
|
||||
|
||||
#post-date
|
||||
width 83.1%
|
||||
|
||||
#post-meta
|
||||
#post_tags
|
||||
width 96.4%
|
||||
|
||||
#edit-control
|
||||
.content-editor-btn-icon
|
||||
svg.icons
|
||||
width 20px
|
||||
|
||||
.post-sumbit-btn
|
||||
svg.icons
|
||||
width 20px
|
||||
|
||||
button
|
||||
width 10%
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
display none
|
||||
|
||||
#settings-index
|
||||
width 100%
|
||||
width 94%
|
||||
max-width 900px
|
||||
margin 0 auto
|
||||
|
||||
|
|
@ -131,4 +131,4 @@
|
|||
|
||||
div[data-enabled='false']
|
||||
display none
|
||||
visibility hidden
|
||||
visibility hidden
|
||||
Loading…
Reference in a new issue