Ela Admin - HTML5 Admin Template - не работает переключаемая боковая панель - PullRequest
1 голос
/ 05 марта 2020

Я не знаю, почему моя переключаемая боковая панель не работает. Что-то не хватает в моем коде. Когда я нажимаю на кнопку меню, ничего не происходит. Предположительно, боковая панель рухнет, когда я нажму на переключатель меню, но ничего не работает. Надеюсь, есть кто-то с ответом. Это мой html.

<!doctype html>
<html class="no-js" lang="">
<head>
</head>

<body>
    <!-- Left Panel -->
    <aside id="left-panel" class="left-panel">
        <nav class="navbar navbar-expand-sm navbar-default">
            <div id="main-menu" class="main-menu collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="/home"><i class="menu-icon fa fa-laptop"></i>Dashboard</a>
                    </li>
                    <li class="menu-title">Human Resource</li><!-- /.menu-title -->
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-user-circle"></i>User Management</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-list"></i><a href="{{url('userlist')}}">Users List</a></li>
                        </ul>
                    </li>

                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-id-badge"></i>Company Management</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-list"></i><a href="{{url('companylist')}}">Company List</a></li>
                        </ul>
                    </li>

                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-id-badge"></i>Option</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-list"></i><a href="{{url('optioncontrol')}}">Option Control</a></li>
                        </ul>
                    </li>

                    <li class="menu-title">Worker Execution</li>
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" area-expended="false">
                        <i class="menu-icon fa fa-users"></i>Execution Management</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="fa fa-list"></i><a href="{{url('workerexecution')}}" target="_blank">Execution List</a></li>
                            <li><i class="menu-icon fa fa-list-ul"></i><a href="{{url('qccheck')}}">QC Check</a></li>
                        </ul>
                    </li>

                    <li class="menu-title">Inventory Management</li><!-- /.menu-title -->

                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-briefcase"></i>Inventories</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-list-alt"></i><a href="{{url('inventorylist')}}">Inventories List</a></li>
                        </ul>
                    </li>
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-file-text-o"></i>Bill Of Material (BOM)</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-list-ul"></i><a href="{{url('bomlist')}}">BOM List</a></li>
                        </ul>
                    </li>

                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-area-chart"></i>Line Management</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-sitemap"></i><a href="{{url('line')}}">Lines List</a></li>
                        </ul>
                    </li>

                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-calendar"></i>Scheduler</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-calendar-check-o"></i><a href="{{url('scheduler')}}">Scheduler</a></li>

                        </ul>
                    </li>
                    <li class="menu-item-has-children dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="menu-icon fa fa-calendar"></i>Leakage</a>
                        <ul class="sub-menu children dropdown-menu">
                            <li><i class="menu-icon fa fa-calendar-check-o"></i><a href="{{url('leakpoin')}}">Leakage</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
    </aside>
    <!-- /#left-panel -->
    <!-- Right Panel -->
    <div id="right-panel" class="right-panel">
        <!-- Header-->
        <header id="header" class="header">
            <div class="top-left">
                <div class="navbar-header">
                    <a class="navbar-brand" href="./">Line: {{Session::get('line')}} | Station: {{Session::get('station')}}</a>
                    <a class="navbar-brand hidden" href="./"><img src="{{asset('img/logo.jpg')}}" alt="Logo"></a>
                    <a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a>
                </div>
            </div>
            <div class="top-right">
                <div class="header-menu">
                    <div class="header-left">
                        <!-- <button class="search-trigger"><i class="fa fa-search"></i></button> -->
                        <div class="form-inline">
                            <form class="search-form">
                                <input class="form-control mr-sm-2" type="text" placeholder="Search ..." aria-label="Search">
                                <button class="search-close" type="submit"><i class="fa fa-close"></i></button>
                            </form>
                        </div>

                        <div class="dropdown for-notification">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fa fa-bell"></i>
                                <span class="count bg-danger">3</span>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="notification">
                                <p class="red">You have 3 Notification</p>
                                <a class="dropdown-item media" href="#">
                                    <i class="fa fa-check"></i>
                                    <p>100 Items Completed</p>
                                </a>
                                <a class="dropdown-item media" href="#">
                                    <i class="fa fa-info"></i>
                                    <p>50 Items Pending</p>
                                </a>
                                <a class="dropdown-item media" href="#">
                                    <i class="fa fa-warning"></i>
                                    <p>3 Items Failed</p>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="user-area dropdown float-right">
                        <a href="#" class="dropdown-toggle active" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img class="user-avatar rounded-circle" src="{{asset('img/admin.jpg')}}" alt="User Avatar">
                        </a>

                        <div class="user-menu dropdown-menu">
                            <a class="nav-link" href="/myprofile"><i class="fa fa- user"></i>My Profile </a>

                            <a class="nav-link" href="#"><i class="fa fa- user"></i>Notifications <span class="count">13</span></a>

                            <a class="nav-link" href="#"><i class="fa fa -cog"></i>Settings</a>

                            <a class="nav-link" href="{{url('logout')}}"><i class="fa fa-power -off"></i>Logout</a>
                        </div>
                    </div>

                </div>
            </div>
        </header>

        <div class="content">
        @yield('content')
        </div>
        <!-- /#header -->
    <!-- /#right-panel -->
</body>
</html>

Это мой js файл

$.noConflict();

jQuery(document).ready(function($) {

    // Menu Trigger
    $('#menuToggle').on('click', function(event) {
        var windowWidth = $(window).width();         
        if (windowWidth<1010) { 
            $('body').removeClass('open'); 
            if (windowWidth<760){ 
                $('#left-panel').slideToggle(); 
            } else {
                $('#left-panel').toggleClass('open-menu');  
            } 
        } else {
            $('body').toggleClass('open');
            $('#left-panel').removeClass('open-menu');  
        } 

    }); 


    $(".menu-item-has-children.dropdown").each(function() {
        $(this).on('click', function() {
            var $temp_text = $(this).children('.dropdown-toggle').html();
            $(this).children('.sub-menu').prepend('<li class="subtitle">' + $temp_text + '</li>'); 
        });
    });


    // Load Resize 
    $(window).on("load resize", function(event) { 
        var windowWidth = $(window).width();         
        if (windowWidth<1010) {
            $('body').addClass('small-device'); 
        } else {
            $('body').removeClass('small-device');  
        } 

    });


});

Это мой css

/* Main Styles */
aside.left-panel {
  background: #fff;
  height: 100vh;
  padding: 0;
  vertical-align: top;
  width: 280px;
  -webkit-box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
          box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
  position: fixed;
  left: 0;
  bottom: 0;
  top: 55px;
  z-index: 999; }
  aside.left-panel:hover {
    overflow-x: scroll; }

.open aside.left-panel:hover {
  overflow-x: inherit; }

.small-device .right-panel {
  margin-left: 83px; }

.navbar {
  background: #fff;
  border-radius: 0;
  border: none;
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: top; }
  .navbar .main-menu {
    float: left;
    padding: 0;
    padding-bottom: 50px; }
  .navbar .menu-title {
    color: #41434d;
    clear: both;
    display: block;
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 700;
    line-height: 50px;
    padding: 0;
    text-transform: uppercase;
    width: 100%; }
  .navbar .navbar-nav {
    float: none;
    position: relative; }
    .navbar .navbar-nav > li {
      padding-left: 30px;
      padding-right: 30px; }
      .navbar .navbar-nav > li.active {
        background: #fafafa; }
    .navbar .navbar-nav li {
      width: 100%; }
      .navbar .navbar-nav li.active .menu-icon, .navbar .navbar-nav li:hover .toggle_nav_button:before,
      .navbar .navbar-nav li .toggle_nav_button.nav-open:before {
        color: #03a9f3; }
      .navbar .navbar-nav li .dropdown-toggle:after {
        display: none; }
      .navbar .navbar-nav li > a {
        background: none !important;
        color: #607d8b;
        display: inline-block;
        font-size: 14px;
        line-height: 26px;
        padding: 10px 0;
        position: relative;
        width: 100%; }
        .navbar .navbar-nav li > a:hover, .navbar .navbar-nav li > a:hover .menu-icon {
          color: #03a9f3; }
        .navbar .navbar-nav li > a .menu-icon {
          color: #607d8b;
          float: left;
          margin-top: 8px;
          width: 55px;
          text-align: left;
          z-index: 9; }
        .navbar .navbar-nav li > a .menu-title-text {
          font-size: 14px; }
        .navbar .navbar-nav li > a .badge {
          border-radius: 0;
          font-weight: 600;
          float: right;
          margin: 6px 0 0 0;
          padding: 0.4em 0.5em; }
      .navbar .navbar-nav li.menu-item-has-children {
        position: relative; }
        .navbar .navbar-nav li.menu-item-has-children a {
          line-height: 30px; }
          .navbar .navbar-nav li.menu-item-has-children a:before {
            content: "";
            position: absolute;
            top: 23px;
            right: 0;
            width: 8px;
            height: 8px;
            border-style: solid;
            border-width: 1px;
            border-color: #607d8b #607d8b transparent transparent;
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
            -webkit-transition: all .25s ease;
            transition: all .25s ease; }
          .navbar .navbar-nav li.menu-item-has-children a:hover:before {
            border-color: #03a9f3 #03a9f3 transparent transparent; }
        .navbar .navbar-nav li.menu-item-has-children .sub-menu {
          background: #fff;
          border: none;
          -webkit-box-shadow: none;
                  box-shadow: none;
          overflow-y: hidden;
          padding: 0 0 0 35px; }
          .navbar .navbar-nav li.menu-item-has-children .sub-menu li {
            position: relative; }
          .navbar .navbar-nav li.menu-item-has-children .sub-menu i {
            color: #c8c9ce;
            float: left;
            padding: 0;
            position: absolute;
            left: 0;
            font-size: 14px;
            top: 9px; }
          .navbar .navbar-nav li.menu-item-has-children .sub-menu a {
            padding: 2px 0 2px 30px; }
            .navbar .navbar-nav li.menu-item-has-children .sub-menu a:before {
              content: '';
              display: none; }
            .navbar .navbar-nav li.menu-item-has-children .sub-menu a .menu-icon {
              top: 13px;
              text-align: left;
              width: 25px; }
        .navbar .navbar-nav li.menu-item-has-children.show a:before {
          border-color: transparent #607d8b #607d8b transparent;
          top: 20px;
          right: -5px; }
        .navbar .navbar-nav li.menu-item-has-children.show a:hover:before {
          border-color: transparent #03a9f3 #03a9f3 transparent; }
        .navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
          max-height: 1000px;
          opacity: 1;
          position: static !important; }

.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:focus,
.navbar .navbar-nav > .active > a:hover {
  color: #03a9f3; }

.navbar-nav li span.count {
  background: #a9d86e;
  border-radius: 50%;
  color: #fff;
  font-family: 'Open Sans';
  font-size: 9px;
  font-weight: 700;
  float: right;
  height: 20px;
  width: 20px;
  line-height: 20px;
  margin-right: 15px;
  text-align: center; }

.open .navbar .navbar-brand.hidden {
  display: block; }
.open .sub-menu .subtitle {
  display: block;
  font-size: 15px;
  line-height: 35px;
  color: #607d8b;
  border-bottom: 1px solid rgba(96, 125, 139, 0.15); }
.open .sub-menu i {
  left: 15px !important; }

.sub-menu .subtitle {
  display: none; }
  .sub-menu .subtitle > .menu-icon {
    display: none; }

.open aside.left-panel {
  max-width: 83px;
  width: 83px; }
  .open aside.left-panel .navbar .navbar-header {
    padding: 0; }
  .open aside.left-panel .navbar .navbar-brand {
    display: none; }
    .open aside.left-panel .navbar .navbar-brand.hidden {
      display: block !important;
      text-align: center;
      width: 100%; }
      .open aside.left-panel .navbar .navbar-brand.hidden img {
        max-width: 100%;
        margin: 0 auto; }
    .open aside.left-panel .navbar .navbar-brand.d-md-none {
      display: block !important;
      margin: 13px 0 0;
      min-height: 67px;
      padding: 0;
      text-align: center; }
  .open aside.left-panel .navbar .navbar-nav:before {
    display: none !important; }
  .open aside.left-panel .navbar .navbar-nav li {
    position: relative;
    padding: 0 15px; }
    .open aside.left-panel .navbar .navbar-nav li a {
      font-size: 0;
      z-index: 0;
      -webkit-transition: none;
      transition: none; }
      .open aside.left-panel .navbar .navbar-nav li a .menu-icon {
        font-size: 20px;
        z-index: -1;
        text-align: center;
        width: inherit; }
      .open aside.left-panel .navbar .navbar-nav li a .menu-title-text {
        font-size: 0; }
      .open aside.left-panel .navbar .navbar-nav li a .badge {
        display: none; }
    .open aside.left-panel .navbar .navbar-nav li > a {
      max-width: 60px;
      padding-left: 0; }
    .open aside.left-panel .navbar .navbar-nav li.menu-item-has-children {
      overflow: hidden; }
      .open aside.left-panel .navbar .navbar-nav li.menu-item-has-children ul {
        padding-left: 0; }
      .open aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu {
        display: block;
        left: 83px;
        top: 0; }
        .open aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu li a {
          display: block;
          font-size: 14px;
          max-width: inherit;
          padding: 2px 15px 2px 25px;
          width: 100%; }
          .open aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu li a .menu-icon {
            text-align: center; }
      .open aside.left-panel .navbar .navbar-nav li.menu-item-has-children.show {
        overflow: visible; }
        .open aside.left-panel .navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
          position: absolute !important;
          width: 180px;
          -webkit-box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
                  box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08); }
    .open aside.left-panel .navbar .navbar-nav li span.count {
      display: none;
      margin-right: 5px;
      z-index: 1; }
    .open aside.left-panel .navbar .navbar-nav li.active a:after {
      content: '';
      display: none; }
  .open aside.left-panel .navbar .navbar-nav .menu-title {
    font-size: 0;
    line-height: 0;
    opacity: 0;
    padding: 0; }
  .open aside.left-panel .menutoggle {
    background-color: #dc3545;
    color: #fff !important;
    right: -20px;
    text-align: center; }

/* Right panel */
.right-panel {
  background: #f1f2f7;
  margin-left: 280px;
  margin-top: 55px; }
  .right-panel .top-left {
    width: 350px;
    float: left; }
  .right-panel .top-rigth {
    float: left; }
  .right-panel .breadcrumbs {
    float: left;
    margin-top: 30px;
    padding: 0 1.875em;
    width: 100%; }
    .right-panel .breadcrumbs .breadcrumbs-inner {
      background-color: #fff; }
    .right-panel .breadcrumbs .col-lg-8 .page-header {
      float: left; }
  .right-panel .page-header {
    min-height: 50px;
    margin: 0px;
    padding: 0px 15px;
    background: #ffffff;
    border-bottom: 0px; }
    .right-panel .page-header h1 {
      font-size: 18px;
      padding: 15px 0; }
    .right-panel .page-header .breadcrumb {
      margin: 0px;
      padding: 13.5px 0;
      background: #fff;
      text-transform: capitalize; }
    .right-panel .page-header .breadcrumb > li + li:before {
      padding: 0 5px;
      color: #ccc;
      content: "/\00a0"; }

.right-panel header.header {
  background: #fff;
  border-bottom: 1px solid #e8e9ed;
  -webkit-box-shadow: none;
          box-shadow: none;
  clear: both;
  padding: 0 30px;
  height: 55px;
  position: fixed;
  left: 280px;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999; }
.right-panel .navbar-brand {
  width: 250px;
  display: inline-block; }
.right-panel .menutoggle {
  padding-top: 7px; }
.right-panel .navbar-header {
  width: 100%;
  background-color: #fff;
  padding: 0 1.25em 0 0; }
  .right-panel .navbar-header > a {
    display: inline-block; }
.right-panel .navbar-brand {
  line-height: 42px; }
  .right-panel .navbar-brand img {
    max-width: 145px; }
  .right-panel .navbar-brand.hidden {
    display: none; }

.open .right-panel {
  margin-left: 83px; }
.open .let-panel {
  z-index: 999; }

header.fixed-top {
  background: #fff;
  padding: 20px; }

.menutoggle {
  background-color: transparent;
  color: #99abb4 !important;
  cursor: pointer;
  font-size: 1em;
  height: 40px;
  line-height: 40px;
  width: 40px;
  display: block;
  text-align: right; }

/* Tabs */
.nav-tabs a.active {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent; }
.nav-tabs .dropdown .dropdown-menu {
  top: 100% !important; }

.custom-tab .nav-tabs > a.active,
.custom-tab .nav-tabs > .active > a:focus,
.custom-tab .nav-tabs > li.active > a:hover {
  border-color: transparent transparent;
  color: #ff2e44;
  position: relative; }

.custom-tab .nav-tabs > a.active:after,
.custom-tab .nav-tabs > li.active > a:focus:after,
.custom-tab .nav-tabs > li.active > a:hover:after {
  background: #ff2e44;
  bottom: -1px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 999; }

@media (max-width: 1024px) {
  .open aside.left-panel {
    width: 280px;
    max-width: 280px; }

  aside.left-panel:hover {
    overflow-x: inherit; }

  aside.left-panel.open-menu {
    overflow-x: scroll; }

  aside.left-panel {
    max-width: 83px;
    width: 83px; }
    aside.left-panel .navbar .navbar-header {
      padding: 0; }
    aside.left-panel .navbar .navbar-brand {
      display: none; }
      aside.left-panel .navbar .navbar-brand.hidden {
        padding: 0 0 10px;
        text-align: center;
        width: 100%; }
        aside.left-panel .navbar .navbar-brand.hidden img {
          max-width: 100%;
          margin: 0 auto; }
      aside.left-panel .navbar .navbar-brand.d-md-none {
        margin: 13px 0 0;
        min-height: 67px;
        padding: 0;
        text-align: center; }
    aside.left-panel .navbar .navbar-nav:before {
      display: none !important; }
    aside.left-panel .navbar .navbar-nav li {
      position: relative; }
      aside.left-panel .navbar .navbar-nav li a {
        font-size: 0;
        z-index: 0;
        -webkit-transition: none;
        transition: none; }
        aside.left-panel .navbar .navbar-nav li a .menu-icon {
          font-size: 20px;
          z-index: -1;
          text-align: center;
          width: inherit; }
        aside.left-panel .navbar .navbar-nav li a .menu-title-text {
          font-size: 0; }
        aside.left-panel .navbar .navbar-nav li a .badge {
          display: none; }
      aside.left-panel .navbar .navbar-nav li > a {
        max-width: 60px;
        padding-left: 0; }
      aside.left-panel .navbar .navbar-nav li.menu-item-has-children {
        overflow: hidden; }
        aside.left-panel .navbar .navbar-nav li.menu-item-has-children a:before {
          content: '';
          display: none; }
        aside.left-panel .navbar .navbar-nav li.menu-item-has-children ul {
          padding-left: 0; }
        aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu {
          display: block;
          left: inherit;
          right: -160px;
          top: 0; }
          aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu li a {
            display: block;
            font-size: 14px;
            max-width: inherit;
            padding: 2px 15px 2px 35px;
            width: 100%; }
            aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu li a .menu-icon {
              text-align: center; }
          aside.left-panel .navbar .navbar-nav li.menu-item-has-children .sub-menu i {
            left: 10px; }
        aside.left-panel .navbar .navbar-nav li.menu-item-has-children.show {
          overflow: visible; }
          aside.left-panel .navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
            position: absolute !important; }
      aside.left-panel .navbar .navbar-nav li span.count {
        display: none;
        margin-right: 5px;
        z-index: 1; }
      aside.left-panel .navbar .navbar-nav li.active a:after {
        content: '';
        display: none; }
    aside.left-panel .navbar .navbar-nav .menu-title {
      font-size: 0;
      line-height: 0;
      opacity: 0;
      padding: 0; }
    aside.left-panel .menutoggle {
      display: none; }
    aside.left-panel.open-menu {
      max-width: 280px;
      width: 280px; }
      aside.left-panel.open-menu .navbar .navbar-nav li > a {
        width: 100%;
        max-width: 100%;
        font-size: 14px; }
        aside.left-panel.open-menu .navbar .navbar-nav li > a .menu-icon {
          width: 55px;
          font-size: inherit;
          text-align: left; }
      aside.left-panel.open-menu .navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
        position: static !important;
        margin-left: 45px; }
      aside.left-panel.open-menu .navbar .navbar-nav .menu-title {
        padding-left: 30px;
        padding-right: 30px;
        font-size: 14px;
        line-height: 50px;
        opacity: 1; }

  .navbar .main-menu {
    padding: 50px; }

  }
@media (max-width: 768px) {
  .navbar {
    height: 100vh; }
    .navbar .navbar-nav li.menu-item-has-children > a:before {
      display: block !important; }
    .navbar .main-menu {
      float: none;
      padding-bottom: 70px; }

  .left-panel {
    display: none; }

  aside.left-panel {
    overflow: scroll; }

  .right-panel header.header {
    height: 62px; }
  .right-panel .top-left, .right-panel .top-right {
    width: 100%;
    float: none;
    background: white; }
  .right-panel .menutoggle {
    float: right; }
  .right-panel .navbar-header {
    padding: 0; }
  .right-panel header.header {
    position: static; }
    .right-panel header.header .top-left {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      padding: 0 30px;
      z-index: 999;
      border-bottom: 1px solid #dcdcdc; }
    .right-panel header.header .top-right {
      padding: 0 30px; }

  .small-device .right-panel {
    margin-left: 0; }

  #left-panel {
    max-width: 100%;
    width: 100%; }
    #left-panel .navbar .navbar-nav li > a {
      max-width: inherit;
      font-size: 14px; }
      #left-panel .navbar .navbar-nav li > a .menu-icon {
        width: 55px;
        text-align: left;
        font-size: 14px; }
    #left-panel .navbar .navbar-nav li.menu-item-has-children.show .sub-menu {
      position: static !important;
      padding-left: 50px; }

  .orders {
    overflow: hidden; }

  .order-table .avatar, .order-table .serial {
    display: none; } }
@media (max-width: 575px) {
  #left-panel .navbar {
    display: inherit; }
    #left-panel .navbar .main-menu {
      display: inherit; }
    #left-panel .navbar .sub-menu.children {
      display: none; }
    #left-panel .navbar .sub-menu.children.show {
      display: block; }

  .right-panel .navbar-brand {
    width: 220px;
    padding-bottom: 5px; }
  .right-panel .menutoggle {
    width: 20px; } }
#cellPaiChart {
  height: 160px; }
  #cellPaiChart .pieLabel {
    top: 50px !important; }
    #cellPaiChart .pieLabel div {
      font-size: 16px !important; }
  #cellPaiChart #pieLabel1 {
    left: 20px !important; }
  #cellPaiChart #pieLabel0 {
    left: inherit !important;
    right: 20px !important; }

  .modal-backdrop {
       background-color: grey;
       opacity: 0.8;
    }
/*# sourceMappingURL=style.css.map */
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...