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

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

// @*************************************************************************@
// @ @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-notifications{
	main.main-content-container{
		div.main-content-container-inner{
			height: 100vh !important;
			div.timeline-container{
				height: 100%;
				div.vue-app-body{
					width: 100%;
					display: block;
					overflow: hidden;
					height: calc(100vh - 55px);

div.vue-app-body-inner{
						width: 100%;
						display: flex;
						flex-direction: column;
						flex-wrap: nowrap;
						overflow: hidden;
						height: 100%;
					
						div.profile--notifs-list-navbar{
							width: 100%;
							flex-shrink: 0;

div.profile--notifs-list-navbar-inner{
								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.profile--notifs-list-container{
							width: 100%;
							line-height: 0px;
							overflow: hidden;
							flex: 1;

div.profile--notifs-list{
								width: 100%;
								overflow: hidden;
								padding: 0px;
								display: block;
								height: 100%;
								overflow-x: hidden;
								overflow-y: auto;
								
								div.profile--notifs-list-item{
									width: 100%;	
									padding: 15px 15px;
									border-bottom: 1px solid $border;
									transition: background 0.27s ease-in-out;

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

a.block-nav-link{
										display: block;
										width: 100%;
										text-decoration: none;
										color: none;
									}

div.main-flex-cr{
										width: 100%;
										display: flex;
										flex-direction: row;
										flex-wrap: nowrap;

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

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

div.notifier-info-holder{
											flex: 1;
											line-height: 0px;
											padding-left: 15px;

div.el-block-header{
												width: 100%;
												line-height: 0px;
												display: block;

div.notifier-name{
													p{
														padding: 0;
														margin: 0;
														font-size: 13px;
														line-height: 18px;
														
														b{
															color: $black;
														}

span{
															opacity: 0.8;
															position: relative;
															color: $black;

&.unseen {
																opacity: 1;
																font-weight: 700;
															}
														}
													}
												}

div.notif-time{
													width: 100%;
													display: block;
													svg{
														width: 13px;
														height: 13px;
														display: inline-block;
														vertical-align: middle;
														stroke: $grey;
													}

time{
														font-size: 13px;
														line-height: 22px;
														color: $grey;
													}
												}
											}

div.el-block-body{
												width: 100%;
												display: block;
												line-height: 0px;
												margin-top: 10px;

div.event-content-wrapper{
													width: 100%;
													display: block;
													border: 1px solid $border;
													border-radius: 10px;
													padding: 10px;
													background: #f5f8fa;

p.event-desc{
														font-size: 13px;
														line-height: 18px;
														color: $grey;
														padding: 0;
														margin: 0;
													}
												}
											}
										}

div.select-checkbox{
											width: 20px;
											height: 20px;
											line-height: 0px;
											align-self: center;

label{
												margin: 0;
												padding: 0;
												vertical-align: middle;
												width: 20px;
												height: 20px;
											}

input{
												position: fixed !important;
											}
										}
									}
								}

&::-webkit-scrollbar-track{
									background-color: #e6ecf0;
								}

&::-webkit-scrollbar{
									width: 5px;
									background-color: #e6ecf0;

}

&::-webkit-scrollbar-thumb{
									background-color: #d1d1d1;
									border: 0px;
									border-radius: 0px;
								}
							}

div.notifications-empty-list-placeholder{
								width: 100%;
								display: flex;
								flex-direction: column;
								flex-wrap: nowrap;
								align-items: center;
								line-height: 0px;
								padding: 100px 50px;
								height: 100%;
								overflow: hidden;

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

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

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

h4{
										font-size: 20px;
										padding: 0;
										margin: 0 0 15px 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.notifs-selection-control{
							width: 100%;
							flex-shrink: 0;
							border-top: 1px solid $border;
							
							div.notifs-selection-control-inner{
								padding: 15px;
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-items: center;
								justify-content: flex-end;

button:last-child{
									margin-left: 15px;
								}
							}
						}
					}
				}
			}

div.left-sb-container,div.right-sb-container{
				height: 100%;
				overflow-x: hidden;
				overflow-y: auto;
				scrollbar-width: none;
				-ms-overflow-style: none;
				&::-webkit-scrollbar{
					display: none;
				}
			}
		}
	}
}

[-] 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]