feat(alerts): icon sizes and alignment

Orange-OpenSource · Dec 19, 2019 · a36c058 · a36c058
1 parent 2460ddd
commit a36c058
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git 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
@@ -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