6cb4f4acde
This way we simplify the code a bit. Note we're only using this function when variables for background colors are already defined, since that means customizing the variable using the background color will automatically change the color of the text. Customization isn't easier when using raw colors.
186 lines
3.2 KiB
SCSS
186 lines
3.2 KiB
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 a {
|
|
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 {
|
|
margin: 0;
|
|
outline: 0;
|
|
|
|
ul {
|
|
margin-left: $line-height / 1.5;
|
|
border-left: 1px solid $sidebar-hover;
|
|
padding-left: $line-height / 2;
|
|
}
|
|
|
|
&.is-active a,
|
|
&[aria-current] a {
|
|
background: $sidebar-hover;
|
|
border-left: 2px solid $sidebar-active;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&[aria-expanded="true"] {
|
|
|
|
> a::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
li a {
|
|
color: inherit;
|
|
display: block;
|
|
padding: $line-height / 2;
|
|
vertical-align: top;
|
|
|
|
&:hover {
|
|
background: $sidebar-hover;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.is-accordion-submenu-parent {
|
|
|
|
> a {
|
|
@include has-fa-icon(chevron-down, solid, after);
|
|
|
|
&::after {
|
|
margin-#{$global-left}: auto;
|
|
transition: 0.25s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.submenu {
|
|
border-bottom: 0;
|
|
margin-left: $line-height;
|
|
|
|
li:first-child {
|
|
padding-top: $line-height / 2;
|
|
}
|
|
|
|
li:last-child {
|
|
padding-bottom: $line-height / 2;
|
|
}
|
|
|
|
a {
|
|
font-weight: normal;
|
|
margin-#{$global-right}: 0;
|
|
}
|
|
|
|
.is-active {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
}
|