You cannot select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
	
	
		
			110 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			SCSS
		
	
		
		
			
		
	
	
			110 lines
		
	
	
		
			2.2 KiB
		
	
	
	
		
			SCSS
		
	
| 
								 
											11 years ago
										 
									 | 
							
								@media #{$D7} {
							 | 
						||
| 
								 | 
							
								  .gutter {
							 | 
						||
| 
								 | 
							
								    width:64px;
							 | 
						||
| 
								 | 
							
								    float:left;
							 | 
						||
| 
								 | 
							
								    border-right:1px solid lightgray;
							 | 
						||
| 
								 | 
							
								    position:relative;
							 | 
						||
| 
								 | 
							
								    box-sizing: border-box;
							 | 
						||
| 
								 | 
							
								    height:458px;
							 | 
						||
| 
								 | 
							
								    overflow: scroll;
							 | 
						||
| 
								 | 
							
								    background-color:white;
							 | 
						||
| 
								 | 
							
								    padding-bottom:80px;
							 | 
						||
| 
								 | 
							
								    .search {
							 | 
						||
| 
								 | 
							
								      //display:none;
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								    .contact {
							 | 
						||
| 
								 | 
							
								      cursor:pointer;
							 | 
						||
| 
								 | 
							
								      float:left;
							 | 
						||
| 
								 | 
							
								      width:100%;
							 | 
						||
| 
								 | 
							
								      border-bottom:1px solid whitesmoke;
							 | 
						||
| 
								 | 
							
								      color:#333;
							 | 
						||
| 
								 | 
							
								      &:hover {
							 | 
						||
| 
								 | 
							
								        background-color:whitesmoke;
							 | 
						||
| 
								 | 
							
								        margin-top:-1px;
							 | 
						||
| 
								 | 
							
								        border-bottom:1px solid lightgray;
							 | 
						||
| 
								 | 
							
								        border-top:1px solid lightgray;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								      &.active {
							 | 
						||
| 
								 | 
							
								        background-color:$lightblue;
							 | 
						||
| 
								 | 
							
								        margin-top:-1px;
							 | 
						||
| 
								 | 
							
								        border-bottom:1px solid lightgray;
							 | 
						||
| 
								 | 
							
								        border-top:1px solid lightgray;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								      .avatar {
							 | 
						||
| 
								 | 
							
								        height:42px;
							 | 
						||
| 
								 | 
							
								        width:42px;
							 | 
						||
| 
								 | 
							
								        border-radius:42px;
							 | 
						||
| 
								 | 
							
								        cursor:pointer;
							 | 
						||
| 
								 | 
							
								        display:inline-block;
							 | 
						||
| 
								 | 
							
								        margin:10px;
							 | 
						||
| 
								 | 
							
								        margin-right:14px;
							 | 
						||
| 
								 | 
							
								        float:left;
							 | 
						||
| 
								 | 
							
								        clear:both;
							 | 
						||
| 
								 | 
							
								        background-color:whitesmoke;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								      .contact-details {
							 | 
						||
| 
								 | 
							
								        display:none;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								@media #{$D6} {
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  .gutter {
							 | 
						||
| 
								 | 
							
								    width:240px;
							 | 
						||
| 
								 | 
							
								    height:auto;
							 | 
						||
| 
								 | 
							
								    z-index:100;
							 | 
						||
| 
								 | 
							
								    .search {
							 | 
						||
| 
								 | 
							
								      padding:10px;
							 | 
						||
| 
								 | 
							
								      border-bottom:1px solid whitesmoke;
							 | 
						||
| 
								 | 
							
								      input[type=search] {
							 | 
						||
| 
								 | 
							
								        box-sizing: border-box;
							 | 
						||
| 
								 | 
							
								        font-size:12px;
							 | 
						||
| 
								 | 
							
								        outline:0;
							 | 
						||
| 
								 | 
							
								        width:100%;
							 | 
						||
| 
								 | 
							
								        margin:0;
							 | 
						||
| 
								 | 
							
								        letter-spacing: 0.25px;
							 | 
						||
| 
								 | 
							
								        padding:4px 8px;
							 | 
						||
| 
								 | 
							
								        border:1px solid lightgray;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								      &.d6 {
							 | 
						||
| 
								 | 
							
								        display:block;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								    .contact {
							 | 
						||
| 
								 | 
							
								      .avatar {
							 | 
						||
| 
								 | 
							
								        height:56px;
							 | 
						||
| 
								 | 
							
								        width:56px;
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								      .contact-details {
							 | 
						||
| 
								 | 
							
								        display:block;
							 | 
						||
| 
								 | 
							
								        position:relative;
							 | 
						||
| 
								 | 
							
								        width:156px;
							 | 
						||
| 
								 | 
							
								        float:left;
							 | 
						||
| 
								 | 
							
								        text-align: left;
							 | 
						||
| 
								 | 
							
								        h3 {
							 | 
						||
| 
								 | 
							
								          font-size:13px;
							 | 
						||
| 
								 | 
							
								          margin-bottom:4px;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        .last-message {
							 | 
						||
| 
								 | 
							
								          color:lighten(#333, 40%);
							 | 
						||
| 
								 | 
							
								          letter-spacing:0.15px;
							 | 
						||
| 
								 | 
							
								          -webkit-text-stroke: 0.2px;
							 | 
						||
| 
								 | 
							
								          margin:0;
							 | 
						||
| 
								 | 
							
								          font-size: 12px;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								        .last-timestamp {
							 | 
						||
| 
								 | 
							
								          position:absolute;
							 | 
						||
| 
								 | 
							
								          top:14px;
							 | 
						||
| 
								 | 
							
								          right:8px;
							 | 
						||
| 
								 | 
							
								          font-size:12px;
							 | 
						||
| 
								 | 
							
								          font-weight: 500;
							 | 
						||
| 
								 | 
							
								          color:gray;
							 | 
						||
| 
								 | 
							
								        }
							 | 
						||
| 
								 | 
							
								      }
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								  }
							 | 
						||
| 
								 | 
							
								}
							 |