59f22be405
Replaced icons for "Catalogs", "Dashboards", and "MassData" in NavMenu.razor with new custom Bootstrap-style SVG icons. Added corresponding CSS classes using data URIs to embed the new white icons, ensuring consistent appearance in the navigation menu.
118 lines
4.3 KiB
CSS
118 lines
4.3 KiB
CSS
.navbar-toggler {
|
|
appearance: none;
|
|
cursor: pointer;
|
|
width: 3.5rem;
|
|
height: 2.5rem;
|
|
color: white;
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 1rem;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.navbar-toggler:checked {
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.top-row {
|
|
height: 3.5rem;
|
|
background-color: rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.bi {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
margin-right: 0.75rem;
|
|
top: -1px;
|
|
background-size: cover;
|
|
}
|
|
|
|
.bi-house-door-fill-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-plus-square-fill-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-list-nested-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-collection-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v1H2V3z'/%3E%3Cpath d='M2 5h12v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-speedometer-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v4zm5 0a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v8zm5 0a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.bi-table-nav-menu {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm1 1v2h12V3H2zm12 3H2v2h12V6zm0 3H2v2h12V9zm0 3H2v1h12v-1z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.nav-item {
|
|
font-size: 0.9rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.nav-item:first-of-type {
|
|
padding-top: 1rem;
|
|
}
|
|
|
|
.nav-item:last-of-type {
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.nav-item ::deep .nav-link {
|
|
color: #d7d7d7;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 4px;
|
|
height: 3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 3rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav-item ::deep a.active {
|
|
background-color: rgba(255,255,255,0.37);
|
|
color: white;
|
|
}
|
|
|
|
.nav-item ::deep .nav-link:hover {
|
|
background-color: rgba(255,255,255,0.1);
|
|
color: white;
|
|
}
|
|
|
|
.nav-scrollable {
|
|
display: none;
|
|
}
|
|
|
|
.navbar-toggler:checked ~ .nav-scrollable {
|
|
display: block;
|
|
}
|
|
|
|
@media (min-width: 641px) {
|
|
.navbar-toggler {
|
|
display: none;
|
|
}
|
|
|
|
.nav-scrollable {
|
|
/* Never collapse the sidebar for wide screens */
|
|
display: block;
|
|
|
|
/* Allow sidebar to scroll for tall menus */
|
|
height: calc(100vh - 3.5rem);
|
|
overflow-y: auto;
|
|
}
|
|
}
|