theme_nin/sass/style.sass

@charset "UTF-8"
@import compass
@import 'compass/reset'
@import 'compass/utilities'

// base
@import 'base/_fonts'
@import 'base/_var'
@import 'base/_commons'
@import 'base/_utils'

// layout
@import 'layout/_menu'
@import 'layout/_wrapper'
@import 'layout/_modal'
@import 'layout/_profile'
@import 'layout/_postboard'

// pages

@import 'pages/_following'
@import 'pages/_login'
@import 'pages/_network'

@import 'layout/_tabs'




.promoted-posts-only
	margin: 0 0
	
	li
		cursor: pointer
		display: block
		margin: 0
		width: 50%
		padding: .5rem 
		float: left
		text-align: center
		transition: color .1s linear
		position: relative
		border-left: 1px solid $main-background-color
		span 
			font-size: .8rem
			line-height: .8rem
			display: block
		&.disabled 
			background: $bloc-background-color
			color: rgba($defaut-font-color, .3)
			z-index: 3
		&.active
			color: $defaut-font-color
			cursor: default
			
			z-index: 5





/********** CONFIG SUBMENU & SEARCH RESULTS ************/

.dialog-modal
	display: none
	background: $main-color-dark
	position: absolute
	top: $menu-height - 4
	right: 0
	width: 320px
	overflow: hidden
	+box-shadow(0 8px 33px rgba(#000, .3))

.userMenu-search .dialog-modal:after
	right: auto
	left: 150px

.direct-messages, .dropdown-menu-item
	display: block
	padding: 10px

	

ul.userMenu-search-profiles
	width: 100%
	padding: 0
	
	
	li
		float: none
		display: block
		margin: 0
		@extend .clear-fix
		cursor: pointer
		background: $bloc-light-color
		border-bottom: 1px solid $main-background-color
		&:hover 
			background: white

		a
			display: block 
			width: 100%
			font-size: 12px
			font-weight: 400
			line-height: $mini-usr-img / 1.5
			display: block
			margin: 0
			padding: 0
			color: $defaut-font-color
			span, b, span:hover, b:hover
				display: inline-block
				color: $defaut-font-color
				font-weight: 400
				font-size: 12px

	.mini-screen-name b,  
	.mini-screen-name
		font-weight: 500
	.mini-profile-photo 
		width: $mini-usr-img / 1.5
		height: auto
		height: $mini-usr-img / 1.5
		overflow: hidden
		margin: 5px
		float: left
		overflow-x: hidden
	.mini-profile-info
		width: 100%
		float: none
	.mini-profile-name 
		padding: 5px 0 0 0

	button
		font-size: 13px
		line-height: $mini-usr-img / 2
		height: $mini-usr-img / 1.5
		width: $mini-usr-img / 1.5
		text-align: center
		font-weight: 700
		padding: 0
		@extend .ion
		position: absolute
		top: 5px 
		right: 5px





.userMenu-search-sugestions a
	color: rgba(0, 0, 0, 0.7)
	padding: 10x 20px
	display: block
	clear: both






/***************** MINI PROFILE *******************************/

.mini-profile

	a:hover 
		text-decoration: none 

	a.button
		background: $main-color-light
		margin: 1em auto
	.post-area
		margin-top: 1px
		margin-bottom: 20px
		padding: .5em
		@extend .clear-fix
	.post-area-new
		@extend .open
		+box-shadow(none)
		padding: 0
		margin: 0
		textarea
			width: 100%

.mini-profile-indicators
	margin: 0 
	text-align: center
	@extend .clear-fix
	border-top: 1px solid $main-background-color
	background: $bloc-background-color

	li
		+box-sizing(border-box)
		display: block
		position: relative
		font-size: .8em
		text-align: center
		border-bottom: 1px solid $main-background-color

		a
			color: lighten($dark-grey,10%)
			display: block
			padding: 1rem 0
			&:hover
				color: $dark-grey
				background: $bloc-light-color
			&:before 
				display: block!important
				width: 100%!important
				font-size: 1.4rem!important

	.userMenu-connections a
		@extend .ion-mention
		@extend .ion
	.userMenu-messages a
		@extend .ion-chatbox
		@extend .ion
	.userMenu-user a
		@extend .ion-profile
		@extend .ion

.messages-qtd
	position: absolute
	top: 5px
	right: 5px
	background: $main-color-color
	+text-shadow(1px 1px 0 rgba(#000,.2))
	color: #fff
	width: 25px 
	height: 25px
	line-height: 25px
	font-size: 10px
	font-weight: 900
	+border-radius(50%)

.mini-profile-view
	display: none
.left .mini-profile-info
	padding-top: 20px

.mini-profile-name
	color: $dark-grey
	font-size: 1em
	font-weight: 500
	padding: 10px  0
	display: block
	text-align: center
	margin: auto
	&:hover
		color: $main-color-light


.mini-profile-photo img
	width: $usr-img
	height: auto
	display: block
	margin: auto



.profile-data
	@extend .clear-fix
	clear: both
	padding: 0 0 1em 0
	text-align: center
	background: $bloc-background-color
	.mini-profile &
		display: none
	li
		display: inline
		margin: 0 5px
		float: none
		a
			color: $dark-grey
			display: inline-block
			font-size: 13px
			padding-bottom: 3px
			&:hover
				color: $main-color-light
			span
				&.posts-count, &.following-count, &.followers-count
					display: inline-block
					padding-right: 5px
.mini-profile
	a
		span.following-count
			display: block 
			font-weight: 900
			font-size: 1.2rem
			color: lighten($dark-grey,20%)
		&:hover span.following-count
			color: $dark-grey

.mini-profile-info a:hover
	text-decoration: none

.who-follow
	display: block
	position: absolute
	bottom: 10px
	padding: 10px
	width: 100%
	background: $bloc-light-color
	font-size: 12px
	z-index: 10
	+transition(all .2s linear)
	+box-shadow(-8px 0 13px rgba(#111, 0.2))


.show-more-followers
	@extend button 
	@extend .small
	float: right
	margin-right: 5px

.mini-follower-link, .followed-by
	display: inline-block
	margin: 1px 5px
	line-height: 12px
	&.isFollowing:after
		display: none




/***************** POST AREA ***************/

.post-area-new
	
	textarea
		resize: none
		+box-sizing(border-box)
		width: 100%
		display: block
		transition: all .3s linear
		-webkit-transition: height 0.3s linear
		-moz-transition: height 0.3s linear
		-o-transition: height 0.3s linear
		-ms-transition: height 0.3s linear
		height: $mini-usr-img
		border: none
		background: rgba(255, 255, 255, 1)
		border: 1px solid rgba(0, 0, 0, 0.1)
		padding: 5px
		margin: 5px 0
		&:focus
			border-bottom: solid 1px $main-color-color

.mini-profile .post-area
	display: none




#post-preview 
	border: 1px solid $main-background-color 
	border-bottom: 0
	padding: 5px
	+transition-property(all)
	+transition-duration(.1s)
	width: 100%!important
	font-size: 90%
	word-wrap: break-word
	clear: left





.post-area-new.open textarea
	height: 80px

textarea.splited-post
	box-shadow: none!important
	height: 28px

.splited-post-counter
	color: rgba(0, 0, 0, 0.3)
	font-weight: bold
	&:before
		content: '\2026'

.post-area-extras
	overflow: hidden
	height: 0
	text-align: right

.post-area-new.open > .post-area-extras
	height: auto
	transition: all .6s linear

.post-area-remaining
	padding-right: 3px
	&.warn
		color: #ff0000





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

.who-to-follow
	&.module

		li 
			button 
				position: absolute 
				right: 10px
				top: 10px
				@extend .small
				display: none 
			&:hover button 
				display: block



img.twister-user-photo
	float: left
	display: block
	float: left
	width: $micro-usr-img
	height: auto
	margin: 0 10px 0 0




.followers
	font-size: 12px
	label, a
		display: inline-block

.followed-by
	font-size: 12px
	cursor: pointer
	display: block

.twister-user-name, .twister-by-user-name
	font-weight: 500
	font-size: 14px
	text-decoration: none
	color: $main-color-dark
.twister-user-name
	font-weight: 700


.twister-user-tag
	font-size: 12px
	line-height: 14px
	opacity: .8
	display: inline-block
	letter-spacing: 0px

.twister-user-remove
	font-size: 13px
	opacity: .5
	text-decoration: none
	cursor: pointer
	position: absolute
	padding: 5px
	top: 0
	right: 0
	display: block
	@extend .ion-close
	@extend .ion

.twister-user:hover .twister-user-remove
	text-decoration: none

.twister-user-remove:hover
	opacity: 1

.refresh-toptrends, .twistday-reminder .refresh, .refresh-users
	@extend .ion-shuffle
	@extend .ion
	color: lighten($main-color-dark,30%)
	cursor: pointer
	font-size: .7rem
	font-weight: 500
	text-transform: none
	letter-spacing: 0
	float: right
	display: block
	margin:  10px 
	position: relative

.view-all-users
	color: lighten($main-color-dark,30%)
	cursor: pointer
	font-size: .7rem
	font-weight: 500
	text-transform: none
	letter-spacing: 0
	float: right
	display: block
	margin:  10px 
	position: relative
	@extend .ion-eye
	@extend .ion
.refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover
	color: $main-color-color
	text-decoration: none
	background-color: transparent

/***********TOP TRENDS***************/

.toptrends-list
	margin: 0
	clear: both
	border-top: 1px solid $main-background-color
	padding: 10px

	li
		display: inline-block

	a
		color: $main-color-light
		padding: 3px 8px
		display: inline-block
		text-transform: uppercase
		font-size: 11px
		margin: 3px
		font-weight: 500
		background: white
		+box-shadow(0 5px 8px rgba(#555, 0.2))
		&:hover
			color: $main-color-dark

/********* TWISTDAY REMINDER *******/

.twistday-reminder
	

	.twister-user-full, .twister-user-tag
		font-size: .9rem 
		line-height: 1rem 
		color: $defaut-font-color
		font-weight: 500
		opacity: 1 
		display: inline-block
	.twisterday 
		font-size: 12px


/******* LOADER *************/

.postboard-loading, .loading-roller
	font-size: 100px
	width: .4em
	height: .4em
	position: relative
	list-style: none
	border-radius: 50%
	margin:  100px auto
	display: none

	div 
		width: .1em
		height: .1em
		position: absolute
		border-radius: 50%

		&:nth-child(1) 
			background: #62839F
			top: 0
			left: 50%
			margin-left: -.05em 
			transform-origin: 50% 250%
			animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate


		&:nth-child(2) 
			background: #749294
			top: 50% 
			right: 0
			margin-top: -.05em 
			transform-origin: -150% 50%
			animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate


		&:nth-child(3) 
			background: #94AC7E
			bottom: 0
			left: 50% 
			margin-left: -.05em 
			transform-origin: 50% -150%
			animation:  rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate


		&:nth-child(4) 
			background: #B4C669
			top: 50% 
			left: 0
			margin-top: -.05em 
			transform-origin: 250% 50%
			animation: rota 1.72s linear infinite,  opa 5.25s ease-in-out infinite alternate

@keyframes rota 
	to
		transform: rotate(360deg)


@keyframes opa 
	12.0% 
		opacity: 0.80
	19.5% 
		opacity: 0.88
	37.2% 
		opacity: 0.64
	40.5% 
		opacity: 0.52
	52.7% 
		opacity: 0.69
	60.2% 
		opacity: 0.60
	66.6% 
		opacity: 0.52
	70.0% 
		opacity: 0.63
	79.9% 
		opacity: 0.60
	84.2% 
		opacity: 0.75
	91.0% 
		opacity: 0.87



/* Options*/

.options
	.appearance div
		clear: both
		div
			float: left
			clear: none
			padding: 10px
			.label
				font-weight: 400

	#filterLangList
		width: 90%

	#filterLangListCont div, #TopTrendsCont div, #TwistdayReminderCont div
		float: none
		padding: 0px 4px

.suboptions
	margin: 5px 30px
	border: double 2px rgba(69, 71, 77, 0.1)
	height: 0px
	padding: 0!important
	overflow: hidden
	float: right
	transition: height .3s linear
	-webkit-transition: height .3s linear
	-moz-transition: height .3s linear
	-o-transition: height .3s linear
	-ms-transition: height .3s linear
	font-size: .9em
	line-height: .9em
	font-style: italic
	div
		float: none!important
	span
		font-style: normal

/********** AUTOCOMPLETING *********/

.textcomplete-wrapper textarea
	display: inline

ul.dropdown-menu
	min-width: 160px
	padding: 5px 0 7px
	margin: 2px 0 0
	list-style: none
	background-color: #fff
	border: 1px solid rgba(0, 0, 0, 0.2)
	border-bottom: solid 2px #B4C669
	@extend .box-shadow
	li
		> li > a
			padding: 3px 20px
			white-space: nowrap
			transition: all 100ms

/* Language filter messages */

.langFilterSimData
	color: rgba( 0, 0, 0, .7 )
	font: 10px "Open Sans", sans-serif
	text-align: center

.langFilterSimData em
	color: #B4C669


@import 'layout/_responsive'