theme_nin/sass/style.sass

@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/_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
	@extend .clear-fix
	float: right

	li
		cursor: pointer
		display: inline-block
		margin: 0 0 0 5px
		padding: 5px 15px
		font-size: .9em
		transition: color .1s linear
		&.active
			color: $main-color-dark
			background: white
			cursor: default
		&:hover, &.disabled:hover
			color: $main-color-dark
		&.disabled
			color: $main-color-light
			background: $light-grey






/* Wrapper and blocks */
.wrapper
	width: 50%
	max-width: 100%
	margin: auto
	padding-top: $menu-height
	position: relative
	z-index: 1

.dashboard
	&.left
		position: fixed 
		top: $menu-height 
		left: 0
		height: 100vh
		overflow: hidden
		width: 25%
	&.right 
		position: fixed 
		right: 0
		top: $menu-height 
		overflow: hidden
		width: 25%









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

.dialog-modal
	display: none
	background: $main-color-dark
	position: absolute
	top: 45px
	right: -10px
	width: 250px
	overflow: hidden
	@extend .box-shadow

.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
	background: white
	li
		float: none
		display: block
		padding: 5px 10px
		margin: 0
		@extend .clear-fix
		border-bottom: 1px solid $main-background-color
	.mini-profile-name
		font-size: 12px
		display: block
		margin: 0
		padding: 0
	.mini-profile-photo
		width: 30px
		height: 30px
		margin: 0 10px 0 0
		float: left
	.mini-profile-info
		width: 100%
		float: none

	button
		padding: 3px
		@extend .extend-icon
		&:after
			content: ''
			font-family: $symbol-font-family
		.follow .unfollow
			position: absolute
			bottom: 10px
			right: 10px
			&:hover
				background-color: $main-color-light
		.follow
			background-color: $main-color-color
			@extend .icon-plus
		.unfollow
			background-color: $main-color-dark
			@extend .icon-minus


.userMenu-search input[type="text"]
	float: right
	padding: 3px 10px
	margin: 9px 20px 0 0
	border: none
	background: $bloc-background-color
	box-sizing: border-box

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






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

.mini-profile
	@extend .box-shadow
	.mini-profile-info
		position: relative
		text-align: center
		background: $bloc-background-color
		padding: 20px 0
		
	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
	border-bottom: 1px solid $main-background-color
	background: white 

	li
		+box-sizing(border-box)
		display: block
		position: relative
		font-size: .8em
		width: 25%
		float: left
		border-right: 1px solid $main-background-color
		&:last-child 
			border: none

		a
			color: $dark-grey
			display: block
			padding: 1em 0
			&:hover
				text-decoration: underline


	.userMenu-connections a
		@extend .icon-bell
		@extend .extend-icon
	.userMenu-messages a
		@extend .icon-mail
		@extend .extend-icon
	.userMenu-user a
		@extend .icon-user
		@extend .extend-icon

.messages-qtd
	position: absolute
	top: 50%
	margin-top: -11px
	right: 11px
	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

.mini-profile-name
	color: $dark-grey
	font-size: 1.3em
	font-weight: 700
	padding: 10px  0
	display: block
	margin: auto
	&:hover
		color: $main-color-light


.mini-profile-photo
	width: 70px
	height: 70px
	overflow: hidden
	+border-radius(50%)
	display: block
	margin: auto
	img
		min-width: 100%
		min-height: 100%
		border-radius: (50%)



.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-info a:hover
	text-decoration: none

.who-follow
	display: block
	position: absolute
	bottom: 10px
	text-align: center
	padding: 10px
	font-size: 12px
	z-index: 10
	+transition(all .2s linear)

.show-more-followers
	font-weight: 700
	display: block
	cursor: pointer
	float: right
	color: $dark-grey

.mini-follower-link
	display: inline-block
	margin: 1px
	line-height: 12px
	&.isFollowing:after
		display: none
	&:after
		content: '·'
		font-weight: 900
		color: $main-color-dark
		margin-left: 1px



/***************** 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: 28px
		border: none
		background: rgba(255, 255, 255, 1)
		border: 1px solid rgba(0, 0, 0, 0.1)
		padding: 3px
		margin: 5px 0
		&:focus
			border-bottom: solid 1px $main-color-color

#postboard-top
	clear: both
	position: relative
	@extend .clear-fix
	margin-bottom: 1px
	transition: height .3s linear
	padding: 10px 10px 5px 10px
	background: white
	overflow: hidden
	display: none
	&.hide
		display: none!important
	&.show
		display: block

	.profile-photo
		position: absolute
		top: 10px
		left: 10px
		width: 48px
		height: 48px
		overflow: hidden
		img
			width: 100%
	.post-area
		overflow: hidden
		@extend .clear-fix
		width: 100%
		padding-left: 58px
		padding-right: 0
		display: inline
		+box-sizing(border-box)
		float: right
		.post-area-new
			@extend .open
			+box-shadow(none)
			textarea
				margin: 0 0 10px 0







.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
		margin-bottom: 20px
		background: white
		padding: 20px
		width: 100%
		@extend .box-shadow
		li 
			width: 100%
			min-height: auto
			border-bottom: 1px solid $main-background-color
			margin: 0
			padding-bottom: 10px
			margin-top: 10px
			&:last-child 
				border: none
			@extend .clear-fix
			button 
				position: absolute 
				right: 0
				top: 20%


	small
		display: none
	h3
		float: left
	ol
		@extend .clear-fix
		clear: both

.twister-user
	position: relative
	box-sizing: border-box
	background: $bloc-background-color
	@extend .clear-fix
	@extend .col 
	@extend .col-3
	width: 100%
	min-height: auto
	&:nth-child(4n) 
		@extend .last



img.twister-user-photo
	+border-radius(50%)
	float: left
	vertical-align: middle
	display: block
	float: left
	vertical-align: middle
	width: 48px
	height: 48px
	margin: 10px
	background: $main-background-color




.followers
	font-size: 12px
	color: $dark-grey
	label, a
		display: inline-block

.followed-by
	color: $main-color-light
	font-size: 12px
	cursor: pointer
	display: block

.twister-user-name, .twister-by-user-name
	font-weight: bold
	font-size: 14px
	color: $main-color-light
	text-decoration: none

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

.twister-user-remove
	font-size: 13px
	opacity: .2
	text-decoration: none
	cursor: pointer
	position: absolute
	padding: 5px
	top: -5px
	right: -5px
	display: inline-block
	@extend .icon-cancel
	@extend .extend-icon

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

.twister-user-remove:hover
	opacity: 1

.refresh-toptrends, .twistday-reminder .refresh, .refresh-users
	@extend .icon-arrows
	@extend .extend-icon
	color: $main-color-dark
	cursor: pointer
	font-size: 11px
	font-weight: 500
	text-transform: none
	letter-spacing: 0
	float: right
	display: block
	padding: 4px
	margin: 0 0 0 15px
	position: relative

.view-all-users
	color: $main-color-dark
	cursor: pointer
	font-size: 11px
	font-weight: 500
	text-transform: none
	letter-spacing: 0
	float: right
	display: block
	padding: 4px
	margin: 0 0 0 15px
	position: relative

.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
	&.module
		margin: 0 0 20px 0
		padding: 0 20px
	small
		display: none
	h3
		float: left

ol.toptrends-list
	margin: 0
	margin-bottom: 10px
	clear: both

	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
		@extend .box-shadow
		&:hover
			background: rgba(white,.4)
			color: $main-color-dark

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

.twistday-reminder
	width: 100%
	background: white
	@extend .box-shadow
	@extend .clear-fix
	padding: 20px
	small
		display: none





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

.postboard-loading, .loading-roller
	clear: both
	text-align: center
	div
		display: inline-block
		width: 120px
		height: 10px
		background-color: $main-color-light
		position: relative
		margin: 10px 0 0 0
		&:after
			content: ""
			position: absolute
			background-color: white
			left: 2px
			top: 2px
			bottom: 2px
			z-index: 999
			animation-name: slide
			animation-duration: 1.5s
			animation-easing-function: linear
			animation-iteration-count: infinite
			-webkit-animation-name: slide
			-webkit-animation-duration: 1.5s
			-webkit-animation-easing-function: linear
			-webkit-animation-iteration-count: infinite
			-moz-animation-name: slide
			-moz-animation-duration: 1.5s
			-moz-animation-easing-function: linear
			-moz-animation-iteration-count: infinite

@keyframes slide
	0%
		right: 60px
		left: 2px
	5%
		left: 2px
	50%
		right: 2px
		left: 60px
	55%
		right: 2px
	100%
		right: 60px
		left: 2px


@-webkit-keyframes slide
	0%
		right: 100px
		left: 2px
	5%
		left: 2px
	50%
		right: 2px
		left: 100px
	55%
		right: 2px
	100%
		right: 100px
		left: 2px


@-moz-keyframes slide
	0%
		right: 60px
		left: 2px
	5%
		left: 2px
	50%
		right: 2px
		left: 60px
	55%
		right: 2px
	100%
		right: 60px
		left: 2px


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