Mercurial > hg > mpiwgzen_wide
view sass-extensions/zen-grids/templates/unit-tests/sass/zen-grid-flow-item.scss @ 0:a3750d724105 default tip
initital
author | Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de> |
---|---|
date | Tue, 02 Jun 2015 09:16:36 +0200 |
parents | |
children |
line wrap: on
line source
/** * @file * Test zen-grid-flow-item() */ @import "zen"; #test-zen-grid-flow-item { /* Test zen-grid-flow-item(1) without setting $column-count */ @include zen-grid-flow-item(1); /* Test zen-grid-flow-item(1, 4) with 20px gutter */ @include zen-grid-flow-item(1, 4); /* Test zen-grid-flow-item(1, 4) with 15px gutter */ $zen-gutter-width: 15px; @include zen-grid-flow-item(1, 4); $zen-gutter-width: 20px; /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter and $zen-grid-width: 1000px */ $zen-column-count: 5; $zen-grid-width: 1000px; @include zen-grid-flow-item(1); $zen-column-count: 1; $zen-grid-width: 100%; /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px, $alpha-gutter: true and $omega-gutter: false */ $zen-column-count: 5; $zen-grid-width: 1000px; @include zen-grid-flow-item(1, $alpha-gutter: true, $omega-gutter: false); $zen-column-count: 1; $zen-grid-width: 100%; /* Test zen-grid-flow-item(1) with 5 columns, 20px gutter, $zen-grid-width: 1000px and $omega-gutter: false */ $zen-column-count: 5; $zen-grid-width: 1000px; @include zen-grid-flow-item(1, $omega-gutter: false); $zen-column-count: 1; $zen-grid-width: 100%; /* Test zen-grid-flow-item(1, 4) with 15px gutter and $zen-float-direction: right */ $zen-gutter-width: 15px; $zen-float-direction: right; @include zen-grid-flow-item(1, 4); $zen-gutter-width: 20px; $zen-float-direction: left; /* Test zen-grid-flow-item(1, 4) with 15px gutter and $alpha-gutter: true */ $zen-gutter-width: 15px; @include zen-grid-flow-item(1, 4, $alpha-gutter: true); $zen-gutter-width: 20px; /* Test zen-grid-flow-item(1, 4) with 15px gutter and $omega-gutter: false */ $zen-gutter-width: 15px; @include zen-grid-flow-item(1, 4, $omega-gutter: false); $zen-gutter-width: 20px; /* Test zen-grid-flow-item(3, 4) with 20px gutter and $alpha-gutter: true */ @include zen-grid-flow-item(3, 4, $alpha-gutter: true); /* Test zen-grid-flow-item(3, 4) with 20px gutter and $omega-gutter: false */ @include zen-grid-flow-item(3, 4, $omega-gutter: false); /* Test zen-grid-flow-item(1, 4) with 15px gutter, $zen-float-direction: right and $alpha-gutter: true */ $zen-gutter-width: 15px; $zen-float-direction: right; @include zen-grid-flow-item(1, 4, $alpha-gutter: true); $zen-gutter-width: 20px; $zen-float-direction: left; /* Test zen-grid-flow-item(1, 4) with $zen-box-sizing: content-box and 10% gutter */ $zen-gutter-width: 10%; $zen-box-sizing: content-box; @include zen-grid-flow-item(1, 4); $zen-gutter-width: 20px; $zen-box-sizing: border-box; /* Test zen-grid-flow-item(1, 4) with $zen-auto-include-flow-item-base: false */ $zen-auto-include-flow-item-base: false; @include zen-grid-flow-item(1, 4); }