diff --git a/wwwroot/css/input.css b/wwwroot/css/input.css index 8d737a4..458da4d 100644 --- a/wwwroot/css/input.css +++ b/wwwroot/css/input.css @@ -120,19 +120,36 @@ --color-warning: #F79009; } +.menu-sidebar a, +.menu-sidebar summary { + @apply border-transparent border-b-[3px] transition-colors duration-200; +} + +.menu-sidebar a { + @apply text-gray-500; +} + +.menu-sidebar summary { + @apply font-semibold text-primary-500; +} + +.menu-sidebar details ul { + @apply space-y-2 py-2; +} + +/* Hover / Active / Open state */ +.menu-sidebar a:hover, .menu-sidebar a:active, .menu-sidebar a.menu-active, +.menu-sidebar details > summary:hover, .menu-sidebar details > summary:active, -.menu-sidebar a:hover, -.menu-sidebar details > summary:hover { +.menu-sidebar details[open] > summary, +.menu-sidebar details[open] > ul a:hover, +.menu-sidebar details[open] > ul a:active, +.menu-sidebar details[open] > ul a.menu-active { @apply border-primary-600 border-b-[3px] bg-primary-500 font-semibold text-white; } -.menu-sidebar a:active, -.menu-sidebar a.menu-active, -.menu-sidebar details > summary:active { - @apply bg-primary-500 text-white; -} @utility icon { font-family: 'Material Symbols Outlined';