@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext"); html, body { height: 100%; width: 100%; } body { margin: 0; padding: 0; font-family: "Open Sans"; font-size: 14px; font-weight: 400; overflow: hidden; background-color: #f3f3f3; color: #102c58; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ::-webkit-input-placeholder { color: #c3c3c3; } p { color: #ababab; } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 18px; } .u-list { margin: 0; padding: 0; list-style: none; } .u-input { outline: 0; border: 1px solid #d0d0d0; padding: 5px 10px; height: 35px; font-size: 12px; -webkit-border-radius: 10px; border-radius: 10px; background-clip: padding-box; } .c-badge { font-size: 10px; font-weight: 700; min-width: 20px; padding: 5px; border-radius: 4px; display: block; line-height: 0.7; color: #fff; text-align: center; white-space: nowrap; background-color: #102c58; border: 1px solid #0c2142; } .c-badge--red { background-color: #f91605; border: 1px solid #e01404; } .c-badge--blue { background-color: #5f9cfd; border: 1px solid #468cfd; } .c-badge--header-icon { position: absolute; bottom: -9px; } .tooltip { width: 120px; } .tooltip-inner { padding: 8px 10px; color: #fff; text-align: center; background-color: #051835; font-size: 12px; border-radius: 3px; } .tooltip-arrow { border-right-color: #051835 !important; } .hamburger-toggle { position: relative; padding: 0; background: transparent; border: 1px solid transparent; cursor: pointer; order: 1; } .hamburger-toggle [class*='bar-'] { display: block; background: #102c58; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease all; transition: .2s ease all; border-radius: 2px; height: 2px; width: 24px; margin-bottom: 4px; } .hamburger-toggle [class*='bar-']:nth-child(2) { width: 18px; } .hamburger-toggle [class*='bar-']:last-child { margin-bottom: 0; width: 12px; } .hamburger-toggle.is-opened { left: 3px; } .hamburger-toggle.is-opened [class*='bar-'] { background: #102c58; } .hamburger-toggle.is-opened .bar-top { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 15% 15%; transform-origin: 15% 15%; } .hamburger-toggle.is-opened .bar-mid { opacity: 0; } .hamburger-toggle.is-opened .bar-bot { -webkit-transform: rotate(45deg); transform: rotate(-45deg); -webkit-transform-origin: 15% 95%; transform-origin: 15% 95%; width: 24px; } .hamburger-toggle:focus { outline-width: 0; } .header-icons-group { display: flex; order: 3; margin-left: auto; height: 100%; border-left: 1px solid #cccccc; } .header-icons-group .c-header-icon:last-child { border-right: 0; } .c-header-icon { position: relative; display: flex; flex-shrink: 0; float: left; width: 70px; height: 100%; align-items: center; justify-content: center; line-height: 1; cursor: pointer; border-right: 1px solid #cccccc; } .c-header-icon svg { font-size: 18px; line-height: 40px; } .c-header-icon--in-circle { border: 1px solid #d0d0d0; border-radius: 100%; } .c-header-icon:hover svg { color: #f5642d; } .c-header-icon:hover [class*='bar-'] { background: #f5642d; } .l-header { padding-left: 70px; position: fixed; top: 0; right: 0; z-index: 10; width: 100%; background: #ffffff; -webkit-transition: padding 0.5s ease-in-out; -moz-transition: padding 0.5s ease-in-out; -ms-transition: padding 0.5s ease-in-out; -o-transition: padding 0.5s ease-in-out; transition: padding 0.5s ease-in-out; } .l-header__inner { height: 100%; width: 100%; display: flex; height: 70px; align-items: center; justify-content: stretch; border-bottom: 1px solid; border-color: #cccccc; } .sidebar-is-expanded .l-header { padding-left: 220px; } .c-search { display: flex; flex-grow: 1; height: 100%; } .c-search__input { border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-right: 0; width: 100%; height: 100%; border: 0; font-size: 14px; padding: 0 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .c-dropdown { opacity: 0; text-align: left; position: absolute; flex-direction: column; display: none; width: 300px; top: 30px; right: -40px; background-color: #fff; overflow: hidden; min-height: 300px; border: 1px solid #d0d0d0; -webkit-border-radius: 10px; border-radius: 10px; background-clip: padding-box; -webkit-box-shadow: 0px 5px 14px -1px #cecece; -moz-box-shadow: 0px 5px 14px -1px #cecece; box-shadow: 0px 5px 14px -1px #cecece; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .l-sidebar { width: 70px; position: absolute; z-index: 10; left: 0; top: 0; bottom: 0; background: #102c58; -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } .l-sidebar .logo { width: 100%; height: 70px; display: flex; align-items: center; justify-content: center; background-color: #051835; } .l-sidebar .logo .logo__txt { font-size: 26px; line-height: 1; color: #fff; text-align: center; font-weight: 700; } .l-sidebar__content { height: 100%; position: relative; } .sidebar-is-expanded .l-sidebar { width: 220px; } .c-menu > ul { display: flex; flex-direction: column; } .c-menu > ul .c-menu__item { color: #184a98; max-width: 100%; overflow: hidden; } .c-menu > ul .c-menu__item__inner { display: flex; flex-direction: row; align-items: center; min-height: 60px; position: relative; cursor: pointer; -webkit-transition: background-color 0.5s ease-in-out; -moz-transition: background-color 0.5s ease-in-out; -ms-transition: background-color 0.5s ease-in-out; -o-transition: background-color 0.5s ease-in-out; transition: background-color 0.5s ease-in-out; } .c-menu > ul .c-menu__item__inner:before { position: absolute; content: " "; height: 0; width: 2px; left: 0; top: 50%; margin-top: -18px; background-color: #5f9cfd; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .c-menu > ul .c-menu__item.is-active { color: #fff; } .c-menu > ul .c-menu__item.is-active .c-menu__item__inner { border-left-color: #fff; background-color: #1e3e6f; } .c-menu > ul .c-menu__item.is-active .c-menu__item__inner svg { color: #fff; } .c-menu > ul .c-menu__item.is-active .c-menu__item__inner .c-menu-item__title span { color: #fff; } .c-menu > ul .c-menu__item.is-active .c-menu__item__inner:before { height: 36px; opacity: 1; } .c-menu > ul .c-menu__item:not(.is-active):hover { color: #fff; } .c-menu > ul .c-menu__item:not(.is-active):hover .c-menu__item__inner { background-color: #f5642d; border-left-color: #f5642d; } .c-menu > ul .c-menu__item svg { flex: 0 0 70px; font-size: 16px; font-weight: normal; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .c-menu > ul .c-menu__item .c-menu-item__expand { position: relative; left: 100px; padding-right: 20px; color: #fff; margin-left: auto; -webkit-transition: left 1s ease-in-out; -moz-transition: left 1s ease-in-out; -ms-transition: left 1s ease-in-out; -o-transition: left 1s ease-in-out; transition: left 1s ease-in-out; } .sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__expand { left: 0px; } .c-menu > ul .c-menu__item .c-menu-item__title { flex-basis: 100%; padding-right: 10px; position: relative; color: #fff; left: 220px; opacity: 0; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .c-menu > ul .c-menu__item .c-menu-item__title span { font-weight: 400; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-transition: left 0.5s ease-in-out; -moz-transition: left 0.5s ease-in-out; -ms-transition: left 0.5s ease-in-out; -o-transition: left 0.5s ease-in-out; transition: left 0.5s ease-in-out; } .sidebar-is-expanded .c-menu > ul .c-menu__item .c-menu-item__title { left: 0px; opacity: 1; } .c-menu > ul .c-menu__item .c-menu__submenu { background-color: #051835; padding: 15px; font-size: 12px; display: none; } .c-menu > ul .c-menu__item .c-menu__submenu li { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid; border-color: #072048; color: #5f9cfd; } .c-menu > ul .c-menu__item .c-menu__submenu li:last-child { margin: 0; padding: 0; border: 0; } main.l-main { width: 100%; height: 100%; padding: 70px 0 0 70px; -webkit-transition: padding 0.5s ease-in-out; -moz-transition: padding 0.5s ease-in-out; -ms-transition: padding 0.5s ease-in-out; -o-transition: padding 0.5s ease-in-out; transition: padding 0.5s ease-in-out; } main.l-main .content-wrapper { padding: 25px; height: 100%; overflow: auto; } main.l-main .content-wrapper .page-content { border-top: 1px solid #d0d0d0; padding-top: 25px; color: #ababab; } main.l-main .content-wrapper--with-bg .page-content { background: #fff; border-radius: 3px; border: 1px solid #d0d0d0; padding: 25px; } main.l-main .page-title { font-weight: 400; margin-top: 0; margin-bottom: 25px; } .sidebar-is-expanded main.l-main { padding-left: 220px; }

let Dashboard = (() => { let global = { tooltipOptions: { placement: "right" }, menuClass: ".c-menu" }; let menuChangeActive = el => { let hasSubmenu = $(el).hasClass("has-submenu"); $(global.menuClass + " .is-active").removeClass("is-active"); $(el).addClass("is-active"); // if (hasSubmenu) { // $(el).find("ul").slideDown(); // } }; let sidebarChangeWidth = () => { let $menuItemsTitle = $("li .menu-item__title"); $("body").toggleClass("sidebar-is-reduced sidebar-is-expanded"); $(".hamburger-toggle").toggleClass("is-opened"); if ($("body").hasClass("sidebar-is-expanded")) { $('[data-toggle="tooltip"]').tooltip("destroy"); } else { $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions); } }; return { init: () => { $(".js-hamburger").on("click", sidebarChangeWidth); $(".js-menu li").on("click", e => { menuChangeActive(e.currentTarget); }); $('[data-toggle="tooltip"]').tooltip(global.tooltipOptions); } }; })(); Dashboard.init();