.admin-sidebar { @include background-with-text-contrast($sidebar); background: linear-gradient(to bottom, $sidebar 0%, #488fb5 100%); border-right: 1px solid $border; ul { list-style-type: none; margin-bottom: 0; padding: 0; margin-#{$global-left}: 0; } > ul > li > :first-child { display: flex; font-weight: bold; &::before, &::after { flex: 1em 0 0; margin-top: 0.1em; } @mixin icon($name, $style) { @include has-fa-icon($name, $style); &::before { @extend %admin-menu-icon; } } &.booths-link { @include icon(archive, solid); } &.budgets-link, &.investments-link, &.budget-investments-link { @include icon(chart-pie, solid); } &.comments-link { @include icon(comments, regular); } &.dashboard-link { @include icon(check, solid); } &.debates-link { @include icon(comment-alt, solid); } &.invitations-link { @include icon(envelope, regular); } &.legislation-link, &.legislation-proposals-link, &.legislation-processes-link { @include icon(file-alt, solid); } &.messages-link { @include icon(file-archive, regular); } &.moderated-content-link { @include icon(eye, regular); } &.polls-link { @include icon(check-circle, regular); } &.print-proposals-link, &.print-investments-link { @include icon(print, solid); } &.profiles-link { @include icon(users, solid); } &.proposals-link, &.proposal-notifications-link { @include icon(lightbulb, solid); } &.settings-link { @include icon(cog, solid); } &.signature-sheets-link { @include icon(file-alt, regular); } &.site-customization-link { @include icon(pencil-alt, solid); } &.stats-link { @include icon(chart-line, solid); } &.users-link { @include icon(user, solid); } &.ml-link { @include icon(brain, solid); } &.administrators-link { @include icon(user, solid); } &.tenants-link { @include icon(building, regular); } } li { ul { border-left: 1px solid $sidebar-hover; margin-left: calc(#{$line-height * 2} / 3); padding-left: calc(#{$line-height} / 2); } &.is-active a, &[aria-current] a { background: $sidebar-hover; border-left: 2px solid $sidebar-active; font-weight: bold; } } li > :first-child { color: inherit; display: block; padding: calc(#{$line-height} / 2); vertical-align: top; &:hover { background: $sidebar-hover; color: inherit; text-decoration: none; } } [aria-expanded] { @include has-fa-icon(chevron-down, solid, after); line-height: inherit; text-align: inherit; width: 100%; &::after { margin-#{$global-left}: auto; transition: 0.25s; } &:not([disabled]) { cursor: pointer; } } [aria-expanded="true"]::after { transform: rotate(180deg); } ul ul { border-bottom: 0; margin-left: $line-height; li:first-child { padding-top: calc(#{$line-height} / 2); } li:last-child { padding-bottom: calc(#{$line-height} / 2); } a { font-weight: normal; margin-#{$global-right}: 0; } } }