Files
pillar/src/styles/blog.sass
Pablo Vazquez d99ddca410 Split base styles into base.css
That way we can load this css in other projects to bring the basic stuff
such as normalize, navbar, notifications, custom scrollbars, and so on.
2016-10-17 16:17:23 +02:00

637 lines
11 KiB
Sass

@import _normalize
@import _config
@import _utils
@import _comments
@import _error
@import _search
#blog_container
margin: 0
padding:
top: 15px
bottom: 15px
display: flex
justify-content: center
+media-xs
flex-direction: column
padding-top: 0
#blog_post-edit-form
padding: 20px
.form-group
position: relative
margin: 0 auto 30px auto
font-family: $font-body
input, textarea, select
+input-generic
&#fileupload
color: $color-info
&.tags .select2-container
.select2-selection
+input-generic
select
text-transform: capitalize
label
+label-generic
text-transform: capitalize
&.error
color: $color-danger
background-color: $color-background-light
padding: 10px 15px
border: thin solid lighten($color-danger, 10%)
border-top: 2px solid $color-danger
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
label
color: $color-danger
font-weight: 500
&.file
background-color: $color-background-light
padding: 10px 15px
border: thin solid $color-background
border-top: 2px solid $color-info
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
.form-upload-progress
.form-upload-progress-bar
margin-top: 5px
background-color: $color-success
height: 5px
min-width: 0
border-radius: 3px
.form-group
.node-preview-thumbnail
display: block
&.attachments
+clearfix
.form-control
padding: 0
margin: 0
border: none
list-style-type: none
+clearfix
label[for^='attachments-']
margin-top: 15px
font-weight: 400
div[id^='attachments-']
margin-bottom: 15px
border-top: thin solid $color-text-dark-hint
.form-group.description,
.form-group.summary,
.form-group.content
position: relative
textarea
width: 100%
min-height: 220px
line-height: 1.5em
border: 1px solid $color-background-dark
border-radius: 3px
margin: 0 auto 10px auto
padding: 10px
color: $color-text-dark
transition: all 300ms ease-in-out
resize: vertical
&:focus
border: 1px solid $color-info
outline: none
&.field-error
border-color: $color-danger
.md-preview-loading
position: absolute
left: 85px
padding-top: 5px
font-size: .9em
color: $color-text-dark-secondary
display: none
.node-edit-form-md-preview
+markdown-preview-container
margin:
left: -20px
right: -20px
padding:
top: 20px
left: 0
right: 0
&:before
content: 'Live Preview'
position: absolute
top: -25px
left: 20px
font-size: .7em
color: $color-text-dark-secondary
transition: color 150ms ease-in-out
&:after
content: 'Markdown Supported'
position: absolute
top: -25px
right: 20px
font-size: .7em
color: $color-text-dark-hint
transition: color 150ms ease-in-out
.node-edit-form-md-preview:empty
color: transparent
margin: 0 auto
padding: 0 10px
&:before, &:after
content: ''
color: transparent
#node-edit-form-md-preview
padding: 20px
&.post-create
flex-direction: row-reverse
#blog_post-create-container,
#blog_post-edit-container
padding: 25px
#blog_index-container,
#blog_post-container,
#blog_post-create-container,
#blog_post-edit-container
+container-box
width: 75%
+media-xs
border-radius: 0
width: 100%
clear: both
display: block
+media-sm
width: 60%
+media-md
width: 70%
+media-lg
width: 75%
.blog_index-header
width: 100%
overflow: hidden
position: relative
display: block
border-top-left-radius: 3px
border-top-right-radius: 3px
img
width: 100%
.blog_index-item
margin: 0 auto 15px auto
&:hover
.item-info a
color: $color-primary
.item-picture
position: relative
width: 100%
max-height: 350px
min-height: 200px
height: auto
overflow: hidden
border-top-left-radius: 3px
border-top-right-radius: 3px
+clearfix
img
+position-center-translate
width: 100%
border-top-left-radius: 3px
border-top-right-radius: 3px
+media-xs
min-height: 150px
+media-sm
min-height: 150px
+media-md
min-height: 250px
+media-lg
min-height: 250px
.item-title
display: block
font:
family: $font-body
size: 2em
weight: 400
padding: 25px 25px 10px 25px
.item-info
color: $color-text-dark-secondary
font-size: 1em
padding:
left: 25px
right: 25px
a
color: $color-text-dark-secondary
&:hover
color: $color-primary
.item-content
+node-details-description
padding: 35px 5px 35px 5px
font-size: 1.3em
+media-xs
padding:
left: 0
right: 0
.item-meta
color: $color-text-dark-secondary
padding:
left: 25px
right: 25px
+media-xs
padding:
left: 10px
right: 10px
.button-create, .button-edit
position: absolute
z-index: 2
top: 20px
right: 20px
+button-rounded-filled($color-success, 6px)
.button-edit
right: 170px
top: 15px
.item-picture+.button-back+.button-edit
right: 20px
top: 20px
#comments-container
padding:
left: 20px
right: 20px
max-width: 680px
margin: 0 auto
+media-lg
padding:
left: 0
right: 0
.comment-reply-form
+media-xs
padding:
left: 0
#blog_post-edit-form
padding: 0
.form-group
label
text-transform: capitalize
.form-group.content
.form-control
min-height: 350px
.form-group.url
label
text-transform: uppercase
.form-group.picture
+text-overflow-ellipsis
img
display: block
max-width: 100%
a
display: block
padding: 10px 0
text-align: right
.original a
color: $color-info
.delete a
color: $color-danger
.form-upload-file-meta
width: initial
#blog_post-edit-title
padding: 0
color: $color-text
font:
size: 1.8em
weight: 300
margin: 0 20px 15px 0
#blog_index-sidebar
width: 25%
padding: 0 15px
+media-xs
width: 100%
clear: both
display: block
margin-top: 25px
+media-sm
width: 40%
+media-md
width: 30%
+media-lg
width: 25%
.button-create
display: block
width: 100%
+button-rounded($color-success, 6px)
margin: 0
.button-back
display: block
width: 100%
+button-rounded($color-info, 6px)
margin: 15px 0 0 0
#blog_post-edit-form
.form-group
.form-control
background-color: white
.blog_index-sidebar,
.blog_project-sidebar
+container-box
background-color: lighten($color-background, 5%)
padding: 20px
.blog_project-card
position: relative
width: 100%
border-radius: 3px
overflow: hidden
background-color: white
color: lighten($color-text, 10%)
box-shadow: 0 0 30px rgba(black, .2)
margin:
top: 0
bottom: 15px
left: auto
right: auto
a.item-header
position: relative
width: 100%
height: 100px
display: block
background-size: 100% 100%
overflow: hidden
.overlay
z-index: 1
width: 100%
height: 100px
@include overlay(transparent, 0%, white, 100%)
img.background
width: 100%
// We can't have nice things because of Edge
// filter: blur(5px)
transform: scale(1.4)
.card-thumbnail
position: absolute
z-index: 2
height: 90px
width: 90px
display: block
top: 35px
left: 50%
transform: translateX(-50%)
background-color: white
border-radius: 3px
overflow: hidden
&:hover
img.thumb
opacity: .9
img.thumb
width: 100%
border-radius: 3px
transition: opacity 150ms ease-in-out
+position-center-translate
.item-info
padding: 10px 20px
background-color: white
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
a.item-title
display: inline-block
width: 100%
padding: 30px 0 15px 0
color: $color-text-dark
text-align: center
font:
size: 1.6em
weight: 300
transition: color 150ms ease-in-out
&:hover
text-decoration: none
color: $color-primary
#blog_post-container
.button-create
+button-rounded($color-success, 6px)
.button-back
position: absolute
top: 15px
right: 15px
z-index: 2
+button-rounded-filled($color-info, 6px)
.button-create, .button-edit
position: absolute
z-index: 2
top: 15px
right: 15px
+button-rounded-filled($color-success, 6px)
.button-edit
right: 170px
top: 15px
.button-back+.button-edit
right: 15px
top: 15px
#blog_container
&.cloud-blog
#blog_index-container,
#blog_post-container,
#blog_post-create-container,
#blog_post-edit-container
width: 90%
padding: 25px 30px 20px 30px
#blog_index-container+#blog_index-sidebar,
#blog_post-container+#blog_index-sidebar
display: none
&.cloud-blog #blog_index-container,
&.cloud-blog #blog_post-container,
#blog_index-container, #blog_post-container
padding: 0 0 50px 0
+media-sm
width: 100%
padding: 25px 20px 20px 20px
+media-xs
width: 100%
padding: 0 0 20px 0
.blog_index-item
padding: 25px 80px 20px 80px
position: relative
+media-xs
width: 100%
padding: 25px 0 20px 0
&.list
margin: 0 auto
padding: 15px 0
margin: 0 80px
border-bottom: thin solid $color-background
&:last-child
border-bottom: none
+media-xs
width: 100%
padding: 15px 10px
margin: 0
a.item-title
padding:
top: 0
bottom: 5px
font:
size: 1.6em
weight: 400
family: $font-body
.item-info
color: $color-text-dark-secondary
font-size: .9em
padding:
left: 25px
right: 25px
.item-header
width: 50px
height: 50px
position: absolute
top: 20px
border-radius: 3px
background-color: $color-background
overflow: hidden
img
+position-center-translate
width: 100%
i
+position-center-translate
font-size: 1.2em
color: $color-text-dark-hint
&.nothumb
border-radius: 50%
a.item-title, .item-info
padding-left: 70px
h4.blog_index-title
margin-left: 80px
padding-top: 25px
font:
family: $font-body
color: $color-text-dark-secondary
#blog_index-container,
#blog_post-container
.blog_index-item
padding: 25px 10px 20px 10px
position: relative
+media-xs
padding: 25px 0 20px 0
&.list
padding: 15px 10px
margin: 0 25px
+media-xs
width: 100%
padding: 15px 10px
margin: 0
h4.blog_index-title
margin-left: 35px
&.cloud-blog #blog_post-container,
#blog_post-container
.blog_index-item
padding-top: 55px
font-size: .9em