/* layout */ :root { --navbar-height: 60px; /* --sidebar-width: 230px; */ --sidebar-width-expanded: 230px; --sidebar-width-collapsed: 65px; } body { padding-top: var(--navbar-height); margin-left: var(--sidebar-width-collapsed) } /* navbar-toggler breakpoint */ @media (max-width: 576px) { body { margin-left: 0; padding-top: 0; display: flex; } header.top-navbar { position: relative; } .sidebar { width: 100% !important; position: relative !important; margin-top: 0 !important; box-shadow: 0 2px 2px 0 rgb(0 0 0 / 16%), 0 2px 6px 0 rgb(0 0 0 / 12%); } ul.sidebar-elements > li > a.sidebar-link > span.text { visibility: visible !important; } ul.sidebar-elements > li.category > span.category-label { display: block !important; } .sidebar:hover:not(.expanded) ~ main.content:after { bottom: unset !important; right: unset !important; opacity: 0; } .sidebar.expanded ~ main.content { margin-left: 0 !important; } } @media (max-width: 768px) { .header-breadcrumb-actions > a { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; } } .main-wrapper { min-height: 100%; /* padding-top: var(--navbar-height); */ } .top-navbar { min-height: var(--navbar-height); position: fixed; top: 0; left: 0; right: 0; padding: 0; margin-bottom: 0; z-index: 1020; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 6px 0 rgba(0,0,0,0.12); } main.content { position: relative; left: 0; /* margin-left: var(--sidebar-width-collapsed); */ min-height: 100%; } .sidebar { margin-top: var(--navbar-height); overflow: hidden; position: fixed; top: 0; bottom: 0; width: var(--sidebar-width-collapsed); left: 0; transition: width .05s linear; transform:translateZ(0) scale(1,1); z-index:1041; } .sidebar.expanded, .sidebar:hover { width: var(--sidebar-width-expanded); } .sidebar.expanded ~ main.content { margin-left: calc(var(--sidebar-width-expanded) - var(--sidebar-width-collapsed)); } .sidebar ~ main.content:after { z-index: 1040; content: ' '; transition: opacity 0.5s; position: fixed; top:0; left:0; background:#000; opacity: 0; } .sidebar:hover:not(.expanded) ~ main.content:after { bottom: 0; right:0; opacity: 0.5; } .left-navbar { min-width: 70px; } .center-navbar { display: flex; flex: 1 1 auto; padding: 0 20px; } .right-navbar { display: flex; justify-content: end; flex: 1 0 auto; height: var(--navbar-height); } .right-navbar div.global-search-container { margin: auto 0; } .global-search-result-container .search-container-model .model-text { font-size: 0.75rem; font-weight: 600; } .global-search-result-container .search-container-model .search-container-divider { flex: 1 0 0; min-height: 20px; } .global-search-result-container .search-container-model .search-container-divider > hr { height: 1px; flex: 1 0 auto } .right-navbar div.header-menu a.nav-link { margin: auto 0; } .right-navbar .header-menu .dropdown-menu a.dropdown-item > i { min-width: 25px; } /* sidebar */ .sidebar-wrapper { width: 100%; height: 100%; border-right: 1px solid #ddd; } .sidebar-scroll { position: relative; width: 100%; } .sidebar-content { padding-top: 10px; } ul.sidebar-elements { margin: 0; padding: 0; } .sidebar .lock-sidebar > a::before { content: "\f101"; font-family: 'Font Awesome 5 Free'; font-weight: 900; } .sidebar.expanded .lock-sidebar > a::before { content: "\f100"; } /* sidebar entry */ ul.sidebar-elements > li { list-style: none; } li.parent { } .sidebar.expanded ul.sidebar-elements li > a.sidebar-link, .sidebar:hover ul.sidebar-elements li > a.sidebar-link { text-overflow: ellipsis; } ul.sidebar-elements li > a.sidebar-link { display: block; padding: 0 20px; line-height: 35px; overflow: hidden; white-space: nowrap; text-decoration: none; color: unset; } ul.sidebar-elements > li > a.sidebar-link:hover { background-color: #f0f0f0; } ul.sidebar-elements > li > a.sidebar-link > * { text-align: center; vertical-align: middle; } ul.sidebar-elements > li > a.sidebar-link > i.sidebar-icon { margin-right: 10px; font-size: 19px; min-width: 25px; line-height: 19px; } .sidebar.expanded ul.sidebar-elements > li > a.sidebar-link > span.text, .sidebar:hover ul.sidebar-elements > li > a.sidebar-link > span.text { visibility: visible; } ul.sidebar-elements > li > a.sidebar-link > span.text { visibility: hidden; line-height: 40px; white-space: nowrap; } /* sidebar sub-menu */ ul.sidebar-elements li.parent > a.sidebar-link::before { visibility: hidden; content: "\f0d7"; float: right; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1rem; color: #bbb; } ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before { content: "\f0d8"; } .sidebar.expanded ul.sidebar-elements li.parent > a.sidebar-link::before, .sidebar:hover ul.sidebar-elements li.parent > a.sidebar-link::before { visibility: visible; } .sidebar.expanded ul.sidebar-elements li ul.show, .sidebar.expanded ul.sidebar-elements li ul.collapsing, .sidebar.expanded ul.sidebar-elements li ul.in, .sidebar:hover ul.sidebar-elements li ul.show, .sidebar:hover ul.sidebar-elements li ul.collapsing, .sidebar:hover ul.sidebar-elements li ul.in { display: block; } ul.sidebar-elements > li ul { display: none; padding: 10px 0; list-style: none; line-height: 20px; } ul.sidebar-elements > li ul li > a.sidebar-link { font-size: 0.9rem; padding-left: 35px; padding-right: 17px; } ul.sidebar-elements > li ul li > a.sidebar-link:hover { background-color: #e0e0e0; } ul.sidebar-elements > li ul li > ul > li > a.sidebar-link { font-size: 0.85rem; padding-left: 50px; padding-right: 14px; } ul.sidebar-elements > li ul li > ul > li > ul > li > a.sidebar-link { font-size: 0.8rem; padding-left: 65px; padding-right: 11px; } ul.sidebar-elements > li ul li > ul > li > ul > li > ul > li > a.sidebar-link { font-size: 0.78rem; padding-left: 80px; padding-right: 8px; } /* sidebar category */ ul.sidebar-elements > li.category { white-space: nowrap; display: flex; padding: 15px 20px 0; line-height: 30px; } .sidebar.expanded ul.sidebar-elements > li.category > span.category-label, .sidebar:hover ul.sidebar-elements > li.category > span.category-label { display: flex; } ul.sidebar-elements > li.category > span.category-label { display: none; text-transform: uppercase; font-size: 0.75rem; font-weight: 600; margin-right: 15px; } ul.sidebar-elements > li.category > span.category-divider { min-height: 30px; flex: 1 0 0%; display: flex; align-items: center; } ul.sidebar-elements > li.category > span.category-divider > hr { margin: 0; height: 1px; flex: 1 0 auto; } /* Header */ header.navbar-dark.top-navbar .header-menu > a:hover, header.navbar-dark.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { color: #d6d6d6 !important; } header.navbar-light.top-navbar .header-menu > a:hover, header.navbar-light.top-navbar .header-breadcrumb .header-breadcrumb-item > a:hover { color: #6c757d !important; } .center-navbar nav.header-breadcrumb { color: white; padding: 0.5rem 0.75rem; } .center-navbar nav.header-breadcrumb > ol { display: flex; list-style: none; padding-left: 0; margin-bottom: 0; } .center-navbar nav.header-breadcrumb li { line-height: 1.5; } .center-navbar nav.header-breadcrumb li.header-breadcrumb-item { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .center-navbar nav.header-breadcrumb li.header-breadcrumb-separator { padding: 0 0.75rem; } .navbar-dark .center-navbar nav.header-breadcrumb li.header-breadcrumb-separator { /* color: black; */ } .navbar-light .center-navbar nav.header-breadcrumb li.header-breadcrumb-separator { /* color: white; */ } .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a { /* text-decoration: none; */ } .navbar-dark .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a{ color: white; } .navbar-light .center-navbar nav.header-breadcrumb li.header-breadcrumb-item a { color: black; } .header-breadcrumb-children { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 2px rgba(0, 0, 0, 0.5), inset 0 3px 5px rgba(0, 0, 0, 0.6); border-radius: 0.25rem; padding: 0 0.5rem; display: flex; align-items: center; } .header-breadcrumb-children > a:not(:last-child) { margin-right: 0.5rem; } .header-breadcrumb-actions > a { border-top-left-radius: 0; border-bottom-left-radius: 0; } .navbar-dark .right-navbar .header-menu a.nav-link { color: white; } .navbar-light .right-navbar .header-menu a { color: black; } .navbar-dark .left-navbar .navbar-brand img { filter: invert(1); } .navbar-light .left-navbar .navbar-brand img { filter: invert(0); } .navbar-dark .left-navbar .navbar-brand:hover img { filter: invert(1) drop-shadow(0px 0px 3px #fff); } .navbar-light .left-navbar .navbar-brand:hover img { filter: invert(0) drop-shadow(0px 0px 3px #000); }