123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- @import "../../themes/ionic.globals";
-
- @import "./grid.mixins";
-
- // Grid
- // --------------------------------------------------
- // Using flexbox for the grid, originally inspired by Philip Walton:
- // http://philipwalton.github.io/solved-by-flexbox/demos/grids/
- // Column layout based on the Bootstrap grid system:
- // http://v4-alpha.getbootstrap.com/layout/grid/
-
-
- // Grid Breakpoints
- // --------------------------------------------------
-
- /// @prop - The minimum dimensions at which your layout will change,
- /// adapting to different screen sizes, for use in media queries
- $grid-breakpoints: (
- xs: 0,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px
- ) !default;
-
-
- // Grid Containers
- // --------------------------------------------------
-
- /// @prop - Maximum width of the grid for different screen sizes
- $grid-max-widths: (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1140px
- ) !default;
-
-
- // Grid Columns
- // --------------------------------------------------
-
- /// @prop - Number of columns for the grid
- $grid-columns: 12 !default;
-
- /// @prop - Total width of the padding for the grid
- $grid-padding-width: 10px !default;
-
- /// @prop - Padding for the columns for different screen sizes
- $grid-padding-widths: (
- xs: $grid-padding-width,
- sm: $grid-padding-width,
- md: $grid-padding-width,
- lg: $grid-padding-width,
- xl: $grid-padding-width
- ) !default;
-
-
- // Check that the Sass maps are declared correctly
- // --------------------------------------------------
-
- @include assert-ascending($grid-breakpoints, "$grid-breakpoints");
- @include assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
-
- @include assert-ascending($grid-max-widths, "$grid-max-widths");
-
-
- // Grid
- // --------------------------------------------------
-
- .grid {
- @include make-grid();
-
- &[fixed] {
- @include make-grid-max-widths();
- }
- }
-
- // Row
- // --------------------------------------------------
-
- .row {
- @include make-row();
- }
-
- // Columns
- // --------------------------------------------------
-
- .col {
- @include make-column-base();
- }
-
- @include make-grid-columns();
|