theme_nin/sass/layout/_modal.sass

/*********** POPUP MODAL **************/


// vars modal

$header-modal-height : $menu-height


.modal-wrapper
	background: white
	z-index: 3000
	width: 25%
	position: fixed
	+box-sizing(border-box)
	@extend .box-shadow
	height: 100vh
	right: 0
	bottom: 0
	overflow: hidden
	.post-area-new
		padding: 10px

.modal-blackout
	background: rgba(0, 0, 0, 0)
	z-index: -1
	position: fixed
	left: 0
	top: 0
	width: 0
	height: 0

.modal-content
	@extend .clear-fix
	overflow: hidden
	overflow-y: auto
	.postboard-news
		position: absolute
		display: block
		right: 0
		z-index: 20
		@extend .color-1
	h2 span 
		display: none
	background: $bloc-light-color





.modal-header
	position: relative
	background: $main-color-dark
	height: $header-modal-height 
	+box-sizing(border-box)
	@extend .clear-fix

	h3
		padding-left: 20px
		line-height: $header-modal-height
		font-weight: 500 
		font-size: 1rem
		color: white

.modal-close
	@extend .extend-icon
	@extend .icon-cancel
	position: absolute
	right: 10px
	top: 0
	font-size: 14px
	line-height: $header-modal-height
	cursor: pointer
	color:  rgba(white , 0.7)
	&:hover
		color: white
	b
		display: none

.mark-all-as-read
	float: right
	cursor: pointer
	font-size: 1.3em
	line-height: $header-modal-height
	padding: 0 5px
	color:  white
	transition: all .1s linear
	display: none
.modal-back:hover, .mark-all-as-read:hover
	color: white

.mark-all-as-read
	@extend .extend-icon
	@extend .icon-ok


.modal-back
	@extend .extend-icon
	@extend .icon-left
	position: absolute
	right: 35px
	top: 0
	font-size: 14px
	line-height: $header-modal-height
	cursor: pointer
	color:  rgba(white , 0.7)
	&:hover
		color: white
	b
		display: none






/* MODAL */
.modal-content
	width: 100%
	.postboard
		padding: 0
		clear: none!important
		position: relative
		width: 100%
		margin: auto
		background: $main-background-color
		h2 
			display: block

	.post-text
		margin: 0 0 0 40px
	.post-photo
		width: 30px
		height: 30px
		img
			width: 100% 
			height: 100%
			//+border-radius(50%)



/*********** POPUP PROMPT *************/

.prompt-wrapper
	background: rgba( 255, 255,255, 1.0 )
	z-index: 5
	position: fixed
	top: 50%
	left: 50%
	width: 600px
	margin-left: -300px
	@extend .box-shadow
	.modal-buttons
		padding: 10px
		text-align: right
		button:last-child
			padding: 5px 20px

/************ FOLLOWING-CONFIG MODAL **********/

.prompt-wrapper.following-config-modal
	margin-top: -100px
	.modal-content
		padding: 10px
		text-align: center
	.modal-buttons
		display: none
	h2
		text-transform: none
		display: inline-block!important
		font-size: 1rem 
		font-weight: 400
		padding: $space
		span
			display: inline-block!important
			b
				font-weight: 400



/************ RETWIST POSTS MODAL **********/

.prompt-wrapper.reTwist
	&.prompt-wrapper
		margin-top: -110px
	.modal-content
		padding: 20px 15px

	.post-expand, .post-interactions
		display: none

/********* REPLY POSTS MODAL***************/

.prompt-wrapper.reply
	&.prompt-wrapper
		margin-top: -110px
	.modal-buttons, .post-expand, .post-interactions
		display: none
	.post-area
		padding-bottom: 6px

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

.modal-wrapper.directMessages

	.post-area-new
		display: none
		z-index: 5
		background: $main-background-color
		position: absolute 
		bottom: 0
		width: 100%
		padding: 0!important
		.modal-header
			h3 span
				display: inline!important

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

	.post-photo
		height: 48px
		width: 48px
	.post-text
		margin-left: 58px
		font-size: .9em
	.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

.direct-messages-thread
	padding-bottom: 150px
	.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
			margin: 10px 0
			cursor: default
			&: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: .9em
			padding: 5px 10px
			z-index: 4
			float: left
			word-wrap: break-word
			max-width: 60%
			min-height: 15px

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



	.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





/********* NEW USER MODAL**************/

.modal-wrapper.new-user

	.modal-content
		padding: 25px
	.modal-close
		display: none
	.text
		margin: 0 0 15px 0
	.emphasis
		text-align: center
	.secret-key
		display: block
		margin-top: 8px
		color: rgba(0.5, 0, 0, 1)
		font-weight: bold
		font-size: 110%

/******** HASHTAG MODAL***********/

.modal-wrapper.hashtag-modal

	.postboard
		padding: 0

/****** CONVERSATION MODAL***********/

.modal-wrapper.conversation-modal

	.postboard
		padding: 0

/****** FOLLOWING MODAL*******/


.modal-wrapper.following-modal
	h2 
		display: none
.mini-following-info
	border-bottom: 1px solid $main-background-color
	line-height: 45px

	a 
		display: block 
		padding: 10px
		width: 100%
		@extend .clear-fix
		color: $defaut-font-color
		&:hover 
			background: $bloc-background-color
	.mini-profile-photo
		height: 48px
		width: 48px
		line-height: 0
		margin: 0 $space 0 0
		float: left
	.mini-screen-name 
		display: none

 


/******* WHO TO FOLLOW MODAL*******/

.modal-wrapper.who-to-follow-modal
	.modal-content
		padding: 15px
		+box-sizing(border-box)
	ol
		margin: 5px
	.open-profile-modal
		&:hover
			text-decoration: none
	.twister-user
		position: relative
		padding: 5px

	.twister-user-info
		text-align: left
		font-size: .8rem
		line-height: 1rem
		width: 80%
	button 
		position: absolute 
		right: 0
		top: 5%
		@extend .small	
	.bio
		color: rgba(0, 0, 0, 0.6)
		font-style: italic
		padding: .5rem