From a935a4ae960b061286d5c8b4ab6f3c540f99f5d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Strangh=C3=B6ner?= <roman.stranghoener@innoq.com>
Date: Wed, 21 Feb 2018 16:54:26 +0100
Subject: [PATCH] optimize alert on small screens and add margin

---
 components/02-molecules/alert/_alert.scss | 14 ++++++++++++--
 components/02-molecules/alert/alert.html  | 14 ++++++++------
 lib/styles/settings/_typography.scss      |  1 +
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/components/02-molecules/alert/_alert.scss b/components/02-molecules/alert/_alert.scss
index a197e20c8..6ca77f23f 100644
--- a/components/02-molecules/alert/_alert.scss
+++ b/components/02-molecules/alert/_alert.scss
@@ -5,10 +5,11 @@ $alert-color: $brand-white;
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
-  padding: $container-spacer-y-sm $container-spacer-x-sm;
+  margin-bottom: $content-spacer-sm;
+  padding: $spacer-xs;
   line-height: $alert-line-height;
   color: $alert-color;
-  font-size: $alert-font-size;
+  font-size: $alert-font-size-sm;
 
   &--info {
     background-color: $brand-info;
@@ -28,3 +29,12 @@ $alert-color: $brand-white;
   @extend %base-button;
   color: inherit;
 }
+
+
+@media screen and (min-width: $grid-breakpoint-md) {
+  .alert {
+    margin-bottom: $content-spacer-base;
+    padding: $container-spacer-y-sm $container-spacer-x-sm;
+    font-size: $alert-font-size;
+  }
+}
diff --git a/components/02-molecules/alert/alert.html b/components/02-molecules/alert/alert.html
index 926308bd6..441e47d4a 100644
--- a/components/02-molecules/alert/alert.html
+++ b/components/02-molecules/alert/alert.html
@@ -1,7 +1,9 @@
-<div class="alert alert--info">
-    <div class="alert-text"><strong>Vorsicht!</strong> Vielen Dank.</div>
-    <button class="alert-btn" type="button">
-        <i class="icon icon-close"></i>
-        <span class="sr-only">Schließen</span>
-    </button>
+<div>
+    <div class="alert alert--info">
+        <div class="alert-text"><strong>Vorsicht!</strong> Vielen Dank.</div>
+        <button class="alert-btn" type="button">
+            <i class="icon icon-close"></i>
+            <span class="sr-only">Schließen</span>
+        </button>
+    </div>
 </div>
diff --git a/lib/styles/settings/_typography.scss b/lib/styles/settings/_typography.scss
index a7ebc1f59..3f92b9c43 100644
--- a/lib/styles/settings/_typography.scss
+++ b/lib/styles/settings/_typography.scss
@@ -520,3 +520,4 @@ $paginator-font-size: ms(3);
 // Alert
 $alert-font-size: $companion-font-size;         // 21px
 $alert-line-height: $base-line-height;          // 25px
+$alert-font-size-sm: $base-font-size;           // 16px