Current File : /home/inlingua/www/sensoriumpsychologists.com/admin/sass/page-elements/messages.scss

.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;
			}
		}
	}
}