theme_nin/sass/layout/_dm.sass

/****** DIRECT MESSAGES MODAL**********/

.modal-wrapper.directMessages
	
	
	.post-area-new
		display: none
		z-index: 5
		background: $main-color-dark !important
		position: absolute 
		bottom: 0
		width: 100% !important
		padding: 20px!important
	.modal-header
		h3 span
			display: inline-block!important
			padding-left: 5px
			color: white 
			cursor: default

	.modal-content
		+box-sizing(border-box)
		width: 100%
		background: #f0f0f0

	.post-photo
		height: 48px
		width: 48px
	.post-text
		margin-left: 58px
		font-size: .9rem
	.post-info-name
		float: none
	.post-info-tag
		line-height: 1em
		padding: 0
		display: inline
		font-size: 80%
		margin: 0 0 0 1em
	.post-info-sent  
		position: absolute
		left: 50%
		top: 10px
		display: none

.direct-messages-list .post
	padding: 20px
	cursor: pointer
	&:after
		content: ""
		font-family: $symbol-font-family
		position: absolute
		right: 5px
		top: 50%
		font-size: 1.1em
		margin: -6px 0 0 0
		color: rgba(0, 0, 0, 0.4)
		display: none

.direct-messages-list
	.post:hover:after
		display: block
	.post:hover 
		background: white
	li 
		position: relative
		border-bottom: 1px solid $main-background-color
.direct-messages-thread
	padding-bottom: 180px
	
	max-width: 420px
	margin: auto
	li 
		position: relative!important

	.post
		@extend .clear-fix
		background: none
		left: 0
		margin: 0px 10px 20px 10px
		cursor: default
		.post-info-time
			float: none
			display: block
			text-align: center
			font-size: 10px
			padding-top: 10px 
			margin-bottom: 10px
			cursor: default
			position: static
			&:hover
				color: $main-color-light




		.post-text:after, .post-text:nth-child(2n):after
			content: ""
			width: 1px
			background: transparent
			position: absolute
			top: 10px
			white-space: normal

		.post-text:after
			border-top: solid 7px transparent
			border-bottom: solid 7px transparent
			border-right: solid 7px white
			left: -7px

		.post-text
			background: white
			margin-right: 60px
			margin-left: 60px
			position: relative
			display: inline-block
			max-width: 300px
			font-size: .9rem
			padding: 5px 10px
			z-index: 4
			float: left
			word-wrap: break-word
			max-width: 70%
			min-height: 48px

		.post-photo
			position: absolute
			left: 0
			top: 35px



	.post.sent

		.post-text:after
			border-top: solid 7px transparent
			border-bottom: solid 7px transparent
			border-right: none
			border-left: solid 7px white
			right: -7px
			left: auto
		.post-text
			float: right
		.post-photo
			position: absolute
			right: 0
			left: auto