Blog: Style tweaks and minor cleanup
Mainly removing unused classes such as blog_post-container
This commit is contained in:
parent
5fbe62105a
commit
bb33ddd9fb
@ -99,7 +99,7 @@ $screen-md-max: $screen-lg-min - 1 !default
|
||||
$sidebar-width: 50px !default
|
||||
|
||||
/* Project specifics */
|
||||
$project_nav-width: 240px !default
|
||||
$project_nav-width: 250px !default
|
||||
$project-sidebar-width: 50px !default
|
||||
$project_header-height: 50px !default
|
||||
$project_footer-height: 30px !default
|
||||
@ -120,10 +120,7 @@ $list-node-children-item-width_square: 160px !default
|
||||
$z-index-base: 13 !default
|
||||
|
||||
.container
|
||||
@media (min-width: $screen-sm-min)
|
||||
width: 750px
|
||||
|
||||
@media (min-width: $screen-md-min)
|
||||
@media (min-width: $screen-md-min)
|
||||
width: 1100px
|
||||
|
||||
@media (min-width: $screen-lg-min)
|
||||
|
||||
@ -10,6 +10,12 @@ body.workshops
|
||||
body.blog
|
||||
background-color: white
|
||||
|
||||
#project_nav,
|
||||
#project_nav-container
|
||||
+media-xs
|
||||
width: 100%
|
||||
width: $project_nav-width * 1.5
|
||||
|
||||
#project-container
|
||||
display: flex
|
||||
flex-direction: row
|
||||
@ -40,9 +46,8 @@ body.blog
|
||||
text-align: left
|
||||
|
||||
#project_nav-container
|
||||
position: fixed
|
||||
z-index: $z-index-base + 5
|
||||
width: $project_nav-width
|
||||
+media-lg
|
||||
width: $project_nav-width * 1.33
|
||||
|
||||
+media-xs
|
||||
display: block
|
||||
@ -50,6 +55,11 @@ body.blog
|
||||
position: relative
|
||||
height: initial !important
|
||||
|
||||
position: fixed
|
||||
z-index: $z-index-base + 5
|
||||
width: $project_nav-width
|
||||
|
||||
|
||||
#project_sidebar
|
||||
width: $project-sidebar-width
|
||||
z-index: $z-index-base + 6
|
||||
@ -125,14 +135,23 @@ body.blog
|
||||
&.active
|
||||
background-color: $color-background-nav-light
|
||||
|
||||
// The tiny triangle
|
||||
&:after
|
||||
content: ''
|
||||
+media-xs
|
||||
border-top-color: $project-sidebar-background
|
||||
border-right-color: transparent
|
||||
left: 50%
|
||||
right: initial
|
||||
transform: translateX(-50%)
|
||||
top: 0
|
||||
|
||||
border: 7px solid transparent
|
||||
border-right-color: $project-sidebar-background
|
||||
content: ''
|
||||
display: block
|
||||
position: absolute
|
||||
top: 50%
|
||||
right: 0
|
||||
top: 50%
|
||||
transform: translateY(-50%)
|
||||
|
||||
a
|
||||
@ -174,20 +193,23 @@ body.blog
|
||||
|
||||
/* Container for navigation on the left */
|
||||
#project_nav
|
||||
+media-lg
|
||||
width: $project_nav-width * 1.33
|
||||
|
||||
+media-xs
|
||||
width: initial
|
||||
|
||||
background-color: $project-sidebar-background
|
||||
display: block
|
||||
left: 0
|
||||
position: relative
|
||||
visibility: visible
|
||||
width: $project_nav-width
|
||||
position: relative
|
||||
background-color: $project-sidebar-background
|
||||
left: 0
|
||||
|
||||
&.about
|
||||
display: none
|
||||
visibility: hidden
|
||||
|
||||
+media-xs
|
||||
width: initial
|
||||
|
||||
|
||||
/* Header with name and node edit tools */
|
||||
#project_nav-header,
|
||||
@ -714,12 +736,15 @@ ul.project_nav-edit-list
|
||||
|
||||
/* The actual navigation tree container */
|
||||
#project_tree
|
||||
padding: 0 0 5px 0// some padding on top/bottom of jstree
|
||||
position: relative
|
||||
margin-top: $project_header-height
|
||||
+media-xs
|
||||
margin-top: 0
|
||||
|
||||
background-color: $project-sidebar-background
|
||||
border-right: thin solid $color-background
|
||||
margin-top: $project_header-height
|
||||
overflow-y: auto
|
||||
padding: 0 0 5px 0// some padding on top/bottom of jstree
|
||||
position: relative
|
||||
|
||||
&.edit
|
||||
margin-top: 0
|
||||
@ -2669,8 +2694,7 @@ section.node-children
|
||||
#project_context
|
||||
#blog_container
|
||||
padding: 0
|
||||
#blog_index-container,
|
||||
#blog_post-container
|
||||
#blog_index-container
|
||||
width: 100%
|
||||
padding: 0
|
||||
border: none
|
||||
|
||||
@ -158,32 +158,31 @@ strong, b
|
||||
header.navbar-header
|
||||
position: relative
|
||||
margin: 0
|
||||
z-index: 1 // to be on top of the overlay
|
||||
height: 100%
|
||||
z-index: 1 // to be on top of the overlay
|
||||
|
||||
.navbar-toggle
|
||||
color: white
|
||||
float: none
|
||||
margin: 5px 0 0 10px
|
||||
|
||||
i
|
||||
margin: 0
|
||||
|
||||
.navbar-overlay
|
||||
display: none
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
z-index: 0
|
||||
width: 100%
|
||||
display: none
|
||||
left: 0
|
||||
height: 100%
|
||||
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
transition: background-color 350ms ease-in-out
|
||||
width: 100%
|
||||
z-index: 0
|
||||
|
||||
&+.navbar-container
|
||||
.search-input
|
||||
margin: 8px 0
|
||||
border-radius: 3px
|
||||
border: thin solid transparent
|
||||
|
||||
+media-lg
|
||||
border: thin solid rgba(white, .2)
|
||||
|
||||
@ -191,6 +190,9 @@ header.navbar-header
|
||||
&::placeholder
|
||||
color: rgba(white, .8)
|
||||
|
||||
border: thin solid transparent
|
||||
border-radius: 3px
|
||||
margin: 8px 0
|
||||
|
||||
&.is-active
|
||||
background-color: $color-background-nav
|
||||
@ -346,8 +348,10 @@ nav.sidebar
|
||||
+position-center-translate
|
||||
|
||||
.navbar-brand
|
||||
display: flex
|
||||
+media-xs
|
||||
padding-left: 10px
|
||||
align-items: center
|
||||
display: flex
|
||||
color: white
|
||||
padding:
|
||||
top: 8px
|
||||
@ -1037,11 +1041,6 @@ button, .btn
|
||||
background-color: rgba($color-background-nav, .7)
|
||||
|
||||
.search-input
|
||||
position: relative
|
||||
float: left
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
+media-lg
|
||||
max-width: 350px
|
||||
+media-md
|
||||
@ -1051,11 +1050,14 @@ button, .btn
|
||||
+media-xs
|
||||
display: block
|
||||
margin: 0 10px
|
||||
width: 75%
|
||||
position: absolute
|
||||
z-index: $z-index-base
|
||||
top: 2px
|
||||
left: 40px
|
||||
right: 5px
|
||||
position: relative
|
||||
float: left
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
|
||||
.search-icon
|
||||
position: absolute
|
||||
@ -1089,17 +1091,17 @@ button, .btn
|
||||
|
||||
#cloud-search, .tt-hint
|
||||
+text-overflow-ellipsis
|
||||
outline: none
|
||||
border: thin solid $color-background-nav-light
|
||||
border-radius: 3px
|
||||
color: white
|
||||
font:
|
||||
size: 1em
|
||||
weight: 400
|
||||
family: $font-body
|
||||
margin: 0
|
||||
padding: 0 20px 0 40px
|
||||
min-height: 32px
|
||||
color: white
|
||||
outline: none
|
||||
padding: 0 20px 0 40px
|
||||
transition: border 100ms ease-in-out
|
||||
|
||||
&:focus
|
||||
|
||||
@ -8,160 +8,148 @@
|
||||
|
||||
|
||||
#blog_container
|
||||
padding:
|
||||
top: 15px
|
||||
bottom: 15px
|
||||
display: flex
|
||||
justify-content: center
|
||||
|
||||
+media-xs
|
||||
flex-direction: column
|
||||
padding-top: 0
|
||||
display: flex
|
||||
padding:
|
||||
top: 15px
|
||||
bottom: 15px
|
||||
|
||||
#blog_post-edit-form
|
||||
padding: 20px
|
||||
#blog_post-edit-form
|
||||
padding: 20px
|
||||
|
||||
.form-group
|
||||
position: relative
|
||||
margin: 0 auto 30px auto
|
||||
font-family: $font-body
|
||||
.form-group
|
||||
position: relative
|
||||
margin: 0 auto 30px auto
|
||||
font-family: $font-body
|
||||
|
||||
input, textarea, select
|
||||
input, textarea, select
|
||||
+input-generic
|
||||
|
||||
&#fileupload
|
||||
color: $color-info
|
||||
|
||||
&.tags .select2-container
|
||||
.select2-selection
|
||||
+input-generic
|
||||
|
||||
&#fileupload
|
||||
color: $color-info
|
||||
select
|
||||
text-transform: capitalize
|
||||
|
||||
&.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
|
||||
+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
|
||||
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
|
||||
&.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-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
|
||||
.form-group
|
||||
.node-preview-thumbnail
|
||||
display: block
|
||||
|
||||
&.attachments
|
||||
&.attachments
|
||||
+clearfix
|
||||
|
||||
.form-control
|
||||
padding: 0
|
||||
margin: 0
|
||||
border: none
|
||||
list-style-type: none
|
||||
+clearfix
|
||||
|
||||
.form-control
|
||||
padding: 0
|
||||
margin: 0
|
||||
border: none
|
||||
list-style-type: none
|
||||
+clearfix
|
||||
label[for^='attachments-']
|
||||
margin-top: 15px
|
||||
font-weight: 400
|
||||
|
||||
label[for^='attachments-']
|
||||
margin-top: 15px
|
||||
font-weight: 400
|
||||
|
||||
div[id^='attachments-']
|
||||
margin-bottom: 15px
|
||||
border-top: thin solid $color-text-dark-hint
|
||||
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
|
||||
.form-group.description,
|
||||
.form-group.summary,
|
||||
.form-group.content
|
||||
position: relative
|
||||
|
||||
textarea
|
||||
width: 100%
|
||||
min-height: 220px
|
||||
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
|
||||
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
|
||||
transition: all 300ms ease-in-out
|
||||
resize: vertical
|
||||
|
||||
|
||||
&:focus
|
||||
border: 1px solid $color-info
|
||||
outline: none
|
||||
&:focus
|
||||
border: 1px solid $color-info
|
||||
outline: none
|
||||
|
||||
&.field-error
|
||||
border-color: $color-danger
|
||||
&.field-error
|
||||
border-color: $color-danger
|
||||
|
||||
.md-preview-loading
|
||||
.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
|
||||
|
||||
&:before
|
||||
content: 'Live Preview'
|
||||
position: absolute
|
||||
left: 85px
|
||||
padding-top: 5px
|
||||
font-size: .9em
|
||||
top: -25px
|
||||
left: 20px
|
||||
font-size: .7em
|
||||
color: $color-text-dark-secondary
|
||||
display: none
|
||||
transition: color 150ms ease-in-out
|
||||
|
||||
.node-edit-form-md-preview
|
||||
&:after
|
||||
content: 'Markdown Supported'
|
||||
position: absolute
|
||||
top: -25px
|
||||
right: 20px
|
||||
font-size: .7em
|
||||
color: $color-text-dark-hint
|
||||
transition: color 150ms ease-in-out
|
||||
|
||||
+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
|
||||
&:empty
|
||||
color: transparent
|
||||
margin: 0 auto
|
||||
padding: 0 10px
|
||||
@ -171,206 +159,193 @@
|
||||
color: transparent
|
||||
|
||||
|
||||
#node-edit-form-md-preview
|
||||
padding: 20px
|
||||
#blog_post-create-container,
|
||||
#blog_post-edit-container
|
||||
padding: 25px
|
||||
|
||||
&.post-create
|
||||
flex-direction: row-reverse
|
||||
#blog_index-container,
|
||||
#blog_post-create-container,
|
||||
#blog_post-edit-container
|
||||
+container-box
|
||||
width: 75%
|
||||
|
||||
#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
|
||||
+media-xs
|
||||
border-radius: 0
|
||||
width: 100%
|
||||
clear: both
|
||||
display: block
|
||||
+media-sm
|
||||
width: 60%
|
||||
+media-md
|
||||
width: 70%
|
||||
+media-lg
|
||||
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
|
||||
border-top-left-radius: 3px
|
||||
border-top-right-radius: 3px
|
||||
display: block
|
||||
overflow: hidden
|
||||
position: relative
|
||||
text-align: center
|
||||
width: 100%
|
||||
|
||||
.blog_index-header
|
||||
img
|
||||
width: 100%
|
||||
|
||||
.blog_index-item
|
||||
+media-lg
|
||||
max-width: 880px
|
||||
+media-md
|
||||
max-width: 880px
|
||||
+media-sm
|
||||
max-width: 780px
|
||||
|
||||
margin: 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
|
||||
display: block
|
||||
overflow: hidden
|
||||
position: relative
|
||||
text-align: center
|
||||
width: 100%
|
||||
+clearfix
|
||||
|
||||
img
|
||||
+position-center-translate
|
||||
width: 100%
|
||||
|
||||
.blog_index-item
|
||||
+media-lg
|
||||
max-width: 780px
|
||||
|
||||
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
|
||||
color: $color-text-dark
|
||||
display: block
|
||||
font:
|
||||
family: $font-body
|
||||
size: 2em
|
||||
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 25px
|
||||
font-size: 1.3em
|
||||
|
||||
+media-xs
|
||||
padding:
|
||||
left: 0
|
||||
right: 0
|
||||
|
||||
img
|
||||
display: block
|
||||
margin: 0 auto
|
||||
|
||||
.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($color-success, 6px, true)
|
||||
|
||||
.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-xs
|
||||
min-height: 150px
|
||||
+media-sm
|
||||
min-height: 150px
|
||||
+media-md
|
||||
min-height: 250px
|
||||
+media-lg
|
||||
min-height: 250px
|
||||
|
||||
.item-title
|
||||
color: $color-text-dark
|
||||
display: block
|
||||
font:
|
||||
family: $font-body
|
||||
size: 1.8em
|
||||
padding-bottom: 10px
|
||||
padding-top: 20px
|
||||
|
||||
.item-info
|
||||
color: $color-text-dark-secondary
|
||||
font-size: 1em
|
||||
|
||||
a
|
||||
color: $color-text-dark-secondary
|
||||
&:hover
|
||||
color: $color-primary
|
||||
|
||||
.item-content
|
||||
+node-details-description
|
||||
padding: 35px 25px
|
||||
font-size: 1.3em
|
||||
|
||||
+media-xs
|
||||
padding:
|
||||
left: 0
|
||||
right: 0
|
||||
|
||||
.comment-reply-container
|
||||
background-color: transparent
|
||||
|
||||
.comment-reply-field
|
||||
textarea, .comment-reply-meta
|
||||
background-color: $color-background-light
|
||||
|
||||
&.filled
|
||||
.comment-reply-meta
|
||||
background-color: $color-success
|
||||
|
||||
.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%
|
||||
margin: 0 auto
|
||||
|
||||
a
|
||||
display: block
|
||||
padding: 10px 0
|
||||
text-align: right
|
||||
.item-meta
|
||||
color: $color-text-dark-secondary
|
||||
padding:
|
||||
left: 25px
|
||||
right: 25px
|
||||
|
||||
.original a
|
||||
color: $color-info
|
||||
.delete a
|
||||
color: $color-danger
|
||||
+media-xs
|
||||
padding:
|
||||
left: 10px
|
||||
right: 10px
|
||||
|
||||
.form-upload-file-meta
|
||||
width: initial
|
||||
.button-create,
|
||||
.button-edit
|
||||
+button($color-success, 3px, true)
|
||||
|
||||
.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-container
|
||||
background-color: transparent
|
||||
|
||||
.comment-reply-field
|
||||
textarea, .comment-reply-meta
|
||||
background-color: $color-background-light
|
||||
|
||||
&.filled
|
||||
.comment-reply-meta
|
||||
background-color: $color-success
|
||||
|
||||
.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
|
||||
@ -403,9 +378,9 @@
|
||||
margin: 0
|
||||
|
||||
.button-back
|
||||
+button($color-info, 6px, true)
|
||||
display: block
|
||||
width: 100%
|
||||
+button($color-info, 6px)
|
||||
margin: 15px 0 0 0
|
||||
|
||||
#blog_post-edit-form
|
||||
@ -478,7 +453,6 @@
|
||||
transition: opacity 150ms ease-in-out
|
||||
+position-center-translate
|
||||
|
||||
|
||||
.item-info
|
||||
padding: 10px 20px
|
||||
background-color: white
|
||||
@ -501,63 +475,33 @@
|
||||
text-decoration: none
|
||||
color: $color-primary
|
||||
|
||||
#blog_post-container
|
||||
.button-create
|
||||
+button($color-success, 6px)
|
||||
.button-back
|
||||
position: absolute
|
||||
top: 15px
|
||||
right: 15px
|
||||
z-index: 2
|
||||
+button($color-info, 6px, true)
|
||||
.button-create, .button-edit
|
||||
position: absolute
|
||||
z-index: 2
|
||||
top: 15px
|
||||
right: 15px
|
||||
+button($color-success, 6px, true)
|
||||
|
||||
.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
|
||||
#blog_index-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
|
||||
|
||||
#blog_index-container,
|
||||
&.cloud-blog #blog_index-container
|
||||
+media-sm
|
||||
width: 100%
|
||||
padding: 25px 20px 20px 20px
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
padding: 0 0 20px 0
|
||||
|
||||
padding: 0 0 50px 0
|
||||
margin: 0 auto
|
||||
|
||||
.blog_index-item
|
||||
padding: 25px 80px 20px 80px
|
||||
position: relative
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
padding: 25px 0 20px 0
|
||||
padding: 10px 25px
|
||||
|
||||
&.list
|
||||
margin: 0 auto
|
||||
@ -613,29 +557,21 @@
|
||||
a.item-title, .item-info
|
||||
padding-left: 70px
|
||||
|
||||
#blog_index-container,
|
||||
#blog_post-container
|
||||
.blog_index-item
|
||||
padding: 25px 10px 20px 10px
|
||||
position: relative
|
||||
#blog_index-container
|
||||
.blog_index-item
|
||||
position: relative
|
||||
|
||||
+media-xs
|
||||
padding: 25px 0 20px 0
|
||||
|
||||
&.list
|
||||
padding: 15px 10px
|
||||
margin: 0
|
||||
|
||||
+media-xs
|
||||
padding: 25px 0 20px 0
|
||||
|
||||
&.list
|
||||
width: 100%
|
||||
padding: 15px 10px
|
||||
margin: 0 25px
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
padding: 15px 10px
|
||||
margin: 0
|
||||
|
||||
&.cloud-blog #blog_post-container,
|
||||
#blog_post-container
|
||||
.blog_index-item
|
||||
padding-top: 55px
|
||||
font-size: .9em
|
||||
margin: 0
|
||||
|
||||
|
||||
.blog-archive-navigation
|
||||
@ -674,3 +610,14 @@
|
||||
right: 0
|
||||
top: 0
|
||||
z-index: 1
|
||||
|
||||
#project_context
|
||||
.blog_index-item
|
||||
+media-xs
|
||||
margin-left: 0
|
||||
padding: 0
|
||||
margin-left: 10px
|
||||
|
||||
#blog_container
|
||||
.comments-container
|
||||
margin-left: 30px
|
||||
|
||||
@ -8,57 +8,41 @@ $tree-color-highlight-background-text: white
|
||||
.jstree-default
|
||||
/* list item */
|
||||
.jstree-node
|
||||
position: relative
|
||||
max-width: 100% // Needed for ellipsis on long names
|
||||
margin: 0 !important
|
||||
color: $tree-color-text
|
||||
background-image: none !important
|
||||
|
||||
transition: color 100ms ease-in-out, background-color 150ms ease-in-out
|
||||
|
||||
+media-xs
|
||||
width: 100%
|
||||
background-image: none !important
|
||||
border: none
|
||||
color: $tree-color-text
|
||||
margin: 0 !important
|
||||
max-width: 100% // Needed for ellipsis on long names
|
||||
position: relative
|
||||
|
||||
&[data-node-type="asset"],
|
||||
&[data-node-type="texture"],
|
||||
&[data-node-type="hdri"]
|
||||
.jstree-anchor
|
||||
padding-right: 20px
|
||||
&:before
|
||||
font-family: 'pillar-font'
|
||||
content: '\e84d'
|
||||
color: $color-text-dark-hint
|
||||
font-size: .8em
|
||||
padding: 0 5px
|
||||
position: absolute
|
||||
right: 5px
|
||||
|
||||
&.jstree-clicked
|
||||
&:before
|
||||
color: $tree-color-highlight-background-text !important
|
||||
&:after
|
||||
display: none
|
||||
&[is_free='true']
|
||||
.jstree-anchor
|
||||
padding-right: initial
|
||||
&:before
|
||||
display: none
|
||||
|
||||
&:after
|
||||
display: none
|
||||
color: $tree-color-highlight
|
||||
content: '\e84e' !important
|
||||
display: block
|
||||
|
||||
&[data-node-type="page"],
|
||||
&[data-node-type="blog"]
|
||||
font-size: 1.15em
|
||||
color: darken($tree-color-highlight, 5%)
|
||||
border-bottom: 2px solid $tree-color-highlight
|
||||
|
||||
&:hover
|
||||
border-bottom-color: lighten($tree-color-highlight, 5%)
|
||||
font-weight: bold
|
||||
|
||||
.jstree-anchor
|
||||
padding: 5px 8px 1px 8px
|
||||
|
||||
&:after
|
||||
top: 3px !important
|
||||
|
||||
.jstree-icon
|
||||
display: none
|
||||
|
||||
@ -95,7 +79,7 @@ $tree-color-highlight-background-text: white
|
||||
font-size: .85em !important
|
||||
|
||||
.jstree-anchor
|
||||
border-left: thin solid rgba($tree-color-text, .2)
|
||||
box-shadow: inset 1px 0 0 0 rgba($tree-color-text, .2)
|
||||
|
||||
/* Closed Folder */
|
||||
// &.jstree-closed
|
||||
@ -110,51 +94,58 @@ $tree-color-highlight-background-text: white
|
||||
|
||||
/* The text of the last level item */
|
||||
.jstree-anchor
|
||||
width: 100%
|
||||
padding-left: 28px
|
||||
padding-right: 10px
|
||||
height: inherit
|
||||
line-height: 26px
|
||||
white-space: nowrap
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
border-bottom: thin solid transparent
|
||||
transition: none
|
||||
|
||||
+media-xs
|
||||
width: 98%
|
||||
padding: 0 !important
|
||||
border: none
|
||||
height: inherit
|
||||
line-height: 26px
|
||||
overflow: hidden
|
||||
padding-left: 28px
|
||||
padding-right: 10px
|
||||
text-overflow: ellipsis
|
||||
transition: none
|
||||
transition: color 50ms ease-in-out, background-color 100ms ease-in-out
|
||||
white-space: nowrap
|
||||
width: 100%
|
||||
|
||||
// Little arrow on the right
|
||||
&:after
|
||||
content: '\e83a' !important
|
||||
font-family: 'pillar-font'
|
||||
color: white
|
||||
display: none
|
||||
position: absolute
|
||||
right: 7px
|
||||
top: 1px
|
||||
|
||||
// Icon, not selected
|
||||
.jstree-icon
|
||||
margin: 0 !important
|
||||
font-size: 95% !important
|
||||
color: $color-text-dark-secondary
|
||||
font-size: 95% !important
|
||||
margin: 0 !important
|
||||
|
||||
/* Selected item */
|
||||
&.jstree-clicked
|
||||
background-color: $tree-color-highlight-background !important
|
||||
color: $tree-color-highlight-background-text !important
|
||||
|
||||
.jstree-ocl, .jstree-icon
|
||||
color: $tree-color-highlight-background-text !important
|
||||
color: white !important
|
||||
|
||||
&:after
|
||||
content: '\e83a'
|
||||
font-family: 'pillar-font'
|
||||
color: $tree-color-highlight-background-text
|
||||
position: absolute
|
||||
right: 7px
|
||||
top: 1px
|
||||
display: block
|
||||
color: white !important
|
||||
|
||||
li
|
||||
a.jstree-anchor:after
|
||||
content: ''
|
||||
.jstree-ocl,
|
||||
.jstree-icon
|
||||
color: white
|
||||
|
||||
/* hover an active item */
|
||||
&.jstree-hovered,
|
||||
&.jstree-hovered .jstree-icon
|
||||
color: $tree-color-highlight-background-text !important
|
||||
&.jstree-hovered
|
||||
background-color: lighten($tree-color-highlight-background, 10%) !important
|
||||
box-shadow: none
|
||||
color: white !important
|
||||
|
||||
&.jstree-hovered .jstree-icon
|
||||
color: white !important
|
||||
|
||||
.jstree-hovered
|
||||
background-color: rgba($tree-color-highlight, .1) !important
|
||||
@ -196,45 +187,70 @@ $tree-color-highlight-background-text: white
|
||||
line-height: 26px
|
||||
left: 5px
|
||||
|
||||
&.is_subscriber .jstree-anchor
|
||||
padding-right: initial
|
||||
&:before
|
||||
display: none
|
||||
&:after
|
||||
display: none
|
||||
&.is_subscriber
|
||||
.jstree-node
|
||||
&[is_free='true']
|
||||
.jstree-anchor
|
||||
padding-right: initial
|
||||
|
||||
&:after
|
||||
display: none !important
|
||||
|
||||
&.blog
|
||||
.jstree-anchor
|
||||
padding: 5px 5px 5px 10px
|
||||
&:hover, &:hover i
|
||||
padding: 6px 6px 6px 12px
|
||||
|
||||
&:hover
|
||||
color: $tree-color-highlight
|
||||
|
||||
&.jstree-clicked .tree-item-info
|
||||
color: white
|
||||
&.post
|
||||
border-bottom: thin solid $color-background-dark
|
||||
|
||||
.tree-item-info
|
||||
display: block
|
||||
font-size: .85em
|
||||
margin-left: 40px
|
||||
padding-top: 2px
|
||||
line-height: 1em
|
||||
color: $color-text-dark-secondary
|
||||
&.jstree-clicked
|
||||
&.post
|
||||
background-color: transparent !important
|
||||
|
||||
.tree-item-thumbnail
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
background-color: $color-background
|
||||
width: 40px
|
||||
height: 40px
|
||||
float: left
|
||||
margin: 0 5px 0 -5px
|
||||
border-radius: 3px
|
||||
color: $color-text-dark-secondary
|
||||
img
|
||||
&:after
|
||||
top: 8px
|
||||
color: $tree-color-highlight !important
|
||||
|
||||
.tree-item-info
|
||||
color: $color-text
|
||||
|
||||
.tree-item-title
|
||||
color: $tree-color-highlight
|
||||
|
||||
.tree-item
|
||||
line-height: initial
|
||||
padding-right: 10px
|
||||
|
||||
&-title
|
||||
font-size: 1.2em
|
||||
overflow: initial
|
||||
text-overflow: initial
|
||||
white-space: normal
|
||||
|
||||
&-info
|
||||
color: $color-text-dark-secondary
|
||||
display: block
|
||||
font-size: .8em
|
||||
padding: 5px
|
||||
|
||||
&-thumbnail
|
||||
align-items: center
|
||||
background-color: $color-background
|
||||
border-radius: 3px
|
||||
width: 40px
|
||||
height: 40px
|
||||
color: $color-text-dark-secondary
|
||||
display: flex
|
||||
float: left
|
||||
height: 70px
|
||||
justify-content: center
|
||||
margin: 0 10px 0 -5px
|
||||
width: 70px
|
||||
|
||||
img
|
||||
height: 70px
|
||||
width: 70px
|
||||
|
||||
|
||||
.jstree-loading
|
||||
@ -263,14 +279,16 @@ $tree-color-highlight-background-text: white
|
||||
|
||||
|
||||
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
|
||||
background-color: rgba($tree-color-highlight-background, .7) !important
|
||||
background-color: rgba($tree-color-highlight-background, .8) !important
|
||||
color: white !important
|
||||
|
||||
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
|
||||
background-color: rgba($tree-color-highlight-background, .8) !important
|
||||
color: white !important
|
||||
|
||||
i.jstree-icon.jstree-ocl
|
||||
height: 26px !important
|
||||
color: rgba($tree-color-text, .5) !important
|
||||
height: 26px !important
|
||||
+media-xs
|
||||
height: 40px !important
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user