From 3d70d434f401cf0d2cdfe6e953730233b913b118 Mon Sep 17 00:00:00 2001
From: Klaudia <klaudia@tonik.pl>
Date: Fri, 4 Oct 2019 10:24:20 +0200
Subject: [PATCH] refactor(): Use flex for creating alert layout

---
 src/_includes/components/alert.html | 11 ++++++++---
 src/_sass/components/_alert.scss    | 16 +++++-----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/_includes/components/alert.html b/src/_includes/components/alert.html
index 6764a288a0..17e15781c9 100644
--- a/src/_includes/components/alert.html
+++ b/src/_includes/components/alert.html
@@ -1,4 +1,9 @@
-<div class="alert alert--{{ include.type }}" role="alert">
-  {% include icons/alerts/{{ include.type }}.svg %}
-  {{ include.content }}
+<div class="alert alert--{{ include.type }} flex gutter gutter--large" role="alert">
+  <div class="flex__column flex__column--shrink">
+    {% include icons/alerts/{{ include.type }}.svg %}
+  </div>
+
+  <div class="flex__column">
+    <p>{{ include.content }}</p>
+  </div>
 </div>
diff --git a/src/_sass/components/_alert.scss b/src/_sass/components/_alert.scss
index 4965ba8864..0dfcfde1fc 100644
--- a/src/_sass/components/_alert.scss
+++ b/src/_sass/components/_alert.scss
@@ -1,25 +1,19 @@
 .alert {
-  background-color: color(gray-lighter);
-  border-radius: 4px;
+  position: relative;
+  padding: 15px 20px;
   font-size: 14px;
   line-height: 1.57;
-  padding: 15px 20px 15px 50px;
-  position: relative;
+  background-color: color(gray-lighter);
+  border-radius: 4px;
 
   &::before {
     content: "";
-    border-radius: 2px;
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 3px;
-  }
-
-  svg {
-    position: absolute;
-    left: 20px;
-    top: 22px;
+    border-radius: 2px;
   }
 
   &--info {