Update: (Fixes #590) Mixin clay-custom-grid-columns added option to…

… configure `flex-basis` to work around Webkit flexbox bug https://bugs.webkit.org/show_bug.cgi?id=136041
liferay · Feb 20, 2018 · 3a51a13 · 3a51a13
1 parent ab78738
commit 3a51a13
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/packages/clay/src/scss/mixins/_grid.scss b/packages/clay/src/scss/mixins/_grid.scss
@@ -56,6 +56,9 @@
 
 	@if ($custom-grid-props && $enabled) {
 		display: block;
+		flex-basis: map-get(map-get($custom-grid-props, base), min-width);
+		flex-grow: 1;
+		max-width: map-get(map-get($custom-grid-props, base), max-width);
 		min-width: map-get(map-get($custom-grid-props, base), min-width);
 		padding-left: map-get(map-get($custom-grid-props, base), padding-left);
 		padding-right: map-get(map-get($custom-grid-props, base), padding-right);
@@ -67,6 +70,7 @@
 
 			@if ($next) {
 				@media (min-width: map-get(map-get($custom-grid-props, $next), breakpoint)) {
+					flex-basis: map-get(map-get($custom-grid-props, $next), flex-basis);
 					max-width: map-get(map-get($custom-grid-props, $next), max-width);
 					min-width: map-get(map-get($custom-grid-props, $next), min-width);
 					padding-left: map-get(map-get($custom-grid-props, $next), padding-left);

diff --git a/packages/clay/src/scss/variables/_cards.scss b/packages/clay/src/scss/variables/_cards.scss
@@ -92,10 +92,12 @@ $card-page-item-asset: map-merge((
 	),
 	sm: (
 		breakpoint: map-get($grid-breakpoints, sm), // 576px
+		flex-basis: 50%,
 		max-width: 50%
 	),
 	md: (
 		breakpoint: map-get($grid-breakpoints, md), // 768px
+		flex-basis: 200px,
 		max-width: 33.3333%
 	),
 	lg: (