atridad/vue-bits
1
0
Fork 0
mirror of https://github.com/DavidHDev/vue-bits.git synced 2026-03-07 14:39:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
David Haz
2025-07-12 14:52:04 +03:00
parent 5d97fb34d9
commit d4ff1787eb
4 changed files with 42 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/css/sidebar.css
View File

@@ -26,7 +26,6 @@
top: 57px;
height: 100vh;
width: 0;
padding: 1.25rem;
overflow-y: auto;
display: none;
}
@@ -70,7 +69,8 @@
height: 30px;
}
.sidebar-item {
.sidebar-item,
.drawer-navigation .sidebar-item {
position: relative;
font-size: 0.9rem;
color: #a1a1aa;
@@ -81,12 +81,14 @@
text-decoration: none !important;
}
.sidebar-item:hover {
.sidebar-item:hover,
.drawer-navigation .sidebar-item:hover {
color: #fff;
cursor: pointer;
}
.active-sidebar-item {
.active-sidebar-item,
.drawer-navigation .active-sidebar-item {
width: fit-content;
padding: 0.25em 0.25em 0.25em 0;
color: #fff;
@@ -94,7 +96,8 @@
transition: color 0.3s ease;
}
.active-sidebar-item::before {
.active-sidebar-item::before,
.drawer-navigation .active-sidebar-item::before {
content: '';
position: absolute;
left: -1.15rem;
@@ -107,12 +110,15 @@
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.active-sidebar-item:hover {
.active-sidebar-item:hover,
.drawer-navigation .active-sidebar-item:hover {
text-decoration: none;
}
.sidebar-item .new-tag,
.sidebar-item .updated-tag {
.sidebar-item .updated-tag,
.drawer-navigation .sidebar-item .new-tag,
.drawer-navigation .sidebar-item .updated-tag {
margin-left: 0.6em;
font-size: 10px;
border-radius: 6px;
@@ -122,13 +128,15 @@
text-decoration: none !important;
}
.sidebar-item .new-tag {
.sidebar-item .new-tag,
.drawer-navigation .sidebar-item .new-tag {
color: #fff;
border: 1px solid #27ff64;
background-color: rgba(82, 39, 255, 0.3);
}
.sidebar-item .updated-tag {
.sidebar-item .updated-tag,
.drawer-navigation .sidebar-item .updated-tag {
color: #fff;
border: 1px solid #ffffff77;
background-color: #ffffff26;
@@ -162,12 +170,10 @@
background-size: 200% 200%;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.07);
color: #fff;
border: none;
color: #fff;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
white-space: nowrap;
@@ -231,7 +237,8 @@
margin-bottom: 1rem;
}
.category-name {
.category-name,
.drawer-navigation .category-name {
margin-bottom: 0.5rem;
font-weight: 900;
letter-spacing: -0.5px;
@@ -239,7 +246,13 @@
font-size: 1.1rem;
}
.category-items {
.drawer-navigation .category-name {
font-size: 1rem;
letter-spacing: -1px;
}
.category-items,
.drawer-navigation .category-items {
display: flex;
flex-direction: column;
gap: 0.125rem;
@@ -519,83 +532,8 @@
}
.drawer-navigation .category-name {
margin-bottom: 0.5rem;
font-weight: 900;
letter-spacing: -1px;
color: #fff;
font-size: 1rem;
}
.drawer-navigation .category-items {
display: flex;
flex-direction: column;
gap: 0.125rem;
padding-left: 1rem;
border-left: 2px solid #ffffff33;
position: relative;
}
.drawer-navigation .sidebar-item {
position: relative;
font-size: 0.9rem;
color: #a1a1aa;
padding: 0.25em 0;
display: flex;
align-items: center;
transition: color 0.3s ease;
text-decoration: none !important;
}
.drawer-navigation .sidebar-item:hover {
color: #fff;
}
.drawer-navigation .active-sidebar-item {
width: fit-content;
padding: 0.25em 0.25em 0.25em 0;
color: #fff;
position: relative;
transition: color 0.3s ease;
}
.drawer-navigation .active-sidebar-item::before {
content: '';
position: absolute;
left: -1.15rem;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 16px;
background-color: #fff;
border-radius: 1px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer-navigation .active-sidebar-item:hover {
text-decoration: none;
}
.drawer-navigation .sidebar-item .new-tag,
.drawer-navigation .sidebar-item .updated-tag {
margin-left: 0.6em;
font-size: 10px;
border-radius: 6px;
font-weight: 500;
padding: 0.2em 0.4em;
opacity: 1;
text-decoration: none !important;
}
.drawer-navigation .sidebar-item .new-tag {
color: #fff;
border: 1px solid #27ff64;
background-color: rgba(82, 39, 255, 0.3);
}
.drawer-navigation .sidebar-item .updated-tag {
color: #fff;
border: 1px solid #ffffff77;
background-color: #ffffff26;
letter-spacing: -1px;
}
@media (min-width: 768px) {
@@ -608,4 +546,4 @@
.drawer-header {
padding: 0 1em;
}
}
}