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
	span 
		@extend .extend-icon
		position: absolute
		top: 0
		line-height: $header-modal-height
		font-size: 1rem
		cursor: pointer
		color:  rgba(white , 0.7)
		transition: color .1s linear
		&:hover
			color: white

		b
			display: none

		&.modal-close
			@extend .icon-cancel
			right: 10px
		&.mark-all-as-read
			display: none
			@extend .icon-ok
			right: 70px
		&.modal-back
			@extend .icon-left
			right: 35px






/* 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 ***********/ 

@import '_dm'



/********* 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