diff --git a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss index 78a4e49c3..c6f7d5a86 100644 --- a/app/assets/stylesheets/admin/budgets/groups_and_headings.scss +++ b/app/assets/stylesheets/admin/budgets/groups_and_headings.scss @@ -1,5 +1,6 @@ .admin .groups-and-headings { $gap: rem-calc(map-get($grid-column-gutter, medium)); + @include admin-action-icons; > section + section { margin-top: $line-height * 1.5; @@ -51,15 +52,6 @@ @include icon-on-top; } - .edit-link { - @include has-fa-icon(edit, regular); - } - - .destroy-link { - @include has-fa-icon(trash-alt, regular); - color: darken($alert-color, 5%); - } - .new-link { @include hollow-button; flex-shrink: 0; diff --git a/app/assets/stylesheets/admin/budgets/links.scss b/app/assets/stylesheets/admin/budgets/links.scss index 28ba12b42..a107f700b 100644 --- a/app/assets/stylesheets/admin/budgets/links.scss +++ b/app/assets/stylesheets/admin/budgets/links.scss @@ -1,40 +1,32 @@ .admin .budgets-links { - $gap: $line-height; - @include flex-with-gap($gap); - align-items: baseline; + $vertical-gap: $line-height; + @include admin-action-icons; + @include flex-with-gap; + align-items: flex-start; flex-wrap: wrap; - margin-top: -$gap; + margin-top: -$vertical-gap; > * { - margin-top: $gap; + $min-width: $sdg-icon-min-width; + margin-top: $vertical-gap; + min-width: $min-width; + + @supports (max-width: max-content) { + flex-basis: $min-width; + flex-grow: 1; + max-width: max-content; + } } + * { margin-top: $line-height; } - .preview-link { - @include has-fa-icon(eye, regular); - @include hollow-button; - } - - .edit-link { - @include has-fa-icon(edit, regular); - @include hollow-button; + a { + @include icon-on-top; } .results-link { - @include hollow-button; - } - - .edit-link, - .preview-link, - .results-link { - margin-left: $gap; - margin-top: $gap; - - &::before { - margin-#{$global-right}: $font-icon-margin; - } + @include has-fa-icon(poll, solid); } } diff --git a/app/assets/stylesheets/admin/table_actions.scss b/app/assets/stylesheets/admin/table_actions.scss index 9fc120522..63f466746 100644 --- a/app/assets/stylesheets/admin/table_actions.scss +++ b/app/assets/stylesheets/admin/table_actions.scss @@ -1,4 +1,5 @@ .admin .table-actions { + @include admin-action-icons; @include flex-with-gap(1.6em); align-items: flex-start; padding: 0 0.5em; @@ -11,106 +12,4 @@ button { cursor: pointer; } - - .edit-link { - @include has-fa-icon(edit, regular); - } - - .destroy-link { - @include has-fa-icon(trash-alt, regular); - } - - .destroy-link, - .destroy-role-link, - .destroy-officer-link, - .reject-link, - .confirm-hide-link { - color: darken($alert-color, 5%); - } - - .show-link, - .preview-link { - @include has-fa-icon(eye, regular); - } - - .new-link, - .assign-booth-link { - @include has-fa-icon(plus-circle, solid); - color: $color-success; - } - - .create-role-link, - .create-officer-link { - @include has-fa-icon(user-plus, solid); - color: $color-success; - } - - .destroy-role-link, - .destroy-officer-link, - .reject-link { - @include has-fa-icon(user-times, solid); - } - - .restore-link { - @include has-fa-icon(undo, solid); - } - - .restore-link, - .investments-link { - color: darken($warning-color, 20%); - - &:not(:hover, :focus)::before { - color: $warning-color; - } - } - - .confirm-hide-link { - @include has-fa-icon(flag, regular); - } - - .verify-link { - @include has-fa-icon(user-check, solid); - color: $color-success; - } - - .preview-pending-link { - @include has-fa-icon(search, solid); - } - - .send-pending-link { - @include has-fa-icon(share-square, regular); - color: $color-success; - } - - .configure-link, - .answers-link { - @include has-fa-icon(tools, solid); - } - - .download-link { - @include has-fa-icon(download, solid); - } - - .shifts-link { - @include has-fa-icon(clock, regular); - } - - .investments-link { - @include has-fa-icon(coins, solid); - } - - .headings-link { - @include has-fa-icon(chart-pie, solid); - color: $color-success; - } - - .manage-link, - .ballots-link { - @include has-fa-icon(archive, solid); - color: $link; - } - - .cards-link { - @include has-fa-icon(images, regular); - } } diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss index 80c0982dc..8c7317e78 100644 --- a/app/assets/stylesheets/mixins/icons.scss +++ b/app/assets/stylesheets/mixins/icons.scss @@ -1524,3 +1524,107 @@ $font-awesome-icons: ( font-size: 1.6em; } } + +@mixin admin-action-icons { + .edit-link { + @include has-fa-icon(edit, regular); + } + + .destroy-link { + @include has-fa-icon(trash-alt, regular); + } + + .destroy-link, + .destroy-role-link, + .destroy-officer-link, + .reject-link, + .confirm-hide-link { + color: darken($alert-color, 5%); + } + + .show-link, + .preview-link { + @include has-fa-icon(eye, regular); + } + + .new-link, + .assign-booth-link { + @include has-fa-icon(plus-circle, solid); + color: $color-success; + } + + .create-role-link, + .create-officer-link { + @include has-fa-icon(user-plus, solid); + color: $color-success; + } + + .destroy-role-link, + .destroy-officer-link, + .reject-link { + @include has-fa-icon(user-times, solid); + } + + .restore-link { + @include has-fa-icon(undo, solid); + } + + .restore-link, + .investments-link { + color: darken($warning-color, 20%); + + &:not(:hover, :focus)::before { + color: $warning-color; + } + } + + .confirm-hide-link { + @include has-fa-icon(flag, regular); + } + + .verify-link { + @include has-fa-icon(user-check, solid); + color: $color-success; + } + + .preview-pending-link { + @include has-fa-icon(search, solid); + } + + .send-pending-link { + @include has-fa-icon(share-square, regular); + color: $color-success; + } + + .configure-link, + .answers-link { + @include has-fa-icon(tools, solid); + } + + .download-link { + @include has-fa-icon(download, solid); + } + + .shifts-link { + @include has-fa-icon(clock, regular); + } + + .investments-link { + @include has-fa-icon(coins, solid); + } + + .headings-link { + @include has-fa-icon(chart-pie, solid); + color: $color-success; + } + + .manage-link, + .ballots-link { + @include has-fa-icon(archive, solid); + color: $link; + } + + .cards-link { + @include has-fa-icon(images, regular); + } +} diff --git a/app/components/admin/budgets/links_component.html.erb b/app/components/admin/budgets/links_component.html.erb index 8fa1ce144..c8afc722b 100644 --- a/app/components/admin/budgets/links_component.html.erb +++ b/app/components/admin/budgets/links_component.html.erb @@ -1,4 +1,10 @@