e241bab130
Since the icon was absolutely positioned, in some languages it overlapped with the text. Using a flex layout solves this issue. It also improves the appearance of elements whose text spans over multiple lines; previously the second line would go under their section icon. We're also using the `$global-left` variable so the icon is properly displayed in languages written from right to left. We could use the `margin-inline-start` property instead, but it isn't universally supported in every browser yet. Since the layout is now incompatible with the old (and obsolete) way to add icons to the menu (using classes which would use the `[class^="icon-"]` selector), we're removing this code.
186 lines
3.1 KiB
SCSS
186 lines
3.1 KiB
SCSS
.admin-sidebar {
|
|
background: $sidebar;
|
|
background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%);
|
|
border-right: 1px solid $border;
|
|
color: $white;
|
|
|
|
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;
|
|
}
|
|
|
|
.is-active {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
}
|