diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index ee6aef106..3f133cc42 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -227,6 +227,16 @@ } } +%sdg-goal-list { + list-style: none; + margin-bottom: 0; + margin-left: 0; + + li { + display: inline-block; + } +} + %tags { margin-bottom: 0; margin-left: 0; diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss index efbd855cc..2faccff8b 100644 --- a/app/assets/stylesheets/sdg/goals/index.scss +++ b/app/assets/stylesheets/sdg/goals/index.scss @@ -1,14 +1,12 @@ .sdg-goals-index { .sdg-goal-list { + @extend %sdg-goal-list; @include grid-row; @include grid-column-gutter; - list-style: none; - margin-bottom: 0; max-width: 40rem; li { - display: inline-block; $spacing: 1vw; line-height: 0; diff --git a/app/assets/stylesheets/sdg/goals/tag_list.scss b/app/assets/stylesheets/sdg/goals/tag_list.scss index 04b2ce9e0..831cba49f 100644 --- a/app/assets/stylesheets/sdg/goals/tag_list.scss +++ b/app/assets/stylesheets/sdg/goals/tag_list.scss @@ -1,10 +1,7 @@ .sdg-goal-tag-list { - list-style: none; - margin-bottom: 0; - margin-left: 0; + @extend %sdg-goal-list; li { - display: inline-block; margin-bottom: 1ch; &:not(:last-child) { diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss index 75fb5c433..db8773324 100644 --- a/app/assets/stylesheets/sdg/related_list_selector.scss +++ b/app/assets/stylesheets/sdg/related_list_selector.scss @@ -13,12 +13,9 @@ } label + ul { - list-style: none; - margin-bottom: 0; - margin-left: 0; + @extend %sdg-goal-list; li { - display: inline-block; &[aria-checked=true] img { opacity: 0.15;