@devkitvue/admin
Version:
Devkit Base Components is a Vue plugin offering a collection of reusable, headless components designed to streamline your Vue.js development workflow. Built for flexibility and maintainability, this library gives you complete control over styling and beha
2 lines (1 loc) • 3.86 kB
CSS
.app-header{z-index:99;background-color:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;border-radius:.5rem;top:0;padding:.5rem}.p-panelmenu-panel{--tw-border-opacity: 0;background-color:transparent;border-left:8px solid transparent}.p-panelmenu-header{border-radius:.5rem}.search-box{position:relative}.searching .searching-btn{position:absolute;z-index:2;left:20px;height:80%;top:10%}.searching .p-autocomplete input{padding-inline-start:60px}.p-breadcrumb-list{flex-wrap:wrap}.transparent{background-color:transparent}:root{--top-radius: var(--border-radius) var(--border-radius) 0 0;--bottom-radius: 0 0 var(--border-radius)}.hidden-sidebar{--menu-width: 0}.hidden-sidebar .sidebar{opacity:0}.sidebar{--block-padding: .2rem;--submenu-padding: 2.25rem;--active-menu-border: .5rem;background-color:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);scrollbar-width:none;-ms-overflow-style:none}@media (min-width: 1024px){.sidebar{z-index:3;transition:width .2s;top:0;inline-start:0;height:100vh;width:var(--menu-width);overflow-x:hidden;overflow-y:scroll;border-right:1px solid var(--menu-border-color);padding:var(--content-padding);position:fixed;border-radius:0 15px 15px 0}}.main-menu button.p-button:hover,.main-menu a:hover,.p-drawer button.p-button:hover,.p-drawer a:hover{color:var(--text-color);border-inline-start-color:var(--primary-color);background-color:var(--root-menu-item-hover-bg)}.main-menu svg,.p-drawer svg{width:1.25rem}.main-menu .p-panelmenu,.p-drawer .p-panelmenu{margin-top:1rem;gap:0}.main-menu .p-panelmenu-header button,.main-menu .p-panelmenu-header a,.p-drawer .p-panelmenu-header button,.p-drawer .p-panelmenu-header a{border-inline-start:var(--active-menu-border) solid transparent}.main-menu .p-menubar-item button,.main-menu .p-menubar-item a,.p-drawer .p-menubar-item button,.p-drawer .p-menubar-item a{border:none}.main-menu .p-panelmenu-header,.main-menu .p-menubar-item,.p-drawer .p-panelmenu-header,.p-drawer .p-menubar-item{border-radius:var(--top-radius)}.main-menu .p-panelmenu-header button,.main-menu .p-panelmenu-header a,.main-menu .p-menubar-item button,.main-menu .p-menubar-item a,.p-drawer .p-panelmenu-header button,.p-drawer .p-panelmenu-header a,.p-drawer .p-menubar-item button,.p-drawer .p-menubar-item a{display:flex;padding-block:var(--block-padding);border-radius:var(--border-radius);padding-inline:.75rem}.main-menu .submenu-arrow-icon,.p-drawer .submenu-arrow-icon{transition:var(--transition)}.main-menu .p-panelmenu-header-active,.p-drawer .p-panelmenu-header-active{background:var(--root-menu-item-hover-bg)}.main-menu .p-panelmenu-header-active button,.main-menu .p-panelmenu-header-active a,.p-drawer .p-panelmenu-header-active button,.p-drawer .p-panelmenu-header-active a{border-inline-start-color:var(--primary-color)}.main-menu .p-panelmenu-header-active .submenu-arrow-icon,.p-drawer .p-panelmenu-header-active .submenu-arrow-icon{transform:rotate(180deg)}.main-menu .p-panelmenu-submenu,.p-drawer .p-panelmenu-submenu{padding-inline-start:0rem;background-color:var(--root-menu-content-hover-bg);border-radius:var(--bottom-radius)}.main-menu .p-panelmenu-submenu .p-panelmenu-item .p-panelmenu-item-content a,.p-drawer .p-panelmenu-submenu .p-panelmenu-item .p-panelmenu-item-content a{display:block;border-radius:var(--border-radius);padding-block:var(--block-padding);border-inline-start:var(--active-menu-border) solid transparent;padding-inline-start:var(--submenu-padding)}.main-menu .p-panelmenu-submenu .p-panelmenu-item .p-panelmenu-item-content a.router-link-active.router-link-exact-active,.p-drawer .p-panelmenu-submenu .p-panelmenu-item .p-panelmenu-item-content a.router-link-active.router-link-exact-active{background-color:var(--root-menu-content-hover-bg);border-inline-start-color:var(--primary-color)}