refactor(grid): add the css from the old grid

edit the existing grid tests to use latest attributes

fixes #10912
This commit is contained in:
Brandy Carney
2017-03-27 14:37:46 -04:00
parent ccc3696b9a
commit 9fd231a04c
4 changed files with 32 additions and 28 deletions

View File

@@ -12,6 +12,10 @@
margin-right: auto;
width: 100%;
display: flex;
flex-direction: column;
// Remove the padding from the grid and all immediate children columns
&[no-padding] {
padding: 0;

View File

@@ -48,7 +48,7 @@
<ion-col>
<button ion-button small>Button 1</button>
</ion-col>
<ion-col width-50 text-center>
<ion-col col-6 text-center>
<button ion-button small>Button 2</button>
<button ion-button small>Button 3</button>
</ion-col>

View File

@@ -33,7 +33,7 @@
</ion-row>
<ion-row>
<ion-col width-50>
<ion-col col-6>
<div>
ion-col[width-50]
</div>
@@ -51,7 +51,7 @@
</ion-row>
<ion-row>
<ion-col width-25>
<ion-col col-3>
<div>
ion-col[width-25]
</div>
@@ -61,7 +61,7 @@
ion-col
</div>
</ion-col>
<ion-col width-25>
<ion-col col-3>
<div>
ion-col[width-25]
</div>
@@ -69,12 +69,12 @@
</ion-row>
<ion-row>
<ion-col width-25>
<ion-col col-3>
<div>
ion-col[width-25]
</div>
</ion-col>
<ion-col width-25 offset-25>
<ion-col col-3 offset-3>
<div>
ion-col[width-25][offset-25]
</div>
@@ -105,17 +105,17 @@
</ion-row>
<ion-row>
<ion-col top>
<ion-col align-self-start>
<div>
ion-col[top]
</div>
</ion-col>
<ion-col center>
<ion-col align-self-center>
<div>
ion-col[center]
</div>
</ion-col>
<ion-col bottom>
<ion-col align-self-end>
<div>
ion-col[bottom]
</div>
@@ -127,7 +127,7 @@
</ion-col>
</ion-row>
<ion-row top>
<ion-row align-items-start>
<ion-col>
<div>
[top] ion-col
@@ -138,7 +138,7 @@
[top] ion-col
</div>
</ion-col>
<ion-col bottom>
<ion-col align-self-end>
<div>
[top] ion-col[bottom]
</div>
@@ -150,7 +150,7 @@
</ion-col>
</ion-row>
<ion-row center>
<ion-row align-items-center>
<ion-col>
<div>
[center] ion-col
@@ -173,13 +173,13 @@
</ion-col>
</ion-row>
<ion-row bottom>
<ion-row align-items-end>
<ion-col>
<div>
[bottom] ion-col
</div>
</ion-col>
<ion-col top>
<ion-col align-self-start>
<div>
[bottom] ion-col[top]
</div>
@@ -196,46 +196,46 @@
</ion-col>
</ion-row>
<ion-row responsive-sm>
<ion-col>
<ion-row>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
<ion-col>
<ion-col col-12 col-sm>
<div>
[responsive-sm] ion-col
</div>
</ion-col>
</ion-row>
<ion-row responsive-md>
<ion-col>
<ion-row>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
</ion-col>
<ion-col>
<ion-col col-12 col-md>
<div>
[responsive-md] ion-col
</div>
@@ -243,12 +243,12 @@
</ion-row>
<ion-row responsive-lg>
<ion-col width-50 offset-25>
<ion-col col-6 offset-3>
<div>
[responsive-lg] ion-col[width-50][offset-25]
</div>
</ion-col>
<ion-col width-25>
<ion-col col-3>
<div>
[responsive-lg] ion-col[width-25]
</div>

View File

@@ -33,10 +33,10 @@
<ion-grid style="padding: 10px 0;">
<ion-row>
<ion-col width-50>
<ion-col col-6>
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover left</a>
</ion-col>
<ion-col width-50 style="text-align: right;">
<ion-col col-6 style="text-align: right;">
<a (click)="presentListPopover($event)" style="padding: 5px;">Present List Popover right</a>
</ion-col>
</ion-row>