2ccf725815
We hadn't added this rule before because there was no such rule in scss-lint. Instead, we were following it without a linter, and so we unintentionally broke it sometimes. But now we're using Stylelint, so we can add the rule and let the linter check we're still following it.
180 lines
3.2 KiB
SCSS
180 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;
|
|
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);
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|