.sidebar {
position: fixed; top: 0; bottom: 0; left: -14rem; width: 15rem; visibility: hidden; overflow-y: auto; font-family: "PT Sans", Helvetica, Arial, sans-serif; font-size: 0.875rem; /* 15px */ color: rgba(255, 255, 255, 0.6); background: radial-gradient(circle, #242424 0%, #1d1f27 100%); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; a { font-weight: normal; color: #fff; } .avatar { margin: 30px 0; text-align: center; a { border-radius: 50%; overflow: hidden; border: 4px solid #96ff92; img { display: block; width: 100px; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); margin: auto; transition: 0.5s; &:hover { transform: scale(1.2); } } } }
}
@media (min-width: 30em) {
.sidebar { font-size: 0.75rem; /* 14px */ }
}
/* Sidebar nav */ .sidebar-nav {
border-bottom: 1px solid rgba(255, 255, 255, 0.1); ul { list-style: none; padding: 0; margin: 0; .nav-item { height: 3rem; border-top: 1px solid rgba(255, 255, 255, 0.1); .nav-link { color: rgba(255, 255, 255, 0.9); padding: 0.4em 0.5em; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 16px; letter-spacing: 1.2px; height: 100%; &:hover { background-color: rgba(0, 0, 0, 0.9); -webkit-transition: all 0s ease; -moz-transition: all 0s ease; transition: all 0s ease; } } &.active { background-color: rgba(255, 255, 255, 0.1); border-color: transparent; .nav-link { color: red; } } i { font-size: 1.8em; padding-right: 0.5em; width: 19em; display: inline; vertical-align: middle; } } }
}
.sidebar-checkbox {
display: none; position: absolute; opacity: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.sidebar-toggle {
position: absolute; top: 0.8rem; left: 1rem; align-items: center; padding: 0.25rem 0.75rem; color: #999; cursor: pointer;
}
.sidebar-toggle:active:before, sidebar-checkbox:focus ~ .sidebar-toggle::before, sidebar-checkbox:checked ~ .sidebar-toggle::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 11.5A.5.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat;
}
@media (min-width: 30.1em) {
.sidebar-toggle { position: fixed; }
}
@media print {
.sidebar-toggle { display: none; }
}