app/assets/stylesheets/admin/menu.scss
.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;
margin-#{$global-left}: 0;
padding: 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);
}
}
li {
ul {
margin-left: calc(#{$line-height * 2} / 3);
border-left: 1px solid $sidebar-hover;
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;
}
}
}