123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- @mixin row() {
- display:flex;
- flex-direction: row;
- flex-wrap: nowrap;
- align-items: stretch;
- @media only screen and (max-width: $small-bp), (orientation: portrait) {
- flex-wrap:wrap;
- }
- }
- .row{
- @include row;
- }
- .row-rl{
- @include row;
- }
- .small-row {
- @media only screen and (max-width: $small-bp), (orientation: portrait) {
- @include row;
- }
- }
- .med-row {
- @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
- @include row;
- }
- }
- .large-row {
- @media only screen and (min-width: $med-bp+1) {
- @include row;
- }
- }
- @mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
-
- box-sizing: border-box;
- padding-left: $gap*$offset;
- @if $col == $default_sum {
-
- padding-right: 0;
- }@else{
- padding-right: $gap;
- }
- &:last-child{padding-right: 0;}
-
-
-
- flex-basis: percentage($col/$sum);
- }
- @for $c from 1 through $default_sum {
- .col-#{$c} {
- @include col($c);
- }
-
- .small-col-#{$c} {
- @media only screen and (max-width: $small-bp), (orientation: portrait) {
- @include col($c);
- }
- }
-
- .med-col-#{$c} {
- @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) {
- @include col($c);
- }
- }
-
- .large-col-#{$c} {
- @media only screen and (min-width: $med-bp+1) {
- @include col($c);
- }
- }
- }
- @for $c from 1 through $default_sum - 1 {
- @for $o from 1 through $default_sum - $c {
- .col-#{$c}-offset-#{$o} {
- @include col($c, $o);
- }
- }
- }
|