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
angular · Jan 21, 2016 · 8871eb3 · 8871eb3
1 parent 9d30661
commit 8871eb3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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>