XH_Digital_Management/static/css/layouts/layout-14.css

/*
    description Of variables for build for theme layouts
        1) menu-caption-color
            List of color for sidebar menu caption

        2) brand-background
            List of color for logo background

        3) header-dark-background
            List of color for Dark Header

        4) header-light-background
            List of color for light Header

        5) menu-dark-background
            List of color for Dark sidebar menu

        6) menu-light-background
            List of color for light sidebar menu

        7) menu-active-color
            List of color for Active item highliter

        8) menu-icon-color
            List of color for sidebar menu items icon colors
*/
/**  =====================
     layout-14 css start
==========================  **/
/* menu[ layout-14 ] css start */
body.layout-14 .navbar-popup {
    position: absolute;
    top: 64px;
    left: 279px;
    width: 264px;
    height: auto;
    box-shadow: 0 0 15px 0 rgba(69, 90, 100, 0.09);
    display: none;
}

body.layout-14 .navbar-popup > .pcoded-submenu {
    border-radius: 5px;
    background: #39465C;
}

body.layout-14 .navbar-popup:after {
    content: "j";
    position: absolute;
    top: 8px;
    left: -31px;
    font-family: "pct";
    z-index: 1001;
    font-size: 50px;
    line-height: 1;
    color: #39465C;
    width: 40px;
    height: 100%;
    text-shadow: -8px 0 13px rgba(62, 57, 107, 0.08);
    display: flex;
    align-items: flex-start;
}

body.layout-14 .navbar-popup.vedge:after {
    top: -8px;
    align-items: flex-end;
}

body.layout-14 .pcoded-navbar.navbar-collapsed .navbar-popup {
    left: 85px;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover {
    width: 70px !important;
    height: 100%;
    transition: all 0.3s ease-in-out;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-header:before,
body.layout-14 .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-main-container:before {
    display: none;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .navbar-brand .b-brand {
    display: none;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .navbar-brand .mobile-menu {
    right: auto;
    left: 20px;
    transition-delay: 0s;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .navbar-brand .mobile-menu span {
    background: transparent;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .mobile-menu span {
    background-color: transparent;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .mobile-menu span:after, body.layout-14 .pcoded-navbar.navbar-collapsed:hover .mobile-menu span:before {
    height: 2px;
    width: 100%;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .mobile-menu span:before {
    transform: rotate(45deg) translate(4px, 4px);
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .mobile-menu span:after {
    transform: rotate(-45deg) translate(3px, -3px);
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .header-logo {
    width: 70px;
    padding: 10px 20px;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .header-logo img {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    opacity: 0;
    transition: unset;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .header-logo .logo-thumb {
    transform: rotateY(0deg);
    transform-origin: 0 0;
    opacity: 1;
    left: calc((70px / 2) - 20px);
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .navbar-content.ps {
    overflow: visible;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-menu-caption {
    position: relative;
    width: 100%;
    height: auto;
    white-space: nowrap;
    overflow: hidden;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-menu-caption > label {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-menu-caption:after {
    content: "";
    position: absolute;
    top: 32px;
    left: 15px;
    width: calc(100% - 30px);
    height: 1px;
    background: rgba(181, 189, 202, 0.5);
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a {
    padding: 7px 20px;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a > .pcoded-micon + .pcoded-mtext {
    position: absolute;
    top: 11px;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li > a > .pcoded-mtext {
    transform: rotateY(-90deg);
    transform-origin: 0 0;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-hasmenu > a:after {
    right: 12px;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-hasmenu .pcoded-submenu {
    display: none;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu:after {
    content: "";
    position: absolute;
    top: 50px;
    left: calc((70px / 2) + 2px);
    width: 1px;
    height: calc(100% - 50px);
    background: rgba(181, 189, 202, 0.2);
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu li a {
    color: transparent;
    white-space: nowrap;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-inner-navbar > li.pcoded-trigger .pcoded-submenu .pcoded-submenu li a:before {
    opacity: 0;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-header {
    width: calc(100% - 70px);
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-header,
body.layout-14 .pcoded-navbar.navbar-collapsed:hover ~ .pcoded-main-container {
    margin-left: 70px;
}

body.layout-14 .pcoded-navbar.navbar-collapsed:hover .pcoded-badge {
    transform: rotateX(-90deg);
    transform-origin: 50% 50%;
    opacity: 0;
    display: none;
    transition: all 0.15s ease-in-out;
}

body.layout-14 .pcoded-navbar.menu-light .navbar-popup > .pcoded-submenu {
    background: #fff;
}

body.layout-14 .pcoded-navbar.menu-light .navbar-popup:after {
    color: #fff;
}

body.layout-14 .pcoded-navbar.navbar-blue .navbar-popup > .pcoded-submenu {
    background: #19BCBF;
}

body.layout-14 .pcoded-navbar.navbar-blue .navbar-popup:after {
    color: #19BCBF;
}

body.layout-14 .pcoded-navbar.navbar-red .navbar-popup > .pcoded-submenu {
    background: #FF9764;
}

body.layout-14 .pcoded-navbar.navbar-red .navbar-popup:after {
    color: #FF9764;
}

body.layout-14 .pcoded-navbar.navbar-purple .navbar-popup > .pcoded-submenu {
    background: #463699;
}

body.layout-14 .pcoded-navbar.navbar-purple .navbar-popup:after {
    color: #463699;
}

body.layout-14 .pcoded-navbar.navbar-info .navbar-popup > .pcoded-submenu {
    background: #2DCEE3;
}

body.layout-14 .pcoded-navbar.navbar-info .navbar-popup:after {
    color: #2DCEE3;
}

body.layout-14 .pcoded-navbar.navbar-dark .navbar-popup > .pcoded-submenu {
    background: #39465C;
}

body.layout-14 .pcoded-navbar.navbar-dark .navbar-popup:after {
    color: #39465C;
}

/* menu [ layout-14 ] css end */