diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index f6a5bef0e..d5dd96113 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -244,10 +244,12 @@ width: calc(100% + #{$spacing}); width: calc(100% + #{$max-spacing}); - > * { + > *, + > .tabs-title { margin-bottom: 0; margin-left: $spacing; margin-left: $max-spacing; + margin-right: 0; margin-top: $spacing; margin-top: $max-spacing; } @@ -261,6 +263,33 @@ @include sdg-goal-list; } +%sdg-goal-list-expanded { + $spacing: 0.5%; + @include sdg-goal-list($spacing); + + label, + li { + min-width: $sdg-icon-min-width; + width: calc(100% / 17 - #{$spacing}); + + &:hover { + cursor: pointer; + } + + .sdg-goal-icon { + width: 100%; + } + + a:focus { + outline: none; + + img { + outline: $outline-focus; + } + } + } +} + %tags { margin-bottom: 0; margin-left: 0; diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 9e4f8c0ad..ea3d00165 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -17,27 +17,13 @@ } .goals { - $spacing: 0.5%; - @include sdg-goal-list($spacing); + @extend %sdg-goal-list-expanded; legend { font-weight: normal; font-style: italic; } - label { - min-width: $sdg-icon-min-width; - width: calc(100% / 17 - #{$spacing}); - - &:hover { - cursor: pointer; - } - - .sdg-goal-icon { - width: 100%; - } - } - input { @include element-invisible;