]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | /* |
2 | * Component: Direct Chat | |
3 | * ---------------------- | |
4 | */ | |
5 | .direct-chat { | |
6 | .box-body { | |
7 | .border-bottom-radius(0); | |
8 | position: relative; | |
9 | overflow-x: hidden; | |
10 | padding: 0; | |
11 | } | |
12 | &.chat-pane-open { | |
13 | .direct-chat-contacts { | |
14 | .translate(0, 0); | |
15 | } | |
16 | } | |
17 | } | |
18 | ||
19 | .direct-chat-messages { | |
20 | .translate(0, 0); | |
21 | padding: 10px; | |
22 | height: 250px; | |
23 | overflow: auto; | |
24 | } | |
25 | ||
26 | .direct-chat-msg, | |
27 | .direct-chat-text { | |
28 | display: block; | |
29 | } | |
30 | ||
31 | .direct-chat-msg { | |
32 | .clearfix(); | |
33 | margin-bottom: 10px; | |
34 | } | |
35 | ||
36 | .direct-chat-messages, | |
37 | .direct-chat-contacts { | |
38 | .transition-transform(.5s ease-in-out); | |
39 | } | |
40 | ||
41 | .direct-chat-text { | |
42 | .border-radius(5px); | |
43 | position: relative; | |
44 | padding: 5px 10px; | |
45 | background: @direct-chat-default-msg-bg; | |
46 | border: 1px solid @direct-chat-default-msg-border-color; | |
47 | margin: 5px 0 0 50px; | |
48 | color: @direct-chat-default-font-color; | |
49 | ||
50 | //Create the arrow | |
51 | &:after, | |
52 | &:before { | |
53 | position: absolute; | |
54 | right: 100%; | |
55 | top: 15px; | |
56 | border: solid transparent; | |
57 | border-right-color: @direct-chat-default-msg-border-color; | |
58 | content: ' '; | |
59 | height: 0; | |
60 | width: 0; | |
61 | pointer-events: none; | |
62 | } | |
63 | ||
64 | &:after { | |
65 | border-width: 5px; | |
66 | margin-top: -5px; | |
67 | } | |
68 | &:before { | |
69 | border-width: 6px; | |
70 | margin-top: -6px; | |
71 | } | |
72 | .right & { | |
73 | margin-right: 50px; | |
74 | margin-left: 0; | |
75 | &:after, | |
76 | &:before { | |
77 | right: auto; | |
78 | left: 100%; | |
79 | border-right-color: transparent; | |
80 | border-left-color: @direct-chat-default-msg-border-color; | |
81 | } | |
82 | } | |
83 | } | |
84 | ||
85 | .direct-chat-img { | |
86 | .border-radius(50%); | |
87 | float: left; | |
88 | width: 40px; | |
89 | height: 40px; | |
90 | .right & { | |
91 | float: right; | |
92 | } | |
93 | } | |
94 | ||
95 | .direct-chat-info { | |
96 | display: block; | |
97 | margin-bottom: 2px; | |
98 | font-size: 12px; | |
99 | } | |
100 | ||
101 | .direct-chat-name { | |
102 | font-weight: 600; | |
103 | } | |
104 | ||
105 | .direct-chat-timestamp { | |
106 | color: #999; | |
107 | } | |
108 | ||
109 | //Direct chat contacts pane | |
110 | .direct-chat-contacts-open { | |
111 | .direct-chat-contacts { | |
112 | .translate(0, 0); | |
113 | } | |
114 | } | |
115 | ||
116 | .direct-chat-contacts { | |
117 | .translate(101%, 0); | |
118 | position: absolute; | |
119 | top: 0; | |
120 | bottom: 0; | |
121 | height: 250px; | |
122 | width: 100%; | |
123 | background: #222d32; | |
124 | color: #fff; | |
125 | overflow: auto; | |
126 | } | |
127 | ||
128 | //Contacts list -- for displaying contacts in direct chat contacts pane | |
129 | .contacts-list { | |
130 | &:extend(.list-unstyled); | |
131 | > li { | |
132 | .clearfix(); | |
133 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); | |
134 | padding: 10px; | |
135 | margin: 0; | |
136 | &:last-of-type { | |
137 | border-bottom: none; | |
138 | } | |
139 | } | |
140 | } | |
141 | ||
142 | .contacts-list-img { | |
143 | .border-radius(50%); | |
144 | width: 40px; | |
145 | float: left; | |
146 | } | |
147 | ||
148 | .contacts-list-info { | |
149 | margin-left: 45px; | |
150 | color: #fff; | |
151 | } | |
152 | ||
153 | .contacts-list-name, | |
154 | .contacts-list-status { | |
155 | display: block; | |
156 | } | |
157 | ||
158 | .contacts-list-name { | |
159 | font-weight: 600; | |
160 | } | |
161 | ||
162 | .contacts-list-status { | |
163 | font-size: 12px; | |
164 | } | |
165 | ||
166 | .contacts-list-date { | |
167 | color: #aaa; | |
168 | font-weight: normal; | |
169 | } | |
170 | ||
171 | .contacts-list-msg { | |
172 | color: #999; | |
173 | } | |
174 | ||
175 | //Direct Chat Variants | |
176 | .direct-chat-danger { | |
177 | .direct-chat-variant(@red); | |
178 | } | |
179 | ||
180 | .direct-chat-primary { | |
181 | .direct-chat-variant(@light-blue); | |
182 | } | |
183 | ||
184 | .direct-chat-warning { | |
185 | .direct-chat-variant(@yellow); | |
186 | } | |
187 | ||
188 | .direct-chat-info { | |
189 | .direct-chat-variant(@aqua); | |
190 | } | |
191 | ||
192 | .direct-chat-success { | |
193 | .direct-chat-variant(@green); | |
194 | } |