mirror/flexbox-patterns
1
0
Fork 0
mirror of https://github.com/cjcenizal/flexbox-patterns.git synced 2025-08-06 08:07:33 +02:00
Code Issues Releases Wiki Activity

Merge pull request #6 from cjcenizal/1/bug/fix-card-group-ie11

Browse Source 
[1]: Fix IE11 flex shorthand bug with card and cardGroup.
This commit is contained in:
CJ Cenizal
2016-04-30 18:43:22 -07:00
parent a455706b56 45193b80d2
commit 18db3b20df
3 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
dist/styles.css vendored
View File

@@ -487,7 +487,7 @@
/**
* We're going to lay out this element's children
* just like in the "Centered prompt" example.
* First we'll rotate the main axis so that the
* First we'll rotate the main axis so that the
* children are laid out vertically.
*/
-webkit-flex-direction: column;
@@ -512,7 +512,7 @@
-ms-flex-pack: center;
justify-content: center;
padding: 15px;
padding: 15px 0;
}
.card__descriptionIcon {
@@ -524,6 +524,7 @@
color: #57727C;
font-size: 12px;
text-align: center;
max-width: calc(100% - 30px);
}
.card__price {
@@ -539,6 +540,7 @@
.card--fixedWidth {
max-width: 120px;
}
/*=====================================================
contents of: index.css
=====================================================*/
@@ -566,13 +568,13 @@
* properties. These properties control how the
* element resizes to fill its container.
*
* We'll also set flex-grow to 1 so that it
* will expand to fill its container. (The
* We'll set flex-grow to 1 so that it will
* expand to fill its container. (The default
* default value is 0.)
*
* We'll set flex-shrink to 1 so that the element
* will shrink as its container gets smaller.
* (The default value is 1.)
* We'll also set flex-shrink to 1 so that the
* element will shrink as its container gets
* smaller. (The default value is 1.)
*
* Last, we set flex-basis to 0 so that its
* size is solely determined by the size of
@@ -585,10 +587,16 @@
* shrink with its container and siblings, but
* they will all have the same size, even if they
* have different amounts of content.
*
* NOTE: IE11 ignores flex short-hand declarations
* with unitless flex-basis values. So we have to
* use 0% instead of 0 as a workaround. You can
* find more info at:
* github.com/philipwalton/flexbugs.
*/
-webkit-flex: 1 1 0;
-ms-flex: 1 1 0;
flex: 1 1 0;
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
border: none;
border-radius: 0;

18
src/styles/card-group.css
View File

@@ -17,13 +17,13 @@
* properties. These properties control how the
* element resizes to fill its container.
*
* We'll also set flex-grow to 1 so that it
* will expand to fill its container. (The
* We'll set flex-grow to 1 so that it will
* expand to fill its container. (The default
* default value is 0.)
*
* We'll set flex-shrink to 1 so that the element
* will shrink as its container gets smaller.
* (The default value is 1.)
* We'll also set flex-shrink to 1 so that the
* element will shrink as its container gets
* smaller. (The default value is 1.)
*
* Last, we set flex-basis to 0 so that its
* size is solely determined by the size of
@@ -36,8 +36,14 @@
* shrink with its container and siblings, but
* they will all have the same size, even if they
* have different amounts of content.
*
* NOTE: IE11 ignores flex short-hand declarations
* with unitless flex-basis values. So we have to
* use 0% instead of 0 as a workaround. You can
* find more info at:
* github.com/philipwalton/flexbugs.
*/
flex: 1 1 0;
flex: 1 1 0%;
border: none;
border-radius: 0;

7
src/styles/card.css
View File

@@ -26,7 +26,7 @@
/**
* We're going to lay out this element's children
* just like in the "Centered prompt" example.
* First we'll rotate the main axis so that the
* First we'll rotate the main axis so that the
* children are laid out vertically.
*/
flex-direction: column;
@@ -45,7 +45,7 @@
*/
justify-content: center;
padding: 15px;
padding: 15px 0;
}
.card__descriptionIcon {
@@ -57,6 +57,7 @@
color: #57727C;
font-size: 12px;
text-align: center;
max-width: calc(100% - 30px);
}
.card__price {
@@ -71,4 +72,4 @@
.card--fixedWidth {
max-width: 120px;
}
}