| ... | ... |
@@ -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"}
|