theme_nin/sass/style.sass

@import _fonts
@import compass
@import 'compass/reset'
@import 'compass/utilities'
@import _var
@import _utils
@import _menu
@import _profile
@import _postboard
@import _following
@import _login
@import _network
@import _commons
@import _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: $background-light






/* Wrapper and blocks */
.wrapper
  width: $site-width
  max-width: 100%
  margin: 0 auto
  padding-top: 70px
  position: relative
  z-index: 1
  min-height: 100%

.dashboard
  &.left, &.right
    @extend .col 
    @extend .col-3
    position: relative
  &.right 
    @extend .last
    height: 0
    background: #ededed
    @extend .col-4







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

.dialog-modal
  display: none
  background: $main-color-dark
  position: absolute
  top: 45px
  right: -10px
  width: 250px
  overflow: hidden
  border-bottom: solid 2px $main-color-color
  box-shadow: 8px 10px 15px 0px rgba(0,0,0, .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
  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


.follow-suggestions
  button
    .follow .unfollow
      position: absolute
      bottom: 10px
      right: 10px
      &:hover
        background-color: $main-color-light
    .follow
      background-color: $main-color-color
    .unfollow
      background-color: $main-color-dark
  li 
    position: relative
    box-sizing: border-box
    background: $bloc-background-color
    @extend .clear-fix
    @extend .col 
    @extend .col-3
    min-height: 100px
    margin-bottom: 20px
    &:nth-child(4n) 
      @extend .last
    &:nth-child(4n+1)
      clear: left



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

.mini-profile
  .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
    background: $background-light
    @extend .clear-fix
  .post-area-new
    @extend .open
    padding: 0
    margin: 0
    textarea
      width: 100%

.mini-profile-indicators
  margin: 0 
  text-align: center
  @extend .clear-fix
  background-color: lighten($background-light,4%)

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

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

      &:before
        display: none!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

  li
    display: block
    @extend .col 
    @extend .col-4 
    +box-sizing(border-box)
    &.current a
      border-bottom: 3px solid $main-color-color
    &:last-child 
      @extend .last
    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
          font-weight: 900
          display: block
          line-height: 15px




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

.who-follow
  display: block
  position: absolute
  bottom: 10px
  text-align: center
  padding: 10px
  font-size: 12px
  background: lighten($background-light, 5%)
  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-shadow: none!important
    +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 2px $color-green

#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
      textarea
        margin: 0 0 5px 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 MODAL*******/

.modal-wrapper.who-to-follow-modal
  .modal-content
    padding: 15px
    +box-sizing(border-box)
  ol
    margin: 5px
  .open-profile-modal
    &:hover
      text-decoration: none
  .twister-user
    position: relative
    padding: 5px



  .bio
    color: rgba(0, 0, 0, 0.6)
    font-style: italic


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

.who-to-follow
  &.module
    margin-bottom: 20px
    background: white
    padding: 20px
    width: 100%
    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
  border-bottom: 1px solid $background-light
  &:nth-child(4n) 
    @extend .last
  .twister-user-info
    width: 80%
  button 
    position: absolute 
    right: 0
    top: 5%


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
    background: white
    padding: 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
    background: $background-light
    text-transform: uppercase
    font-size: 11px
    margin: 3px
    font-weight: 500

    &:hover
      background: white
      color: $main-color-dark

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

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


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

.modal-wrapper
  background: white
  z-index: 3000
  width: 100%
  position: absolute
  +box-sizing(border-box)
  height: 100%
  left: 0
  top: 0
  overflow: hidden
  .post-area-new
    padding: 10px

.modal-blackout
  background: rgba(0, 0, 0, 0)
  z-index: -1
  position: fixed
  left: 0
  top: 0
  width: 0
  height: 0

.modal-content
  @extend .clear-fix
  background: $background-light
  overflow-y: auto
  .postboard h2
    position: fixed
    z-index: 2
    margin-top: -60px
    margin-left: -60px
    span
      display: none




.modal-header
  position: relative
  background: $main-color-dark
  height: 40px
  +box-sizing(border-box)
  @extend .clear-fix
  border-bottom: 1px solid $background-light

  h3
    padding-left: 20px
    color: white
    line-height: 40px

.modal-close
  @extend .extend-icon
  @extend .icon-cancel
  position: absolute
  right: 10px
  top: 0
  font-size: 14px
  line-height: 40px
  cursor: pointer
  color:  rgba(white , 0.7)
  &:hover
    color: white
  b
    display: none

.mark-all-as-read
  float: right
  cursor: pointer
  font-size: 1.3em
  line-height: 40px
  padding: 0 5px
  color:  white
  transition: all .1s linear
  display: none
.modal-back:hover, .mark-all-as-read:hover
  color: white

.mark-all-as-read
  @extend .extend-icon
  @extend .icon-ok


.modal-back
  @extend .extend-icon
  @extend .icon-left
  position: absolute
  right: 35px
  top: 0
  font-size: 14px
  line-height: 40px
  cursor: pointer
  color:  rgba(white , 0.7)
  &:hover
    color: white
  b
    display: none

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

.prompt-wrapper
  background: rgba( 255, 255,255, 1.0 )
  z-index: 5
  position: fixed
  top: 50%
  left: 50%
  width: 600px
  margin-left: -300px
  box-shadow: 0 0 30px rgba( 0, 0, 0, .6 )
  .modal-buttons
    padding: 10px
    text-align: right
    button:last-child
      padding: 5px 20px

/************ FOLLOWING-CONFIG MODAL **********/

.prompt-wrapper.following-config-modal
  margin-top: -100px
  .modal-content
    padding: 10px
    text-align: center
  .modal-buttons
    display: none
  h2
    text-transform: none
.following-config-method-buttons
  .public-following
    background-color: $color-green
    margin: 0px 2px
    padding: 6px 16px

/************ RETWIST POSTS MODAL **********/

.prompt-wrapper.reTwist
  &.prompt-wrapper
    margin-top: -110px
  .modal-content
    padding: 20px 15px
  .modal-buttons
    .modal-propagate
      background-color: $color-green
  .post-expand, .post-interactions
    display: none

/********* REPLY POSTS MODAL***************/

.prompt-wrapper.reply
  &.prompt-wrapper
    margin-top: -110px
  .modal-buttons, .post-expand, .post-interactions
    display: none
  .post-area
    padding-bottom: 6px

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

.modal-wrapper.directMessages

  .post-area-new
    display: none
    z-index: 5
    background: $main-background-color
    position: absolute 
    bottom: 0
    width: 100%
    padding: 0!important
    .modal-header
      h3 span
        display: inline!important

  .modal-content
    +box-sizing(border-box)
    width: 100%

  .post-photo
    height: 48px
    width: 48px
  .post-text
    margin-left: 58px
    font-size: .9em
  .post-info-name
    float: none
  .post-info-tag
    line-height: 1em
    padding: 0
    display: inline
    font-size: 80%
    margin: 0 0 0 1em
  .post-info-sent  
    position: absolute
    left: 50%
    top: 10px
    display: none

.direct-messages-list .post
  padding: 20px
  cursor: pointer
  &:after
    content: ""
    font-family: $symbol-font-family
    position: absolute
    right: 5px
    top: 50%
    font-size: 1.1em
    margin: -6px 0 0 0
    color: rgba(0, 0, 0, 0.4)
    display: none

.direct-messages-list
  .post:hover:after
    display: block

.direct-messages-thread
  padding-bottom: 150px
  .post
    @extend .clear-fix
    background: none
    left: 0
    margin: 0px 10px 20px 10px
    cursor: default
    .post-info-time
      float: none
      display: block
      text-align: center
      font-size: 10px
      margin: 10px 0
      cursor: default
      &:hover
        color: $main-color-light


    .post-text:after, .post-text:nth-child(2n):after
      content: ""
      width: 1px
      background: transparent
      position: absolute
      top: 10px
      white-space: normal

    .post-text:after
      border-top: solid 7px transparent
      border-bottom: solid 7px transparent
      border-right: solid 7px white
      left: -7px

    .post-text
      background: white
      margin-right: 60px
      margin-left: 60px
      position: relative
      display: inline-block
      max-width: 300px
      font-size: .9em
      padding: 5px 10px
      z-index: 4
      float: left
      word-wrap: break-word
      max-width: 60%
      min-height: 15px

    .post-photo
      position: absolute
      left: 0
      top: 10px



  .post.sent

    .post-text:after
      border-top: solid 7px transparent
      border-bottom: solid 7px transparent
      border-right: none
      border-left: solid 7px white
      right: -7px
      left: auto
    .post-text
      float: right
    .post-photo
      position: absolute
      right: 0
      left: auto



/********* NEW USER MODAL**************/

.modal-wrapper.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: 110%

/******** HASHTAG MODAL***********/

.modal-wrapper.hashtag-modal

  .postboard
    padding: 0

/****** CONVERSATION MODAL***********/

.modal-wrapper.conversation-modal

  .postboard
    padding: 0

/****** FOLLOWING MODAL*******/

.modal-wrapper.following-modal

  .modal-content
    padding: 0
  ol
    margin: 5px
  .open-profile-modal
    &:hover
      text-decoration: none
  .postboard
    h2
      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
  box-shadow: 8px 10px 10px 0px rgba(0,0,0, .2)
  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 _responsive