Refactored topbar

This commit is contained in:
Cagatay Civici
2024-07-29 17:43:53 +03:00
parent bbf6f86814
commit d8bf9b3bde
6 changed files with 73 additions and 120 deletions

View File

@@ -24,8 +24,8 @@
width: 300px;
border-radius: 12px;
img {
height: 2.5rem;
svg {
width: 3rem;
margin-right: 0.5rem;
}
@@ -77,15 +77,19 @@
}
}
.layout-topbar-menu {
margin: 0 0 0 auto;
padding: 0;
list-style: none;
.layout-topbar-actions {
margin-left: auto;
display: flex;
gap: 1rem;
}
.layout-topbar-button {
margin-left: 1rem;
}
.layout-topbar-menu {
gap: 1rem;
}
.layout-config-menu {
display: flex;
gap: 1rem;
}
}
@@ -96,6 +100,7 @@
.layout-topbar-logo {
width: auto;
order: 2;
margin-left: 1rem;
}
.layout-menu-button {
@@ -105,15 +110,18 @@
.layout-topbar-menu-button {
display: inline-flex;
margin-left: 0;
order: 4;
}
.layout-topbar-actions {
order: 3;
}
.layout-topbar-menu {
margin-left: 0;
position: absolute;
flex-direction: column;
background-color: var(--surface-overlay);
transform-origin: top;
box-shadow:
0px 3px 5px rgba(0, 0, 0, 0.02),
0px 0px 2px rgba(0, 0, 0, 0.05),
@@ -123,13 +131,6 @@
right: 2rem;
top: 5rem;
min-width: 15rem;
display: none;
-webkit-animation: scalein 0.15s linear;
animation: scalein 0.15s linear;
&.layout-topbar-menu-mobile-active {
display: block;
}
.layout-topbar-button {
margin-left: 0;