diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index e6bab74a3..cd79a951b 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -614,6 +614,16 @@ code { } } +.admin-content > header { + align-items: flex-start; + display: flex; + + a { + @include hollow-button; + margin-left: auto; + } +} + .admin-content .select-geozone, .admin-content .select-heading { diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index 060e31d83..875a1b913 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -198,3 +198,14 @@ transform: translateX(-50%); } } + +@mixin hollow-button($color: $link) { + @include button($style: hollow, $background: $color); + font-size: $base-font-size; + margin-bottom: 0; + + &:focus, + &:hover { + text-decoration: none; + } +} diff --git a/app/components/sdg_management/header.rb b/app/components/sdg_management/header.rb index 0a9370031..c9cb60d6e 100644 --- a/app/components/sdg_management/header.rb +++ b/app/components/sdg_management/header.rb @@ -1,11 +1,17 @@ module SDGManagement::Header extend ActiveSupport::Concern - def header + def header(&block) provide(:title) do "#{t("sdg_management.header.title")} - #{title}" end - tag.h2 title + tag.header do + if block_given? + tag.h2(title) + capture(&block) + else + tag.h2(title) + end + end end end