Update: (liferay#910) Alert Notifications Fixed should be full width …

…and aligned to the bottom in smaller screens
pat270 · Jun 11, 2018 · 991a36c · 991a36c
1 parent 2136c3e
commit 991a36c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 7 deletions.
diff --git a/packages/clay-css/src/scss/components/_alerts.scss b/packages/clay-css/src/scss/components/_alerts.scss
@@ -110,9 +110,7 @@
 		width: $alert-notifications-max-width;
 
 		@include clay-scale-component {
-			clear: right;
-			float: right;
-			max-width: $alert-notifications-max-width;
+			max-width: none;
 			width: 100%;
 		}
 

diff --git a/packages/clay-css/src/scss/variables/_alerts.scss b/packages/clay-css/src/scss/variables/_alerts.scss
@@ -62,10 +62,10 @@ $alert-notifications-fixed-left: 1.25rem !default; // 20px
 $alert-notifications-fixed-right: null !default;
 $alert-notifications-fixed-top: null !default;
 
-$alert-notifications-fixed-bottom-mobile: null !default;
-$alert-notifications-fixed-left-mobile: 0.5rem !default; // 8px
-$alert-notifications-fixed-right-mobile: 0.5rem !default; // 8px
-$alert-notifications-fixed-top-mobile: 4.25rem !default; // 68px
+$alert-notifications-fixed-bottom-mobile: 1rem !default; // 16px
+$alert-notifications-fixed-left-mobile: ($grid-gutter-width / 2) !default;
+$alert-notifications-fixed-right-mobile: ($grid-gutter-width / 2) !default;
+$alert-notifications-fixed-top-mobile: null !default; // 68px
 
 $alert-notifications-box-shadow: null !default;
 $alert-notifications-max-width: 22.5rem !default; // 360px