Make positioning of Alert icon more robust

react-ui-org · Dec 31, 2019 · 4a943d4 · 4a943d4
1 parent 03f25b1
commit 4a943d4
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 5 deletions.
diff --git a/src/lib/components/ui/Alert/Alert.scss b/src/lib/components/ui/Alert/Alert.scss
@@ -5,13 +5,12 @@
 }
 
 .icon {
-  position: relative;
-  top: 1px;
   display: flex;
-  flex-direction: column;
+  flex: none;
   align-items: center;
   align-self: flex-start;
-  justify-content: flex-start;
+  justify-content: center;
+  height: calc(#{$alert-line-height} * #{$alert-font-size});
 }
 
 .message {

diff --git a/src/lib/components/ui/Alert/_mixins.scss b/src/lib/components/ui/Alert/_mixins.scss
@@ -5,7 +5,6 @@
 @mixin alert() {
   position: relative;
   display: flex;
-  align-items: center;
   width: 100%;
   min-height: $alert-min-height;
   padding: $alert-padding;