Add list of goals icons to component

- When we click on an icon we add a new tag with the Goal related to the input or
we remove the tag when that label already exists.

- Manage goals icons status when add or remove related targets:
Whenever there is a tag related to Goal, either the Goal itself or a Target, the icon
will be "checked".
When there is no related Goal or Target it will no longer be marked as checked.

app/assets/stylesheets/_consul_settings.scss

@@ -68,6 +68,8 @@ $color-alert:       #a94442;
 $pdf-primary:       #0300ff;
 $pdf-secondary:     #ff9e00;
 
+$outline-focus:     3px solid #ffbf47;
+
 // 2. Foundation settings overrides
 // ---------------------------------
 

app/assets/stylesheets/layout.scss

@@ -77,7 +77,7 @@ a {
 
   &:focus {
     color: $link-hover;
-    outline: 3px solid #ffbf47;
+    outline: $outline-focus;
   }
 }
 
@@ -1075,7 +1075,7 @@ footer {
     width: auto;
 
     &:focus {
-      outline: 3px solid #ffbf47;
+      outline: $outline-focus;
     }
   }
 }

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -9,4 +9,26 @@
       }
     }
   }
+
+  > ul {
+    list-style: none;
+    margin-bottom: 0;
+    margin-left: 0;
+
+    li {
+      display: inline-block;
+
+      &[aria-checked=true] img {
+        opacity: 0.15;
+      }
+
+      &:focus {
+        outline: $outline-focus;
+      }
+    }
+  }
+
+  .input-section {
+    margin-top: $line-height / 2;
+  }
 }