/*-------------------------------*/ /* VARIABLES */ /*-------------------------------*/ body { position: relative; overflow-x: hidden; height: 600px; } body, html { height: 100%; /*background-color: #583e7e;*/ } .nav .open > a { background-color: transparent; } .nav .open > a:hover { background-color: transparent; } .nav .open > a:focus { background-color: transparent; } /*-------------------------------*/ /* Wrappers */ /*-------------------------------*/ #wrapper ,#page-content-wrapper{ -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; padding-right: 0; transition: all 0.5s ease; } #wrapper.toggled { padding-right: 250px; } #wrapper.toggled #sidebar-wrapper { width: 250px; z-index: 99999999; } #wrapper #page-content-wrapper{ margin-left: 0; } #wrapper.toggled #page-content-wrapper { margin-left: -250px; position: absolute; } #sidebar-wrapper { -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; background: #871519; height: 100%; left:auto; right: 0; /*margin-right: -250px;*/ /*overflow-x: hidden;*/ /*overflow-y: auto;*/ transition: all 0.5s ease; width: 0; z-index: 1000; } #sidebar-wrapper::-webkit-scrollbar { display: none; } #page-content-wrapper { width: 100%; } /*-------------------------------*/ /* Sidebar nav styles */ /*-------------------------------*/ .sidebar-nav { list-style: none; margin: 0; padding: 0; position: absolute; top: 40px; width: 250px; } .sidebar-nav li { display: inline-block; line-height: 20px; position: relative; width: 100%; } .sidebar-nav li:before { background-color: #1c1c1c; content: ''; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 3px; z-index: -1; } .sidebar-nav li:first-child a { color: #ffffff; } .sidebar-nav li:hover:before { -webkit-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 100%; } .sidebar-nav li a { color: #dddddd; display: block; padding: 10px 15px 10px 30px; text-decoration: none; } .sidebar-nav .dropdown-menu { background-color: #222222; border-radius: 0; border: none; box-shadow: none; margin: 0; padding: 0; position: relative; width: 100%; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { background-color: transparent; color: #ffffff; text-decoration: none; } .sidebar-nav > .sidebar-brand { font-size: 20px; height: 65px; line-height: 44px; } /*!*-------------------------------*!*/ /*!* Hamburger-Cross *!*/ /*!*-------------------------------*!*/ /*.hamburger {*/ /*background: transparent;*/ /*border: none;*/ /*display: block;*/ /*height: 32px;*/ /*margin-left: 15px;*/ /*position: fixed;*/ /*top: 20px;*/ /*width: 32px;*/ /*z-index: 999;*/ /*}*/ /*.hamburger:hover {*/ /*outline: none;*/ /*}*/ /*.hamburger:focus {*/ /*outline: none;*/ /*}*/ /*.hamburger:active {*/ /*outline: none;*/ /*}*/ /*.hamburger.is-closed:before {*/ /*-webkit-transform: translate3d(0, 0, 0);*/ /*-webkit-transition: all 0.35s ease-in-out;*/ /*color: #ffffff;*/ /*content: '';*/ /*display: block;*/ /*font-size: 14px;*/ /*line-height: 32px;*/ /*opacity: 0;*/ /*text-align: center;*/ /*width: 100px;*/ /*}*/ /*.hamburger.is-closed:hover .hamb-top {*/ /*-webkit-transition: all 0.35s ease-in-out;*/ /*top: 0;*/ /*}*/ /*.hamburger.is-closed:hover .hamb-bottom {*/ /*-webkit-transition: all 0.35s ease-in-out;*/ /*bottom: 0;*/ /*}*/ /*.hamburger.is-closed .hamb-top {*/ /*-webkit-transition: all 0.35s ease-in-out;*/ /*background-color: rgba(255, 255, 255, 0.7);*/ /*top: 5px;*/ /*}*/ /*.hamburger.is-closed .hamb-middle {*/ /*background-color: rgba(255, 255, 255, 0.7);*/ /*margin-top: -2px;*/ /*top: 50%;*/ /*}*/ /*.hamburger.is-closed .hamb-bottom {*/ /*-webkit-transition: all 0.35s ease-in-out;*/ /*background-color: rgba(255, 255, 255, 0.7);*/ /*bottom: 5px;*/ /*}*/ /*.hamburger.is-closed .hamb-top,*/ /*.hamburger.is-closed .hamb-middle,*/ /*.hamburger.is-closed .hamb-bottom,*/ /*.hamburger.is-open .hamb-top,*/ /*.hamburger.is-open .hamb-middle,*/ /*.hamburger.is-open .hamb-bottom {*/ /*height: 4px;*/ /*left: 0;*/ /*position: absolute;*/ /*width: 100%;*/ /*}*/ /*.hamburger.is-open .hamb-top {*/ /*-webkit-transform: rotate(45deg);*/ /*-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);*/ /*background-color: #ffffff;*/ /*margin-top: -2px;*/ /*top: 50%;*/ /*}*/ /*.hamburger.is-open .hamb-middle {*/ /*background-color: #ffffff;*/ /*display: none;*/ /*}*/ /*.hamburger.is-open .hamb-bottom {*/ /*-webkit-transform: rotate(-45deg);*/ /*-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08);*/ /*background-color: #ffffff;*/ /*margin-top: -2px;*/ /*top: 50%;*/ /*}*/ /*.hamburger.is-open:before {*/ /*-webkit-transform: translate3d(0, 0, 0);*/ /*-webkit-transition: all 0.35s ease-in-out;*/ /*color: #ffffff;*/ /*content: '';*/ /*display: block;*/ /*font-size: 14px;*/ /*line-height: 32px;*/ /*opacity: 0;*/ /*text-align: center;*/ /*width: 100px;*/ /*}*/ /*-------------------------------*/ /* Dark Overlay */ /*-------------------------------*/ .overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); margin-left: 0; z-index: 999; } .overlay.is-open{ display: block; } #sidebar-wrapper ul li { background: #871519; position: relative; } #sidebar-wrapper ul li ul{ display: none; } /*#sidebar-wrapper ul li.is_choose>ul{*/ /*display: block;*/ /*}*/ #sidebar-wrapper ul.sidebar-nav> li>ul{ background: #791216; } #sidebar-wrapper ul.sidebar-nav> li>ul li{ padding-left: 20px; background: none; } #sidebar-wrapper ul.sidebar-nav> li>ul>li:first-child a{ background: none; } #sidebar-wrapper .menu_close{ height: 40px; } .dropdownBtn{ position: absolute; height: 41px; line-height: 40px; text-align: center; width: 40px; z-index: 99999; right: 0; top: 0; background: #791216; cursor: pointer; } .dropdownBtn>.glyphicon{ color: white; font-size: 18px; top: 4px; opacity: 0.6; filter:Alpha(opacity=60); } #sidebar-wrapper .menu_close,.glyphicon-menu-hamburger{ display: none; } #sidebar-wrapper .menu_close span{ width: 40px; height: 40px; line-height: 40px; text-align: center; float: right; color: white; opacity: 0.6; font-size: 16px; } @media only screen and (max-width: 920px){ #sidebar-wrapper{ overflow-x: hidden; overflow-y: auto; } #sidebar-wrapper .menu_close,.glyphicon-menu-hamburger{ display: block; } }