ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / keebchat.com / themes / default / statics / scss / apps / search

// @*************************************************************************@
// @ @author Mansur Altamirov (Mansur_TL)									 @
// @ @author_url 1: https://www.instagram.com/mansur_tl                      @
// @ @author_url 2: http://codecanyon.net/user/mansur_tl                     @
// @ @author_email: highexpresstore@gmail.com                                @
// @*************************************************************************@
// @ ColibriSM - The Ultimate Modern Social Media Sharing Platform           @
// @ Copyright (c) 21.03.2020 ColibriSM. All rights reserved.                @
// @*************************************************************************@

@import '../main-variables';

body.cl-app-search{
	main.main-content-container{
		div.main-content-container-inner{
			div.timeline-container{
				div.vue-app-body{
					width: 100%;
					display: block;
					overflow: hidden;

div.main--search-area-navbar{
						width: 100%;
						overflow: hidden;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						border-bottom: 1px solid $border;

a{
							flex: 1;
							text-decoration: none;
							line-height: 0px;
							outline: 0;

button.navbar-item-btn{
								background: transparent;
								font-size: 11px;
								font-weight: 700;
								color: $grey;
								line-height: 13px;
								box-shadow: none;
								border: none;
								padding: 15px 30px;
								cursor: pointer;
								width: 100%;
								outline: 0;
								text-transform: uppercase;

&.active{
									border-bottom: 2px solid $blue;
								}

&:hover,&:active,&:focus{
									background: $el_hovbg;
								}
							}
						}
					}

div.main--search-form-wrapper{
						width: 100%;
						line-height: 0px;
						display: block;

form{
							div.keyword-input{
								width: 100%;
								line-height: 0px;
								position: relative;
								padding: 15px;
								border-bottom: 1px solid $border;

input{
									border: 1px solid $border;
									background: rgb(230, 236, 240);
									border-radius: 10em;
									padding: 0 0 3px 50px;
									height: 40px;
									width: 100%;
									font-size: 13px;
									color: $black;

&::placeholder{
										color: $pl_holder;
										font-size: 12px;
									}

&:active,&:hover,&:focus{
										&:not([disabled]) {
											box-shadow: none;
											outline: none;
											border: 2px solid $blue;

&  + span svg{
												stroke: $blue;
												opacity: 1;
											}
										}
									}

&:disabled{
										opacity: 0.7;
										cursor: not-allowed;
									}
								}

span{
									position: absolute;
									top: 25px;
									text-decoration: none;
									line-height: 0px;
									z-index: 2;
									width: 22px;
									height: 22px;

svg{
										width: 100%;
										height: 100%;
										stroke: $grey;
										opacity: 0.8;
									}

&.search-icon{
										left: 30px;
									}

&.spinner-icon{
										right: 30px;
									}
								}
							}
						}
					}

div.main--search-area-content{
						width: 100%;
						display: block;
						line-height: 0px;

div.search-result-container{
							div.hashtags-list{
								width: 100%;
								display: block;
								line-height: 0px;

div.hashtags-list-item{
									display: block;
									line-height: 0;

a.link{
										display: flex;
										flex-direction: row;
										flex-wrap: nowrap;
										align-items: center;
										padding: 15px;
										border-bottom: 1px solid $border;
										text-decoration: none;

span.hash{
											width: 35px;
											height: 35px;
											padding: 0;
											margin: 0;
											line-height: 33px;
											text-align: center;
											color: $grey;
											border: 1px solid $border;
											border-radius: 10em;
										}

span.hashtag-info{
											flex: 1;
											line-height: 0;
											padding: 0px 15px;
											overflow: hidden;

b.tag{
												font-size: 14px;
												line-height: 16px;
												font-weight: 700;
												color: $black;
												display: block;
												text-overflow: ellipsis;
												overflow: hidden;
												white-space: nowrap;
												max-width: 60%;
											}

span.total{
												font-size: 13px;
												line-height: 16px;
												font-weight: 300;
												color: $grey;
												display: block;
											}
										}

span.icon{
											svg{
												width: 20px;
												height: 20px;
												stroke: $grey;
											}
										}

&:hover,&:active,&:focus{
											background: $el_hovbg;

span.icon svg{
												stroke: $blue;
											}
										}
									}
								}
							}

div.people-list{
								width: 100%;
								line-height: 0px;
								display: block;
								padding: 0;

div.people-list-item{
									width: 100%;
									display: flex;
									flex-direction: row;
									flex-wrap: nowrap;
									line-height: 0px;
									border-bottom: 1px solid $border;
									padding: 10px 15px;

&:first-child{
										padding-top: 20px;
									}

div.avatar{
										width: 40px;
										height: 40px;
										overflow: hidden;
										min-width: 40px;
										max-width: 40px;
										border-radius: 10em;

img{
											width: 100%;
											height: 100%;
											object-fit: cover;
										}
									}

div.user-info-holder{
							 			flex: 1;
							 			padding: 0 0 0 10px;
							 			line-height: 0px;
							 			position: relative;

h4{
							 				font-size: 13px;
							 				padding: 0;
							 				margin: 0;
							 				line-height: 13px;
							 				font-weight: 700;
							 				color: $black;
							 				white-space: nowrap;
							 			}

& > a{
							 				display: block;
							 				text-decoration: none;
							 				color: $grey;
							 				font-size: 13px;
							 				line-height: 20px;
							 				overflow: hidden;
							 				white-space: nowrap;
							 				text-overflow: ellipsis;
							 				max-width: 140px;
							 			}

p{
							 				font-size: 13px;
							 				line-height: 18px;
							 				padding: 0;
							 				margin: 5px 0 0 0;
							 				padding-right: 40px;
							 			}

button{
							 				position: absolute;
							 				right: 0;
							 				top: 0;
							 			}
							 		}

&:hover,&:active{
							 			background: $el_hovbg;
							 		}
								}
							}

div.search-empty-result{
								width: 100%;
								display: flex;
								flex-direction: column;
								flex-wrap: nowrap;
								align-items: center;
								line-height: 0px;
								padding: 100px 50px;
								height: calc(100vh - 225px);
								overflow: hidden;

div.icon{
						 			line-height: 0px;
									margin-bottom: 20px;
									width: 100%;
									text-align: center;

svg{
							 			width: 80px;
							 			height: 80px;
							 			stroke: $blue;
							 		}
						 		}

div.pl-message{
									line-height: 0px;
									width: 100%;
									margin-bottom: 20px;

h4{
										font-size: 20px;
										padding: 0;
										margin: 0 0 10px 0;
										line-height: 20px;
										color: $black;
										font-weight: 700;
										text-align: center;
									}

p{
										font-size: 13px;
										line-height: 20px;
										padding: 0;
										margin: 0;
										color: $grey;
										text-align: center;
										overflow-wrap: break-word;
									}
								}

div.c2action-single{
									width: 100%;
									line-height: 0px;
									text-align: center;

a{
										display: inline-block;
										line-height: 0px;
										text-decoration: none;

button{
											padding-left: 40px;
											padding-right: 40px;
										}
									}
								}
							}
						}

div.load-more{
							width: 100%;
							display: block;
							line-height: 0;
							padding: 20px;
							text-align: center;

button{
								padding-left: 30px;
								padding-right: 30px;
							}
						}
					}
				}
			}
		}
	}
}

[-] style.master.scss [edit]
[+] ..
[-] run4 [edit]
[-] run1 [edit]
[+] .sass-cache
[-] style.mq.scss [edit]
[-] style.dark.scss [edit]
[-] run3 [edit]
[-] style.custom.scss [edit]
[-] run2 [edit]