@rkosafo/cai.components/dist/styles/tf-layout.css

This package is under development and not ready for public use.

:root {
	--poppins: 'Poppins', sans-serif;
	--lato: 'Lato', sans-serif;

	--light: #F9F9F9;
	--blue: #3C91E6;
	--light-blue: #CFE8FF;
	--grey: #f4f3ef;
	--dark-grey: #AAAAAA;
	--dark: #342E37;
	--red: #DB504A;
	--yellow: #FFCE26;
	--light-yellow: #FFF2C6;
	--orange: #FD7238;
	--light-orange: #FFE0D3;
}

/* tf-sidebar */
#tf-sidebar {
	position: fixed;
	/* top: 0;
	left: 0; */
	width: 240px;
	height: 100%;
	background: var(--light);
	z-index: 2000;
	font-family: var(--lato);
	transition: .3s ease;
	overflow-x: hidden;
	scrollbar-width: none;
}
#tf-sidebar::--webkit-scrollbar {
	display: none;
}
#tf-sidebar.hide {
	width: 60px;

}
#tf-sidebar .brand {
	font-size: 24px;
	font-weight: 700;
	/* height: 68px; */
	display: flex;
	align-items: center;
	color: var(--blue);
	position: sticky;
	top: 0;
	left: 0;
	background: var(--light);
	z-index: 500;
	padding-bottom: 20px;
	box-sizing: content-box;
}
/* #tf-sidebar .brand .bx {
	min-width: 60px;
	display: flex;
	justify-content: center;
} */
#tf-sidebar .side-menu {
	width: 100%;
}
#tf-sidebar .side-menu li {
	height: 48px;
	background: transparent;
	margin-left: 6px;
	border-radius: 48px 0 0 48px;
	padding: 4px;
}
#tf-sidebar .side-menu li.active {
	background: var(--grey);
	position: relative;
}
#tf-sidebar .side-menu li.active::before {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	top: -40px;
	right: 0;
	box-shadow: 20px 20px 0 var(--grey);
	z-index: -1;
}
#tf-sidebar .side-menu li.active::after {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	bottom: -40px;
	right: 0;
	box-shadow: 20px -20px 0 var(--grey);
	z-index: -1;
}
#tf-sidebar .side-menu li a {
	width: 100%;
	height: 100%;
	background: var(--light);
	display: flex;
	align-items: center;
	border-radius: 48px;
	font-size: 16px;
	color: var(--dark);
	white-space: nowrap;
	overflow-x: hidden;
}
#tf-sidebar .side-menu.top li.active a {
	color: var(--blue);
}
#tf-sidebar.hide .side-menu li a {
	width: calc(48px - (4px * 2));
	transition: width .3s ease;
}
#tf-sidebar .side-menu li a.logout {
	color: var(--red);
}
#tf-sidebar .side-menu.top li a:hover {
	color: var(--blue);
}
#tf-sidebar .side-menu li a .bx {
	min-width: calc(60px  - ((4px + 6px) * 2));
	display: flex;
	justify-content: center;
}


#tf-content {
	position: relative;
	width: calc(100% - 230px);
	left: 240px;
	transition: .3s ease;
}
#tf-sidebar.hide ~ #tf-content {
	width: calc(100% - 60px);
	left: 60px;
}


/* NAVBAR */
#tf-content nav {
	height: 56px;
	background: var(--light);
	padding: 0 24px;
	display: flex;
	align-items: center;
	grid-gap: 24px;
	font-family: var(--lato);
	position: sticky;
	top: 0;
	left: 0;
	z-index: 1000;
}
/* curve */
#tf-content nav::before {
	content: '';
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: -40px;
	left: 0;
	border-radius: 50%;
	box-shadow: -20px -20px 0 var(--light);
}


@media screen and (max-width: 768px) {
	#tf-sidebar {
		width: 60px;
	}

	#tf-content {
		width: calc(100% - 60px);
		left: 60px;
	}

	#tf-content nav .nav-link {
		display: none;
	}
}


.loginbox {
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}