Merge pull request #4336 from consul/sdg_icons_size

Adjust SDG icons size

app/assets/stylesheets/_consul_settings.scss

@@ -72,6 +72,30 @@ $outline-focus:     3px solid #ffbf47;
 
 $input-height:      $line-height * 2;
 
+$icon-width: $line-height * 2;
+
+$sdg-icon-min-width: 40px;
+
+$sdg-colors: (
+  1: #e5243b,
+  2: #dda63a,
+  3: #4c9f38,
+  4: #c5192d,
+  5: #ff3a21,
+  6: #26bde2,
+  7: #fcc30b,
+  8: #a21942,
+  9: #fd6925,
+  10: #dd1367,
+  11: #fd9d24,
+  12: #bf8b2e,
+  13: #3f7e44,
+  14: #0a97d9,
+  15: #56c02b,
+  16: #00689d,
+  17: #19486a
+);
+
 // 2. Foundation settings overrides
 // ---------------------------------
 
@@ -127,23 +151,3 @@ $pagination-radius: $global-radius;
 $show-header-for-stacked: true;
 
 $tooltip-background-color: $brand;
-
-$sdg-colors: (
-  1: #e5243b,
-  2: #dda63a,
-  3: #4c9f38,
-  4: #c5192d,
-  5: #ff3a21,
-  6: #26bde2,
-  7: #fcc30b,
-  8: #a21942,
-  9: #fd6925,
-  10: #dd1367,
-  11: #fd9d24,
-  12: #bf8b2e,
-  13: #3f7e44,
-  14: #0a97d9,
-  15: #56c02b,
-  16: #00689d,
-  17: #19486a
-);

app/assets/stylesheets/mixins.scss

@@ -227,23 +227,32 @@
   }
 }
 
-%sdg-goal-list {
+@mixin sdg-goal-list($spacing: 1ch) {
+  $min-spacing: $sdg-icon-min-width / 10;
+  $max-spacing: #{"Max(#{$min-spacing}, #{$spacing})"};
+
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  margin-bottom: 0;
-  margin-left: 0;
+  margin: -$spacing 0 $line-height / 3 -#{$spacing};
+  margin-left: calc(-1 * #{$max-spacing});
+  margin-top: calc(-1 * #{$max-spacing});
+  width: calc(100% + #{$spacing});
+  width: calc(100% + #{$max-spacing});
 
   li {
-    margin-bottom: 1ch;
-    margin-right: 1ch;
-
-    &:last-child {
-      margin-right: 0;
-    }
+    margin-bottom: 0;
+    margin-left: $spacing;
+    margin-left: $max-spacing;
+    margin-top: $spacing;
+    margin-top: $max-spacing;
   }
 }
 
+%sdg-goal-list {
+  @include sdg-goal-list;
+}
+
 %tags {
   margin-bottom: 0;
   margin-left: 0;

app/assets/stylesheets/sdg/goals/icon.scss

@@ -1,4 +1,4 @@
 .sdg-goal-icon {
-  min-width: 40px;
-  width: 4vw;
+  min-width: $sdg-icon-min-width;
+  width: $icon-width;
 }

app/assets/stylesheets/sdg/goals/index.scss

@@ -18,16 +18,17 @@
   }
 
   .sdg-goal-list {
-    @extend %sdg-goal-list;
+    $spacing: 1.5%;
+
+    @include sdg-goal-list($spacing);
     @include grid-row;
     @include grid-column-gutter;
-    max-width: 40rem;
+
+    max-width: 60rem;
+    width: 100%;
 
     li {
-      $spacing: 1vw;
-
       line-height: 0;
-      margin-bottom: $spacing;
       margin-left: $spacing / 2;
       margin-right: $spacing / 2;
       width: calc(100% / 6 - #{$spacing});

app/assets/stylesheets/sdg/related_list_selector.scss

@@ -13,9 +13,12 @@
   }
 
   label + ul {
-    @extend %sdg-goal-list;
+    $spacing: 0.5%;
+    @include sdg-goal-list($spacing);
 
     li {
+      min-width: $sdg-icon-min-width;
+      width: calc(100% / 17 - #{$spacing});
 
       &[aria-checked=true] img {
         opacity: 0.15;
@@ -28,6 +31,10 @@
       &:hover {
         cursor: pointer;
       }
+
+      .sdg-goal-icon {
+        width: 100%;
+      }
     }
   }