... | ... |
@@ -23,7 +23,7 @@ |
23 | 23 |
} |
24 | 24 |
|
25 | 25 |
.user { |
26 |
- padding: 4px 3px; |
|
26 |
+ padding: 4px 0 4px 3px; |
|
27 | 27 |
margin-right: -9px; |
28 | 28 |
|
29 | 29 |
h1, h2, h3 { |
... | ... |
@@ -122,21 +122,48 @@ |
122 | 122 |
|
123 | 123 |
.action { |
124 | 124 |
margin-right: 2px; |
125 |
+ margin-top: -31px; |
|
126 |
+ float: right; |
|
127 |
+ width: 67px; |
|
128 |
+ color: #7e8b90; |
|
125 | 129 |
|
126 |
- .icon-bubble:before { |
|
127 |
- margin-left: 6px; |
|
128 |
- } |
|
130 |
+ .icon-bubble, .icon-bubbles, .icon-x-full { |
|
131 |
+ width: 21px; |
|
132 |
+ overflow: hidden; |
|
133 |
+ display: block; |
|
134 |
+ float: right; |
|
135 |
+ padding-right: 10px; |
|
136 |
+ padding-top: 1px; |
|
137 |
+ |
|
138 |
+ &:before { |
|
139 |
+ margin-left: 6px; |
|
140 |
+ } |
|
129 | 141 |
|
130 |
- .icon-bubbles:before { |
|
131 |
- margin-left: 6px; |
|
142 |
+ span { |
|
143 |
+ font-variant: small-caps; |
|
144 |
+ font-weight: bold; |
|
145 |
+ position: relative; |
|
146 |
+ top: -3px; |
|
147 |
+ font-size: 0.9em; |
|
148 |
+ } |
|
132 | 149 |
} |
133 | 150 |
|
134 |
- .icon-x-full:before { |
|
135 |
- margin-left: 6px; |
|
151 |
+ .icon-bubble { |
|
152 |
+ span { |
|
153 |
+ left: 2px; |
|
154 |
+ } |
|
136 | 155 |
} |
137 | 156 |
|
138 |
- &.invite { |
|
157 |
+ .icon-bubbles { |
|
158 |
+ span { |
|
159 |
+ left: 1px; |
|
160 |
+ } |
|
161 |
+ } |
|
139 | 162 |
|
163 |
+ .icon-x-full { |
|
164 |
+ span { |
|
165 |
+ left: 3px; |
|
166 |
+ } |
|
140 | 167 |
} |
141 | 168 |
} |
142 | 169 |
} |
... | ... |
@@ -24,9 +24,9 @@ |
24 | 24 |
Adam Wolsky |
25 | 25 |
%span.status.online.icon-record |
26 | 26 |
%h2 co-founder |
27 |
- %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"} |
|
28 |
- %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"} |
|
29 |
- %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick |
|
27 |
+ %span.action |
|
28 |
+ %span.icon-x-full |
|
29 |
+ %span kick |
|
30 | 30 |
%li.clear.user |
31 | 31 |
.avatar |
32 | 32 |
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")} |
... | ... |
@@ -34,25 +34,23 @@ |
34 | 34 |
John Savage |
35 | 35 |
%span.status.away.icon-record |
36 | 36 |
%h2 web & ui designer |
37 |
- %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"} |
|
38 |
- %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"} |
|
39 |
- %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick |
|
40 |
- %span.icon-bubbles{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"} |
|
41 |
- %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} invite |
|
37 |
+ %span.action |
|
38 |
+ %span.icon-x-full |
|
39 |
+ %span kick |
|
40 |
+ %span.icon-bubbles |
|
41 |
+ %span invite |
|
42 | 42 |
%h1.group-header Friends |
43 | 43 |
%ul |
44 |
- %li.clear.user{ style: "padding-right: 0"} |
|
44 |
+ %li.clear.user |
|
45 | 45 |
.avatar |
46 | 46 |
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")} |
47 | 47 |
%h1 |
48 | 48 |
Ashley Bond |
49 | 49 |
%span.status.offline.icon-record |
50 | 50 |
%h2 sexretary |
51 |
- %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"} |
|
52 |
- -#%span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"} |
|
53 |
- -# %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} chat |
|
54 |
- %span.icon-bubbles{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 13px; padding-top: 1px;"} |
|
55 |
- %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} invite |
|
51 |
+ %span.action |
|
52 |
+ %span.icon-bubbles |
|
53 |
+ %span invite |
|
56 | 54 |
%li.clear.user |
57 | 55 |
.avatar |
58 | 56 |
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")} |
... | ... |
@@ -60,9 +58,9 @@ |
60 | 60 |
Bob Awesome |
61 | 61 |
%span.status.dnd.icon-record |
62 | 62 |
%h2 sales manager |
63 |
- %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"} |
|
64 |
- %span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"} |
|
65 |
- %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick |
|
63 |
+ %span.action |
|
64 |
+ %span.icon-x-full |
|
65 |
+ %span kick |
|
66 | 66 |
%li.clear.user |
67 | 67 |
.avatar |
68 | 68 |
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")} |
... | ... |
@@ -70,9 +68,9 @@ |
70 | 70 |
Bob Awesome |
71 | 71 |
%span.status.dnd.icon-record |
72 | 72 |
%h2 sales manager |
73 |
- %span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"} |
|
74 |
- %span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"} |
|
75 |
- %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} chat |
|
73 |
+ %span.action |
|
74 |
+ %span.icon-bubble |
|
75 |
+ %span chat |
|
76 | 76 |
|
77 | 77 |
.toolbox |
78 | 78 |
%input{type: "search", placeholder: "Search contact"} |