You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Fipamo/src/styles/main/_posts.sass

504 lines
17 KiB
Sass

#post-index
width: 100%
max-width: 900px
margin: 0 auto
#post-index-wrapper
//padding: 0.75rem
overflow: hidden
#post-index-header
margin: 10px 0 0 0
#post-index-header-left
text-transform: capitalize
display: inline-block
width: 50%
color: $white
font-size: 3em
#post-index-header-right
text-align: right
display: inline-block
width: 50%
a
button
color: $white
border-radius: 3px
margin-left: 10px
width: 55px
svg
//@include object-transitions(0.1s)
width: 20px
height: 17px
fill: $white
.current-filter
color: $highlight
text-decoration-color: $secondary
#posts-list
margin: 20px 0 0 0
a.page-link
background: $white
display: inline-block
vertical-align: top
width: 100%
text-decoration: none
margin: 0 0 20px 0
border-radius: 3px
overflow: hidden
color: color.adjust($primary, $lightness: -60%)
label
font-size: 2em
font-weight: 500
padding: 10px
display: inline-block
vertical-align: top
width: 100%
div.page-bg
width: 100%
height: 350px
background-color: $highlight
position: relative
label
font-size: 2em
font-weight: 700
color: $white
padding: 5px
vertical-align: top
display: inline-block
word-wrap: break-word
width: 100%
text-align: center
position: relative
top: 35%
@include text-drop-shadow($black, 1, 2px, 2px, 0)
@include text-drop-shadow($black, 1, 2px, 2px, 0)
#meta
width: 100%
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%)
border-radius: 3px
margin: auto
bottom: 0
position: absolute
padding: 0 0 20px 0
#options
width: 100%
bottom: 0
position: absolute
#option-left
display: inline-block
vertical-align: top
width: 50%
position: relative
background: none
button
border-radius: 3px
background: $primary
margin: 0 0 10px 10px
svg
//@include object-transitions(0.1s)
width: 40px
height: 20px
fill: $secondary
.item-options
border-radius: 3px
margin: 5px
display: inline-block
button[data-active='false']
background: $primary
svg
fill: $secondary
button[data-active='true']
background: $tertiary
svg
fill: $primary
#option-right
display: inline-block
width: 50%
text-align: right
span
font-weight: bold
display: block
background: $white
color: $primary
border-radius: 3px
font-size: .6em
text-align: center
position: relative
padding: 5px
float: right
margin: 0 10px 0 0
bottom: -15px
p
padding: 5px 10px 5px 10px
font-size: 1.2em
font-weight: 400
.paginate
width: 260px
display: block
margin: 0 auto
a
display: inline-block
vertical-align: top
span.count
text-align: center
padding: 5px
margin-top: -2px
display: inline-block
width: 190px
font-size: 1.5em
color: $tertiary
#post-edit-index
width: 100%
overflow: hidden
#post-edit-index-wrapper
width: 100%
#post-header
// width 100%
background: $highlight
#post-header-wrapper
max-width: 900px
margin: 0 auto
padding: 0.75rem
label
color: $white
font-size: 0.9em
font-family: $baseType
font-weight: 600
span
color: $primary
font-size: 0.9em
font-weight: 600
text-transform: uppercase
float: right
#post-title
#post_title
background: $white
font-family: $baseType
width: 97.6%
height: 80px
font-size: 2em
color: $primary
padding: 5px
margin: 0 0 5px 0
#calendar-icon
background: color.adjust($primary, $lightness: -15%)
border-radius: 3px 0 0 3px
display: inline-block
padding: 5.2px
color: $secondary
#layouts
select
background: $primary
color: $secondary
border-radius: 3px
border-color: $primary
margin: 0 0 10px 0
width: 100%
height: 45px
padding: 5px
font-size: 1.5em
#post-meta
#post_tags
background: $white
font-family: $baseType
width: 97.6%
height: 80px
color: $primary
padding: 5px
margin: 0 0 5px 0
#post-options
display: inline-block
vertical-align: top
width: 100%
padding: 0
margin: 0 0 10px 0
button:nth-child(1)
border-radius: 3px 0 0 3px
button:nth-child(4)
border-radius: 0 3px 3px 0
a
button
border-radius: 0 3px 3px 0 !important
button
width: 25%
height: 45px
@include object-transitions(0.3s)
@include object-transitions(0.3s)
margin: 0
border-radius: 0
display: inline-block
vertical-align: top
text-align: center
button[data-active='false']
background: $primary
svg
fill: $secondary
button[data-active='true']
background: $tertiary
svg
fill: $primary
#page-files-upload, #post-image-upload
display: none
#post-feature
width: 100%
#page-file-manager
background: $tertiary
width: 100%
min-height: 300px
#page-file-wrapper
width: 100%
max-width: 900px
padding: 10px
margin: 0 auto
font-weight: bold
font-color: $primary
font-size: 1em
#page-file-drop
display: flex
align-items: center
justify-content: center
width: 100%
min-height: 100px
background: $white
color: $primary
vertical-align: middle
border-radius: 5px
margin: 0 0 10px 0
label
cursor: pointer
font-weight: 600px
text-transform: capitalize
img
width: 100%
margin: 0
padding: 0
#page-images-list
padding: 10px 0 0 0
.img-item
height: 150px
width: 23.8%
border-radius: 3px
margin: 0 10px 10px 0
display: inline-block
cursor: pointer
#featured-new-image-btn
position: absolute
margin: 20px
#new-feature-upload
padding-top: 4px
background: $white
svg
fill: $highlight
#edit-post
width: 100%
max-width: 880px
margin: 0 auto
#edit-post-wrapper
width: 100%
max-width: 900px
border-radius: 5px
//background $primary - 10%
//margin: 10px 0 50px 0
position: relative
//editor sometimes scrolls throwing it all out of wack
//turning of scrolling keeps it aligned
textarea:focus
outline: none
border-color: $highlight
#edit
// overflow: hidden !important
#edit, #highlight
/* Both elements need the same text and space styling so they are directly on top of each other */
//margin: 10px
//padding: 10px
border: 0
width: 100%
min-height: 300px
height: auto
position: absolute
top: 0
left: 0
overflow: auto
word-wrap: normal
white-space: pre-wrap
line-break: normal
#highlight-content
word-wrap: normal
white-space: pre-wrap
line-break: normal
#edit, #highlight, #hightlight *
font-size: 1.2em
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace
line-height: 22pt
#edit
z-index: 1
color: transparent
background: transparent
caret-color: $highlight
#highlight
z-index: 0
//pre
margin: 0
code
font-family: $monoType
padding: 5px
border-radius: 5px
line-height: 1.6em
font-size: 1.25em
color: $editorPrimary
word-wrap: normal
white-space: pre-wrap
line-break: normal
-webkit-line-break: normal
-o-line-break: normal
-moz-line-break: normal
display: inline-block
width: 100%
max-width: 900px
min-height: 200px
caret-color: $highlight
//Responsive
@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-meta
#edit-control
max-width: 100%
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-header
#post-index-header-left
font-size: 1.35em
width: 30%
#post-index-header-right
width: 70%
vertical-align: top
#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-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%