javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(grid): Added classes, variables and mixins for responsive grid options

Browse Source
This commit is contained in:
Adam Bradley
2014-02-11 10:06:33 -06:00
parent 0d926583a4
commit 1cdb999e56
4 changed files with 97 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
scss/_grid.scss
View File

@@ -123,27 +123,12 @@
}
/* Responsive Grid Attribute */
/* Adding a class of responsive to a row */
/* Responsive Grid Classes */
/* Adding a class of responsive-X to a row */
/* will trigger the flex-direction to */
/* change to column and add some margin */
/* to any columns in the row for clearity */
/* Adjust the max-width value to fit your own needs */
/* Defaults to 767px (iPad portrait width)*/
@media (max-width: $grid-responsive-break) {
.responsive .col {
width: 100%;
margin-bottom:15px;
}
.responsive {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
}
@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);

19
scss/_mixins.scss
View File

@@ -589,3 +589,22 @@
-moz-justify-content: $value;
justify-content: $value;
}
@mixin responsive-grid-break($selector, $max-width) {
@media (max-width: $max-width) {
#{$selector} {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.col {
width: 100%;
margin-bottom: ($grid-padding-width * 3) / 2;
}
}
}
}

4
scss/_variables.scss
View File

@@ -495,7 +495,9 @@ $modal-bg-color: #fff !default;
// -------------------------------
$grid-padding-width: 10px !default;
$grid-responsive-break: 767px !default;
$grid-responsive-sm-break: 567px !default; // smaller than landscape phone
$grid-responsive-md-break: 767px !default; // smaller than portrait tablet
$grid-responsive-lg-break: 1023px !default; // smaller than landscape tablet
// Action Sheets

71
test/grid.html
View File

@@ -215,10 +215,79 @@
</div>
</div>
<div class="row responsive-sm">
<div class="col">
<div>
.responsive-sm .col
</div>
</div>
<div class="col">
<div>
.responsive-sm .col
</div>
</div>
<div class="col">
<div>
.responsive-sm .col
</div>
</div>
<div class="col">
<div>
.responsive-sm .col
</div>
</div>
</div>
<div class="row responsive-md">
<div class="col">
<div>
.responsive-md .col
</div>
</div>
<div class="col">
<div>
.responsive-md .col
</div>
</div>
<div class="col">
<div>
.responsive-md .col
</div>
</div>
<div class="col">
<div>
.responsive-md .col
</div>
</div>
</div>
<div class="row responsive-lg">
<div class="col">
<div>
.responsive-lg .col
</div>
</div>
<div class="col">
<div>
.responsive-lg .col
</div>
</div>
<div class="col">
<div>
.responsive-lg .col
</div>
</div>
<div class="col">
<div>
.responsive-lg .col
</div>
</div>
</div>
<hr>
<div class="padding">
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</div>
</div>