Simplify styling tags

This way we won't have to add the `inline-block` and `no-bullet` classes
to other elements and we can define the styles in one place.

Note we're using the `ul.tags` selector instead of just `.tags` to avoid
conflicts with a `div.tags` selector which is used to select tags in a
form. Renaming the selector to `.tag-list` would be better, but we
aren't doing so because it would break custom stylesheets using that
selector.

Also note we're keeping the %tags placeholder selector in `.tags`
selector in the participation.scss file. This is so styles are not
overwritten by selectors like `.debate-show ul li`, which has the same
specifity as `ul.tags li`.

app/assets/stylesheets/application.scss

@@ -29,6 +29,7 @@
 @import "jquery-ui/sortable";
 @import "leaflet";
 @import "sticky_overrides";
+@import "tags";
 @import "admin/*";
 @import "sdg/**/*";
 @import "sdg_management/*";

app/assets/stylesheets/mixins.scss

@@ -226,3 +226,13 @@
     }
   }
 }
+
+%tags {
+  margin-bottom: 0;
+  margin-left: 0;
+
+  li {
+    display: inline-block;
+    margin-bottom: 0;
+  }
+}

app/assets/stylesheets/participation.scss

@@ -408,10 +408,10 @@
     }
   }
 
-  .tags,
   .geozone {
 
     li {
+      display: inline-block;
       margin-bottom: 0;
     }
   }
@@ -487,8 +487,7 @@
   }
 
   .tags {
-    display: block;
-    margin-bottom: 0;
+    @extend %tags;
 
     a {
       margin-right: rem-calc(6);
@@ -673,8 +672,7 @@
   }
 
   .tags {
-    display: block;
-    margin-bottom: 0;
+    @extend %tags;
 
     a {
       font-size: $tiny-font-size;

app/assets/stylesheets/tags.scss

@@ -0,0 +1,6 @@
+ul {
+
+  &.tags {
+    @extend %tags;
+  }
+}