You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.0 KiB
90 lines
2.0 KiB
.row { |
|
display: flex; |
|
flex-direction: row; |
|
list-style: none; |
|
flex-wrap: wrap; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
|
|
$one: calc(100 / 12 * 1%); |
|
|
|
@for $i from 1 through 12 { |
|
.col-#{$i} { |
|
flex-basis: calc($one * $i); |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
} |
|
} |
|
} |
|
|
|
/* s1 smartphones, iPhone, portrait 480x320 phones */ |
|
@media (max-width:320px) { |
|
$one: calc(100 / 12 * 1%); |
|
@for $i from 1 through 12 { |
|
.col-s1-#{$i} { |
|
flex-basis: calc($one * $i) !important; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
} |
|
} |
|
} |
|
|
|
/* s2 portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ |
|
@media (max-width:481px) { |
|
$one: calc(100 / 12 * 1%); |
|
@for $i from 1 through 12 { |
|
.col-s2-#{$i} { |
|
flex-basis: calc($one * $i) !important; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
} |
|
} |
|
} |
|
|
|
/* s3 portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ |
|
@media (max-width:641px) { |
|
$one: calc(100 / 12 * 1%); |
|
@for $i from 1 through 12 { |
|
.col-s3-#{$i} { |
|
flex-basis: calc($one * $i) !important; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
} |
|
} |
|
} |
|
|
|
/* s4 tablet, landscape iPad, lo-res laptops ands desktops */ |
|
@media (max-width:961px) { |
|
$one: calc(100 / 12 * 1%); |
|
@for $i from 1 through 12 { |
|
.col-s4-#{$i} { |
|
flex-basis: calc($one * $i) !important; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
} |
|
} |
|
} |
|
|
|
/* s5 big landscape tablets, laptops, and desktops */ |
|
@media (max-width:1025px) { |
|
$one: calc(100 / 12 * 1%); |
|
@for $i from 1 through 12 { |
|
.col-s5-#{$i} { |
|
flex-basis: calc($one * $i) !important; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
} |
|
} |
|
} |
|
|
|
/* s6 hi-res laptops and desktops */ |
|
@media (max-width:1281px) { |
|
$one: calc(100 / 12 * 1%); |
|
@for $i from 1 through 12 { |
|
.col-s6-#{$i} { |
|
flex-basis: calc($one * $i) !important; |
|
padding-left: 10px; |
|
padding-right: 10px; |
|
} |
|
} |
|
}
|
|
|