| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- 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 footer {
- padding: 0.781rem;
- text-align: center;
- border-top: 1px solid #ddd;
- }
- body main {
- background-color: #ffffff;
- }
- body main > header {
- border-bottom: 1px solid #ddd;
- padding: 0.313rem 0.781rem;
- }
- body main > header .logo img {
- position: relative;
- top: -2px;
- }
- body main > div.container-fluid {
- padding: 0.781rem;
- }
|