From 48d5022cf9540b1e7958dd9de8c2722942ab274b Mon Sep 17 00:00:00 2001
From: Peter Karlsson <kingtutsoftware@outlook.com>
Date: Sun, 22 Jan 2017 22:31:40 +0100
Subject: [PATCH] Updates to the styling for alerts

---
 .../getting-started/import-from-1password.md  | 22 ++++++++-----------
 .../getting-started/import-from-lastpass.md   |  7 +++---
 css/styles.scss                               | 12 ++++++++++
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/_articles/getting-started/import-from-1password.md b/_articles/getting-started/import-from-1password.md
index f420cfff..7a29ae78 100644
--- a/_articles/getting-started/import-from-1password.md
+++ b/_articles/getting-started/import-from-1password.md
@@ -13,14 +13,11 @@ follow the proper steps below.
 
 **Export Your 1Password 1pif Logins**
 
-```
-!!!!!! IMPORTANT !!!!!!
-This set of instructions is only for:
-- 1Password 4 users on macOS and Windows
-- 1Password 6 users on macOS
-
-These instructions may vary slightly for macOS users.
-```
+<div class="alert alert-info">
+    <p>This set of instructions is only for:</p>
+    <ul><li>1Password 4 users on macOS and Windows</li><li>1Password 6 users on macOS</li></ul>
+    <p>These instructions may vary slightly for macOS users.</p>
+</div>
 
 1. Open the 1Password desktop application on your computer and enter your 1Password master password to unlock
    your vault.
@@ -34,11 +31,10 @@ These instructions may vary slightly for macOS users.
 
 **Export Your 1Password 6 csv Logins From Windows**
 
-```
-!!!!!! IMPORTANT !!!!!!
-This set of instructions is only for:
-- 1Password 6 users on Windows
-```
+<div class="alert alert-info">
+    <p>This set of instructions is only for:</p>
+    <ul><li>1Password 6 users on Windows</li></ul>
+</div>
 
 1. Open the 1Password 6 desktop application on your computer and enter your 1Password master password to unlock
    your vault.
diff --git a/_articles/getting-started/import-from-lastpass.md b/_articles/getting-started/import-from-lastpass.md
index eba700fa..d3d27ed0 100644
--- a/_articles/getting-started/import-from-lastpass.md
+++ b/_articles/getting-started/import-from-lastpass.md
@@ -21,10 +21,9 @@ Importing your data from LastPass into bitwarden is easy.
 
 **Export Your Passwords From The LastPass Browser Extension**
 
->!!!!!! IMPORTANT !!!!!!
->
->It is recommended to export through the LastPass web vault in order to avoid known bugs with the LastPass extension
->exporter.
+<div class="alert alert-warning">
+    <p>It is recommended to export through the LastPass web vault in order to avoid known bugs with the LastPass extension exporter.</p>
+</div>
 
 1. Click the LastPass icon in your browser and navigate to "More Options" > "Advanced" > "Export" > "LastPass CSV File".
 2. This will take you to a page that then asks you to enter your LastPass master password for verification.
diff --git a/css/styles.scss b/css/styles.scss
index d3c9b4fe..255297b9 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -175,6 +175,18 @@ footer {
     border: 1px solid #ddd;
 }
 
+.panel-article .alert {
+    margin-top: 18px;
+}
+
+.panel-article .alert ul, .panel-article .alert ol {
+    padding-left: 20px;
+}
+
+.panel-article .alert ul + p, .panel-article .alert ol + p {
+    margin-top: 15px;
+}
+
 @media (max-width: 767px) {
     .fa-support.visible-xs {
         display: inline-block !important;