$nav-width: 200px; $box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); $box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); body{ background: lightgrey; padding-left: $nav-width; transition: padding-left 230ms ease-in-out; } .card{ padding: 20px 30px; background: white; border-radius: 5px; box-shadow: $box-shadow-2; } #main-nav{ position: fixed; top: 0; left: 0; width: $nav-width; height: 100%; padding: 20px 0; background: #212121; color: white; box-shadow: $box-shadow-1; box-sizing: border-box; transition: left 230ms ease-in-out; h3{ padding-left: 15px; text-align: left; i{ position: absolute; right: 22px; margin-top: 5px; font-size: 3rem; &:hover{ cursor: pointer; } } } ul{ list-style: none; li{ margin: 0; border-bottom: 1px solid #999; &:first-child{ border-top: 1px solid #999; } i{ position: absolute; right: 18px; margin-top: 5px; font-size: 3rem; } } a{ display: block; box-sizing: border-box; width: $nav-width; padding: 10px 15px; color: limegreen; font-size: 2.5rem; text-decoration: none; transition: all 230ms ease-in-out; &:hover{ background: rgba(255, 255, 255, 0.1); } } } } body.collapsed{ padding-left: 64px; } body.collapsed #main-nav{ left: calc($nav-width * -1 + 64px); } #main-actions{ width: 100%; max-width: 100%; margin-top: 0; margin-bottom: 25px; form, input{ margin: 0; } } #main-wrapper{ max-width: 1200px; margin-top: 25px; } #main-wrapper.container.fluid{ width: 100%; max-width: 100%; margin: 0; } #site-header{ margin-bottom: 0; } #item-header, #license-header{ .item-name, .license-name{ margin-bottom: 5px; } .item-created, .item-updated, .license-created, .license-updated{ color: #666; font-size: 1.75rem; font-style: italic; } }