git/metabuilder
1
0
Fork 0
mirror of https://github.com/johndoe6345789/metabuilder.git synced 2026-04-24 13:54:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

config: ui,styles,packages (1 files)

Browse Source
This commit is contained in:
Richard Ward
2025-12-31 00:11:20 +00:00
parent 30d04f6a5a
commit 2700bb6793
1 changed files with 58 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
packages/ui_header/seed/styles.json Normal file
View File

@@ -0,0 +1,58 @@
[
{
"id": "header_navigation_styles",
"type": "component",
"category": "navigation",
"className": "header-navigation",
"description": "Main header navigation bar styling",
"css": ".header-navigation {\n position: sticky;\n top: 0;\n z-index: 50;\n width: 100%;\n background-color: var(--background);\n border-bottom: 1px solid var(--border);\n backdrop-filter: blur(10px);\n background-color: rgba(255, 255, 255, 0.8);\n}\n\n@supports (backdrop-filter: blur(10px)) {\n .header-navigation {\n background-color: rgba(255, 255, 255, 0.8);\n }\n}"
},
{
"id": "header_container_styles",
"type": "component",
"category": "layout",
"className": "header-container",
"description": "Header content container",
"css": ".header-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1.5rem;\n max-width: 1280px;\n margin: 0 auto;\n}\n\n@media (min-width: 768px) {\n .header-container {\n padding: 1rem 2rem;\n }\n}"
},
{
"id": "header_logo_styles",
"type": "component",
"category": "branding",
"className": "header-logo",
"description": "Header logo/brand styling",
"css": ".header-logo {\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--foreground);\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n transition: opacity 0.2s ease-in-out;\n}\n\n.header-logo:hover {\n opacity: 0.8;\n}"
},
{
"id": "header_nav_links_styles",
"type": "component",
"category": "navigation",
"className": "header-nav-links",
"description": "Navigation links container",
"css": ".header-nav-links {\n display: none;\n gap: 2rem;\n align-items: center;\n}\n\n@media (min-width: 768px) {\n .header-nav-links {\n display: flex;\n }\n}"
},
{
"id": "header_nav_link_styles",
"type": "component",
"category": "link",
"className": "header-nav-link",
"description": "Individual navigation link styling",
"css": ".header-nav-link {\n font-size: 0.875rem;\n font-weight: 500;\n color: var(--muted-foreground);\n text-decoration: none;\n transition: color 0.2s ease-in-out;\n position: relative;\n}\n\n.header-nav-link:hover {\n color: var(--foreground);\n}\n\n.header-nav-link::after {\n content: '';\n position: absolute;\n bottom: -4px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--primary);\n transition: width 0.2s ease-in-out;\n}\n\n.header-nav-link:hover::after {\n width: 100%;\n}\n\n.header-nav-link--active {\n color: var(--primary);\n font-weight: 600;\n}\n\n.header-nav-link--active::after {\n width: 100%;\n}"
},
{
"id": "header_mobile_menu_styles",
"type": "component",
"category": "navigation",
"className": "header-mobile-menu",
"description": "Mobile hamburger menu styling",
"css": ".header-mobile-menu {\n display: block;\n}\n\n@media (min-width: 768px) {\n .header-mobile-menu {\n display: none;\n }\n}"
},
{
"id": "header_cta_styles",
"type": "component",
"category": "button",
"className": "header-cta",
"description": "Header call-to-action button styling",
"css": ".header-cta {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 600;\n border-radius: 0.375rem;\n background: var(--primary);\n color: var(--primary-foreground);\n border: none;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.header-cta:hover {\n opacity: 0.9;\n transform: translateY(-1px);\n}\n\n.header-cta:active {\n transform: translateY(0);\n}"
}
]