Fix #716.

CHANGES.txt

@@ -2,7 +2,8 @@ New in 3.1.0.7
 ==============
 - 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.1.0.6
 ==============

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-alternative.less

@@ -288,7 +288,7 @@
 
                         .nav > li.dropdown a,
                         .nav > li > a,
-                        .search-input-wrapper > div .fa {
+                        .search-input-wrapper > div .@{fa-css-prefix} {
                             color: ~"[[setting:alternativethemenavcolor@{index}]]";
                             &:focus, &:hover {
                                 color: ~"[[setting:alternativethemecolor@{index}]]";
@@ -1126,7 +1126,7 @@
                     .avg {
                         color: ~"[[setting:alternativethemestripetextcolour@{index}]]";
                         background-color: ~"[[setting:alternativethemestripebackgroundcolour@{index}]]";
-                        a, a:hover, a:focus, a:visited, .fa {
+                        a, a:hover, a:focus, a:visited, .@{fa-css-prefix} {
                             color: inherit;
                         }
                     }

less/essential/frontpage.less

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

less/essential/search.less

@@ -1,6 +1,6 @@
 /* @group Search */
 
-.search-input-wrapper > div .fa {
+.search-input-wrapper > div .@{fa-css-prefix} {
     padding: 3px 2px 2px 2px;
     &:focus, &:hover {
         border-radius: @baseBorderRadius;

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;
         }

less/essential/settings/navigation.less

@@ -42,7 +42,7 @@
 
         .nav > li.dropdown a,
         .nav > li > a,
-        .search-input-wrapper > div .fa {
+        .search-input-wrapper > div .@{fa-css-prefix} {
             color: ~"[[setting:themenavcolor]]";
             &:hover, &:focus {
                 color: ~"[[setting:themecolor]]";

less/essential/settings/tables.less

@@ -5,7 +5,7 @@
     .avg {
         color: ~"[[setting:themestripetextcolour]]";
         background-color: ~"[[setting:themestripebackgroundcolour]]";
-        a, a:hover, a:focus, a:visited, .fa {
+        a, a:hover, a:focus, a:visited, .@{fa-css-prefix} {
             color: inherit;
         }
     }

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 */