diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index fad0f439a..e6bab74a3 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -408,101 +408,7 @@ code { // 02. Sidebar // ----------- -.admin-sidebar { - background: $sidebar; - background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%); - border-right: 1px solid $border; - - ul { - list-style-type: none; - margin-bottom: 0; - margin-left: 0; - padding: 0; - - [class^="icon-"] { - color: #fff; - display: inline-block; - font-size: rem-calc(20); - line-height: $line-height; - text-align: center; - vertical-align: middle; - width: $line-height * 1.5; - } - } - - 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 { - background: $sidebar-hover; - border-left: 2px solid $sidebar-active; - font-weight: bold; - } - - &[aria-expanded="true"] { - - > a::after { - transform: rotate(180deg); - } - } - } - - li a { - color: #fff; - display: block; - line-height: $line-height * 2; - padding-left: $line-height / 4; - vertical-align: top; - - &:hover { - background: $sidebar-hover; - color: #fff; - text-decoration: none; - } - } - - .is-accordion-submenu-parent { - - > a::after { - border: 0; - content: "\f078"; - font-family: "Font Awesome 5 Free"; - font-weight: bold; - height: auto; - position: absolute; - right: 24px; - 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; - } - } -} +// See admin/menu.scss // 03. List elements // ----------------- diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss new file mode 100644 index 000000000..076a1f291 --- /dev/null +++ b/app/assets/stylesheets/admin/menu.scss @@ -0,0 +1,184 @@ +.admin-sidebar { + background: $sidebar; + background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%); + border-right: 1px solid $border; + + ul { + list-style-type: none; + margin-bottom: 0; + margin-left: 0; + padding: 0; + } + + > ul > li a { + font-weight: bold; + + @mixin icon($name, $style) { + @include has-fa-icon($name, $style); + + &::before { + font-size: rem-calc(20); + margin-left: rem-calc(8); + margin-right: rem-calc(10); + } + } + + [class^="icon-"] { + color: #fff; + display: inline-block; + font-size: rem-calc(20); + line-height: $line-height; + text-align: center; + vertical-align: middle; + width: $line-height * 1.5; + } + + &.booths-link { + @include icon(archive, solid); + } + + &.budgets-link, + &.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 { + @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); + } + } + + 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 { + background: $sidebar-hover; + border-left: 2px solid $sidebar-active; + font-weight: bold; + } + + &[aria-expanded="true"] { + + > a::after { + transform: rotate(180deg); + } + } + } + + li a { + color: #fff; + display: block; + line-height: $line-height * 2; + padding-left: $line-height / 4; + vertical-align: top; + + &:hover { + background: $sidebar-hover; + color: #fff; + text-decoration: none; + } + } + + .is-accordion-submenu-parent { + + > a::after { + border: 0; + content: "\f078"; + font-family: "Font Awesome 5 Free"; + font-weight: bold; + height: auto; + position: absolute; + right: 24px; + 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; + } + } +} diff --git a/app/views/admin/_menu.html.erb b/app/components/admin/menu_component.html.erb similarity index 65% rename from app/views/admin/_menu.html.erb rename to app/components/admin/menu_component.html.erb index b7a85121c..8aceb6092 100644 --- a/app/views/admin/_menu.html.erb +++ b/app/components/admin/menu_component.html.erb @@ -1,62 +1,41 @@