From 8871eb3d92adf8ee44eb2a173181cf031641d7c7 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@me.com>
Date: Tue, 19 Jan 2016 19:30:54 +0100
Subject: [PATCH] fix(card): fix card demo for webkit engine

Webkit doesn't allow using percentage values for flex parents, that's why we need to use flex without percentage on `<= xs` webkit

Fixes #6573 Fixes #6678

  Closes #6765
---
 src/components/card/demoBasicUsage/index.html        | 8 ++++----
 src/components/card/demoCardActionButtons/index.html | 6 +++---
 src/components/card/demoInCardActions/index.html     | 6 +++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/card/demoBasicUsage/index.html b/src/components/card/demoBasicUsage/index.html
index 2851dc1ae9e..a7d1bd576d8 100644
--- a/src/components/card/demoBasicUsage/index.html
+++ b/src/components/card/demoBasicUsage/index.html
@@ -1,6 +1,6 @@
-<div ng-controller="AppCtrl" ng-cloak>
-  <md-content class="md-padding" layout="row" layout-wrap layout-align="center start" layout-xs="column">
-    <div flex="50" flex-sm="100" flex-xs="100" layout="column">
+<div ng-controller="AppCtrl" ng-cloak >
+  <md-content class="md-padding" layout-xs="column" layout="row">
+    <div flex-xs flex-gt-xs="50" layout="column">
       <md-card>
         <md-card-title>
           <md-card-title-text>
@@ -40,7 +40,7 @@
         </md-card-content>
       </md-card>
     </div>
-    <div flex="50" flex-sm="100" flex-xs="100" layout="column">
+    <div flex-xs flex-gt-xs="50" layout="column">
       <md-card>
         <md-card-title>
           <md-card-title-text>
diff --git a/src/components/card/demoCardActionButtons/index.html b/src/components/card/demoCardActionButtons/index.html
index 3a531c3a66b..25024bf6c8a 100644
--- a/src/components/card/demoCardActionButtons/index.html
+++ b/src/components/card/demoCardActionButtons/index.html
@@ -1,6 +1,6 @@
 <div ng-controller="AppCtrl" ng-cloak>
-  <md-content class="md-padding" layout="row" layout-wrap layout-align="center start" layout-xs="column" >
-    <div flex="50" flex-xs="100" layout="column">
+  <md-content class="md-padding" layout-xs="column" layout="row">
+    <div flex-xs flex-gt-xs="50" layout="column">
       <md-card>
         <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out">
         <md-card-title>
@@ -46,7 +46,7 @@
         </md-card-actions>
       </md-card>
     </div>
-    <div flex="50" flex-xs="100" layout="column">
+    <div flex-xs flex-gt-xs="50" layout="column">
       <md-card>
         <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out">
         <md-card-title>
diff --git a/src/components/card/demoInCardActions/index.html b/src/components/card/demoInCardActions/index.html
index a0601a1f098..d503ae30802 100644
--- a/src/components/card/demoInCardActions/index.html
+++ b/src/components/card/demoInCardActions/index.html
@@ -1,6 +1,6 @@
 <div ng-controller="AppCtrl" ng-cloak>
-  <md-content class="md-padding" layout="row" layout-wrap layout-align="center start" layout-xs="column">
-    <div flex="50"  flex-xs="100" layout="column">
+  <md-content class="md-padding" layout-xs="column" layout="row">
+    <div flex-xs flex-gt-xs="50" layout="column">
       <md-card>
         <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out">
         <md-card-title>
@@ -61,7 +61,7 @@
         </md-card-content>
       </md-card>
     </div>
-    <div flex="50" flex-xs="100" layout="column">
+    <div flex-xs flex-gt-xs="50" layout="column">
       <md-card>
         <md-card-header>
           <md-card-avatar>