pillar/src/styles/blog.sass

// Bootstrap variables and utilities.
@import "../../node_modules/bootstrap/scss/functions"
@import "../../node_modules/bootstrap/scss/variables"
@import "../../node_modules/bootstrap/scss/mixins"

@import _config
@import _utils

// Bootstrap components.
@import "../../node_modules/bootstrap/scss/root"
@import "../../node_modules/bootstrap/scss/reboot"

@import "../../node_modules/bootstrap/scss/type"
@import "../../node_modules/bootstrap/scss/images"

@import "../../node_modules/bootstrap/scss/code"
@import "../../node_modules/bootstrap/scss/grid"
@import "../../node_modules/bootstrap/scss/buttons"
@import "../../node_modules/bootstrap/scss/dropdown"
@import "../../node_modules/bootstrap/scss/custom-forms"

@import "../../node_modules/bootstrap/scss/nav"
@import "../../node_modules/bootstrap/scss/navbar"

@import "../../node_modules/bootstrap/scss/card"
@import "../../node_modules/bootstrap/scss/jumbotron"
@import "../../node_modules/bootstrap/scss/media"
@import "../../node_modules/bootstrap/scss/close"
@import "../../node_modules/bootstrap/scss/modal"
@import "../../node_modules/bootstrap/scss/tooltip"

@import "../../node_modules/bootstrap/scss/utilities"

// Pillar components.
@import "apps_base"
@import "components/base"

@import "components/card"
@import "components/jumbotron"
@import "components/navbar"
@import "components/dropdown"
@import "components/footer"
@import "components/shortcode"
@import "components/flyout"
@import "components/buttons"
@import "components/tooltip"
@import "components/overlay"

@import _comments
@import _notifications

#blog_container
	+media-xs
		flex-direction: column
		padding-top: 0

	video
		max-width: 100%

#blog_post-edit-form
	padding: 20px

	.form-group
		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

			&: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

			&:empty
				color: transparent
				margin: 0 auto
				padding: 0 10px

				&:before, &:after
					content: ''
					color: transparent


#blog_post-create-container,
#blog_post-edit-container
	padding: 25px

.blog_index-item
	.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-content
		+node-details-description

		+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

#blog_index-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: 100%
	+media-md
		width: 100%
	+media-lg
		width: 100%


	.item-picture+.button-back+.button-edit
		right: 20px
		top: 20px

#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-back
		+button($color-info, 6px, true)
		display: block
		width: 100%
		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%
				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


// Specific tweaks for blogs in the context of a project.
#project_context
	.blog_index-item
		+media-xs
			margin-left: 0
		padding: 0
		margin-left: 10px

		&.list
			margin-left: 35px !important

		.item-title,
		.item-info
			+media-xs
				padding-left: 0
			padding-left: 25px

	#blog_container
		.comments-container
			+media-sm
				margin-left: 10px
			margin-left: 30px

	.blog-archive-navigation
		margin-left: 35px