Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16825 efrain 1 
.chat-wrapper {
2 
  height: calc(100vh - #{$navbar-height} - 102px);
3 
  @media(max-width: 991px) {
4 
    min-height: 100%;
5 
  }
6 
  @media(max-width: 991px) {
7 
    height: 100%;
8 
  }
9 
  .chat-aside {
10 
    @media(min-width: 992px) {
11 
      padding-right: 23px;
12 
    }
13 
    .aside-body {
14 
      .tab-content {
15 
        .tab-pane {
16 
          position: relative;
17 
          max-height: calc(100vh - 385px);
18 
          .chat-list {
19 
            .chat-item {
20 
              a {
21 
                > div {
22 
                  padding-top: 11px;
23 
                  padding-bottom: 11px;
24 
                }
25 
              }
26 
            }
27 
          }
28 
        }
29 
      }
30 
    }
31 
  }
32 
  .chat-content {
33 
    @media(max-width: 991px) {
34 
      position: absolute;
35 
      background: $card-bg;
36 
      left: 0;
37 
      bottom: -1px;
38 
      top: 0;
39 
      right: 0;
40 
      display: none;
41 
      &.show {
42 
        display: block;
43 
      }
44 
    }
45 
    .chat-header {
46 
      padding: 0 10px;
47 
    }
48 
    .chat-body {
49 
      position: relative;
50 
      max-height: calc(100vh - 340px);
51 
      @media(max-width: 767px) {
52 
        max-height: calc(100vh - 315px);
53 
      }
54 
      @media(max-width: 991px) {
55 
        max-height: calc(100vh - 342px);
56 
      }
57 
      margin-top: 20px;
58 
      margin-bottom: 20px;
59 
      .messages {
60 
        padding: 0 10px;
61 
        list-style-type: none;
62 
        .message-item {
63 
          display: flex;
64 
          max-width: 80%;
65 
          margin-bottom: 20px;
66 
          @media(max-width: 767px) {
67 
            max-width: 95%;
68 
          }
69 
          .content {
70 
            .bubble {
71 
              position: relative;
72 
              padding: 7px 15px;
73 
              margin-bottom: 4px;
74 
              width: -webkit-fit-content;
75 
              width: -moz-fit-content;
76 
              width: fit-content;
77 
            }
78 
            span {
79 
              font-size: 12px;
80 
              color: $text-muted;
81 
            }
82 
          }
83 
          &.friend {
84 
            img {
85 
              order: 1;
86 
              margin-right: 15px;
87 
            }
88 
            .content {
89 
              order: 2;
90 
              .bubble {
91 
                background: rgba($primary, .1);
92 
                border-radius: 0 5px 5px;
93 
                &::before {
94 
                  content: '';
95 
                  width: 0;
96 
                  height: 0;
97 
                  position: absolute;
98 
                  left: -10px;
99 
                  top: 0;
100 
                  border-top: 5px solid rgba($primary, .1);
101 
                  border-bottom: 5px solid transparent;
102 
                  border-left: 5px solid transparent;
103 
                  border-right:5px solid rgba($primary, .1);
104 
                }
105 
              }
106 
            }
107 
          }
108 
          &.me {
109 
            margin-left: auto;
110 
            img {
111 
              order: 2;
112 
              margin-left: 15px;
113 
            }
114 
            .content {
115 
              order: 1;
116 
              margin-left: auto;
117 
              .bubble {
118 
                background: rgba($info, .1);
119 
                border-radius: 5px 0 5px 5px;
120 
                margin-left: auto;
121 
                &::before {
122 
                  content: '';
123 
                  width: 0;
124 
                  height: 0;
125 
                  position: absolute;
126 
                  right: -10px;
127 
                  top: 0;
128 
                  border-top: 5px solid rgba($info, .1);
129 
                  border-bottom: 5px solid transparent;
130 
                  border-left: 5px solid rgba($info, .1);
131 
                  border-right:5px solid transparent;
132 
                }
133 
              }
134 
              span {
135 
                text-align: right;
136 
                display: block;
137 
              }
138 
            }
139 
          }
140 
        }
141 
      }
142 
    }
143 
  }
144 
  figure {
145 
    position: relative;
146 
    .status {
147 
      width: 11px;
148 
      height: 11px;
149 
      background: $secondary;
150 
      position: absolute;
151 
      bottom: 0px;
152 
      right: -2px;
153 
      border-radius: 50%;
154 
      border: 2px solid $card-bg;
155 
      &.online {
156 
        background: $success;
157 
      }
158 
      &.offline {
159 
        background: $secondary;
160 
      }
161 
    }
162 
  }
163 
}