@userfrosting/theme-pink-cupcake/src/less/components/uf-sidebar.less

Pink Cupcake Theme for UserFrosting

// Variables
// ========================================================================
/*
* Set to `dark` to use light text on dark background for sidebar
* Set to `light` to use dark text on light background for sidebar
*/
@sidebar-sidebar-color-mode: dark;
@sidebar-sidebar-mode: left; // left | right

@sidebar-width: 285px;
@sidebar-item-padding-vertical: 4px;
@sidebar-item-padding-horizontal: 20px;
@sidebar-item-border-width: 3px;
@sidebar-item-border-color: @global-theme-color;
@sidebar-item-first-padding-top: 12px;
@sidebar-item-line-height: 1.8rem;
@sidebar-sublist-padding-vertical: @sidebar-item-padding-vertical;
@sidebar-sublist-padding-horizontal: @sidebar-item-padding-horizontal;
@sidebar-sublist-line-height: @sidebar-item-line-height;
@sidebar-header-padding-vertical: @sidebar-item-padding-vertical;
@sidebar-header-padding-horizontal: @sidebar-item-padding-horizontal;
@sidebar-nested-padding-vertical: @sidebar-item-padding-vertical;
@sidebar-nested-padding-horizontal: 12px;

// Colors
@sidebar-background: @global-background;
@sidebar-active-background: darken(@sidebar-background, 5%);
@sidebar-sublist-background: @sidebar-active-background;
@sidebar-sublist-active-background: @sidebar-active-background;
@sidebar-item-color: @global-color;
@sidebar-item-active-color: @global-emphasis-color;
@sidebar-sublist-item-color: @sidebar-item-color;
@sidebar-sublist-item-active-color: @sidebar-item-active-color;

// Inverse
// ========================================================================
@inverse-sidebar-background: @global-secondary-background;
@inverse-sidebar-active-background: darken(@inverse-sidebar-background, 5%);
@inverse-sidebar-sublist-background: @inverse-sidebar-active-background;
@inverse-sidebar-sublist-active-background: @inverse-sidebar-active-background;
@inverse-sidebar-item-color: #bbb;
@inverse-sidebar-item-active-color: @global-inverse-color;
@inverse-sidebar-sublist-item-color: @inverse-sidebar-item-color;
@inverse-sidebar-sublist-item-active-color: @inverse-sidebar-item-active-color;

/* ========================================================================
   Component: Sidebar
 ========================================================================== */
.uf-sidebar {
    --uk-inverse: @sidebar-sidebar-color-mode;
    position: fixed;
    left: 0;
    top: @navbar-nav-item-height;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: @sidebar-background;
    width: @sidebar-width;
    z-index: 2;
    transition: left 0.3s ease-out;

    /* Set main content beside sidebar */
    &:not(.uk-hidden):not(.uk-hidden\@s):not(.uk-hidden\@m):not(.uk-hidden\@l):not(.uk-hidden\@xl)
        ~ main,
    &:not(.uk-hidden):not(.uk-hidden\@s):not(.uk-hidden\@m):not(.uk-hidden\@l):not(.uk-hidden\@xl)
        ~ footer {
        margin-left: @sidebar-width;
    }

    .uk-nav-default,
    .uk-nav-sub {
        line-height: @sidebar-item-line-height;
    }

    // Increment top padding for first item
    .uk-nav-default > li:first-child {
        padding-top: @sidebar-item-first-padding-top;
    }

    // Set padding for nav items.
    // Add transparent border to avoid the element moving on hover
    .uk-nav-default > li > a {
        padding: @sidebar-item-padding-vertical @sidebar-item-padding-horizontal;
        border-left: @sidebar-item-border-width solid transparent;
        transition: all 0.15s ease-out;
        font-size: @global-font-size;
        color: @sidebar-item-color;
    }
    .uk-nav-sub > li > a {
        padding: @sidebar-sublist-padding-vertical @sidebar-sublist-padding-horizontal;
    }

    // Add theme colored border, background and text color for hover, open and active
    .uk-nav-default > li > a:hover,
    .uk-nav-default > li.uk-open > a,
    .uk-nav-default > li.uk-active > a {
        border-left: @sidebar-item-border-width solid @sidebar-item-border-color;
        background-color: @sidebar-active-background;
        color: @sidebar-item-active-color;
    }

    // Sub-nav items
    // Set base color and size for all links
    .uk-nav-default .uk-nav-sub a {
        color: @sidebar-sublist-item-color;
        font-size: @global-font-size;
    }

    // Set active and hover styles
    .uk-nav-default .uk-nav-sub li > a:hover,
    .uk-nav-default .uk-nav-sub li.uk-active > a {
        color: @sidebar-sublist-item-active-color;
        background-color: @sidebar-sublist-active-background;
    }

    // Set nav header padding
    .uk-nav-header {
        padding: @sidebar-header-padding-vertical @sidebar-header-padding-horizontal;
        border-left: @sidebar-item-border-width solid transparent;
    }

    // Move each nested level to the right and set background color
    .uk-nav-default .uk-nav-sub {
        padding: @sidebar-nested-padding-vertical @sidebar-nested-padding-horizontal;
        background-color: @sidebar-sublist-background;
    }

    // Hide parent icons in sub navigation
    .uk-nav-sub .uk-nav-parent-icon {
        display: none;
    }

    // Remove offcanvas-bar padding
    &.uk-offcanvas-bar {
        padding: 0px;
    }
}

// uk-visible\@m --> @breakpoint-small-max
// @media (max-width: @breakpoint-small-max) {}
/* Phone landscape and smaller */
@media (max-width: @breakpoint-small-max) {
    .uf-sidebar {
        left: -@sidebar-width;

        &:not(.uk-hidden):not(.uk-hidden\@s):not(.uk-hidden\@m):not(.uk-hidden\@l):not(
                .uk-hidden\@xl
            )
            ~ main,
        &:not(.uk-hidden):not(.uk-hidden\@s):not(.uk-hidden\@m):not(.uk-hidden\@l):not(
                .uk-hidden\@xl
            )
            ~ footer {
            margin-left: inherit;
        }
    }
}

// Right side modifier
.uf-sidebar when (@sidebar-sidebar-mode = right) {
    left: auto;
    right: 0;

    ~ main,
    ~ footer {
        margin-right: @sidebar-width;
        margin-left: inherit;
    }

    .uk-nav-default > li > a {
        border-right: @sidebar-item-border-width solid transparent;
        border-left: 0px;
    }

    .uk-nav-default > li > a:hover,
    .uk-nav-default > li.uk-open > a,
    .uk-nav-default > li.uk-active > a {
        border-right: @sidebar-item-border-width solid @sidebar-item-border-color;
        border-left: 0px;
    }
}

/* ========================================================================
   Dark mode variant
 ========================================================================== */
.uf-sidebar when (@sidebar-sidebar-color-mode = dark) {
    background-color: @inverse-sidebar-background;

    .uk-nav-default > li > a {
        color: @inverse-sidebar-item-color;
    }

    // Add theme colored border, background and text color for hover, open and active
    .uk-nav-default > li > a:hover,
    .uk-nav-default > li.uk-open > a,
    .uk-nav-default > li.uk-active > a {
        background-color: @inverse-sidebar-active-background;
        color: @inverse-sidebar-item-active-color;
    }

    // Sub-nav items
    // Set base color for all links
    .uk-nav-default .uk-nav-sub a {
        color: @inverse-sidebar-sublist-item-color;
    }

    // Set active and hover styles
    .uk-nav-default .uk-nav-sub li > a:hover,
    .uk-nav-default .uk-nav-sub li.uk-active > a {
        color: @inverse-sidebar-sublist-item-active-color;
        background-color: @inverse-sidebar-sublist-active-background;
    }

    // Move each nested level to the right and set background color
    .uk-nav-default .uk-nav-sub {
        background-color: @inverse-sidebar-sublist-background;
    }

    // Apply light text color to nav headers
    .uk-nav-default .uk-nav-header {
        color: @global-inverse-color;
    }
}