theme_nin/sass/layout/_modal.sass

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

// vars modal

$header-modal-height : $menu-height


// style

@mixin modal-blackout
	display: block
	background: rgba(0,0,0, 0.6)
	z-index: -1
	position: fixed
	left: 0
	top: 0
	width: 100%
	height: 100%

.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
			@include button-small-basic
		.bio
			color: rgba(0, 0, 0, 0.6)
			font-style: italic
			padding: .25rem 0


	.modal-content
		background: $bloc-light-color
		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
			@include button-color-basic


	&.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
			@include button-small-basic
		.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-peer
	margin: 0
	min-height: 72px
	padding: 4px
	border-top: solid 1px $main-background-color
	border-bottom: solid 1px $main-background-color
	background: $bloc-light-color
	+ .twister-peer
		border-top: none
	.avatar
		float: left
		width: 48px
		height: 48px
		overflow: hidden
		margin: 4px
		img
			width: 48px
			height: auto
		&:hover
			cursor: pointer
	.name
		display: inline-block
		font-weight: 600
		&:hover
			cursor: pointer
	.alias
		display: inline-block
		&:hover
			color: $main-color-color
			cursor: pointer
	.bio
		text-align: center
		padding: 4px

.avatar.tiny
	width: 20px
	height: 20px
	+border-radius(3px)

.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'

@import '_groupchat'