@charset "utf-8";
/**
 * Created by chenglong.wang@yoho.cn on 2014/1/7.
 */

//评论
.comment{
  margin: 25px 15px 0 15px;
  //公用
  .userimg{
    width: 40px;
    height: 40px;
    img{
      width: 100%;
      height: 100%;
      display: block;
      overflow: hidden;
      @include border-radius(20px);
    }
  }
  //态度
  .statslist{
    margin: 0 5px 30px 5px;
    height: auto;
    overflow: hidden;
    >li{
      float: left;
      width: 25%;
      height: 30px;
      position: relative;
      &:nth-last-of-type(1) {
        &:before{
          display: block;
          content: '';
          border-left: 1px solid #000;
          width: 1px;
          height: 100%;
          position: absolute;
          top: 0;
          left: 10px;
        }
      }
      @each $i, $isLike in (1: smile, 2: nothing, 3: bad, 4: comment) {
        &:nth-of-type(#{$i}) {
          >div{
            @include retina-sprite($icons,#{$isLike},true,0);
            z-index: 100;
          }

          &.current{
            >div{
              @include retina-sprite($icons,current_#{$isLike},true,0);
            }
          }
        }
      }
      span{
        display: block;
        width: 31px;
        height: 31px;
        position: relative;
        >i{
          position: absolute;
          left: 30px;
          bottom: 3px;
          color: #000;
          display: none;
          font-size: 1.2rem;
        }
        >img{
          position: absolute;
          left: 30px;
          bottom: 3px;
          display: block;
          width: 16px;
        }
      }
      #comment-num{
        position: absolute;
        left: 30px;
        bottom: 3px;
        width: auto;
        height: auto;
        font-size: 1.2rem;
        >img{
          position: absolute;
          left: 0;
          bottom: 0;
          width: 16px;
        }
      }
    }
  }
  //评论分页
  .pager-content{
    margin-top: 20px;
    position: relative;
    height: 25px;
    a{
      color: #000;
      @include hide-text();
    }
    .switch-prev{
      float: left;
      @include retina-sprite($icons,prev);
    }
    .switch-next{
      float: right;
      @include retina-sprite($icons,next);
    }
  }

  //评论列表
  ul.comments-list{
    width: 100%;
    li{
      border-bottom: 1px solid #ccc;
      padding-bottom: 18px;
      margin-bottom: 10px;
      .userimg{
        position: relative;
        float: left;
        margin-right: 15px;
      }
      @each $comment-user in qq, weibo, yoho, fb {
        .#{$comment-user} {
          @include retina-sprite($icons,#{$comment-user},false,false);
          position: absolute;
          right: -5px;
          bottom: -2px;
        }
      }
      .userinfo{
        overflow: hidden;
        margin-left: 15px;
        position: relative;
        >h6{
          font-weight: bold;
          font-size: 1.2rem;
        }
        >p{
          font-size: 1.4rem;
          line-height: 20px;
          margin-top: 10px;
          word-wrap:break-word;
          width: 200px;
        }
        .delete-comment{
          @include retina-sprite($icons,del,false,true);
          right: 10px;
        }
      }
    }
  }
  //查看更多
  .view-more{
    text-align: center;
    font-size: 1.4rem;
    margin-top: 20px;
    display: block;
    width: 100%;
    font-weight: bold;
    a{
      color: #000;
      @include unstyled-link();
    }
  }
  //第三方登陆
  .feedback-login{
    margin-top: 10px;
    font-size: 1.4rem;
    color: #999;
    height: 15px;
    line-height: 15px;
    >a{
      margin: 0 5px;
      img{
        height: 15px;
      }
    }
  }
  //评论发布
  .comment-textarea{
    margin-top: 25px;
    border: 1px solid #000;
    >textarea{
      width: 100%;
      height: 54px;
      max-width: 100%;
      max-height: 100%;
      border: none;
      background: none;
      outline: none;
      font-size: 1.4rem;
      color: #999;
      @include box-sizing();
      padding: 0 12px;
      margin: 10px 0 20px 0;
    }
    .login-status{
      border-top: 1px solid #000;
      height: 54px;
      position: relative;
      .userimg{
        position: absolute;
        left: 8px;
        top: 50%;
        margin-top: -20px;
      }
      .userinfo,.anonymous{
        position: absolute;
        top: 21px;
        left: 65px;
        font-size: 1.4rem;
        width: 150px;
        color: #424242;
        font-weight: bold;
        a{
          @include unstyled-link();
          color: #000;
          border-left: 1px solid #000;
          padding: 0 10px;
          margin-left: 10px;
        }
      }
      .publish{
        @include retina-sprite($icons,buy,false,true);
        right: 0;
        line-height: 34px;
        text-align: center;
        font-size: 1.8rem;
        color: #fff;
        a{
          display: block;
          width: 100%;
          height: 100%;
          @include unstyled-link();
        }
      }
    }
  }
}

//评论删除
.comfirm{
  width: 290px;
  border: 2px solid #000;
  height: 150px;
  font-size: 1.4rem;
  text-align: center;
  @include box-sizing();
  padding: 20px;
  background: #fff;
  .comfirm-head{
    position: relative;
    height: 13px;
    a{
      @include retina-sprite($icons,login-close,false,true);
      right: 10px;
      text-indent: -8888px;
    }
  }
  .comfirm-content{
    margin-top: 15px;
  }
  .comfirm-foot{
    margin-top: 15px;
    position: relative;
    overflow: hidden;
    .comfirm-line{
      @include retina-sprite($line,comment-line,true,false);
      top: 5px;
    }
    .comfirm-ctrl{
      margin-top: 25px;
      padding: 0 25px;
      a{
        color: #000;
        @include unstyled-link();
      }
      .cancel{
        float: left;
      }
      .ok{
        float: right;
      }
    }
  }
}