Css chat

Css chat.markdown

Css chat

Chat for my personal project

Forked from Roman Budnikov's Pen Css chat.

A Pen by Bright Spark on CodePen.

License.

index.html

section
  .chat
    ul
      li.other
        a.user href="#"
          img src="https://s3.amazonaws.com/uifaces/faces/twitter/toffeenutdesign/128.jpg" alt=''
        .date 2 minutes ago
        .message.blur
          .hider
            span Click to read
          p Itaque quod et dolore accusantium. Labore aut similique ab voluptas rerum quia. Reprehenderit voluptas doloribus ut nam tenetur ipsam.
      li.other
        a.user href="#"
          img src="https://s3.amazonaws.com/uifaces/faces/twitter/toffeenutdesign/128.jpg" alt=''
        .date 5 minutes ago
        .message
          .hider
            span Click to read
          p Modi ratione aliquid non. Et porro deserunt illum sed velit necessitatibus. Quis fuga et et fugit consequuntur. Et veritatis fugiat veniam pariatur maxime iusto aperiam.
      li.you
        a.user href="#"
          img src="https://s3.amazonaws.com/uifaces/faces/twitter/igorgarybaldi/128.jpg" alt=''
        .date 7 minutes ago
        .message
          .hider
            span Click to read
          p Provident impedit atque nemo culpa et modi molestiae. Error non dolorum voluptas non a. Molestiae et nobis nisi sed.
      li.other
        a.user href="#"
          img src="https://s3.amazonaws.com/uifaces/faces/twitter/toffeenutdesign/128.jpg" alt=''
        .date 8 minutes ago
        .message
          .hider
            span Click to read
          p Id vel ducimus perferendis fuga excepturi nulla. Dolores dolores amet et laborum facilis. Officia magni ut non autem et qui incidunt. Qui similique fugit vero porro qui cupiditate.
      li.you
        a.user href="#"
          img src="https://s3.amazonaws.com/uifaces/faces/twitter/igorgarybaldi/128.jpg" alt=''
        .date 10 minutes ago
        .message
          .hider
            span Click to read
          p Provident impedit atque nemo culpa et modi molestiae. Error non dolorum voluptas non a. Molestiae et nobis nisi sed.
      li.you
        a.user href="#"
          img src="https://s3.amazonaws.com/uifaces/faces/twitter/igorgarybaldi/128.jpg" alt=''
        .date 10 minutes ago
        .message
          .hider
            span Click to read
          p Est ut at eum sed perferendis ea hic. Tempora perspiciatis magnam aspernatur explicabo ea. Sint atque quod.

script.js

$('.hider').click ()->
  $(@).parent('.message').removeClass('blur')

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$font-color: #fff;
$font-color-alter: #333;
$message-color: #2ECC71;

body {
  background-color: #f3f3f3;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

section {
  width: 500px;
  margin: 60px auto;
  background-color: #fff;
  padding: 10px 15px 20px 15px;
}

.chat {
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
    li {
      margin: 45px 0 0 0;
      font-weight: 300;

      a.user {
        margin: -30px 0 0 0;
        display: block;
        color: $font-color-alter;

        img {
          width: 65px;
          height: 65px;
          border-radius: 50%;
          background-color: #f3f3f3;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
      }
        
      .date {
        font-size: 14px;
        color: lighten($font-color-alter, 45);
      }
      
      .message {
        display: block;
        padding: 10px;
        position: relative;
        color: $font-color;
        font-size: 15px;
        background-color: $message-color;
        border-radius: 3px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        
        &:before{
          content: '';
          position: absolute;
          border-top: 16px solid rgba(0,0,0,0.15);
          border-left: 16px solid transparent;
          border-right: 16px solid transparent;
        }

        &:after {
          content: '';
          position: absolute;
          top: 0;
          border-top: 17px solid $message-color;
          border-left: 17px solid transparent;
          border-right: 17px solid transparent;
        }

        &.blur {
          p {
            -webkit-filter: blur(3px);
            -moz-filter: blur(3px);
            -o-filter: blur(3px);
            -ms-filter: blur(3px);
            filter: blur(3px);
          }

          .hider{
            opacity: 1;
            z-index: 1;
          }
        }

        p {
          margin: 0;
          padding: 0;
          transition: all 0.1s;
        }

        .hider {
          opacity: 0;
          z-index: -1;
          position: absolute;
          height: 100%;
          width: 100%;
          margin: -10px;
          text-align: center;
          cursor: pointer;
          transform-style: preserve-3d;
          transition: all 0.1s;

          span {
            display: block;
            position: relative;
            top: 50%;
            font-size: 16px;
            transform: translateY(-50%);
          }
        }
      }
    }
    
    li.other {

      a.user {
        float: right;
      }
      
      .date {
        float: right;
        margin: -20px 10px 0 0;
      }
      
      .message {
        margin: 0 90px 0 0;
        
        &:before {
          margin: -9px -16px 0 0;
          right: 0;
        }

        &:after{
          content: '';
          right: 0;
          margin: 0 -15px 0 0;
        }
      }
    }

    li.you {

      a.user {
        float: left;
      }
      
      .date {
        float: left;
        margin: -20px 0 0 10px;
      }
      
      .message {
        margin: 0 0 0 90px;
        
        &:before {
          margin: -9px 0 0 -16px;
          left: 0;
        }

        &:after{
          content: '';
          left: 0;
          margin: 0 0 0 -15px;
        }
      }
    }
  }
}