From a36c058060a14f74884251aa1850960f7f9ad1c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <gael.poupard@orange.com>
Date: Thu, 19 Dec 2019 15:28:32 +0100
Subject: [PATCH] feat(alerts): icon sizes and alignment

---
 scss/_alert.scss     | 32 +++++++++++++++++++++-----------
 scss/_variables.scss |  8 +++++---
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 3a02f9b755..839eb7b9b0 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -34,8 +34,18 @@
   p + p {
     font-weight: $font-weight-normal;
   }
+  // end mod
+}
+
+// Boosted mod
+.alert-icon {
+  margin: -#{map-get($spacers, 1) / 5} 0;
 
-  .alert-icon::before {
+  + * {
+    margin: $alert-icon-margin-y 0;
+  }
+
+  &::before {
     display: block;
     order: -1;
     width: $alert-logo-size;
@@ -46,12 +56,8 @@
     background-repeat: no-repeat;
     background-size: contain;
   }
-
-  &:not(.alert-sm) .alert-icon + * {
-    margin: $spacer / 10 0;
-  }
-  // end mod
 }
+// end mod
 
 // Headings for larger alerts
 .alert-heading {
@@ -109,11 +115,15 @@
   line-height: $small-line-height;
   border: 0;
 
-  .alert-icon::before {
-    width: $alert-logo-size-sm;
-    min-width: $alert-logo-size-sm;
-    height: $alert-logo-size-sm;
-    margin-right: $alert-logo-size-sm / 2;
+  .alert-icon {
+    margin: $alert-icon-margin-y 0;
+
+    &::before {
+      width: $alert-logo-size-sm;
+      min-width: $alert-logo-size-sm;
+      height: $alert-logo-size-sm;
+      margin-right: $alert-logo-size-sm / 2;
+    }
   }
 
   &.alert-dismissible .close {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 32f85d0891..3114eac922 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -96,9 +96,6 @@ $theme-colors: map-merge(
 );
 
 // Boosted mod
-$alert-logo-size:     1.5rem !default;
-$alert-logo-size-sm:  1rem !default;
-
 $chevron-icon:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path d='M9 2L7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
 $chevron-icon-hover:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path fill='#{$white}' d='M9 2L7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
 $chevron-icon-active: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'><path fill='#{$primary}' d='M9 2L7 0 0 7l7 7 2-2-5-5 5-5z'/></svg>") !default;
@@ -1105,7 +1102,12 @@ $alert-margin-bottom:               $spacer !default;
 $alert-border-radius:               $border-radius !default;
 // $alert-link-font-weight:            $font-weight-normal !default; // Boosted mod
 $alert-border-width:                $border-width !default;
+// Boosted mod
+$alert-logo-size:                   1.625rem !default;
+$alert-logo-size-sm:                1.0625rem !default;
 $alert-close-icon-size:             .875rem !default;
+$alert-icon-margin-y:               $spacer / 10 !default;
+// end mod
 
 // $alert-bg-level:                    0 !default; // Boosted mod
 // $alert-border-level:                0 !default; // Boosted mod