github.com/maeglindeveloper/gqlgen@v0.13.1-0.20210413081235-57808b12a0a0/example/chat/src/components/room.js (about)

     1  import styled from 'styled-components';
     2  
     3  export const Chat = styled.div`
     4      padding: 4px;
     5      margin: 0 0 12px;
     6      max-width: 400px;
     7      max-height: 400px;
     8      border: 1px solid #ccc;
     9      background-color: #babdc6;
    10      overflow-x: hidden;
    11      overflow-y: scroll;
    12      position: relative;
    13      font: 14px verdana;
    14  `;
    15  
    16  export const ChatContainer = styled.div`
    17      &:after {
    18          content: "";
    19          display: table;
    20          clear: both;
    21      }
    22  `;
    23  
    24  const ChatLine = styled.div`
    25      color: #000;
    26      clear: both;
    27      line-height: 120%;
    28      padding: 8px;
    29      position: relative;
    30      margin: 8px 0;
    31      max-width: 85%;
    32      word-wrap: break-word;
    33      z-index: 1;
    34  
    35    &:after {
    36      position: absolute;
    37      content: "";
    38      width: 0;
    39      height: 0;
    40      border-style: solid;
    41    }
    42  
    43    span {
    44      display: inline-block;
    45      float: right;
    46      padding: 0 0 0 7px;
    47      position: relative;
    48      bottom: -4px;
    49    }
    50  
    51  }`;
    52  
    53  export const MessageReceived = styled(ChatLine)`
    54      background: #fff;
    55      border-radius: 0px 5px 5px 5px;
    56      float: left;
    57  
    58      &:after {
    59          border-width: 0px 10px 10px 0;
    60          border-color: transparent #fff transparent transparent;
    61          top: 0;
    62          left: -4px;
    63      }
    64  
    65      span {
    66          display: block;
    67          color: #bbb;
    68          font-size: 10px;
    69      }
    70  `;
    71  
    72  export const Message = styled(ChatLine)`
    73      background: #e1ffc7;
    74      border-radius: 5px 0px 5px 5px;
    75      float: right;
    76  
    77      &:after {
    78          border-width: 0px 0 10px 10px;
    79          border-color: transparent transparent transparent #e1ffc7;
    80          top: 0;
    81          right: -4px;
    82      }
    83  `;