refactor: move frontend in apps/frontend
This commit is contained in:
Giovanni committed
1 parent
dc39113335
commit
31304c931d
225 files changed
+67
-65
No files matched your search
+248
@@ -0,0 +1,248 @@
|
||||
.headerContainer {
|
||||
position: relative;
|
||||
height: fit-content;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
||||
.header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.8rem;
|
||||
height: fit-content;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.profileImg{
|
||||
width:40px;
|
||||
height:40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
.activeHeaderContent {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.inactiveHeaderContent{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.inactiveMobileMenu{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.activeMobileMenu{
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.headerLeftContent {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.headerRightContent {
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 4rem;
|
||||
width: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logoLink {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
.link {
|
||||
color: #000000;
|
||||
width: fit-content;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.link:hover{
|
||||
border-bottom: 2px solid #019AFF;
|
||||
|
||||
}
|
||||
|
||||
.activeLink {
|
||||
width: fit-content;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: #019AFF;
|
||||
border-bottom: 2px solid #019AFF;
|
||||
}
|
||||
|
||||
.bellBtn, .profileLink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.5s ease;
|
||||
background: none;
|
||||
padding: 7px;
|
||||
border-radius: 50%;
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.notificationsImg {
|
||||
stroke: black;
|
||||
stroke-width: 3.5;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.bellBtn:focus {
|
||||
outline: none;
|
||||
}
|
||||
.bellBtn:focus-visible {
|
||||
outline: 2px solid black;
|
||||
}
|
||||
|
||||
.activeBellBtn {
|
||||
transform: translateY(-4px);
|
||||
background: rgba(191, 191, 191, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.bellBtn:hover {
|
||||
transform: translateY(-4px);
|
||||
background: rgba(191, 191, 191, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.profileLink:hover {
|
||||
transform: translateY(-4px);
|
||||
background: rgba(191, 191, 191, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.profileImg {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.notificationDiv {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
top: 105%;
|
||||
right: 2rem;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
z-index: 0;
|
||||
max-height: 60vh;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.activeNotificationDiv {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.notification{
|
||||
padding: 0.5em 1em;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.notificationBadge {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 9px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: red;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
.closeBtn:focus {
|
||||
outline: none;
|
||||
}
|
||||
.closeBtn:focus-visible {
|
||||
outline: 2px solid black;
|
||||
}
|
||||
|
||||
.burgerBtn {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.burgerBar {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #000000;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.activeBurgerBtn .burgerBar:nth-child(1) {
|
||||
transform: translateY(10px) rotate(45deg);
|
||||
}
|
||||
.activeBurgerBtn .burgerBar:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.activeBurgerBtn .burgerBar:nth-child(3) {
|
||||
transform: translateY(-9px) rotate(-45deg);
|
||||
}
|
||||
|
||||
|
||||
.navLinks{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.navLinks {
|
||||
display: none;
|
||||
}
|
||||
.burgerBtn {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user