styles.scss

@use "igniteui-angular/theming" as *;
@include core();
/* autoprefixer grid:on */
// @include theme($default-palette);
@include theme(
    $palette: $default-palette,
    //     $schema: $default-schema,
    $exclude: (
        'bullet-graph',
        'linear-gauge',
        'radial-gauge',
        'category-chart',
        'data-chart',
        'doughnut-chart',
        'financial-chart',
        'funnel-chart',
        'geo-map',
        'pie-chart',
        'shape-chart',
        'sparkline',
    ));

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import 'igniteui-angular/lib/core/styles/themes/index';
// @include igx-core();
// @include igx-theme($default-palette);

// @include igx-typography();
// @include igx-theme(
//     $palette: $light-material-palette,
//     $schema: $light-material-schema,
//     $exclude: (
//         'bullet-graph',
//         'linear-gauge',
//         'radial-gauge',
//         'category-chart',
//         'data-chart',
//         'doughnut-chart',
//         'financial-chart',
//         'funnel-chart',
//         'geo-map',
//         'pie-chart',
//         'shape-chart',
//         'sparkline',
//     )
// );

/* autoprefixer grid: on */
html,
body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}

// $green-palette: igx-palette($primary: #09f,$secondary: #72da67, $surface: #333);
// .dark-theme {
//     background: #333;
//     color: #fff;
//     @include igx-dark-theme($green-palette);
// }

// added to fix SB layout:
.nav-bar {
    background: rgb(39,38,95);
    // background: linear-gradient(90deg,  rgba(0,153,255,1)  0%,rgba(39,38,95,1) 100%);
    color: #ffffff;
    padding: 0rem;
    display: flex;
    flex-direction: row;
    min-height: 3rem;
}

.nav-sidebar-header {
    display: flex;
    align-items: center;
    padding: 0rem;
    background: #27265F;
    // background: linear-gradient(90deg, rgba(39,38,95,1) 0%, rgba(39,38,95,1) 3%, rgba(39,38,95,1) 50%, rgba(0,95,255,1) 100%);
    min-height: 3rem;
}

.nav-bar > div {
    display: flex;
    flex-direction: row;
}

.nav-bar > nav {
    display: flex;
    flex-direction: row;
}

.nav-bar-title {
    font-size: 1.25rem;
    text-transform: none;
    margin: 0rem;
    vertical-align: middle;
    align-self: center;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.nav-bar-version {
    font-size: 1.0rem;
    text-transform: none;
    margin: 0rem;
    vertical-align: middle;
    align-self: center;
    padding-right: 0.5rem;
    text-wrap: nowrap;
    color: white;
}

.nav-bar-menu {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: 0.5rem;;
    margin-right: 0.5rem;
    font-size: 1.25rem;
    align-self: center;
    cursor: pointer;
}

.nav-bar-menu:hover {
    background: rgba(204, 204, 204, 0.3);
    transition: "all 0.0s";
}


.nav-sidebar {
    background: rgb(58, 58, 58);
    background: linear-gradient(180deg, rgba(39,38,95,1) 0%, rgba(39,38,95,1) 71%, rgba(75,72,198,1) 100%);
    min-width: 12rem;
    font-size: 0.75rem;
}

.nav-sidebar-list {
    overflow-y: auto;
    overflow-x: auto;
    text-align: start;
}

/* scrollbar styles */
.nav-sidebar-list::-webkit-scrollbar-corner {
    background: #4543ad;
}
.nav-sidebar-list::-webkit-scrollbar
{
    height: 10px; /* height of horizontal scrollbar */
    width: 10px;  /* width of vertical scrollbar */
    background: #4543ad;
    margin-top: 4px;
}
.nav-sidebar-list::-webkit-scrollbar-track
{
    border-radius: 1px;
    background: transparent;
}
.nav-sidebar-list::-webkit-scrollbar-thumb
{
    width: 8px;
    border-radius: 8px;
    background: #7775d6;
}
.nav-sidebar-list::-webkit-scrollbar-thumb:hover {
    background: #7775d6;
}

.nav-sidebar-logo {
    width: 100px;
    height: 2rem;
    align-self: center;
    padding: 0.1rem;
    padding: 0.4rem;
}

.nav-sidebar-platform {
    font-size: 1rem;
    align-self: center;
    padding-left: 0.25rem;
    color: #27265f;
    color: #eee;
    font-weight: bold;
    padding-bottom: 0.25rem;
}

.igx-input-group__bundle {
    display: flex;
    flex-direction: row;
    color: #27265F;
}

.nav-search-box {
    padding: 1rem;
    max-width: 260px;
    display: flex;
    flex-direction: row;
}

.nav-search-box > * {
    display: flex;
    flex-direction: row;
    padding-left: 1rem;
}