theme_nin/sass/style.sass

@import '../css/jquery.mCustomScrollbar.css'


@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: 100%
	max-width: 100%
	margin: auto
	padding-top: $menu-height
	position: relative
	z-index: 1

.dashboard
	&.left
		position: absolute 
		top: $menu-height 
		left: 0
		width: 30%
		> .module
			float: right
	&.right 
		position: fixed 
		right: 0
		top: $menu-height 
		overflow: hidden
		width: 30%

	> .module
		max-width: 320px
		margin-bottom: 20px
		background: $bloc-light-color
		width: 100%
		@extend .box-shadow
		h3
			float: left
			padding: 20px
		h4 
			clear: left
			border-top: 1px solid $main-background-color
			padding: 10px






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

		
	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
		text-align: center
		border-right: 1px solid $main-background-color
		&:last-child 
			border: none

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

	.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: 48px
		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

#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-preview 
	background: $bloc-background-color 
	border: 1px solid $main-background-color 
	padding: 15px
	+transition-property(all)
	+transition-duration(.1s)
	width: 100%!important





.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
		.bio 
			text-align: left!important


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

.twister-user
	position: relative
	box-sizing: border-box
	background: $bloc-light-color
	@extend .clear-fix
	border-top: 1px solid $main-background-color
	width: 100%
	min-height: auto
	padding: 10px 0
	clear: left
	+transition-property(background)
	+transition-duration(.1s)
	@extend .clear-fix
	&:hover 
		background: white



img.twister-user-photo
	float: left
	display: block
	float: left

	width: 48px
	height: auto
	margin: 0 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


	small
		display: none
	.twister-user 
		
		background: $bloc-light-color
		position: relative
		+transition-property(background)
		+transition-duration(.1s)
		&:hover 
			background: white

	.twister-user-full, .twister-user-tag
		padding: 0 0 .5rem 0
		font-size: 1rem 
		line-height: 1rem 
		color: $defaut-font-color
		font-weight: 500
		opacity: 1 
		letter-spacing: 0
		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'