Merge pull request #32 from misteinb/bugfix/alert-close-button-backgr…

…ound Bugfix/alert close button background
Azure · Sep 12, 2018 · ba9c77a · ba9c77a
2 parents 3453a16 + d851c4d
commit ba9c77a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v4.0.5
+### Fixed
+- hover background for alert close button was incorrect on all browsers except firefox
+
 ## v4.0.4
 ### Fixed
 - add padding to fix select dropdown component where selected text overlaps with the icon

diff --git a/lib/components/Alert/Alert.scss b/lib/components/Alert/Alert.scss
@@ -5,8 +5,6 @@
 $line-height-text: 5*$grid-size;
 $line-height-close: 4*$grid-size;
 
-$icon-margin-top: 3px;
-
 .alert-container {
     position: relative;
     display: flex;
@@ -23,12 +21,12 @@ $icon-margin-top: 3px;
     .alert-icon {
         @include md-box(inline-block, relative);
         margin-left: 2*$grid-size;
-        margin-top: $icon-margin-top;
+        margin-right: 2*$grid-size;
+        margin-top: $grid-size;
         flex: 0 0 4*$grid-size;
     }
 
     .alert-text {
-        margin-left: 2*$grid-size;
         margin-top: 1.25*$grid-size;
         margin-right: 3*$grid-size;
         padding-bottom: 2*$grid-size;
@@ -75,6 +73,12 @@ $icon-margin-top: 3px;
                     background-color: themed('color-bg-alert-info-close-hover');
                 }
             }
+
+            .close-button-container {
+                &:hover, &:focus {
+                    background: transparent;
+                }
+            }
         }
     }
 
@@ -91,6 +95,10 @@ $icon-margin-top: 3px;
 
             .close-button-container {
                 color: themed('color-text-black');
+
+                &:hover, &:focus {
+                    background: transparent;
+                }
             }
         }
     }
@@ -112,6 +120,10 @@ $icon-margin-top: 3px;
 
             .close-button-container {
                 color: themed('color-text-white');
+
+                &:hover, &:focus {
+                    background: transparent;
+                }
             }
         }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "4.0.4",
+    "version": "4.0.5",
     "description": "Azure IoT Fluent React Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",