.messages{
padding: 0;
list-style-type: none;
margin:0 20px 20px 20px;
&.withlist{
margin-right: 210px;
}
&>li{
margin-top:20px;
&.insert{
position: relative;
border:1px solid #ddd;
margin-right: 10px;
#message-form{
background: #f9f9f9;
margin-bottom: 0;
}
.text{
margin-right:50px;
input[type="text"]{
border:0;
margin-bottom: 0;
display:block;
}
}
.submit{
position: absolute;
right:0;
top:0;
button{
border:0;
background: $blue;
color:#fff;
margin: 2px;
padding:3px 4px;
&[disabled="disabled"]{
background: #ccc;
}
}
}
}
.image{
float:left;
width:50px;
}
.message{
position: relative;
background: #eee;
margin-right: 20px;
padding:10px;
margin-left:60px;
.name{
font-weight:600;
}
p{
color:#444;
}
.time{
color:#555;
font-size:11px;
}
.caret{
position: absolute;
left:-7px;
top:10px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right:7px solid #eee;
border-left:0;
}
}
&.right{
.image{
float:right;
}
.name{
color:darken($blue, 40%);
}
.message{
background: lighten($blue, 35%);
margin-left:20px;
margin-right: 0;
margin-right:60px;
p{
color:darken($blue, 30%);
}
.time{
color:darken($blue, 30%);
}
.caret{
left:auto;
right:-7px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left:7px solid lighten($blue,35%);
border-right:0;
}
}
}
&.typing{
display: none;
&.active{
display: block;
}
}
}
}
.user-list{
position: absolute;
right:0;
top:0;
width:183px;
margin-right:17px;
h4{
background:$blue;
color:#fff;
padding:5px 8px;
font-weight:400;
}
&>ul{
@extend .ulreset;
&>li{
@include pie-clearfix;
margin:5px 0;
&:first-child{
margin-top: 0;
}
&.invite{
margin-top: 15px;
}
.image{
max-width:35px;
min-width:10px;
float: left;
img{
max-width:35px;
min-width:10px;
}
}
.username{
float:left;
margin-left: 10px;
line-height: 35px;
}
}
}
}
|