src/components/Header/Header.module.scss - master - sigma/Acloud

src/components/Header/Header.module.scss
128 строк2 KB
Александр Пимкин
first_commit
17 апр 2025, 11:39
17 апр 2025, 11:39e24d434
$base-height: 80px;
$sec-color: oklch(0.828 0.111 230.32);

.header {
	height: $base-height;
	width: 100%;
	background-color: oklch(0.21 0.034 264.665);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10% 0 10%;
	color: white;
}

.ul {
	display: flex;
	gap: 20px;
	font-size: 18px;
	letter-spacing: 1;
	list-style-type: none;
}

.li {
	width: max-content;
	position: relative;
	cursor: pointer;
}
.li::after {
	background-color: #1578ff;
	content: '';
	position: absolute;
	bottom: -5px;
	height: 2px;
	width: 100%;
	left: 0;
	transition: 0.3s;
	transition-timing-function: easy-in-out;
	transform: scaleX(0);
}
.li:hover::after {
	transform: scaleX(1);
}

.logo {
	display: flex;
	gap: 3;
}

.avatar {
	border: none;
	color: white;
	cursor: pointer;
	width: 40px;
	height: 40px;
	background-color: #1578ff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 8px 16px 0 rgba(116, 212, 255, 0.2),
		0 6px 20px 0 rgba(116, 212, 255, 0.19);
}

.modal {
	position: absolute;
	width: 140px;
	height: 60px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
	color: black;
	background-color: white;
	top: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #ccc;
	border-radius: 8px;
}

.modal:before {
	content: '';
	position: absolute;
	top: -10px; /* Adjust as needed */
	left: 50%;
	transform: translateX(-50%); /* Center the arrow */
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}

/* Optional: Add a border to the arrow */
.modal:before {
	border-bottom: 10px solid #ccc; /* Match box border */
}

.rightBar {
	display: flex;
	align-items: center;
	gap: 50;
}

.dangerButton {
	width: 100px;
	height: 40px;
	border: none;
	color: white;
	background-color: oklch(0.637 0.237 25.331);
	border-radius: 8px;
	font-family: 'Montserrat';
	cursor: pointer;
}

// .link {
// 	display: flex;
// }

// .link::before {
// 	content: '';
// 	position: absolute;
// 	bottom: -10px;
// 	left: 0;
// 	width: 0;
// 	height: 3px;
// 	background-color: $sec-color;
// 	transition: all 0.5s;
// }

// .link:hover::before {
// 	width: 100%;
// }