Vertically align icons in alerts

This new method (should) work on PhantomJS (as well as all browser), and should fallback to something correct on IE8.

2 files changed, 13 insertions, 5 deletions

diff --git a/plugins/Morpheus/stylesheets/general/_forms.less b/plugins/Morpheus/stylesheets/general/_forms.less
index afba70a812..8c04445a0e 100644
--- a/plugins/Morpheus/stylesheets/general/_forms.less
+++ b/plugins/Morpheus/stylesheets/general/_forms.less
@@ -100,6 +100,7 @@ select {
         padding-left: 50px;
         &:before {
             font-size: 18px;
+            .alert-icon-center-vertically(18px);
         }
     }
 
diff --git a/plugins/Morpheus/stylesheets/ui/_alerts.less b/plugins/Morpheus/stylesheets/ui/_alerts.less
index d27917231a..0b6ceebf95 100644
--- a/plugins/Morpheus/stylesheets/ui/_alerts.less
+++ b/plugins/Morpheus/stylesheets/ui/_alerts.less
@@ -1,4 +1,11 @@
-// Code taken from Bootstrap (can be removed in the future)
+.alert-icon-center-vertically(@font-size) {
+    @half-height: @font-size / 2;
+    // IE8 doesn't support calc(): it's OK, the icon will just be aligned to the top
+    top: calc(~'50% - @{half-height}');
+    // phantomjs only supports -webkit-calc()
+    top: -webkit-calc(~'50% - @{half-height}');
+}
+
 .alert {
     padding: 20px 20px 20px 60px;
     margin-bottom: 20px;
@@ -9,12 +16,11 @@
     &:before {
         font-family: "piwik";
         content: "\e625";
-        font-size: 24px;
         position: absolute;
         left: 20px;
-        top: 50%;
-        // Not supported on IE8
-        transform: translateY(-50%);
+        line-height: 100%; // line-height = font-size
+        font-size: 24px;
+        .alert-icon-center-vertically(24px);
     }
 
     a {
@@ -39,6 +45,7 @@
     &:before {
         color: #afafaf;
         font-size: 20px;
+        .alert-icon-center-vertically(20px);
     }
 }
 .alert-warning {