Fix #716.

CHANGES.txt

@@ -2,7 +2,8 @@ New in 3.0.1.8
 ==============
 - FIX: Issue #710: Wrong profile image used.
 - FIX: Issue #711: Space when blocks are docked.
-- FIX: Issue #718: Affix top offset height when reload down page..
+- FIX: Issue #716: Information alert close difficult to see.
+- FIX: Issue #718: Affix top offset height when reload down page.
 
 New in 3.0.1.7
 ==============

layout/frontpage.php

@@ -66,7 +66,7 @@
         <!-- Alert #1 -->
         <?php if ($enable1alert) { ?>
             <div class="useralerts alert alert-<?php echo \theme_essential\toolbox::get_setting('alert1type'); ?>">
-                <a class="close" data-dismiss="alert" href="#"><span aria-hidden="true" class="fa fa-times-circle"></span></a>
+                <button type="button" class="close" data-dismiss="alert"><span class="fa fa-times-circle" aria-hidden="true"></span></button>
                 <?php
                 $alert1icon = 'alert' . \theme_essential\toolbox::get_setting('alert1type');
                 echo $$alert1icon.'<span class="title">'.\theme_essential\toolbox::get_setting('alert1title', true);
@@ -79,7 +79,7 @@
         <!-- Alert #2 -->
         <?php if ($enable2alert) { ?>
             <div class="useralerts alert alert-<?php echo \theme_essential\toolbox::get_setting('alert2type'); ?>">
-                <a class="close" data-dismiss="alert" href="#"><span aria-hidden="true" class="fa fa-times-circle"></span></a>
+                <button type="button" class="close" data-dismiss="alert"><span class="fa fa-times-circle" aria-hidden="true"></span></button>
                 <?php
                 $alert2icon = 'alert' . \theme_essential\toolbox::get_setting('alert2type');
                 echo $$alert2icon.'<span class="title">'.\theme_essential\toolbox::get_setting('alert2title', true);
@@ -92,7 +92,7 @@
         <!-- Alert #3 -->
         <?php if ($enable3alert) { ?>
             <div class="useralerts alert alert-<?php echo \theme_essential\toolbox::get_setting('alert3type'); ?>">
-                <a class="close" data-dismiss="alert" href="#"><span aria-hidden="true" class="fa fa-times-circle"></span></a>
+                <button type="button" class="close" data-dismiss="alert"><span class="fa fa-times-circle" aria-hidden="true"></span></button>
                 <?php
                 $alert3icon = 'alert' . \theme_essential\toolbox::get_setting('alert3type');
                 echo $$alert3icon.'<span class="title">'.\theme_essential\toolbox::get_setting('alert3title', true);

less/essential/frontpage.less

@@ -65,6 +65,10 @@
 }
 
 /* @group Alerts */
+.useralerts .close {
+    margin-top: 4px;
+    margin-bottom: 0;
+}
 
 .useralerts [class^="fa-stack"] {
   margin-right: 5px;

less/essential/settings/alerts.less

@@ -17,7 +17,7 @@
             color: ~"[[setting:themenavcolor]]";
         }
     }
-    &.alert-info a.close {
+    &.alert-info .close {
         .@{fa-css-prefix} {
             color: @infoText;
         }
@@ -27,7 +27,7 @@
             }
         }
     }
-    &.alert-error a.close {
+    &.alert-error .close {
         .@{fa-css-prefix} {
             color: @errorText;
         }
@@ -37,7 +37,7 @@
             }
         }
     }
-    &.alert-success a.close {
+    &.alert-success .close {
         .@{fa-css-prefix} {
             color: @successText;
         }

style/essential-settings.css

@@ -26,25 +26,25 @@
 .alert .fa-bullhorn:focus {
   color: [[setting:themenavcolor]];
 }
-.alert.alert-info a.close .fa {
+.alert.alert-info .close .fa {
   color: #3a87ad;
 }
-.alert.alert-info a.close:hover .fa,
-.alert.alert-info a.close:focus .fa {
+.alert.alert-info .close:hover .fa,
+.alert.alert-info .close:focus .fa {
   color: #3a87ad;
 }
-.alert.alert-error a.close .fa {
+.alert.alert-error .close .fa {
   color: #b94a48;
 }
-.alert.alert-error a.close:hover .fa,
-.alert.alert-error a.close:focus .fa {
+.alert.alert-error .close:hover .fa,
+.alert.alert-error .close:focus .fa {
   color: #b94a48;
 }
-.alert.alert-success a.close .fa {
+.alert.alert-success .close .fa {
   color: #468847;
 }
-.alert.alert-success a.close:hover .fa,
-.alert.alert-success a.close:focus .fa {
+.alert.alert-success .close:hover .fa,
+.alert.alert-success .close:focus .fa {
   color: #468847;
 }
 /* @end */