add design token for sidebar

This commit is contained in:
Dede Fuji Abdul
2023-10-23 16:26:03 +07:00
parent 92bd068430
commit 26649417f8
5 changed files with 174 additions and 81 deletions

View File

@@ -3,7 +3,36 @@
@tailwind utilities;
@layer components {
.btn {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
/* NavBar */
.menu-item {
@apply w-full text-left block px-4 py-3 text-base text-gray-800;
}
.menu-item-active {
@apply bg-gray-100 w-full text-left block px-4 py-3 text-base text-gray-800;
}
.container-menu-item {
@apply absolute right-0 z-10 w-48 mt-2 overflow-hidden origin-top-right bg-white rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;
}
.container-menu-profile {
@apply flex-shrink-0 block px-4 py-2 border-b bg-primary-500 border-gray-50;
}
/* Aside */
.aside-single-item {
@apply w-full flex items-center pl-2 pr-4 py-2 text-xs rounded-xl;
}
.aside-single-item-active {
@apply aside-single-item bg-primary-500 text-white font-bold;
}
.aside-single-item-inactive {
@apply aside-single-item font-semibold text-aside group-hover:bg-primary-100 text-gray-600 group-hover:text-white group-hover:bg-primary-500;
}
.aside-single-item-icon{
@apply h-6 w-6;
}
.aside-single-item-icon-active{
@apply aside-single-item-icon stroke-white;
}
.aside-single-item-icon-inactive{
@apply aside-single-item-icon text-aside group-hover:stroke-white;
}
}