diff --git a/ionic/components/card/test/advanced/main.html b/ionic/components/card/test/advanced/main.html index 57b3d4eba52..1d4b87ae252 100644 --- a/ionic/components/card/test/advanced/main.html +++ b/ionic/components/card/test/advanced/main.html @@ -19,20 +19,22 @@

- - - - - - - - + + + + + + + + + + @@ -55,26 +57,28 @@

Card With An Inset Picture

Hello. I am a paragraph.

- - - - - - - - - - - + + + + + + + + + + + + + @@ -87,27 +91,29 @@

Card With An Inset Picture

This card was breaking the border radius. - - - - - - - - - - - - + + + + + + + + + + + + + +
diff --git a/ionic/components/grid/grid.scss b/ionic/components/grid/grid.scss index 341b523ca6f..165b50e84a5 100644 --- a/ionic/components/grid/grid.scss +++ b/ionic/components/grid/grid.scss @@ -45,22 +45,25 @@ $grid-responsive-lg-break: 1023px !default; // smaller than landscape tab } } - -ion-row { +ion-grid { display: flex; + flex-direction: column; + padding: ($grid-padding-width / 2); width: 100%; +} + +ion-row { + display: flex; + + width: 100%; &[wrap] { flex-wrap: wrap; } - &[flush] { - padding: 0; - } - &[top] { align-items: flex-start; } @@ -82,11 +85,6 @@ ion-row { } } -ion-row + ion-row { - margin-top: ($grid-padding-width / 2) * -1; - padding-top: 0; -} - ion-col { display: block; diff --git a/ionic/components/grid/test/basic/main.html b/ionic/components/grid/test/basic/main.html index 8e2453a5b0e..f7b9f8f1132 100644 --- a/ionic/components/grid/test/basic/main.html +++ b/ionic/components/grid/test/basic/main.html @@ -1,251 +1,253 @@ Grid - - -
- ion-col -
-
- -
- ion-col -
-
- -
- ion-col -
-
- -
- ion-col -
-
-
+ + + +
+ ion-col +
+
+ +
+ ion-col +
+
+ +
+ ion-col +
+
+ +
+ ion-col +
+
+
- - -
- ion-col[width-50] -
-
- -
- ion-col -
-
- -
- ion-col -
-
-
+ + +
+ ion-col[width-50] +
+
+ +
+ ion-col +
+
+ +
+ ion-col +
+
+
- - -
- ion-col[width-25] -
-
- -
- ion-col -
-
- -
- ion-col[width-25] -
-
-
+ + +
+ ion-col[width-25] +
+
+ +
+ ion-col +
+
+ +
+ ion-col[width-25] +
+
+
- - -
- ion-col[width-25] -
-
- -
- ion-col[width-25][offset-25] -
-
-
+ + +
+ ion-col[width-25] +
+
+ +
+ ion-col[width-25][offset-25] +
+
+
- - -
- ion-col -
-
- -
- ion-col
# -
-
- -
- ion-col
#
# -
-
- -
- ion-col
#
#
# -
-
-
+ + +
+ ion-col +
+
+ +
+ ion-col
# +
+
+ +
+ ion-col
#
# +
+
+ +
+ ion-col
#
#
# +
+
+
- - -
- ion-col[top] -
-
- -
- ion-col[center] -
-
- -
- ion-col[bottom] -
-
- -
- ion-col
#
# -
-
-
+ + +
+ ion-col[top] +
+
+ +
+ ion-col[center] +
+
+ +
+ ion-col[bottom] +
+
+ +
+ ion-col
#
# +
+
+
- - -
- [top] ion-col -
-
- -
- [top] ion-col -
-
- -
- [top] ion-col[bottom] -
-
- -
- ion-col
#
# -
-
-
+ + +
+ [top] ion-col +
+
+ +
+ [top] ion-col +
+
+ +
+ [top] ion-col[bottom] +
+
+ +
+ ion-col
#
# +
+
+
- - -
- [center] ion-col -
-
- -
- [center] ion-col -
-
- -
- [center] ion-col -
-
- -
- ion-col
#
# -
-
-
+ + +
+ [center] ion-col +
+
+ +
+ [center] ion-col +
+
+ +
+ [center] ion-col +
+
+ +
+ ion-col
#
# +
+
+
- - -
- [bottom] ion-col -
-
- -
- [bottom] ion-col[top] -
-
- -
- [bottom] ion-col -
-
- -
- ion-col
#
# -
-
-
+ + +
+ [bottom] ion-col +
+
+ +
+ [bottom] ion-col[top] +
+
+ +
+ [bottom] ion-col +
+
+ +
+ ion-col
#
# +
+
+
- - -
- [responsive-sm] ion-col -
-
- -
- [responsive-sm] ion-col -
-
- -
- [responsive-sm] ion-col -
-
- -
- [responsive-sm] ion-col -
-
-
+ + +
+ [responsive-sm] ion-col +
+
+ +
+ [responsive-sm] ion-col +
+
+ +
+ [responsive-sm] ion-col +
+
+ +
+ [responsive-sm] ion-col +
+
+
- - -
- [responsive-md] ion-col -
-
- -
- [responsive-md] ion-col -
-
- -
- [responsive-md] ion-col -
-
- -
- [responsive-md] ion-col -
-
-
+ + +
+ [responsive-md] ion-col +
+
+ +
+ [responsive-md] ion-col +
+
+ +
+ [responsive-md] ion-col +
+
+ +
+ [responsive-md] ion-col +
+
+
- - -
- [responsive-lg] ion-col[width-50][offset-25] -
-
- -
- [responsive-lg] ion-col[width-25] -
-
-
+ + +
+ [responsive-lg] ion-col[width-50][offset-25] +
+
+ +
+ [responsive-lg] ion-col[width-25] +
+
+
+