theme_nin/sass/layout/_modal.sass

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

// vars modal

$header-modal-height : $menu-height


// style

.modal-blackout
	display: none


.modal-wrapper
	background: $bloc-background-color
	z-index: 100
	width: 34%
	position: fixed
	+box-sizing(border-box)
	@extend .box-shadow
	height: 100vh
	right: 0
	bottom: 0
	overflow: hidden
	+box-shadow(-8px 0 13px rgba(#111, 0.2))
	+transition-property(top, bottom)
	+transition-duration(1s)
	&.remove 
		bottom: 300%
	// NEW USER MODAL //

	&.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: 80%


	// FOLOWING MODAL //

	&.following-modal

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

		a 
			display: block 
			padding: 10px
			width: 100%

			@extend .clear-fix
			color: $defaut-font-color
			background: $bloc-light-color

			&:hover 
				background: white
				text-decoration: none 
				font-weight: 500
		.mini-profile-photo
			width: $mini-usr-img
			min-height: $mini-usr-img
			overflow-x: hidden
			line-height: 0
			margin: 0 $space 0 0
			float: left
		.mini-following-name 
			&:after 
				line-height: 20px
		.mini-screen-name 
			display: none
	



	&.who-to-follow-modal
		a 
			color: $main-color-dark
			&.twister-user-name 
				&:hover 
					text-decoration: none
		.twister-user-info
			text-align: left
			font-size: .8rem
			line-height: 1rem
			width: 80%
			padding-left: $mini-usr-img + 20
		button 
			position: absolute 
			right: 10px
			top: 10px
			@extend .small	
		.bio
			color: rgba(0, 0, 0, 0.6)
			font-style: italic
			padding: .25rem 0


	.modal-content
		width: 100%
		@extend .clear-fix
		overflow: hidden
		overflow-y: auto

		.postboard
			padding: 0
			clear: none!important
			position: relative
			width: 100%
			margin: auto

			h2 
				display: block
				span 
					display: none 


		.postboard-news
			position: fixed
			display: block
			right: 2px
			top: $header-modal-height +2
			z-index: 2000
			@extend .color-1
			
			
	&.new-users-modal
		a
			color: $main-color-dark
			&.twister-user-name
				&:hover
					text-decoration: none
		.twister-user-info
			text-align: left
			font-size: .8rem
			line-height: 1rem
			width: 80%
			padding-left: $mini-usr-img + 20
		button
			position: absolute
			right: 10px
			top: 10px
			@extend .small
		.bio
			color: rgba(0, 0, 0, 0.6)
			font-style: italic
			padding: .25rem 0


.modal-header
	position: relative
	background: darken($main-color-dark,.3)
	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
		float: left
		color: white
		span 
			position: relative
	span 
		
		@extend .ion
		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 .ion-close
			right: 10px
		&.mark-all-as-read
			@extend .ion-checkmark
			position: static 
			float: left
			margin-left: 10px
			display: none
		&.modal-back
			@extend .ion-back
			right: 70px


.inline-warn
	background-color: #FEFEDF
	padding: 10px
	.close
		float: right
		font-size: 1.2em
		color: #e34f42
		cursor: pointer
		margin: -8px 2px 8px 8px
	.text
		font-size: 0.8em
		text-align: center
	.options
		font-size: 0.8em
		text-align: right
		margin-top: 4px
		div > *
			display: inline-block


/* Composants */

.twister-user
	position: relative
	box-sizing: border-box
	background: $bloc-light-color
	@extend .clear-fix
	border-bottom: 1px solid $main-background-color
	width: 100%
	min-height: auto
	padding: 7px 
	clear: left
	&:first-child 
		border-top: 1px solid $main-background-color
		border-bottom: 1px solid $main-background-color !important
	&:last-child 
		border-bottom: 0
	small 
		display: none




/* Minimized */
.minimize-modal 
	@extend .ion
	@extend .ion-minus
	position: absolute
	top: 0
	line-height: $header-modal-height
	font-size: 1rem
	cursor: pointer
	color:  rgba(white , 0.7)
	transition: color .1s linear
	right: 35px!important
	&:hover
		color: white

	b
		display: none



#modals-minimized 
	position: fixed 
	z-index: 2000
	left: 0 
	bottom: 0 
	width: $leftWidth
	text-align: right
	li
		background: $dark-grey 
		cursor: pointer
		margin-right: 10px
		font-weight: 600
		font-size: .8rem
		padding: .5rem
		margin-bottom: 10px
		color: rgba(white, .8)
		+transition(margin .2s)
		&:hover 
			color: white 
			margin-right: 0

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

@import '_prompt'

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

@import '_dm'