fix(clay-css): Modal Footer use justify-content: flex-start instead…

… of Bootstrap's `flex-end` to work around IE11 rendering issues with `modal-item`'s fix(clay-css): Modal Item don't add `padding-bottom` and `padding-top` Bootstrap changed spacing in 9519b9e fixes #2873
liferay · Jan 28, 2020 · 2be40c2 · 2be40c2
1 parent 403a0c2
commit 2be40c2
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/clay-css/src/scss/components/_modals.scss b/packages/clay-css/src/scss/components/_modals.scss
@@ -46,6 +46,7 @@
 	flex-shrink: 0;
 	flex-wrap: wrap;
 	height: $modal-footer-height;
+	justify-content: flex-start;
 	padding-bottom: $modal-footer-padding-y;
 	padding-left: $modal-footer-padding-x;
 	padding-right: $modal-footer-padding-x;
@@ -67,17 +68,17 @@
 	padding-top: $modal-item-padding-y;
 }
 
-.modal-item-first {
-	margin-right: auto;
+.modal-item-last {
+	margin-left: auto;
 }
 
 .modal-item {
 	flex-grow: 1;
 }
 
 .modal-footer {
-	> .modal-item-first {
-		margin-right: auto;
+	> .modal-item-last {
+		margin-left: auto;
 	}
 }
 

diff --git a/packages/clay-css/src/scss/variables/_modals.scss b/packages/clay-css/src/scss/variables/_modals.scss
@@ -15,7 +15,7 @@ $modal-footer-padding-y: 0.75rem !default; // 12px
 $modal-footer-height-mobile: null !default;
 
 $modal-item-padding-x: null !default;
-$modal-item-padding-y: 0.25rem !default; // 4px
+$modal-item-padding-y: null !default;
 
 $modal-title-font-size: 1.25rem !default; // 20px
 $modal-title-font-weight: $font-weight-semi-bold !default;