| 1 |
- html,body{height:100vh;margin:0;padding:0}body{display:grid;grid-template-rows:auto 1fr;grid-template-columns:minmax(200px, 0.17fr) 1fr;grid-gap:0}body.hidden-aside{grid-template-columns:0 auto}body.hidden-aside aside{transform:translateX(-100%);opacity:0}body aside{position:relative;height:inherit;background-color:#f9f9f9;border-right:1px solid #ddd;overflow-y:auto;transition:transform 0.3s ease, opacity 0.3s ease;transform:translateX(0);display:flex;-ms-flex-direction:inherit;-webkit-flex-direction:inherit;flex-direction:column}body aside>ul.nav{flex-grow:1}body aside>ul.nav>li.nav-item:first-of-type>a{border-bottom:1px solid #ddd}body aside>ul.nav>li.nav-item:not(:first-of-type){border-bottom:1px solid #ddd}body aside>ul.nav>li.nav-item:not(:first-of-type)>a:not(.collapsed){background-color:#f1f1f1}body aside>ul.nav>li.nav-item>ul{padding:0.625rem 0.625rem 0.625rem 0;border-top:1px solid #ddd}body aside>ul.nav>li.nav-item a{display:block;padding:0.438rem 0.781rem;color:#333;text-decoration:none;cursor:pointer}body aside>ul.nav>li.nav-item a:hover{background-color:#f0f0f0}body aside>ul.nav>li.nav-item a.active{background-color:#e9e9e9;outline:1px solid #ddd}body aside footer{padding:0.781rem;text-align:center;border-top:1px solid #ddd}body aside footer a{color:#333;text-decoration:none}body aside footer a:hover{color:blue;text-decoration:underline}body main{background-color:#ffffff;height:inherit;overflow-y:auto}body main>header{border-bottom:1px solid #ddd;padding:0.313rem 0.781rem}body main>header .logo img{position:relative;top:-2px}body main>header .profile-icon{display:none}body main>div.container-fluid{padding:0.781rem}@media (max-width: 768px){body main>header .profile-text{display:none}body main>header .profile-icon{display:inline-block}}
|
